Wijmo Migration: Accordion

ComponentOne has recently released its latest and greatest in ASP.Net controls, ASP.Net Wijmo. In the spotlight now is ComponentOne's Accordion. If you have used the older control (ASP.Net AJAX) then you will know of some of the cool features that will come packaged. The Wijmo control features:

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.

If you have used the ASP.Net AJAX control and are interested in moving over to the new Wijmo control, this will be a good read. 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 AJAX controls along the way. Prerequisites To get started in this migration you will need our ASP.net Wijmo controls. These can be downloaded here 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 AJAX controls. Below is the link to the quick-start guide where you will receive directions to create a web page with an accordion control and visual aid as to what the final product will look like. Once the control is set up on your 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. C1Accordion Follow this quick-start to create the C1Accordion using our ASP.net AJAX control. Migration details Once you have completed the quick-start guide you can begin migrating 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. C1Accordion Migration ???To add the new ASP.Net Wijmo Control, simply drag the C1Accordion from the C1 Wijmo Controls ToolBox onto the page. This will display an Accordion without any Accordion Panes. You can use the C1Accordion Edit Panes dialog to add items to the panes and edit each of the pane's properties by clicking the "Edit Panes" link. All data binding is performed the same way as with the original ASP.Net control. The accordion panes will populate accordingly based on your data source as seen below:

If you created panes in code and wanted to move those items from your old ASP.Net C1Accordion to your new ASP.Net Wijmo C1Accordion, you could do so by manipulating the code. The accordion markup is very similar. The hierarchical markup is respented in both the Ajax and Wijmo controls as follows:

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 Accordion Designer Form can be used to edit the ASP.net Wijmo Accordion. The properties are very similar, which makes it easier to move over. Some of the changes can be noted below. The Designer also lets you edit the content by simply clicking in the control and adding what you would like. The Accordion can expand in 4 different directions: bottom, top, left, right. Add keyboard accessibility support to give the C1Accordion control focus with a specified key combination. This enables end-users to use the keyboard arrow keys to navigate through the C1AccordionPanes. Make the accordion look pretty using the packaged Wijmo themes. Keep in mind that you could easily change the appearance of your control by setting the theme to one of 30 pre-designed themes. These themes can be easily styled with ThemeRoller and of course you could create your own! This and many other features can be found at the Wijmo Accordion control product 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!