Template10: membuat template baru Universal aplikasi Windows – MVVM

pola Model-View-View Model (dari sekarang hanya MVVM) tidak diragukan lagi pola yang paling luas ketika datang untuk mengembangkan aplikasi berbasis XAML. Dalam posting ini, kita tidak akan semua mempelajari rincian dalam dari pola: Saya sudah berbicara tentang hal itu berkali-kali di blog ini, ketika saya disajikan beberapa kerangka MVVM paling populer Caliburn Micro dan Prisma. & Amp; Amp; Nbsp; Tujuan dari pola MVVM adalah untuk meningkatkan testability dan pemeliharaan aplikasi, karena membantu pengembang untuk menjadi salah satu tujuan utama yang menjangkau setiap pembangunan berkendara kompleks: memisahkan lapisan yang berbeda sehingga memastikan kode yang menangani antarmuka pengguna tidak tercampur dengan yang logika bisnis (ingin mengambil data dari awan atau dari database) alamat.

pola MVVM banyak digunakan dalam Deklarasi Universal Windows dunia aplikasi dan umumnya dengan semua teknologi berbasis XAML karena dibangun di atas fungsi dasar seperti XAML mengikat, sifat ketergantungan INotifyPropertyChanged antarmuka dll Bila Anda menggunakan pola ini, biasanya Anda membagi proyek menjadi tiga komponen:

  1. Model , yang perangkat dan jasa yang digunakan untuk data mentah dalam aplikasi mengobati, tanpa ketergantungan bagaimana mereka disajikan.
  2. View , yang merupakan user interface yang disajikan kepada pengguna. Universal aplikasi Windows, Views diidentifikasi dengan halaman XAML.
  3. View Model , yang merupakan hubungan antara pandangan dan model. Lihat Model adalah kelas sederhana yang mengurus men-download data melalui model, dan mempersiapkan mereka untuk disampaikan kepada obligasi bantuan mata.

pola MVVM memberikan pengembang banyak manfaat, tetapi yang diperlukan untuk mengkonfigurasi sedikit waktu dalam sebuah proyek baru: masalahnya adalah bahwa ketika Anda membuat aplikasi Universal baru Windows banyak skenario ( navigasi, aplikasi siklus hidup, kontrak, dll) yang mudah diterapkan jika Anda menggunakan kode-belakang, tapi harus dimonitor bila menggunakan pola MVVM, karena sebagian besar kode ditulis dalam ViewModel yang kelas independen. Sebuah contoh yang baik dari masalah ini adalah manajemen siklus hidup halaman: Biasanya, dalam sebuah aplikasi Windows universal yang Anda gunakan OnNavigatedTo () dan OnNavigatedFrom () peristiwa proses navigasi dari satu halaman ke yang lain. Tapi hanya peristiwa-peristiwa diungkapkan oleh kelas kode di belakang karena mewarisi dari kelas; Anda tidak dapat menggunakan mereka dalam ViewModel yang tidak memiliki ketergantungan pada itu.

Oleh karena itu, banyak pengembang yang menciptakan perpustakaan dan kerangka kerja membuat hidup pengembang lebih mudah dengan menyediakan semua alat yang diperlukan. Yang paling populer adalah MVVM Cahaya dari Laurent Bugnion, Caliburn Micro Rob Esieneberg dan Prisma, awalnya dikembangkan oleh Microsoft Pola & amp; amp; amp; Divisi praktek dan sekarang berubah menjadi proyek komunitas. Setiap frame memiliki kelebihan dan kekurangan: MVVM Cahaya adalah sederhana dan paling fleksibel, tetapi tidak memiliki membantu proses skenario khas untuk aplikasi Windows global. Caliburn Mikro dan Prisma, untuk mengendalikan sisi lain, lebih kompleks dan sedikit “kaku”, tetapi mereka menawarkan banyak alat skenario umum seperti navigasi, halaman siklus hidup proses dll

Template10 tidak ‘t bertindak seperti kerangka MVVM lain (meskipun, seperti yang akan kita lihat, ia harus mengimplementasikan sejumlah kelas tanpa bergantung pada perpustakaan lain), tapi membantu pengembang untuk menerapkan pola MVVM mudah. Mari kita lihat secara detail karena fasilitas ini: Penting untuk diingat bahwa ada dapat digunakan, apa yang kita di posting sebelumnya (bootstrapper, diperpanjang splash screen, kontrol baru, dll) proyek juga MVVM berbasis dijelaskan

<. h3> The alat dasar untuk melaksanakan pola

Meskipun Template10 tidak berperilaku sebagai alternatif yang nyata untuk perpustakaan yang ada, itu tidak menyediakan cara alat dasar yang diperlukan untuk menjalankan dengan benar cara. Anda tidak diharuskan untuk menggunakannya. Anda dapat memilih, misalnya, MVVM Cahaya untuk menambah proyek Anda dan menggunakan teman-temannya bukan yang saya tentang untuk menggambarkan

Bantuan penting pertama yang ditawarkan oleh Template10 adalah View Model Basis kelas, yang merupakan kelas dasar yang akan mewarisi ViewModels Anda. Selain menawarkan berbagai fitur yang berguna yang akan kita lihat nanti dalam pesan ini, ia menyediakan alat dasar untuk menyelesaikan pola. Kuncinya adalah Set () metode yang dapat digunakan untuk menyebarkan perubahan sifat ViewModel untuk user interface dengan menerapkan INotifyPropertyChanged antarmuka. Berikut adalah bagaimana Anda dapat menggunakannya untuk menentukan properti di ViewModel:

 public class Main View Model: Template10.Mvvm.ViewModelBase {public melihat Main Model () {} private string _name; public string Nama {mendapatkan {kembali _name; } {Set Set (_name ref, nilai); }}} 

Set () metode ini disebut dalam setter properti, sehingga memungkinkan untuk mengirim pesan ke pandangan bahwa nilai telah berubah, selain efektif mengubah nilai properti. Dengan cara itu, jika acara Anda satu atau lebih kontrol dalam kaitannya dengan properti ini dengan mengikat, mereka akan bekerja kondisi visual mereka untuk mencerminkan perubahan. Sebagai contoh, di sini adalah bagaimana Anda dapat blok kontrol dalam XAML sisi properti yang baru saja kita menjelaskan dapat menghubungkan:

 & amp; amp; lt; blok Text = "{Binding Path = nama}" / & amp; amp; gt; 

Jika Anda menghindari beberapa pengalaman dengan MVVM Cahaya, pendekatan ini dikenal: toolkit ini juga menyediakan metode yang disebut Set () , yang memiliki tujuan yang sama ". / P>

Fitur penting lainnya adalah alat Template10 Delegasi Command kelas yang dapat digunakan untuk membuat perintah sederhana. Apa tujuan dari permintaan? Ketika datang ke proses interaksi pengguna dalam aplikasi tradisional dibuat dengan kode-balik pendekatan, Anda mengandalkan pegangan Event: adalah metode yang terhubung ke sebuah acara yang dibesarkan oleh kontrol seperti menekan tombol atau memilih item dari daftar. Event ini memiliki ketergantungan yang ketat pada pandangan, dan dapat dinyatakan seperti itu hanya di kelas kode-belakang. Di tempat aplikasi MVVM sebagian besar logika ditangani oleh viewmodel dan oleh karena itu kita harus menangani interaksi pengguna dalam ViewModel. Justru dalam tugas rangka: cara untuk menangani sebuah acara dengan cara rumah, sehingga kita menghubungkannya dengan kontrol dengan cara mengikat. Dengan begitu kita bisa "mematahkan" ketergantungan yang event tradisional dengan pandangan, dan kita dapat menjelaskan perintah di setiap kelas, termasuk ViewModels

Sebuah perintah didefinisikan oleh:.

  1. Lakukan tindakan ketika perintah dipanggil.
  2. Persyaratan untuk mengaktifkan perintah harus dipenuhi. Fitur ini berguna karena memastikan bahwa kontrol terhubung ke perintah secara otomatis akan mengubah indikasi visual atas dasar perintah negara. Sebagai contoh, jika perintah terhubung ke kontrol dan, selama pelaksanaan, perintah dinonaktifkan, juga tombol mati, itu akan ditampilkan dalam warna abu-abu, dan pengguna tidak akan dapat pers

Windows Runtime menyediakan kelas dasar untuk melaksanakan perintah, yang disebut ICommand . Tapi itu hanya sebuah antarmuka, pelaksanaannya terserah kepada pengembang yang akan membuat kelas untuk setiap pekerjaan. Untuk mengurangi jejak dan mempercepat pembangunan, Template10 menawarkan kelas yang disebut Delegasi Command , yang mengimplementasikan interface ini dan dapat dengan mudah diawali dengan naik ke diperlukan dua hal insinyur. Berikut adalah contoh:

 swasta Delegasi Command _setNameCommand; Delegasi Umum Komando SetNameCommand {mendapatkan {if (_setNameCommand == null) {_setNameCommand = Delegasi Command baru (() = & amp; amp; gt; {hasil = $  "Hello {nama}"}, () = & amp; amp; gt ;! String.IsNullOrEmpty (nama)); } Kembali _setNameCommand; }} 

Parameter pertama adalah Action (dalam hal ini, didefinisikan dengan cara metode anonim), yang menentukan untuk melaksanakan, ketika perintah tersebut. Parameter opsional kedua, sebaliknya, adalah fungsi yang merupakan nilai Boolean yang digunakan untuk menentukan apakah perintah dikembalikan aktif. Dalam sampel, perintah diaktifkan hanya jika isi dari Nama properti tidak kosong.

Jika Anda mendefinisikan pekerjaan, Anda dapat menghubungkannya ke manajemen XAML properti dengan nama yang sama, yang telah terkena dengan mendukung semua interaksi pengguna kontrol (seperti control). & Amp; Amp; nbsp; Contoh berikut menunjukkan bagaimana untuk perintah real disajikan oleh control untuk menghubungkan Delegasi Command atribut yang kita definisikan sebelumnya.

 & amp; amp; lt; Tombol Content = "Klik Me" Command = "{Binding Path = SetNameCommand}" / & amp; amp; gt; 

Dalam hal ini, jika Anda memiliki pengalaman sebelumnya dengan MVVM Cahaya, pendekatan akan akrab: toolkit, pada kenyataannya, menawarkan kelas yang disebut Relay Command untuk tujuan yang sama, dan . yang bekerja dengan cara yang sama

Navigasi dan siklus hidup halaman

Kami telah mengatakan skenario ini beberapa kali dalam posting ini: salah satu skenario utama untuk menangani dalam aplikasi Windows universal siklus hidup halaman. Seringkali, peristiwa navigasi yang digunakan untuk operasi dasar sebagai beban proses data. Dengan demikian, akses ke acara tersebut, bahkan dalam Model View kritis, karena biasanya semua logika ada.

Untuk tujuan ini View Model Basis kelas menyediakan berbagai fitur tambahan untuk membuat hidup pengembang lebih mudah. Fungsi pertama adalah untuk mengimplementasikan interface yang disebut INavigable , yang memungkinkan akses langsung ke acara navigasi dalam ViewModel, seperti dalam contoh berikut:

 public class Lihat Detail Model: View Model Basis {override public void OnNavigatedTo (parameter objek Navigasi Mode adalah IDictionary & amp; amp; lt; berbagai objek & amp; amp; gt; negara) {if {int (= null parameter!) id = (parameter int); // Beban Data}} public override Tugas OnNavigatedFromAsync (IDictionary & amp; amp; lt; berbagai objek & amp; amp; gt; suspensi bool negara) {kembali base.OnNavigatedFromAsync (negara, suspensi); }} 

Seperti yang Anda lihat, berkat kelas dasar ini, Anda mendapatkan 1: 1 pemetaan dengan metode yang sama yang tersedia dalam kode di belakang kelas. Informasi yang berguna juga mendapatkan lebih navigasi, serta parameter yang lulus dari halaman lain atau Mode Navigasi , yang berguna untuk membedakan antara skenario navigasi yang berbeda (misalnya, Anda dapat memilih program memuat data ketika Mode Navigasi parameter diatur ke baru , yang berarti itu adalah navigasi baru).

fitur navigasi lain yang ditawarkan oleh View Model Basis class layanan Navigasi , yang merupakan bantuan yang dapat digunakan untuk mengaktifkan navigasi di satu halaman ke halaman lain secara langsung di ViewModel. Sekali lagi, ini adalah skenario yang, tanpa bantuan, hanya didukung dalam kode di belakang kelas: navigasi ditangani, pada kenyataannya, Bingkai kelas, di belakang yang hanya bisa dibuka kode. layanan Navigasi kelas cukup mudah digunakan, karena meniru perilaku Bingkai A: Untuk sampai ke menavigasi lainnya dari satu halaman, Anda dapat menggunakan Navigasi ( ) metode, berlalunya informasi sebagai jenisnya, dan opsional parameter

. NavigationService.Navigate (typeof (Detil Page) .id orang?); 

Seperti yang Anda lihat dalam dokumentasi Arahkan () metode menerima sebagai parameter generik object : tapi itu bukan praktik yang baik untuk melewatkan objek yang kompleks dari satu sisi ke sisi lain, tetapi lebih baik untuk menempel bentuk sederhana (string, angka, dll). Dengan cara ini kita memastikan bahwa sistem ini dilakukan oleh Template10 (kita akan lihat nanti), yang mensyaratkan bahwa parameter Serializable tidak harus istirahat.


Modus menangani halaman

Salah satu pegangan skenario utama dalam sebuah aplikasi Windows universal siklus hidup aplikasi. Ketika sebuah program tidak terganggu lebih di latar depan, memori beku proses (sehingga negara diawetkan), tetapi semua kabel yang menggunakan CPU, baterai, atau penghentian jaringan. Setelah aplikasi dilanjutkan, kita tidak perlu melakukan sesuatu yang istimewa: karena negara itu disimpan dalam memori, aplikasi akan dikembalikan persis seperti itu. Namun, sistem operasi dapat memutuskan untuk aplikasi terputus dalam kasus kehabisan berhenti berarti. Dalam hal ini, karena proses ini benar-benar dibunuh ketika aplikasi di-restart, maka akan secara otomatis kembali ke keadaan sebelumnya. Sebagai pengembang, kita perlu untuk menangani skenario ini: sejak akhir OS benar-benar transparan kepada pengguna, ia akan diharapkan berlaku pada saat dia. Ini adalah tugas kita untuk menyimpan dengan baik dan untuk mengembalikan halaman tersebut. Katakanlah, misalnya, bahwa aplikasi kami meliputi halaman dengan sejumlah bidang bahwa pengguna harus memasukkan sebelum (seperti formulir). Setelah aplikasi telah ditangguhkan, dan kemudian dilanjutkan, dia akan berharap bahwa data yang telah selesai dan tidak menjadi dari seluruh bentuk tanah.

Bila menggunakan pola MVVM, penanganan skenario ini memperkenalkan sejumlah tantangan:

  1. Seperti yang kita tidak tahu pasti apakah program ditangguhkan tidak akan selesai, atau kita perlu modus halaman, setiap kali navigasi baru dilakukan untuk menyelamatkan. Bila menggunakan pola MVVM tanpa bergantung pada perpustakaan lain (yang Template10), persyaratan ini sulit untuk menangani karena kita tidak memiliki akses ke acara navigasi dalam ViewModel.
  2. Setelah aplikasi telah ditangguhkan, kita harus menghemat negara aplikasi toko lokal dan isi pendaftaran atau halaman terakhir yang dikunjungi. Kemudian, ketika aplikasi dijalankan, kita perlu memahami jika itu selesai, membantu untuk mengembalikan situasi seperti kami sebelumnya telah disimpan. Sayangnya dasar Windows 10 alat template atau API menawarkan untuk membuat lebih mudah bagi pengembang untuk mendukung skenario ini.

Template10 membuat seluruh proses lebih mudah. Ketika sampel kode untuk menangani halaman telah melihat kehidupan, Anda mungkin telah memperhatikan bahwa OnNavigatedTo () dan OnNavigatedFrom () disebut peristiwa subjek parameter negara . Ini adalah kamus, daftar pasangan kunci-nilai yang secara otomatis seri dan seri di toko lokal sebagai aplikasi mungkin berisi ditangguhkan atau dilanjutkan. Setelah aplikasi telah ditangguhkan, Anda harus OnNavigatedFrom () metode untuk kamus semua informasi yang kita perlu menambahkan kembali keadaan program. Saat halaman, sebagai gantinya, di OnNavigatedTo () event, kami akan mengambil informasi yang tersimpan sebelumnya dan kami akan memberikan mereka terhadap sifat yang tepat dari ViewModel.

Mari kita lihat sebuah tes yang sesungguhnya dengan mendefinisikan halaman dengan text control. Pengguna dapat teks, yang disimpan dalam properti ViewModel setelah satu

masukkan

 private string _name; public string Nama {mendapatkan {kembali _name; } {Set Set (_name ref, nilai); }} 

Rumah terhubung, seperti biasa, untuk text kontrol dengan mengikat:

 & amp; amp; lt; blok Text = "{Binding Path = Nama, Mode = bi}" / & amp; amp; gt; 

Anda dapat melihat bahwa ikatan dikonfigurasi menggunakan bi mode: dengan cara ini setiap kali pengguna ingin di text menulis, Nama properti di ViewModel secara otomatis diperbarui dengan nilai baru.

Anda dapat mencoba untuk menangguhkan aplikasi dan buka lagi, menggunakan menu drop-down berlabel Siklus Hidup Events di Visual Studio yang memungkinkan untuk mensimulasikan fase yang berbeda dari siklus hidup aplikasi. Hal ini penting untuk diingat, pada kenyataannya, bahwa ketika debugger terhubung, aplikasi tidak ditangguhkan ketika Anda berada di latar belakang, sebagai tempat dilakukan selama operasi normal. Jika kita melakukan beberapa teks text menulis kontrol, jadi kami menangguhkan aplikasi dan kita buka kembali, kami akan melakukan segala yang kami ditemukan ditinggalkan, karena aplikasi hanya diskors, dan proses disimpan dalam memori. Tetapi jika kita mencoba yang sama tetapi menggunakan Putus dan dekat untuk melakukannya, Anda akan melihat bahwa isi dari text control akan pergi: proses ini benar-benar selesai, dan jika kita tidak isi text untuk menyimpan data itu hilang selama restorasi.

 clip_image002

Untuk menghindari masalah ini, kita bisa menggunakan kamus saya katakan sebelumnya: OnNavigatedFrom () proses ViewModel kita bisa mengerti jika aplikasi dihentikan dan akhirnya menyimpan mengumpulkan informasi yang kita butuhkan untuk memulihkan situasi.

 public class Lihat Detail Model: View Model Basis {private string _name; public string Nama {mendapatkan {kembali _name; } {Set Set (_name ref, nilai); }} Override Umum Tugas OnNavigatedFromAsync (IDictionary & amp; amp; lt; berbagai objek & amp; amp; gt; suspensi bool negara) {if (suspensi) {state.Add ("Nama", nama); } Kembali base.OnNavigatedFromAsync (negara, suspensi); }} 

disebut menggunakan boolean parameter preseden Kami memahami jika aplikasi ditangguhkan, jika itu yang terjadi, kita dapat menghemat kamus disebut negara , nilai Nama fitur dengan pencocokan ke kunci dengan nama yang sama. Dengan cara ini, selama suspensi, Template10 otomatis mengurus serialisasi isi kamus ini untuk penyimpanan lokal dalam sebuah file teks. Sekarang akan lebih mudah bagi Anda untuk memahami salah satu persyaratan utama dalam implementasi ini: kita bisa menyimpan dalam kamus hanya data dasar yang dapat serial dalam XML atau JSON berkas. Untuk menyimpan, misalnya, arus foto dalam kamus akan bekerja

Langkah selanjutnya adalah untuk memuat pengolahan. Harus mendapatkan dalam kasus negara kamus berisi beberapa informasi dalam OnNavigatedTo () metode, itu berarti bahwa aplikasi akan melanjutkan dari suspensi dan kami. Dalam hal ini, sebagian besar pekerjaan akan dilakukan oleh Template10: bootstrapper akan mengurus memuat data yang sebelumnya mengambil seri, dan pengguna secara otomatis akan diarahkan ke halaman dikunjungi terakhir dari aplikasi. Dengan cara ini, kita hanya dapat mengakses negara parameter dalam OnNavigatedTo () metode dan menggunakan data untuk mengisi kembali properti di ViewModel kami, seperti dalam contoh berikut

 public class Lihat Detail Model: View Model Basis {private string _name; public string Nama {mendapatkan {kembali _name; } {Set Set (_name ref, nilai); }} Override void publik OnNavigatedTo (parameter objek Navigasi Mode adalah IDictionary & amp; amp; lt; berbagai objek & amp; amp; gt; negara) {if (state.Any ()) {Nama = negara ["nama"] toString () .; state.Clear (); }} Override Umum Tugas OnNavigatedFromAsync (IDictionary & amp; amp; lt; berbagai objek & amp; amp; gt; suspensi bool negara) {if (suspensi) {state.Add ("Nama", nama); } Kembali base.OnNavigatedFromAsync (negara, suspensi); }} 

OnNavigatedTo () metode kita periksa data dalam kamus: hanya dalam hal ini kita harus memperbarui nilai Nama dan kami menetapkan ke properti ViewModel tepat. Langkah berikutnya adalah untuk menghapus isi koleksi (dengan Clear () metode) untuk mencegah data download lagi, bahkan jika kita hanya berpindah dari satu halaman ke halaman lain.

Sekarang kita dapat mencoba lagi untuk menangguhkan aplikasi dengan Putus dan dekat dengan Visual Studio: sekarang aplikasi akan berperilaku seperti yang diharapkan dan isi dari TextBox control akan tetap berada di sana.

Penting! Penting untuk diingat bahwa pendekatan ini harus digunakan untuk menyatakan halaman, tidak untuk menyimpan program. Data yang, sesegera mungkin oleh pengguna disimpan untuk meminimalkan kehilangan data selama kesalahan tak terduga. Selama suspensi, Anda memiliki semua operasi tertunda, antara 5 dan 10 detik, yang tidak cukup untuk informasi yang Anda dapat menyelesaikan dengan menyimpan aplikasi Anda. Satu-satunya data yang kita butuhkan untuk menyimpan dalam suspensi yang membuatnya lebih mudah bagi pengembang untuk menciptakan ilusi yang tidak pernah ditutup aplikasi, meskipun diam-diam dihentikan oleh sistem operasi.


Akses ke thread UI

Kadang-kadang Anda mungkin berhak, dalam ViewModel bahwa beberapa tindakan untuk meningkatkan Berdasarkan diskusi. Dalam hal ini, jika kita mencoba untuk akses langsung untuk mendapatkan salah satu kontrol UI (misalnya, kita mengubah nilai properti yang terhubung ke kontrol di gambar), kita sakit satu pengecualian: alasannya adalah bahwa kita mencoba dalam rangka untuk mendapatkan akses ke thread UI dari sekunder

Windows Runtime menyediakan kelas yang disebut pengirim untuk memecahkan masalah ini. Ini adalah semacam "tukang pos", yang mampu beberapa operasi ke thread UI, terlepas dari kawat, dimana konstruksi dilakukan. Dalam hal ini kita berbicara tentang sebuah kelas yang dapat dengan mudah diakses dari kelas kode-belakang, tapi sama tidak berlaku untuk kelas independen sebagai ViewModel. Template10 berisi penolong membuatnya lebih mudah untuk juga memiliki akses ke pengirim kelas ketiga, seperti ViewModel, dengan mengekspos sifat yang disebut pengirim sebagai bagian dari View Model Basis Infrastruktur

 menunggu Dispatcher.DispatchAsync (() = & amp; amp; gt; {// melakukan sesuatu dengan benang UI}); 

digunakan sangat sederhana: hanya memanggil DispatchAsync () Cara pengirim kelas dengan melewatkan parameter Action suntingan Anda ingin menjalankan di thread UI.


paket

Template10 dapat benar-benar berguna ketika bekerja dengan pola MVVM dalam aplikasi Windows universal, Anda dapat fokus pada hal-hal mendapatkan dilakukan daripada mencoba untuk menemukan kembali roda setiap waktu untuk berurusan dengan dasar-dasar pengembangan aplikasi Universal Windows. Namun Template10 masih tumbuh dan jumlah layanan yang akan membuat lebih mudah untuk mengintegrasikan fungsi menjadi ViewModel akan terus tumbuh Windows!

Pada titik ini kami telah menyelesaikan perjalanan kita untuk menemukan fungsi Template10, tapi saya yakin bahwa kita mampu untuk berbicara tentang cuaca akan di masa depan. Ingat bahwa Anda dapat menemukan semua informasi tentang proyek, selain banyak tes pada GitHub repositori resmi https://github.com/Windows-XAML/Template10

Leave a Reply