Silverlight 2 Tutorial – Xây dựng phiên bản chạy trên desktop với WPF


Đây là phần 8 trong loạt 8 bài hướng dẫn các bước để xây dựng một chương trình Digg đơn giản dùng bản Beta 1 của Silverlight 2. Các bài hướng dẫn này nên được đọc theo thứ tự, và sẽ giúp giải thích một số khái niệm cơ bản trong Silverrlight.
Bạn có thể download mã nguồn phiên bản hoàn chỉnh của chương trình mẫu Digg tại đây. Mã nguồn phiên bản WPF có thể tải tại đây.
Xây dựng phiên bản chạy trên desktop với WPF
Mục đích của chúng ta trong bài cuối cùng này hơi khác bảy bài trước một chút. Chúng ta sẽ không định chạy các lệnh Silverlight trong bài này, thay vì đó chúng ta sẽ dùng WPF và .NET 3.5. Chúng ta sẽ làm cho chương trình Digg – vốn được xây dựng để chạy trên trình duyệt, có thế chạy trên desktop như một ứng dụng Windows bình thường.
Silverlight mang đến một tập hàm API là tập con của bộ đầy đủ trong .NET Framework. Mục đích là để các nhà phát triển có thể tận dụng lại các kiến thức và kỹ năng đã học, và dùng lại mã lệnh và nội dung xuyên suốt các loại ứng dụng khác nhau: các ứng dụng web RIA, các chương trình Windows và các giải pháp Office.
Dưới đây là các bước tôi dùng để dùng lại các lệnh trong chương trình Digg viết bằng Silverlight để xây dựng nên phiên bản chạy trên desktop (chạy bên ngoài trình duyệt như một ứng dụng Windows).

Bước 1: Tạo ứng dụng WPF
Chúng ta sẽ bắt đầu tạo một chương trình WPF (WPF Desktop Application) trong VS 2008. Ta sẽ đặt tên nó là “DiggDesktopSample”:

Dự án mới sẽ được tạo với 2 file: App.xaml và Window.xaml:

Bạn sẽ thấy rằng cấu trúc project này tương tự như project mà chúng ta đã tạo với Silverlight (bao gồm file App.xaml và Page.xaml):

Bước 2: Copy mã lệnh từ chương trình Digg vào ứng dụng WPF
Chúng ta sẽ sao chép/dán từ chương trình Silverlight có sẵn vào chương trình DiggDesktopSample mới:

Hiện tại với phiên bản Bate1, các bước sao chép/dán này đều phải làm bằng tay, nhưng trong tương lai, chúng tôi sẽ thêm vào chức năng chỉnh sửa tự động khi bạn sao chép giữa các loại chương trình khác nhau.

Bước 3: Khắc phục một số vấn đề
Tôi đã phải sửa lại hai chỗ để làm cho chương trình Digg có thể biên dịch được:
1) Schema của Silverlight Beta1 XAML (xmlns:) khác mới WPF. Tôi cần sửa lại các file XAML được sao chép vào để nó chỉ đển schema của WPF. Đây là thứ mà chúng tôi muốn cập nhật trước khi đưa ra phiên bản tiếp theo.
2) Tôi phải thay đổi <WaterMarkTextBox> thành <TextBox> và <HyperlinkButton> thành <TextBlock>. Đó là hai control mới có trong Silverlight Beta1 và hiện không có trong phiên bản WPF (chúng tôi sẽ thêm vào sau này). Tôi không phải thay đổi bất cứ đoạn lệnh nào để làm việc với chúng, bao gồm cả các lệnh về mạng, LINQ to XML, hoặc các lệnh gắn nối dữ liệu.
Sau khi sửa lại, chương trình đã có thể biên dịch .
Bước 4: Chạy chương trình Digg trên một cửa sổ desktop
Tôi tiếp tục mở file Window1.xaml (đây là cửa sổ mặc nhiên được mở khi chạy chương trình) trong project và cập nhật lại tiêu đề thành “Digg Desktop Version” và tăng chiều rộng và ngang của cửa sổ.
Sau đó tôi thêm vào đối tượng Page.xaml từ chương trình Digg cũ và đặt nó như đối tượng gốc trên Window, điều này sẽ làm nó được nạp và hiển thị mỗi khi Window được hiển thị. Tôi không cần phải thay đổi bất kỳ thứ gì bên trong mã lệnh của Page.xaml, vì nó thừa kế từ UserControl nên nó có thể được chứa bên trong bất kỳ Window hay Control nào của WPF.

Việc cuối cùng cần làm là sửa lại một trục trặc với Digg REST API, đó là vì Digg server có xác định xem có phải một server hay một chương trình (không chạy trên trình duyệt) đang truy cập nó hay không và đưa ra thông báo cấm truy cập (access denied) – có lẽ là để tránh bị các script tự động tấn công vào dịch vụ của họ. Tôi khắc phục bằng cách cho kết nối thông qua một proxy URL.
Bước 5: Chạy chương trình
Giờ chúng ta có thể chạy chương trình Digg Desktop Application. Tất cả các chức năng sẽ làm việc giống như phiên bản Silverlight:

Và khi một kết quả được chọn từ danh sách, thông tin chi tiết sẽ được hiển thị:

Có một vài điểm khác biệt về hình thức giữa phiên bản trình duyệt và phiên bản desktop. Nguyên nhân chính là vì WPF thừa kế lại giá trị mặc nhiên của các cài đặt hiển thị (font, màu sắc, thanh cuộn…) của hệ điều hành, trong khi Silverlight lại dùng một cài đặt hiển thị chung cho các hệ điều hành khác nhau. Nếu muốn hai phiên bản hiển thị hoàn toàn giống nhau, chúng ta cũng có thể làm được bằng cách chỉ ra giá trị cụ thể cho Style và Control Template.

Tổng kết

Chúng ta đã nắm được các thông tin cũng như kinh nghiệm để dùng lại mã lệnh giữa các ứng dụng Silverlight và WPF. Tôi nghĩ bạn sẽ thấy các kỹ năng và kiến thức bạn học khi xây dựng các ứng dụng Silverlight sẽ giúp ích rất nhiều khi chuyển sang các ứng dụng WPF.

Scott
Giới thiệu thêm về Scott Gu: Scott Gu hiện là phó chủ tịch tập đoàn của Microsoft phụ trách bộ phận phát triển .NET. Anh là một trong những người xây dựng nên dự án .NET, và đóng một vai trò quan trọng trong việc thiết kế và phát triển .NET.
Hiện tại, anh là người quản lý trực tiếp các nhóm phát triển CLR, ASP.NET, Silverlight, WPF, IIS, Commerce Server và các công cụ Visual Studio cho Web, Client và Silverlight.

6 thoughts on “Silverlight 2 Tutorial – Xây dựng phiên bản chạy trên desktop với WPF

  1. Em chạy thử thấy lỗi anh ạ
    Khi nhập thử”programming” và nhấn nút search thì lỗi tại
    void DisplayStories(string xmlContent)
    {
    XDocument xmlStories = XDocument.Parse(xmlContent);–> lỗi xmlException was unhandled
    ‘ ‘, hexadecimal value 0x1F, is an invalid character. Line 1, position 1.

    Với phiên bản chạy trên trình duyệt thì OK

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s