Blog ng Yahoo! User Interface (YUIBlog)

Yui 3.4.0 Release ng Preview 3 Magagamit na Ngayon sa CDN

Ang Yui koponan ay lamang nakumpleto ang huling sprint unlad para sa 3.4.0 release. Sa oras na ito isaalang-alang namin ang code ay functionally kumpletong. Kami ay pagpaplano upang gastusin ang aming susunod na sprint na tumututok sa aming huling pag-ikot ng pagsubok at paglikha ng mga ng higit halimbawa at dokumentasyon. Kami nag-post ng isang FC (functional na kumpleto) bumuo sa CDN para sa paggalugad ng komunidad at feedback. Maaari mong ma-access ang release na ito sa http://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.js .

Mayroong ilang mga partikular na lugar ng library kung saan gusto namin mahal sa komunidad puna:

• Tagapagsakay ay nagkaroon ng isang makabuluhang update para sa 3.4.0. Kung ikaw ay paggawa ng ng manual pagtutukoy ng load sa pamamagitan ng use("*") o gumawa ng paggamit ng mga kumpigurasyon ng submodule, gusto namin lubhang pinasasalamatan Sinusubukan mo ang iyong code sa bagong tagapagsakay upang matiyak na tama kami ay paghawak ng lahat ng mga kaso ng paggamit. Para sa higit pang detalyadong impormasyon sa mga pagbabago tagapagsakay sa ito release, sumangguni sa ang blog post na naglalarawan ng 3.4.0 pagbabago tagapagsakay .
• Kalendaryo at Panel ay fully functional at handa na para sa developer paggamit.
• Graphics: Nagkaroon ng isang ilang mga pagbabago ng API na makakaapekto sa anumang mga eksperimentong code na nakasulat sa ang Graphics API na ipinamamahagi sa PR2 release getShape() ay ang pangalan ng addShape() . Mayroon na rin ang ilang mga katangian replacements.
• Paglipat: mga Katutubong transition ay ngayon suportado sa FireFox.
• WidgetButtons ay inilabas bilang isang bagong extension ng Widget na nagbibigay-daan sa iyo upang ilagay ang css-styled na pindutan sa header at footer ng ​​anumang widget na nagpapatupad ng mga pamantayan na suporta ng module.
• Widget-modaliti at Widget-AutoHide plugin ay nai-convert sa extension.
• Widget: Naidagdag na suporta para sirain (tunay) na alisin at sirain ang lahat ng mga nodes bata (hindi lamang ang boundingBox at contentBox) na nasa loob boundingBox ang Widget. sirain () ay mapanatili ang kasalukuyang pag-uugali nito dahil sa ang mga potensyal na mataas na gastos ng run-time ng pagyurak sa lahat ng mga nodes anak. Kung sirain mo Widgets sa iyong application o ng isang pasadyang widget sa developer, ang iyong tulong sa pagsubok ng pagbabagong ito ay appreciated.
• ScrollView ngayon sumusuporta sa vertical paging, kabilang scrollview-list plugin upang magdagdag ng mga classnames CSS sa agarang mga elemento sa listahan, pati na rin ang ilang mga bug mga pag-aayos at refactoring
• App Balangkas: gusto namin para i-extend ng isang taos-puso salamat sa iyo sa lahat ng mga developer sa komunidad na kinuha ng oras upang subukan ang magmaneho ang bagong Balangkas ng App. Natanggap namin ang mahusay na puna ng pagsunod sa mga PR2 release. Mangyaring magpatuloy upang galugarin ang mga sangkap na ito at ipadala sa amin ang iyong mga obserbasyon at mungkahi.

Maaari kang makakuha ng karagdagang impormasyon sa nilalaman ng release na ito sa pamamagitan ng pagsusuri ang rollup ng Kasaysayan at ang buong listahan ng mga tiket na direksiyon sa PR3 . Mangyaring file ng anumang pagpapahusay kahilingan, bug at regressions na sa database ng tiket sa YUILibrary.com .

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Yui: Buksan ang Oras Thurs Hulyo 28

Y.Calendar ay patungo sa 3.4.0

Calendar ay isa ng aming mas patok na mga widgets sa pamilya Yui 2, at ito ay gumagawa nito pasinaya sa ang architecture Yui 3 sa 3.4.0. Ang Allen Rabinovich bahagi ng may-ari at may-akda at sa tawag na reintroducing sa amin na ito lumang paboritong, na nagpapakita ng ilang mga bagong approach sa mga problema na nahaharap sa pamamagitan ng 2.x Calendar. Lalo ako jazzed tungkol sa suporta para sa internationalize, ngunit ang bagong mga patakaran sa rendering ay medyo nakahahalina.

Dumating sa, at dalhin ang iyong mga katanungan sa petsa-picker, ang kaganapan sa kalendaryo, import-mula-iCal-at-gumawa-pancakes at tampok na kahilingan sa iyo bilang namin laman ang ngayon at sa hinaharap sa Y.Calendar . (Hindi, hindi ito ii-import ng iCal, ngunit kung ang isang tao ay nais na lumikha ng isang gallery module sa magpabait na hayop, may sigurado na maging isang YUIConf tiket sa ito para sa iyo ;))

Humihingi kami pabalik sa aming karaniwang mga oras na ito linggo, kaya kami na nakikita mo sa Kumonekta sa 10:00 PDT.

Oras & Detalye

Kami ay magiging online na mula sa 10 ng umaga hanggang 11am PDT Huwebes. Ang mga detalye ng koneksyon ay ang parehong tulad ng dati.

1. I-dial in sa 1-888-371-8922 (Skype ay gumagana ng mahusay para sa mga di-US na kalahok *)
2. Ipasok ang dadalo code 47188953 #
3. Sumali sa screen session ng pagbabahagi (ito ay sesenyasan mong i-install ang plugin ng Adobe Connect kung ito ay iyong unang beses na gamitin ito)

Tandaan: Dahil ito ay isang bukas na linya ng pagpupulong, hinihiling namin na i-mute ng mga tumatawag sa kanilang linya maliban kung sila ay lumalahok sa mga aktibong talakayan.

* - Kung Skype ay hindi isang opsyon, mag-email sa akin o mahuli akin (ls_n) sa # Yui Communication channel sa freenode para sa isang lokal na numero.

Pagtatala

Salamat sa lahat ng tao para sa pagtawag sa! Ang online na record ng session ay magagamit na ngayon.

Ang mataas na kalidad, iPhone / iPad tugmang, nada-download na record ay dito .

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Yui: Buksan ang Oras HU Hulyo ika-21

Isang ng DataTable update at gallery iskaparate

Ang 3.4.0 release na cycle ay darating sa isang malapit at ay nakaimpake sa lahat ng uri ng mahusay na mga tampok, ngunit nagsasalita malinaw, DataTable ay hindi nakuha bilang magkano ang focus sa pag-unlad bilang dapat. Nagkaroon ng ilang bug-aayos, bagaman, at isang makatarungang halaga ng pagpaplano para sa mga pagbabago na naka-target sa 3.5.0, at isang mahusay na pagsisimula sa paglahok ng komunidad na may-unlad.

Alam namin na ang DataTable ay isang hindi mapaniniwalaan o kapani-paniwala mahalagang widget para sa isang pulutong ng mga customer, kaya naiintindihan namin ang gastos ng bimbin nakatutok unlad. Ito Buksan ang Oras ay isang update sa kung ano ang trabaho ay nagsisimula tapos para sa 3.4.0, ano ay pinlano para sa 3.5.0, at isang pagpapakilala sa dakilang gawain na ay nagsimula sumibol sa Gallery upang magdagdag ng mga tampok at ayusin ang mga bug para sa DataTable (at ang pamilya ng mga sumusuporta sa klase).

Kami ay magiging online na isang oras mas maaga ito linggo para sa pakinabang ng Eamon Brosnan (aka, mosen mula sa # Yui), na ay ibinigay ng isang bilang ng mga ang patch ng Gallery na kami ay naghahanap sa ibabaw. Kung hindi man, kami ay may iba pang # Yui denizens at mga kontribyutor sa Gallery na nagpapakita ng kanilang mga paninda. Kung mayroon kang isang sa DataTable solusyon o trabaho sa progreso gusto mo upang ibahagi, mangyaring ipaalam sa akin sa gayon ay maaari kong harangan ang iskedyul upang magkasya ang lahat (ls_n sa # Yui o nerbiyos ).

Oras & Detalye

Kami ay magiging online na mula sa 9am sa 10 ng umaga PDT Huwebes. Ang mga detalye ng koneksyon ay ang parehong tulad ng dati.

1. I-dial in sa 1-888-371-8922 (Skype ay gumagana ng mahusay para sa mga di-US na kalahok *)
2. Ipasok ang dadalo code 47188953 #
3. Sumali sa screen session ng pagbabahagi (ito ay sesenyasan mong i-install ang plugin ng Adobe Connect kung ito ay iyong unang beses na gamitin ito)

Tandaan: Dahil ito ay isang bukas na linya ng pagpupulong, hinihiling namin na i-mute ng mga tumatawag sa kanilang linya maliban kung sila ay lumalahok sa mga aktibong talakayan.

* - Kung Skype ay hindi isang opsyon, mag-email sa akin o mahuli akin (ls_n) sa # Yui Communication channel sa freenode para sa isang lokal na numero.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Susunod na-gen YSlow pinagagana ng Yui

Ang isang pares ng mga linggo nakaraan, Yahoo! inihayag YSlow para sa Mobile sa tulin 2011 , nagdadala ang kapangyarihan ng YSlow pagganap ng pagsusuri sa mobile mundo.

YSlow para sa Mobile gumagana bilang isang bookmarklet , na ginagawang posible na tumakbo sa mga browser bukod sa Firefox (bilang isang add-on) o Chrome (bilang isang extension) .

Ang YSlow architecture ay bahagyang muling idisenyo upang gumana ang cross-platform at Yui ang mahahalagang salik sa sandboxing, cross-browser abstraction at simpleng YQL access posible.

Sandboxing

Upang mai-embed sa isang pahina nang hindi nakakasagabal sa pagganap ng pagsusuri at walang messing sa pahina mismo, YSlow ay isang bookmarklet na injects JavaScript at CSS sa anumang pahina sa pamamagitan ng leveraging ang kapangyarihan ng Yui sandboxing:

Bookmarklet URL:

 javascript: (ng pagpapaandar (y, p, o) {
     p = y.body.appendChild sa (y.createElement (iframe '));
     p.id = 'YSlow-bookmarklet';
     p.style.cssText = 'display: none';
     o = p.contentWindow.document na;
     o.open (). magsulat ('
         <head>
         <Katawan onload = "
             YUI_config = {
                 manalo: window.parent,
                 doc: window.parent.document
             };
             var d = dokumento;
             d.getElementsByTagName (\ 'ulo \') [0]
                 . AppendChild (
                     d.createElement (\ 'script \')
                 ). Src = \ 'http://d.yimg.com/jc/yslow-bookmarklet.js \' "
         >
     ');
     o.close ()
 } (Dokumento))

Ang code sa itaas:

• lumilikha ng isang walang laman na iframe;
• appends ito sa pahina ng katawan;
• hides ang iframe * ay;
• nakakakuha nito window humahawak;
• writes sa nilalaman nito ang katawan ng iframe;
• katawan na ito ay walang laman ngunit may isang onload kaganapan
• ang kaganapang onload tumutukoy kung paano magpaturok YSlow js:
  • nagtatakda YUI_config , kaya win at doc puntos sa pahina na nasuri window at document ayon sa pagkakasunud-sunod
  • dynamic injects ng YSlow URL sa pamamagitan ng paglikha ng isang script elemento sa iframe sa head

* Ang iframe ay ipinapakita sa pamamagitan ng ang oras na lahat ng YSlow pagtatanghal asset ay load

Ito ay ilagay sa isang iframe sa pahina na nasuri. Ito iframe ay kumilos bilang isang sandboxed na kapaligiran at YSlow ay naninirahan sa loob nito. Dahil ang iframe ay dynamic na nilikha walang src katangian, magkakaroon ito ng access sa kanyang magulang (ang pahina na nasuri) dahil doon ang walang paglabag ng patakaran sa parehong pinagmulan nangyayari doon.

Ang YUI_config bagay ay madaling gamitin dahil ito nagtatakda win at doc ang iframe sa magulang (ang pahina na nasuri), kaya ang anumang mga bagong Yui Halimbawa ay sumunod sa magulang ang dokumento sa pamamagitan ng default, ang mga kable ng anumang mga tawag sa Y.all at Y.one sa pamamagitan ng Y.config.win o Y.config.doc mula sa ng Yui use callback.

Ang YSlow ng pagtatanghal ay gagawin sa pamamagitan ng window iframe at mga sanggunian ng document , pinahihintulutan ang YSlow pangunahing script sa render ang markup pati na rin makuha ang panlabas na CSS sa loob ng iframe walang Magkasalungat sa mga estilo ng magulang pahina. Inii-scan ng YSlow pahina ng magulang upang makakuha ng lahat ng mga bahagi (mga imahe, script, mga link, mga background na mga imahe, flash, atbp) na kinakailangan para sa mamaya pagtatasa sa pagganap. Ito ay ginagawa sa pamamagitan ng access Y.config.win at Y.config.doc , dahil sila ay sumangguni sa pahina magulang.

Cross-browser abstraction

Ang pagiging isang bookmarklet, YSlow para sa Mobile ay dapat na gumagana sa anumang browser *. Yui abstracts ang cross-browser isyu sa pamamagitan ng ng normalizing pagkakaiba browser, na nagreresulta sa isang malinis, madaling basahin at maintainable codebase.

YSlow ay hindi ganap na port sa Yui 3 - lamang ang controller layer (mula sa paparating na bahagi App) para sa ngayon - ngunit pa rin, lahat ng mga DOM manipulasyon at handling ng kaganapan ay tapos na sa pamamagitan ng node at event module. Sa hinaharap release balak namin sa port ang mas maraming mga tampok ng YSlow upang Yui 3.

* Hindi lahat ng mga browser ay kasalukuyang suportado

YQL

YSlow pinag-aaralan ng mga pahina sa pamamagitan ng pagsuri ng mga HTTP header para sa mga bahagi na natagpuan sa pahina. HTTP response header ay hindi magagamit sa pahina, kaya ang mga bahagi na kailangan upang ma-hiniling na muli upang para YSlow makuha ang impormasyon ng header ng tugon. Ito ay maaaring nakakamit sa pamamagitan ng humihiling ng listahan ng mga URL sa bahagi sa pamamagitan ng XMLHttpRequest (AJAX) ngunit sa kasamaang-palad dahil sa parehong pinanggalingan patakaran sa paghihigpit , ito ay hindi posible maliban kung ang lahat ng mga bahagi ay sa parehong domain bilang ang pahina na kung saan ay napaka-malamang na hindi.

Ang isang karaniwang workaround para sa parehong pinanggalingan patakaran paghihigpit ay gumagamit ng JSONP, kung saan ang isang panlabas na server ay gumagana bilang isang proxy na humihiling sa listahan ng mga bahagi ng URL at pagkuha ng kanilang mga header ng HTTP sagot sa ngalan ng YSlow. Dahil sa YSlow ng katanyagan at kamakailan-lamang na mga mobile na mga pagsisikap sa pagtatasa ng pagganap, kami ay umaasa sa masyadong mabigat na trapiko para sa ang YSlow para sa mga Mobile bookmarklet. Upang suportahan ang tulad ng trapiko, YQL ang scalable solusyon na pinagtibay sa pamamagitan ng YSlow sa pamamagitan ng isang bukas na mesa data na pinangalanan data.headers , na Kinukuha ang mga header ng ​​tugon at nilalaman para sa isang naibigay na listahan ng mga URL habang nagpapanggap na ang mga user-agent upang matiyak na ang inaasahan ng nilalaman ay nabawi.

Ang YQL Query bahagi ang lahat ng mga gawain ng pamamahala YQL mga query habang pamamahala ang kahilingan JSONP sa ilalim ng hood, paggawa ng code ng controller ng ​​YSlow magkano ang mas simple at madaling-mapanatili.

Hinaharap na mga pagpapahusay: Bagong YSlow para sa Mobile friendly na interface

Kasalukuyang YSlow para sa Mobile na karanasan ng gumagamit ang parehong bilang ang desktop karanasan. Pagharap sa isang mahabang listahan ng mga data sa pagtatasa ng pagganap ay hindi ang pinakamahusay na karanasan sa mga maliit na smart-telepono screen. Dahil Yui din abstracts cross-aparato gestures , YSlow para sa Mobile ay makakuha ng isang bagong mobile-friendly interface sa hinaharap release.

Pagganap ng pagganap tool

YSlow para sa Mobile deployment ay ginawa maingat na isinasaalang-alang ang pagganap nito epekto sa ang oras ng pagkarga ng pahina na nasuri. Ang Yui 3 module na ginagamit sa YSlow ay scrutinized upang isama lamang ang mga module na kinakailangan upang i-load ang ng YSlow bilang mabilis hangga't maaari. Ang file na Yui buto at tagapagsakay na ay hindi kasama dahil ang lahat ng mga kinakailangang module at submodules na pinagsama-sama ng pagsunod Ryan Grove ng Pagganap mga Zen tip, kung saan ginawa ito posible upang i-load ang lahat ng sama-sama sa isang solong maliit na solong kahilingan: YSlow-bookmarklet.js: 204KB, 66KB ( gzip) kung saan:

• Yui: 75KB, 27KB (gzip)
• YSlow: 129KB, 39KB (gzip)

Higit pa tungkol sa YSlow

Panatilihing up-to-date sa mga ang pinakabagong mga anunsyo ng YSlow sa pamamagitan ng:

• Pagbisita sa muling idisenyo YSlow pahina sa getyslow.com
• Gustuhin YSlow sa Facebook: facebook.com / getyslow
• Pagsunod YSlow sa Twitter: twitter.com / getyslow

Tungkol sa may-akda: Marcel Duran ay ang Front End nangunguna para sa Yahoo! 'natatanging Pagganap Team. Siya ay naging sa pag-optimize ng pagganap ng web sa mga mataas na mga site ng trapiko sa Yahoo! Front Page at Search koponan kung saan siya inilapat at researched web pagganap pinakamahusay na kasanayan sa paggawa ng mga pahina ng mas mabilis. Ngayon siya ay nakatuon sa ng YSlow at iba pang mga kasangkapan sa pagpapaunlad ng pagganap, researches at magbahagi ng Ebanghelyo. Kanyang layunin ay upang gumawa ng web mas mabilis kaysa sa maaari itong maging at naniniwala na walang ganoong bagay bilang "lamang ng ilang milliseconds ay hindi ay nasaktan".

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Update ng gradong Browser sa Suporta

GBS Pagbabago

Kabilang sa mga tiyak na mga pagbabago para sa update na ito ang:

• Hindi na magtalaga ng grado karanasan
• Ipagpapatuloy prescribing tiyak na operating system (maliban para sa mga mobile)
• Idinagdag coverage para sa Internet Explorer 9
• Idinagdag coverage para sa Firefox 4. †
• Idinagdag coverage para sa Firefox 5. †

Mga Tala:

• Ang sundang simbolo (tulad ng sa "Firefox 4. †") ay nagpapahiwatig na ang pinaka-kasalukuyang di-beta na bersyon sa sangay na antas na natatanggap ng support.
• Ang gabay walang ibinigay sa iOS o paggamit ng aparato sa Android OS. Ang rekumendasyon ay na pinili mo ang mga aparato na ang mga pinaka-kinatawan ng iyong mga user base para sa bawat OS.

Tinatanggal ang grado mula sa baseline ng Browser Test

Ang edition ng GBS update na ito ay kumakatawan sa isang-alis mula sa aming mga nakaraang mga update na namin ay gumagalaw ang layo mula sa browser mapping direkta sa grado karanasan (eg "A-grade" at "C-grado"). Sa halip na maghatol kung ano ang karanasan ng gumagamit ay naaangkop Aling mga browser, kami ay tumutok sa pagtukoy ng isang mahusay na diskarte ng baseline pagsubok na ay magpapakinabang pagsubok coverage at minimizes ang ibabaw ng pagsubok. Halimbawa, IE6 ay pa-makabuluhang global marketshare mga warrants patuloy pagsubok; GBS subalit ngayon ay nagbibigay-daan para ang IE6 na karanasan ng gumagamit upang maging ang iba't-ibang mula sa IE9 karanasan.

Tinatanggal ang Systems Operating mula sa baseline ng Browser Test

Upang talagusan pagsubok at mabawasan ang mga pangangailangan ng mapagkukunan, hindi na namin tukuyin kung aling mga operating system ay dapat magpasuri sa. Ang tanging exception ay kapag ang browser ay mahigpit kaisa sa mga bersyon ng OS, kung saan na sumangguni namin sa bersyon ng OS kaysa sa bersyon ng browser (hal. "ng Safari iOS 4"). Ito ay nagbibigay-daan sa amin upang tumutok test coverage sa mga bersyon ng browser, at mabawasan ang redudant pagsubok sa buong platform. Mga isyu sa parehong browser sa buong bersyon ay bale-wala, at sa pangkalahatan na may kaugnayan sa mas mataas na antas ng pagkakaiba OS, tulad ng key handling at mga magagamit na font. Ang code na ay kilala upang hawakan sa cross-platform isyu ay dapat magpasuri sa bilang ng maraming mga platform hangga't maaari, ngunit ang pagsubok na ito sa pangkalahatan ay maaaring ilang sa mga tiyak na mga isyu sa halip ng pagpapatakbo ng isang buong pagbabalik ng pagsubok sa lahat ng mga tampok. Inirerekumenda namin ang ang pagpapantay operating system pagsubok priority sa iyong user base.

Bakit IE6 pa rin sa listahan?

IE6 pa rin ay may isang makabuluhang sapat na pandaigdigang merkado ibahagi sa ginagarantiyahan na-verify na katanggap-tanggap na karanasan ng gumagamit. Ang isang karaniwang maling kuru-kuro sa mga umuunlad na diskarte Enhancement ay na sa sandaling ang browser isang nagpasok ng "C-grade" na nagiging "hindi suportadong", kapag sa katunayan ito talagang nangangahulugan na dapat ito ay inihatid sa HTML-lamang na karanasan. Ngayon na hindi na kami maghatol kung saan ang mga browser makatanggap ng kung ano ang karanasan, ito ay sa kaliwa para sa mga proyekto upang magpasya batay sa kanilang mga gumagamit at mga mapagkukunan. Ang GBS nakatutok sa pagtukoy kung aling mga browser ang kailangan ng isang verify na kapaki-pakinabang na karanasan batay sa mga kadahilanan tulad ng merkado ibahagi at impluwensiya. Pagtukoy kung ano ang "magagamit" at specifiying ng katanggap-tanggap na mga antas ng marawal na kalagayan ay kaliwa upang magpasya para sa mga koponan. Pa rin kami nagsusulong ng isang simpleng umuunlad Enhancement modelo, at hinihikayat ang mga proyekto mula sa paglikha ng mga bagong tiers walang accounting para sa mga karagdagang gastos sa pag-unlad, pagsubok, at mga mapagkukunan ng maintenance.

GBS Forecast

Inaasahan namin upang gawin ang mga sumusunod na mga pagbabago sa susunod na update:

• Ihinto ang coverage para sa Safari sa iOS 3.
• Magdagdag ng coverage para sa WebKit sa Android 3.
• Magdagdag ng coverage para sa Firefox 6.
• Magdagdag ng coverage para sa Safari iOS 5.

Ang GBS Archive

• Sa GBS Update, 2010/11/03
• Sa GBS Update, 2010/02/16
• Sa GBS Update, 2009/10/16
• Sa GBS Update, 2009/07/02
• Sa GBS Update, 2009/01/28
• Sa GBS Update, 2008/07/03
• Sa GBS Update, 2008/02/19

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Ang "MakeNode ang" Extension ng Widget

Editor ng Tandaan: Dahil ang artikulong ito ay orihinal nai-publish, ang module ng MakeNode ay nai-publish sa Gallery Yui at natanggap na ang ilang mga pagpapahusay. Mangyaring sumangguni sa na-update na artikulo, na -update: Ang "MakeNode ang" Extension ng Widget .

Sa aking nakaraang artikulo, Isang Recipe para sa isang Application Yui 3 , nagpakita ako ng isang paraan upang gamitin ang Y.substitute bilang isang napaka-basic template ng processor. Ang ideya kinuha buhay mula doon, na may mga mungkahi mula sa mga tao sa # Yui Communication channel, at ginawa ko ito isang Widget extension na magagamit sa aking site, na tinatawag na MakeNode . MakeNode ay hindi isang pangkaraniwang processor template at hindi na ito ay nakatalaga bilang isa. Sa kabilang banda, mahigpit ito ay isinama sa Yui Widget klase pundasyon, kabilang ang mga className at kaganapan helpers at internationalize. Sa artikulong ito, ako ay gawin ang Spinner Halimbawa at baguhin ang mga ito upang sundin ang mga alituntunin mula sa aking nakaraang artikulo at gamitin MakeNode. Ang nabago na bahagi Spinner ( js , CSS , sprites ) pati na rin ang isang halimbawa ay magagamit mula sa aking site. Mga link sa mga karagdagang mapagkukunan ay matatagpuan sa dulo ng artikulong ito.

Pagpapahaba ng iyong mga bahagi

Kapag MakeNode ay load, kailangan mong isama ang module sa iyong YUI().use() pahayag gamit ang pangalan na 'makenode' . Pagkatapos, upang palawakin ang iyong widget, mong ilista ang mga ito sa ikatlong argumento sa Y.Base.create() , tulad nito:

  Y.Spinner = Y.Base.create (
      'Spinner',
      Y.Widget,
      [Y.MakeNode],
      {
         / / Miyembro ng halimbawa ...
      },
      {
          / / Static na mga miyembro
      }
 ); 

Maaari kang magdagdag ng MakeNode kasama ang anumang bilang ng mga naaangkop na mga extension para sa Widget, tulad ng WidgetParent, WidgetChild, WidgetStdMode, atbp MakeNode nagdadagdag ang dalawang protektadong mga pamamaraan, _makeNode at _locateNodes, at ito ay basahin mula sa ilang mga static na katangian, kung natagpuan.

Lahat ng mga miyembro ng extension na ito ay maaaring protektado o pribado dahil ito ay nilalayong gamitin sa pamamagitan ng developer ang mga bahagi at hindi ng implementer na gamit ang mga bahagi, na hindi dapat bothered sa kanila.

Pagtukoy sa template

Ang unang bagay na ikaw ay normal gawin ay upang tukuyin ang mga template para sa iyong bahagi. Para sa Spinner, ang aming mga template ay magiging:

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

Ang default na template ay karaniwang pinangalanan _TEMPLATE at ipinahayag kasama ang iba pang mga static na mga katangian ng klase, tulad ng mga ATTRS . MakeNode ay gamitin ang template na ito kung wala ibang ay malinaw na ibinigay. Ang template ay ginawa ng plain HTML kasama ang isang serye ng mga placeholder na kalakip sa kulot bracket, ang bawat isa ay ginawa ng isang solong character (processing code) at sinundan sa pamamagitan ng isa o higit pang mga argumento. Ang mga placeholder at kung ano ang gumawa sila ay:

• {@ attributeName} halaga ng katangian ng configuration

• {p propertyName} ari-arian halaga ng Halimbawa

• {m methodName arg1 arg2 ….} return halaga ng ibinigay na paraan. Ang code ng processing ay sinundan sa pamamagitan ng ang paraan ng pangalan at anumang bilang ng mga argumento na pinaghiwalay ng whitespace. String ay dapat kasama sa double quotation marks. Numero, Booleans at null ay iko-convert mula sa string sa kanilang tamang uri ng data

• {c classNameKey} CSS className na nabuo mula sa _CLASS_NAMES ari-arian static

• {s key} string mula sa strings katangian, gamit ang key bilang ng mga sub-attribute.

• {? other placeholder } Gumagawa sa string na checked kapag ang mga resulta ng pagproseso ng mga natitirang ang placeholder ay totoo.

• {} anumang iba pang mga halaga ay gagawin lamang tulad Y.substitute ginagawa.

Halimbawa, {@ value} ay isalin sa this.get('value') habang {p value} isinasalin sa this['value'] .

Ang {m} placeholder ay isang maliit na mas kumplikadong. Ang unang argument matapos ang m code processing ay ang pangalan ng pamamaraan at ang natitirang bahagi ng mga argumento, lahat ng pinaghiwalay ng whitespace, na lumipas na ang ibinigay na paraan. Mga argumento ay maaaring maging ng mga numero, null , true , false o mga string na kalakip sa double quotes. MakeNode ay parse ang mga ito at i-convert ang mga ito sa kanilang wastong uri, kaya {m myMethod 123.45 true “this is a string”} ay magreresulta sa pagtawag this.myMethod(123.45, true, “this is a string”) gayon na ang unang dalawang argumento ay na-convert sa kanilang wastong mga uri ng data at string ang maaaring naglalaman ng mga puwang. Upang isama ang isang double quote, gamitin ang \\" , ang double backslash na kinakailangan dahil ang JavaScript ay bigyang-kahulugan ang isang solong isa at Tinatapon ang mga ito bago ito ay nakakakuha sa MakeNode. double quotes lamang ang pinapayagan, MakeNode ay hindi gamitin eval() sa gayon ay limitado ang pang-parse ng ngunit ligtas. Ano ngunit numero, null , Booleans at double quoted string ay hindi papansinin.

Ang {?} placeholder ay madaling gamitin upang gamitin sa mga checkbox at mga radio button. Ito ay makagawa ng string ang “checked” depende sa halaga ng katotohanan ng pagtuturo sa pagpoproseso ng code na sumusunod. Kaya, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> ay makagawa ng isang markadong checkbox kung ang getLength paraan ay nagbabalik ng anumang bagay ngunit zero. {?} ay tumatanggap ng anumang ng iba pang mga placeholder, kahit na ito lamang ang akma sa unang tatlong.

Para sa {c} placeholder, kailangan naming magkaroon ng isang _CLASS_NAMES ari-arian na tinukoy.

Ang karagdagang placeholder maidadagdag sa MakeNode ng sa pamamagitan ng pagdaragdag ng mga ito sa hash ang _templateHandlers .

Ang _CLASS_NAMES ari-arian

Kasama ang ATTRS at _TEMPLATE static na katangian, maaari naming tukuyin ang isang _CLASS_NAMES ari-arian na puntos sa isang array ng string. Ang bawat isa sa mga string ay ginagamit upang bumuo ng isang className. Kaya _CLASS_NAMES: ['input'] ay gumawa ng className “yui3-spinner-input” . Ang mga classNames ay naka-imbak sa isang halimbawa ari-arian this._classNames . Ang {c input} placeholder sa template sa itaas ay papalitan sa pamamagitan ng “yui3-spinner-input” .

Maaari mong gamitin ang mga _CLASS_NAMES ari-arian upang bumuo ng anumang bilang ng mga classNames, kung mong gamitin ang mga ito sa ang mga template o hindi. Maaari mo pa ring maabot ang mga karagdagang classNames na iyon mula sa loob ng this._classNames . ClassName ang nabuo gamit ang yui3 prefix na sinundan sa pamamagitan ng ang halaga ng ari-arian ng static NAME naka maliliit na titik, at pagkatapos ay ang string na ibinigay sa _CLASS_NAMES (ang huling isa na ito ay hindi naka-lowercase), ang lahat na pinaghihiwalay ng mga gitling. Ang _classNames hash ay naglalaman ng mga classNames para sa boundingBox at ang contentBox , ang unang sa ilalim ng "." key at ang pangalawang sa ilalim ng ang “content” key. Widget nagtatalaga sa sa boundingBox ang mga classNames na nagmula sa ang mga halaga ng ari-arian ng NAME ng bawat ng mga klase sa kadena mana, na nagsisimula sa yui3-widget . Ang MakeNode tindahan sa this._classNames lamang ang tuktok-pinaka className na para sa ang boundingBox .

Kung ang isang bahagi ay ilang mga antas ng ang layo mula sa Widget, tulad ng sa SuperSpecialSpinner inheriting mula sa SuperSpinner na inherits mula Spinner na inherits mula Widget, at kung anuman o lahat ng mga ito ay may _CLASS_NAMES katangian na tinukoy, MakeNode ay gumawa classNames para sa lahat ng mga ito at mag-imbak ang mga ito this._classNames . Hindi mo na kailangang isama sa bawat antas na ang mga pangalan na ipinahayag sa mga nakaraang antas. Sa katunayan, ito ay mas mahusay na hindi mo dahil ang classNames na ginawa sa bawat antas ay gamitin ang mga halaga ng ari-arian ng NAME ng na antas. Kaya, sa SuperSpecialSpinner , {c input} ay pa rin magresulta sa “yui3-spinner-input” at hindi “yui3-superspecialspinner-input” at sa gayon ito ay panatilihin ang iyong CSS file ay may-bisa pa.

Ang {s} placeholder

Widget ay isang strings configuration ng katangian na tinukoy, bagaman ito ay hindi initialized sa anumang halaga. Ang attribute na ito ay nakatalaga na humawak ng mga string na makikita sa (o, sa pamamagitan ng mga screen reader, basahin sa) ang gumagamit. Ito ay mahalaga na hindi mo ang isama nakikita string nang direkta sa template. Ito ay hindi isang pangangailangan ng MakeNode - hindi ito ay isang magandang ideya sa lahat. Lahat ng mga string na tiningnan ng o basahin sa gumagamit ay dapat laging ilagay sa strings katangian. Ang strings attribute ay naglalaman ng isang hash na kung saan ang bawat indibidwal na teksto ay matatagpuan sa pamamagitan ng nito key. Ang Spinner bahagi ay ang mga sumusunod na string, na maaari mong tingnan ang ginamit sa template sa itaas.

  string: {
     halaga: {
         input: "Pindutin ang arrow up / down na key para sa mga menor de edad na palugit, page up / down na para sa mga pangunahing palugit.",
         up: "patong",
         down na: "pagbabawas"
     }
 }, 

Ang pinakamagandang bahagi ng paggawa nito ay na ang iyong mga bahagi ay maaaring naisalokal sa ibang wika masyadong madali sa pamamagitan ng mga developer na gamit ang iyong bahagi. Kapag lumilikha ng isang halimbawa ng Spinner, maaari mong gawin:

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

Ang pagtatakda ng configuration strings katangian sa paraang ito ay pumapalit sa default na halaga ng strings na may mga mula sa mga mapagkukunan ng wika ng file gamit ang wika na dati nang tinukoy. Ang {s} placeholder-access ang mga string na naka-imbak sa ang strings attribute, alinman ang default na mga o ang mga isinalin na mga, kung set. Ang {s xxxx} placeholder ay, sa katunayan, walang higit pa kaysa sa isang shortcut sa {@ strings.xxxx} placeholder. Gayunpaman, ang unang ay maaari lamang ma-access ang mga string sa tuktok na antas habang, halimbawa, {@ strings.xxxx.yyyy.zzzz} ay magpapahintulot sa inyo na ma-access ang isang string ng mas malalim down na.

Paggamit ng _makeNode sa renderUI

Ginagamit namin ang template upang lumikha ng markup para sa aming bahagi. Upang gawin ito, maaari naming tawagan ang MakeNode ng _makeNode paraan, tulad nito:

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

Ito ay punan ang contentBox ng aming mga widget na may markup mula sa pagproseso ng template. Ang _makeNode paraan nagbabalik ng isang halimbawa ng Y.Node na maaaring idinagdag o nakapasok sa kahit saan o lamang na gaganapin para sa mamaya paggamit. Ito ay hindi nagbabalik ng isang string, ito ay gumagawa ng isang Node halimbawa.

Ang _makeNode paraan ay tumatagal ng dalawang mga opsyonal na argument: isang reference sa isang template at isang bagay upang punan sa placeholder, bilang Y.substitute ginagawa. Sa aming simpleng Spinner halimbawa may isang solong template para sa buong widget ngunit ang ibang mga widget ay maaaring nangangailangan ng mga bits at piraso na ginawa ng ilang mga template. Sa kasong iyon, nais mong karaniwang tumawag _makeNode na walang argumento para sa mga pangunahing bahagi at tawagan ang mga ito muli sa iba't-ibang mga template upang punan sa dagdag na mga bahagi. Halimbawa ay naglalaman ng renderUI paraan na ito :

  renderUI: ang function () {
     var fieldset = this._makeNode ();
     this.each (na pagpapaandar (item) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE, ang item));
     }, Na ito);
     this.get ('contentBox') ang Magkabit (fieldset);
 } 

Ang unang tawag sa _makeNode nagbabalik isang Node halimbawa na naka-imbak sa ang variable fieldset . Ang bahagi ng sample ay extend sa Y.ArrayList kaya ang RADIO_TEMPLATE ay napuno ng mga halaga na kinuha mula sa ang mga item na naka-imbak sa listahan ng array at ang mga nagresultang Nodes na nakadugtong upang fieldset ang bago sa wakas ito ay nakadugtong sa contentBox ang . Ang mga espesyal na mga placeholder tulad ng {@} o {p} ay pa rin sumangguni sa mga katangian o mga katangian sa pangunahing bagay. Ang nested mga item ay naproseso lamang bilang Y.substitute gagawin.

Ang _locateNodes paraan

Karagdagang nagbibigay ng MakeNode ng isang _locateNodes paraan na kung saan ay subukan upang hanapin ang lahat ng mga elemento sa classNames na ipinahayag sa _CLASS_NAMES . Upang mahanap ang mga tiyak na mga elemento maaari mong pumasa sa anumang bilang ng mga susi ng className, kung hindi man, _locateNodes sinusubukang lahat ito. Para sa bawat elemento na natagpuan ng bawat className, _locateNodes ay makagawa ng isang pribadong ari-arian Halimbawa gamit ang salungguhit prefix na sinundan ng key na pangalan at ang “Node” hulapi. Kaya, sa aming Spinner halimbawa, _locateNodes ay bumubuo ng mga katangian _inputNode , _upNode at _downNode . Kung ang ilang mga elemento ay may ang parehong className, _locateNodes ay bumalik sa isang reference sa ang unang ng mga ito. Kung ang isang sangkap ay hindi natagpuan, walang variable ay nilikha.

Sa bahagi ng Spinner gamitin namin _locateNodes matapos ang paglikha ng markup:

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

Ang _EVENTS static ari-arian

Isang karagdagang ari-arian ay maaaring tinukoy na kasama ang mga linya ng _TEMPLATE at _CLASS_NAMES at na _EVENTS . _EVENTS ay naglalaman ng isang hash na binubuo ng mga key sa pangalan ng klase, ang bawat isa na naglalaman ng isang hash ng mga uri ng kaganapan at mga paraan upang mahawakan ang mga ito. Ito ay mas mahusay na ipinaliwanag sa isang halimbawa:

  _EVENTS: {
     '.': {
         key: {
             fn: ang '_onDirectionKey',
             args: ((Y.UA.opera) "down na:":!? "pindutin ang:") + "38, 40, 33, 34"
         },
         mousedown: '_onMouseDown'
     },
     '...': {
         mouseup: '_onDocMouseUp'
     },
     input: {
         pagbabago: '_onInputChange'
     }
 }, 

_EVENTS ay isang bagay (isang hash) sa anumang numero ng mga katangian. Ang mga pangalan ng katangian, iyon ay, ang mga susi ng hash, makilala ang mga elemento na ang mga kaganapan namin makinig sa. Sila ay ang parehong identifier na ginamit sa _CLASS_NAMES . Mayroong dalawang dagdag na mga espesyal na key "." at ".." . Habang ang mga susi ng className sumangguni sa mga elemento na nested sa loob ng contentBox , ang "." key ay tumutukoy sa ang boundingBox mismo habang ".." tumutukoy sa ang dokumento na naglalaman ng widget na ito. Tingin sa kanila ng paggawa ng isang utos ng chdir kapag matatagpuan sa boundingBox antas. Ang _EVENTS ari-arian ay naproseso pagkatapos ng renderUI , bindUI at syncUI pamamaraan ay tinatawag na kaya ang widget ay inaasahang na nakapasok sa loob ng katawan ng dokumento, kung hindi, ang ".." ay mabibigo.

Ang bawat isa sa ang mga entry sa _EVENTS ay isang karagdagang bagay na gumagamit ng uri ng kaganapan bilang nito key at pangalan ng isang halimbawa paraan upang mahawakan ito. _EVENTS , pagiging isang static na variable, ay walang access this kaya't hindi ito maaaring tumagal ng aktwal na mga sanggunian ng function, lamang ang pangalan ng ang paraan ng kaganapan tagapakinig. Ang ilang mga uri ng kaganapan kailangan ng dagdag na argumento, tulad ng key kaganapan. Sa kasong iyon, sa halip ng pagbibigay ng pangalan ng kaganapan ang humahawak maaari kang magbigay ng isang bagay sa katangian fn at args hawakan ang function na pangalan at ang mga dagdag na argumento, kung kinakailangan.

MakeNode gagamitin Node.delegate upang makinig sa mga kaganapan ng ang nested na elemento, habang ito ay gamitin ang Y.on upang makinig sa mga kaganapan mula sa boundingBox at ang katawan ng dokumento. (Tandaan: pakikinig sa key kaganapan sa anumang nested na elemento ay gumagana lamang sa mga mga bersyon 3.4.0pr1 at sa itaas, dahil delegasyon ng key . kaganapan ay hindi magagamit bago Lahat ng iba pang mga tampok ay gumagana sa mga nakaraang bersyon pati na rin)

Ang _EVENTS pahayag ay pinagsama-samang kapag magmana ang mga bahagi mula sa isa't isa. Ang bawat klase sa kadena mana ay magkakaroon ng kanyang sariling deklarasyon _EVENTS naproseso hiwalay.

Ang _ATTRS_2_UI static ari-arian

Mga kaganapan ay pumunta sa parehong paraan, mula sa UI upang ang bahagi at mula sa bahagi ng UI. Ang unang ay gagawin sa pamamagitan ng ang _EVENTS ari-arian. Pagkatapos doon ay ang mga kaganapan sa na fired pamamagitan ng pagbabago sa halaga ng katangian na kailangan na masasalamin sa interface ng gumagamit. Tulad ng nabanggit ko sa nakaraang artikulo, kapag mayroong anumang mga pangalawang epekto mula sa pagbabago ng isang configuration attribute, dapat sila ay gagawin sa pamamagitan ng mga tagapakinig ng kaganapan ng pagbabago, hindi sa pamamagitan ng opsyonal setter paraan ng katangian, na dapat lamang makitungo sa normalizing ang halaga na na-set. Ang UI ay dapat sumasalamin sa estado ng configuration ng mga katangian na, una syncUI , kapag initialized at pagkatapos ay sa bawat katangian ng pagbabago ng kaganapan. Para sa huli, kailangan namin upang maglakip ng isang kaganapan tagapakinig, kung saan namin sa bindUI . Widget na nagbibigay ng isang mekanismo na simpleng, na kung saan ko na inilarawan sa mga komento sa nakaraang artikulo.

Widget gumagamit ang ari-arian ng halimbawa _UI_ATTRS na naglalaman ng isang bagay na may dalawang karagdagang mga katangian, SYNC at BIND . Ang bawat isa sa mga ito ay isang array na naglilista ng mga pangalan ng katangian ng configuration na una synched at pagkatapos nakinig sa upang panatilihin ang mga UI na sumasalamin sa kasalukuyang mga halaga. Inaasahan ng Widget sa bawat isa sa mga entry na magkaroon ng isang paraan na kaugnay nito, na pinangalanang matapos ang pangalan ng attribute prefixed pamamagitan ng _uiSet sa unang katangian ng ang pangalan ng attribute na-convert sa uppercase na magkaroon ng paraan ng pangalan sa tamang kamelyo kaso. Kaya, kung ang "value" ay nakalista sa anumang ng mga _UI_ATTRS arrays (sa alinman sa SYNC o BIND ), Widget ay asahan upang makahanap ng isang paraan ng _uiSetValue . Ang paraan na ito ay makakatanggap ng dalawang argumento, ang value na na-set at ang src ng pagbabago. Ito ang code para sa ang aming Spinner _uiSetValue paraan:

  _uiSetValue: ng pagpapaandar (halaga, src) {
     kung (src === UI) {
         bumalik;
     }
     Ang this._inputNode.set (VALUE, this.get (FORMATTER) (halaga));
 }, 

Ang lahat ng mga malalaki mga identifier makita mo sa ito piraso ng code na tumutugma sa string constants ipinahayag sa ibang lugar, upang payagan ang mga Yui tagapiga na gawin ang trabaho mas mahusay. Paraan ang, talaga, nagtatakda ng value HTML attribute sa <input> box sa bagong hanay na halaga, pagkatapos na format. Ang reference sa textbox ay ibinigay ng mga _locateNodes . Ang src argument ay paunang naka-check upang makita kung nakatakda sa ang halaga ng string 'ui' . Kung ito ay kaya, walang aksyon ay kinuha. Ito ay upang maiwasan ang mga walang katapusang loop. Kung ang gumagamit ay nagpasok ng isang bagay sa input box, ang halaga nito ay pumunta sa ang configuration ng katangian ng value na kung saan pagkatapos ay Fire isang valueChange kaganapan, na kung saan ay magsimula _uiSetValue tinatawag na kung saan, kung check, pagkatapos ay pumunta at baguhin ang halaga ng input box, na palitawin ang buong proseso muli. Kaya, sa _uiSetValue , kung alam namin ang pagbabago ay mula sa UI, kami wala at kaya masira ang loop. Gayunpaman, ito ay nangangailangan ng isa pang piraso ng code saanman. Sa tagapakinig para sa kaganapan ng DOM, kapag kami itakda ang kumpigurasyon katangian, ginagamit namin ang ikatlong opsyonal na argument upang itakda, tulad nito:

  _afterValueChange: ng pagpapaandar (ev) {
     this.set (VALUE, ev.newVal, {src: UI});
 } 

Ito ay hanggang sa amin upang matiyak na ang mga pagbabago na darating mula sa UI ay flag kaya at pagkatapos ay suriin na parehong na bandila upang maiwasan ang mga loop.

Sa lahat ng ito sinabi, hindi ko pa nabanggit ang static ari-arian _ATTRS_2_UI nabanggit sa heading ng seksyong ito. Bilang ng mga komento sa aking nakaraang artikulo nagpapakita (sa pamamagitan ng mga blunders ginawa ko sa kanila), siguraduhin na ang lahat ng mga katangian na nakakaapekto sa ang UI ay maayos na nakalista ay medyo magulo. Hindi mo dapat-pagsisimula _UI_ATTRS mula sa simula dahil Widget ay naglilista ng isang buong pulutong ng mga katangian at mga ay mawawala. Mayroon kang upang pagdugtungin ang mga bagong pangalan ng attribute sa mga umiiral na mga, na kung saan ay medyo mahirap na tandaan kung paano ito gawin karapatan. Upang gumawa ito simple, MakeNode ay basahin mula sa mga static na _ATTRS_2_UI ari-arian at gawin iyon na pagdudugtong para sa iyo. Ito ay pagdugtungin ang lahat tulad ng mga listahan mula sa bawat at bawat klase sa kadena mana kaya sa bawat antas sa bawat klase ay maaaring panghawakan ang kanyang sariling mga katangian. Sa Spinner, kami ay may:

  _ATTRS_2_UI: {
     Magbigkis: VALUE,
     Sync: VALUE
 }, 

MakeNode ay tumatanggap ng parehong isang array ng mga pangalan o ng isang pangalan ng katangian, pati na sa kasong ito.

Tanong ang natural arises, kung bakit ang dalawang mga listahan, isa para sa nagbubuklod sa iba pang para ng pag-sync? Medyo madalas ang SYNC array ay may mas kaunting mga entry sa listahan ang BIND at ito ay dahil ang mga template para sa bahagi ay maaaring mayroon ng parehong halaga ng default na bilang ng mga katangian ng configuration at hindi na kailangan upang gawin ng isang paunang Pinagsasabay. Kaya, kung ang default na halaga para sa value configuration ng katangian ay isang walang laman na string at ang <input> elemento sa template ay walang value katangian, at pagkatapos ay doon ay hindi na kailangan i-sync ang mga ito sa Pinasimulan.

MakeNode ay suriin para sa mga dobleng entry sa anumang ng mga arrays. Kung ang anumang lumitaw, ito ay nangangahulugan na ang isang bahagi ng klase aming inherits mula sa na humahawak ito katangian at anumang bagong deklarasyon gagawin malamang overstep ang _uiSetXxxx handler para dito. Hindi sinasadya, MakeNode ay sumusuri din para sa dobleng entry sa mga _CLASS_NAMES , na maaari ring maging sanhi ng hindi pagkakasundo sa ilang, bagaman hindi lahat, pangyayari. MakeNode ay sumulat ng isang mensahe sa log para sa anumang mga error.

Konklusyon

MakeNode ay nagbibigay ng isang napaka-simpleng template ng processor, na may simpleng pag-andar na ay lubos na isinama sa klase ng pundasyon ng Widget. Nagbibigay din ito ng mga pamamaraan ng helper upang lumikha classNames ng ginamit sa template at gamitin ang mga pangalan upang mahanap ang mga nodes nilikha. Nagbibigay din ito ng paraan upang Hook sa mga kaganapan na nabuo parehong sa pamamagitan ng UI at ang bahagi mismo at iugnay ang bawat isa na may isang paraan. Ginagawa ang lahat ng mga bagay na ito, habang sinisigurado na respetuhin ang mga kadena ng mana tuwid up sa Widget at anumang antas ng mga klase na maaari mong tukuyin.

Ito ay hindi magbigay ng para sa ganap na lahat ng posibilidad, ngunit sumasaklaw ng isang mahusay na hanay ng mga ito. Gayunpaman, hindi ito ay pagsarhan mula sa pagdaragdag ng karagdagang pag-andar. Bihira ka maaaring may upang magsulat ng isang bindUI o syncUI paraan kung gumamit ka ng kola na ibinigay ng MakeNode, ngunit maaari mong gawin ito, dahil MakeNode ay hindi gamitin ang mga ito.

Bilang isang bonus sa mga na nagkaroon ng pasensya upang basahin ang Pindutan ng set na ito ngayon, binago ko na rin ng Anthony pipkin ng bahagi gallery:

• button.js
• button.css
• button-group.js
• button-group.css
• background.png
• background-active.png
• icon-sprite.gif
• halimbawa

Ang API docs ay matatagpuan dito .

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!

Yui at tagapagsakay pagbabago para sa 3.4.0

Sa 3.4.0 na sinimulan namin ang proseso ng paglilipat ang ilan sa mga tagapagsakay ng lohika sa paligid, hindi lamang gawin itong mas performant, ngunit upang gawin ito mas matatag at mas madaling gamitin sa iba pang mga lugar (tulad ng sa server). We will be rolling out more changes in future revisions, but I wanted to take some time and explain what was changed, why it was changed and how it may impact developers. For the majority of use-cases, developers will notice nothing different, except that things are a little faster and their requirement downloads are a little smaller.

Seed File

The first thing I want to address is the YUI seed file. In previous versions of YUI, our seed file was very tiny and did not contain Loader or any of its meta-data. We've found that in the 90% use-case this was not as performant as we had hoped. The normal user includes the seed file then requests their modules, which in turn means that the seed needs to first fetch Loader, then calculate all of its dependencies, then fetch them all. We now feel that this extra http request is the wrong thing to do, so the new standard seed file contains Loader and its meta-data. Yes, this will make the initial request a little larger, but it will make the loading of modules that much faster since all of its meta-data requirements are now already on the page.

If you wish to use it the old way, you can just include the yui-base seed file instead. It contains everything that is needed to make YUI run in stand-alone mode plus it contains the ability to fetch Loader on demand. If you require even finer-grained dependencies, we have created a yui-core seed file that is exactly what the old yui-base seed was.

    /build/yui/yui-min.js //YUI Seed + Loader
    /build/yui-base/yui-base-min.js //Old YUI Seed with Loader fetch support
    /build/yui-core/yui-core-min.js //Old yui-base without Loader fetch support

It should be noted that these URLs are different than the previous URLs. Anyone that was using the yui/yui-base.js files need to repoint them to yui-core/yui-core.js . If you want the older way of loading the seed and fetching Loader, you would use the yui-base/yui-base.js seed file.

The other reasoning for this change is our roadmap for making YUI run in as many places as possible. The old seed file plus Loader in a single combo server request is all well and good if you have a combo server available in your application. But what about on the server? Or in an offline app on a mobile device? These places need to minimize file access while still getting the information they need.

Rollups

The next thing that we changed was removing rollups from the system and defaulting allowRollup to false in the Loader config. What does this mean to you? Well, hopefully nothing at all. Before I explain the impact of the change, let me explain the reasoning behind it. The primary reason is, again, performance, along with payload delivery. Take this example:

     Module A: requires event-a, event-b
     Module B: requires event-c, event-d

When you request both, the rollup logic prior to 3.4.0 used to determine that you should get the event rollup. Which actually meant that you were getting:

     event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

You ended up with more on your page than you actually needed. By turning off the rollup support, YUI will now ask for only what you actually requested and nothing more. In most cases, you will not notice this . Module developers, may run into a situation where things that worked in the past may not work now. The reason for this is that they actually worked by accident before. Let me use a real world example: Dial .

In 3.3.0, Dial required this:

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter', 
        'transition',
        'intl'
    ]

For the most part, Dial worked in 3.4.0, however keyboard support did not work. After doing some simple investigating, it turned out that the rollup support was actually requesting the entire Event rollup (which includes event-move and event-key). Without the rollup logic pulling in all of event, 3.4.0 Dial no longer had all of its requirements. Making Dial's requirements more specific and defining all of its actual dependencies properly makes it work as expected.

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter',
        'event-move',
        'event-key',
        'transition',
        'intl'
    ]

For module developers, it is a best practice to make sure that your module requires exactly what it needs to function. Do not assume that an upstream module requirement is there. It's always better to make sure that you ask for what you need.

This also means that module requirements are more well defined. For example, datatype-date has Intl support built in. In previous versions you would access the Intl like this:

    Y.Intl.getAvailableLangs('datatype-date');

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. It needs to be more specific and actually ask for languages for the correct module:

    Y.Intl.getAvailableLangs('datatype-date-format');

Build File Explosion and Submodule Removal

After making this change, the next change we made was exploding the build directory and removing submodules from the core system. Submodule logic was not removed, only our meta-data structure was changed. This will provide backward compatibility for current installations.

Submodules in the core system caused a couple of issues that we needed to resolve. The first reason was performance. Each time Loader needed to calculate dependencies, it needed to walk the submodule/plugin structure of each module. Doing this thousands of times was hurting our performance during the Loader calculate routine. By removing support for submodules in the core system we saved tens of thousands of function calls and iterations.

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. So, if you requested “ dd ” Loader would inspect “ dd “'s meta-data and see a use property that looks something like this:

    "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"

In the core YUI seed file, we are also including what we are calling virtual rollups or aliases . These module definitions are exactly the same as the meta-data in Loader. This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. In future releases, we will be refining this approach even more.

After making this change, we then preceeded to explode our build files. In previous releases, the submodules determined the modules file path. Halimbawa:

    "dd": {
        "submodules": {
            "dd-drag": 
            // Module data
         }
     }

In 3.3.0 when you built “dd”, the file structure looked something like this:

    /build/dd/dd-drag.js
    /build/dd/dd-ddm.js
    /build/dd/dd-drop.js

With the build system exploded in 3.4.0, “dd”'s build files now look like this:

    /build/dd-drag/dd-drag.js
    /build/dd-ddm/dd-ddm.js
    /build/dd-drop/dd-drop.js

This allowed us to remove the “path” property from all of our module meta-data as well, saving file size and reducing the logic required to assemble the modules url paths.

If you are including a pre-configured combo URL, you must recalculate your URL when you upgrade.

The downside to this change is that if you are including a combo URL of modules to “prep” your page you can not just change the version number and upgrade. You will need to revisit the Dependency Configurator and generate a new URL with new module structure.

The Future

I will be continuing to refine, refactor and maximize every aspect of our Loader and Seed strategy. These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

Maghanap ng mga pag-uusap: Bloglines | Technorati

Ibahagi at pahabain: bookmark sa del.icio.us | Digg ito! | reddit!