lesson_09 theme

8/7/2019 Lesson_09 Theme

1/17

BY

Adnan AminLecturer / Software Programmer

Information and Communication Technology (ICT Dept)

By: Adnan Amin (Lecturer/Software Programmer)1

Web Engineering-IIUsing ASP.net


2/17

Overview Part-1


Whats 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.


3/17

Whats 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.


4/17

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 applyformatting styles on ASP.net controls.

ASP.net applies themes on the server, as opposed to the

client, for CSS.


5/17

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 ofappearance and layout options.


6/17

App_Themes folder.


Themes consist of a collection of files. It may contain

.skin files, style sheets, and even image files. To organizeand 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.


7/17

Adding App_Theme folder


Right Click on project.

Goto Add ASP.net Click on Theme.


8/17

Adding Skin File


Right Click on App_Theme then Click on Add New Item

Select Skin File Enter any name

Finally, Click on Add


9/17

Codes for Controls


Type the following code in skin file

For Lable:

For Textbox:

For Button:

NOTE: You should remove the ID and Text properties from the code usingskin file coding area.


10/17

Applying Theme on Web form.


After creating theme skin for particular control then,

Open Web form in design view and enter themes nameinto theme property.

OR

Type the following directive in source code of the webform.


11/17

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.


12/17

Applying Themes Globally


You can also applying theme to not each

individual page, but also can apply themeglobally across entire site.


13/17

Applying Themes at Runtime


You can set the pages Theme property

at design time.

But if you want to apply theme at

runtime then follow the followingsteps.


14/17

Applying Themes at Runtime (Step:1)

By: Adnan Amin (Lecturer/Software Programmer)14n u

Imports System.IO

Protected Sub form1_Load(ByVal sender As Object, ByVal e AsSystem.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

End Sub


15/17



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 currentpage

End Sub


16/17



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


17/17

Thank You!


lesson_09 theme

Documents