Recently I had the opportunity to take a closer look at the package Telerik Premium Collection for .NET. This package consist of several independent products including: RadControls for ASP.NET AJAX, RadControls for WinForms, RadControls for WPF, RadControls for Silverlight, Telerik Reporting, Telerik OpenAccess ORM. In this article I am going to present the steps that I have done to prepare a new user interface for existing application that is based on standard solutions from WinForms platform for .NET and my goal is preparation of a new interface that is consistent with current trends. To achieve this goal, I am going to use RadControls for WinForms from Telerik.
Base application
As a sample application, that I want to change using RadControls for WinForms from Telerik, is an OPC UA Address Space Model Designer from CAS. I am a software developer in CAS, I have access to the source code of this application and sufficient approvals to use and change this application for the purposes of this article.
OPC UA Address Space Model Designer is a software intended to help developers and engineers to design models that are used in servers compliant with OPC UA technology. OPC Unified Architecture (UA) is the next generation of OPC technology, widely used in industrial automation systems for the transport and sharing of data between an underlying process and systems from higher layers. One of the biggest improvements in OPC UA is a powerful Address Space and Information Model. OPC UA allows presentation of a real-time process and underlying infrastructure as a consistent information model built up with nodes. The process model is represented by nodes, attributes and their mutual relationships. OPC UA Address Space Model Designer is not only an editor; it is also an intelligent book. It contains much useful information about UA specifications, address space concept, information model and development of the OPC UA models. What is more, a smart content positioning system of the help window can follow object selections in the GUI. The purpose of this article is not detailed description of the capabilities and features of OPC UA Address Space Model Designer, so if anybody is interested in further details I recommend to visit the product page or watch the movie about it.
Let’s focus on the user interface of this application. It is based on the .NET 2.0. The following figure presents the main user interface elements.
We can distinguish the following elements:
- Expandable menu (based on MenuStrip)
- Tool strips (based on ToolStrip)
- Tabs that allows to switch between the model editor interface and a book about the OPC Unified Architecture technology
- One floating and docking window that shows the standard output of the application (such as results of the build process)
- Model editor based on a tree (TreeView) and the properties editor (based on PropertyGrid)
I think that the current user interface is functional and seems to meet the relevant requirements, but nowadays such interfaces are usually based on ribbon (for example, in Microsoft Office 2007) and many floating and docking panels or windows that user can customize accordingly to his/her requirements (a good example is Visual Studio). I hope to succeed in showing how to enhance this interface using the RadControls for WinForms package.
First impressions
In the previous section I have mentioned some details about the application that I am going to change. Now it is time to take a look at the package that I am using to apply the changes, it is: RadControls for WinForms. The installer package is a 131 MB file that can be downloaded from the telerik.com website. The nice fact is that the installer is digitally signed, which ensures that the software actually comes from the publisher.
The installation procedure is not complicated, a user have to launch the installer and select target location for files included in the package. I would like to write here that the installation proceed smoothly, but during my installation process the error appeared at the end and the message was: "null reference". Unfortunately, the message was rather unclear and did not indicate what really went wrong, but since after the error message the installation ended successfully (and the package seemed to work correctly), so I have decided not to spend any more time on that issue.
Examples included in the package
After the installation process, the demo application is launched. It demonstrates the features of the package. This is a very good starting point to take a first look at the package and results that can be achieved using this package and controls included. The sample application allows to select a control from the list and shows how this control works in real application.
What is more the full source code of the demo application is included. This is very good idea that helps in learning the RadControls package, and provides ready to use code. Additionally sample source code viewer is build-in in demo application, but I have to admit that this is rather feature sample and it is better to use Visual Studio for code reading.
There are many examples available for each control. Some of them are duplicated but usually even in simple solution many features and controls can be presented together. Examples are really strength point of this package and it takes quite a long time to watch them all. One of my favorite is example that presents the Solar System. It looks very good, but I have to admit that finally the most useful for me was simple RSS reader.
I must say that examples are well and professional prepared and are a valuable source of knowledge about the package. However, the authors of the examples should put more attention on updating the examples to use the latest components from the library and do it in an optimal way (I was surprised that some of the examples uses classes marked as deprecated or obsolete).
What is included in the package?
Let’s take a look at the possibilities offered by the Telerik RadControls for WinForms package. The following figure shows the types of controls that are included in the package:
I think that everybody has the same reflection now: "The controls like ribbon bar, carousel, charts, and the others that are not available in the standard set of WinForms controls for .NET are potentially very useful, but what is the purpose of duplicating the controls like buttons, panels, labels, etc. ...? " Those controls that overlaps with the others that comes from WinForms. NET, significantly extend the capabilities of originals. Improvements can be found on visual side (e.g. buttons or windows of any shape) and functional or performance side (e.g. display speed optimized GridView). Additionally some of the controls allow to embed only those controls that comes from the package (e.g. DockManager and panels). What is more, sometimes the result achieved by mixing the standard controls with those that comes from the package is visually poor and it is better to use only controls from Telerik RadControls package.
Integration with the Visual Studio
Telerik RadControls for WinForms does not offer own IDE and is designed for integration with Visual Studio.
I must say that I was little surprise after first launch of Visual Studio after installation of RadControls for WinForms. I have not found any new controls in my toolbox. I am not sure whether this situation was the result of an error that has appeared during the installation or the authors of the package decided not to modify the configuration of VS user interface without any information for the user, but I think it would be better to have all those controls automatically. I have decided to add all RadControls to my toolbox, it was quite easy task. A new group on toolbox should be created, then all controls can be added using context menu: "Choose items ..." and selection of all necessary libraries (that comes from Telerik company) and as the result, all new controls become available (see figure below).
The next thing that can be done is installation of new (provided by the Telerik RadControls for WinForms package) Visual Studio project templates. For this purpose, some of the files installed with the package must be copied to the appropriate directories of Visual Studio (a detailed description is available on the support pages at telerik.com). These templates are designed to help in creation of projects that use RadControls.
Creation of the new modern interface
Now I am going to move forward to the practical part of this article, that is preparation of the new interface for CAS OPC UA Address Space Model Designer.
Layout of main window
As part of the changes I have decided to add ribbon to the top of application user interface. This element is becoming very popular recently. In the middle, dock manager is added, thanks to it, the user interface is based on floating and docking panels (like Visual Studio). And finally status bar is added at the bottom. Those elements creates the following window outline:
Note that the order of those elements have to be the same as it is shown on figure above, otherwise the elements overlap each other. Unfortunately the developer is not informed when the order is wrong. I think that it could be a good idea if such information would be available e.g. during compilation.
The beginning of ribbon adventures
The first thing that I have changed was addition of the ribbon, the result of this operation is showed on figure below.
I have to admit that this was a little surprising. I have noticed a ribbon with minimize, maximize and close button with classical caption (with the same buttons) above it. This looks very strange and is not acceptable. The solution is not so obvious. The classical solutions like removal of the window border (FormBorderStyle None) or disabling the top caption (ControlBox to false and empty label), were not good choice, as on figure below.
Finally, supported by one of the examples (RSS reader), I have decided to used a ShapedForm provided by Telerik with some additional configuration. I have found this solution in one of the examples that is included in the package. Those tricks finally have solved my problem, and I have understood what is the purpose of introduction a new type of Form. But the question arises, whether all those settings should be made automatically after putting a ribbon on the form?
Playing with Dock Manager
In the next step I have decided to add functionality of docking and floating windows or panels. In Telerik RadControls for WinForms package DockManager is responsible for such functionality. I think that the usage of this manager is quite easy, it has to be added to the window and then panels have to be added to DockManager. Now I want to mention that panels (or docking windows) are not available in the Visual Studio Toolbox and I think that this is not very intuitive. Those panels can be added only from DockManager context menu (just like items in ToolStrip). This is not totally bad solution but I have to admit that I had spent at least few minutes on searching for those panels inside Toolbox. Panels can be docked or configured in many ways but it is quite different from well known Visual Studio. Additionally I would change the buttons that are use to call context menu, pin/unpin or close the panel, I would prefer buttons similar to Visual Studio.
The next thing that I would change is the way of editing hidden panel. It is rather difficult now, the panel that is configured as hidden have to be marked as visible, then edited and finally configured as hidden again. I think that there should be other way (more elegant) to do it.
Filling the ribbon
The work on the preparation of the ribbon-based interface is quite easy. The addition of new items is very similar to the way that is used in ToolStrip or DockManager. New items can be added using context menu. The list of items that could be added to the ribbon is quite long, there are available items like: buttons, graphical buttons, switches, repeat buttons, checkboxes, radio buttons, drop-down lists, galleries etc ... However It would be nice if there was an easy possibility of adding own items, e.g. I would be interested in adding standard panel or user control with content prepared earlier. In addition, I have noticed that RadDropDownButtonElement was not available on the list of items that can be added to ribbon. It is strange for me, this is very useful element that is showed in the examples.
Now let’s focus on item positioning on the ribbon. An item automatically determine its position and the developer that is preparing the interface has to select only the distribution method: vertical or horizontal. Set of items can be grouped and each group can be configured differently (vertical or horizontal). To understood that, take a look at the example of the big paste button, and two others lying next to him (horizontal distribution), those two buttons are the following: copy at the top and cut at the bottom (vertical distribution) .
Now I want to come back to RadDropDownButtonElement. I was quite surprise when I was unable to find this item on the list of items that can be added to the ribbon. I have known that such item exist. I have found it in one of the examples, where the RadDropDownButtonElement was used to change the visual style (theme) of the application. I think this button is very useful and can be used to group many elements of similar functionality (see the figure below and different types of filters) or based on this item something similar to classic menu can be created. I have chosen the second possibility to quickly move the complicated menu from my application to the ribbon. I agree that is not elegant and rather temporal solution, which requires writing some lines of code but it is faster than creating everything from scratch. I think that it would be nice if the package includes any solution to assist the transformation of classical menu to the ribbon in automated way. This would be the very first step in the transformation of the interface.
An important element of the ribbon is also the "Start" menu. The creation of this menu is very similar to classic menu, however I would love the option: "Add all common items", that would add items like: new, open, save, etc… .Additionally It would be nice to have a set of standard icons that would be used in development. Some icons are available together with the examples, but the value of the package would increase if it offered a ready to use library of standard icons.
The appearance of an application based on the themes
An interesting possibility offered by the RadControls package is ability to change the visual style (appearance) of an application based on custom definitions called themes. This functionality allows the end user of the application to change the application appearance very easily and finally to select the appearance (theme) that he/she likes most. The results are presented on figure below:
From the developer point of view the usage of the themes in the application, is quite simple and consists of (almost) selection of theme name inside of appropriate event handler (e.g. after pressing the button). However, it is important to add the appropriate theme (e.g. any of the provided by the package) to the main application window before trying to change the theme. Lack of theme that is added to the window results in very strange view when the theme is changed. I think it would be a good idea if any mechanism that informs about missing theme (e.g. during compilation) could be implemented by the authors of the RadControls package.
Deployment of the application
The last step in my changes of the application is configuration of the deployment. In this case, deployment is based on the click-once technology. I have to admit that before this step I have read the article in the documentation of RadControls package about application deployment. The solution is very easy, the article describes all scenarios and all the steps to prepare the application deployment. In my case it was necessary to include appropriate DLL files (from the package) in my deployment. The result is acceptable, however It would be nice to have something like "redistributable" package that installs all necessary components and the only thing that developer should do is adding this redistributable package to its deployment.
Summary
To sum up, RadControls for WinForms from Telerik is worthy recommendation and professionally made package. Thank to this package preparation of professional and modern-looking user interface for applications is quite easy task and can be done in a short time. My work with the application that I have decided to change (CAS OPC UA Address Space Model Designer) can be a good proof of that. I have spent on changing the application only a few hours and the result is showed on picture below.
http://www.commsvr.com/Products/UAModelDesigner.aspx
I know that some tasks in this subject have to be finished but when I asked my colleagues what they were thinking about the new interface, I received favorable comments.
I hope that you enjoy this article and that I have not done any serious mistakes during writing this article. I have to admit that my experience in programming is based on internal (not visible for the user) solutions rather than preparation of the user interface.
For reader from Poland I suggest to visit my blog and read this article in polish language: http://maciej-progtech.blogspot.com/2009/06/kierunek-nowoczesny-interfejs-aplikacji.html.
Finally, I would like to thank the dotNetoManiak.pl portal and Telerik company, thanks to them it was possible for me to get familiar with the RadControls package and prepare this article.
Maciej_Zbrzezny on delicious.com
Posty
Modern Ribbon WinForms control
OdpowiedzUsuń