Lives: 30

HOWTO: Using ComponentArt Themes with your Web.UI AJAX/MVC controls

Posted Fri Feb 19, 2010 @ 11:46 AM

With Web.UI 2010, ComponentArt has introduced the ability to quickly apply a pre-built stylized design to UI controls in the form of Themes.  This allows developers to concentrate on the functional behavior of the control, as design concerns are essentially moved into CSS.  This has the added benefit of cleaning up the control definition code.
 
To use Themes with one of the pre-built styles included with the Web.UI installation package:
1.  Set AutoTheming to true on the control.
ASP.NET AJAX:

<ComponentArt:Menu
AutoTheming="true"
...

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
.AutoTheming(true)
...

The control will now render out CSS classnames on its elements, as well as generate any client templates and/or ItemLooks used by the Theme.
 
2.  Supply the CSS classname definitions.  The Web.UI installation package includes several pre-built themes.  To use one add a link to the "theme.css" file, with the associated image files in the same directory as the stylesheet.

<link href="/themes/arcticwhite/theme.css" type="text/css" rel="stylesheet" />

Inside this stylesheet are all of the expected classes necessary to define the appearance of the control.
 
The resultant Menu with the ArcticWhite theme applied:
ArcticWhite Menu
All Web.UI ASP.NET AJAX/MVC controls on the page with AutoTheming enabled should now be drawn with the Theme applied, without requiring setting any additional properties.  Note that changing the applied Theme is literally as easy as changing the stylesheet link to point to a different "theme.css" file.
 
3.  (Optional) Add Theme-coordinated icons.
a.  Specify an IconCssClass/IconUrl on items.
XML:

<SiteMap>
<item Text="File" >
<item Text="New..." IconCssClass="icon-file-new" />
<item Text="Open..." IconCssClass="icon-file-open" />
...

ASP.NET AJAX:

<ComponentArt:Menu ...>
<Items>
<ComponentArt:MenuItem Text="File">
<ComponentArt:MenuItem Text="New..." IconCssClass="icon-file-new" />
<ComponentArt:MenuItem Text="File" IconCssClass="icon-file-open" />

ASP.NET MVC:

<%= Html.ComponentArt().Menu()
...
.Items( o =>
{
o.Add().Text("File").Items( o2 =>
{
o2.Add().Text("New...").IconCssClass("icon-file-new");
o2.Add().Text("File").IconCssClass("icon-file-open");

The predefined IconCssClass names are enumerated in the "icon-map.png" file inside the /themes/ folder.
 
b.  Add a link to the "icons.css" file, with the associated "icons.png" file in the same directory as the stylesheet.  If there are disabled items, make sure that "icons-disabled.png" is also in the directory.

<link href="/themes/arcticwhite/icons.css" type="text/css" rel="stylesheet" />

The resultant Menu with some icons defined:
ArcticWhite Menu with icons

Posted to Hwan Hong by hwan

Posted on Fri Feb 19, 2010 @ 11:46 AM

Filed under: , ,

Comments

Posted on Fri Feb 19, 2010 @ 11:46 AM

Hej, I am having this scenario, I am loading a controller with Jqury to display in a jquery dialog, the problem I run in to is that the basescritp are then loading twice (tried to specify clien script location on calendar.

So this is what I have

Tasklist -> click on task fire off a jquery dialog and ajax call to controller /gadget/task/{id},

the task controller have templated UI helpers that renders the datepicker for all dates. This works lika charm when I render the page it self. I would like to avoid using I frames so I dont have to download themes and jquery and all the rest again.

Now I get two componentart scripts loaded and ofcourse it will have all the initscripts for your control, is there anyway to prevent the creating of the componentart scripttag on  a page level?

Or how would you do it?

Posted on Fri Feb 19, 2010 @ 11:46 AM

I've posted a couple responses to your questions in the MVC thread: www.componentart.com/.../61026.aspx

Anonymous comments are not allowed. Click here to log in or create an account.

Copyright © 2010 ComponentArt, Inc. All rights reserved.