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 ---(cid:1)(cid:2)(cid:3)---

Xây dựng giao diện Website

Môn học: Lập trình ASP.NET

11

Nội dung

2

giao diện

(cid:1) Web Server Controls và các thành phần thể hiện

1

(cid:1) Sử dụng CSS trong ASP.NET (cid:1) Skins và Themes (cid:1) Master Pages (cid:1) User Controls

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)

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

CssClass

Enable, hoặc disable control

Enabled

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

Font

ForeColor

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

Độ cao của control

Height

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

Style

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

báo thông qua markup hoặc programmatically

(cid:1) Các thuộc tính thành phần này có thể được khai

phần này render trong

browser như các inline CSS styles

2

(cid:1) Các thuộc tính thành

7/11/2009

Thành phần thể hiện giao diện

5

Inside CSS

CSS và ASP.NET

6

(cid:1) Ngoà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)

(cid:1) 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

(cid:4) Là giải pháp tốt trong việc xây dựng layout của các

website

(cid:4) Phân rõ giữa nội dụng Website (HTML) và cách thể hiện

giao diện (CSS)

(cid:4) Dễ dàng thay đổi khi có nhu cầu bảo trì, nâng cấp

(cid:1) Ưu điểm:

(cid:4) Khó sử dụng hơn so với khi thực hiện định dạng trên các

tag HTML

(cid:4) Gặp một số vấn đề về không tương thích trình duyệt

(cid:1) Khuyết điểm:

CSS và ASP.NET

8

(Forecolor, BackColor,…)

(cid:4) Sử dụng external CSS file => hiệu quả

(cid:1) 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: (cid:4) Sử dụng các thuộc tính thành phần của các control

4

(cid:1) 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.

7/11/2009

Themes và skins

9

(cid:1) 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

phần nội dung và định dạng thể hiện của website

(cid:1) Giống như CSS, themes là cơ chế giúp tách biệt giữa

(cid:1) 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

skins,

(cid:1) ASP.NET hỗ trợ xây dựng trong cùng nhiều themes một website và mỗi theme là 1 thư mục đặt trong thư muc App_Themes

(cid:1) Trong mỗi thư mục themes có thể tiếp tục định nghĩa nhiều thực file images, file CSS…

Skin

12

hay nhiều control

(cid:1) Một skin xác định phần thể hiện giao diện của 1

(cid:1) Ví dụ:

kèm với thuộc tính Id

(cid:1) Ghi chú rằng trong phần định nghĩa skin không đi

của nhiều control.

6

(cid:1) Một skin file có thể chứa nhiều thể hiện giao diện

7/11/2009

Skin File

13

control (cid:4) Ví dụ: Định nghĩa style áp dụng đối với mọi Label và TextBox trong trang

web

(cid:1) Skin file định dạng hiển thị các asp.net server

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

(cid:4) Ví dụ:

(cid:1) SkinID dùng thiết lập nhiều định dạng khác nhau

/>

ID="TextBoxUsername"

runat="server“

(cid:2) Skin File:

7

(cid:2) Sử dụng trong WebForm

7/11/2009

Theme

15

mục App_Themes của website

(cid:1) Một theme là một thư mục riêng chứa trong thư

qua chỉ thị Page directive

(cid:1) Một theme được sử dụng cho một webpage thông

(cid:1) Hoặc thông qua code-behind file

Theme

16

ảnh, ...

8

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

7/11/2009

Sử dụng Theme

17

(cid:1) Sử dụng Theme trong 1 Web form (cid:4) <%@ Page ... Theme="Theme1“ ...

Trong file web.config, bổ sung:

(cid:1) Sử dụng Theme trong mọi Web form

… …

Lập trình Thay đổi Theme

18

sự kiện Page_PreInit

protected void Page_PreInit(object sender, EventArgs e) {

(cid:1) Gán theme mới cho Page.Theme trong hàm xử lý

Page.Theme = “Theme2”;

}

9

7/11/2009

Master pages

19

một Web form

(cid:1) Cách tạo một master pages tương tự như cách tạo

code behind file

(cid:1) Bao gồm thành phần markup, server controls và

control

(cid:1) Phần mở rộng .master (cid:1) Có thể bao gồm một hay nhiều ContentPlaceHolder

Content-place-holder

20

10

(cid:1) 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

7/11/2009

Content-place-holder

22

11

7/11/2009

Master page và themes

23

(cid:4) Cung cấp thành phần look and feel chung cho toàn bộ

website.

(cid:1) Mục đích chung:

động, các layout chung cho toàn bộ website

(cid:1) Master Page: cung cấp các thành phần tĩnh, ít biến

liên quan tới các graphical elements,

matting, layout…

(cid:1) Themes:

Master Page

24

nhất quán cho toàn bộ WebForm trong site

(cid:1) Master Page cho phép định nghĩa layout template

và bổ sung thêm nội dung

(cid:1) Content Page là các WebForm kế thừa Master Page

Master Page ( .master )

Content Page ( .aspx )

12

7/11/2009

Master Page

25

PlaceHolderControl trong master page.

(cid:1) Master page sẽ định nghĩa các PlaceHolderControl (cid:1) Content page sẽ chèn nội dung tương ứng vào các

Lập trình thay đổi Master Page

26

trong hàm xử lý sự kiện Page_PreInit

protected void Page_PreInit(object sender, EventArgs e) {

(cid:1) Gán MasterPage mới cho Page.MasterPageFile

Page.MasterPageFile = "~/AnotherMasterPage.master";

}

13

7/11/2009

Xử lý sự kiện phát sinh từ Master trong Content Page

(cid:1) Đóng gói control phát sinh sự kiện trong MasterPage

// MasterPage.aspx.cs\ public RadioButtonList MyRadioList {

get {

return RadioButtonList1;

}

}

(cid:1) 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

control lúc thiết kế (inline css)

(cid:1) Cách 1: Thay đổi Properties của các asp.net server

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

14

7/11/2009

Sử dụng CSS với ASP.NET Server Control

29

(cid:1) 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

LabelMsg.Style[“text-decoration"] = “underline“ ;

LabelMsg.Style[“color"] = “Red“ ;

(cid:2) Ví dụ: Code behind: LabelMsg.Style[“font-style"] = "italic“ ;

style="font-style:italic; text-decoration:underline; color:Red;“>

Hello World

Sử dụng CSS với ASP.NET Server Control

30

(cid:1) Cách 3: Thiết lập giá trị thuộc tính CssClass của đối

tượng control (embeded, external css)

font-style: bold;

text-decoration: line-through;

color: green;

}

(cid:2) Ví dụ: .myStyle {

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

Hello World

15

(cid:2) Code behind:

7/11/2009

Nội dung

31

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

Site Navigation

32

16

(cid:1) XML Site Map (cid:1) SiteMapDataSource (cid:1) SiteMapPath Control (cid:1) Menu Control (cid:1) TreeView Control

7/11/2009

Cấu trúc website

33

XML Site Map

34

cấu

trúc website

trong

file

(cid:1) Định

nghĩa Web.sitemap

…

…

17

7/11/2009

Sử dụng XML Site Map

35

(cid:1) Tạo SiteMapDataSource

Web.Sitemap

Cấu hình SiteMap File

36

(cid:1) Cấu hình thay đổi file sitemap trong Web.Config

type="System.Web.XmlSiteMapProvider" siteMapFile="~/Special.Sitemap"/>

type="System.Web.XmlSiteMapProvider" siteMapFile="~/web.Sitemap"/>

18

7/11/2009

SiteMapPath Control

37

chủ) đến node hiện tại (breadcrumb)

(cid:1) Hiển thị đường dẫn truy cập từ root node (trang

(cid:1) Mỗi node phân cách nhau bởi PathSeperator

Menu Control

38

(cid:1) Hiển thị cấu trúc website dưới dạng Menu

Orientation=“Vertical" StaticDisplayLevels="2" StaticSubMenuIndent="0px "

Orientation="Horizontal" StaticDisplayLevels="2" StaticSubMenuIndent="10p x

19

7/11/2009

TreeView Control

39

(cid:1) Hiển thị cấu trúc website dưới dạng TreeView

ImageSet=“BulletedList6"

ImageSet="WindowsHelp"

20