Migrating to Palomino: Navigation Controls

Introduction

Recently, ComponentOne has added several new controls to Studio for ASP.NET's lineup. These new ASP.NET controls, codenamed Palomino, include the C1Gridview, C1ComboBox, C1FormDecorator, C1MultiPage, and more. They have been built from the ground up to take full advantage of the Web's most promising technologies like AJAX, CSS, XHTML, and so on. The Palomino lineup also offers a rich, client-side object model to meet the demands of today's ASP.NET developers.

In the months to come, the Palomino controls will be replacing their older counterparts entirely, as these controls enter Legacy status. This may sound problematic to some, but there is no need to worry as this article will demonstrate how to migrate some of our older ASP.NET components, specifically those from the C1WebCommand assembly, to their newer Palomino counterparts. For those unfamiliar with the C1WebCommand controls, these include the C1WebMenu, C1WebTreeView, C1WebTabStrip, C1WebTopicBar, and the C1WebToolBar; although, the focus will be on just the first four of the C1WebCommand controls mentioned.

Prerequisites

For this tutorial, you will need to download ComponentOne Studio for ASP.NET and the WebCommand_Starter sample application. A free 30-day trial and yearly subscriptions of ComponentOne Studio for ASP.NET are available from the ComponentOne website.

Getting Started

Open the sample application in Microsoft Visual Studio 2008, and complete the following steps:

  1. Drag-and-drop a ScriptManager from Visual Studio's Toolbox to the form. The ScriptManager should be the first control within the tag of your page.
  2. Add the necessary references to the sample by clicking by going to Project | Add Reference and browse to C:\Program Files\ComponentOne\Studio for ASP.NET\bin\. The following assemblies require project references:
    • C1.Web.UI.3.dll
    • C1.Web.UI.3.Controls.3.dll
    • C1.Web.UI.3.Design.dll

*Please note that the assemblies may be located in the following file path: C:\Program Files\ComponentOne Studio.NET 2.0\ bin\. Also note that there are two versions of the Web.UI assemblies; one that targets the .Net Framework 2x and one that targets the .Net Framework 3x.

Directly below the Page directive, add the following Register directives:

You will notice that there is a directive for each of the new controls, while using the C1WebCommand controls required only a single directive. At this point, start the web application; the C1WebTabStrip will render with a separate tab for the C1WebMenu, C1WebTreeView, and the C1WebTopicBar controls.

Now, let's take a look at the controls individually and how to migrate each to its Palomino equivalent, starting with the C1WebTabStrip.

C1WebTabStrip to C1TabControl

The C1TabControl is very similar to the C1WebTabStrip, but is significantly more powerful, allowing developers to host full pages of content within the control. The C1WebTabStrip begins on Line 29 of the Default.aspx file's markup and is denoted by a comment tag. Notice that the C1WebTabStip's markup is clustered and difficult to read; this is because the the styling of the C1WebTabStrip, and the other C1WebCommand controls, is implemented from within the control itself. Now, locate the comment tag, and paste the following markup directly beneath the comment:

This markup will create an instance of the C1TabControl that can be seen below:

If you take a moment to compare the C1TabControl's markup to the C1WebTabStrip's, you should notice that the C1TabControl uses more organized and significantly less markup than its predecessor. At this point, the C1TabControl that you just created should seem very similar to the pre-existing C1WebTabStrip. Before we continue, let's change the C1TabStrip's VisualStyle to Vista, one of the five themes include with ComponentOne's Studio for ASP.NET. This can be done be going to Properties | VisualStyle and selecting Vista from the drop-down. Now let's take a look at some of the advancements that the C1TabControl introduces.

One of the new features that the C1TabControl introduces is the ability to change the orientation of the C1TabControl by changing its Direction property. In this example, we will change the orientation of the C1TabControl to Left, by going to Properties | Direction and selecting Left. Another new feature of the C1TabControl is its ability to host URL's. Let's implement this functionality now; please paste the following markup above the tag:

If you run the application and select the ComponentOne tab, you should see the ComponentOne website hosted by the C1TabControl itself. Another new feature of the C1TabControl, and some other Palomino controls, is the addition of Animation and Transition effects. To see these effects in action, please paste the following into the C1TabControl's beginning markup tag:

Animation="SlideBottom" Duration="1000" Easing="EaseOutExpo"

This small amount of markup will add a one-second long animation and transition effects to the C1TabControl each time its tab changes. Other new features of the C1TabControl include multi-row, scrolling, and validation. Before we move on, run the application; you should see the older version of the C1WebTabStrip, and below it, the more professional looking C1TabControl that should render similar to the following image:

C1WebMenu to C1Menu

The C1Menu control and C1WebMenu control are very similar conceptually, but the C1Menu control allows developers to add stylish and professional looking menus to their pages that surpass the C1WebMenu. The C1WebMenu begins on Line 47 of the Default.aspx file's markup and is denoted by a comment tag. Now, scroll down to the comment tag, and paste the following markup directly below the comment:

Now that we have the C1Menu on the Page, let's look at some of the control's features that distinguish it from the C1WebMenu. The first property to change is the Orientation property. The Orientation property, which has a default value of Horizontal, will determine whether the menu is rendered horizontally or vertically. In this sample, change the Orientation property to Vertical; this can be done through the properties menu, markup, or code. Another new feature that the C1Menu introduces is the ClickToOpen property. The ClickToOpen property, as it suggests, is a Boolean property that determines whether or not the end-user must click on the menu item to view its children; the default value of this property is False and the C1Menu will open when hovering over it items. Change the ClickToOpen property to True so that the C1Menu in this web application behaves similar to the native menus in Window's operating systems. At this point, run the web application; the C1Menu should look similar to the image below:

Now it's time to use the C1Menu control as the context menu of an ASP.NET TextBox. To do this, paste the following markup below the tag:

Now, run the application, locate the newly added TextBox control, and right-click the TextBox; the result should be similar to the following image:

Notice the following pieces of the C1Menu's markup in this instance: ContextMenu="True" and ContextElementID="TextBox1". The ContextMenu property is a Boolean property used to determine if the control should to be used as a context menu. If the ContextMenu property is set to True, the style of the C1Menu will automatically render itself similar to a context menu in Windows Vista. The ContextElementID property indicates the control that the C1Menu will be a context menu for, TextBox1 in this scenario.

Some other features that the C1Menu establishes are menu scrolling; templating; saving and loading the control's layout as XML; the ability to overlay Flash, ActiveX, and Windowed objects; animations and easing; and much more.

C1WebTreeView to C1TreeView

The C1TreeView is very similar to the C1WebTreeView control in the sense that it allows developers to display a hierarchy, but it also brings additional functionality and style. The C1WebTreeView begins on Line 115 of the Default.aspx file's markup and is denoted by a comment tag. Now, scroll down to the comment tag, and paste the following markup directly below the comment:

At this stage, the C1TreeView should render as follows. If you expand or collapse a node, you can see an example of the C1TreeView's several animation and transition effects.

Now it is time to take advantage of the C1TreeView's enhancements, but first, change the AllowEdit, AutoCollapse, and ShowCheckBoxes properties to True. The AllowEdit property is a Boolean property with a default value of False; when set to True, this property will allow end-users to modify the C1TreeView's nodes. When True, the AutoCollapse property will ensure that only one node at that level will be expanded at one time. The ShowCheckBoxes property is a Boolean property, also with a default value of False. When True, the ShowCheckBoxes property will display standard checkboxes, or tri-state checkboxes if specified, next to each need in the C1TreeView. At this point, the C1TreeView should appear on the page similar to the following image:

The C1TreeView also introduces several new features such as node sorting; node drag-and-dropping; templates; the ability to show or hide the node lines; load on demand; and many more.

C1WebTopicBar to C1NavPanel

Of all the controls discussed thus far, the C1NavPanel and the C1WebTopicBar are the least similar of the group. The C1NavPanel offers similar functionality to the C1WebTopicBar, but with a significantly different visual structure that closer resembles the navigation menu in Microsoft Outlook. The C1NavPanel is also easier to develop with for the sole fact that it only has one type of direct item compared to the C1WebTopicBar's seven. The C1WebTopicBar's functionality can also be replicated, and extended upon, with other ComponentOne controls like the C1Expander and the C1Accordion. The C1WebTopicBar begins on Line 187 of the Default.aspx file's markup and is denoted by a comment tag. Now, scroll down to the comment tag, and paste the following markup directly below the comment:

Group1 (Simple Text)

` 

                                This is just arbitrary text!  
























                                Welcome to ComponentOne  






    `

You should notice that the each pane of the C1NavPanel consists of two portions, the header and the footer, that can contain any object. You should also notice that the markup is appreciably cleaner and less cluttered. Rebuild and run the web application to see the C1NavPanel in action. When exploring the C1NavPanel at this point, the control demonstrates some of its several animation options as well as an additional pane that host the ComponentOne website. The C1NavPanel also allows end-users to resize the panes vertically by using the sizer just below the open pane. The C1NavPanel should resemble the following image:

Conclusion

Now that you have seen a simplified example, you can now confidently transform your web applications using ComponentOne's ASP.NET controls. For the most styled, supercharged, and easy-to-use controls built on Web standards including AJAX, CSS, and XHTML, continue to use ComponentOne Studio for ASP.NET in your sites.

You can download the completed sample application by clicking the link below:

MESCIUS inc.

comments powered by Disqus