[Windows Store] Universal Apps across all Windows devices

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

ngay bây giờ, từ bản cập nhật Update 2 RC của Visual Studio 2013, bạn đã 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ẽ 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ẽ một Solution như trong hình dưới

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

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

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

Xây dựng Model ViewModel

Tạo 2 thư mục mới tên Model 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 1 content

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

Tạo file class trong Folder “Model”

Kết quả

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

À 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ế xong Model

Tạo class NewsViewModel trong Folder ViewModel

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

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 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 lại một nơi để dễ quản )

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, 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 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 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 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 paste những thứ tương tự nhau

Tiếp tục mở code behind, 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 Windows Phone, trong Reference của Windows Phone chưa 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

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

dùng chung một bộ thư viện với Windows 8.1, Windows Phone 8.1 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

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 Paste vào bất kỳ chỗ nào trong Project Windows Phone (thực hiện việc Copy Paste này trên Solution Explorer nhé). Nếu bạn Resharper, bạn thể để Resharper tự sinh lại file này bằng cách xóa các method OnPropertyChanged trong News Model, để Resharper Implement lại

Chạy thử Project WP8.1

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

XAML CodeBehind dùng chung

Như bạn thể thấyhình trên, XAML CodeBehindcả 2 Project rất giống nhau, hầu như không thay đổi cả

Cách đây rất lâu, trong một buổi training tại văn phòng Microsoft, đã người từng hỏi “tại sao không dùng chung XAML cho cả Windows 8 Windows Phone?”. Câu trả lời khi đó Windows 8 Windows Phone 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ăngdùng chungđó

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

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

Copy 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 thể thay đổi kiểu View Code XAML này được compile, trong hình đang chọn Windows Phone

Hãy thử chuyể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 Windows

Chạy thử

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

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

Trong các bài Blog sau, mình hy vọng sẽ giải thích ràng hơn về các Control dùng chung cách hiển thị của chúng trên giao diện. sao thì đây mới chỉ 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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s