[翻译]建立你的第一个Visual WebGui应用程序
By: Guy
User Rating:
Categories: How to?
介绍
虽然目前的Web开发环境，例如ASP.NET 和JSP，在建立富Web应用方面有了长足的进步，但是这些环境因为要满足开发多种从内容丰富的门户到类似OWA的应用，不得不有所妥协，对于开发者来说开发某种类型的Web应用不得不忍受痛苦了。pages, html, requests and responses等历史上继承来的多种多样复杂的概念确实不适和开发web应用程序。虽然各种AJAX frameworks给这些开发环境增色不少，但是毕竟也是基于原来的Web开发概念，甚至更加剧了Web开发的复杂性，远远超过了开发桌面的应用。
背景
Visual WebGui是一个新型的AJAX framework，给开发Web应用带来了一条不同的方式，并且特别适合开发一个高度复杂的应用，就像Outlook Web Access (OWA). Visual WebGui使得开发者可以使用完全的WinForms服务器端的API，并且有设计时支持。通过借用WinForms的对象控件和开发方式的概念，Visual WebGui使得开发web应用变得非常简单。当当你使用它开发一个类似OWA的web应用的时候，更像是用VB/WinForms开发，而不是在写一个web应用。
Visual WebGui是开源的并且对于非商业应用是免费的（SourceForge.net下载源码）。Visual WebGui 站点上有多种免费license类型，你甚至可以用到你的产品当中。
本文目的是创建一个AJAX化的web应用，用于浏览wwwroot目录，左边是目录树，右边窗格中显示当前选中目录中的文件。
代码
要开始使用Visual WebGui开发，你首先需要下载SDK。download page.
安装程序会在你的GAC中添加几个Assembly，并且在你的开发环境中添加开发Visual WebGui项目的能力。在你的Visual Studio中会多出两种应用项目类型：WebGui Application and WebGui Control Library。WebGui Application项目类型用于创建ASP.NET新项目，项目中会有一个名为Form1.cs的类而不是你所熟悉的WebForm1.aspx。Form1.cs继承自Gizmox.WebGUI.Forms.Form
，并且有着和WinForms类似的设计时支持。当你打开Form1.cs的设计界面时，在你的工具箱中，会发现有一个新增的 WebGUI工具组。里面的组件就像WinForm的组件一样可以拖拽的设计区。选中设计区中的组件后，你可以在属性窗口中更改属性，特别的是包含有一些像WinForm中一样的Dock和Anchoring等的属性，这些都是Visual WebGui所支持的。
在你开始运行应用之前，你需要在Visual Studio中，打开项目属性，将开始页设置为名字为Form1.wgx的虚拟页面。Visual WebGui 使用".wgx"扩展名，如果使用IIS服务，你需要参照".aspx"的映射，在IIS中添加对wgx的扩展名映射，但是，不能选中“检查文件是否存在的”复选框，应为Visual WebGui使用的是虚拟页面。设置完成后，你就可以像调试一个WinForms应用一样调试你的程序了。
第一步：建立一个WebGui Application项目
打开新建项目对话框，选中”WebGui Application project“，然后输入项目的名称，点击确定按钮。
Visual WebGui将会建立一个既像ASP.NET，又有WinFroms特征的项目，这是因为项目的结构类似于ASP.NET，但是包含的窗体却像是WinForm形式的窗体。双击form1.cs，打开设计界面，你会发现完全类似于WinForm的设计界面。Visual
Studio的工具箱中，已经添加了一组名为WebGUI的组件，你将发现这些组件和WinForms中的组件几乎一模一样。你可以像开发WinForms程序那样拖拽添加这些组件，Visual WebGui也会自动在InitializeComponent方法中添加生成代码。
第二步：建立主窗体
从WebGUI工具箱中拖拽一个treeview控件添加到设计区中。设计器就会为你创建一个TreeView，你可以在属性窗中更改控件的属性值。在属性窗中选择Dock属性，值改为Left。这将使设计器把treeview控件固定在左边。你可以调整treeview的宽度。现在，从WebGUI工具箱中选择splitter控件，并且拖拽到设计区，设计器会默认的将splitter的dock值设为left，在这里正好符合我的意图。再添加一个listview，Dock设为Fill，这将使得它铺满剩下的设计区空间。
第三步：填充treeview
在属性窗中的下拉框中选中form以显示form的属性，然后切换到事件页，双击Load事件，设计器将会产生一个空的事件处理程序。load事件将在Visual WebGui窗体装载后执行。添加一个新的方法LoadFolders，接收TreeNodeCollection 和 表示路径的字符串 两个参数。在load事件中调用此方法，参数使用treeview1.Nodes和 @"C:"inetpub"wwwroot"，这使得程序装载第一层的文件夹列表。
{
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; // 这个属性是一个WinForms API中没有的扩展属性
node.HasNodes = hasFolders;
nodes.Add(node);
}
}
在LoadFolder方法中我们添加了遍历当前目录下的子目录，然后添加到传来的TreeNode的子节点中。
第四步：填充listview
定位到Form1的构造函数添加如下代码，在这里设置了listview的UseInternalPaging属性为true，这将使得Visual WebGui自动为我们处理分页逻辑。
{
// 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;
}
下面为treeview添加一个AfterSelect的事件处理程序，程序中将使用e.Node.Tag来接收需要显示文件的路径名。在向listview中添加项目之前，需要先清除现有的项目。
{
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);
}
}
第四步：添加图标美化一下界面
Visual WebGui的资源管理方式和WinForms是不同的，由于运行环境不同，在多线程的情况下像那样处理资源就有些负担太大了。Visual WebGui有独特的引用资源的处理方式，在这种方式下Visaul WebGui
服务器端可以优化缓存，当不同的线程引用同一资源时可以提高速度节省资源占用。Visual WebGui包括一些默认的资源处理程序IconResourceHandler和 ImageResourceHandle，在Visual WebGui配置中指向不同的路径。资源处理程序使用java式的定位方法，这意味着路径名之间用点分隔。
在Form1.cs中添加新的引用，以便你可以创建资源处理对象：
using Gizmox.WebGUI.Common.Resources;
下面的程序再TreeNode和ListViewItem中添加图标:
{
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");
}
}
