Yahoo! User Interface Blog (YUIBlog)

YUIConf 2011 Pendaftaran Early Bird Kini Terbuka

September 30, 2011 pada 09:31 oleh Jenny Donnelly | Dalam Pengembangan , Acara YUI | 4 Komentar

Awal-burung pendaftaran untuk YUIConf 2011 adalah sekarang terbuka di Eventbrite! tahun Acara ini akan diselenggarakan November 2-4 di Yahoo! kampus Amerika Besar. Kami sangat gembira untuk membawa Anda satu hari penuh lokakarya pelatihan (Rabu) diikuti oleh dua hari penuh pembicaraan teknologi tentang YUI (Thu / Fri). Pendaftaran untuk konferensi biaya $ 75 tahun ini, dengan tingkat awal-burung dari $ 50. Pendaftaran untuk lokakarya akan terpisah dari konferensi dan rincian yang datang segera.

Kami adalah lapisan sibuk sampai topik yang besar, termasuk:

• YUI komponen penyelaman dalam, termasuk Dial dan Kalender
• YUI di lingkungan mobilitas
• Pengujian dengan YUI
• Dunia nyata migrasi cerita
• dan masih banyak lagi!

Seperti biasa, sesi konferensi akan video-taped dan tersedia di YUI Theater dan kami saluran YouTube untuk dinikmati semua.

Harapan untuk melihat anda di sana!

(PENTING! internal Yahoos silahkan mendaftar untuk tiket Karyawan Yahoo! dan memberikan alamat email kantor Anda.)

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI 3.4.1 sekarang tinggal

September 27, 2011 at 2:37 am by Allen Rabinovich | Dalam Pengembangan | 8 Komentar

YUI 3.4.1 rilis siklus pendek sekarang tersedia di CDN dan untuk Download , lebih dari seminggu awal! Berikut adalah beberapa highlights pada rilis ini:

• Lebih dari 150 perbaikan bug untuk Pengendali , Panel , DataTable , Kalender , dan beberapa modul lainnya.
• Bug perbaikan untuk Y.substitute () oleh YUI kontributor Satyam .
• Bahasa Jepang dukungan untuk Kalender dan Konsol , milik YUI kontributor Ryuichi Okumura .
• Miscellaneous tweaks ke dokumentasi dan contoh.

Anda dapat juga dapat memeriksa ringkasan dari semua perubahan dicatat dalam file komponen sejarah untuk YUI 3.4.1 serta daftar lengkap tiket dibahas selama YUI 3.4.1 pengembangan . Seperti biasa, kami sangat menghargai bahwa Anda mengajukan saran yang mungkin Anda miliki atau cacat Anda mungkin menemukan dalam database tiket kami. Umpan balik untuk YUI 3.4.1 dapat dimasukkan dalam database 3 tiket YUI .

Kami juga ingin mengumumkan bahwa dalam rilis berikutnya dari YUI, DataType.Date, DataType.Number dan DataType.XML akan usang yang mendukung Y.Date, Y.Number, dan Y.XML, masing-masing. Kompatibilitas mundur akan dipertahankan untuk satu rilis, untuk memberikan setiap orang kesempatan untuk beralih.

Oh, dan satu hal lagi: kita baik dalam perjalanan kami di migrasi konten Theater YUI ke YouTube . Sebagai permulaan, periksa kuliah seri Douglas Crockford "Crockford JavaScript" - lengkap dengan teks!

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

Pilih YUI di Final Sumber Penghargaan Terbuka

September 26, 2011 pukul 09:21 oleh Jenny Donnelly | Dalam Miscellany | 1 Komentar

Terima kasih kepada semua orang yang dinominasikan untuk YUI Awards Penerbitan Sumber Packt Open. Pilih Sekarang untuk YUI sebagai perpustakaan favorit Anda JavaScript!

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI 3.4.1 PR1 Sekarang Tersedia Di CDN

September 22, 2011 pukul 01:35 oleh Jenny Donnelly | Dalam Pembangunan | 1 Comment

YUI 3.4.1 PR1 sekarang tersedia untuk pengujian masyarakat dan umpan balik. Ini tersedia pada Yahoo! CDN di http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , dan Anda dapat melihat perubahan masuk ke 3.4.1 dari daftar tiket diperiksa di untuk rilis .

Rilis 3.4.1 akan rilis bug-fix lebih kecil dengan siklus pengembangan yang singkat, dijadwalkan untuk go-live pada bulan Oktober-5. Silahkan bug file dan regresi dalam database tiket pada YUILibrary.com oleh pagi hari Senin, 26 September sehingga kami dapat memastikan masalah penting dibahas sebelum rilis umum. Jika tidak ada masalah mendesak dilaporkan, kami akan merilis 3.4.1 sejak 27 September.

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

YUI: Buka Jam Kam 15 Sep

September 12, 2011 pukul 09:58 oleh Lukas Smith | Dalam Pengembangan , Jam Buka | 2 Komentar

Satyam yang MakeNode ekstensi

Jika Anda tidak tahu Satyam , Anda harus baru ke YUI. Dia menjadi pilar dari komunitas YUI sejak masa awal YUI 2. Artikel-artikelnya di YUIBlog adalah beberapa yang paling membaca dan disebut sumber untuk "bagaimana untuk benar-benar menggunakan perpustakaan" konten gaya. Jika Anda melihat bahwa Satyam menulisnya, itu layak dibaca, dan kemungkinan besar, ulang membaca dan bookmark.

Pada bulan Juli, ia diposting artikel bagus pada MakeNode ekstensi Widget yang bertujuan untuk menyederhanakan beberapa pola umum yang digunakan ketika membangun Widget, dan membuatnya lebih mudah untuk menghindari salah langkah umum. Modul ini sejak itu telah ditambahkan ke Galeri dan hanya sebelumnya hari ini, ia diposting update ke artikel aslinya.

Itu yang kita akan bicarakan. Fitur, sejarah, dan penalaran. Jika Anda telah menggunakan infrastruktur komponen, dan khususnya, Y.Widget , Anda mungkin menemui setidaknya beberapa rintangan Satyam berangkat untuk mengatasi dengan MakeNode . Ini akan menjadi festival praktik terbaik, sehingga membawa notepad Anda, dan pengalaman Anda sendiri untuk berbagi.

Waktu & Detail

Kami akan online pada Kamis 10:00-11:00 PDT.

Join Rapat

Rekaman

Rekaman ini tersedia di YUILibrary saluran YouTube .

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

Kirim Talk untuk YUIConf 2011

September 12, 2011 pada 15:48 oleh Jenny Donnelly | Dalam Pengembangan , Acara YUI | Tidak ada Komentar

Pamerkan kode Anda telah bekerja pada atau berbagi sesuatu yang telah Anda pelajari saat bekerja dengan YUI! Menyerahkan proposal Anda untuk yui-peristiwa (at) yahoo-inc.com oleh Jumat, September 23, 2011. Pastikan untuk menyertakan:

• Judul
• Deskripsi
• Ditujukan penonton
• Nama Anda
• Sebuah bio singkat

YUIConf 2011 akan diselenggarakan November 3 dan 4 di Yahoo! Santa Clara, CA kampus. Presentasi Anda harus berlangsung sekitar 45 menit. Kami akan memiliki hingga 15 menit setelah presentasi Anda untuk Q & A. Posting pertanyaan di komentar, atau email kami langsung di yui-peristiwa (at) yahoo-inc.com.

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!

Diperbarui: The "MakeNode" Widget Perpanjangan

September 12, 2011 pada 15:18 oleh Satyam | Dalam Pengembangan , YUI 3 Galeri | 8 Komentar

Catatan Editor: Artikel ini aslinya diterbitkan awal tahun ini . Sejak itu, modul MakeNode telah diterbitkan hingga Galeri YUI dan menerima beberapa perangkat tambahan. Artikel ini mencerminkan semua perubahan terbaru untuk MakeNode.

Pada artikel saya sebelumnya, Sebuah Resep untuk Aplikasi 3 YUI , saya menunjukkan cara untuk menggunakan Y.substitute sebagai pengolah template yang sangat dasar. Idenya mengambil kehidupan dari sana, dengan saran dari orang-orang di # yui IRC channel, dan saya membuat sebuah ekstensi Widget yang tersedia di Galeri YUI, yang disebut MakeNode . MakeNode bukan prosesor template generik dan tidak dimaksudkan sebagai satu. Di sisi lain, terintegrasi dengan YUI Widget kelas dasar, termasuk pembantu className dan acara dan internasionalisasi. Pada artikel ini, saya akan mengambil Spinner contoh dan memodifikasi untuk ikuti panduan dari artikel saya sebelumnya dan menggunakan MakeNode. MakeNode tersedia sebagai komponen galeri serta dimodifikasi Spinner komponen dan contoh yang akan digunakan dalam artikel ini .

Memperluas komponen Anda

Untuk memuat MakeNode Anda perlu menyertakan modul dalam Anda YUI().use() pernyataan menggunakan nama 'gallery-makenode' atau, jika mendefinisikan modul melalui YUI.add() , daftar sebagai requires array. Kemudian, untuk memperluas widget Anda, Anda daftar di argumen ketiga untuk Y.Base.create() , seperti ini:

  Y.Spinner = Y.Base.create (
      'Spinner',
      Y.Widget,
      [Y.MakeNode],
      {
         / / Contoh anggota ...
      },
      {
          / / Statis anggota
      }
 ); 

Anda dapat menambahkan MakeNode bersama sejumlah ekstensi cocok untuk Widget, seperti WidgetParent, WidgetChild, WidgetStdMode, dll MakeNode menambahkan dua metode yang dilindungi untuk digunakan oleh pengembang, _makeNode dan _locateNodes, dan ini akan dibaca dari beberapa sifat statis, jika ditemukan .

Semua anggota ekstensi ini baik yang dilindungi maupun swasta karena mereka dimaksudkan untuk digunakan oleh pengembang komponen dan bukan oleh pelaksana menggunakan komponen-komponen yang harus tidak terganggu dengan mereka. Jangan lupa untuk memeriksa "Tampilkan Dilindungi" pilihan ketika melihat dokumentasi API .

Mendefinisikan template

Hal pertama yang biasanya akan dilakukan adalah mendefinisikan template untuk komponen Anda. Untuk Spinner ini, template kita akan menjadi:

  _TEMPLATE: [
     '<input Type="text" title="{s input}" class="{c input}">',
     '<button Type="button" title="{s up}" class="{c up}"> </ tombol>',
     '<button Type="button" title="{s down}" class="{c down}"> </ tombol>'
 ]. Join ('\ n'), 

Default template biasanya akan diberi nama _TEMPLATE dan menyatakan sepanjang sifat statis lain dari kelas, seperti ATTRS . MakeNode akan menggunakan template ini jika tidak lain secara eksplisit disediakan. Template dibuat dari HTML biasa ditambah serangkaian placeholder diapit oleh kurung keriting, masing-masing terbuat dari satu karakter (kode pengolahan) dan diikuti oleh satu atau lebih argumen. Penampung dan apa yang mereka produksi adalah:

• {@ attributeName} konfigurasi nilai atribut

• {p propertyName} contoh nilai properti

• {m methodName arg1 arg2 ….} mengembalikan nilai dari metode yang diberikan. Kode pengolahan diikuti dengan nama metode dan sejumlah argumen dipisahkan oleh spasi.

• {c classNameKey} CSS className dihasilkan dari _CLASS_NAMES properti statis (lihat The _CLASS_NAMES properti bagian bawah)

• {s key} string dari strings atribut, menggunakan key sebagai atribut sub-.

• {? condition valueIfTrue valueIfFalse } banyak seperti ?: operator JavaScript, mengevaluasi ke valueIfTrue jika kondisi truish, valueIfFalse sebaliknya.

• {1 condition valueIfOne valueIfMore } digunakan untuk memproduksi tunggal / jamak kata berdasarkan nilai kondisi.

• {} nilai lain akan ditangani seperti Y.substitute tidak.

Misalnya, {@ value} akan menerjemahkan untuk this.get('value') sedangkan {p value} diterjemahkan menjadi this['value'] .

Ketika placeholder memiliki argumen, seperti {m} , {?} dan {1} , string harus diapit tanda kutip ganda. Bilangan, boolean dan null (semua kuotasi) akan diurai dengan jenis yang tepat data. Penampung dapat dibuat bersarang. Para {?} dan {1} penampung biasanya akan berisi placeholder bersarang untuk kondisi tersebut dan sangat mungkin untuk nilai-nilai mereka, misalnya:

  {P} {1 qty {p} qty "unit" "unit"} 

Jika properti qty adalah 1, itu akan mengevaluasi untuk "1 unit" , selama 2 atau lebih itu akan kembali "2 units" dan sebagainya. Sebuah versi yang lebih rumit berurusan dengan nol akan menjadi:

  {?  {P} qty "{p} {1 qty {p} qty" unit "" unit "}" "none"} 

Perhatikan bahwa hasil dari pengolahan placeholder dalam, jika string, harus diapit menetapkan sendiri tanda kutip.

Untuk memasukkan kutip ganda dalam string yang dikutip, gunakan \\" , backslash ganda dituntut karena JavaScript akan menafsirkan satu saja dan membuang itu sebelum sampai ke MakeNode Hanya tanda kutip ganda dibolehkan;. MakeNode tidak menggunakan eval() sehingga parser terbatas namun aman Apa saja namun angka,. null , boolean dan string yang dikutip ganda akan diabaikan.

Para {?} placeholder juga berguna untuk digunakan dengan kotak centang dan tombol radio. Hal ini dapat digunakan untuk menghasilkan string "checked" tergantung pada nilai kebenaran dari kode instruksi pemrosesan yang berikut. Dengan demikian, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> akan menghasilkan kotak centang ditandai jika getLength metode apapun tapi kembali nol.

Untuk {c} placeholder, kita perlu memiliki _CLASS_NAMES properti yang didefinisikan.

Placeholder lebih lanjut dapat ditambahkan ke MakeNode dengan menambahkan mereka ke dalam _templateHandlers hash.

Properti _CLASS_NAMES

Seiring dengan ATTRS dan _TEMPLATE sifat statis, kita dapat mendefinisikan _CLASS_NAMES properti statis yang menunjuk ke array string. Masing-masing string akan digunakan untuk menghasilkan sebuah className. Jadi _CLASS_NAMES: ['input'] akan menghasilkan className "yui3-spinner-input" . Mereka classnames disimpan dalam sebuah contoh properti this._classNames . Para {c input} placeholder dalam template di atas akan digantikan oleh "yui3-spinner-input" . Saya sebut string tercantum dalam _CLASS_NAMES , seperti 'input' , "kunci className" karena mereka dapat digunakan sebagai kunci untuk merujuk pada className aktual atau unsur-unsur yang mengandung mereka classnames, seperti yang akan kita lihat nanti.

Anda dapat menggunakan _CLASS_NAMES properti untuk menghasilkan sejumlah classnames, apakah Anda menggunakannya dalam template atau tidak. Anda masih dapat menjangkau mereka classnames ekstra dari dalam this._classNames . ClassName ini dihasilkan dengan menggunakan yui3 awalan diikuti dengan nilai dari NAME properti statis berubah huruf kecil, dan kemudian string yang diberikan dalam _CLASS_NAMES (yang terakhir ini tidak akan berubah huruf kecil), semua dipisahkan dengan tanda hubung. Para _classNames hash juga akan berisi classnames untuk boundingBox dan contentBox , yang pertama di bawah "boundingBox" kunci dan kedua di bawah "content" kunci. Widget memberikan ke boundingBox yang classnames berasal dari nilai-nilai dari NAME properti dari masing-masing kelas dalam rantai warisan, dimulai dengan yui3-widget . Toko MakeNode ke this._classNames hanya className paling atas untuk boundingBox .

Jika modul WidgetStdMod load, MakeNode juga akan menghasilkan masukan untuk perusahaan HEADER , BODY dan FOOTER bagian dengan kunci-kunci yang sama, yang juga merupakan konstanta yang didefinisikan dalam modul yang sama.

Jika komponen adalah beberapa tingkat dari Widget, seperti SuperSpecialSpinner mewarisi dari SuperSpinner yang mewarisi dari Spinner yang mewarisi dari Widget, dan jika salah satu atau semua dari mereka memiliki _CLASS_NAMES sifat didefinisikan, MakeNode akan menghasilkan classnames untuk mereka semua dan menyimpannya dalam this._classNames . Anda tidak perlu untuk menyertakan setiap tingkat nama sudah dideklarasikan pada tingkat sebelumnya. Bahkan, lebih baik bahwa Anda tidak sejak classnames dihasilkan pada setiap level akan menggunakan nilai dari NAME milik tingkat itu. Dengan demikian, dalam SuperSpecialSpinner , {c input} masih akan menghasilkan "yui3-spinner-input" dan bukan "yui3-superspecialspinner-input" dan sehingga akan menjaga file CSS masih berlaku.

Para {s} placeholder

Widget memiliki strings atribut konfigurasi ditetapkan, meskipun tidak diinisialisasi dengan nilai apapun. Atribut ini dimaksudkan untuk menahan string yang terlihat (atau, melalui pembaca layar, membaca untuk) pengguna. Adalah penting bahwa Anda tidak termasuk string terlihat langsung dalam template. Ini bukan persyaratan MakeNode - itu tidak pernah menjadi ide yang baik sama sekali. Semua string yang akan dilihat oleh atau membaca kepada pengguna harus selalu ditempatkan dalam strings atribut. Para strings atribut berisi hash mana setiap teks individu terletak oleh kunci. Komponen Spinner memiliki string berikut, yang dapat Anda lihat digunakan dalam template di atas.

  string: {
     Nilai: {
         input: "Tekan panah atas / bawah tombol untuk kenaikan kecil, halaman ke atas / bawah untuk kenaikan besar.",
         up: "Selisih",
         ke bawah: "Pengurangan"
     }
 }, 

Bagian terbaik dari hal ini adalah bahwa komponen Anda dapat diterjemahkan ke bahasa lain dengan sangat mudah oleh pengembang menggunakan komponen Anda. Ketika membuat sebuah instance dari Spinner, mungkin Anda lakukan:

  var = mySpinner baru Spinner ({string: Y.Intl.get ('pemintal')}); 

Mengatur atribut konfigurasi strings dengan cara ini menggantikan default strings nilai-nilai dengan mereka yang berasal dari file sumber daya bahasa menggunakan bahasa yang ditetapkan sebelumnya. Para {s} placeholder mengakses string disimpan dalam strings atribut, baik yang standar atau yang diterjemahkan, jika diatur. Para {s xxxx} placeholder hampir seperti menggunakan {@ strings.xxxx} kecuali bahwa string pengganti lokal dapat memiliki penampung yang akan diproses lebih lanjut. Hal ini penting untuk terjemahan sejak rangka sintaksis bervariasi dari bahasa ke bahasa dan ini memungkinkan mengulang teks, termasuk penampung untuk memenuhi bahasa apapun. String juga dapat diakses menggunakan {@ strings.xxxx.yyyy.zzzz} , yang akan memungkinkan akses ke string nesting lebih dalam ke bawah dan akan mencegah substitusi lebih lanjut. Kurung kurawal dapat dimasukkan dalam teks dengan menggunakan {LBRACE} dan {RBRACE} sebagai penampung.

Menggunakan _makeNode di renderUI

Kami menggunakan template untuk membuat markup untuk komponen kami. Untuk melakukannya, kita dapat memanggil MakeNode yang _makeNode metode, seperti ini:

  renderUI: function () {
     . this.get ('contentBox') append (this._makeNode ());
 }, 

Ini akan mengisi contentBox widget kami dengan markup dari pengolahan template. Para _makeNode metode mengembalikan sebuah instance dari Y.Node yang dapat ditambahkan atau dimasukkan di mana saja atau hanya dimiliki untuk digunakan kemudian. Tidak mengembalikan string, itu menghasilkan Node misalnya. (Jika Anda membutuhkan sebuah string dan tidak Node, Anda dapat menggunakan _substitute metode, yang mengharuskan Anda lulus dalam template.)

Para _makeNode metode membutuhkan dua argumen opsional: referensi untuk template dan obyek untuk mengisi penampung, sebagai Y.substitute tidak. Dalam contoh Spinner sederhana kami ada pola tunggal untuk widget keseluruhan tetapi widget lain mungkin memerlukan potongan-potongan yang terbuat dari beberapa template. Dalam hal ini, Anda biasanya akan memanggil _makeNode tanpa argumen untuk bagian utama dan menyebutnya sekali lagi dengan template yang berbeda untuk mengisi bagian-bagian tambahan. Para contoh berisi ini renderUI metode:

  renderUI: function () {
     var fieldset = this._makeNode ();
     this.each (fungsi (item) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, item));
     }, Ini);
     this.get ('contentBox') append (fieldset).;
 } 

Panggilan pertama untuk _makeNode mengembalikan Node misalnya disimpan dalam variabel fieldset . Komponen sampel juga diperpanjang dengan Y.ArrayList sehingga RADIO_TEMPLATE akan diisi dengan nilai-nilai yang diambil dari item yang disimpan di dalam array daftar dan Nodes yang dihasilkan ditambahkan ke fieldset sebelum akhirnya ditambahkan ke contentBox . Penampung khusus seperti {@} atau {p} akan tetap mengacu pada atribut atau properti pada objek utama. Item yang bersarang akan diproses seperti Y.substitute akan.

Para _locateNodes metode

MakeNode selanjutnya memberi _locateNodes metode yang akan mencoba untuk mencari semua elemen dengan classnames dideklarasikan di _CLASS_NAMES . Untuk menemukan elemen tertentu Anda dapat melewati sejumlah kunci className, jika tidak, _locateNodes mencoba mereka semua. Untuk setiap elemen yang ditemukan dari setiap className, _locateNodes akan menghasilkan sebuah properti contoh swasta yang menggunakan awalan garis bawah diikuti dengan nama kunci dan "Node" akhiran. Jadi, dalam contoh Spinner kami, _locateNodes akan menghasilkan sifat _inputNode , _upNode dan _downNode . Jika beberapa elemen memiliki className sama, _locateNodes akan kembali referensi yang pertama dari mereka. Jika sebuah elemen tidak ditemukan, tidak ada variabel yang akan dibuat.

Dalam komponen Spinner kita menggunakan _locateNodes setelah menciptakan kenaikan harga:

  renderUI: function () {
     this.get (CBX) append (this._makeNode ()).;
     this._locateNodes ();
 }, 

Properti statis _EVENTS

Salah satu properti lebih lanjut dapat didefinisikan sepanjang garis _TEMPLATE dan _CLASS_NAMES dan itu adalah _EVENTS . _EVENTS akan berisi hash terdiri dari kunci nama kelas, masing-masing berisi hash dari jenis acara dan metode untuk menangani mereka. Hal ini lebih baik dijelaskan dengan sebuah contoh:

  _EVENTS: {
     masukan: 'perubahan', / this._afterInputChange / panggilan
     boundingBox: [
         {
             ketik: 'kunci',
             fn: '_onDirectionKey', / / ​​panggilan this._onDirectionKey
             args: ((Y.UA.opera) "bawah:"!? "tekan:") + "38, 40, 33, 34"
         },
         'Mousedown' / / panggilan this._afterBoundingBoxMousedown
     ],
     dokumen: 'mouseup', / this._afterDocumentMouseup / panggilan,
     Y: 'broadcastingObject: someEvent' / / panggilan ini ["_afterYBroadcastingObject: someEvent"]
 }, 

_EVENTS adalah obyek (hash) dengan sejumlah entri. Nama-nama sifat, yaitu, kunci-kunci hash, mengidentifikasi node yang acara kami akan mendengarkan. Mereka adalah kunci className sama didefinisikan dalam _CLASS_NAMES . Ada beberapa tombol khusus tambahan:

• "boundingBox" akan mengacu pada kotak berlari sendiri.

• "document" mengacu pada dokumen yang berisi widget ini.

• "THIS" mengacu pada widget sendiri

• "Y" mengacu pada Y misalnya.

Jika Widget telah diperpanjang dengan WidgetStdMod juga, kunci HEADER , BODY dan FOOTER akan mengacu pada bagian tersebut karena mereka akan tersedia dalam _classNames hash. JavaScript tidak perlu kunci untuk dikutip jika mereka pengidentifikasi yang valid sehingga tidak ada di atas perlu dikutip.

Para _EVENTS properti diproses setelah renderUI , bindUI dan syncUI metode telah disebut begitu widget diharapkan telah dimasukkan ke dalam tubuh dokumen, jika tidak "document" identifier akan gagal.

Untuk setiap elemen ada sebuah identifier acara atau array pengidentifikasi acara. Suatu peristiwa dapat diidentifikasi oleh jenis acara untuk mendengarkan atau obyek dengan rincian lebih lanjut. Secara default, MakeNode akan menggunakan sebagai pendengar metode bernama menggunakan "_after" awalan diikuti dengan identifier elemen dengan karakter pertamanya dikapitalisasi diikuti oleh jenis acara dengan karakter pertamanya dikapitalisasi. Blok kode di atas menunjukkan metode yang disebut untuk setiap peristiwa.

Sebuah identifier acara juga bisa menjadi objek dengan properti type , fn dan args . Para type adalah wajib dan menunjukkan jenis aktivitas didengarkan. Para fn properti memberikan nama metode yang akan mendengarkan acara sehingga menghindari penamaan otomatis. Sejak _EVENTS adalah properti statis, ia tidak memiliki akses untuk this sehingga tidak bisa mengambil referensi yang sebenarnya untuk sebuah metode, hanya namanya. Para args argumen dapat digunakan untuk melewati argumen lebih lanjut untuk pemanggil seperti dengan key acara yang membutuhkan spesifikasi kunci.

MakeNode akan menggunakan Node.delegate untuk mendengarkan kegiatan untuk elemen-elemen dalam boundingBox , sementara ia akan menggunakan Node.after untuk mendengarkan acara dari boundingBox dan tubuh dokumen. Ini akan menggunakan this.after untuk mendengarkan peristiwa di bawah THIS kunci dan Y.after untuk pendengar terdaftar di bawah Y kunci. Semua peristiwa didengarkan menggunakan setelah pendengar acara karena mereka dimaksudkan untuk membuat widget merespon kejadian, bukan untuk menyaring perilaku dari objek yang kebakaran mereka sehingga dalam kasus tidak ada peristiwa ini dapat dicegah atau dihentikan. (Catatan: mendengarkan key acara pada setiap elemen bersarang bekerja hanya dengan 3.4.0pr1 versi dan di atas, karena delegasi dari key acara tidak tersedia sebelum Semua fitur lainnya bekerja dengan versi sebelumnya juga.).

Para _EVENTS deklarasi bersifat kumulatif ketika komponen mewarisi dari satu sama lain. Setiap kelas dalam rantai warisan akan memiliki sendiri _EVENTS deklarasi diproses secara terpisah.

Properti statis _ATTRS_2_UI

Acara berjalan dua arah, dari UI untuk komponen dan dari komponen ke UI. Yang pertama akan ditangani oleh _EVENTS properti. Lalu ada peristiwa dipecat oleh perubahan nilai atribut yang perlu tercermin dalam antarmuka pengguna. Seperti yang saya sebutkan di artikel sebelumnya, ketika ada efek sekunder dari mengubah atribut konfigurasi, mereka harus ditangani oleh pendengar acara perubahan, bukan oleh opsional setter metode atribut, yang hanya harus berurusan dengan normalisasi nilai yang ditetapkan. UI harus mencerminkan keadaan atribut konfigurasi, pertama di syncUI , ketika dimulai dan kemudian pada setiap peristiwa perubahan atribut. Untuk yang terakhir, kita perlu melampirkan pendengar acara, yang kami biasa lakukan di bindUI . Widget sudah menyediakan mekanisme untuk membuat yang sederhana, yang saya jelaskan di komentar untuk artikel sebelumnya.

Widget menggunakan properti contoh _UI_ATTRS yang berisi obyek dengan dua properti lebih lanjut, SYNC dan BIND . Masing-masing adalah array daftar nama atribut konfigurasi yang akan synched awalnya dan kemudian mendengarkan untuk menjaga UI yang mencerminkan nilai saat ini. Widget mengharapkan masing-masing entri untuk memiliki metode yang terkait dengannya, yaitu setelah nama atribut diawali oleh _uiSet dengan karakter pertama dari nama atribut dikonversi ke huruf besar untuk memiliki nama metode dalam kasus unta yang tepat. Jadi, jika "value" tercatat dalam salah satu _UI_ATTRS array (baik SYNC atau BIND ), Widget akan berharap untuk menemukan _uiSetValue metode. Metode ini akan menerima dua argumen, itu value yang ditetapkan dan src perubahan. Ini adalah kode untuk kami Spinner _uiSetValue metode:

  _uiSetValue: fungsi (nilai, src) {
     if (src === UI) {
         kembali;
     }
     this._inputNode.set (NILAI, this.get (Formatter) (nilai));
 }, 

Semua pengenal huruf besar yang Anda lihat dalam potongan kode ini sesuai dengan konstanta string dideklarasikan di tempat lain, untuk memungkinkan kompresor YUI untuk melakukan pekerjaan yang lebih baik. Metode ini, pada dasarnya, menetapkan value atribut HTML dalam <input> kotak ke set nilai baru, setelah diformat. Referensi ke textbox ini disediakan oleh _locateNodes . Para src argumen awalnya diperiksa untuk melihat jika diatur ke nilai string 'ui' . Jika demikian, tidak ada tindakan akan diambil. Hal ini untuk menghindari loop tak berujung. Jika pengguna memasukkan sesuatu dalam kotak input, nilainya akan masuk ke value atribut konfigurasi yang kemudian akan api valueChange acara, yang akan mendapatkan _uiSetValue disebut yang, jika dibiarkan, maka akan pergi dan mengubah nilai dari kotak input, yang akan memicu seluruh proses lagi. Dengan demikian, dalam _uiSetValue , jika kita tahu perubahan itu berasal dari UI, kita tidak melakukan apapun dan karena itu memutuskan loop. Namun, ini memerlukan sepotong kode tempat lain. Dalam pendengar untuk acara DOM, ketika kita menetapkan atribut konfigurasi, kita menggunakan argumen opsional ketiga untuk mengatur, seperti ini:

  _afterValueChange: function (ev) {
     this.set (NILAI, ev.newVal, {src: UI});
 } 

Terserah kita untuk memastikan bahwa perubahan datang dari UI ditandai demikian dan kemudian cek bendera yang sama untuk menghindari loop. Jangan menggunakan identifier src saat mengatur nilai dari atribut, bukan source yang tidak akan diakui.

Dengan semua ini berkata, saya belum berbicara tentang properti statis _ATTRS_2_UI disebutkan dalam pos pada bagian ini. Seperti komentar-komentar di artikel saya sebelumnya menunjukkan (melalui kesalahan yang saya buat pada mereka), memastikan bahwa semua atribut yang mempengaruhi UI benar tercantum agak berantakan. Anda tidak boleh menginisialisasi _UI_ATTRS dari awal sejak Widget sudah berisi daftar seluruh banyak atribut dan mereka akan hilang. Anda harus menggabungkan nama atribut baru selama yang sudah ada, yang agak sulit untuk diingat bagaimana melakukannya dengan benar. Untuk membuatnya sederhana, MakeNode akan dibaca dari properti statis _ATTRS_2_UI dan melakukan Rangkaian untuk Anda. Ini akan menggabungkan semua daftar tersebut dari setiap kelas dan setiap rantai warisan sehingga pada setiap tingkat kelas masing-masing dapat menangani atribut sendiri. Dalam Spinner, kita memiliki:

  _ATTRS_2_UI: {
     BIND: VALUE,
     SYNC: VALUE
 }, 

MakeNode akan menerima baik array nama atau nama atribut tunggal, seperti dalam kasus ini.

Pertanyaan yg muncul, mengapa dua daftar, satu untuk mengikat yang lainnya untuk sinkronisasi? SYNC digunakan pertama kali sekitar, setelah renderUI dan bindUI metode, jika mereka ada, disebut dan sebelum syncUI sementara mereka yang terdaftar dalam BIND akan terikat untuk yang sesuai atribut untuk perubahan nanti. Cukup sering SYNC array memiliki entri lebih sedikit daripada BIND daftar dan ini adalah karena template untuk komponen sudah bisa memiliki nilai default yang sama sebagai atribut konfigurasi dan tidak perlu untuk melakukan sinkronisasi awal. Jadi, jika nilai default untuk value atribut konfigurasi adalah string kosong dan <input> elemen dalam template tidak memiliki value atribut, maka tidak ada kebutuhan untuk sync mereka di inisialisasi.

Atribut yang tercantum dalam BIND akan memiliki mereka _uiSet Xxxx metode yang disebut dalam urutan apapun, sebagai atribut dapat diatur dalam urutan apapun. Atribut yang tercantum dalam SYNC akan dipanggil sekali dalam urutan yang tercantum dengan orang-leluhur sebelum pewaris mereka, sehingga jika salah satu tergantung pada yang lain (yang mereka tidak harus), order mungkin penting.

MakeNode akan memeriksa entri ganda dalam salah satu array. Jika ada muncul, itu berarti bahwa komponen kelas kami mewarisi dari atribut ini sudah menangani dan setiap deklarasi baru akan melampaui batas kemungkinan besar _uiSet Xxxx handler untuk itu. Kebetulan, MakeNode juga memeriksa entri ganda di _CLASS_NAMES , yang juga dapat menyebabkan konflik di beberapa, meskipun tidak semua, keadaan. MakeNode akan menulis pesan ke log untuk setiap kesalahan tersebut.

Properti _PUBLISH

Akhirnya, _PUBLISH properti statis akan daftar peristiwa-peristiwa yang harus dipublikasikan. Ini berisi hash menggunakan nama acara sebagai kunci dan sebuah objek literal dari atribut konfigurasi sebagai nilai-nilainya. Ini akan mempublikasikan semua kegiatan yang tercantum dalam setiap properti seperti di semua rantai warisan. Nama acara yang sama dapat dipublikasikan dalam kelas dan di setiap kelas mewarisi dari itu, yang akan membuat atribut konfigurasi dari yang kemudian menimpa orang-orang dalam yang lebih tua. Sebagai contoh, Anda mungkin ingin membuat sebuah acara siaran yang ada secara global. Sama seperti dengan _EVENTS properti, karena _PUBLISH adalah properti statis tanpa akses ke this , ketika menentukan fungsi, itu adalah nama metode, sebagai string, yang perlu diberikan.

Kesimpulan

MakeNode menyediakan prosesor template yang sangat sederhana, dengan fungsi yang sangat terintegrasi dengan kelas dasar Widget. Hal ini juga memberikan metode pembantu untuk membuat classnames untuk digunakan dalam template dan menggunakan nama-nama untuk mencari dan merujuk ke kelenjar dibuat. Hal ini juga menyediakan sarana untuk menghubungkan ke peristiwa yang dihasilkan baik oleh UI dan komponen itu sendiri dan asosiasi masing-masing dengan sebuah metode. Ia melakukan semua hal ini, saat mengambil hati untuk menghormati warisan rantai lurus hingga Widget dan setiap tingkat kelas Anda dapat menentukan.

Ini tidak memberikan untuk benar-benar segala kemungkinan, namun juga meliputi berbagai baik dari mereka. Namun demikian, tidak menghalangi Anda dari menambahkan fungsionalitas tambahan. Anda mungkin jarang harus menulis bindUI atau syncUI metode jika Anda menggunakan lem disediakan oleh MakeNode, tetapi Anda dapat melakukannya, karena MakeNode tidak menggunakannya.

Sebagai bonus untuk mereka yang memiliki kesabaran untuk membaca set Tombol ini Anthony jauh, saya juga dimodifikasi labu-labu dari komponen galeri dan membuat Akordeon dan komponen TimeSpinner, semua tersedia dalam Galeri .

Tentang Penulis: Daniel Barreiro (nama layar Satyam) telah ada selama beberapa waktu. ENIAC dimatikan sehari sebelum ia lahir, sehingga ia merindukan itu tapi dia tidak melewatkan banyak karena. Dia punya kesempatan untuk kartu punch, program 6502 chip (ingat Apple II?), Memiliki sebuah TRS-80 dan melihat beberapa potongan fantastis peralatan operasi dalam bukunya Argentina asli yang mungkin telah di museum tempat lain. Ketika globalisasi membuka pintu ke dunia, bahasa Inggris yang kemudian hampir tidak dapat digunakan (plus gelar Teknik Elektro) menempatkan dia di jalur karier yang berakhir dengan pekerjaan 5-tahun di belakang Bay Area pada hari-hari NCSA Mosaic. Totally intrigued by the funny squiggles a friend of his wrote in his plain text editor, full of <'s and >'s, he ended up learning quite a lot about the world of frontend engineering. It's been a long journey since COBOL and Fortran. Now he lives quite happily semi-retired in the Mediterranean coast close to Barcelona, Spain.

Temukan percakapan: Bloglines | technorati

Berbagi dan memperpanjang: Bookmark dengan del.icio.us | digg it! | reddit!