/dev/null [tony lombardo]

Anything and everything ASP.NET and more. Expect to see tips and tricks, opinions on new technology, and fun code samples, along with the occasional rant.
Application Styling for NetAdvantage ASP.NET - What's the big deal?

In the Beginning there was Presets

It's a huge deal!  In ASP.NET 1.x, there was virtually no good way to style an entire application so we introduced Presets which provided you with a way to copy the style created on one instance of a control, and apply it to another.  This was a glorified copy & paste method for styling but it worked well, and served its purpose.  There was a still a significant manual process that you had to go through for each new control you added to the form, and for every form you added to the project.  There had to be something better. 

Then There Was Themes 

In ASP.NET 2.0, Microsoft Introduced Themes.  A theme can consist of a skin and/or a stylesheet.  There were initially rumblings of global themes, but this idea got dropped from the RTM of Visual Studio 2005.  While Themes/Skins are a great idea, there were still some problems.  For starters, the design-experience left something to be desired.  The MSDN documentation for creating a skin basically has you style your application then strip out some tags, and paste that content into a separate file.  Not only did this require a manual steps again, but it again was a copy/paste scenario, and required the "designer" to use Visual Studio (or notepad I suppose).  Additionally, it did nothing to help you setup your control in the first place.  It just saved you from some future pain.

And Now For Something Completely Different 

Enter Application Styling.  First introduced for NetAdvantage for Windows Forms in 2006, Application Styling is an entire package solution.  Not only does it provide configuration via the Web.Config file, it also provides an external design tool (AppStylist).  The entire solution was designed to allow developers to quickly style entire applications, and give them the ability to easily switch styles at run-time.  But that's just the tip of the iceberg.  By separating the style information out, you can leverage a completely separate design-time should you have that convenience.  They can style applications that aren't even built yet using AppStylist. 

For you CSS lovers out there.. Application Styling for NetAdvantage for ASP.NET automatically sets your Infragistics WebControls up to use a UI Role inheritance chain of css classes.  For example, you can change the font on every NetAdvantage for ASP.NET control by setting it in a single place the ig_Control css class. 

.ig_Control
{
    font-family: verdana;

Suppose you wanted all Grids to have a specific font-size?  Not a problem. In the ig_grid.css file, set the font-size for the igtbl_Control class

.igtbl_Control
{
    font-size: 8pt;
}

This can be done using AppStylist, or if you're the type that likes to get your hands dirty, you can use your favorite editor to diretly edit the css files.  The classnames are generated automatically by the controls, so you don't need to go into each grid and set the CssClass property.  This is really about as easy as it gets.

Hopefully you're starting to see that this is much bigger than Presets or Themes.  Application Styling sets your Infragistics Controls up using a best practices approach to CSS, making it a breeze to work with.  This also means that you can have just about anyone style your NetAdvantage for ASP.NET application.  If they know CSS they'll be comfortable working directly with the StyleSheets, otherwise AppStylist will wipe away the complexities of css, and give an experience very similar to AppStylist when working with NetAdvantage for Windows Forms.

If you still don't see an advantage, consider this.  In a typical UI Control you will have a number of icons that you want to match your style.  In grid alone, you have RowSelector, SortIndicator, FilterIndicator, FilterOperator, ExpansionIndicator, just to name a few.  In most cases, these are full fledged img elements.  That makes it impossible to style using CSS, which is unfortunate.  We've all tried replacing images with DIV's that have their background-image set, but this is just an ugly hack.  This is where Application Styling can really come to rescue - with Application Styling you can actually set aside a separate set of images for each style.  This is actually the feature that saved me from hours of work yesterday (read about it here).

Still not sure what all the hype is about?  Then you're going to have to 'see it to believe it'.  I guess that means I have to make a video huh?

Posted: 23 Feb 2007, 15:19

Comments

Andre said:

A video would be great :-)

# February 26, 2007 5:01 AM

George Kapsambelis said:

Tony, I'm really looking forward to this feature.  I'm really excited that you guys are on the CSS bandwagon at this level.  One question, will this feature "externalize" the AppStylist CSS into a separate file(s) so that there is not so much auto-generated CSS by the controls in the resulting HTML stream?  Also, are the controls in general moving away from table driven layouts to more CSS friendly rendering?  When AppStylelist for ASP.NET be released?

# February 28, 2007 10:49 AM

Tony Lombardo said:

I'm working on the video as we speak!

George - I'm 100% in favor of CSS based layours.  We've been forced to stick with our current table structures for long enough!  With IE7 now taking a majority role in browser share, and Firefox 2.0 doing a much better job with advanced CSS rules, we finally have all of the pieces in place.  And yes, Application Styling uses completely separate stylesheets, making sharing styles across applications a very real, very easy scenario.

# February 28, 2007 3:05 PM

J. Ambrose Little said:

Today marks the latest release of our comprehensive .NET suite, NetAdvantage for .NET . There's a ton

# March 6, 2007 6:18 PM

Beatrice said:

so where is the video?

# August 28, 2008 7:27 AM

Tony Lombardo said:

@Beatrice - there is a follow up post (http://blogs.infragistics.com/blogs/tony_lombardo/archive/2007/03/06/getting-started-with-application-styling.aspx) which contains the video, and more content on using application styling.

# August 28, 2008 9:17 AM
Leave a Comment

(required) 

(required) 

(optional)

(required) 

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS