CHƯƠNG 2: TỔNG QUAN VỀ LẬP TRÌNH WPF VÀ NGÔN NGỮ ĐÁNH DẤU
2.6 Một số công cụ trong ngôn ngữ đánh dấu XAML
Để soạn thảo XAML, bạn có thể soạn thảo trực tiếp bằng notepad. Tuy nhiên, khi mà những công cụ hỗ trợ XAML đã khá hoàn thiện và cung cấp những tính năng hữu ích thì việc dùng notepad quả là một sự phung phí thời gian quá đáng. Trong số các công cụ hỗ trợ ngôn ngữ XAML thì đáng chú ý nhất là hai sản phẩm của Microsoft:
Expression Blend: Là công cụ thiết kế giao diện cho ứng dụng dựa trên XAML. Với Blend, bạn có thể tận dụng đƣợc tất cả các thế mạnh của XAML: layout, control, template, style, animation, data binding và một số hỗ trợ 3D cơ bản. Trong quá trình xây dựng ứng dụng, Designer sẽ chủ yếu sử dụng Blend để tạo giao diện cho control, style, template và các animation… Trong khi đó Developer cũng sử dụng Blend để thêm các chức năng cho giao diện nhƣng chủ yếu họ vẫn dùng Visual Studio để tiện cho việc lập trình.
Visual Studio 2013: Đây là một công cụ tuyệt vời với rất nhiều tính năng thú vị:
trình soạn thảo trực quan để tạo ra ứng dụng WPF, trình soạn thảo XAML với IntelliSense… Tuy nhiên, nó không có trình soạn thảo trực quan để tạo ra các style, template, animation nhƣ Blend. Blend và Visual Studio có thể cùng làm việc trên một project nên sự kết hợp giữa Designer và Developer sẽ thuận tiện hơn nhiều.
SQL Server 2005: Cho phép quản trị một hệ CSDL lớn (lên đến vài tega byte), có tốc độ xử lý dữ liệu nhanh đáp ứng yêu cầu về thời gian; Cho phép nhiều người cùng khai thác trong một thời điểm đối với một CSDL và toàn bộ quản trị CSDL (lên đến vài chục ngàn user); Có hệ thống phân quyền bảo mật tương thích với hệ thống bảo mật của công nghệ NT (Network Technology), tích hợp với hệ thống bảo mật của Windows NT hoặc sử dụng hệ thống bảo vệ độc lập của SQL Server; Hỗ trợ trong việc triển khai CSDL phân tán và phát triển ứng dụng trên Internet; Cho phép lập trình kết nối với nhiều ngôn ngữ lập trình khác dùng xây dựng các ứng dụng đặc thù (Visual Basic, C, C++, ASP, ASP.NET, XML,…); Sử dụng câu lệnh truy vấn dữ liệu Transaction-SQL (Access là SQL, Oracle là PL/SQL).
MVVM Light: Mục đích chính của bộ công cụ này là giúp tăng tốc việc tạo và phát triển các ứng dụng dựa trên mô hình MVVM trong WPF, Silverlight và Windows Phone 7. Tương tự như những công cụ MVVM khác, công cụ này giúp bạn tách biệt View từ Model tạo ra các ứng dụng rõ ràng và dễ dàng bảo trì và mở rộng sau này hơn. Bộ công cụ này có một điểm nhấn đặc biệt “blendability” của ứng dụng đƣợc tạo ra (chằng hạn
-50-
nhƣ cho phép mở và chỉnh sửa giao diện của ứng dụng trong trong Expression Blend).
Cách tốt nhất để cài đặt MVVM Light trong Visual Studio 2012 và 2013 là sử dụng thƣ viện Tiện ích mở rộng và Cập nhật.
Ngoài 4 công cụ trên, còn có một số công cụ khác hỗ trợ xuất ra định dạng XAML nhƣ Microsoft Expression Design và Adobe Illustrator (bạn phải cài thêm plugin). Bảng sau so sánh các công cụ hỗ trợ XAML để đƣa ra cho bạn cái nhìn tổng quan nhất về các chức năng có trong từng công cụ.
Expression Design
Expression Blend
Visual Studio 2013
Adobe Illustrator
Layout Tĩnh Động Động Tĩnh
Style Không Trực quan Không Không
Template Không Trực quan Không Không
Resources Có lựa chọn
export Trực quan Không Không
Hỗ trợ code Không Đơn giản IntelliSense Không XAML
Round-trip Một chiều Hai chiều Hai chiều Một chiều Xuất ra
XAML Bị hạn chế Có Có
Mất dữ liệu.Một vài hiệu ứng có thể bị mất.
-51- Animation
Không Trực quan Đơn giản Không
Bảng 2 Bảng so sánh công cụ hỗ trợ XAML
XAML Round-trip là khả năng khi thay đổi mã XAML thì giao diện thay đổi và ngƣợc lại – khi thay đổi giao diện thì mã XAML sẽ đƣợc cập nhật. Nhƣ bảng 5.1, ta thấy chỉ có Expression Blend và Visual Studio 2013 hỗ trợ tính năng này theo 2 chiều. Còn 2 công cụ còn lại chỉ hỗ trợ theo một chiều: thay đổi giao diện thì cập nhật đƣợc mã XAML.
Xây dựng ứng dụng mẫu
Nếu bạn bắt đầu cảm thấy mệt mỏi với một đống lý thuyết trên kia? Hoặc bạn là một người coi thực hành là trên hết thì mục này chính là cái bạn cần. Trong mục này tôi sẽ chỉ xây dựng một ứng dụng WPF rất đơn giản chỉ để trình bày sự tuyệt vời của XAML trong việc kết hợp giữa Designer và Developer.
Trước tiên, mở Microsoft Expression Blend, tạo một project mới. Ở đây, tôi đặt tên project này là Designer. Vẽ một hình chữ nhập bằng công cụ Rectangle, tiếp theo dùng công cụ Pencil vẽ cái mặt người cười lên đó. Thực hiện Group chúng lại thành một Canvas, sau đó vào Tool => Make button để tạo chúng thành một control button. Nhƣ vậy là xong công việc của Designer, tùy vào năng khiếu vẽ của bạn mà hình thù cái nút nó sẽ khác nhau nhƣng có lẽ nó sẽ thế này:
Trong Microsoft Expression Blend, để chuyển đổi giữa chế độ thiết kế trực quan và chế độ viết mã bạn hãy dùng phím F11 và F12. Đoạn code tương ứng với cái mặt cười trên kia:
Code 6.1: Mã XAML tương ứng
<Window xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" x:Class="Designer.Window1"
x:Name="Window" Title="Window1" Width="640" Height="480">
<Window.Resources>
<Style x:Key="Button" BasedOn="{x:Null}" TargetType="{x:Type Button}">
-52-
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type Button}">
<Grid>
<Canvas>
<Rectangle Fill="#FFFFFFFF" Stroke="#FF000000" Width="184.5" Height="99"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="41.5"
Height="28" Data="M221,260.5 C229.10603,233.55293 210.6045,233.5 257,233.5 257,243.48414 258.53347,248.74167 261.5,257.5" Canvas.Left="22"
Canvas.Top="22"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="47.5"
Height="26.004" Data="M320,259 C327.95798,245.84724 323.04453,236.90504 344,235 367.66017,232.84908 357.03316,231.65135 366.5,259" Canvas.Left="121"
Canvas.Top="22.496"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="35.5"
Height="1" Data="M273.5,299.5 C285,299.5 296.5,299.5 308,299.5" Canvas.Left="74.5"
Canvas.Top="88"/>
<Path Fill="#FFFFFFFF" Stretch="Fill" Stroke="#FF000000" Width="1"
Height="35.5" Data="M291.5,248.5 C291.5,260 291.5,271.5 291.5,283"
Canvas.Left="92.5" Canvas.Top="37"/>
</Canvas>
<ContentPresenter SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" VerticalAlignment="{TemplateBinding VerticalContentAlignment}" RecognizesAccessKey="True"/>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsFocused" Value="True"/>
<Trigger Property="IsDefaulted" Value="True"/>
-53-
<Trigger Property="IsMouseOver" Value="True"/>
<Trigger Property="IsPressed" Value="True"/>
<Trigger Property="IsEnabled" Value="False"/>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Window.Resources>
<Grid x:Name="LayoutRoot">
<Button Margin="198,162,238,182" Style="{DynamicResource Button}"
Content="Button"/>
</Grid>
</Window>
Bây giờ ta bắt đầu thực hiện công việc của một Developer: mở Visual Studio 2013 lên, mở project Designer ra bạn sẽ thấy cái mặt cười đã có sẵn. Bây giờ Developer có thể thêm bất cứ chức năng gì, để đơn giản ta sẽ thêm sự kiện click chuột vào mặt cười thì sẽ hiện ra một hộp thoại thông báo. Để thêm sự kiện này bạn có thể sử dụng ngay trình soạn thảo XAML hoặc double-click vào hình mặt cười. Sau khi thêm code xong xuôi, ấn F5 và thưởng thức kết quả:
Bạn đừng hiểu lầm rằng hai quá trình tôi mô phỏng này là tuần tự. Thực ra trong thực tế, theo mô hình này, Designer sẽ xây dựng lên một cái khung giao diện ở mức thô sơ. Sau khi xây dựng xong, Developer có thể thực hiện xây dựng các chức năng cho ứng dụng. Trong khi đó Designer sẽ thực hiện làm đẹp giao diện bằng cách thêm các hiệu ứng, vẽ lại giao diện cho đẹp hơn… Nhƣ vậy công việc của Designer và Developer thực tế là đƣợc thực hiện song song!