Lập trình ASP.NET_Xây dựng giao diện Website potx

7/11/2009

TRƯ NG Đ I H C KHOA H C T NHIÊN
KHOA CÔNG NGH THÔNG TIN
B MÔN CÔNG NGH PH N M M
-----

Xây d ng giao di n Website
Môn học: Lập trình ASP.NET

1

N i dung
2

Web Server Controls và các thành phần thể hiện
giao diện
Sử dụng CSS trong ASP.NET
Skins và Themes
Master Pages
User Controls

1


7/11/2009

Thành ph n th hi n giao di n
3

Properties

Mô tả

BackColor

Thành phần background color

BorderColor

Thành phần boder color

BorderWidth

Độ dày của đường boder

BoderStyle

Loại đường viền border (dotted, dashed, solid, double, etc)

CssClass

Xác định tên của lớp Css được gán cho control

Enabled

Enable, hoặc disable control

Font

Xác định font chữ cho các control

ForeColor

Xác định màu sắc của text hiển thị

Height

Độ cao của control

Style

Các định dạng thể hiện của control

Visible

Xác định control có hiển thị ra giao diện website hay không

Width

Độ rộng của control

Thành ph n th hi n giao di n
4

Các thuộc tính thành phần này có thể được khai
báo thơng qua markup hoặc programmatically
Các thuộc tính thành phần này render trong
browser như các inline CSS styles

2

7/11/2009

Thành ph n th hi n giao di n
5

Inside CSS

CSS và ASP.NET
6

Ngồi cách thay đổi giao diện Website thơng qua các
thuộc tính thành phần của các control, ASP.NET cịn hỗ
trợ cơ chế Cascading Style Sheet (CSS)
Các Web Server Control có thể định nghĩa CSS thơng
qua thuộc tính CssClass

3


7/11/2009

Vì sao s

d ng CSS

7

Ưu điểm:

Là giải pháp tốt trong việc xây dựng layout của các
website
Phân rõ giữa nội dụng Website (HTML) và cách thể hiện
giao diện (CSS)
Dễ dàng thay đổi khi có nhu cầu bảo trì, nâng cấp

Khuyết điểm:
Khó sử dụng hơn so với khi thực hiện định dạng trên các
tag HTML
Gặp một số vấn đề về không tương thích trình duyệt

CSS và ASP.NET
8

Khi xây dựng các ứng dụng ASP.NET, cần lựa chọn
các xây dựng giao diện thể hiện như thế nào cho
website:
Sử dụng các thuộc tính thành phần của các control
(Forecolor, BackColor,…)
Sử dụng external CSS file => hiệu quả

Ví dụ: để xác định thuộc tính Font cho các controls
trong một trang web, thay vì phải khai báo nhiều lần
trên tất cả controls thì ta chỉ cần khai báo một luật duy
nhất trong CSS và áp dụng nó cho tất cả các control.

4


7/11/2009

Themes và skins
9

Themes và Skins là một cơ chế mở rộng trong
ASP.NET dùng với mục đích quản lý tập trung các thể
hiện giao diện của website
Giống như CSS, themes là cơ chế giúp tách biệt giữa
phần nội dung và định dạng thể hiện của website
Themes có thể kết hợp sử dụng cùng với CSS

Themes và skins
10

5


7/11/2009

Themes và skins
11

ASP.NET hỗ trợ xây dựng
nhiều themes trong cùng
một website và mỗi theme là
1 thư mục đặt trong thư muc
App_Themes
Trong mỗi thư mục themes
có thể tiếp tục định nghĩa
nhiều file skins, thực

images, file CSS…

Skin
12

Một skin xác định phần thể hiện giao diện của 1
hay nhiều control
Ví dụ:

Ghi chú rằng trong phần định nghĩa skin khơng đi
kèm với thuộc tính Id
Một skin file có thể chứa nhiều thể hiện giao diện
của nhiều control.

6


7/11/2009

Skin File
13

Skin file định dạng hiển thị các asp.net server
control
Ví dụ:

Định nghĩa style áp dụng đối với mọi Label và TextBox trong trang
web
ForeColor="Blue" Font-Size="10pt“ Font-Name="Verdana" />

BackColor="#FFFFC0" ForeColor="Green“ />

Lưu ý: Skin file ch ch a các đ nh nghĩa style cho control
Và KHƠNG CĨ thu c tính ID

SkinID
14

SkinID dùng thiết lập nhiều định dạng khác nhau
Ví dụ:
Skin File:
BackColor="#FF0000" ForeColor="White"
/>

SkinID="skin1"

Sử dụng trong WebForm
ID="TextBoxUsername"
SkinID="skin1" />

runat="server“

7


7/11/2009

Theme
15

Một theme là một thư mục riêng chứa trong thư
mục App_Themes của website
Một theme được sử dụng cho một webpage thông
qua chỉ thị Page directive

Hoặc thông qua code-behind file

Theme
16

1 Theme có thể xem là 1 giao diện của trang web
Tất cả theme phải đặt trong thư mục App_Themes
Mỗi theme định nghĩa nhiều skin file, css file, hình
ảnh, ...

8


7/11/2009

S d ng Theme
17

Sử dụng Theme trong 1 Web form
<%@ Page ... Theme="Theme1“ ...

Sử dụng Theme trong mọi Web form

Trong file web.config, bổ sung:

<system.web>
…

…
</system.web>

L p trình Thay đ i Theme
18

Gán theme mới cho Page.Theme trong hàm xử lý
sự kiện Page_PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
Page.Theme = “Theme2”;
}

9


7/11/2009

Master pages
19

Cách tạo một master pages tương tự như cách tạo
một Web form
Bao gồm thành phần markup, server controls và
code behind file

Phần mở rộng .master
Có thể bao gồm một hay nhiều ContentPlaceHolder
control

Content-place-holder
20

ContentPageHolder định nghĩa một vùng trong
Master page mà sẽ được thay thế bởi nội dung của
Webpage sử dụng Master page này

10


7/11/2009

Content-place-holder
22

11


7/11/2009

Master page và themes
23

Mục đích chung:
Cung cấp thành phần look and feel chung cho toàn bộ
website.

Master Page: cung cấp các thành phần tĩnh, ít biến
động, các layout chung cho tồn bộ website
Themes: liên quan tới các graphical elements,
matting, layout…

Master Page
24

Master Page cho phép định nghĩa layout template
nhất quán cho toàn bộ WebForm trong site
Content Page là các WebForm kế thừa Master Page
và bổ sung thêm nội dung

Master Page ( .master )

Content Page ( .aspx )

12


7/11/2009

Master Page
25

Master page sẽ định nghĩa các PlaceHolderControl
Content page sẽ chèn nội dung tương ứng vào các
PlaceHolderControl trong master page.

L p trình thay đ i Master Page
26

Gán MasterPage mới cho Page.MasterPageFile
trong hàm xử lý sự kiện Page_PreInit
protected void Page_PreInit(object sender, EventArgs e)
{
Page.MasterPageFile = "~/AnotherMasterPage.master";
}

13


7/11/2009

X lý s ki n phát sinh t Master trong Content Page

Đóng gói control phát sinh sự kiện trong MasterPage
// MasterPage.aspx.cs\
public RadioButtonList MyRadioList {
get {
return RadioButtonList1;
}
}

Bắt sự kiện xử lý trong ContentPage
// ContentPage.aspx.cs
protected void Page_Load(object sender, EventArgs e) {
Master.MyRadioList.SelectedIndexChanged +=
new System.EventHandler(ContentList_Changed);

}
protected void ContentList_Changed(object sender, EventArgs e) {
RadioButtonList myRadioList = (RadioButtonList)sender;
Response.Write(myRadioList.SelectedValue);
}
27

S d ng CSS v i ASP.NET Server Control
28

Cách 1: Thay đổi Properties của các asp.net server
control lúc thiết kế (inline css)

style="display:inline-block;
color:Red;
background-color:#FFFF80;
border-color:Lime;
border-style:Dashed;
font-weight:bold;
font-style:italic;
text-decoration:underline;">
Hello World
</span>

14


7/11/2009

S d ng CSS v i ASP.NET Server Control
29

Cách 2: Thay đổi nội dung thuộc tính Style
(inline css) của đối tượng server control tương
ứng
Ví dụ: Code behind:
LabelMsg.Style[“font-style"] = "italic“ ;
LabelMsg.Style[“text-decoration"] = “underline“ ;
LabelMsg.Style[“color"] = “Red“ ;

style="font-style:italic;
text-decoration:underline;
color:Red;“>
Hello World
</span>

S d ng CSS v i ASP.NET Server Control
30

Cách 3: Thiết lập giá trị thuộc tính CssClass của đối
tượng control (embeded, external css)
Ví dụ: .myStyle

{
font-style: bold;

text-decoration: line-through;
color: green;

}

Code behind:
LabelMsg.Style.Clear( );
LabelMsg.CssClass = “myStyle”;

<span id="Label1" class="myStyle">Hello
World</span>

15


7/11/2009

N i dung
31

Master Page
Sử dụng CSS với ASP.NET Server Control
Skin và Theme
Site Navigation

Site Navigation
32

XML Site Map
SiteMapDataSource
SiteMapPath Control
Menu Control

TreeView Control

16


7/11/2009

C u trúc website
33

XML Site Map
34

Định nghĩa
Web.sitemap

cấu

trúc

website

trong

file

<?xml version="1.0" encoding="utf-8" ?>
xmlns=" /><siteMapNode url=“Home.aspx" title="Home" description="HomePage">
<siteMapNode url=“Product.aspx" title=“Product" >

<siteMapNode url=“Manufactory.aspx" title=“Manufactory" />
<siteMapNode url=“Category.aspx" title=“Category“ >
…
</siteMapNode>
</siteMapNode>
<siteMapNode url=“Search.aspx" title=“Search" />
<siteMapNode url=“Help.aspx" title=“Help" >
…
</siteMapNode>
</siteMapNode>
</siteMap>

17


7/11/2009

S d ng XML Site Map
35

Tạo SiteMapDataSource
<asp:SiteMapDataSource ID="SiteSource" runat="server" />

Web.Sitemap

C u hình SiteMap File
36

Cấu hình thay đổi file sitemap trong Web.Config
<configuration>

<system.web>
enabled="true">

type="System.Web.XmlSiteMapProvider"
siteMapFile="~/Special.Sitemap"/>
type="System.Web.XmlSiteMapProvider"
siteMapFile="~/web.Sitemap"/>
</providers>
</siteMap>
</system.web>
</configuration>

18


7/11/2009

SiteMapPath Control
37

Hiển thị đường dẫn truy cập từ root node (trang
chủ) đến node hiện tại (breadcrumb)
Mỗi node phân cách nhau bởi PathSeperator

Menu Control
38

Hiển thị cấu trúc website dưới dạng Menu

Orientation=“Vertical"
</asp:Menu>
StaticDisplayLevels="2"
StaticSubMenuIndent="0px
"
Orientation="Horizontal"
StaticDisplayLevels="2"
StaticSubMenuIndent="10p
x

19


7/11/2009

TreeView Control
39

Hiển thị cấu trúc website dưới dạng TreeView
DataSourceID="SiteSource”>
</asp:TreeView>

ImageSet=“Arrows" ImageSet=“BulletedList6" ImageSet="WindowsHelp"

20