Bài giảng Mạng Silverlight - Chương 2: XAML - Extensible Application Markup Language

Nội dung text: Bài giảng Mạng Silverlight - Chương 2: XAML - Extensible Application Markup Language

1. CHƢƠNG II: XAML - Extensible Application Markup Language 1 Tổng quan về XAML 1.1 XAML là gì XAML đƣợc viết tắt bởi cụm từ: Extensible Application Markup Language là một ngôn ngữ dạng khai báo. Bạn có thể tạo ra các phần tử đồ họa(UI) với những khai báo thông qua thẻ trong XAML. Sau đó bạn có thể dùng file mã lệnh tách biệt của nó(code-behind) để trả về những sự kiện và điều khiển những đối tƣợng mà bạn đã định nghĩa trong XAML. Nó là một ngôn ngữ mô tả dựa trên XML là rất trực quan để xây dựng giao diện từ những bƣớc phác thảo cho tới sản xuất sản phẩm, đặc biệt hữu ích cho đối tƣợng có kinh nghiệm thiết kế website và kỹ thuật. 1.2 Khai báo đối tƣợng Có hai cách để khai báo đối tƣợng trong XAML: 1.2.1 Khai bao trực tiếp: Sử dụng thẻ đóng mở để khai báo một đối tƣợng giống nhƣ là một phần tử XML. Bạn cũng có thể sử dụng cú pháp này để khai báo đối tƣợng gốc (root object) hoặc để xét các giá trị các thuộc tính. 1.2.2 Khai báo gián tiếp: Sử dụng giá trị trực tiếp để khai báo một đối tƣợng. Bạn có thể sử dụng cú pháp này để thiết lập giá trị của thuộc tính.Thông thƣờng, điều này có nghĩa là chỉ những thuộc tính mà đƣợc hỗ trợ bởi đối tƣợng mới có thể sử dụng đƣợc phƣơng pháp này. 1.3 Thiết lập đặc tính cho đối tƣợng Có những cách sau để khai báo đặc tính cho đối tƣợng: 1.3.1 Sử dụng cú pháp theo thuộc tính Dƣới đây là ví dụ xét giá trị cho các thuộc tính: Width, Height, Fill của đối tƣợng Rectangle: 1.3.2 Sử dụng cú pháp theo đặc tính của thành phần(element): Dƣới đây là ví dụ xét đặc tính Fill theo cách này cho đối tƣợng Rectangle: 1.3.3 Sử dụng cú pháp theo nội dung Microsoft Vietnam LLC – DPE team | Chương II: XAML 1
2. Dƣới đây là ví dụ xét đặc tính Text cho đối tƣợng TextBlock(Giống nhƣ đối tƣợng Label trong Winform, Webform): Hello! 1.3.4 Sử dụng theo một tập hợp Đây là một trƣờng hợp khá thú vị trong XAML, bởi có những cách khác nhau để thể hiện tập hợp này. Hơn nữa nó có thể xuất hiện ở phần đầu tiên của XAML cho phép bạn xét những đặc tính chỉ đọc (read-only) của đối tƣợng. Dƣới đây là ví dụ xét đặc tính theo những cách khác nhau sử dụng theo kiểu tập hợp. Cách 1: Cách 2: Cách 3: Ngoài ra, có những đặc tính mà chúng có những tập hợp đặc tính nhƣng chúng đƣợc xác định nhƣ là đặc tính nội dung của lớp. Trong trƣờng hợp này ta xét đến đặc tính GradientStops đƣợc xử dụng ở trên. Bạn có thể loại bỏ đặc tính này và sẽ có kết quả nhƣ sau: 1.4 Root elements và namespace trong XAML Một file XAML chỉ đƣợc có duy nhật một Root element và phải thỏa mãn cả hai tiêu chí sau: well-formed XML(có mở và đóng thẻ) và valid XML(tuân thủ theo Document Type Definition(DTD)). Ví dụ dƣới đây cho Root element điển hình của XAML cho Silverlight với Root element là thành phần UserControl. 1.5 Sự kiện XAML là một ngôn ngữ khai báo cho đối tƣợng và những đặc tính của chúng, nhƣng nó cũng bao gồm những cú pháp cho sự kết hợp sự kiện cho đối tƣợng trong những thẻ đánh dấu. Microsoft Vietnam LLC – DPE team | Chương II: XAML 2
3. Bạn chỉ rõ tên của sự kiện nhƣ là một thuộc tính tên trên đối tƣợng mà sự kiện đƣợc nghe. Về giá trị của thuộc tính, bạn chỉ rõ tên của hàm nghe sự kiện mà bạn định nghĩa ở phần code- behind hoặc ở phần javascript. Việc có khai bao hay không đặc tính x:Class ở thẻ root trong XAML có ảnh hƣởng đến việc xử lý sự kiện. Nếu bạn khai báo x:Class tức là việc xử lý sự kiện của bạn sẽ đƣợc thực hiện trong code-behind, trƣờng hợp này thƣờng xuất hiện trong kiểu lập trình Managed API (chứa trong silverlight 2.0). Còn ngƣợc lại thì việc xử lý sự kiện của bạn đƣợc thực hiện ngay trong thẻ Javascript chứa trong HTML, trƣờng hợp này thƣờng xuất hiện trong kiểu lập trình JavaScript API (chứa trong Silverlight 1.0). - Ví dụ dƣới đấy chỉ rõ cho bạn thấy cách tạo một sự kiện trong trƣờng hợp kiểu lập trình Manged API Doạn mã trên, trong thẻ root chúng ta đã khai báo đặc tính x:Class=" Chapter2.Page", điều này có nghĩa trong chƣơng trình của chúng ta có một file chứa class Chapter2.Page. Class này sẽ đảm nhiệm việc xử lý các sự kiện đã khai báo ở file XAML (Page.xaml). Trong thẻ chúng ta tạo thêm một nút và khai báo trong nút đó một sự kiện Click="Button_Click".Sự kiện này sẽ đƣợc xử lý ở trong code-behind nhƣ sau namespace Chapter2 { public partial class Page : UserControl { public Page() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { //Xu ly su kien Button click o day MessageBox.Show("Xin chao!"); } } } - Còn ví dụ dƣới đây sẽ chỉ rõ cho bạn thấy cách tạo một sự kiện trong trƣờng hợp kiểu lập trình JavaScript API Doạn mã trên, trong thẻ root chúng ta không khai báo đặc tính x:Class. Việc xử lý sự kiện sẽ đƣợc thực hiện ngay trong trang HTML có chứa chƣơng trình silverlight này. Microsoft Vietnam LLC – DPE team | Chương II: XAML 3
4. function Button_Click() { alert("Xin chao!"); } 2 Các namescope trong XAML Trong Silverlight, một XAML namescope lƣu trữ quan hệ giữa những tên từ khóa của XAML đã đƣợc định nghĩa của đối tƣợng và những khởi tạo tƣơng đƣơng của nó. Điều này cũng tƣơng tự nhƣ ý nghĩa của “namescope” trong các ngôn ngữ lập trình và công nghệ khác. XAML namescope đƣợc tạo ra trong quá trình dịch mã XAML và trong quá trình tạo hình đối tƣợng. Những tên mà đƣợc tạo trong namescope sau đó đƣợc sử dụng ở code-behind thao tác lúc chạy chƣơng trình để truy cập tới đối tƣợng đƣợc tạo bởi quá trình dịch file XAML. Để biết thêm chi tiết các bạn có thể tham khảo tại địa chỉ: us/library/cc189026(VS.95).aspx 3 Sử dụng XAMLReader.Load Sử dụng JavaScript API cho Silverlight, để tạo đối tƣợng trong lúc thực thi ứng dụng bắt buộc phải sử dụng qua phƣơng thức CreateFromXaml. Sử dụng manged API những class hoặc cấu trúc (structure) cho phép có thêm các thành phần bên trong thực sự đƣợc khởi tạo nếu nó có trong cây thành phần của Silverlight. Trong hầu hết các trƣờng hợp mà bạn muốn khởi tạo đối tƣợng trong lúc thực thi, bạn có thể đơn giản triệu gọi constructor của class liên quan tới nó. Tuy vậy, Bạn vẫn có thể tạo đối tƣợng thông qua đầu vào là XAML thông qua managed API, qua việc sử dụng phƣơng thức XamlReader.Load. Phƣơng thức Load trong managed API là tƣơng ứng với CreateFromXaml trong JavaScript API, cũng giống nhƣ CreateFromXaml, đầu vào cho phƣơng thức Load là những chuỗi và đầu ra là những đối tƣợng mà có thể thêm vào mạng đối dạng cây của Silverlight. XamlReader đơn giản đƣợc thiết kể để đọc xml “XmlReader” có trong Silverlight cũng nhƣ trong các công nghệ khác của Microsoft . XamlReader là lớp đƣợc xây dựng theo kiểu static với những phƣơng thức tạo đối tƣợng; nó tạo đối tƣợng song song với việc xử lý XAML để sinh ra trong lúc thực thi(run-time) những cây đối tƣợng từ XAML trong Silverlight Các bạn cần lƣu ý những điểm sau khi sử dụng phƣơng thức Load: - Nội dung chuỗi XAML phải định nghĩa một phần tử gốc (root element) - Nội dung chuỗi XAML phải là well-formed XML, và valid XML 4 XAML và các Custom class XAML hỗ trợ khả năng có thể định nghĩa tùy chỉnh lớp(custom class) hoặc cấu trúc(structure) trong bất kỳ ngôn ngữ runtime nào (CLR), và sau đó truy cập vào class thông qua thẻ đánh dấu của XAML(XAML markup), bao gồm cách sử dụng hỗn hợp của những thẻ Silverlight đã định nghĩa trong XAML và những thẻ XAML mà tham chiếu tới custom class tƣơng ứng của nó (Mỗi custom class chứa tƣơng ứng 2 file .cs và .xaml, ví dụ: myclass.xaml và myclass.xaml.cs) Microsoft Vietnam LLC – DPE team | Chương II: XAML 4
5. 4.1 Custom class trong ứng dụng hoặc Assemblies Custom class dùng trong XAML có thể định nghĩa theo cách riêng biệt: - Trong code-behind đƣợc đóng gói trong ứng dụng Silverlight - Nhƣ là một class đƣợc định nghĩa trong một assembly tách biệt, nhƣ là một thƣ viện thực thi hoặc DLL Mỗi cách trên đều có những ƣu và nhƣợc điểm nhƣ sau: - Ƣu điểm của việc tạo class và đóng gói riêng biệt là khả năng có thể chia sẻ và dùng đƣợc trong nhiều ứng dụng Silverlight khác. Đồng thời là khả năng quản lý phiên bản của control dễ dàng hơn và nó làm cho nó có khả năng tạo ra class mà bạn dự dịnh sử dụng nhƣ là một root element trong trang XAML. - Ƣu điểm của việc tạo custom class trong ứng dụng là về mặt kỹ thuật tƣơng đối đơn giản và giảm thiểu kích cỡ và kiểm tra khi bạn gặp vấn đề trong dự án Silverlight dựa trên code-behind. Tuy nhiên có điểm hạn chế là bạn không thể dùng custom class nhƣ là một root element. Bạn phải tham chiếu custom class của bạn qua một assembly khác hoặc là giới hạn subclass sử dụng User Control hỗ trợ code-behind trong dự án Silverlight của bạn. - Dù là định nghĩa trong cùng một assembly hay assembly khác nhau, custom class phải đƣợc ánh xạ qua CLR namespace và XML namespace để đƣợc tham chiếu trong XAML 4.2 Ràng buộc để Custom Class trở thành thành phần đối tƣợng trong XAML Để đƣợc tạo đối tƣợng nhƣ là một thành phần đối tƣợng của XAML, custom class của bạn phải đáp ứng các yếu tố sau đây: - Custom class phải để public và hỗ trợ khởi tạo mặc định không có tham số truyền vào (default constructure „parameterless‟). - Custom class không phải là class lồng(class lồng và dấu chấm „.‟ ở cú pháp của nó ảnh hƣởng tới những đặc điểm của Silverlight nhƣ là các property kèm theo. Ngoài ra để đối tƣợng của bạn nhƣ là một thành phần đối tƣợng của XAML, bạn có thể cho phép sử dụng những property cho các public property của Custom class của bạn điều này làm cho Custom class của bạn nhƣ là một kiểu property. Điều này bởi vì bây giờ đối tƣợng có thể đƣợc khởi tạo giống nhƣ một thành phần đối tƣợng và có thể xét thuộc tính cho nó nhƣ là một property 4.3 Yêu cầu đối với sự kiện trong XAML đối với Custom class Để sử dụng cú pháp theo kiểu thuộc tính để tƣơng tác với sự kiện trong XAML, sự kiện phải đƣợc public trong class mà hỗ trợ constructure mặc định, hoặc sự kiện phải đƣợc định nghĩa trong class trừu tƣợng và sau đó sự kiện có thể truy cập đƣợc qua những class kế thừa. 5 XAML và Type Converter 6 Layout Microsoft Vietnam LLC – DPE team | Chương II: XAML 5
6. Khi bạn xây dựng ứng dụng Silverlight, một trong những điều bạn cần làm đầu tiên đó là việc sẽ bố trí giao diện đồ họa của bạn nhƣ thế nào. Silverlight cung cấp cho bạn 3 kiểu bố trí khác nhau, đó là: Canvas, StackPanel và Grid. 6.1 Canvas Định nghĩa một khu vực mà trong đó bạn có thể chỉ ra vị trí của từng đối tƣợng thành phần bằng cách sử dụng các tọa độ tham chiếu. Bạn có thể sử dụng lồng các Canvas với nhau và những thành phần bên trong của Canvas phải là một UIElement. Trong nhiều trƣờng hợp thì Canvas chỉ đóng vai trò nhƣ một đối tƣợng để chứa đựng những đối tƣợng khác và không có một thuộc tính hiển thị nào. Một Canvas sẽ không đƣợc hiển thị nếu nó có một trong những thuộc tính sau đây: - Thuộc tính Height xét giá trị 0 - Thuộc tính Width xét giá trị 0 - Background bằng null hoặc là Nothing ở VS Basic - Opacity xét giá trị 0 - Visibility bằng Visibility.Collapsed - Một trong những Canvas ở mức độ cao hơn (parrent) của nó không đƣợc hiển thị. Ví dụ dƣới đây chỉ ra là hình chữ nhật đƣợc cách trái 30pixel và cách trên 30pixel 6.2 StackPanel Sắp xếp những thành phần bên trong nó thành một dòng và có thể hiển thị theo hai kiểu ngang hoặc là dọc. Giá trị mặc định đƣợc gán chọ thuộc tính Orientation là chiều dọc (Vertical) và giá mặc định đƣợc xét cho hai thuộc tính HorizontalAlignment và VerticalAlignment là Stretch Ví dụ dƣới đây hƣớng dẫn cách tạo những những đối tƣợng trong StackPanel Microsoft Vietnam LLC – DPE team | Chương II: XAML 6
7. 6.3 Grid Định nghĩa dạng lƣới phức tạp bao gồm những dòng và cột. Mặc định Grid chứa một cột và một dòng. Để định nghĩa nhiều cột hoặc dòng chúng ta dùng ColumnDefinitions và RowDefinitions. Mỗi ColumnDefinition và RowDefinition trong ColumnDefinitions và RowDefinitions xác định một dòng hoặc cột. ColumnDefinition và RowDefinition cũng định nghĩa kích thƣớc của mỗi cột và dòng sử dụng đối tƣợng GridLength Ví dụ: Dƣới đây là ví dụ dùng Grid để lên một thiết kế giao diện cơ bản. Thêm vào một vài đối tƣợng qua code-behind C# Microsoft Vietnam LLC – DPE team | Chương II: XAML 7
8. public Page() { InitializeComponent(); LayoutDesign(); } private void LayoutDesign() { //Tạo Stackpanel cho ListBox Control StackPanel DeptStackPanel = new StackPanel(); DeptStackPanel.Margin = new Thickness(10); LayoutRoot.Children.Add(DeptStackPanel); Grid.SetColumn(DeptStackPanel, 1); Grid.SetRow(DeptStackPanel, 1); TextBlock DeptListHeading = new TextBlock(); DeptListHeading.Text = "Department"; ListBox DeptList = new ListBox(); DeptList.Items.Add("Finance"); DeptList.Items.Add("Marketing"); DeptList.Items.Add("Human Resources"); DeptList.Items.Add("Payroll"); DeptStackPanel.Children.Add(DeptListHeading); DeptStackPanel.Children.Add(DeptList); //Tạo StackPanel cho các nút StackPanel ButtonsStackPanel = new StackPanel(); ButtonsStackPanel.Margin = new Thickness(10); ButtonsStackPanel.Orientation = Orientation.Horizontal; ButtonsStackPanel.HorizontalAlignment = HorizontalAlignment.Center; LayoutRoot.Children.Add(ButtonsStackPanel); Grid.SetColumn(ButtonsStackPanel, 0); Grid.SetRow(ButtonsStackPanel, 2); Grid.SetColumnSpan(ButtonsStackPanel, 2); Button BackButton = new Button(); BackButton.Content = "Back"; BackButton.Height = 30; BackButton.Width = 100; Button CancelButton = new Button(); CancelButton.Content = "Cancel"; CancelButton.Height = 30; Microsoft Vietnam LLC – DPE team | Chương II: XAML 8
9. CancelButton.Width = 100; Button NextButton = new Button(); NextButton.Content = "Next"; NextButton.Height = 30; NextButton.Width = 100; ButtonsStackPanel.Children.Add(BackButton); ButtonsStackPanel.Children.Add(CancelButton); ButtonsStackPanel.Children.Add(NextButton); BackButton.Margin = new Thickness(10); CancelButton.Margin = new Thickness(10); NextButton.Margin = new Thickness(10); } } Microsoft Vietnam LLC – DPE team | Chương II: XAML 9