Community Server 2007 Themes - Part 3

The first thing you encounter when you load the default community server site is the home page.  This is mainly controlled by the "main" master page with a couple small changes in the "home" master page.  I want to pick apart one portion of the header in the "main" master page and make a small change to it in my process of learning about themes in CS 2007.

Master.Master

The header and footer have all kinds of content specified that will show based on various configuration values and conditions.These serve as a great introduction to the new capabilities in CS 2007. Look at the CommonTitleBarSearchArea <td> in the header. This section is a great introduction to the new controls implemented in CS 2007.First we have a user control:

<div class="CommonUserArea">
    <div id="welcome">
       <CSUserControl:UserWelcome runat="server" />
    </div>
</div>

Nothing special is going on here.Continuing in the code, we have the beginning of the search form control.The properties of the control are mapped to the other controls on the page.

<div class="CommonSearch">
    <CSControl:SearchForm runat="server"
       QueryFilterDropDownListId="TitleBarSearchDropDownList"
       QueryTextBoxId="TitleBarSearchText" 

       SubmitButtonId="TitleBarSearchButton"> 

The SearchForm is not limited to a static layout - the FormTemplate portion begins by laying out a table:

<FormTemplate>
    <table cellpadding="0" cellspacing="0" border="0" align="right">
       <tr valign="middle"> 

And then it continues by defining two controls in the first <td>.Those controls are the text box for the search, and an ASP drop down list.The things to note here are the following:     The ids match the declaration in the SearchForm control.  There is a PlaceHolder control wrapping the drop-down list.  Its purpose is to control the visibility of the drop-down. The ResourceControl control is going to pull the text that it displays from the specified resource name in the current resource culture.The TitleBar_SearchIn element in resources.xml for the current culture provides the values for the drop-down list. I am not sure how exactly the resource values are tied to the drop-down list.

<td nowrap="nowrap">
    <CSControl:DefaultButtonTextBox ID="TitleBarSearchText" runat="server" 

        Columns="15" MaxLength="64" ButtonId="TitleBarSearchButton" />
       <CSControl:PlaceHolder runat="server">
          <DisplayConditions>
             <CSControl:ControlVisibilityCondition 

                 ControlId="TitleBarSearchDropDownList"
                 ControlVisiblilityEquals="true" runat="server" />
          </DisplayConditions>
          <ContentTemplate>
             <CSControl:ResourceControl runat="server" 

                 ResourceName="TitleBar_SearchIn" />
             <asp:DropDownList runat="server" ID="TitleBarSearchDropDownList" />
          </ContentTemplate>       
    </CSControl:PlaceHolder>
</td> 

The next table cell is a little simpler it only has the search button in it.Again, note the matching id, and that the link button is using the culture to provide internationalization of the Search text through the resources file.

<td>
    <span class="CommonSearchButtonOuter">
       <CSControl:ResourceLinkButton ID="TitleBarSearchButton" runat="server"
         CssClass="CommonSearchButton" ResourceName="Search" />
    </span>
</td>

In these few lines of code there have been a number of new things that have a great deal of power behind them. Some of them are:

1. The ability to control visibility through DisplayConditions,
2. The ability to provide your own templates for standard controls like the template for the search in the SearchForm.
3. And the ability to declare controls that pull the text presented to the user from the Resources file which will provide for an internationalized interface.

Making a Change to the Search Box

If you wanted to display the search box only for registered users when they are logged in, you could do something like what I would do in ASP.NET - add some code that executes on databinding for the Visible property of the control.  It would need to get an instance of the user object and check its roles attribute. But CS provides a better way - we alreadly looked at it - the <DisplayConditions> element of a CSControl.  Adding this snippet of code:

<DisplayConditions>
    <CSControl:UserInRoleCondition Role="Registered Users"
      UseAccessingUser="true" runat="server" />
</DisplayConditions>

will make it so the search is only available to member. This is so easy.

Moving Forward

This is the end of my initial investigation into CS 2007 themes.  I am planning on continuing this work by creating a theme (even though I am no designer) and moving away from Blogger to a new site running CS with that theme.