Migrating Legacy Studio for ASP.NET Controls to New Framework (Codenamed "Palomino")
Applies To:
All ASP.NET Products
Author:
Raleigh Johnson
Published On:
9/15/2009
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.
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.
[Download free trial](http://www.componentone.com/SuperProducts/StudioASPNET/) [Download WebCommand_Starter Sample Application](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2009/9/WebCommand_Starter.zip)
Open the sample application in Microsoft Visual Studio 2008, and complete the following steps:
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.
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:
<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1TreeView"
TagPrefix="cc4" %>
<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1NavPanel"
TagPrefix="cc3" %>
<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1Menu"
TagPrefix="cc2" %>
<%@ Register Assembly="C1.Web.UI.Controls.3" Namespace="C1.Web.UI.Controls.C1TabControl"
TagPrefix="cc1" %>
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:
<cc4:C1TreeView ID="C1TreeView1" runat="server" VisualStyle="Vista"
Height="128px" Width="181px" ExpandAnimation="DropOutToRight" CollapseAnimation="DropInFromRight" ExpandDuration="1000" CollapseDuration="1000" CollapseDelay="50" ExpandDelay="50">
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.
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:
[WebCommand_Completed](//cdn.mescius.io/assets/developer/blogs/legacy/c1/2009/9/WebCommand_Completed.zip)
MESCIUS inc.