Visual WebGui (VWG) 6.4 Beta 2 is now available opening up a new set of capabilities turning VWG into an end-to-end solution for line of business and data centric apps development.
Taking a look at the following diagram can help you better position where VWG shines and in which cases you should choose a different paradigm:
Up to v6.3, VWG brought the simple paradigm of Form based development to the Web:
- WYSIWYG Forms Designer
- Large set of Data Centric controls (of which some were partially features)
- Server centric with UI level Virtualization, with limited scalability capabilities.
- Support for IE and FireFox 2.0 and some partial support for other browsers.
- Development IDEs: Web Developer Express 2008, Visual Studio 2005 or 2008
- Set of Windows Forms mimicking controls.
- Limited UI/look & feel customization capabilities.
- Limited UI and Controls extension and custom creation capabilities.
- Limited compatibility with Windows Forms (~80% of the API and behaviors).
VWG v6.4 complements the following major capabilities, creating and end-to-end solution:
- Extended and much more stable WYSIWYG Forms Designer
- Fully implemented Data Centric set of controls – of which a fully functionalDataGridView control.
- Server centric with UI level Virtualization, with unlimited scalability capabilities (released within beta 2 and currently on lab tests and real world tests and will be fully accomplished by RC0).
- Full support for IE 6+, FireFox 2.0+, Chrome, Safari and Netscape (partial support for Opera browser which will be also fully supported in the near future).
- Added support for Visual Studio 2010 (a media file will be available during the upcoming month).
- 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 extending existing and creating custom controls.
- Much better compatibility with WinForms (~95% of the API and behaviors).
In this article, I will try to cover the major new capabilities and infrastructures above.
Extended and much more stable WYSIWYG Forms Designer
Face lifted and much more stable WYSIWYG Forms designer.
Fully implemented 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. Above 250 DataGridView related bug fixes and improvements were implemented within v6.4.
DateTimePicker was reconstructed to support the full set of behaviors as defined by the equivalent .NET Windows Forms control. Above 70 DateTimePicker related bug fixes and improvements were implemented within v6.4.
ListBox, ComboBox, CheckBox, TreeView, ToolBar, Menu, Window Dialogs and Popup dialogs much improved, presenting a much more complete set of capabilities and behaviors. Hundreds of those controls’ related bug fixes and improvements were implemented within v6.4.
Unlimited scalability capabilities
The infrastructures of v6.4 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 v6.3 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.
Important note
Although the major part of the infrastructure is already laid in 6.4 beta2, please mind that it will not be fully functional or testable until RC0 is released.
Full support for browsers
VWG v6.4 client infrastructures were adapted to inheritably support 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).
Added support for Visual Studio 2010
VWG v6.4 already supports VS 2010. An installation media file will be available in the next few weeks following some lab tests.
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).
One of the important controls that was statistically discovered as very often used for data centric application is the ListView, this control enabled read-only editing of strictly formatted rows and columns by v6.3.
Due to its very light nature, it is much extended within v6.4 to practically 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
The strongest setback for not using desktop development paradigms for the web has always been the fact that people don’t usually want their application to look like a desktop application over web; they do want the full web 2.0 experience.
Visual WebGui v6.4 completely removes this limitation, introducing the theme designer which provides tools and methodologies of work for both the developers and graphic designers.
Generally, the process of creating a totally new look and feel to your application would be:
- Creating a new theme - inheriting from any base theme (4 clicks).
- 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
- 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
Although Visual WebGui v6.3 did not lock its developers in with the native set of controls, v6.4 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 infrastructural change made within VWG 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 it’s 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:
Much better compatibility with .NET Windows Forms
Within the latest version, many compatibility issues with .NET Windows Forms in terms of behaviors and functionalities were complemented.
Some areas in which major improvements have been made:
- Design-time – complemented many design-time missing features.
- Rendering methodology – equalized “SusspendLayout” and “ResumeLayout” behaviors upon compatibility flag (controlled directly from VS integration).
- Graphical improvement – some un-polished edges of graphical elements were handled.
- Control – added some important properties and methods in “Control” base object.
- DataGridView – completed some missing methods, properties and events and reordered events order according to Windows Forms.
- ListView – general compatibility with Windows Forms such as support for ImageList.
- ComboBox – some missing functionality has been complemented
- CheckBox – added full support for 3 state
- ContextMenu – ability to customize the menu at runtime.
- Right-Click event handling – enables distinguishing between left and right click within the event handler.
- DateTimePicker – complemented many behaviors.
- TreeView – complemented inline editing capabilities, state icons and some missing API.
In general, v6.4 provides a broader support for the desktop set of APIs and a much better starting point for desktop applications migration.
Download PDF