开发您的第一个 Visual WebGui 应用程序
3.07/5 (13投票s)
通过示例应用程序了解 Visual WebGui
引言
虽然 ASP.NET 和 JSP 等 Web 开发环境在为 Web 应用程序开发创建丰富环境方面取得了巨大进步，但它们始终针对从内容丰富的网站到类似 OWA 的应用程序等非常广泛的应用程序。通过这样做，它们被迫做出对应用程序开发人员来说非常痛苦的妥协。页面、HTML、请求和响应等概念源于 Web 开发的历史演变，并不真正适合开发应用程序。虽然 Atlas 等 AJAX 框架为这些环境提供了一个非常好的版本，但它们仍然基于 Web 开发概念，这比桌面开发概念增加了很大的复杂性。
背景
Visual WebGui 是一个全新的 AJAX 框架，它对 Web 应用程序开发采取了不同的方法，专门旨在简化构建高度复杂的应用程序，如 Outlook Web Access (OWA)。Visual WebGui 使开发人员能够通过使用包含设计时功能的完整 WinForms 服务器端 API 来创建 Web 应用程序。通过采用 WinForms 对象模块和开发概念，Visual WebGui 完全简化了 Web 应用程序的开发。当开发像 Outlook Web Access 这样的 Web 应用程序时，允许您像 VB/WinForms 程序员一样编程而不是像 Web 程序员一样编程更有意义。
Visual WebGui 完全免费用于非商业目的的部署，并且也将作为开源项目在 SourceForge.net 上提供。Visual WebGui 网站有多个免费许可证，您可以申请这些许可证以在您的生产站点中免费使用它。
本文创建了一个完全支持 AJAX 的增量资源管理器应用程序，左侧窗格浏览 wwwroot 目录，右侧窗格显示当前选定文件夹的文件。
Using the Code
要开始开发 Visual WebGui，您需要从 Visual WebGui 下载页面 下载 SDK。安装将把几个程序集安装到您的 GAC 中，从而为您的开发环境添加 Visual WebGui 功能。安装 Visual WebGui SDK 将在您的 Visual Studio 中添加两个新项目（WebGui 应用程序和 WebGui 控件库）。WebGui 应用程序项目将为您创建一个 ASP.NET 新项目，其中一个名为 Form1.cs 的类，而不是 ASP.NET 项目模板通常创建的 WebForm1.aspx 文件。继承自 Gizmox.WebGUI.Forms.Form 类，Form1.cs 自动导致此文件具有类似 WinForms 的设计时行为。当您进入 Form1.cs 类的设计界面时，您的工具箱窗格中将有一个额外的 WebGUI 工具箱可用。这些组件可以拖到设计界面上，并像 WinForms 组件在 WinForms 设计界面上使用一样。在任何给定组件的属性窗格中，您可以更改组件属性，包括布局属性，例如 Dock 和 Anchoring，它们是 WinForm 的组件布局方式，并且 Visual WebGui 完全支持它们。
在运行应用程序之前，您需要将表单注册到 Visual WebGui web.config 配置部分的虚拟页面，并将 Visual Studio 启动页设置为此虚拟页面。Visual WebGui 使用“.wgx”IIS 脚本映射扩展，需要将其添加到 IIS 中，其定义与“.aspx”脚本映射扩展相同，但不需要勾选“检查文件是否存在”复选框，因为 Visual WebGui 使用映射到 Gizmox.WebGUI.Forms.Form 继承类的虚拟页面。设置这些配置后，您可以像调试 WinForms 应用程序一样开始调试您的应用程序。
步骤 1 - 创建新的 WebGui 应用程序项目
打开新项目对话框并选择 WebGui 应用程序项目。在项目名称文本框中，输入 WebGUIExplorer 并按确定。
Visual WebGui 将为您创建一个新的 WebGui 应用程序项目，它既是 ASP.NET 又是 WinForms，因为其结构是 ASP.NET 的，并且表单类的行为类似于 WinForm 表单。双击 Visual WebGui form1.cs 页面将打开设计界面，该界面与 WinForm 设计界面完全相同。Visual Studio 工具箱有一个名为 WebGUI 的额外窗格，您可以在其中找到与 WinForms 组件相同的 Visual WebGui 组件。您可以像在 WinForms 应用程序中一样在设计界面上拖放组件，并且 Visual WebGui 设计器将在 InitializeComponent 方法中生成代码。
步骤 2 - 创建主窗体
从 WebGUI 工具箱窗格中，将一个 treeview 组件拖到设计界面上。设计器将为您创建一个新的 treeview，在属性窗格中，您可以更改组件属性。从属性窗格中，选择 Dock 属性并将其更改为 Left。这将使设计器将您的 treeview 停靠到左侧。您可以拖动 treeview 的右侧手柄来更改 treeview 的宽度。现在，从 WebGUI 工具箱窗格中，选择一个拆分器组件并将其拖到设计界面上。默认情况下，设计器将对拆分器应用左侧停靠，这在这种情况下效果很好。将一个 listview 拖到设计界面上并将其停靠方式更改为填充。填充停靠值使组件占用所有剩余空间。
步骤 3 - 填充树视图
在属性窗格打开时，通过单击设计窗体标题转到窗体的属性窗格。将属性窗格模式更改为显示事件并双击 Load 事件。设计器将为您创建一个空的事件处理程序来处理 Load 事件。这在加载 Visual WebGui 窗体时执行。创建一个接收 TreeNodeCollection nodes 和 string path 参数的新方法。从事件处理程序中，我们将调用 LoadFolder 方法，传入 treeview1.Nodes 和 @"C:\inetpub\wwwroot"，这将在加载文件夹时加载第一级文件夹。
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);
}
}
在 LoadFolder 方法中，我们将添加代码，该代码将枚举当前路径中的文件夹并创建附加到节点集合的 TreeNode 对象。
步骤 4 - 填充列表视图
转到 Form1 构造函数，并添加新的列标题，如以下代码片段所示，并将 UseInternalPaging 属性设置为 true，以使 Visual WebGui 能够内部处理分页。
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;
}
回到设计器，为 treeview AfterSelect 事件创建一个新的事件处理程序，并在事件处理程序中，您使用 e.Node.Tag 检索需要显示文件的路径。在开始向 listview 添加项目之前，您应该清除所有以前的项目。
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);
}
}
步骤 5 - 添加图标以美化 UI
Visual WebGui 的资源管理与 WinForms 不同，因为执行上下文不同。在多线程环境中处理实际图像会稍重，因此 Visual WebGui 没有使用图像，而是采用了资源句柄的概念，这些句柄实际上是对实际资源的引用。通过这种方式，Visual WebGui 服务器可以优化资源的缓存和检索，因为指向相同资源句柄的两个资源句柄在比较时是相等的。Visual WebGui 包含一些默认资源句柄，例如 IconResourceHandler 和 ImageResourceHandle，它们是对 Visual WebGui 配置部分中定义的目录的引用。资源句柄使用 Java 风格的文件定位方法，这意味着文件夹由点分隔。
向 Form1.cs 添加一个新的 using 指令，以便您可以创建一个资源句柄对象
using Gizmox.WebGUI.Common.Resources;
向 TreeNode 和 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");
}
}
结论
从这个例子可以看出，Visual WebGui 以 WinForms 为基础，简化了应用程序开发。设计器、对象模型和语法与 WinForms 完全相同，这意味着您可以快速将现有的 WinForms 项目、代码和经验迁移到 Visual WebGui 平台。创建复杂的交互式浏览器应用程序不一定需要掌握 AJAX、Javascript、XML 或 HTML。它所需要的只是熟悉已证明具有生产力的桌面应用程序编程技术。
历史
- 创建于 2006 年 4 月 20 日，作者：Guy Peled