Visual WebGui is fully xsl driven, which means that every component has an xsl that renders its presentation on the browser. The Visual WebGui developer uses the SDK abstraction layer defining controls and their relations, where as the rendering is done through a set of dedicated xsl templates that render the components. This means that you can take an existing application and use different xsl templates to create a different look and fell.
There are a couple of ways you could change the default templates:
- Themes - A theme is actually an assembly with embedded xsl templates, css files and JavaScript files that is used to override the default behavior. A theme can define xsl/css/js files that will override the default file. A missing file in the theme will fall-back to the default definition of the resource in the default theme. Themes can also define behaviors of a given control as they can also override the script for the specific component. Themes can add events that can be dynamically used on the server side. For example: lets say you have a list and you want the first column header to have a button that selects all items. You just call a JavaScript method that fires a named event to the server and by inheriting the list view you can use this event.
- Custom Controls - Still undocumented but you can add new controls that do not rely on the existing ones and have their own xsl templates/css files and JavaScript behaviors. Developing a custom control is a very simple task as Visual WebGui provides you with a comprehensive client framework that handles tasks including: server communication and layouting.
- Open Source - Visual WebGui SDK sources are available on SourceForge and you can download and customizing them to your own needs and by doing so you can customize the API, templates and the behavior of the control. This is a preferable mechanism when changing the xsl/css/js is not enough.
- Custom Style - Every Visual WebGui component has a custom style attribute that enables you to add a style to an existing control. This enables you for example to take an existing control and use it for a different use. For example you could take a panel control and use it for creating a different container appearance without changing the SDK.
- Flavors - Flavors are sets of css parameters that can be chosen in the configuration file and change the appearance of the current theme. Every theme defines different flavors that will override the default flavors. Flavors allow for creating different color sets and font sizes that provide a good mechanism for instance for creating flavors that have big fonts for people who need it.
- Inheriting - Visual WebGui is 100% object oriented which means that everything can be inherited. Every control has display properties that can be manipulated to change fonts/background/borders and more. By inheriting you can create a MyPanel for example that inherits the Visual WebGui panel and displays a light gray background with blue dotted borders and using this inherited control will provide a different look.
- Composite Controls (User Controls) - User controls is actually a control that can contain other controls and by doing so you can take several functionalities and combine them to a new control.
When to use each mechanism:
- Themes - Use them when you need a completely different look and feel.
- Custom Controls - Use them to create new types of controls that are not included in the SDK. For example a side-bar menu.
- Open Source - Use it when you want to create both display and behavior changes to existing controls.
- Custom Style - Use it when you want to add a new appearance to an existing control.
- Flavors - Use them when you want to support color schemes, font changes and every thing you can achieve by chaging css values.
- Inheriting - Use this when you need to change the control behavior with behaviors that already are supported but you wish to package them as a control for reuse.
- Composite Controls (User Controls) - Use them when you need combined functionality of several components or for reusing screen parts. The user control is the replacement of the web IFRAME. For example you can have a list that every item selection clears a panel and assign it a different control and by that you create an IFRAME behavior without the IFRAME.
Some of these mechanisms are still undocumented but documentation is on the way and sample apps with those mechanisms implemented will soon be available too.