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

Memanfaatkan Pabrik Widget UI jQuery

by
Difficulty:IntermediateLength:LongLanguages:

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

Untuk waktu yang lama, satu-satunya cara untuk menulis kontrol kustom di jQuery adalah untuk memperpanjang ruang nama $.fn. Ini berfungsi dengan baik untuk widget sederhana, namun, saat Anda mulai membuat widget yang lebih berstatus, ia akan menjadi tidak praktis. Untuk membantu proses pembuatan widget, tim UI jQuery memperkenalkan Pabrik Widget, yang menghapus sebagian besar boilerplate yang biasanya terkait dengan mengelola widget.

Pabrik widget, bagian dari jQuery UI Core, menyediakan cara berorientasi objek untuk mengelola siklus hidup widget. Kegiatan siklus hidup ini meliputi:

  • Membuat dan menghancurkan widget
  • Mengubah opsi widget
  • Membuat panggilan "super" dalam widget subkelas
  • Notifikasi event

Mari jelajahi API ini, karena kita membuat widget diagram garis peluru sederhana.


Bullet Chart Widget

Sebelum kita membangun widget ini, mari kita memahami beberapa blok bangunan dari widget. Bullet Chart adalah konsep yang diperkenalkan oleh Stephen Few sebagai variasi pada bagan batang.

Bullet Chart

Bagan ini terdiri dari satu set bar dan spidol dilapis satu sama lain untuk menunjukkan kinerja relatif. Ada skala quantiative untuk menunjukkan kisaran nilai yang sebenarnya. Dengan menumpuk palang dan penanda dengan cara ini, lebih banyak informasi dapat disampaikan tanpa mengorbankan keterbacaan. Legenda menceritakan jenis informasi yang kita rencanakan.

HTML untuk bagan ini terlihat seperti ini:

Widget kita, yang akan disebut jquery.bulletchart, akan secara dinamis menghasilkan HTML ini dari data yang disediakan. Widget terakhir dapat dilihat di demo page, yang dapat Anda unduh dari GitHub. Panggilan untuk membuat widget akan terlihat seperti ini:

Semua nilai dalam persentase. Opsi size dapat digunakan ketika Anda ingin memiliki beberapa grafik peluru yang ditempatkan bersebelahan dengan ukuran relatif. Opsi ticks digunakan untuk menempatkan label pada skala. Marker dan bar ditetapkan sebagai array literal objek dengan properti title, value dan css.


Membangun Widget

Sekarang kita tahu struktur widget, mari kita turun untuk membangunnya. Widget dibuat dengan memanggil $.widget() dengan nama widget dan objek yang berisi metode instan. API yang tepat terlihat seperti:

jQuery.widget(name[, base], prototype)

Untuk saat ini, kita akan bekerja hanya dengan nama dan argumen prototipe. Untuk bulletchart, rintisan widget dasar terlihat seperti berikut:

Disarankan agar Anda selalu menamai nama-nama widget Anda. Dalam hal ini, kita menggunakan 'nt.bulletchart'. Semua widget jQuery UI berada di bawah 'ui' namespace. Meskipun kita memberi nama pada widget, panggilan untuk membuat widget pada elemen tidak termasuk namespace. Jadi, untuk membuat grafik peluru, kita cukup memanggil $('#elem').bulletchart().

Properti instan ditentukan mengikuti nama widget. Dengan konvensi, semua metode pribadi dari widget harus diawali dengan '_'. Ada beberapa properti khusus yang diharapkan oleh pabrik widget. Ini termasuk options, _create, _destroy dan _setOption.

  • options: Ini adalah opsi default untuk widget
  • _create: Pabrik widget memanggil metode ini saat pertama kali widget dibuat. Ini digunakan untuk membuat DOM awal dan melampirkan penanganan kejadian apa pun.
  • _init: Setelah panggilan ke _create, pabrik memanggil _init. Ini biasanya digunakan untuk mengatur ulang widget ke status awal. Setelah widget dibuat, memanggil konstruktor widget polos, misalnya: $.bulletchart(), juga akan mengatur ulang widget. Ini secara internal memanggil _init.
  • _setOption: Disebut ketika Anda mengatur opsi pada widget, dengan panggilan seperti: $('#elem').bulletchart('option', 'size', 100). Nanti kita akan melihat cara lain untuk mengatur opsi pada widget.

Membuat DOM awal dengan _create

Widget bulletchart kita menjadi hidup dalam metode _create. Di sinilah kita membangun struktur dasar untuk bagan. Fungsi _create dapat dilihat di bawah ini. Anda akan melihat bahwa tidak banyak yang terjadi di sini selain membuat wadah tingkat atas. Pekerjaan sebenarnya menciptakan DOM untuk bar, penanda dan kutu terjadi dalam metode _setOption. Ini mungkin tampak agak kontra-intuitif untuk memulai, tetapi ada alasan yang sah untuk itu.

Perhatikan bahwa bar, spidol, dan centang juga dapat diubah dengan menyetel opsi pada widget. Jika kita menyimpan kode untuk konstruksinya di dalam _create, kita akan mengulangi diri kita di dalam _setOption. Dengan memindahkan kode ke _setOption dan menjalankannya dari _create menghapus duplikasi dan juga memusatkan konstruksi.

Selain itu, kode di atas menunjukkan Anda cara lain untuk mengatur opsi pada widget. Dengan metode _setOptions (perhatikan bentuk jamak), Anda dapat mengatur opsi mutiple sekaligus. Secara internal, pabrik akan melakukan panggilan individual pada _setOption untuk masing-masing opsi.

Metode _setOption

Untuk grafik bullet, metode _setOption adalah pekerja keras. Ini menangani pembuatan marka, bar dan kutu dan juga setiap perubahan yang dilakukan pada properti ini. Ia bekerja dengan membersihkan elemen apa pun yang ada dan menciptakannya berdasarkan nilai baru.

Metode _setOption menerima kunci pilihan dan nilai sebagai argumen. Kuncinya adalah nama opsi, yang harus sesuai dengan salah satu kunci dalam opsi default. Misalnya, untuk mengubah bilah di widget, Anda akan membuat panggilan berikut:

Metode _setOption untuk bulletchart tampak seperti ini:

Di sini, kita membuat hash sederhana dari opsi-nama ke fungsi yang sesuai. Dengan menggunakan hash ini, kita hanya bekerja pada opsi yang valid dan diam-diam mengabaikan yang tidak valid. Ada dua hal lagi yang terjadi di sini: panggilan ke _super() dan mengaktifkan opsi mengubah acara. Kita akan melihatnya nanti di artikel ini.

Untuk setiap opsi yang mengubah DOM, kami memanggil metode pembantu tertentu. Metode pembantu, createBars, createMarkers, dan createTickBar ditentukan di luar properti instance widget. Ini karena mereka sama untuk semua widget dan tidak perlu dibuat secara individual untuk setiap contoh widget.

Semua fungsi ciptaan beroperasi dalam persentase. Ini memastikan bahwa bagan akan berubah dengan baik saat Anda mengubah ukuran elemen yang mengandung.

Opsi Default

Tanpa opsi yang ditentukan saat membuat widget, default akan ikut bermain. Ini adalah peran properti options. Untuk bulletchart, opsi default terlihat seperti ini:

Kita mulai dengan ukuran 100%, tidak ada bar dan spidol dan dengan kutu ditempatkan setiap 10%. Dengan pengaturan default ini, grafik bullet akan terlihat seperti:

Default Bullet Chart

Sejauh ini, kita telah melihat cara membuat widget menggunakan _create dan memperbaruinya menggunakan _setOption. Ada satu metode siklus hidup lainnya, yang akan dipanggil saat Anda menghancurkan widget. Ini adalah metode _destroy. Ketika Anda memanggil $('#elem').bulletchart('destroy'), pabrik widget secara internal memanggil _destroy pada instance widget Anda. Widget bertanggung jawab untuk menghapus semua yang dimasukkan ke DOM. Ini dapat mencakup kelas dan elemen DOM lainnya yang ditambahkan dalam metode _create. Ini juga merupakan tempat yang baik untuk melepas penangan kejadian apa pun. _destroy harus menjadi kebalikan dari metode _create.

Untuk widget grafik bulet, _destroy cukup sederhana:


Subclassing, Event, dan Lainnya

Widget bulletchart kita hampir lengkap, kecuali satu fitur terakhir: legend. Legenda ini sangat penting, karena itu akan memberi arti lebih pada penanda dan palang. Di bagian ini kita akan menambahkan legenda di sebelah bagan.

Daripada menambahkan fitur ini langsung ke widget bulletchart, kita akan membuat subkelas, bulletchart2, yang akan memiliki dukungan legenda. Dalam prosesnya, kita juga akan melihat beberapa fitur menarik dari warisan Pabrik Widget.

Menambahkan Legenda

Chart with Legend

Pabrik Widget mendukung subkelas widget untuk membuat versi yang lebih khusus. Sebelumnya di artikel, kita melihat API untuk $.widget(), yang memiliki tiga argumen:

jQuery.widget(name[, base], prototype)

Parameter kedua memungkinkan kita memilih kelas dasar untuk widget. Widget bulletchart2, yang subclasses bulletchart, akan memiliki tanda tangan berikut:

Ada beberapa hal menarik yang perlu diperhatikan di sini:

  • Kita terus menamai nama widget: nt.bulletchart2.
  • Pabrik widget secara otomatis menempatkan widget di bawah $.nt namespace. Jadi, untuk referensi widget sebelumnya, kita menggunakan $.nt.bulletchart. Demikian pula jika kita ke subkelas salah satu widget jQuery UI standar, kita akan mereferensikannya dengan $.ui.widget-name
  • The widgetEventPrefix adalah properti baru yang belum pernah kita lihat sebelumnya. Kita akan membahasnya ketika kita berbicara tentang peristiwa. Sisa dari properti instan harus familiar.

Karena kita menambahkan lebih banyak elemen DOM dengan legenda, kita harus mengganti metode _create. Ini juga berarti bahwa kita perlu mengganti _destroy, agar menjadi simetris.

Di sini, sekali lagi, kita melihat pola yang sama seperti metode _create sebelumnya. Kita membuat wadah untuk legenda dan kemudian memanggil _setOption untuk membangun sisa legenda. Karena kita mengesampingkan _create, kita perlu memastikan bahwa kita memanggil basis _create. Kita melakukan ini dengan panggilan ke _super. Demikian pula, di _destroy, kita juga melihat panggilan ke _super.

Sekarang Anda mungkin bertanya-tanya: bagaimana caranya widget yang tahu metode super mana untuk memanggil dengan pemanggilan _super sederhana tanpa pengecualian? Kecerdasan untuk itu terletak di perut pabrik widget. Saat widget digolongkan, pabrik menyiapkan referensi _super secara berbeda untuk masing-masing fungsi instance. Jadi, ketika Anda memanggil _super dari metode instance Anda, itu selalu menunjuk ke metode _super yang benar.

Pemberitahuan Event

Karena bulletchart mendukung perubahan penanda dan palang, legenda harus selaras dengan perubahan tersebut. Selain itu, kita juga akan mendukung toggling visibilitas penanda dan palang dengan mengklik item legenda. Ini menjadi berguna ketika Anda memiliki beberapa penanda dan bilah. Dengan menyembunyikan beberapa elemen, Anda dapat melihat yang lain dengan lebih jelas.

Untuk mendukung penyelarasan legenda dengan perubahan pada penanda dan bilah, widget bulletchart2 harus mendengarkan setiap perubahan yang terjadi pada properti tersebut. Bulletchart dasar sudah mengaktifkan acara perubahan setiap kali opsi-opsi berubah. Ini adalah potongan yang sesuai dari widget dasar:

Setiap kali opsi diatur, peristiwa setOption dipecat. Data peristiwa berisi nilai sebelumnya dan baru untuk opsi yang diubah.

Dengan mendengarkan acara ini di widget subkelas, Anda dapat mengetahui kapan penanda atau bilah berubah. Widget bulletchart2 berlangganan acara ini dalam metode _create. Berlangganan acara widget dicapai dengan panggilan ke this.element.on(). this.element menunjuk ke elemen jQuery di mana widget itu dipakai. Karena acara tersebut akan diaktifkan pada elemen, langganan acara kita perlu terjadi.

Perhatikan nama acara yang digunakan untuk berlangganan: 'bulletchart:setoption'. Sebagai kebijakan, pabrik widget melampirkan awalan acara untuk acara yang dipecat dari widget. Secara default, awalan ini adalah nama dari widget, tetapi ini dapat dengan mudah diubah dengan properti widgetEventPrefix. Widget basis bulletchart mengubah ini menjadi 'bulletchart:'.

Kita juga perlu berlangganan ke 'click' acara pada item legenda untuk menyembunyikan/menampilkan penanda/bilah terkait. Kita melakukan ini dengan metode _on. Metode ini mengambil hash tanda acara ke fungsi handler. Konteks handler (this) diatur dengan benar ke instance widget. Salah satu kemudahan lain dengan _on adalah bahwa pabrik widget secara otomatis akan menghapus peristiwa-peristiwa yang dihancurkan.


Tips Lebih

Pabrik Widget mengemas beberapa barang bagus yang harus Anda ketahui.

Mereferensikan turunan widget

Sejauh ini, kita hanya melihat satu cara memanggil metode di widget. Kita melakukan ini dengan $('#elem).bulletchart('method-name'). Namun, ini hanya memungkinkan memanggil metode publik seperti 'opsi', 'menghancurkan', 'on', 'off'. Jika Anda ingin memohon metode tersebut langsung pada contoh widget, ada cara untuk melakukan itu. Pabrik widget menempel contoh widget ke objek data() elemen. Anda bisa mendapatkan contoh ini seperti:

Selain itu, jika Anda ingin mendapatkan semua widget bulletchart di halaman, ada juga pemilih untuk itu:

Beberapa metode khusus

Ada beberapa metode khusus yang harus Anda ketahui, yang jarang digunakan: _getCreateEventData() dan _getCreateOptions(). Yang pertama digunakan untuk melampirkan data acara untuk acara 'buat' yang diaktifkan setelah menyelesaikan panggilan ke _create.

_getCreateOptions adalah untuk melampirkan opsi default tambahan untuk widget atau menimpa yang sudah ada. Opsi yang disediakan pengguna mengganti opsi yang dikembalikan oleh metode ini, yang pada gilirannya mengesampingkan opsi widget default.


Ringkasan

Sudah selesai! Jika Anda ingin menjelajahi lebih jauh, referensi di bawah ini seharusnya melayani Anda dengan baik. Tentu saja, sumber informasi terbaik akan selalu menjadi sumber-kode, itu sendiri. Saya akan mendorong membaca sumber jquery.ui.widget di GitHub.

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.