Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Workflow

Memahami Framework Open Source PureMVC

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Riska Aprianti (you can also view the original English article)

Dua kali sebulan, kami mengunjungi kembali beberapa posting favorit pembaca kami dari sepanjang sejarah Activetuts+. Tutorial ini pertama kali diterbitkan pada Mei 2009.

Terkadang Anda mungkin diminta mengerjakan proyek yang membutuhkan banyak pengkodean dan/atau kolaborasi dengan kolega. Bisa dikatakan bahwa framework sering kali menjadi pilihan terbaik mengenai struktur, semantik, dan produktivitas.

Memahami suatu framework mungkin membutuhkan banyak waktu, tetapi jika Anda senang dengan ilmu dasar, maka Anda dapat benar-benar membuat kode dengan kecepatan pemikiran. PureMVC adalah framework yang bagus untuk AS3; beberapa orang mungkin mengatakan agak sulit untuk melakukannya, tetapi Anda akan senang melakukannya.

Seperti yang dapat Anda lihat dari demo, apa yang sedang kami kerjakan cukup sederhana, tetapi itu cukup untuk memberi Anda pemahaman tentang cara kerja PureMVC.


Sebelum kita mulai...

Sebelum kita mulai, saya ingin memastikan bahwa basis-basis berikut tercakup. Ini adalah tutorial untuk skrip Actionscripter tingkat menengah hingga lanjutan, tetapi jangan terintimidasi jika Anda tidak termasuk, tidak ada waktu melainkan seperti sekarang untuk mulai mempelajari!

  1. Contoh ini dibuat menggunakan Flex Builder. Anda dapat mengunjungi situs web Adobe dan mengunduh salinannya sendiri (percobaan gratis 60 hari!). Namun, itu akan dengan mudah bekerja dalam IDE pilihan Anda, apakah itu FlashDevelop, FDT, atau TextMate yang bagus.
  2. Seperti yang telah saya katakan, tutorial ini adalah untuk Actionscripters menengah ke lanjutan, jadi saya akan melewati bagian sederhana seperti mengatur proyek Anda di IDE yang Anda pilih, dll...
  3. Perlu dicatat bahwa jika Anda ingin mulai melakukan bisnis Anda, disarankan untuk pertama-tama mencetak salinan praktik terbaik PureMVC. Ini cukup berat, tetapi Anda akan senang membacanya.

Langkah 1: Siapkan

Akan lebih bijaksana untuk mengambil sendiri salinan .file zip proyek. Di dalamnya, Anda akan melihat pengaturan dasar untuk tutorial ini. Jalankan IDE Anda (milik saya adalah Flex Builder) dan buat proyek baru. Hal selanjutnya yang perlu Anda lakukan adalah mengatur kompiler Flex untuk digunakan folder "src" sebagai sumber path, folder "debug" untuk bin debug dan folder "deploy" untuk bin rilis. Sederhana sekali.

Kedua, saya telah memasukkan dua library tambahan di dalam folder "src": TweenLite Greensock ("src/gs") dan PureMVC ("src/assets/swc"). Anda akan melihat bahwa saya telah menggunakan .swc untuk library PureMVC daripada folder sumber, ini karena saya lebih suka menggunakan file .swc. Pastikan bahwa kedua library ini diatur untuk dikompilasikan ketika debug dan deploy Anda digunakan. Berikut adalah tangkapan layar layout target untuk proyek ini. Meskipun Anda lebih mudah untuk mengimpor proyek dan melewatinya file demi file, saya akan memberi tahu Anda cara menulis setiap file sehingga anda berhasil dengan proyek yang mirip dengan contoh.


Langkah 2: Dasar-dasar

Konsep PureMVC mungkin membuat kita beranggapan lebih baik menghindar, tetapi begitu Anda sudah menguasai hal mendasar, Anda akan segera menguasainya. Struktur PureMVC berarti bahwa pemberitahuan digunakan untuk menjalankan perintah tertentu baik dalam model, view atau controller. Pemberitahuan ini terdiri dari nama dan badan opsional. Parameter body memungkinkan Anda mengirim data dari view (seperti tombol mana yang diklik) ke controller yang kemudian dapat meneruskannya ke model yang kemudian mengembalikan data relatif.

Gagasan notification ini berarti bahwa PureMVC memiliki struktur yang sangat pasti tentang bagaimana file source diatur:

  • Proxy (model):
    Proxy hanyalah sebuah model. Model, bagi mereka yang mungkin tidak tahu, adalah class yang menangani semua transaksi data seperti memuat data XML, menyimpannya dan mengambilnya. Tidak seperti mediator atau command, proxy tidak pernah mendengarkan atau menangani notifikasi; mereka hanya mengirimnya. Ini berarti bahwa agar commad atau mediator mendapatkan beberapa data, data tersebut harus dikembalikan ke yang dipanggil melalui badan notification atau dengan mengambil instance proxy dari facade. Proxy menyimpan data mereka dalam class publik yang disebut VO (value objects). Mereka hanya class sederhana yang memiliki variabel publik tempat kita dapat menyimpan data kita untuk mengambil dan memperbarui melalui proxy kita.
  • Mediator dan tampilannya (view):
    Mediator adalah class yang bertindak atas nama view. Dalam aplikasi Anda, Anda mungkin memiliki beberapa view dan semua view ini akan memperluas class DisplayObject (jika tidak mereka tidak akan dilihat). Mediator adalah class yang menambahkan view Anda ke pangkalan Anda ("viewComponent"; ini adalah argumen pertama yang diteruskan ke mediator) dan juga akan menangani semua notification masuk dan keluar yang berkaitan dengan view tersebut. Ini berarti bahwa mediator bertanggung jawab untuk memberitahukan aplikasi Anda jika pengguna telah melakukan suatu peristiwa dalam view (seperti dengan mengklik tombol) dan juga akan bertanggung jawab untuk mengirimkan data dari proxy ke view untuk memperbaruinya. Mediator mendengarkan dan menangani notifikasi itu sendiri dan dapat mendaftarkan mediator baru ke dalam facade ketika mereka diperlukan alih-alih memuatnya sekaligus.
  • Command (controller):
    Command hanyalah sebuah pengontrol. Meskipun tidak mendengarkan notifikasi itu sendiri, notifikasi itu disalurkan dari fasad. Ini berarti bahwa suatu perintah harus menjalankan pernyataan bersyarat untuk memungkinkannya menentukan notification mana yang diterima dan apa yang harus dilakukan selanjutnya. Selain menerima notifikasi, command juga diizinkan untuk mengirimkannya. Mereka juga dapat mendaftarkan proxy, mediator, dan lebih banyak command.

Semoga ini dapat memberi Anda pemahaman sederhana tentang bagaimana PureMVC diatur. Untuk sebuah representasi visual dari cara pemberitahuan "fly" diperoleh di aplikasi Anda, periksa keluar PureMVC's konseptual diagram:

Anda akan dimaklumi jika Anda pikir itu semua sangat menakutkan, tetapi begitu Anda duduk dan merencanakan seperti apa aplikasi Anda nantinya, Anda akan segera mengerti apa yang kita inginkan:

  1. Class dasar kita akan menyalakan facade
  2. Facade kemudian akan memanggil start up command
  3. Start up command akan mendaftarkan proxy dan mediator aplikasi Anda
  4. Proxy kemudian akan mereferensikan objek nilainya dan menunggu notification lebih lanjut
  5. Aplikasi media mediator akan mendaftarkan meditator progress
  6. Mediator progress akan membuat view progress dan kemudian mengirim notification untuk memuat data
  7. Facade akan menerima pemberitahuan ini dan meneruskannya ke command data
  8. Command data kemudian akan memfilter notification dan memberi tahu proxy untuk memuat data
  9. Proxy akan memberi tahu view progres bahwa memuat data (akan ditampilkan), progres (akan diperbarui) dan ketika selesai (akan disembunyikan); mediator akan menangani semua ini
  10. Proxy kemudian akan mengirim notification untuk ditangani oleh aplikasi mediator
  11. Aplikasi mediator akan mendaftarkan view url tempat kita akan membuat tombol bagi pengguna untuk mengklik
  12. Mediator view url akan meneruskan data dari proxy ke view url dan menambahkan view url ke atas panggung
  13. Pengguna akan mengklik tombol, ini akan ditangani oleh mediator dan notification akan dikirim ke proxy
  14. Proxy kemudian akan memuat data lagi, selalu menyampaikan keadaan ke view progress
  15. Proxy sekali lagi akan mengirim notification untuk ditangani oleh mediator aplikasi
  16. Mediator aplikasi kemudian akan memberi tahu mediator view url untuk menyembunyikan view url dan kemudian mendaftarkan view gambar
  17. Mediator view gambar akan membuat view gambar dari data proxy

Itu mungkin terdengar rumit, tetapi itu hanya sebuah tugas memecah fungsi aplikasi Anda menjadi potongan-potongan kecil ukuran gigitan.


Langkah 3: Semuanya Dimulai Dengan Facade

Setiap kali Anda bekerja dengan PureMVC, Anda harus memahami bahwa pengkodean selalu dimulai dengan facade. Facade dalah lapisan yang menghubungkan framework PuremVC, kode MVC dan file Action Accesscript Anda; dalam hal ini yang disebut "App.as". Saat runtime, App.as akan melakukan bisnisnya, baik itu mengatur skala panggung, frame rate dan yang lainnya; dan ketika sudah siap, itu akan meminta facade untuk memulai aplikasi.

Mari kita buat file Actionscript dasar kita. Menggunakan IDE favorit Anda untuk membuat file baru, beri nama "App.as" dalam "src" dan pastikan bahwa ia memperluas kelas Sprite seperti:


Langkah 4: Mengatur Basis

Sekarang kita telah membuat kelas dasar kita, silakan menambahkan hal-hal seperti mengatur width, height, background colour dan sebagainya. Juga berguna untuk mengimpor aset yang mungkin Anda butuhkan, seperti font atau gambar. Setelah Anda puas dengan kelas dasar Anda, kita dapat melanjutkan untuk membuat facade. Di bawah ini adalah pratinjau kelas dasar saya:


Langkah 5: Menyiapkan Facade

Pada langkah ini kita mempelajari langsung ke dunia PureMVC. Seperti yang saya katakan pada Langkah 2, facade adalah layer penting yang menyatukan aplikasi Anda. Buat class baru yang disebut "ApplicationFacade.as" dalam "src/com/flashtuts", pastikan itu memperluas Facade dan mengimplementasikan IFacade. Perhatikan bahwa facade kita tidak memiliki konstruktor karena memperluas kelas Facade. Dalam facade kita, kita akan memiliki 3 fungsi dengan yang opsional 4. Selain itu, kita akan memiliki 2 konstanta publik. Di bawah ini kita akan bertujuan untuk membuat kelas facade kita terlihat seperti:

Di dalam PureMVC, acara atau "notification" digunakan untuk merutekan data dan memicu fungsi yang harus dilakukan dalam view atau controller kita. Karena itu karena facade kita akan mengirim notification ke command yang memerintahkannya untuk memulai aplikasi, kita membuat konstanta unik yang akan digunakan oleh facade untuk mengirim command dan fungsi memulai mendengarkan command:

Meskipun Anda tidak perlu memiliki konstanta yang disebut NAME, adalah ide yang baik untuk selalu membuatnya di class yang memiliki konstanta notification di dalamnya untuk menjaga notifikasi ini unik dan kurang rentan terhadap kesalahan manusia (seperti kesalahan ejaan).

Selanjutnya kita sampai pada fungsi pertama yang diperlukan, "getInstance()". Ini adalah fungsi pertama dan terpenting dari facade dan memungkinkan kelas dasar kita untuk mengambil instance dari facade, kemudian jalankan command start up (kita akan membahasnya):

Sekarang kita sampai pada fungsi yang mengontrol perutean notification ke controller kita, atau seperti PureMVC menyebutnya, command:

Sangat penting untuk tetap "registerCommand (STARTUP, StartupCommand);" karena tanpa ini, aplikasi tidak akan mulai. Semua itu pada dasarnya berarti bahwa facade akan meneruskan notification yang disebut "STARTUP" ke command yang disebut "StartupCommand". Seperti yang Anda lihat, saya punya dua lagi. Keduanya menunjuk ke controller lain yang disebut "DataCommand" dan keduanya notification adalah permintaan untuk mendapatkan data.

Kita sekarang sampai ke fungsi yang diminta terakhir tanpa facade, "startup()". Semua ini cukup dilakukan dengan memunculkan notification yang dialihkan ke "StartupCommand" melalui penangan "registerCommand":

Akhirnya, terakhir tetapi tidak berarti, kita memiliki fungsi akhir kita. Ini adalah fungsi opsional yang ingin saya tambahkan ketika saya bekerja dengan PureMVC karena memungkinkan saya untuk melihat peristiwa apa yang sedang dipecat dan dalam urutan apa. Fungsi ini hanya menimpa fungsi "sendNotification()" yang Anda gunakan dalam PureMVC untuk mengirim notification. Selain memberi tahu pengamat aplikasi, ini juga melacak peristiwa yang dapat Anda lihat:

Jadi itulah facade kita. Sebelum kita selesai, kita perlu menerapkan satu baris lagi ke kelas dasar kita. Baris ini hanya akan mendapatkan instance dari facade kita dan kemudian jalankan command start up:

Pastikan Anda meletakkan file ini di akhir apa pun yang dilakukan kelas dasar Anda. Misalnya, saya telah meletakkannya di bawah semua hal yang mengatur gradien background untuk aplikasi saya:

Sekarang kita siap untuk membuat tangan kita kotor.


Langkah 6: Memulai Command

Sebagaimana dibahas dalam Langkah 4, facade menangani semua perutean notifikasi ke command kita (controller). Command pertama yang harus kita buat adalah "StartupCommand". Jadi buat file baru yang disebut "StartupCommand.as" dalam "src/com/flashtuts/controller". Pastikan itu memperluas SimpleCommand dan mengimplementasikan ICommand. Seperti halnya facade kita, command kita tidak akan memiliki konstruktor, alih-alih menimpa fungsi publik dari kelas SimpleCommand yang disebut "execute()":

Anda akan melihat bahwa di dalam fungsi "execute()" kita, ada satu argumen yang disebut "notification". Kita tidak perlu menggunakan itu sebagai tahap ini, tetapi ini akan menjadi sesuatu yang kita gunakan dalam command kita yang lain. Karena command ini digunakan untuk memulai aplikasi kita, hal pertama yang harus dilakukan adalah mendaftarkan proxy (model):

dan kemudian mediator kita:

Jadi sekarang kita sudah siap start up command kita. Apa yang akan kita lakukan sekarang adalah membuat proxy kita dan kemudian menuju ke ApplicationMediator kita.


Langkah 7: Membuat Proxy

Sekarang setelah "Startup Command" kita mendaftarkan proxy Anda, kita perlu memastikan bahwa proxy tersebut ada. Jadi buat file baru yang disebut "DataProxy.as" dalam "src/com/flashtuts/model", dan pastikan itu memperluas Proxy dan mengimplementasikan IProxy. Sebagai permulaan, kita hanya akan memiliki dua fungsi di dalam proxy kita: konstruktor dan fungsi "get" untuk mengambil VO (value object):

Seperti yang Anda lihat, fungsi pertama dalam proxy kita adalah konstruktor di mana kita "super()" dua variabel: nama proxy (ditetapkan oleh konstanta NAME) dan VO. Kita perlu memberikan nama proxy karena ini akan memungkinkan kita untuk mengambil instance facade itu daripada membuat instance baru dan kehilangan data VO kita:

Fungsi kedua adalah fungsi get sederhana yang mengembalikan VO kita. Ini memungkinkan proxy, command, dan mediator untuk dengan mudah mengakses VO melalui proxy:

Sebelum kita selesai dengan proxy, kita perlu membuat VO, jadi buat kelas baru yang disebut "DataVO.as" dalam "src/com/flashtuts/model/vo". Kemudian kita akan menambahkan tiga variabel umum: "dataURL:String", "urlsArray:Array" dan "urlsDataArray:Array". Kita akan menetapkan "dataURL" untuk menunjuk ke file XML kita di "src/aset/xml" disebut "data.xml" dan untuk dua lainnya kita hanya akan membuatnya array kosong:

Ini adalah isi dari XML file:

Catatan: Anda akan melihat bahwa saya telah menghapus key API saya. Anda dapat dengan mudah menerapkan untuk satu dengan pergi ke situs dokumentasi Flickr API.

Sekarang bahwa kita punya proxy dan VO kita di tempat, kita akan perlu untuk mengatur mediator dan view kita.


Langkah 8: Membuat ApplicationMediator

"ApplicationMediator" adalah layer yang akan duduk di antara kita "StartupCommand" dan mediator view Anda. Sebagai aplikasi Anda semakin besar dan besar, tidak akan masuk akal untuk mendaftar semua mediator Anda sekaligus (misalnya, pada awal). Oleh karena itu, dengan memiliki induk mediator (ApplicationMediator) Anda dapat memiliki yang mendengarkan notification sedang dikirim di sekitar aplikasi Anda dan daftar mediator ketika mereka dibutuhkan. Karena mediator bertindak atas nama view, kadang-kadang data yang dibutuhkan untuk view mungkin tidak telah dibuka, namun karena itu tampaknya konyol untuk mendaftar mediator dan membuat view tanpa bisa lulus data.

Untuk mulainya, buat sebuah file baru yang disebut "ApplicationMediator.as" dalam "src/com/flashtuts/view" dan pastikan itu meluas Mediator dan mengimplementasikan IMediator. Di bawah ini adalah tampilan "ApplicationMediator" Anda agar terlihat seperti:

Seperti yang Anda lihat, mediator dimulai dengan teman lama "NAME" kita yang terus-menerus dan konstruktornya. Kembali ketika kita mendaftarkan mediator pada Langkah 6, kita melewati turunan panggung, kelas dasar kita ("App.as") sebagai argumen pertama. Di dalam konstruktor kita, kita mengawasi NAME dan argumen pertama, "viewComponent" karena viewComponent yang akan memungkinkan mediator kita menambahkan view mereka ke panggung, kelas dasar kita.

Sekarang adalah saat yang tepat untuk mulai membicarakan view kita. Dalam contoh saya, saya memiliki tiga: progress view, url selection view dan image view . Untuk setiap view kita memiliki mediator. Karena hal pertama yang ingin kita lakukan adalah memuat data dari file XML kita, sepertinya cocok untuk membuat view progres kita, kemudian mediator dan kemudian mendaftarkan mediator dengan "ApplicationMediator" kita.

Dengan memperluas Mediator kelas, ini memungkinkan kita untuk mengganti fungsi praktis yang disebut "onRegister()". Fungsi ini dipanggil ketika facade mendaftar mediator, sehingga sepertinya tempat terbaik untuk mendapatkan "ApplicationMediator" kita untuk mendaftarkan mediator untuk view progress kita:

Seperti yang Anda lihat, itu adalah style yang sama yang kita gunakan dalam "StartupCommand" dan kita meneruskan "viewComponent" ke mediator sehingga dapat menambahkan view progres ke panggung. Mediator aplikasi Anda akan terlihat seperti ini:


Langkah 9: Membuat Mediator dan View Progress Kita

Sekarang kita telah menetapkan "ApplicationMediator" kita untuk mendaftarkan "ProgressViewMediator" kita, pertama-tama kita mulai dengan membuat "ProgressView.as" kelas dalam "src/com/flashtuts/view/components". Ini adalah kelas yang hanya memperluas DisplayObject, dalam hal ini Sprite. Saya tidak akan membaca kode untuk view karena cukup standar untuk Actionscripter apa pun, tetapi saya akan berbicara tentang interaksi antara view dan mediatornya di bawah ini:

Karena mediator melakukan 'semua pembicaraan' untuk view, penting view dan mediator dapat saling menyampaikan informasi satu sama lain. Mediator dapat meneruskan informasi ke view karena mediator akan memiliki instance view yang dinyatakan di dalamnya, tetapi agar view menyampaikan informasi ke mediator (seperti pengguna mengklik tombol) kita bergantung pada acara (bukan untuk menjadi campur aduk dengan notifikasi) Kita hanya mendapatkan view kita untuk mengirim acara dan meminta mediator kita untuk mendengarkan acara tersebut. Oleh karena itu, mediator dapat menangani peristiwa dari view, mencerna informasi dan menjalankan sesuatu sesuai dengan itu. Kita menyatakan nama acara ini dengan menggunakan konstanta publik, jadi tampilan kita memiliki tiga acara: SHOW, HIDE, dan UPDATE (mirip dengan facade kita).

Catatan: penempatan nama acara dapat ditempatkan di dalam facade (file "ApplicationFacade.as") atau dalam view relatif. Saya merasa lebih mudah dan lebih bersih untuk membuatnya tetap dalam view, tetapi terserah Anda cara mana yang menurut Anda lebih baik bagi Anda.

Seperti yang dapat Anda katakan, saya telah membuat bidang teks yang akan digunakan untuk menampilkan persentase data yang dimuat melalui aplikasi kita.

Kita sekarang dapat beralih ke mediator, jadi buat file baru yang disebut "ProgressViewMediator.as" di "src/com/flashtuts/view" dan pastikan bahwa itu meluas Mediator dan mengimplementasikan IMediator. Ini akan mengikuti gaya yang sama dengan "ApplicationMediator" kita dan karenanya memiliki konstruktor yang memiliki satu argumen ("viewComponent"), sebuah konstanta publik bernama NAME dan teman kita yang diganti "onRegister()". Di bawah ini adalah tampilan mediator Anda:

Hal pertama yang perlu kita tambahkan pada view kita sebagai referensi ke mediator kita:

dan sekarang kita meminta mediator untuk menambahkan view kita ke "viewComponent" sehingga kita memiliki:

Sekarang setelah kita memiliki tulang-tulang sederhana dari mediator kita, kita perlu melihat apa yang akan dilakukan view kita. Nah, karena Anda mungkin dapat mengetahui dari konstanta, view kita akan memberi tahu pengguna berapa banyak yang telah dimuat sejauh ini, oleh karena itu ia memiliki konstanta publik SHOW, HIDE, dan UPDATE. Karena ini akan menjadi sesuatu yang akan bereaksi terhadap viee kita (seperti yang Anda tahu dari fungsi "show()", "hide()" dan "update()" dalam view kita), kita memerlukan mediator kita untuk menangani ini notification dan jalankan fungsi-fungsi ini sesuai.

Kita akan menambahkan dua fungsi baru ke mediator kita: "listNotificationInterests()" dan "handleNotification()". Fungsi pertama mengembalikan array dari semua notifikasi yang diminati mediator ini (inilah sebabnya mengapa sangat penting untuk menempel notifikasi ini dalam konstanta publik sehingga mudah untuk dirujuk). Yang terakhir sebenarnya melakukan sesuatu dengan mereka. Mediator ini hanya tertarik pada SHOW, HIDE, dan UPDATE sehingga kita menambahkan fungsi pertama dan menangani yang kedua:

Anda cukup melihat bahwa "handleNotification()" kita mengambil argumen dari sebuah INotifikasi, kelas yang berisi name dan body notification. Kita menggunakan pernyataan "switch" untuk menentukan notifikasi mana yang harus ditangani dan menjalankan fungsinya. Sederhana.

Selamat! Anda telah mencapai tonggak pertama! Bukankah kita sudah jauh? Uji file Anda dan Anda akan melihat yang berikut:


Tonggak sejarah

Sejauh ini kita telah membuat facade kita, menambahkan command, proxy, dan mediator aplikasi, kemudian membuat view dan menambahkannya ke aplikasi kita menggunakan facade view.


Langkah 10: Membuat View URL Kita

Sekarang kita ingin memuat beberapa data. Sebelum kita melakukan ini, mari kita buat view yang akan digunakan untuk menampilkan data ini. Saat kita memuat tiga umpan API Flickr, saya melihatnya cocok bahwa dalam view berikutnya, kita membuat tiga tombol yang memungkinkan pengguna mengklik, pada titik mana aplikasi kita akan mengembalikan gambar dari umpan yang sesuai. :Mari kita buat file baru yang disebut "URLsView.as" di "src.com/flashtuts/view/component" dan seperti "ProgressView" kita, ini akan memperluas kelas Sprite:

Saya tidak akan memandu Anda melalui kelas view ini, seperti semua kelas view lainnya. Mereka kelas AS3 dasar dan Anda harus terbiasa dengan mereka. Namun, seperti yang Anda lihat, saya membiarkan konstruktor keluar karena kita hanya ingin membuat tombol ketika data telah dimuat oleh "DataProxy" kita. Perhatikan juga konstanta publik di bagian atas kelas, terutama DATA_GET dan DATA_READY. Ini adalah peristiwa yang akan ditembakkan untuk memberi sinyal bahwa data perlu dimuat, kemudian bahwa data telah dimuat dan siap untuk dilihat.

Kita sekarang datang ke mediator view kita, jadi buat file yang disebut "URLsViewMediator.as" dalam "src/com/flashtuts/view" dan pastikan itu memperluas Mediator dan mengimplementasikan IMediator. Ini sama seperti semua mediator dalam aplikasi kita. Seperti halnya "ProgressViewMediator" kita, yang ini memiliki konstruktor tempat ia menggantikan NAME dan "viewComponent" dan juga fungsi "onRegister" yang diganti. Sekali lagi, seperti "ProgressViewMediator", kita menyatakan contoh baru dari view kita:

Kita sekarang perlu berpikir tentang apa yang akan dilakukan view kita. Yah, itu akan memungkinkan pengguna untuk mengklik tombol di dalamnya dan mengirim acara (itulah fungsi "handleContainerClick()" dalam view tidak). Kita perlu memberi tahu mediator kita untuk memberikan view kita diperdengarkan untuk acara itu dan menanganinya dengan sesuai:

Sekarang kita perlu memikirkan kapan mediator ini mulai digunakan. Ingat sebelumnya saya mengatakan bahwa tidak ada gunanya menjalankan mediator sebelum diperlukan? Baik mediator ini tidak akan berjalan sebelum kita membutuhkannya, jadi kita mengasumsikan bahwa ketika pertama kali terdaftar, data akan siap untuk view untuk membuat tombol, jadi kita memperbarui fungsi "onRegister()" kita kirim data ke view, tunjukkan view dan tambahkan ke panggung. Karena data kita disimpan dalam VO "DataProxy" kita, kita perlu menambahkan fungsi lain yang memungkinkan kita untuk mengakses instance proxy dari facade dan mengambil data dari VO:

Akhirnya, karena mediator ini akan dibuat ketika data siap, kita perlu memberi tahu "ProgressView" kita bahwa kita tidak lagi menginginkannya terlihat, jadi kita memunculkan notification yang disebut "ProgressView.HIDE" yang akan diambil oleh "ProgressViewMediator" dan akan memberi tahu "ProgressView" untuk menyembunyikan dirinya:

Sekali lagi, sebelum kita bisa melanjutkan, kita perlu memikirkan notifikasi mana yang perlu didengar oleh mediator ini. Karena kita akan menjadikan ini aplikasi yang dapat digunakan, tidak ada gunanya tidak membiarkan pengguna kembali dan memilih url umpan Flickr lainnya, jadi masuk akal untuk memungkinkan tampilan ini ditampilkan lagi. Di sinilah konstitusi publik SHOW berperan, (Anda akan melihat bahwa saya memiliki konvensi penamaan untuk semua notifikasi saya, ini adalah hal yang baik dan akan mempercepat perkembangan Anda). Seperti halnya dengan "ProgressViewMediator" kita, kita menambahkan fungsi "listNotificationInterests()" dan "handleNotification()" ke kelas kita:

Anda akan melihat bahwa saya telah menambahkan beberapa hal ke fungsi "handleContainerClick()". Semua fungsi ini hanya melewati indeks tombol yang ditekan (seperti 0, 1, 2 ...) dengan nama acara "URLsView.CLICKED". Kita akan menangani acara ini segera karena ini adalah acara yang akan kita gunakan untuk memuat umpan Flickr yang telah dipilih pengguna.

Sekarang tampilan kita siap untuk data kita, kita dapat melanjutkan ke proxy dan memuat beberapa XML. Whoop whoop!


Langkah 11: Memuat Data

Seperti yang saya sebutkan di atas, "ProgressViewMediator" kita mengeluarkan pemberitahuan yang disebut "URLsView.DATA_GET". Agar proxy kita menerima pemberitahuan ini, kita memerlukannya untuk pergi melalui facade kita dan kemudian sebuah perintah yang kemudian akan memanggil fungsi proxy itu. Pertama, kita perlu mendaftarkan perintah di dalam facade kita, jadi buka "ApplicationFacade.as" dan tambahkan fungsi "registerCommand" ke fungsi "initializeController()" seperti:

Anda akan melihat bahwa kita memberi tahu facade kita untuk menyampaikan pemberitahuan ini ke command yang disebut "DataCommand", ini adalah nama dari pengontrol yang akan kita buat untuk menangani pemberitahuan ini dan menjalankan proxy. Selanjutnya, buat file bernama "DataCommand.as" di "src/com/flashtuts/controller" dan itu akan perlu untuk memperluas SimpleCommand dan mengimplementasikan ICommand. Kelas kami tidak memerlukan konstruktor karena kita tertarik pada fungsi "execute()" (seperti "StartupCommand"):

Jika Anda memiliki mata yang tajam, Anda akan melihat bahwa kita sedang menghadapi teman kita kelas Perlindungan. Sama seperti dengan mediator, kelas ini memberi kita nama dan isi pemberitahuan, jadi kita menanganinya dengan cara yang sama - dengan saklar:

Karena kita ingin pemberitahuan itu memberi tahu proxy untuk memuat beberapa data, kita perlu mendapatkan instance facade dari proxy dan membuatnya untuk menjalankan fungsi. Kita menggunakan metode yang sama yang kita gunakan dalam mediator kita dan membuat fungsi get:

Terakhir, Anda akan melihat bahwa kita memanggil fungsi dalam proxy kita yang disebut "urlsDataGet()". Ini akan memuat data kita, jadi sebaiknya kita membuatnya. Buka "DataProxy.as" dan buat fungsi yang disebut "urlsDataGet()" yang akan memuat data, seperti:

Anda akan melihat bahwa kita menggunakan VO kita di sini dengan membuat fungsi get lagi sehingga kita dapat menggunakan dan menambahkan data ke dalamnya. Anda harus terbiasa dengan memuat data XML jadi saya tidak akan membahas fungsinya; Anda harus dapat melihat apa yang mereka lakukan. Anda mungkin bertanya-tanya mengapa saya menjalankan loop dari url dari data XML dan mengisi array dengan string kosong, Anda akan menemukan nanti...

Hal utama yang akan saya sebutkan adalah fungsi "handleProgress()" dan "handleURLsDataGetComplete()". Mereka berdua mengirim pemberitahuan ke aplikasi, yang pertama mengirimkan persentase dari beban data ke tampilan kemajuan kita (ingat saya mengatakan pemberitahuan terdiri dari nama dan badan?) Dan yang terakhir mengirimkan pemberitahuan ke aplikasi yang menyatakan bahwa kita pertama kali sedikit data telah selesai dimuat.

Akhirnya, karena kita hanya ingin "URLsViewMediator" dan "URLsView" kita terdaftar ketika data siap, kita perlu mengubah mediator aplikasi untuk mendaftarkan mediator ketika peristiwa itu dikirim:

Kode itu seharusnya tidak terlalu asing, tetapi seperti yang Anda lihat kita sedang mengatur pemberitahuan mana yang ingin kami dengarkan dan kemudian menangani mereka. Dalam hal ini mendaftarkan "URLsViewMediator" yang menjalankan fungsi "onRegister()" dan membangun tampilan.

Kita berada di batu mil berikutnya! Sekarang kita akan melihat bahwa aplikasi kita akan memuat data XML dan kemudian meneruskan data ini ke "URLsViewMediator" kita yang pada gilirannya akan memberi tahu "URLsView" untuk membuat beberapa tombol yang siap bagi pengguna untuk mengklik:


Tonggak sejarah

Beri diri Anda tepukan di punggung karena Anda telah meraih banyak hal! Sekarang Anda harus terbiasa dengan bagaimana notifikasi berperan besar dalam aplikasi dan bagaimana keseluruhan struktur disatukan oleh facade. Bit selanjutnya akan sangat mudah ...


Langkah 12: Menangani Acara Pengguna

Seperti yang saya jelaskan sebelumnya, sebuah tampilan akan mengirimkan peristiwa pengguna, seperti gerakan mouse atau dalam hal ini klik mouse. Acara ini kemudian akan diambil oleh mediatornya yang kemudian memutuskan apa yang harus dilakukan. Karena kita telah mengatur fungsi "handleContainerClick()" di dalam "URLsViewMediator" untuk mengirim indeks tombol, kita sekarang perlu menangani peristiwa itu dan memuat data berikutnya. Pertama, kita perlu membangun tampilan akhir dan mediator kita.

Inilah tampilan:

Semua tampilan ini dilakukan adalah mengambil data XML yang diambil dari Flickr API, membangun kisi-kisi gambar dan tombol kembali. Inilah mediatornya:

Sekali lagi, semua ini seharusnya tidak baru bagi Anda karena kita hanya membuat contoh dari tampilan kita, menambahkannya ke panggung, menambahkan pendengar ke tampilan kita (dan penanganan mereka) dan kemudian menetapkan notifikasi yang akan didengarkan dan bagaimana itu akan menangani mereka.

Untuk menangani pemberitahuan ini, kita memperbarui mediator aplikasi untuk terakhir kalinya dan mengaturnya untuk mendengarkan pemberitahuan "URLsView.CLICKED":

Satu hal yang perlu diperhatikan tentang penanganan acara ini: hal pertama yang dilakukan kode adalah memeriksa apakah mediator telah terdaftar. Jika tidak, register dan semua orang melanjutkannya. Alasannya, sebagai kebalikan dari registrasi ulang, kita akan membuat tombol kembali agar pengguna dapat kembali dan memilih umpan Flickr lainnya. Karena kita hanya perlu menunjukkan dan menyembunyikan tombol yang memungkinkan pengguna untuk memilih, tidak perlu untuk membangunnya kembali. Namun, karena pengguna kemudian akan berpotensi memilih umpan Flickr lain, kita perlu membangun kembali gambar kita. Untuk menyimpan duplikat kode kita, kita hanya membuat gambar ketika "ImagesViewMediator" telah menerima acara "ImagesView.DATA_READY".

Karena aplikasi kita mengirim "ImagesView.DATA_GET" setiap kali pengguna memilih API Flickr, kita perlu menyesuaikan "ApplicationFacade", "DataCommand" dan "DataProxy" ke a) menangani acara dan b) memuat data dan mengirim acara kembali.

Kita pertama kali mengedit "ApplicationFacade" menambahkan "registerCommand()" ke fungsi "initializeController()":

Kita kemudian memberi tahu "DataCommand" cara menanganinya (melalui proxy):

Akhirnya kita mengedit "DataProxy":

Anda akan melihat saya telah melakukan sedikit sihir Actionscript dalam fungsi "imagesDataGet()". Sekali lagi, ini hanya memuat beberapa XML, tidak ada yang istimewa tentang itu, tetapi itu hanya akan memuat data unik sekali. Ini adalah keindahan memiliki VO dan menggunakan indeks ketika tombol ditekan. Pada dasarnya apa yang terjadi adalah bahwa jika pengguna menekan tombol 2 (yang ke-3), itu akan memeriksa untuk melihat apakah indeks itu memiliki data terikat padanya (sebagai loop ketika url pertama kali dimuat menciptakan sebuah array dengan string kosong). Jika sudah, tidak perlu memuat data lagi, jika data dimuat dan menggunakan keindahan Kamus, kita dapat memasukkannya ke dalam array.

Akhirnya, proxy ini kemudian mendorong pemberitahuan "ImagesView.DATA_READY" kembali ke aplikasi kita dan ke tampilan kita di mana beberapa keajaiban akan terjadi ..


Anda telah melakukannya!

Ini aplikasi PureMVC pertama Anda! Anda harus tahu memiliki pemahaman tentang cara kerja PureMVC dan, paling berharga, kerangka sehingga ketika datang untuk mengembangkan lebih banyak aplikasi Anda dapat mengambil kode ini, mengolahnya atau hanya menggunakannya sebagai referensi.


Catatan kaki

PureMVC adalah alat yang hebat dan saya menggunakannya di banyak proyek, tetapi ada beberapa perbedaan utama antara menggunakannya dengan Actionscript 3.0 dan MXML. Saat Anda menggunakan MXML, Anda menambahkan tampilan menggunakan XML, seperti:

Flex secara otomatis membuat tampilan itu daripada membiarkan Anda menunda kreasi mereka. Oleh karena itu, ketika Anda siap untuk menyelam ke dalam PureMVC lagi, mereka telah membuat aplikasi kecil yang memberi tahu Anda bagaimana Anda dapat menggunakan instantiation yang ditangguhkan.

Saya harap Anda menikmati mengikuti tutorial ini, jangan ragu untuk meninggalkan pertanyaan atau umpan balik di komentar!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.