The general idea of the theme designer is to provide an easy way to edit what was once considered to be internal resources. A Visual WebGui presentation layer is built of a collection of resources and properties which are used to generate the resources needed by the client to work as a Visual WebGui presentation layer.
To make the theme designer intuitive I based the UI design on the Visual Studio resx editor which most of .NET developers are familiar with. The idea was that the most important feature of the theme designer is the ability to edit resources and skin properties.
At the heart of the theme designer capabilities lays the Skin object which as I mentioned in previous posts is the connecting entity between the client resources and the server abstraction layer which is the API (WinForms object model). The skin is a designable unit on its own and is used to design the controls client resources. The theme designer is actually a collection of tree ordered skins that can be edited at once and provide the ability to override and change the behavior that was initially designed in the control designer.
As of “6.4 (preview 1)” there are no resources running loose in the system. That means that every image, script, template, xaml etc. that is used on the client is part of a Skin and can be overridden in the theme designer. This means that the theme designer is actually much more than just a theme designer. It is theoretically now possible to create an entire new presentation layer using the theme designer as you can override resources and add your own, but I think that looking at it from a practical view it means that you can change anything you want in the client presentation. This gives tremendous amount of power to themes which can be utilized to workarounds, customizations.
The nice thing about the theme designer is that it will edit custom components the same way it works with the internal Visual WebGui components, which practically provides a tool for making any third party control customizable. I believe that down the road when we will start seeing more and more third party Visual WebGui control, this will be a huge benefit, but effective immediately every custom development you guys do can be automatically customizable to your different projects / customers.
Let’s go practical…
All you need to do in order to start creating your own theme is to create a class that inherits from “Gizmox.WebGUI.Forms.Skins.Theme” in a separate assembly (for reuse) or anywhere in your project, register it in the web.config (using the project properties under registration) and set it to be the default theme. You can also switch in runtime by doing Context.CurrentTheme = “[Theme Name]”. It will also be wise to disable caching and to increase the private version in the project properties to avoid caching issues during the development of the theme.
After opening the designer of the theme class you have created you will see a tree view containing skins from all referenced projects and assemblies ordered hierarchically. The nodes in the tree are skin classes from those referenced assemblies and projects. The node names are without the “Skin” suffix which is also a best practice when you create a custom skin class. When you click on each of the nodes you will see the list view on the right change to reflect the resources of the selected skin. The resources are filtered according to the drop down on the left of the list toolbar. This means that if you would like to see the scripts of a button you should change the selected filter to scripts and click the button skin node. The UI is designed based on the concept of the resx editor with the addition of the tree to provide for multiple skins editing at once.
The resources should be displayed with a shortcut mark on the left bottom of the list icon. This means that the resources are not defined locally and you cannot change them. If you double click on a non local resource you will be able to see the content in a read-only mode. To change definitions or the actual content of a resource you will need to override that resource and that is done by right clicking one resource or more and selecting override. This will copy the resource to your project and provide you with the ability to edit the content of the resource.
If for some reason you want to revert back to the original resource you can do that by deleting the overridden resource (through the right click menu) and the designer will automatically revert to the default content of the resource. The delete action is not reversible and you will get a confirmation dialog to make sure you understand you are going to delete the resource.
You can also add new resources by clicking the “add new resource” or “add existing resource” in the toolbar, or you can simply drag in new resources. In non image resources you will need to configure the presentation role / filtering so Visual WebGui will know how to use this resource. In “images” you will be able to call the image from a simple URL or use it in definitions of styles or image properties which support mapping images. Currently you are only able to define images in the property grid to local images but in the next previews you will be able to reuse resources in several skins.
During our own process of implementing themes using the theme designer, we found out that sometimes you need to reset an entire skin in the theme definition and for that we have added a reset option on the right click of the skin node. You will be prompted to decide if you would like to reset resources, properties or both. After reset you will have a reverted skin.
Every skin defines properties and those properties can inherit their values from their base skin class or from a container that can be defined using attributes. Skin properties can also be local and ignore other skins. This means that if you would like to change the fore color in the entire theme you can go to the lowest hierarchic skin which is the common skin and define the fore color there. The fore color is inherited so if you will go to button skin for example you will see that the fore color was changed there as well. If you do not see the value populating that might indicate that the skin property is defined to not inherit its value or that it overrides the default value and should be reset to default.
It is important to save the project after adding, deleting or overriding a resource as the project is changed to reflect the change in the theme and not saving the project might cause the resx file of the theme to look for a file that does not exist or even worse the project to look for a file that does not exist.
After selecting any skin you can click on the help button in the toolbar of the list view which will open the skin documentation, in which in many cases we have added a screen shots explaining the different skin elements and how they can be customized.
So that pretty much provides with all you need to start creating your own themes or trying your luck in changing any client resource…