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
- Hide TapPages property and change the return type to a new type –
ContentFlowItemCollection
, which is defined in an inner class and inherits from TabPageCollection
.
- Override Focusable property returning true
- 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:
- 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
- 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:
- A ‘match’ template for the
ContentFlow
and ContentFlowItem
tags
- HTML div elements for each
ContentFlowItem
inside one div for the ContentFlow
. Also, we assign class and style attributes for each element.
- 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:
- Download Visual WebGui ProStudio .NETHTML5 with sources. All Visual WebGui SDKs are available for download with the sources.
- Get resources from a theme item:
- Add a visual WebGui Theme to your project
- Open it in the theme designer, select the TabControl in the controls tree on the left and select Scripts on the resource drop-down
- 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:
- Override
ShouldRenderContent()
method to return true always, unlike a TabControl
in which only the selected tab is shown.
- 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:
private void LoadItems()
{
IList colItems = this.mobjEmailBindingSource.List;
mtabsContent.TabPages.Clear();
mtabsContent.SuspendLayout();
if (colItems != null && colItems.Count > 0)
{
int iCnt = 1;
foreach (DbDataRecord objItem in colItems)
{
ContentFlowItem objItemPage = new ContentFlowItem();
FlowEmailReader objItemReader = new FlowEmailReader();
objItemReader.Item(iCnt, objItem);
objItemPage.SuspendLayout();
objItemPage.Controls.Add(objItemReader);
objItemReader.Dock = DockStyle.Fill;
objItemPage.Text = string.Format("{0:000}", iCnt++);
objItemPage.ResumeLayout();
mtabsContent.TabPages.Add(objItemPage);
}
}
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:
- Keep the project's web.config file closed to avoid conflicts.
- Open the project properties.
- 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
- 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
Links