CloserLook
LANGUAGES: C#
ASP.NET VERSIONS: 3.5
Visual WebGui
A magical framework for better RIAs
By Bilal Haidar
Visual WebGui
Rating: 4 out 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 scalable applications not to mention the full features of an RIA solution. For a Windows Forms or Web Forms application developer, catching up with the latest technologies required for developing such RIAs requires time and training. But what if you had a magical tool that could help in the rapid development of RIAs, provide better and easier deployment, and help migrate Windows Forms desktop-like applications to RIAs?
Such a tool exists: Visual WebGui, from Gizmox. Reviewing and exploring the Visual WebGui technology could spread over many articles, possibly even a book. But in this article's limited space, I'll provide a brief overview of the Visual WebGui technology, its key features, and the components bundled inside. In addition, I include a simple demonstration on how to use the Visual WebGui to show you how the theoretical explanation and practical application complement each other to provide a "magical" framework for better RIAs.
Visual WebGui Overview
The Visual WebGui framework is a smart invention for creating RIAs. It enables rapid development and ease of deployment and even provides the option to migrate Windows Forms desktop-like applications into Web RIAs. If you know how to develop Windows Forms applications, then you're on the safe side of developing RIAs using Visual WebGui in a short time. Following is a summary of the framework's key features.
Server-centric architecture. Being a server-side technology, Visual WebGui plays a major role on the server by executing all the business and application logic, generating the rich UI, and sending it to the client packaged with a smart kernel. The smart kernel runs on the client side and controls the behavior of the UI throughout the lifecycle of the application (and as long as the client is connected).
Standard .NET development. Later in this review, I'll introduce you to the development environment of Visual WebGui. Whether it's C# or VB.NET, you can use your programming language of choice when developing with Visual WebGui inside Visual Studio. This means a Visual WebGui application is a normal .NET application with a standard Visual Studio solution.
Integration with ASP.NET. Visual WebGui is tightly integrated with ASP.NET technology. They both run side by side inside Microsoft Internet Information Services (IIS), as Figure 1 shows.
Figure 1: Visual WebGui's integration with ASP.NET
As illustrated, the Visual WebGui application is similar to an ASP.NET application. It makes use of the ASP.NET intrinsic objects, .NET Framework, and CLR environment and above all, is hosted in IIS as a normal ASP.NET application.
One major note here is that Visual WebGui makes heavy use of the ASP.NET HttpSession object. It introduces a Context unit, based on the HttpSession object, which acts as the highest object in the hierarchy represented by the Visual WebGui application and is scoped by a single instance of an application.
Now that you have an idea about the integration between ASP.NET and Visual WebGui, it's worth looking at the journey a request travels to reach a Visual WebGui application, as Figure 2 shows.
Figure 2: HTTP request handled by the Visual WebGui router
Here's the process:
1. The user opens a browser and requests a web application (internally developed on top of Visual WebGui).
2. The browser approaches the server for the first time.
3. The IIS server infrastructure discovers that no session exists for this client and creates an IIS session.
4. ASP.NET's native ISAPI filter takes over the request and creates the basic ASP.NET infrastructure on the server.
5. The ASP.NET Visual WebGui HttpHandler definition causes the ASP.NET ISAPI filter to hand over the request to Visual WebGui for a new router object.
6. The router detects a "preload" request and sends back the initial HTML and the kernel resources, which are responsible for further communication with the server and UI rendering.
7. Once the kernel and initial HTML are downloaded to the client, a request is sent to the server to receive the main form UI, rendering information that, once received by the kernel, is rendered and displayed in the browser.
8. From this moment on, Visual WebGui virtualizes the application using command-level virtualization.
Command-level virtualization. When discussing command-level virtualization in Visual WebGui, the Remote Desktop or Citrix virtualization comes to mind. In those two technologies, client virtualization is represented by sending bitmaps or snapshots from the server to the client, based on the client's actions. For instance, the client clicks a button that opens a pop-up window, a request is sent to the server, and a new bitmap is generated and rendered to the client.
The power of Visual WebGui virtualization, on the other hand, is represented by the smart kernel code being sent to the client browser upon the initial request. The kernel code is composed of JavaScript, XSLT, and CSS. It's the kernel code that handles all user actions that don't require any business logic processed by the server side. In other words, all UI actions are being handled by the kernel code, and only when the user requests an action that needs database access or any other business logic operation, the client UI fires an event that the kernel node understands. Accordingly, a request is sent to the server side for the request to be processed. Once processed, a smart command is sent back to the client 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 information about this process at www.visualwebgui.com/Gizmox/Technology/CommandLevelVirtualization/tabid/623/Default.aspx.
Security. As you can probably surmise from the brief explanation of command-level virtualization, it's clear that in Visual WebGui, all database access is done only on the server, and any logic or credentials are stored on the server side. The concept of an "empty client" helps improve an application's security by closing the client-side doors that might expose an application to a variety of threats. With the help of the kernel code, the client UI manages all user interaction on the client side. When business logic needs to be run or access to resources is required, the server side is the only one authorized to perform such tasks, thus keeping the client far away from imposing any threats to the application. You can find more details about Visual WebGui security at www.visualwebgui.com/Gizmox/Technology/Security/tabid/624/Default.aspx.
Performance and scalability. Measuring performance in Visual WebGui applications takes into consideration several key features in the technology itself. The features can be explained briefly, as follows:
The way virtualization is implemented in Visual WebGui improves performance by sending/receiving along the wire the minimal commands required to react to clients' actions.
The stateful state of a Visual WebGui application minimizes the overhead on the server by creating and disposing fewer CLR objects. It's important to mention here that the first time an application is requested, the entire application UI is cached on the server inside the Visual WebGui Context unit. The Context holds a copy of the complete hierarchy of 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 on the server side is updated, and only the deltas are being sent to the client side for partial UI rendering.
Client interactions are being processed and handled locally by the kernel code. This fact minimizes the calls to the server and lessens the memory resources required by the server to handle those interactions. Only interactions that require a database access or any other sort of resource access are being sent to the server.
Supporting scalability, Visual WebGui provides the Visual WebGui Cluster Server extension, which supports the different kinds of load balancing, including static, dynamic session, and fully dynamic. The Visual WebGui Cluster Server section on the Visual WebGui website provides an in-depth explanation about the extension and everything related to it. More details on this are located at www.visualwebgui.com/Gizmox/Products/Extensions/ClusterServer/tabid/473/Default.aspx.
Multiple presentation layers. Decoupling the presentation layer from the server application is one of the major features of Visual WebGui. A Visual WebGui application can be rendered by any device that can send/receive XML data and draw UI. Currently, Visual WebGui supports rendering in DHTML, Silverlight 2.0, and smart-client Windows Forms. The future plan is to enable rendering in Flash and mobile technologies.
The architecture that enables decoupling the presentation layer from the server application is based on the following two concepts:
Generalized object model: Every control in the Visual WebGui suite of controls has a server-side class and a client-side class. This means that all processing on the server is performed against the server-side class. When it's time to render the application, the client-side class jumps in, taking control of the rendering process. Hence, based on the device accessing the application or how the application is being configured, the correct rendering client-side classes are chosen to perform the rendering of the UI.
Command-level virtualization: As you know by now, the concept of command-level virtualization is based on the client UI sending notification of change to the kernel code. Locally cached events are sent to the server side to do some processing; the resulting deltas in the UI are sent back to the client side, and again the Kernel code jumps in, reads the UI changes, and performs the needed partial rendering. This concept helps in the process of decoupling the presentation layer from the server application because the commands are based on XML and events fired to the server are normal HTTP requests.
Therefore, any device that can send/receive XML (supported by command-level virtualization) and renders the UI (based on the generalized object model and kernel code) is capable of presenting a Visual WebGui application. You can find more information about Visual WebGui's presentation layers at www.visualwebgui.com/Gizmox/Technology/MultiplePresentationLayers/tabid/627/Default.aspx.
Smart-client Windows Forms deployment and migration. Visual WebGui provides a development environment that resembles that of Windows Forms in the different versions of Visual Studio. In other words, a Windows Forms developer will find no difference when it comes to developing a Visual WebGui application. The same Windows Forms toolbox is present, forms are used as pages, resource files are used, and so on. This is the power that Visual WebGui provides for developers who have been developing in Windows Forms for some time. There's no need to follow up on the latest technologies to develop an RIA; your knowledge of Windows Forms is all you need to develop an application with Visual WebGui and render it as an RIA.
You can use the Visual WebGui framework as a tool that can help in migrating a smart Windows Forms application and a Visual Basic 6.0 application to a Web application, thus preserving the legacy code and applications that have been developed over the years. You can find more information on this topic at www.visualwebgui.com/Gizmox/Technology/Windows FormsDevelopmentandMigration/tabid/628/Default.aspx.
Visual WebGui Components
Visual WebGui offers a set of open source products on top of its solution for RIAs. These, together with the unique and innovative Visual WebGui desktop-like experience, help in developing/deploying RIAs. The different products available help in developing desktop-like applications over the web, with the possibility of rendering them either as DHTML or Silverlight. The experience you get while developing with Visual WebGui resembles that of Windows Forms development, especially when it comes to the toolset and controls available. Let's take a look at the different products in Visual WebGui.
Visual WebGui SDK. The Visual WebGui SDK is a free, open source community SDK containing most of the features Visual WebGui provides for developing and deploying RIAs. All the Visual WebGui features mentioned so far are part of this free SDK, enabling developers to benefit from them to develop desktop-like rich web applications without the need to learn the latest technologies. This SDK ships with the complete Windows Forms Toolkit, 58 Windows Forms controls integrated into ASP.NET, and the Visual WebGui runtime, which enables the desktop-like Visual WebGui applications to run and be deployed in multiple presentation layers from the same source code. Reading the Visual WebGui SDK Overview will provide in-depth knowledge on the components included, as well as all the features; details are located at www.visualwebgui.com/Gizmox/Products/CommunitySDK/tabid/430/Default.aspx.
Visual WebGui Silverlight SDK. The Visual WebGui Silverlight SDK is an open source SDK that helps you develop rich Silverlight applications without having to know the Silverlight technology. Using this SDK's features, you can deliver desktop-like responsive applications using existing resources, such as Microsoft Expression Blend and Windows Forms.
Similar to the VWG SDK, this SDK does a good job in decoupling the Visual WebGui server application from the presentation layer. In addition, it deploys into the client smartly; if the client has no Silverlight plug-in installed, it simply renders as DHTML. The SDK ships with 58 Silverlight controls, full integration with any .NET component, the ability to customize styling using Microsoft Expression Blend and Windows Forms, and many other features. You can find more information about this SDK at www.visualwebgui.com/Gizmox/Products/SilverlightSDK/tabid/409/Default.aspx.
Visual WebGui Express Studio. The Express Studio is intended to be used by students and hobbyists who want to experience developing simple RIAs. It's free and integrates seamlessly with the free and express version of Visual Studio, Visual Studio Express Edition. In addition to the features included in the Visual WebGui SDK, Express Studio provides an additional integration feature, the Visual WebGui Windows Forms-like drag-and-drop designer. This designer gives a special Visual WebGui taste and facilitates dragging Visual WebGui controls onto a form, thus providing a real desktop-like or Windows Forms development experience.
Express Studio ships with the complete Windows Forms Toolkit, 58 Windows Forms Controls integrated into ASP.NET, the VWG Windows Forms-like drag and drop designer, and the Visual WebGui runtime, which enables the desktop-like Visual WebGui applications to run and be deployed in multiple presentation layers from the same source code. Reading the Visual WebGui Express Studio Overview will provide in-depth knowledge about the included components and all the features. You can find more details at www.visualwebgui.com/Gizmox/Products/ExpressStudio/tabid/570/Default.aspx.
Visual WebGui Professional Studio Overview. The Visual WebGui Professional Studio is a combination of all the previously mentioned products. It supports the Visual WebGui SDK, Visual WebGui Silverlight SDK, and, above all, a Windows Forms-like drag-and-drop designer that integrates with the full version of Visual Studio. Developing professional, desktop-like, and rich Internet applications requires purchasing and deploying a copy of the Professional Studio.
The Professional Studio is the only commercial product in the Visual WebGui suite of products. In addition to all the features covered thus far, Professional Studio contains a third-party controls wrapper wizard that can convert any ASP.NET custom control to a Visual WebGui control and thus be dragged and used as if it were an out-of-the-box Visual WebGui control.
To get more information about the price and additional features of Visual WebGui Professional Studio, 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 for its 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 enough knowledge of using Visual Studio, Windows Forms, and the programming language of your choice, be it VB.NET or C#. In the following section, I'll use a simple example to show you how to develop an application with Visual WebGui.
For this demonstration, I installed the Professional Studio and integrated it into Visual Studio 2008, but you could develop the same application whether you're using the open source SDKs or even the Visual WebGui Express Studio. Visit www.visualwebgui.com/Developers/Resources/tabid/319/Default.aspx to 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 the application is created, you'll feel like you're inside a Windows Forms environment inside Visual Studio 2008. Nothing has changed!
Notice in Figure 4 that a few additional references have been added to support Visual WebGui platform, including the following:
Gizmox.WebGUI.Common
Gizmox.WebGUI.Forms
Gizmox.WebGUI.Server
Gizmox.WebGUI.Server.Silverlight
Figure 4: Supporting Visual WebGui references
In addition, a new Form has been added as a startup form, Form1. This form will be your working area similar to a Form in Windows Forms or Page in Web Forms.
Before running the application, you must right-click the Form1.cs form and select Set As Start Form. This option ensures that when you run the application, Form1 will be the starting point of your application. This is a must before running the application, so that you avoid a directory listing and choose the right form to start the application.
After the Form1.cs is configured, to run it as the startup form, right-click the application and select Properties. Then go to the Deployment tab, as Figure 5 shows.
Figure 5: Enabling Silverlight rendering
Select the Silverlight checkbox (i.e., the .swgx extension), in case you want to enable Silverlight rendering of the application, which we do in this sample demonstration.
Next, go to the Web tab, select the Specific Page check box, and enter Form1.swgx. This ensures that the application will render Form1.cs (which was previously set as a startup form) in Silverlight mode. If, however, you want to render Form1.cs in DHTML mode only, the default mode of Visual WebGui rendering, then skip this step.
For the sake of this demonstration, let's add a simple Button control on Form1.cs. To do 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 6 shows.
///
/// Handles the Click event of the Button on the Form
///
///
///
private void button1_Click(object sender, EventArgs e)
{
MessageBox.Show("Hello Visual WebGui!");
}
Figure 6: Button's Click event handler
The handler is simple and shows a message using the MessageBox.Show method. Figure 7 shows the application running inside an Internet Explorer 7.0 instance. Right-click anywhere on the page, and you'll see the Silverlight context-menu, which you can 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 the technology, I've highlighted the major and most important features, listed the components and products included as part of the Visual WebGui platform, and demonstrated how to develop and deploy a Visual WebGui RIA. I highly recommend you delve into the product yourself and visit the Visual WebGui website to get more details, tips and tricks, tutorials, articles, videos, and webcasts that can give 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 multinational construction company based in Athens, Greece.
