XAML là gì?
- XAML (viết tắt của cụm từ Extensible Application Markup Language, phát âm là "zammel") là một ngôn ngữ đánh dấu được sử dụng để tạo ra các đối tượng trong .NET.
- Ta 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 đó ta 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à ta đã định nghĩa trong XAML.
- Mặc dù XAML là một công nghệ có thể ứng dụng trong nhiều lĩnh vực khác nhau nhưng vai trò chính của nó là để xây dựng giao diện trong các ứng dụng WPF. Nói cách khác, XAML định nghĩa sự sắp xếp các Panel, Button, Label,… để tạo nên một window trong các ứng dụng WPF. Giống như HTML, có khá nhiều công cụ hỗ trợ việc viết XAML một cách trực quan.Để xây dựng các ứng dụng có yêu cầu cao về giao diện thì phương pháp hiệu quả nhất là tách riêng phần thiết kế giao diện và phần viết code cho ứng dụng. Với phương pháp này, Designer và Developer có thể làm việc song song và khi hoàn thành sẽ tích hợp lại với nhau.
- Trước khi WPF xuất hiện thì việc tách biệt giao diện ra khỏi code là vô cùng khó khăn. Điều này rất dễ hiểu vì với Windows Form, mọi thứ bạn tạo ra đều được định nghĩa trong code C#, VB.NET,… trong khi Designer lại thường không có kiến thức về các ngôn ngữ lập trình phức tạp này. Rất may, mọi thứ đã thay đổi khi WPF xuất hiện. Với WPF, Designer và Developer có thể làm việc hoàn toàn độc lập. Chìa khóa cho sự cộng tác giữa Designer và Developer trong các ứng dụng WPF chính là XAML.
Tại sao lại sử dụng XAML – một dạng ngôn ngữ đánh dấu?
- Trước XAML đã có một số ngôn ngữ đánh dấu dùng để thể hiện giao diện như: HTML, XUL, SVG, WordML,… Những ngôn ngữ này đặc biệt là HTML thể hiện việc dùng ngôn ngữ đánh dấu để xây dựng giao diện là rất hợp lý. XML có cái tên khá giống XAML nhưng lại là một ngôn ngữ đánh dấu để thể hiện dữ liệu có cấu trúc.Điểm cốt yếu cho thành công của các ngôn ngữ đánh dấu là máy tính có thể đọc được và cũng rất dễ hiểu với con người. Các ngôn ngữ đánh dấu dễ học hơn ngôn ngữ hướng đối tượng hay hướng thủ tục rất nhiều. Ngoài ra, các công cụ soạn thảo trực quan cho các ngôn ngữ đánh dấu rất quen thuộc với các Designer.XAML cũng là một ngôn ngữ đánh dấu nên nó thừa hưởng tất cả những điểm mạnh trên.
- Ngoài ra,thêm một điều đáng chú ý là mọi thứ có thể biểu diễn bằng XAML thì cũng có thể biểu diễn bằng code C#. Ví dụ: <Button Background="Red">No</Button>
Mỗi phần tử XAML lại tương ứng với một lớp WPF, và mỗi thuộc tính của phần tử đó lại tương ứng với thuộc tính hay sự kiện của lớp này. Chẳng hạn, nút bấm màu đỏ trong ví dụ trên có thể tạo bằng C# code như sau: var btn = new Button(); btn.Background = Brushes.Red; btn.Content = "No"; Vậy câu hỏi đặt ra là XAML có ý nghĩa gì ? Câu trả lời là việc xây dựng các công cụ sinh và sử dụng các đặc tả bằng XAML dễ dàng hơn nhiều so với xây dựng một công cụ tương tự làm việc với đoạn mã. Điều đó giải thích vì sao có sự ra đời của bộ công cụ Microsoft Expression Studio, bộ công cụ hỗ trợ trong việc thiết kế giao diện xây dựng trên nền tảng XAML. Expression Studio kết hợp cùng với Microsoft Visual Studio hỗ trợ phần code-behind của XAML để xử lý sự kiện cho các đối tượng UI mang đến sự hợp tác chặt chẽ cho Designer và Developer.
Sự khác biệt của XAML so với các ngôn ngữ đánh dấu khác?
XAML không những kế thừa những điểm mạnh của ngôn ngữ đánh dấu mà nó còn có các tính năng mới nổi bật so với các ngôn ngữ đánh dấu cũ được thể hiện ở:-
Khả năng thể hiện giao diện
Sự thể hiện giao diện của XAML là rất tốt. XAML có thể thể hiện các control cơ bản như Button, Label, Textbox,… trong các khung như Panel, Grid,… Bảng 1.1 cho thấy sự khác nhau giữa HTML và XAML khi thể hiện một Button và một Label.
| <html xmlns="http://www.w3.org/1999/xhtml"> <body> <input type="button" value="Click Me" /> </body> </html> |  |
| <Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"> <Button Width="100" Height="50" Content="Click Me" /> </Page> |  |
| Bảng 1.1: XAML và HTML thể hiện các Control cơ bản. | |
Không chỉ thể hiện được các Control cơ bản, XAML còn thể hiện được các nét vẽ phức tạp hơn mà bảng 1.2 thể hiện. Nhìn vào bảng 1.2, ta thấy XAML khá giống với các ngôn ngữ thể hiện ảnh vector khác. Điều này rất hữu ích cho việc convert từ các định dạng cũ sang định dạng XAML, việc tái sử dụng sẽ trở nên tốt hơn rất nhiều.
| <rect x="1" y="1" width="398" height="398" fill="none" /> <path d="M 100 100 L 200 100 L 200 300 z" fill="#A3A993" stroke="A8806C" stroke-width="3" /> |  |
| <Canvas xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" Width="398" Height="398"> <Path Data="M100, 100L200,100 200, 300z" Fill="#A3A993" Stroke="#A8806C" StrokeThickness="3" /> </Canvas> |  |
| Bảng 1.2: XAML và SVG thể hiện các nét vẽ vector | |
Đặc biệt, XAML còn có thể thể hiện được các cảnh 3D nhờ sự hỗ trợ của các góc nhìn khác nhau, phương chiếu sáng, mắt lưới và ma trận chuyển đổi.
-
Tình toàn diện:
Khả năng thể hiện giao diện của XAML là rất tuyệt vời, tuy nhiên điểm đáng chú ý nhất của XAML lại không phải nằm ở đó mà nằm ở khả năng hỗ trợ: style, trigger, template, data binding và animation. Chính những khả năng này mới giúp Developer và Designer làm việc song song với nhau một cách hiệu quả nhất trong cùng một ứng dụng.- Style: Kỹ thuật sử dụng style trong phát triển web từ trước tới nay chính là để tách việc thiết kế giao diện của các Web-Designer ra khỏi việc lập trình chức năng của các Web-Developer. Phát triển ứng dụng WPF cũng như vậy, Designer thiết kế style rồi tích hợp vào ứng dụng do Developer phát triển. Quá trình tích hợp rất dễ thực hiện do sự thống nhất của XAML.
- Template: Trong WPF, có hai loại template:
- Control template: Designer thiết kế giao diện trực quan của các control mà không làm thay đổi các behavior do Developer định nghĩa.
- Data template: Designer sẽ định nghĩa cách thể hiện cho một loại data nào đó. Ví dụ như một số nguyên trong một Textbox sẽ có màu đen, cỡ chữ 12 và canh giữa.
- Data binding: Vì trong XAML có hỗ trợ data binding nên Designer có thể thực hiện các thao tác binding cơ bản giữa giao diện và dữ liệu nhận được từ Developer.
- Animation: Hệ thống animation của WPF khá đầy đủ và có thể gọi từ các trigger trong XAML. Điều này giúp Designer có thể tạo ra các hiệu ứng cho Control ví dụ như khi người dùng di chuyển chuột lên một Button thì Button đó sẽ phát sáng.
Vai trò của XAML trong quá trình cộng tác giữa Designer và Developer
XAML đã đập tan bức tường ngăn cách giữa Designer và Developer. Một ứng dụng có sự kết hợp giữa Designer và Developer đều có bước tích hợp kết quả làm việc của đôi bên. Để thấy được vai trò của XAML ta hãy cùng nhau phân tích quá trình tích hợp này trong ứng dụng WPF và ứng dụng cũ trước đây:
Ta có thể thấy với ứng dụng theo lối truyền thống cũ thì công việc của cả Developer lẫn Designer đều rất nặng, yêu cầu cả 2 bên phải có hiểu biết về nhiều công cụ. Hai bên làm việc lại không có một sự thống nhất chung, chính vì vậy khi tích hợp sẽ rất khó khăn, mất thời gian và có thể phải làm lại. Còn trong quá trình phát triển ứng dụng WPF, công việc của Designer và Developer đều được giảm nhẹ. Ngoài ra, giữa Developer và Designer còn chia sẻ với nhau đoạn mã XAML chung, chính vì vậy trong suốt quá trình xây dựng phần mềm, cả hai bên luôn có sự thống nhất cần thiết.
.jpg)