Wijmo Migration: Menu & Tabs

Introduction

ComponentOne is constantly making efforts to be the leading edge for any .net controls. Our new Wijmo controls for ASP.net are precisely that. ASP.net Wijmo contains some exciting advances visually as well as simplifying the development processes overall. Based upon the new Wijmo Framework, these ASP.NET controls have been completely re-engineered from the ground up. The new controls leverage the latest technologies available to create the ultimate development experience including:

1. Improved Performance: Fully extensible client-side and server-side object models with faster load times.
2. Latest Standards Support: CSS3 and HTML5 compliance.
3. Major Browser Support: Internet Explorer, Firefox, Chrome and Safari.
4. Themes: Built-in premium CSS3 themes and all Controls are compatible with jQuery UI Themeroller.
5. Tightly integrated with jQuery.

The C1Menu and C1Tabs are two of the fine navigation controls that are included in our ASP.net Wijmo line up. Let's take a look at the procedures involved in migrating over to our latest controls and delve into some details about some basic differences between ASP.net Wijmo controls and their older ASP.net controls (Palomino) along the way.

Prerequisites

To get started in this migration you will need our ASP.net Wijmo controls. These can be downloaded from: http://www.componentone.com/SuperProducts/StudioASPNET/ by clicking the orange "Download Free Trial" button.

Getting Started

To get things started, you should create a new ASP.net Web Application using ComponentOne's older Palomino controls. Below are links to the quick-start guides where you will receive directions to create a webpage with these controls and visual aid as to what the final product will look like. Once each control is set up on its respective web application, we can then begin to delve into the migration details for our ASP.net Wijmo controls. During the migration process I will note changes between the Palomino and Wijmo controls.

C1Menu

Follow this quick-start to create the C1Menu using our ASP.net C1Menu control.

C1TabsControl

Follow this quick-start to create the C1Tabs using our ASP.net C1TabControl control.

Migration details

Once you have completed each of quick-start guides you can begin making changes to your respective programs as migration to the new ASP.net Wijmo controls. The first thing you will want to do is add the new ASP.net Wijmo assembly references. Go to 'Project' from the menu-bar and select 'Add Reference'. Click the 'Browse.' button and navigate to: For .net 4.0

• For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v4
• For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v4

Select the C1.Web.Wijmo.Controls.4 and click "Open". For .net 3.5

• For 32bit Machines: C:\Program Files\ComponentOne\Studio for ASP.NET Wijmo\bin\v3
• For 64bit Machines: C:\Program Files (x86)\ComponentOne\Studio for ASP.NET Wijmo\bin\v3

Select the C1.Web.Wijmo.Controls.3 and click "Open". Then in the "Add Reference to." dialog box add click "Add". In your solution, open up your page where you have your ASP.net control in the Designer View.

C1Menu Migration

?To add the new ASP.net Wijmo Control, simply drag the C1Menu from the C1 Wijmo Controls ToolBox onto the page. This will display a Menu without MenuItems. You can use the C1Menu Tasks dialog to add items to the menu and edit each item's properties by clicking the "Edit Menu" link. All Data Binding is performed the same way as with the original ASP.net C1Menu. However, if you created menu items in code and wanted to move those items from your old ASP.net C1Menu to your new ASP.net Wijmo C1Menu, you could do so by manipulating the code. In the "Source View" you would copy the contents between the tags that are within the cc1:c1menu tags and place them in your new Wijmo:C1Menu tags. You would then need to find and replace every instance of "cc1" to "wijmo". The default .aspx code for the Wijmo control is slightly different than its palomino control. Here are some examples of the differences: The C1MenuDesignerForm can be used to edit the ASP.net Wijmo Menu. There are some differences between the server side properties for our ASP.net Controls and Wijmo controls. These changes are shown below. Some of these you can see are simplified in the ASP.net Wijmo such as the Animation property. Some other things you might want to note is that the Orientation / NestedGroupCheckable properties for sub menu items have been removed. The positions of sub menus are now set by the jQuery position utility. You can play around with the C1MenuDesigner and adjust settings accordingly to your liking. When you are finished you will be left with a beautiful new c1Menu that has been built on web standards including AJAX, CSS, HTML5, and JQuery.

Keep in mind that you could easily change the appearance of your control by setting the theme to one of 30 pre-designed. These themes can be easily styled with ThemeRoller and of course you could create your own!

C1TabsControl to C1Tabs

Migrating over to the C1Tabs control can be done in a similar fashion as the C1Menu. Add the C1Tabs control by dragging the control to your ASP.net page. This will display a content box in which your tabs will display viewable content for each individual tab. To begin, click the C1Tabs Tasks smart designer button and click the c1Tabs.SmartTag.Designer link item. Similarly to the C1TabsControl from our older ASP.net controls, the designer dialog contains an edit tab in which you can manipulate all the properties and a preview tab where you can view the changes you've made. In the Edit tab use the add child item button to add some Wijmo:C1TabItems to your C1tab control. Add as many tabs as you would like. In my example I have added three tabs. When you are finished, select "OK" to save the changes that you have made. In the designer view you will be able to select each tab and edit the content within the contents pane on the control. Shown below are my three tabs with themes Cobalt and Midnight themes respectively. The default .aspx code for the Wijmo control is slightly different than its palomino control. Here are some examples of the differences:

This is a good demonstration of how easy it can be to produce or recreate tabs on your new or existing ASP.net Page.

Conclusion

In conclusion I would like to fortify how painless and straightforward migrating to the new ASP.net Wijmo Controls can be. If you would like to learn more and even see a live demo, you can go to our Asp.net Wijmo site at: http://www.componentone.com/SuperProducts/StudioASPNET/ Please feel free to download our free trial and get started today!