[Windows Store] Universal Apps across all Windows devices

Ở hội nghị BUILD 2014, Microsoft đã nhắc tới Universal App, ứng dụng có thể chạy được trên cả Windows và Windows Phone

Và ngay bây giờ, từ bản cập nhật Update 2 RC của Visual Studio 2013, bạn đã có thể xây dựng một ứng dụng như thế

Cập nhật Visual Studio 2013 lên Updat 2 RC

Ngày 13-04-2014: Link tải: http://blogs.msdn.com/b/windowsazure/archive/2014/04/09/deep-dive-visual-studio-2013-update-2-rc-and-azure-sdk-2-3.aspx

Tạo Project Universal

Sau khi cài đặt xong, bạn sẽ có thêm một số tùy chọn mới trong Visual Studio

Chọn New Project

Chọn Visual C# > Store Apps > Universal Apps

Tạo project xong, bạn sẽ có một Solution như trong hình dưới

Nhìn vào là ta cũng biết ngay, Project Windows 8.1 và project Windows Phone 8.1

Còn Project “Shared” sẽ chứa các file dùng chung, cụ thể là Model và View Model

Ta sẽ tạo một ứng dụng đọc tin RSS đơn giản nhé

Xây dựng Model và ViewModel

Tạo 2 thư mục mới tên là Model và ViewModel trong Project Shared

Giả sử ta lấy trang này làm nguồn tin: http://nhipsongso.tuoitre.vn/RssFeeds.aspx?ChannelID=430

Vậy Model sẽ bao gồm 1 title và 1 content

Ta tạo class News với 2 Properties là Title và Content, tương ứng với 2 biến là title và content

Tạo file class trong Folder “Model”

Kết quả

Tạo 2 biến private, dùng Resharper generate code ra Property

À mà quên, bạn phải khai báo kế thừa từ Interface INotifyPropertyChanged

Sau đó dùng Generate Code của Resharper

Chọn Property

Chọn luôn như hình, bấm finish

Thế là xong Model

Tạo class NewsViewModel trong Folder ViewModel

Trong class đó, khai báo một ObservableCollection

Tạo thêm một class StaticViewModels trong Folder ViewModel. File class này sẽ chứa các biến ViewModel dạng static mà ta sẽ sử dụng trong toàn App (Trước kia bạn thường khai báo chúng trực tiếp trong file App.xaml.cs, nay gom nó lại một nơi để dễ quản lý)

Trong file này, khai báo một Intance của NewsViewModel

Tạo một thư mục Utilities, trong đó, tạo một class StaticMethod. Ta sẽ nhét code lấy HTML vào đây

Trong này, gõ lệnh như sau

Mở lại file NewsViewModel, tạo thêm method GetNewsAsyncTask

Thư viện HtmlDocument lấy từ HtmlAgilityPack trong Nuget, bạn phải add nó vào trong References của Project Windows 8.1

Sau khi xong, mở file MainPage.xaml của Project Windows 8.1 lên, thêm vào đó một ListBox để hiển thị danh sách tin

Sau đó, mở file Code Behind và thêm những dòng sau:

Chạy thử

Xây dựng Template

Mở file MainPage.xaml trong Project Windows 8.1

Click chuột phải vào ListBox > Edit Additional Template > Create Empty

Trong hộp thoại hiện ra, đặt tên nó là DataTemplate

Edit lại thành như sau

Nhấn nút Local Machine để chạy thử

Thật tuyệt phải không?

Tạo tương tự bên Windows Phone 8.1

Mở file MainPage.xaml của Project Windows Phone 8.1, copy và paste những thứ tương tự nhau

Tiếp tục mở code behind, và làm tương tự

Chọn lại Startup Project

Ôi không, lỗi xuất hiện 😥

Khi bạn chọn Startup Project là Windows Phone, vì trong Reference của Windows Phone chưa có thư viện HtmlAgilityPack nên các tham chiếu tới thư viện này đều gặp lỗi

Ta add thêm thư viện này thông qua Nuget

Một lỗi xuất hiện

Nó phàn nàn là cái package này chả chứa file nào target tới Windows Phone 8.1 cả.

Vì dùng chung một bộ thư viện với Windows 8.1, Windows Phone 8.1 có khả năng add các DLL chỉ tương thích với Windows 8.1.

Chọn References > Ad References…

Chọn mục Browse > Nhấn nút Browse, tìm đến thư mục bin > Debug của Windows 8.1 để add thư viện HtmlAgilityPack

Và khi add xong, woala, mọi lỗi đã biến mất, code đã “green” trở lại

Lưu ý: Copy file Annotation.cs trong thư mục Property của Project Windows 8.1 và Paste nó vào bất kỳ chỗ nào trong Project Windows Phone (thực hiện việc Copy và Paste này trên Solution Explorer nhé). Nếu bạn có Resharper, bạn có thể để Resharper tự sinh lại file này bằng cách xóa các method OnPropertyChanged trong News Model, và để Resharper Implement lại nó

Chạy thử Project WP8.1

Done, bạn đã tự tạo một UniversalApp rồi đấy

XAML và CodeBehind dùng chung

Như bạn có thể thấy ở hình trên, XAML và CodeBehind ở cả 2 Project rất giống nhau, hầu như không thay đổi gì cả

Cách đây rất lâu, trong một buổi training tại văn phòng Microsoft, đã có người từng hỏi “tại sao không dùng chung XAML cho cả Windows 8 và Windows Phone?”. Câu trả lời khi đó là Windows 8 và Windows Phone có bộ thư viện hơi khác nhau, nên một số control cũng khác nhau. Bây giờ, Microsoft đã đem lại khả năng “dùng chung” đó

Tạo một Folder tên View trong Project Shared

Add New một BlankPage, đặt tên nó là MainPage

Copy và Paste code từ Project Windows Phone (cả XAML lẫn code Behind)

Ở trên cùng của XAML Editor, bạn sẽ thấy một Drop down list thú vị

Ở đây, bạn có thể thay đổi kiểu View mà Code XAML này được compile, trong hình đang chọn Windows Phone

Hãy thử chuyển nó sang Windows, bạn sẽ thấy giao diện Visual Editor thay đổi

Mở file App.xaml.cs, kéo xuống dòng 98, chỉnh sửa thành View.MainPage

Chỉnh Startup Project là Windows

Chạy thử

Chỉnh Startup Project thành Windows Phone, nhấn chạy thử

Thế là xong, bạn đã có một Page hiển thị được ở cả 2 giao diện nhé.

Trong các bài Blog sau, mình hy vọng sẽ có giải thích rõ ràng hơn về các Control dùng chung và cách hiển thị của chúng trên giao diện. Dù sao thì đây mới chỉ là Release Candidate. Sẽ còn thay đổi nhiều trong tương lai.

Advertisements

2 thoughts on “[Windows Store] Universal Apps across all Windows devices

  1. Em có một vấn để muốn hỏi anh về Resharper. Trong bài trước anh chó chia sẽ một file Annotation.cs nhưng không nói cách sử dung. Qua bài post này em thấy anh bảo là có thể copy và paste vào bất cứ chỗ nào trong project cũng được. Vậy nếu em không cài Resharper mà chỉ add file Annotation.cs vào project thì có sử dụng được các tiện ích như anh giới thiệu không? Và nếu chỉ dung 1 file này thì có bị hết hạn trail gì không anh?

    Em rất mong nhận được câu trả lời của anh. Chúc anh một ngày làm việc hiệu quả.

    • file .cs tức là đã đưa hẳn source code cho em rồi thì làm sao giới hạn ngày sử dụng hay trial được.
      File này add vào project chỉ có tác dụng làm tiết kiệm một số dòng code, làm code đơn giản gọn gàng hơn nhưng không thể thay thế được cho Resharper

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.