Technical Articles

Step 3 - Populating the tree view

Go to the properties pane of the form by clicking on the design form title while the properties pane is open. Change the properties pane mode to show events and double click the Load event. The designer will create you an empty event handler to handle the Load event. Which is executed when a Visual WebGui form is loaded. Create a new method that recieves TreeNodeCollection nodes and string path arguments. From the event handler we are going to call a the LoadFolder method with treeview1.Nodes and @"C:\inetpub\wwwroot", this will load the first level folders when the folder is loaded.

private void Form1_Load(object sender, System.EventArgs e)
{
    LoadFolders(treeView1.Nodes,@"C:\inetpub\wwwroot");
}

private void treeView1_BeforeExpand(object sender, Gizmox.WebGUI.Forms.TreeViewCancelEventArgs e)
{
    if(!e.Node.Loaded)
    {
        LoadFolders(e.Node.Nodes,e.Node.Tag as string);
        e.Node.Loaded = true;
    }
}

private void LoadFolders(TreeNodeCollection nodes,string path)
{

    DirectoryInfo dir = new DirectoryInfo(path);

    bool hasFolders = dir.GetDirectories().Length>0;

    // Loop all sub directories
    foreach(DirectoryInfo subdir in dir.GetDirectories())
    {
        // Create a new tree node
        TreeNode node = new TreeNode();

        node.Text = subdir.Name;
        node.Tag = subdir.FullName;
        node.IsExpanded = !hasFolders;
        node.Loaded = !hasFolders; // This property is an extension to the WinForms API
        node.HasNodes = hasFolders;

        nodes.Add(node);
    }
    
}

In the LoadFolder method we will add code that will enumarate the folders in the current path and create TreeNode objects appended to the nodes collection.

Step 4 - Populating the list view

Go to the Form1 constructor and add new column headers as shown in the next code snippet and set the UseInternalPaging property to true to enable Visual WebGui to handle paging internaly.

public Form1()
{
    // This call is required by the WebGUI Form Designer.
    InitializeComponent();

    listView1.Columns.Add(new ColumnHeader("Name","Name"));
    listView1.Columns.Add(new ColumnHeader("Extension","Extension"));
    listView1.UseInternalPaging = true;
}

Go back to the designer and create a new event handler for the treeview AfterSelect event and with in the event handler you use e.Node.Tag to retrive the path that you need to show files from. Before you start adding items to the listview you should clear all the previous items.

private void treeView1_AfterSelect(object sender, Gizmox.WebGUI.Forms.TreeViewEventArgs e)
{
    DirectoryInfo dir = new DirectoryInfo(e.Node.Tag as string);

    listView1.Items.Clear();

    // Loop all files in directory
    foreach(FileInfo file in dir.GetFiles())
    {
        ListViewItem item = listView1.Items.Add(file.Name);
        item.SubItems.Add(file.Extension);
    }

}

Step 4 - Adding icons to spice up the UI

Visual WebGui has a diffrent resource management than WinForms as the execution context is diffrent handling actual images would be slightly heavy for a multithreaded enviroment and that way instead of images Visual WebGui has a concept of resource handles which are actuary references to actual resources. This way the Visaul WebGui server can optimize caching and retrival for resources as two resource handles pointing to the same resource handle are equal when compared. Visual WebGui contains some default resource handles such as IconResourceHandler and ImageResourceHandle that are references to directories defined with in the Visual WebGui configuration section. The resource handle uses java style file location method which means that folders are delimited by a dot.

Add a new using directive to the Form1.cs so you can create a resource handle object:

using Gizmox.WebGUI.Common.Resources;

Add icons to the creation of the TreeNode and the ListViewItem:

private void LoadFolders(TreeNodeCollection nodes,string path)
{

    DirectoryInfo dir = new DirectoryInfo(path);

    bool hasFolders = dir.GetDirectories().Length>0;

    // Loop all sub directories
    foreach(DirectoryInfo subdir in dir.GetDirectories())
    {
        // Create a new tree node
        TreeNode node = new TreeNode();

        node.Text = subdir.Name;
        node.Tag = subdir.FullName;
        node.IsExpanded = !hasFolders;
        node.Loaded = !hasFolders; // This property is an extension to the WinForms API
        node.HasNodes = hasFolders;
        
        // Add icon to tree node
        node.Image = new IconResourceHandle("folder.gif");

        nodes.Add(node);
    }
    
}

private void treeView1_AfterSelect(object sender, Gizmox.WebGUI.Forms.TreeViewEventArgs e)
{
    DirectoryInfo dir = new DirectoryInfo(e.Node.Tag as string);

    listView1.Items.Clear();

    // Loop all files in directory
    foreach(FileInfo file in dir.GetFiles())
    {
        ListViewItem item = listView1.Items.Add(file.Name);
        item.SubItems.Add(file.Extension);
        
        // Add icon to item
        item.Image = new IconResourceHandle("file.gif");
    }

}

Conclusion

As you can see from this example Visual WebGui simplifies application development by using WinForms as its basis. The designer, object model and syntax are exactly like WinForms which means you can quickly migrate existing WinForms projects, code and experience to the Visual WebGui platform. Creating complex, interactive browser based applications doesn't have to entail mastering AJAX, Javascript, XML or HTML. All it requires is familiarity with desktop application programming techniques which have proven themselves as productive.