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:
- Improved Performance: Fully extensible client-side and server-side object models with faster load times.
- Latest Standards Support: CSS3 and HTML5 compliance.
- Major Browser Support: Internet Explorer, Firefox, Chrome and Safari.
- Themes: Built-in premium CSS3 themes and all Controls are compatible with jQuery UI Themeroller.
- 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.
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.
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.
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.
?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
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.
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!