[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ế
1. Cập nhật Visual Studio 2013 lên Update 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
2. 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é
3. 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ử
4. 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?
5. 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
6. 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.