Incorporating Custom HTML5 Implementation with .NET Based Visual WebGui Rich Client

Introduction

HTML5

The emergence of HTML5 as the new W3C standard, in which multimedia, rich graphics, animation and rich web application functionality are supported, brings the promise of a new generation of native cross platform web applications incorporating cool stuff without plug-ins. Its independency of plug-ins and proprietary run-time and video formats and its wide-scale adoption by all the leading browsers has brought many observers in the industry to predict the demise not only of Silverlight, but also Flash. Microsoft IE9 supports most HTML5 features, as do Firefox, Chrome, Safari, Opera, and mobile browsers.

jQuery and HTML5

When coming to utilize HTML5 in RIA development, many obstacles arise, as the complexity grows significantly. Getting a web application to work exactly as you want can be complex, time-consuming and frustrating.

JavaScript frameworks have played an important role in abstracting the communication with the browser, and jQuery is currently the most popular of them all. The latest jQuery function library provides developers with efficient functions that dynamically write HTML5 code features. That way the developer is left to work with a much simpler command set.

VWG ProStudio .NETHTML5

With the launch of Visual WebGui ProStudio .NETHTML5, HTML5 power is extended to the handling of data - abstracting away the complexities of the Ajax connection and data binding, without the server side data binding complexities.

Free beta Download Here

Visual WebGui ProStudio .NETHTML5 template mechanism is based on the JQT project, created by Gizmox, available Here. This engine is a light weight alternative to the XSLT mechanism. It enables broader browser support and greater efficiency.

Development under Visual WebGui ProStudio .NETHTML5 is a unique end-to-end combination of pure Microsoft .NET development, abstraction of JavaScript / HTML5 functionality through jQuery and the abstraction of Ajax, database connectivity and data binding. With the release of ProStudio .NETHTML5, came to life the only total development environment in which programmers can develop efficient-running, data-centric web HTML5 apps in Visual Studio.

In this paper I will demonstrate how to take a complete custom HTML5 implementation with jQuery and CSS3 and incorporate it with Visual WebGui rich client.

Sample Scope

We will see how to take a jQuery implementation of a slide show (carousel) and use it within a VWG application.

All relevant source files are downloadable in the Take away section at the end of the article.

Sample Requirements

Required Tools

Visual WebGui ProStudio .NETHTML5 Beta 1 or later. Select the installation in according to version of MS Visual Studio 2005/2008/2010.

Supported Browsers

Chrome

Mozilla Firefox 4

Safari 5

Although IE9 supports HTML5 features, it does not support some HTML4 features. Therefore, it is not a recommended browser for this sample.

Sample - The Original Implementation

The following example is a simple implementation of a slide-show (carousel). It is basically a representation of div elements manipulated with jQuery and CSS3.

You can browse to it Here.

CSS Related Attributes

The transition related functions:

Define Slide, Skewing, and Scaling

Initialize Slides

Handle Key-Down

Sample - Expected Outcome

We want to incorporate the original jQuery implementation inside the VWG Webmail sample application. The Webmail application is a mimicked Web UI for the MS Office 2010’s Outlook (visible online here).

The goal is to provide an alternative emails view for the default emails List-View. This alternative will actually be the slide-show (carousel) shown above, data-bound to a DB holding all the emails data. Toggling between the default view and the new alternative will be done via the view sub-menu.

ListView

SlideShow

Sample - Creating Custom Controls

We have selected the VWG TabControl as the most suitable native controls to bind the slide-show behavior to in which the TabPages will be displayed as a slide-show.

First we create two types which inherit from TabControl and TabPage called ContentFlow and ContentFlowItem.

ContentFlow

Inherits from TabControl with a few differences in server side code and in the client side code.

Server Side

1. Hide TapPages property and change the return type to a new type – ContentFlowItemCollection, which is defined in an inner class and inherits from TabPageCollection.
2. Override Focusable property returning true
3. Override CreateTabPageCollection() method returning a ContentFlowItemCollection instead of a TabPageCollection.

Client Side

We define a skin class to hold the client resources for ContentFlow class, called ContentFlowSkin. This class inherits from TabControlSkin class. Then via the designer we do the following:

1. Add the slide-show .js file and the slide-show CSS file as additional resources for that skin. The original jQuery implementation and CSS remain unchanged.

Adding CSS files to the Skin’s Resources

Adding JavaScript files to the Skin’s Resources

2. Add a new JQT.js file that will contain the new template implementation. This JQT file is the template file that matches elements from the markup and draws the actual HTML elements.

   Here we define the following:

   1. A ‘match’ template for the ContentFlow and ContentFlowItem tags

      

   2. HTML div elements for each ContentFlowItem inside one div for the ContentFlow. Also, we assign class and style attributes for each element.

      

   3. We also call the slideshow() function defined in our original jQuery implementation.

      

      We can choose to start from an existing JQT implementation of the base class – TabControl, and edit the code as we see fit. For example, we can disable irrelevant rendering such as the actual TabControl body or the tab headers.

      As the Skin-able TabControl is still in development, we will need to obtain the TabControl JQT code otherwise.

      There are two ways:

      1. Download Visual WebGui ProStudio .NETHTML5 with sources. All Visual WebGui SDKs are available for download with the sources.
      2. Get resources from a theme item:
         1. Add a visual WebGui Theme to your project

            

            1. Open it in the theme designer, select the TabControl in the controls tree on the left and select Scripts on the resource drop-down

               

            2. Open the JQT file
            Note: similar to the skin management described above, we can also override resources creating our own themes – view video.

ContentFlowItem

Server side:

1. Override ShouldRenderContent() method to return true always, unlike a TabControl in which only the selected tab is shown.
2. Override RenderAttributes() method and render relevant attributes for the item.

Client side:

The ‘match’ template is defined next to the ContentFlow ‘match’ template.

Sample - Putting it Together

First we will create a user control called FlowEmailReader that will be contained in the ContentFlowItem and will display the email in question. This control consists of various labels that would display various mail fields, such as Subject, a ListView of attachments, panels and an HtmlBox control in which the email’s body would be displayed.

Designer View

Then we create the menu item that when clicked will replace the ListView containing the emails with a new ContentFlow control.

We’ll add a UserControl to wrap our TabControl, and all that is left is to fill the ContentFlow with items, in the following method:

/// <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();
}

This is basically it. The full code can be downloaded at the Take away section at the bottom.

Sample - Control Registration

After the project is compiled, we need to register our new control so that the Visual WebGui server side can expose its resources. The registration is basically done within the web.config file but can be also achieved by point-and-click within the project property-pages as a part of the Visual Studio integration package:

1. Keep the project's web.config file closed to avoid conflicts.
2. Open the project properties.
3. Find and select the ContentFlow control and click OK. Alternatively we could select the entire namespace if we desire to register all the controls in that namespace.

   Notice the filter option which allows you to search faster according to a case insensitive prefix. The namespaces tab allows selecting the namespace for faster and collective registration of group of controls.

Controls Registration Dialog

4. Click ‘Add’ in the controls section, The following line will be added to our web.config under the ‘Controls’ section:

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

Summary

We’ve shown how to take an independent HTML5 designated implementation, in this case – with jQuery, and bring this power into a Visual WebGui application, thus, making both Visual WebGui and the original implementation much more powerful, complete with secure data-binding and UI richness.

The paper’s related code contains an implementation of a custom control as a way of incorporating HTML5 designated code in a Visual WebGui control. The code highlights the important steps on the way to full integration: server side adjustments, client resource management with the skin designer - skin resources creation and import, Client code overriding and rendering and controls registration.

Take Away

• Downloads
• Free beta Download Here
• Webmail sample source code in SVN repository

Links

• HTML5 Webmail online
• Pure HTML5 sample online