Visual WebGui

CloserLook

LANGUAGES: C#

ASP.NET VERSIONS: 3.5

Visual WebGui

A magical framework for better RIAs

By Bilal Haidar

Visual WebGui

Rating: 4out of 5 stars

Website: www.visualwebgui.com

Price:Starts at US$679

Living in the era of rich Internet applications(RIAs), as we ASP.NET developers do, calls for complex and interactive designs,easy deployment means, rapid development, and high-performance and scalableapplications not to mention the full features of an RIA solution. For a WindowsForms or Web Forms application developer, catching up with the latesttechnologies required for developing such RIAs requires time and training. Butwhat if you had a magical tool that could help in the rapid development ofRIAs, provide better and easier deployment, and help migrate Windows Formsdesktop-like applications to RIAs?

Such a tool exists: Visual WebGui, from Gizmox.Reviewing and exploring the Visual WebGui technology could spread over manyarticles, possibly even a book. But in this article's limited space, I'll providea brief overview of the Visual WebGui technology, its key features, and thecomponents bundled inside. In addition, I include a simple demonstration on howto use the Visual WebGui to show you how the theoretical explanation andpractical application complement each other to provide a "magical"framework for better RIAs.

Visual WebGui Overview

The Visual WebGui framework is a smart inventionfor creating RIAs. It enables rapid development and ease of deployment and evenprovides the option to migrate Windows Forms desktop-like applications into WebRIAs. If you know how to develop Windows Forms applications, then you're on thesafe side of developing RIAs using Visual WebGui in a short time. Following isa summary of the framework's key features.

Server-centric architecture. Being aserver-side technology, Visual WebGui plays a major role on the server byexecuting all the business and application logic, generating the rich UI, andsending it to the client packaged with a smart kernel. The smart kernel runs onthe client side and controls the behavior of the UI throughout the lifecycle ofthe application (and as long as the client is connected).

Standard .NET development. Later inthis review, I'll introduce you to the development environment of VisualWebGui. Whether it's C# or VB.NET, you can use your programming language ofchoice when developing with Visual WebGui inside Visual Studio. This means aVisual WebGui application is a normal .NET application with a standard VisualStudio solution.

Integration with ASP.NET. VisualWebGui is tightly integrated with ASP.NET technology. They both run side byside inside Microsoft Internet Information Services (IIS), as Figure 1 shows.

Figure 1: Visual WebGui's integration with ASP.NET

Asillustrated, the Visual WebGui application is similar to an ASP.NETapplication. It makes use of the ASP.NET intrinsic objects, .NET Framework, andCLR environment and above all, is hosted in IIS as a normal ASP.NETapplication.

One majornote here is that Visual WebGui makes heavy use of the ASP.NET HttpSessionobject. It introduces a Context unit, based on the HttpSession object, which actsas the highest object in the hierarchy represented by the Visual WebGuiapplication and is scoped by a single instance of an application.

Now thatyou have an idea about the integration between ASP.NET and Visual WebGui, it'sworth looking at the journey a request travels to reach a Visual WebGuiapplication, as Figure 2 shows.

Figure 2: HTTP request handled by the Visual WebGui router

Here's theprocess:

1.     Theuser opens a browser and requests a web application (internally developed ontop of Visual WebGui).

2.     Thebrowser approaches the server for the first time.

3.     TheIIS server infrastructure discovers that no session exists for this client andcreates an IIS session.

4.     ASP.NET'snative ISAPI filter takes over the request and creates the basic ASP.NETinfrastructure on the server.

5.     TheASP.NET Visual WebGui HttpHandler definition causes the ASP.NET ISAPI filter tohand over the request to Visual WebGui for a new router object.

6.     Therouter detects a "preload" request and sends back the initial HTMLand the kernel resources, which are responsible for further communication withthe server and UI rendering.

7.     Oncethe kernel and initial HTML are downloaded to the client, a request is sent tothe server to receive the main form UI, rendering information that, oncereceived by the kernel, is rendered and displayed in the browser.

8.     Fromthis moment on, Visual WebGui virtualizes the application using command-levelvirtualization.

Command-levelvirtualization. Whendiscussing command-level virtualization in Visual WebGui, the Remote Desktop orCitrix virtualization comes to mind. In those two technologies, clientvirtualization is represented by sending bitmaps or snapshots from the serverto the client, based on the client's actions. For instance, the client clicks abutton that opens a pop-up window, a request is sent to the server, and a newbitmap is generated and rendered to the client.

The powerof Visual WebGui virtualization, on the other hand, is represented by the smartkernel code being sent to the client browser upon the initial request. The kernelcode is composed of JavaScript, XSLT, and CSS. It's the kernel code thathandles all user actions that don't require any business logic processed by theserver side. In other words, all UI actions are being handled by the kernelcode, and only when the user requests an action that needs database access orany other business logic operation, the client UI fires an event that the kernelnode understands. Accordingly, a request is sent to the server side for therequest to be processed. Once processed, a smart command is sent back to theclient where the kernel code, cached on the client side, reads, understands,and performs the partial UI rendering against the client UI. You can find more informationabout this process at www.visualwebgui.com/Gizmox/Technology/CommandLevelVirtualization/tabid/623/Default.aspx.

Security. As you can probably surmise from the briefexplanation of command-level virtualization, it's clear that in Visual WebGui, alldatabase access is done only on the server, and any logic or credentials arestored on the server side. The concept of an "empty client" helpsimprove an application's security by closing the client-side doors that mightexpose an application to a variety of threats. With the help of the kernelcode, the client UI manages all user interaction on the client side. Whenbusiness logic needs to be run or access to resources is required, the serverside is the only one authorized to perform such tasks, thus keeping the clientfar away from imposing any threats to the application. You can find more detailsabout Visual WebGui security at www.visualwebgui.com/Gizmox/Technology/Security/tabid/624/Default.aspx.

Performanceand scalability.Measuring performance in Visual WebGui applications takes into considerationseveral key features in the technology itself. The features can be explainedbriefly, as follows:

        The way virtualization is implemented in VisualWebGui improves performance by sending/receiving along the wire the minimalcommands required to react to clients' actions.

        The stateful state of a Visual WebGuiapplication minimizes the overhead on the server by creating and disposingfewer CLR objects. It's important to mention here that the first time an applicationis requested, the entire application UI is cached on the server inside theVisual WebGui Context unit. The Context holds a copy of the complete hierarchyof controls on a page, hence the statefulness of a Visual WebGui application.On every subsequent request to change the UI, the state of the application onthe server side is updated, and only the deltas are being sent to the clientside for partial UI rendering.

        Client interactions are being processed andhandled locally by the kernel code. This fact minimizes the calls to the serverand lessens the memory resources required by the server to handle thoseinteractions. Only interactions that require a database access or any othersort of resource access are being sent to the server.

Supportingscalability, Visual WebGui provides the Visual WebGui Cluster Server extension,which supports the different kinds of load balancing, including static, dynamicsession, and fully dynamic. The Visual WebGui Cluster Server section on theVisual WebGui website provides an in-depth explanation about the extension andeverything related to it. More details on this are located at www.visualwebgui.com/Gizmox/Products/Extensions/ClusterServer/tabid/473/Default.aspx.

Multiplepresentation layers.Decoupling the presentation layer from the server application is one of themajor features of Visual WebGui. A Visual WebGui application can be rendered byany device that can send/receive XML data and draw UI. Currently, Visual WebGuisupports rendering in DHTML, Silverlight 2.0, and smart-client Windows Forms.The future plan is to enable rendering in Flash and mobile technologies.

Thearchitecture that enables decoupling the presentation layer from the serverapplication is based on the following two concepts:

        Generalized object model: Every control in theVisual WebGui suite of controls has a server-side class and a client-sideclass. This means that all processing on the server is performed against theserver-side class. When it's time to render the application, the client-sideclass jumps in, taking control of the rendering process. Hence, based on thedevice accessing the application or how the application is being configured,the correct rendering client-side classes are chosen to perform the renderingof the UI.

        Command-level virtualization: As you know bynow, the concept of command-level virtualization is based on the client UIsending notification of change to the kernel code. Locally cached events aresent to the server side to do some processing; the resulting deltas in the UIare sent back to the client side, and again the Kernel code jumps in, reads theUI changes, and performs the needed partial rendering. This concept helps inthe process of decoupling the presentation layer from the server applicationbecause the commands are based on XML and events fired to the server are normalHTTP requests.

Therefore,any device that can send/receive XML (supported by command-levelvirtualization) and renders the UI (based on the generalized object model and kernelcode) is capable of presenting a Visual WebGui application. You can find moreinformation about Visual WebGui's presentation layers at www.visualwebgui.com/Gizmox/Technology/MultiplePresentationLayers/tabid/627/Default.aspx.

Smart-clientWindows Forms deployment and migration. Visual WebGui provides a development environment that resembles that ofWindows Forms in the different versions of Visual Studio. In other words, aWindows Forms developer will find no difference when it comes to developing aVisual WebGui application. The same Windows Forms toolbox is present, forms areused as pages, resource files are used, and so on. This is the power thatVisual WebGui provides for developers who have been developing in Windows Formsfor some time. There's no need to follow up on the latest technologies to developan RIA; your knowledge of Windows Forms is all you need to develop anapplication with Visual WebGui and render it as an RIA.

You canuse the Visual WebGui framework as a tool that can help in migrating a smartWindows Forms application and a Visual Basic 6.0 application to a Webapplication, thus preserving the legacy code and applications that have beendeveloped over the years. You can find more information on this topic at www.visualwebgui.com/Gizmox/Technology/WindowsFormsDevelopmentandMigration/tabid/628/Default.aspx.

Visual WebGui Components

Visual WebGui offers a set of open source productson top of its solution for RIAs. These, together with the unique and innovativeVisual WebGui desktop-like experience, help in developing/deploying RIAs. The different products available help indeveloping desktop-like applications over the web, with the possibility ofrendering them either as DHTML or Silverlight. The experience you get whiledeveloping with Visual WebGui resembles that of Windows Forms development,especially when it comes to the toolset and controls available. Let's take alook at the different products in Visual WebGui.

VisualWebGui SDK. The VisualWebGui SDK is a free, open source community SDK containing most of the featuresVisual WebGui provides for developing and deploying RIAs. All the Visual WebGuifeatures mentioned so far are part of this free SDK, enabling developers tobenefit from them to develop desktop-like rich web applications without theneed to learn the latest technologies. This SDK ships with the complete WindowsForms Toolkit, 58 Windows Forms controls integrated into ASP.NET, and theVisual WebGui runtime, which enables the desktop-like Visual WebGuiapplications to run and be deployed in multiple presentation layers from thesame source code. Reading the Visual WebGui SDK Overview will provide in-depthknowledge on the components included, as well as all the features; details arelocated at www.visualwebgui.com/Gizmox/Products/CommunitySDK/tabid/430/Default.aspx.

VisualWebGui Silverlight SDK.The Visual WebGui Silverlight SDK is an open source SDK that helps you developrich Silverlight applications without having to know the Silverlighttechnology. Using this SDK's features, you can deliver desktop-like responsiveapplications using existing resources, such as Microsoft Expression Blend andWindows Forms.

Similar tothe VWG SDK, this SDK does a good job in decoupling the Visual WebGui serverapplication from the presentation layer. In addition, it deploys into theclient smartly; if the client has no Silverlight plug-in installed, it simplyrenders as DHTML. The SDK ships with 58 Silverlight controls, full integrationwith any .NET component, the ability to customize styling using MicrosoftExpression Blend and Windows Forms, and many other features. You can find moreinformation about this SDK at www.visualwebgui.com/Gizmox/Products/SilverlightSDK/tabid/409/Default.aspx.

VisualWebGui Express Studio. TheExpress Studio is intended to be used by students and hobbyists who want toexperience developing simple RIAs. It's free and integrates seamlessly with thefree and express version of Visual Studio, Visual Studio Express Edition. Inaddition to the features included in the Visual WebGui SDK, Express Studioprovides an additional integration feature, the Visual WebGui WindowsForms-like drag-and-drop designer. This designer gives a special Visual WebGui tasteand facilitates dragging Visual WebGui controls onto a form, thus providing areal desktop-like or Windows Forms development experience.

ExpressStudio ships with the complete Windows Forms Toolkit, 58 Windows Forms Controlsintegrated into ASP.NET, the VWG Windows Forms-like drag and drop designer, andthe Visual WebGui runtime, which enables the desktop-like Visual WebGuiapplications to run and be deployed in multiple presentation layers from thesame source code. Reading the Visual WebGui Express Studio Overview willprovide in-depth knowledge about the included components and all the features. Youcan find more details at www.visualwebgui.com/Gizmox/Products/ExpressStudio/tabid/570/Default.aspx.

VisualWebGui Professional Studio Overview. The Visual WebGui Professional Studio is a combination of all thepreviously mentioned products. It supports the Visual WebGui SDK, Visual WebGuiSilverlight SDK, and, above all, a Windows Forms-like drag-and-drop designerthat integrates with the full version of Visual Studio. Developingprofessional, desktop-like, and rich Internet applications requires purchasingand deploying a copy of the Professional Studio.

TheProfessional Studio is the only commercial product in the Visual WebGui suiteof products. In addition to all the features covered thus far, ProfessionalStudio contains a third-party controls wrapper wizard that can convert anyASP.NET custom control to a Visual WebGui control and thus be dragged and usedas if it were an out-of-the-box Visual WebGui control.

To getmore information about the price and additional features of Visual WebGui ProfessionalStudio, check out the Professional Studio Overview Web page at www.visualwebgui.com/Gizmox/Products/ProfessionalStudio/tabid/427/Default.aspx.To understand more about the license agreements offered by Visual WebGui forits entire suite of controls, read the OEM/SaaS page at www.visualwebgui.com/Gizmox/Products/OEMSaas/tabid/608/Default.aspx.

Visual WebGui Walkthrough

To develop with Visual WebGui, you must have enoughknowledge of using Visual Studio, Windows Forms, and the programming languageof your choice, be it VB.NET or C#. In the following section, I'll use a simpleexample to show you how to develop an application with Visual WebGui.

For thisdemonstration, I installed the Professional Studio and integrated it intoVisual Studio 2008, but you could develop the same application whether you're usingthe open source SDKs or even the Visual WebGui Express Studio. Visit www.visualwebgui.com/Developers/Resources/tabid/319/Default.aspxto read tutorials and articles that will help you work with Visual WebGui.

To start,create a new Visual WebGui Application, as Figure 3 shows.

Figure 3:Creating a new Visual WebGui application

Once theapplication is created, you'll feel like you're inside a Windows Formsenvironment inside Visual Studio 2008. Nothing has changed!

Notice inFigure 4 that a few additional references have been added to support VisualWebGui platform, including the following:

        Gizmox.WebGUI.Common

        Gizmox.WebGUI.Forms

        Gizmox.WebGUI.Server

        Gizmox.WebGUI.Server.Silverlight

Figure 4: Supporting Visual WebGui references

Inaddition, a new Form has been added as a startup form, Form1. This form will beyour working area similar to a Form in Windows Forms or Page in Web Forms.

Beforerunning the application, you must right-click the Form1.cs form and select SetAs Start Form. This option ensures that when you run the application, Form1will be the starting point of your application. This is a must before runningthe application, so that you avoid a directory listing and choose the right formto start the application.

After theForm1.cs is configured, to run it as the startup form, right-click theapplication and select Properties. Then go to the Deployment tab, as Figure 5shows.

Figure 5: Enabling Silverlight rendering

Select theSilverlight checkbox (i.e., the .swgx extension), in case you want to enableSilverlight rendering of the application, which we do in this sampledemonstration.

Next, goto the Web tab, select the Specific Page check box, and enter Form1.swgx. Thisensures that the application will render Form1.cs (which was previously set asa startup form) in Silverlight mode. If, however, you want to render Form1.csin DHTML mode only, the default mode of Visual WebGui rendering, then skip thisstep.

For thesake of this demonstration, let's add a simple Button control on Form1.cs. Todo so, double-click the Button control; the view flips into code-behind view,so that you can add the code to handle the Button's Click event, as Figure 6shows.

///

/// Handles the Click event of the Button on the Form

///

///

///

private void button1_Click(object sender, EventArgs e)

{

MessageBox.Show("HelloVisual WebGui!");

}

Figure 6: Button's Click event handler

Thehandler is simple and shows a message using the MessageBox.Show method. Figure7 shows the application running inside an Internet Explorer 7.0 instance. Right-clickanywhere on the page, and you'll see the Silverlight context-menu, which youcan click to verify it's a Silverlight application.

Figure 7: Visual WebGui at runtime

Explore Visual WebGui Yourself

In this introduction to the Visual WebGui thetechnology, I've highlighted the major and most important features, listed thecomponents and products included as part of the Visual WebGui platform, anddemonstrated how to develop and deploy a Visual WebGui RIA. I highly recommendyou delve into the product yourself and visit the Visual WebGui website to get moredetails, tips and tricks, tutorials, articles, videos, and webcasts that cangive you a feel for the product's full range of capabilities.

Bilal Haidar([email protected]) is a Microsoft MVP in ASP.NET. He is an MCP, MCTS, MCPD,MCT, and Telerik MVP. He is a senior software developer at CCC, a multinationalconstruction company based in Athens, Greece.