Web Engineering-II

Using ASP.net

BY
Adnan Amin
Lecturer / Software Programmer
Information and Communication Technology (ICT Dept)

1 By: Adnan Amin (Lecturer/Software Programmer)

 Overview Part-1
 What’s Theme in ASP.net 2.0?
 Why We Need of Themes.
 Advantages of using Theme?
 App_Theme and Skin file.
 Adding App_Theme folder.
 Adding Skin File.
 Codes for Controls.
 Applying Theme on Web form.
 How to Define Named Skins.

2 By: Adnan Amin (Lecturer/Software Programmer)

 What’s Theme in ASP.net 2.0?
 The Themes feature in ASP.NET 2.0 allows you to
change the appearance of controls in your application
using template files.
 Template files are:
 Skin file with *.skin extension.
 Style sheets file with *.css extension.

3 By: Adnan Amin (Lecturer/Software Programmer)

 Why We Need of Themes.
 CSS is used to create styles for HTML tags (elements).
 CSS cannot apply on ASP.net Controls.
 Using CSS, you are limited to works just with html
elements.
 On the other hand, we have themes that easily apply
formatting styles on ASP.net controls.
 ASP.net applies themes on the server, as opposed to the
client, for CSS.

4 By: Adnan Amin (Lecturer/Software Programmer)

 Advantages of using Theme?
 Easily build a web application with consistent layout and
appearance across all pages.

 Easily change the layout and appearance of all pages just by

modifying a few template files.

 Easily personalize an application at run time for a specific user

by letting the user chose their favorite look from a number of
appearance and layout options.

5 By: Adnan Amin (Lecturer/Software Programmer)

 App_Themes folder.
 Themes consist of a collection of files. It may contain
.skin files, style sheets, and even image files. To organize
and name themes, we use subfolders in App_Themes.

Skin Control
• A control skin specifies the property settings to apply
to a specific type of control.

6 By: Adnan Amin (Lecturer/Software Programmer)

 Adding App_Theme folder
 Right Click on project.
 Goto Add ASP.net
 Click on Theme.

7 By: Adnan Amin (Lecturer/Software Programmer)

 Adding Skin File
 Right Click on App_Theme then Click on Add New Item
 Select Skin File
 Enter any name
 Finally, Click on Add

8 By: Adnan Amin (Lecturer/Software Programmer)

 Codes for Controls
Type the following code in skin file
For Lable:
<asp:Label runat="server" BackColor="#8080FF" ></asp:Label>

For Textbox:
<asp:TextBox runat="server" BackColor="#8080FF" ></asp:TextBox>

For Button:
<asp:Button runat="server" />
NOTE: You should remove the ID and Text properties from the code using
skin file coding area.

9 By: Adnan Amin (Lecturer/Software Programmer)

 Applying Theme on Web form.
 After creating theme skin for particular control then,
 Open Web form in design view and enter theme’s name
into theme property.

 OR
 Type the following directive in source code of the web
form.

<%@ Page Theme=“Theme_name" %>

10 By: Adnan Amin (Lecturer/Software Programmer)
 How to Define Named Skins
 If you want multiple label controls to appear
differently, or create multiple skins for the same
control type.
 Just supply SkinID attribute for each.
 Finally, select skinID for control from properties.

<asp:Button runat="server" BackColor="#8080FF"

/>
11 By: Adnan Amin (Lecturer/Software Programmer)

<asp:Button SkinID=”xyz" runat="server" />

 Applying Themes Globally
 You can also applying theme to not each
individual page, but also can apply theme
globally across entire site.

12 By: Adnan Amin (Lecturer/Software Programmer)

 Applying Themes at Runtime
 You can set the page’s Theme property
at design time.
 But if you want to apply theme at
runtime then follow the following
steps.

13 By: Adnan Amin (Lecturer/Software Programmer)

 Applying Themes at Runtime (Step:1)
 Imports System.IO
 Protected Sub form1_Load(ByVal sender As Object, ByVal e As
System.EventArgs) Handles form1.Load
 If Not Page.IsPostBack Then
 Dim dirThemes As DirectoryInfo = New
DirectoryInfo(Server.MapPath("app_themes"))
 ddlThemes.DataTextField = "Name" 'name of the folder
 ddlThemes.DataSource = dirThemes.GetDirectories()
 ddlThemes.DataBind()
 If Not String.IsNullOrEmpty(Page.Theme) Then
 ddlThemes.SelectedValue = Page.Theme
 End If
 End If
14 By: Adnan Amin (Lecturer/Software Programmer)
 End Sub
 Applying Themes at Runtime (Step:2)
 Protected Sub btnApply_Click(ByVal sender As Object, ByVal e
As System.EventArgs) Handles btnApply.Click
 Session("SetTheme") = ddlThemes.SelectedValue
 Server.Transfer(Request.FilePath)
 ' if page refresh transfer the selected theme to current
page
 End Sub

15 By: Adnan Amin (Lecturer/Software Programmer)

 Applying Themes at Runtime (Step:3)
 Protected Sub Page_PreInit(ByVal sender As Object, ByVal e
As System.EventArgs) Handles Me.PreInit
 If Session("SetTheme") IsNot Nothing Then
 Page.Theme = Session("SetTheme").ToString
 Session("SetTheme") = Nothing
 End If
 End Sub

16 By: Adnan Amin (Lecturer/Software Programmer)

 Thank You!

17 By: Adnan Amin (Lecturer/Software Programmer)