Web 2.0 Extension for ASP.NET

ASP.NET is now much extended to support line of business and data centric applications, providing Web 2.0 rich user interfaces within a native web environment. New capabilities allowed by the Visual WebGui extension turn Visual Studio into a rapid development tool for the web, leveraging the wide set of ASP.NET web infrastructures runtime and extending its paradigms to support highly interactive applications.

Taking advantage of the ASP.NET infrastructures

• Using the native ASP.NET ISAPI filter: aspnet_isapi.dll
• Relying on and exposing ASP.NET objects – Session, Application, Server
• Providing full control over the Request and Response objects upon developer decision
• Exposing the entire set of client resources (JavaScript, XSLT, CSS)
• Supporting any combination of traditional ASP.NET components and applications

ASP.NET design-time enhancements

• Forms based designer – enhancing the experience of ASP.NET page based designer
• Fully object oriented coding – simplifying and purifying the coding into a single layered code as opposed to dealing with JavaScript, HTML, CSS and only some OOP.
• A large set of AJAX rich Web 2.0 controls – extending the basic set of ASP.NET controls
• Native cross browsers/devices support – turning the struggle of multi devices support into a seamless mechanism.
• Seamless browser/server communication – releasing the developer from constant decision making regarding what happens where and when
  

ASP.NET runtime enhancements

• Optimized communication – saves 90% on traditional ASP.NET bandwidth consumption.
• Lowers the server CPU consumption to less than 50%.
• Creates native, completely secured, thin-client-like end points.
• Supports full scalability using more than one optional model.
• Increases the number of concurrent users per IIS server.

Taking a closer look at the following diagram can help you better understand in which scenarios the extension is valuable:

Visual WebGui extends ASP.NET with a simple paradigm of Form based development which complements the following major capabilities:

• WYSIWYG Forms Designer
• Fully implemented Data Centric set of controls – of which a fully functional DataGridView control.
• Server centric with UI level Virtualization, with potentially unlimited scalability capabilities.
• Extensively customizable controls, of which a ListView can become the most flexible DataGridView very easily.
• Complete UI/look & feel design capabilities in the form of Point & Click designer.
• Comprehensive framework for creating custom controls and extending existing ASP.NET controls.
• Full support for browsers

The following is my coverage of the major new capabilities and infrastructures listed above. 

Extended WYSIWYG Forms Designer

Data Centric set of controls

DataGridView control’s infrastructures were reconstructed with a much lighter client script and a far more comprehensive support for DGV behaviors and set of events.

DateTimePicker was reconstructed to support the full set of behaviors as defined by the equivalent WinForms control.

ListBox, ComboBox, CheckBox, TreeView, ToolBar, Menu, Window Dialogs and Popup dialogs much improved, presenting a much more complete set of capabilities and behaviors..

Unlimited scalability capabilities

Visual WebGui ASP.NET extension infrastructures were created out of a general scalability and performance point of view. Following very high level list of the improvements within this version:

• Dramatically minimizing VWG tree of UI state in memory to less than 10% comparing to stateful apps in ASP.NET using mainly differential persistence algorithms.
• Individually reengineering the server side of controls to reflect the need to either serialize them into floating persistence state or to reconstruct them (stateless mode) according to the balance between the two options.
• Creating and integral tool which advises and assists in turning the application into a fully serialize-able into a floating state and a scalable application.

Full support for browsers

Native support for multi browsers. Full support is implemented for the different IE engines (version 6.0 and above), the different WebKit implementations (i.e. Chrome and Safari) and the different Mozilla based browsers (i.e. FireFox version 2.0+ and Netscape Navigator).

Extensively customizable controls

Rethinking of the limiting factors of VWG as a framework, many controls have been changed to support extensibility and customization (the entire concept is described in details within the “Complete UI/look & feel design capabilities” and the “Comprehensive framework for extending existing and creating custom controls” sections bellow).

Due to its very light nature, it is much extended to support any type of list of data visualization including grouping and any hierarchical views and, of course, inline data entry.

The ListView control now supports:

• Containing any control as a column (i.e. Button-Column, ListView-Column, ComboBox column etc).
• Adding a sub-panel per each row, enabling, among other flexibilities to create:
  • Unlimited hierarchies
  • Grouped views
  • Inline master-details view

Code sample:

// Create the list view
ListView objListView = new ListView();
objListView.Dock = DockStyle.Fill;

// Create the list view columns and define the second column as a control column
objListView.Columns.Add(new ColumnHeader("name", "Name", 150, ListViewColumnType.Text);
objListView.Columns.Add(new ColumnHeader("button", "", 150, ListViewColumnType.Control);

// Create a user control or any other control as the panel
ListViewControlPanel objPanel = new ListViewControlPanel();

// Create a new item with a panel and the first sub item as "Some text"
ListViewItem objItem = this.mobjListView.Items.Add(objPanel, "Some text");


// Create a button and add it to the sub items collection as the second item
Button objButton = new Button();
objButton.Tag = objItem;
objButton.Text = "Edit";
objItem.SubItems.Add(objButton);

Complete UI/look & feel design capabilities

Visual WebGui is introducing the theme designer which provides tools and methodologies of work for both the developers and graphic designers for customization and application branding.

Generally, the process of creating a totally new look and feel to your application would be:

1. Creating a new theme - inheriting from any base theme (4 clicks).
2. Overriding whichever resources required  (images, css files, js files, xslt files or others)
   or
   Exporting the styles only to a graphic designer and then importing the designer outputs when the designer has finished
3. Registering and select the new theme (4 clicks) – changeable at runtime as well.

Step 1: creating a new theme

Add a new item of type “Visual WebGui Theme”:

                               (1)                                                                                               (2)

Build the application and open the theme designer:

                                 (3)                                                                                                                     (4)

                                                                                   (5)

Then you can either:
Override a single resource within new theme; then open your editing or graphical tool of choice and save directly into the new theme:

                           (1)                                                                                                                   (2)

                               (3)

Or:
Export graphical resources to a graphic designer (which may use Photoshop)

                         (1)                                                                                                                              (2)

                                    (3)

Then it is recommended to open the batch of files with Photoshop and in order to graphically edit them.
                                                                                    (4)

                                 (5)

At import, the system will automatically adjust to altered image sizes as possible and the new theme will be completely applied.
                                                                                                    (6)

And then:
Select the new theme as the default one – or dynamically set the theme in code:

                    (1)                                                                                                                 (2)

                                      (3)

                                                                                       (4)

The Point & Click designer shown above enables complete customization of application’s look & feel for both branding or ‘Webitizing’ VWG UIs.

Comprehensive framework for extending existing and creating custom controls

The Visual WebGui extension makes the tasks of using 3rd party controls and customizing their code or creating new controls (either inherited ones or not) a much simple task.

The infrastructure enables organizing the set of resources of your customized ‘kernel’ and controlling the types and behaviors of those resources using the same Point & Click experience as with creating new themes.

The work progress with the control level Point & Click designer at a glance for creating or inheriting an existing control and customizing its client resources such as Scripts and Layout::

                           (1)                                                                                (2)
Control Files:

• Server side .NET code
• Resources (Skin)

Underneath the skin, all of the client side files reside.

                             (3)

                              (4)                                              (5)

Just like the theme designer, any resource can be added to the theme and configured through this interface.

                              (6)

Each resource’s behavior and purpose can be configured through a designated property grid. 

                              (7)

Creation of controls can mean also inheriting existing controls; in order to inherit a control, the declaration of the server side code should simply say “Specific-control” instead of generic “Control” parent:

And include any of the resources (images, templates, style sheets and scripts) from the base control:

Having this control level Point & Click designer practically enables the following common tasks:

• Wrapping client technologies based controls:
  Using any client side technologies, such as ActiveX and Java Applets as shown in the following walkthrough
• Creating new controls – as shown above.
• Customizing existing controls – as shown above.

Support for Visual Studio 2010

The extension already supports VS 2010, but the media files will be only available in the next few weeks following some lab tests..