Staying Productive: Using App Themes for Global Control Properties

In my last post, Staying Productive: Code Snippets are Your Friend, I showed how I use Code Snippets in Visual Studio to drastically slash the time it takes to build Asp.Net forms. In this article I’ll show how I use App Themes within web applications to set some global properties for Asp.Net controls.

You may have noticed in the last article that the Code Snippets leave out some properties for certain controls that usually are set. For instance, the validation controls only use the common properties to make the validator work, such as the ID, ControlToValidate and ErrorMessage. Where is the CssClass, Display, or Text properties?

I like to cut as much of the clutter from my forms as possible. I prefer to only show properties that make controls function in my Asp.Net forms. All of the validation control I use always has the same values set for the Display, CssClass and Text. Display is always set to “Dynamic,” CssClass is always set to “validator” and Text is always set to “←” (I think the “*” is boring). Every time I drop a validator on the page I don’t want to re-type those same values every time. I could put them in the Code Snippet, but again, I don’t like to add a bunch of extra stuff in my form.  This is why use App Themes.

Creating App Themes

If you have never used App Themes before, they are quite simple to set up. Right-click on your project in Visual Studio, click Add ASP.NET Folder and then click on Themes. Visual Studio will add an App_Themes folder to the root of your web application and will create a theme called “Theme1”. You could leave it Theme1, but I prefer to change the name. I normally use the name of my project and add “Theme” to the end (so, “MyWebsiteTheme”). It’s a good idea to use this suffix. The name of a theme cannot clash with any of your other classes or page names on your site. That would be bad.

Adding Skin Files

Now that the theme is created, we can add skin files. I like to add a separate skin file for each type of control. For my validators, I add a Validators.skin file to the theme. To do this, right-click on the Theme folder and click Add New Item, then click Skin file. Name it and then click Add.

The skin file will open and you will see a general overview of skins. Basically there are two types of skin definitions: Global and Named.

Global means just that. You define a control in your skin file and every time you use that type of control on an Asp.Net form, whatever properties are set in the skin will be used, even if you have that same property set in the form. Be careful with this. You may find yourself pulling out your hair trying to figure out why a CssClass you set on the page is not showing up. It’s because you have a CssClass set up in the skin file and it’s the boss.

Named Skins allow you to set up multiple versions of the same control. If you want to have a submit button and a delete button look different, you can create named skins–one called SubmitButton and one CancelButton. You can then set the button’s SkinID to the named skin and it will inherit those properties.

For my validators I use a global skin. You’ll notice I put a declaration for all of the validation control types all in the same skin file. This is not required. I just like to keep things tidy. Here’s my Validators.skin:

<asp:ValidationSummary runat="server" CssClass="validationresults" ForeColor=""
HeaderText="<h2>Please correct the following:</h2>" />
<asp:RequiredFieldValidator runat="server" CssClass="validator"
ForeColor="" Display="Dynamic" />
<asp:CustomValidator runat="server" CssClass="validator"
ForeColor="" Display="Dynamic" />
<asp:RegularExpressionValidator runat="server" CssClass="validator"
Display="Dynamic" ForeColor="" />
<asp:CompareValidator runat="server" CssClass="validator"
Display="Dynamic" ForeColor="" />
<asp:RangeValidator runat="server" CssClass="validator"
Display="Dynamic" ForeColor="" />

Along with the validation controls I also have a ValidationSummary defined. I want to use the same CssClass and HeaderText for every ValidationSummary on my site.

Also, since I use CSS to style the validators I set the ForeColor=”” for all the controls. This is not necessary, it just bugs me that this is set by default.

Almost There

The theme is all set up and the skin for the Validators is created, but we have to tell the web application to use the theme. There are a couple ways to do this. You could assign it in the Page directive. This has to be done on every page though, which seems counter-productive to me.

You might think you would be able to do this in the Master Page, but you cannot. Not sure why, you just can’t. If you wanted to do it from the Master Page, you would have to do it in the code-behind in the Page_Init() method. I don’t recommend this method. I find it annoying. The third way is to set it in the web.config file. This is my preferred method and it’s pretty simple.

In the web.config, in the system.web section there is a <pages></pages> section (if not, you can create one). One of the attributes of the pages element is theme. Simply set the theme to the exact name of the theme you want to use.  Now every page in the site will use this theme. Mine looks like:

<pages theme="MyWebsiteTheme"></pages>

To test your theme, create a new web form (or use an existing one in your site), add a form element to the page (or hey, how about using the Code Snippet you set up from the last article). View the page in the browser. You can either use FireBug or Google Developer tools in Chrome or you just view the source if you’re not that progressive, you should see the validator now has a CssClass=”validator”. Pretty slick, eh?

App Themes can be used for much more than just validators. This was just an example. It can be used to create a standard formatted GridView. Have two different looks of GridViews you want to use? Then set them both up and give them SkinID’s. There are numerous possibilities. I would warn you not to use too many though. There is a point where you could be going too far. There is a right balance. You’ll have to find yours.

There is one gotcha though. Not all properties can be set in a skin file. You may very well set up a skin and run your page only to see an ugly Server Error saying the property cannot be set in an App Theme. The nice thing is it will tell you and you’ll just have to remove it.