Scribd
Upload
65 views17 pages

Web Engineering-II: Adnan Amin

This document discusses themes in ASP.net, including what they are, why they are useful, and how to implement them. Themes allow changing the appearance of controls using template files like skin and CSS files. They provide advantages like consistent layout across pages and the ability to easily change appearance. The document covers adding theme folders, skin files, applying themes to pages or globally, and setting themes at runtime by letting the user select a theme.

Uploaded by

Adnan Amin
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
65 views17 pages

Web Engineering-II: Adnan Amin

This document discusses themes in ASP.net, including what they are, why they are useful, and how to implement them. Themes allow changing the appearance of controls using template files like skin and CSS files. They provide advantages like consistent layout across pages and the ability to easily change appearance. The document covers adding theme folders, skin files, applying themes to pages or globally, and setting themes at runtime by letting the user select a theme.

Uploaded by

Adnan Amin
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 17

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)

You might also like