65.9K
CodeProject 正在变化。 阅读更多。
Home

开发 Visual WebGui Gateway

dudegizmox
starIconstarIcon
emptyStarIcon
starIcon
emptyStarIconemptyStarIcon

2.73/5 (5投票s)

2006年5月5日

CPOL

7分钟阅读

viewsIcon

59435

downloadIcon

543

Visual WebGui 网关使用入门

Sample Image - visualwebgui_gateway1.gif

引言

Visual WebGui 基本上利用了 WinForms 对象模型，为开发人员提供了一种全新的开发体验，用于开发像 Outlook Web Access 这样的富互联网应用程序。这个对象模型涵盖了创建 Outlook Web Access 应用程序所需的 90% 的功能。那么我们如何将 WinForms 对象模型和 Web 开发连接起来呢？通过网关（Gateways）的概念。

背景

每个 WebGui 组件都可以使用 IGatewayControl 接口声明自己为 WebGui 网关，这允许控件通过声明动作来声明由控件处理的虚拟 URL。IGatewayControl 包含一个获取动作名称并应返回网关处理程序的方法。网关处理程序以与 HTTP 处理程序完全相同的方式处理请求，这实际上意味着您也可以使用 HTTP 处理程序。这意味着您实际上可以提供由 WinForms 对象模型托管的嵌入式 ASPX 页面，并可以与该模型进行交互，从而轻松实现 WebGui 与传统应用程序之间的互操作性。

您可以使用网关的其他地方：

  • 向 IFRAMES 提供基于 HTML 的内容
  • 提供当前视图的可打印版本
  • 与小程序、Flash、ActiveX 等进行交互
  • 使用 ASP.NET 现成的控件，如 Janus Grid
  • 下载文件

Visual WebGui 对非商业用途完全免费使用和部署，并且也是 SourceForge.net 上的开源项目。Visual WebGui 网站提供多种免费许可证，您可以通过申请在生产环境中免费使用。

本文创建了一个文件列表，可以通过选择文件进行预览。

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，这些是 WinForms 的组件布局方式，并且 Visual WebGui 完全支持它们。

在运行应用程序之前，您需要将表单注册到 Visual WebGui 的 web.config 配置部分，将其映射到虚拟页面，并将 Visual Studio 的起始页设置为此虚拟页面。Visual WebGui 使用一个“.wgx”IIS 脚本映射扩展名，该扩展名需要添加到 IIS 中，其定义与“.aspx”脚本映射扩展名相同，但无需勾选“检查文件是否存在”复选框，因为 Visual WebGui 使用映射到 Gizmox.WebGUI.Forms.Form 继承类的虚拟页面。设置这些配置后，您就可以像调试 WinForms 应用程序一样调试您的应用程序了。

步骤 1 - 创建新的 WebGui 应用程序项目

打开新项目对话框并选择 WebGui 应用程序项目。在项目名称文本框中，输入 WebGUIGateway 并按 OK。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 工具箱窗格中，将一个 listview 组件拖放到设计界面上，并在属性窗格中将其停靠到顶部。拖动一个拆分器并将其也停靠到顶部。将拆分器停靠到顶部会使其改变 listview 的高度。拖动一个 htmlbox 并将其停靠方式更改为填充。为文件名和文件扩展名添加列表视图的两列。现在您已经完成了本教程的用户界面部分。

步骤 3 - 填充列表视图

转到表单属性并切换到事件视图。双击 Load 事件处理程序，设计器将为您创建一个空的事件处理程序。将以下代码添加到处理程序中，该处理程序将使用给定路径中的文件列表填充 listview。将路径更新为计算机上包含 GIF 图像的有效路径。请注意，代码生成列表项并在 Tag 属性中设置文件的完整路径。

private void Form1_Load(object sender, System.EventArgs e)
{
    DirectoryInfo objDir = new DirectoryInfo(@"C:\Inetpub\wwwroot\images");

    foreach(FileInfo objFile in objDir.GetFiles("*.gif"))
    {
        ListViewItem item = listView1.Items.Add(objFile.Name);
        item.SubItems.Add(objFile.Extension);
        item.Tag = objFile.FullName;
    }
}

步骤 4 - 创建网关处理程序

网关处理程序实际上是一个继承自 IGatewayHandler 的类，该类有一个名为 ProcessGatewayRequest 的方法。ProcessGatewayRequest 方法处理请求的方式与继承自 IHTTPHanlder 的类完全相同。在 ProcessGatewayRequest 方法中，您可以将任何内容写入响应，在此示例中，处理程序获取其构造函数中获得的路径并将该文件写入响应。在您的项目中创建此文件。

using System;
using System.Web;
using Gizmox.WebGUI.Common.Interfaces;

namespace WebGUIGatway
{
    public class FileHandler : IGatewayHandler
    {
        private string _path;

        public FileHandler(string path)
        {
            _path = path;
        }

        #region IGatewayHandler Members

        public void ProcessGatewayRequest
		(IContext objContext, IRegisteredComponent objComponent)
        {
            HttpContext.Current.Response.WriteFile(_path);
        }

        #endregion
    }
}

步骤 5 - 创建网关

为了使用网关，您需要有一个控件继承 IGatewayControl 接口，该接口位于 Gizmox.WebGUI.Common.Interfaces 命名空间下。单个控件可以公开多个网关。控件网关由动作代码标识。动作代码充当页面名称，允许通过名称引用网关。为了引用网关，您需要创建一个 GatewayReference 对象。GatewayReference 可以通过组件和动作代码构建，它们共同提供唯一的网关引用。因此，让我们通过实现 IGatewayControl 接口使我们的表单成为网关。IGatewayControl 有一个名为 GetGatewayHandler 的方法，该方法带有一个动作参数。使用动作参数，我们可以为不同的动作返回不同的网关处理程序。因此，让我们使用我们之前创建的网关处理程序来处理名为“OpenFile”的动作。请注意，在路径构造函数中，我们使用当前选定项的 Tag 属性来获取选定文件的路径。

public IGatewayHandler GetGatewayHandler(IContext objContext, string strAction)
{
    IGatewayHandler handler = null;

    switch(strAction)
    {
        case "OpenFile":
            if(listView1.SelectedItem!=null)
            {
                handler = new FileHandler((string)listView1.SelectedItem.Tag);
            }
            break;
    }

    return handler;
}

步骤 6 - 使用网关

返回设计器并选择 listview 控件。在列表视图的属性中，转到事件部分并双击 SelectedIndexChanged 事件。在 SelectedIndexChanged 事件处理程序中，让我们创建一个 GatewayReference 对象，该对象可以在 Gizmox.WebGUI.Common.Gateways 命名空间中找到。将 GatewayReference 的构造函数传递一个对表单控件的引用，并指定网关的动作代码。当调用 GatewayReference 类的 ToString 方法时，我们获取指定网关的相对路径。使用相对路径设置 htmlbox 以显示当前网关。调用 HtmlBox 上的 Update 方法将导致它重新加载控件。

private void listView1_SelectedIndexChanged(object sender, System.EventArgs e)
{
    GatewayReference reference = new GatewayReference(this,"OpenFile");
    htmlBox1.Url = reference.ToString();
    htmlBox1.Update();
}

结论

正如您从这个示例中看到的，网关扩展了 WinForms 对象并弥合了环境差异。在需要传统 Web 开发概念并且可以用于提供传统资源和 Visual WebGui 之间的互操作性的地方，使用网关非常方便。例如，为 ASP.NET 设计的第三方控件可以通过使用网关轻松使用，但这将在另一个教程中介绍。

历史

  • 创建于 2006年5月5日，作者：Guy Peled
© . All rights reserved.