Incorporating custom HTML5 implementation with Visual WebGui rich client
Categories: Custom Controls
|
Tags: Architects, Developers, HTML, JavaScript, 2. Intermediate, 3. Advanced, Customization, jQuery, v6.4 and Later
Revision: 1
Posted: 14/April/2011
Updated: 26/May/2011
Status: Publish
Types: Article
|
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 can 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.
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 2007’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
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:
a. A ‘match’ template for the ContentFlow and ContentFlowItem tags
b. HTML div elements for each ContentFlowItem inside one div for the ContentFlow. Also, we assign class and style attributes for each element.
c. 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:
a. Download Visual WebGui ProStudio .NETHTML5 with sources. All Visual WebGui SDKs are available for download with the sources.
b. Get resources from a theme item:
i. Add a visual WebGui Theme to your project
ii. Open it in the theme designer,Select the TabControl in the controls tree on the left and select Scripts on the resource drop-down
iii. 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.
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
WebMail sample source code in SVN repository – LINK
Pure HTML sample source code
Links:
HTML5 WebMail online: https://visualwebgui.com/live/webmail/html5/
Pure HTML5 sample online: http://html5demo.visualwebgui.com/sample1.html
About the author
Related Articles
| Custom Controls |
|
|
I played a bit around with the new 6.4 ListView control, its quite amazing what you can do with it. It opens a lot of new ways to present data in a better and more userfriendly way.
Tags: Architects, Developers, Data Binding, C#, 2. Intermediate, 3. Advanced, Customization, Data Binding, v6.4 and Later
|
|
|
In this How to we are going to learn the basic usage of Visual WebGui RIA Platform Theme & Control designer.
Tags: Developers, Graphic Designers, Theme, 1. Beginner, 2. Intermediate, Customization, v6.4 and Later, 3. Advanced
|
|
|
Tags: Developers, Events, JavaScript, 1. Beginner, 2. Intermediate, Integration, Pre v6.3, v6.3, 3. Advanced
|
|
|
Tags: Developers, Events, JavaScript, 2. Intermediate, 3. Advanced, Integration, Pre v6.3, v6.3
|
|
|
Tags: Developers, Graphic Designers, Theme, 1. Beginner, 2. Intermediate, Customization, v6.4 and Later, 3. Advanced
|
|
|
Tags: Developers, Events, JavaScript, 3. Advanced, Customization, v6.3
|
|
|