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 N i dung Web Server Controls thành phần thể giao diện Sử dụng CSS ASP.NET Skins Themes Master Pages User Controls 7/11/2009 Thành ph n th hi n giao di n Properties Mô tả BackColor Thành phần background color BorderColor Thành phần boder color BorderWidth Độ dày đường boder BoderStyle Loại đường viền border (dotted, dashed, solid, double, etc) CssClass Xác định tên lớp Css gán cho control Enabled Enable, disable control Font Xác định font chữ cho control ForeColor Xác định màu sắc text hiển thị Height Độ cao control Style Các định dạng thể control Visible Xác định control có hiển thị giao diện website hay không Width Độ rộng control Thành ph n th hi n giao di n Các thuộc tính thành phần khai báo thông qua markup programmatically Các thuộc tính thành phần render browser inline CSS styles 7/11/2009 Thành ph n th hi n giao di n Inside CSS CSS ASP.NET Ngồi cách thay đổi giao diện Website thơng qua thuộc tính thành phần control, ASP.NET cịn hỗ trợ chế Cascading Style Sheet (CSS) Các Web Server Control định nghĩa CSS thơng qua thuộc tính CssClass 7/11/2009 Vì s d ng CSS Ưu điểm: Là giải pháp tốt việc xây dựng layout website Phân rõ nội dụng Website (HTML) cách thể giao diện (CSS) Dễ dàng thay đổi có nhu cầu bảo trì, nâng cấp Khuyết điểm: Khó sử dụng so với thực định dạng tag HTML Gặp số vấn đề khơng tương thích trình duyệt CSS ASP.NET Khi xây dựng ứng dụng ASP.NET, cần lựa chọn xây dựng giao diện thể cho website: Sử dụng thuộc tính thành phần control (Forecolor, BackColor,…) Sử dụng external CSS file => hiệu Ví dụ: để xác định thuộc tính Font cho controls trang web, thay phải khai báo nhiều lần tất controls ta cần khai báo luật CSS áp dụng cho tất control 7/11/2009 Themes skins Themes Skins chế mở rộng ASP.NET dùng với mục đích quản lý tập trung thể giao diện website Giống CSS, themes chế giúp tách biệt phần nội dung định dạng thể website Themes kết hợp sử dụng với CSS Themes skins 10 7/11/2009 Themes skins 11 ASP.NET hỗ trợ xây dựng nhiều themes website theme thư mục đặt thư muc App_Themes Trong thư mục themes 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ể giao diện hay nhiều control Ví dụ: Ghi phần định nghĩa skin khơng kèm với thuộc tính Id Một skin file chứa nhiều thể giao diện nhiều control 7/11/2009 Skin File 13 Skin file định dạng hiển thị asp.net server control Ví dụ: Định nghĩa style áp dụng Label TextBox trang web Lưu ý: Skin file ch ch a đ 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 Ví dụ: Skin File: SkinID="skin1" Sử dụng WebForm runat="server“ 7/11/2009 Theme 15 Một theme thư mục riêng chứa thư mục App_Themes website Một theme sử dụng cho webpage thông qua thị Page directive Hoặc thông qua code-behind file Theme 16 Theme xem giao diện trang web Tất theme phải đặt thư mục App_Themes Mỗi theme định nghĩa nhiều skin file, css file, hình ảnh, 7/11/2009 S d ng Theme 17 Sử dụng Theme Web form … L p trình Thay đ i Theme 18 Gán theme cho Page.Theme hàm xử lý kiện Page_PreInit protected void Page_PreInit(object sender, EventArgs e) { Page.Theme = “Theme2”; } 7/11/2009 Master pages 19 Cách tạo master pages tương tự cách tạo Web form Bao gồm thành phần markup, server controls code behind file Phần mở rộng master Có thể bao gồm hay nhiều ContentPlaceHolder control Content-place-holder 20 ContentPageHolder định nghĩa vùng Master page mà thay nội dung Webpage sử dụng Master page 10 7/11/2009 Content-place-holder 22 11 7/11/2009 Master page themes 23 Mục đích chung: Cung cấp thành phần look and feel chung cho toàn website Master Page: cung cấp thành phần tĩnh, biến động, layout chung cho toàn website Themes: liên quan tới graphical elements, matting, layout… Master Page 24 Master Page cho phép định nghĩa layout template quán cho toàn WebForm site Content Page WebForm kế thừa Master Page bổ sung thêm nội dung Master Page ( master ) Content Page ( aspx ) 12 7/11/2009 Master Page 25 Master page định nghĩa PlaceHolderControl Content page chèn nội dung tương ứng vào PlaceHolderControl master page L p trình thay đ i Master Page 26 Gán MasterPage cho Page.MasterPageFile hàm xử lý 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 Content Page Đóng gói control phát sinh kiện MasterPage // MasterPage.aspx.cs\ public RadioButtonList MyRadioList { get { return RadioButtonList1; } } Bắt kiện xử lý 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 asp.net server control lúc thiết kế (inline css) Hello World 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) đố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“ ; 18 7/11/2009 SiteMapPath Control 37 Hiển thị đường dẫn truy cập từ root node (trang chủ) đến node (breadcrumb) Mỗi node phân cách PathSeperator Menu Control 38 Hiển thị cấu trúc website dạng Menu Orientation=“Vertical" 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ạng TreeView