将自定义 HTML5 实现与基于 .NET 的 Visual WebGui 富客户端集成

引言

HTML5

HTML5 作为新的 W3C 标准的出现，支持多媒体、丰富的图形、动画和丰富的 Web 应用程序功能，预示着新一代的原生跨平台 Web 应用程序的到来，它们能够集成酷炫的功能而无需插件。它独立于插件、专有运行时和视频格式，并且被所有主流浏览器广泛采用，这使得许多行业观察家预测，不仅 Silverlight，甚至 Flash 都将走向终结。Microsoft IE9 支持大多数 HTML5 功能，Firefox、Chrome、Safari、Opera 和移动浏览器也同样支持。

jQuery 和 HTML5

当涉及到 RIA 开发中使用 HTML5 时，会出现许多障碍，因为复杂性会显着增加。让 Web 应用程序完全按照您想要的方式工作可能既复杂又耗时，还可能令人沮丧。

JavaScript 框架在抽象与浏览器的通信方面发挥了重要作用，而 jQuery 目前是其中最受欢迎的。最新的 jQuery 函数库为开发人员提供了高效的函数，可以动态编写 HTML5 代码功能。这样，开发人员就可以使用更简单的命令集。

VWG ProStudio .NETHTML5

随着 Visual WebGui ProStudio .NETHTML5 的发布，HTML5 的强大功能扩展到了数据处理——抽象了 Ajax 连接和数据绑定的复杂性，而无需服务器端数据绑定的复杂性。

免费测试版在此处下载

Visual WebGui ProStudio .NETHTML5 模板机制基于 Gizmox 创建的 JQT 项目，可在此处获取。此处。该引擎是 XSLT 机制的轻量级替代方案。它支持更广泛的浏览器并提高效率。

在 Visual WebGui ProStudio .NETHTML5 下进行开发是一种独特的端到端组合，结合了纯 Microsoft .NET 开发、通过 jQuery 抽象 JavaScript / HTML5 功能以及抽象 Ajax、数据库连接和数据绑定。随着 ProStudio .NETHTML5 的发布，诞生了唯一的完整开发环境，程序员可以在其中使用 Visual Studio 开发高效运行、以数据为中心的 HTML5 Web 应用程序。

在本文中，我将演示如何采用完整的自定义 HTML5 实现（使用 jQuery 和 CSS3）并将其集成到 Visual WebGui 富客户端中。

示例范围

我们将看到如何将幻灯片放映（轮播）的 jQuery 实现用于 VWG 应用程序。

所有相关源文件均可在文章末尾的“下载”部分下载。

示例要求

所需工具

Visual WebGui ProStudio .NETHTML5 Beta 1 或更高版本。根据 MS Visual Studio 2005/2008/2010 的版本选择安装。

支持的浏览器

Chrome

Mozilla Firefox 4

Safari 5

尽管 IE9 支持 HTML5 功能，但它不支持某些 HTML4 功能。因此，不推荐将它作为此示例的浏览器。

示例 - 原始实现

以下示例是一个简单的幻灯片放映（轮播）实现。它基本上是使用 jQuery 和 CSS3 操作的 div 元素的表示。

您可以此处浏览它。

CSS 相关属性

过渡相关函数

定义幻灯片、倾斜和缩放

初始化幻灯片

处理按键

示例 - 预期结果

我们希望将原始 jQuery 实现集成到 VWG Webmail 示例应用程序中。Webmail 应用程序是 MS Office 2010 Outlook 的模拟 Web UI（可在此处在线查看）。

目标是为默认的电子邮件列表视图提供一个替代电子邮件视图。这个替代视图实际上就是上面显示的幻灯片放映（轮播），它将绑定到保存所有电子邮件数据的数据库。通过视图子菜单可以切换默认视图和新的替代视图。

ListView

幻灯片放映

示例 - 创建自定义控件

我们选择了 VWG TabControl 作为最适合绑定幻灯片放映行为的原生控件，其中 TabPages 将显示为幻灯片放映。

首先，我们创建两种继承自 TabControl 和 TabPage 的类型，分别称为 ContentFlow 和 ContentFlowItem。

ContentFlow

继承自 TabControl，在服务器端代码和客户端代码方面存在一些差异。

服务器端

1. 隐藏 TabPages 属性并将返回类型更改为新类型 – ContentFlowItemCollection，该类型定义在内部类中并继承自 TabPageCollection。
2. 覆盖 Focusable 属性并返回 true
3. 覆盖 CreateTabPageCollection() 方法，返回 ContentFlowItemCollection 而不是 TabPageCollection。

客户端

我们定义一个皮肤类来保存 ContentFlow 类的客户端资源，称为 ContentFlowSkin。此类继承自 TabControlSkin 类。然后，通过设计器，我们执行以下操作：

1. 将幻灯片放映 .js 文件和幻灯片放映 CSS 文件添加为该皮肤的附加资源。原始 jQuery 实现和 CSS 保持不变。

将 CSS 文件添加到皮肤的资源中

将 JavaScript 文件添加到皮肤的资源中

2. 添加一个名为 JQT.js 的新文件，其中将包含新的模板实现。此 JQT 文件是匹配标记元素并绘制实际 HTML 元素的模板文件。

   在此处，我们定义以下内容：

   1. 为 ContentFlow 和 ContentFlowItem 标签定义一个“匹配”模板。

      

   2. 为 ContentFlow 中的每个 ContentFlowItem 定义 HTML div 元素。此外，我们为每个元素分配类和样式属性。

      

   3. 我们还调用了我们原始 jQuery 实现中定义的 slideshow() 函数。

      

      我们可以选择从基类 TabControl 的现有 JQT 实现开始，并根据需要编辑代码。例如，我们可以禁用不相关的渲染，如实际的 TabControl 主体或选项卡标题。

      由于 Skin-able TabControl 仍在开发中，我们将需要获取 TabControl 的 JQT 代码。

      有两种方法

      1. 下载 Visual WebGui ProStudio .NETHTML5 （含源代码）。所有 Visual WebGui SDK 均可下载（含源代码）。
      2. 从主题项获取资源
         1. 将 Visual WebGui 主题添加到您的项目中

            

            1. 在主题设计器中打开它，在左侧的控件树中选择 TabControl，然后在资源下拉列表中选择 Scripts。

               

            2. 打开 JQT 文件
            注意：与上面描述的皮肤管理类似，我们也可以通过创建自己的主题来覆盖资源 – 查看视频。

ContentFlowItem

服务器端

1. 覆盖 ShouldRenderContent() 方法以始终返回 true，这与 TabControl 不同，后者仅显示选定的选项卡。
2. 覆盖 RenderAttributes() 方法并渲染与项目相关的属性。

客户端

“匹配”模板定义在 ContentFlow“匹配”模板旁边。

示例 - 整合

首先，我们将创建一个名为 FlowEmailReader 的用户控件，它将包含在 ContentFlowItem 中并显示相关的电子邮件。此控件由各种标签组成，用于显示邮件的各个字段，例如主题、附件的 ListView、面板以及用于显示电子邮件正文的 HtmlBox 控件。

设计视图

然后，我们创建菜单项，当单击该菜单项时，它将用新的 ContentFlow 控件替换包含电子邮件的 ListView。

我们将添加一个 UserControl 来包装我们的 TabControl，剩下的就是填充 ContentFlow 的项目，方法如下：

/// <summary>
/// Loads the items.
/// </summary>
private void LoadItems()
{
      // Get list of emails from binding source
    IList colItems = this.mobjEmailBindingSource.List;
 
      // Clear existing pages
    mtabsContent.TabPages.Clear();
 
    // Suspend Layout and Start design of the ContentFlow
    mtabsContent.SuspendLayout();
      
    // If list is not empty
    if (colItems != null && colItems.Count > 0)
      {
            int iCnt = 1;
            
        // Loop all items in the list
        foreach (DbDataRecord objItem in colItems)
            {
            // Create new ContentFlowItem
            ContentFlowItem objItemPage = new ContentFlowItem();
 
            // Create new FlowEmailReader to go into the ContentFlowItem
            FlowEmailReader objItemReader = new FlowEmailReader();
 
                  // Populate reader with content from Item
                  objItemReader.Item(iCnt, objItem);
 
            // Suspend Layout and Start design of the ContentFlowItem
            objItemPage.SuspendLayout();
 
            // Add the reader to the ContentFlowItem
            objItemPage.Controls.Add(objItemReader);
            
                  // Set Dock to fill
            objItemReader.Dock = DockStyle.Fill;
 
            // Set ContentFlowItem text
            objItemPage.Text = string.Format("{0:000}", iCnt++);
 
            // continue layout after design of the ContentFlowItem
            objItemPage.ResumeLayout();
 
            // Add the ContentFlowItem to the ContentFlow
            mtabsContent.TabPages.Add(objItemPage);
            }
      }
 
    // continue layout after design of the ContentFlow
    mtabsContent.ResumeLayout();
}

基本就是这样。完整的代码可在底部的“下载”部分下载。

示例 - 控件注册

项目编译后，我们需要注册新控件，以便 Visual WebGui 服务器端可以公开其资源。注册基本上在 web.config 文件中完成，但也可以通过项目属性页中的点选方式实现，作为 Visual Studio 集成包的一部分。

1. 请将项目的 web.config 文件保持关闭状态，以避免冲突。
2. 打开项目属性。
3. 找到并选择 ContentFlow 控件，然后单击“确定”。或者，如果您希望注册该命名空间中的所有控件，也可以选择整个命名空间。

   请注意过滤器选项，它允许您根据不区分大小写的前缀更快地进行搜索。命名空间选项卡允许选择命名空间，以便更快地批量注册控件组。

控件注册对话框

4. 在控件部分单击“添加”。以下行将添加到我们 web.config 的“Controls”部分下：

   <Control Type="Gizmox.WebGUI.Webmail .Application.Controls.ContentFlow,
   Gizmox.WebGUI.Webmail .Application, Version=1.0.0.0, Culture=neutral,
   PublicKeyToken=null" />

摘要

我们已经展示了如何将一个独立的 HTML5 指定实现（在此示例中为 jQuery）集成到 Visual WebGui 应用程序中，从而使 Visual WebGui 和原始实现都更加强大，并且具有安全的数据绑定和 UI 丰富性。

本文相关的代码包含了一个自定义控件的实现，作为将 HTML5 指定代码集成到 Visual WebGui 控件中的一种方式。代码重点介绍了完全集成的关键步骤：服务器端调整、客户端资源管理（通过皮肤设计器 – 皮肤资源创建和导入）、客户端代码覆盖和渲染以及控件注册。

总结

• 下载
• 免费测试版在此处下载
• SVN 仓库中的 Webmail 示例源代码

链接

• HTML5 Webmail 在线演示
• 纯 HTML5 示例在线演示