Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login
×

You must be logged to download. Click here to login

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

×

MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

Working with Themes, Skins and Styles

Do you know those applications in which you can choose the graphic layout of the interface?

Working with Themes, Skins and Styles

  

Do you know those applications in which you can choose the graphic layout of the interface? The applications has several skins which may be changed whenever we want, thus at one time the application is yellow another time, blue, depending on the skin that is defined. Do you know that? The Windows itself allows this kind of setup when we trade the colors scheme in the video properties.

 

In addition, what do you think about embedding this functionality in your Web projects? Well, that is what we will see in this article. The ASP.NET 2.0 brought the Themes and Skins that allow creating multiple layout formats, in a very simple and intuitive way.

 

App_Themes Folder

Let us begin creating a new ASP.NET Web Site in Visual Studio 2005. In our example, the project will be called “Demo”. Add a Label to the page, a TextBox and a Button. Let us format these highlighting the color red (Figure 1).

 

rswwtssfig01.jpg 

Figure 1. Formatted form with a red color highlight.

 

Observe that we have made only simple formatting; basically, we have changed the controls’ BackColor, ForeColor and Size properties. So far so good, we have not seen anything new. Let us create a folders structure for us to use the Themes and Skins. As Figure 2 shows, go to the Solution Explorer and right-click over the name of the project.

 

rswwtssfig02.jpg 

Figure 2. Creating an ASP.NET Folder for Theme.

 

Go to the Add ASP.NET Folder option and click the Theme option. See that a special ASP.NET folder was created with the name App_Themes and inside this folder was created another with the name Theme1, which we will replace with “Red”.

As you must be imagining by now, each folder corresponds to a Theme in the project. Thus being, let us create two more folders inside App_Themes, one called Blue and another Green. In the end, the Solution Explorer must be as shows Figure 3.

 

rswwtssfig03.jpg 

Figure 3. Folders created inside App_Themes.

 

Skin files

In this structure, each folder will be a theme. A theme may be composed of many components, necessary to define an interface. The main component of a Theme is the Skin. In ASP.NET 2.0, a Skin is a file where, how the name itself suggests, defines the “skin” of an ASPX page. The best way to understand the Skin is in practice; therefore let us get to it. Right-click over the Red folder and choose the AddNewItem option.

 

As Figure 4 shows, in the ASP.NET we have a template called Skin File. Select it and in Name type “CommonControls.skin”, and next click on Add.

 

rswwtssfig04.jpg 

Figure 4. Creating a new Skin file.

 

See that the Skin file was created and in it, we have only one comment with some instructions about the Skins. Another characteristic that you may observe is that a Skin file is like an ASPX file, however does not have a design mode.

 

However, there is no reason for despair; we will always find a way of making the job easier. First, we can delete the entire content of the Skin file. Next, we will return to the Default.aspx and go to the page Source. Select and copy the entire content of the code of the Default.aspx and paste it in our CommonControls.skin file.

 

And, as the Listing 1 shows, keep in this file only the declarations of the Label, TextBox and Button controls, deleting all the rest of the code. Next, delete the ID and Text properties of each one of the controls. Your file must look exactly like the one demonstrated in Listing 1.

 

Listing 1. Contents of the CommonControls.skin file for the Red theme.

<asp:Label runat="server" Font-Bold="True" Font-Size="X-Large" ForeColor="Red" Text="Label"/>

<asp:TextBox runat="server" BackColor="Red" Font-Bold="True" Font-Size="Medium" ForeColor="White"/>

<asp:Button runat="server" Font-Bold="True" ForeColor="Red" Text="Button" />

 

To complete the first example, we will create two more Skin files, one in the Blue folder and one in the Green. Both must have the same CommonControls.skin name, as well as the same contents. To finalize, in the Skin of the Blue Theme, substitute all the occurrences of the word Red by Blue, as shown in Listing 2.

 

Listing 2. Contents of the CommonControls.skin file for the Blue theme.

<asp:Label runat="server" Font-Bold="True" Font-Size="X-Large" ForeColor="Blue" Text="Label"/>

<asp:TextBox runat="server" BackColor="Blue" Font-Bold="True" Font-Size="Medium" ForeColor="White"/>

<asp:Button runat="server" Font-Bold="Blue" ForeColor="Red" Text="Button" />

 

In Listing 3, in the Green Theme, change the occurrences of the word Red for Green.

 

Listing 3. Contents of the CommonControls.skin file for the Green theme.

<asp:Label runat="server" Font-Bold="True" Font-Size="X-Large" ForeColor="Green" Text="Label"/>

<asp:TextBox runat="server" BackColor=" Green " Font-Bold="True" Font-Size="Medium" ForeColor="White"/>

<asp:Button runat="server" Font-Bold="True" ForeColor="Green" Text="Button" />

 

Applying Themes and Skins in an aspx page

With the folders of Themes and the Skins files created, let us apply them in an ASPX page. Return to the Default.aspx and remove the formatting made in the controls, or delete the existing controls on the pages and include new controls, a Label, a TextBox and a Button.

 

Next, click over an empty area of the Default.aspx page, and go to the properties window. As shows Figure 5, see that we have two properties, one called Theme and another called StyleSheetTheme.

 

rswwtssfig05.jpg 

Figure 5. Applying the Blue Theme in the Default.aspx.

 

Select Red in both, next select Green, and then Blue. See that the formatting defined in the Skin are readily applied in the controls (Figure 6).

 

rswwtssfig06.jpg 

Figure 6. Default.aspx with the Blue Theme applied.

 

SkinID property

As we can observe, the formatting defined in the Skin file of each one of the Themes were automatically applied in the controls, without having to perform any configuration. This happened, because in the definition of the controls that were made in the Skin file, we did not define the SkinID property.

 

Let us open the CommonControls.skin file of the Blue Theme. Select the declaration line of the TextBox, and copy. Just below, paste the copied line, including two more TextBoxes in the file. As Listing 4 shows, in the first line included we will change the BackColor to DarkBlue, and include the SkinId property, which must be matched to DarkBlue as well.

 

Do the same for the other line included, changing the BackColor to LightBlue and including the SkinId property, also defined as LightBlue. Your Skin file must look identical to the one in Listing 4.

 

Listing 4. Defining SkinID.

<asp:Label runat="server" Font-Bold="True" Font-Size="X-Large" ForeColor="Green" Text="Label"/>

<asp:TextBox runat="server" BackColor="Blue" Font-Bold="True" Font-Size="Medium" ForeColor="White"/>

<asp:TextBox runat="server" SkinId="DarkBlue" BackColor="DarkBlue" Font-Bold="True" Font-Size="Medium" ForeColor="White"/>

<asp:TextBox runat="server" SkinId="LightBlue" BackColor="LightBlue" Font-Bold="True" Font-Size="Medium" ForeColor="White"/>                   <asp:Button runat="server" Font-Bold="True" ForeColor="Green" Text="Button" />

 

Return to the Default.aspx page, and see that our control is still defined as Blue. This because we have a TextBox definition without the SkinId property. This is the default formatting. Click on the TextBox control and on the properties’ window; see that we have in the Behavior section, a property called SkinId (Figure 7).

 

rswwtssfig07.jpg 

Figure 7. Defining the SkinId of the TextBox control.

 

Click on it and see that we have two available options: DarkBlue and LightBlue. Choose each one of them and see that with the SkinId we can define a specific Skin for the control (Figure 8).

 

rswwtssfig08.jpg 

Figure 8. TextBox defined with a LightBlue skin.

 

Cascade Style Sheet (CSS)

Another possibility we have with the Themes and Skins is the use of the Cascade Style Sheet files, the famous CSS. We can use them along with the Themes in a very simple way. Do the following: right-click over the Blue file that we have in App_Themes and choose the Add New Item option.

 

See that one of the templates that we have available is the Style Sheet, let us choose this one and name it “Blue.css” and click on Add. Your Blue.css file must look like the one demonstrated in the Listing 5.

 

Listing 5. Blue.css file.

.grid{     

      border-bottom : 1PX SOLID #000000; 

      border-top : 1PX SOLID #000000;   

      BACKGROUND-COLOR: lightblue;      

      padding-left: 5px;     

      padding-right: 2px;

font-family: Verdana, sans-serif;

      font-size: 11px; 

      font-weight: normal;   

      color: #4C4A4B;

}

 

Observe that we have only one class in our CSS file, called grid. In it, we have the necessary formatting for a GridView, where we highlight the light blue color. Create also the corresponding CSS files for the Red and Green folders, as shows Listing 6.

 

Listing 6. CSS files for Green and Red.

Green

.grid{

     border-bottom: 1PX SOLID #000000;

     border-top: 1PX SOLID #000000;

     background-color: lightgreen;

     padding-left: 5px;

     padding-right: 2px;

     font-family: Verdana, sans-serif;

     font-size: 11px;

     font-weight: normal;

     color: #4C4A4B;

}

 

Red

.grid{   

     border-bottom : 1PX SOLID #000000; 

     border-top : 1PX SOLID #000000;     

     BACKGROUND-COLOR: Orange;     

     padding-left: 5px;  

     padding-right: 2px;

     font-family: Verdana, sans-serif;

    font-size: 11px;    

    font-weight: normal;

    color: #4C4A4B;

}

 

Let us return to the Default.aspx page to test the use of the CSS files with the Themes. Include a GridView in the page. In the properties of the control, inform “grid” in the CssClass property, as shows Figure 9.

 

rswwtssfig09.jpg 

Figure 9. Defining CssClass property.

 

See that the GridView was formatted with the properties defined in the CSS of the Blue Theme. Change to Green and see that the color of the GridView is immediately altered (altering the page’s StyleSheetTheme property), as shows Figure 10.

 

rswwtssfig10.jpg 

Figure 10. Example of the use of CSS with Theme.

 

GridView

With the example that we have just performed, we have seen that it is possible to have a CSS file for each Theme. Now, let us perform a more advanced test with Themes and Skins, including the formatting of the GridView in the Skin files. In the Default.aspx page, we will only perform a formatting in the header, changing the BackColor property to Green, and the ForeColor to White (Figure 11).

 

rswwtssfig11.jpg 

Figure 11. GridView HeaderStyle properties.

 

Having done this, let us copy the GridView code to the Skin file of the Green Theme. Removing the ID property, see in Listing 7 the GridView code that must be copied the ControlesComuns.skin file of the Green folder.

 

Listing 7. GridView code.

<asp:GridView runat="server" AutoGenerateColumns="False"

  CssClass="grid">

  <HeaderStyle BackColor="Green" ForeColor="White"

    Font-Bold="True" />

</asp:GridView>

 

Copy this same piece of code to the corresponding files of the Blue and Red Themes, changing the BackColor property to Blue and Red, respectively. Thus, we can check the result simply by changing the page’s Theme and StyleSheetTheme properties (not forgetting to change the GridView BackColor and ForeColor properties to the default value), as shows Figure 12 in the case of the Blue Theme.

 

If you prefer, you may remove the GridView and include a new one in the page. You will see that the formatting are immediately applied.

 

rswwtssfig12.jpg 

Figure 12. Configuring the GridView in the Skin file of the Theme.

 

Conclusion

As you must have observed, this was a very simple and introductory example. As has already been said, a Theme is not composed of only one Skin file. We can define various Skins files in a Theme folder, being able even to create a file per control.

 

To facilitate the creation of the Skins files, we must always create the interfaces in a real ASPX page, and then copy the source code. This makes the work with more complex controls very much easier, as was the case of the GridView.

 

We also saw that if you use CSS files in your projects, you will easily be able to adapt them to the Themes and Skins, you may actually have a CSS file per Theme. In summary, the use of the Themes and Skins is a great way of creating various interfaces in our Web application, and easily apply these interfaces to our pages.



colunista nao disponivel

What did you think of this post?
Services
[Close]
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!


> More info about MrBool Credits
[Close]
You must be logged to download.

Click here to login