Blog ng Yahoo! User Interface (YUIBlog)

YUIConf 2011 Early Bird Registration Ay Ngayon Buksan

Setyembre 30, 2011 sa 09:31 sa pamamagitan ng Jenny Donnelly | Sa Development , Yui Events | 4 Puna

Maagang-ibon registration para sa YUIConf 2011 na ngayon bukas sa Eventbrite! kaganapang ito taon ay gaganapin sa Nobyembre 2-04 sa Mahusay America Yahoo! 's campus. Kami ay nagaganyak upang dalhin sa iyo ng isang buong araw ng mga kamay-sa workshop sa pagsasanay (Wed) na sinundan ng dalawang buong araw ng mga tech talks tungkol Yui (Huwebes / Biyernes). Registration para sa conference na ang nagkakahalaga ng $ 75 sa taong ito, na may isang maagang-ibon na rate ng $ 50. Registration para sa workshop ay magiging hiwalay mula sa ang pagpupulong at mga detalye ay darating sa lalong madaling panahon.

Kami ay abala aporo up sa mga mahusay na mga paksa, kabilang ang:

• Yui bahagi malalim dives, kabilang ang Dial at Calendar
• Yui sa mobile kapaligiran
• Pagsubok sa Yui
• Real-mundo migration kuwento
• at marami, marami pang iba!

Gaya ng lagi, ang mga session ng conference ay video-taped at magagamit sa Yui Teatro at ang aming YouTube channel para sa lahat upang tamasahin.

Sana nakikita mo doon!

(IMPORTANT! Internal Yahoos mangyaring magrehistro para sa isang tiket ng Yahoo! Employee at magbigay ng email address ng iyong trabaho.)

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Yui 3.4.1 ay ngayon nakatira

Setyembre 27, 2011 sa 02:37 sa pamamagitan ng ang Allen Rabinovich | Sa Development | 8 mga Komento

Ang Yui 3.4.1 maikling cycle release ay magagamit na ngayon sa CDN at para sa pag-download , higit pa kaysa sa isang linggo sa maagang! Narito ang ilang mga highlight para sa release na ito:

• Higit sa 150 mga pag-aayos ng bug para sa Controller , Panel , DataTable , Calendar , at isang bilang ng iba pang mga module.
• Bug Pag-aayos sa Y.substitute () sa pamamagitan ng Yui kontribyutor Satyam .
• Ang japanese wika ng suporta para sa Calendar at Console , kagandahang-loob ng Yui kontribyutor Ryuichi Okumura .
• Miscellaneous tweaks na ang mga papeles at mga halimbawa.

Maaari mo rin suriin ang buod ng lahat ng mga pagbabago na nabanggit sa ang mga file ng bahagi ng kasaysayan para sa Yui 3.4.1 pati na rin ang buong listahan ng mga tiket na direksiyon habang Yui 3.4.1 unlad . Gaya ng lagi, Gusto naming ikinalulugod na file kang anumang mga mungkahi na maaaring mayroon ka o depekto maaari mong alisan ng takip sa aming database ng tiket. Puna para sa Yui 3.4.1 ay maaaring ipinasok sa ang tiket Yui 3 database .

Gusto rin namin nais na ipahayag na sa susunod na release ng Yui, DataType.Date, DataType.Number at DataType.XML ay deprecated pabor ng Y.Date, Y.Number, at Y.XML, ayon sa pagkakabanggit. Paurong pagkakatugma ay mananatili para sa isang release, upang bigyan ang lahat ng pagkakataon upang lumipat sa.

Oh, at isa pang bagay: namin na rin sa aming mga paraan sa ng migrating ang Yui Teatro nilalaman sa YouTube . Para sa mga starters, tingnan ang panayam serye ang Douglas Crockford "Crockford sa JavaScript" - kumpleto na may subtitle!

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Bumoto para sa Yui sa Open mga Finals Source parangal

Setyembre 26, 2011 sa 09:21 sa pamamagitan ng Jenny Donnelly | Sa ang pinaghalo | 1 Puna

Salamat sa lahat na hinirang Yui para sa Packt Publishing Open Source mga parangal. Bumoto ngayon para Yui bilang iyong mga paboritong JavaScript library!

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Yui 3.4.1 PR1 Ngayon Magagamit Sa CDN

Setyembre 22, 2011 sa 01:35 sa pamamagitan ng Jenny Donnelly | Sa Development | 1 Puna

Yui 3.4.1 PR1 ay magagamit na ngayon para sa pagsubok ng komunidad at feedback. Ito ay magagamit sa Yahoo! CDN sa http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , at maaari mong makita ang mga pagbabago pagpunta sa 3.4.1 mula sa listahan ng mga tiket na check sa para sa release .

Ang 3.4.1 release ay isang mas maliit na bug-fix na release sa isang pinaikling ikot ng pag-unlad, na naka-iskedyul na pumunta-mabuhay sa pamamagitan ng Oktubre ika-5. -Mangyaring mga file bug at regressions sa database ng tiket sa YUILibrary.com ng umaga ng Lunes, Setyembre 26 ng upang maaari naming siguraduhin na ang anumang mga kritikal na isyu ay bago ang pangkalahatang release. Kung walang mga kagyat na isyu ay iniulat, kami ay pakawalan 3.4.1 bilang maaga bilang 27 Set.

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Yui: Buksan ang Oras ng HU 15 Set

Setyembre 12, 2011 sa 09:58 sa pamamagitan ng Lucas Smith | Sa Development , Buksan ang Oras | 2 mga Komento

MakeNode extension Satyam ng

Kung hindi mo alam ng Satyam , kailangan mong bagong upang Yui. Siya ay naging isang poste ng komunidad ng Yui dahil ang unang araw ng Yui 2. Kanyang mga artikulo sa YUIBlog ang ilang mga pinaka-basahin at refer sa mga pinagkukunan para sa "kung paano talaga gamitin ang library" na istilo ng nilalaman. Kung makakita sa iyo na Satyam sinulat ito, ito ay nagkakahalaga ng read, at malamang, isang muling-basahin at ng isang bookmark.

Sa Hulyo, siya ay nai-post ng isang mahusay na artikulo sa isang extension ng MakeNode Widget na naglalayong gawing simple ang ilan sa mga karaniwang mga pattern na ginagamit kapag ang pagbuo ng Widgets, at gumawa ng mas madali upang maiwasan ang mga karaniwang missteps. Ang module ay dahil idinagdag sa Gallery at lang mas maaga ngayon, siya nai-post ng isang update sa kanyang orihinal na artikulo.

Iyan ay kung ano ang kami ay pagpunta sa pakikipag-usap tungkol sa. Ang mga tampok, ang kasaysayan, at ang mga reasonings. Kung kayo ay gamit ang mga bahagi ng imprastraktura, at sa partikular, Y.Widget , malamang mo na nakatagpo ng hindi bababa sa ilan sa mga hurdles Satyam itakda sa address sa MakeNode . Ito ay pagpunta sa maging isang pinakamahusay na mga fest kasanayan, upang dalhin ang iyong Notepad, at upang ibahagi ang iyong sariling karanasan.

Oras & Detalye

Kami ay magiging online na sa Huwebes mula 10 ng umaga upang 11am PDT.

Sumali sa pulong

Pagtatala

Ang record ay magagamit sa YUILibrary YouTube channel .

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Magsumite ng isang na Talk YUIConf 2011

Setyembre 12, 2011 sa 15:48 sa pamamagitan ng Jenny Donnelly | Sa Development , Yui Events | Walang Puna

Ipakita ang off ang code kayo ay gumagana sa o ibahagi ang isang bagay na natutunan mo habang nagtatrabaho sa Yui! Isumite ang iyong panukala sa ng Yui mga kaganapan (sa) yahoo-inc.com sa pamamagitan ng Biyernes, Setyembre 23, 2011. Siguraduhin na isama ang:

• Pamagat
• Paglalarawan
• Inilaan madla
• Ang iyong pangalan
• Ang isang maikling bio

YUIConf 2011 ay gaganapin sa Nobyembre 3rd at 4th sa Yahoo! ng Santa Clara, CA campus. Ang iyong pagtatanghal ay dapat tumagal ng tungkol sa 45 minuto. Kami ay magkaroon ng hanggang sa 15 minuto pagkatapos ng iyong pagtatanghal para sa Q & A. I-post ang anumang mga katanungan sa mga komento, o email sa amin nang direkta sa Yui-mga kaganapan (sa) yahoo-inc.com.

Maghanap ng mga pag-uusap: Bloglines | Technorati

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

Update: Ang "MakeNode ang" Extension ng Widget

Setyembre 12, 2011 sa 3:18 ng Satyam | Sa Development , Yui 3 Gallery | 8 Puna

Editor ng Tandaan: Ang artikulong ito ay orihinal nai-publish na mas maaga taon na ito . Simula noon, ang module ng MakeNode ay nai-publish sa Gallery Yui at natanggap na ang ilang mga pagpapahusay. Ang artikulong ngayon ay nagpapakita ng lahat ang pinakabagong mga pagbabago sa MakeNode.

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. 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 Yui Gallery, 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. MakeNode ay magagamit bilang isang bahagi ng gallery pati na rin ang nabago na Spinner bahagi at ang mga halimbawa na gagamitin sa artikulong ito .

Pagpapahaba ng iyong mga bahagi

Upang load MakeNode kailangan mong isama ang module sa iyong YUI().use() pahayag na gamit ang pangalan ng 'gallery-makenode' o, kung ang pagtukoy sa isang module sa pamamagitan ng YUI.add() , ilista ang mga ito bilang ang requires array. 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 paraan upang gamitin sa pamamagitan ng developer, _makeNode at _locateNodes, at ito ay basahin mula sa ilang mga static na katangian, na kung nakitang .

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. Tandaan na suriin ang "Ipakita ang Protected" na pagpipilian kapag tinitingnan ang API docs .

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.

• {c classNameKey} CSS className na nabuo mula sa ari-arian ng _CLASS_NAMES static (tingnan ang ari-arian Ang _CLASS_NAMES seksyon sa ibaba)

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

• {? condition valueIfTrue valueIfFalse } magkano tulad ng ?: operator ng JavaScript, sinusuri sa valueIfTrue kung kondisyon ay truish na, valueIfFalse kung hindi man.

• {1 condition valueIfOne valueIfMore } ginagamit upang makabuo ng mga salita sa isahan / maramihan na batay sa halaga ng mga kondisyon.

• {} 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'] .

Kapag mga placeholder may mga argumento, tulad ng {m} , {?} at {1} , string ay dapat kasama sa double quotation marks. Numero, booleans at null (lahat unquoted) ay mai-parse sa kanilang tamang mga uri ng data. Mga placeholder maaari ay nested. Ang {?} at {1} ay karaniwang naglalaman ang mga placeholder isang nested placeholder para sa kalagayan at lubos na marahil para sa kanilang mga halaga, halimbawa:

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

Kung ang ari-arian ng qty ay 1, ito ay suriin sa "1 unit" , para sa 2 o higit pang mga ito ay bumalik "2 units" at iba pa. Isang mas detalyadong bersyon pagharap sa zero ay magiging:

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

Tandaan na ang resulta ng pagproseso ng panloob na mga placeholder, kung ang isang string, ay dapat na kalakip sa kanyang sariling hanay ng mga quotes.

Upang isama ang isang double quote sa loob ng isang quoted string, gamitin ang \\" , ang double backslash na kinakailangan dahil JavaScript ay bigyang-kahulugan ang isang solong isa at Tinatapon ang mga ito bago ito ay nakakakuha sa MakeNode double quotes lamang ay pinapayagan; MakeNode ay hindi gumagamit ng eval() upang pang-parse ay limitado ngunit ligtas. Ano ngunit mga numero, null , booleans at double quoted string ay hindi papansinin.

Ang {?} placeholder ay din madaling gamitin upang gamitin sa mga checkbox at mga radio button. Ito ay maaaring gamitin upang makabuo ng string ang "checked" depende sa halaga ng katotohanan ng pagtuturo sa pagpoproseso ng code na sumusunod. Kaya, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> ay makagawa ng isang markadong checkbox kung ang getLength paraan ay nagbabalik ng anumang bagay ngunit zero.

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 static 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" . Tumawag ako ng mga string na nakalista sa _CLASS_NAMES , tulad ng 'input' , ang "className ng susi" dahil sila ay ginagamit bilang isang susi upang sumangguni sa ang ng aktwal className o ang mga elemento na naglalaman ng mga classNames, bilang namin makita mamaya.

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 ng ang boundingBox at ang contentBox , ang unang sa ilalim ng ang "boundingBox" 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 WidgetStdMod module ay load, MakeNode ay ring makabuo ng mga entry para sa HEADER , BODY at FOOTER seksyon na may mga parehong mga susi, na kung saan ay din ang mga constants na tinukoy sa na parehong module.

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 halos tulad ng paggamit ng {@ strings.xxxx} maliban na ang mga naisalokal na kapalit string ay maaaring magkaroon ng mga placeholder na karagdagang naproseso. Ito ay mahalaga para sa pagsasalin dahil syntactical sunod ay nag-iiba mula sa mga wika sa wika at ito ay nagbibigay-daan rephrasing ang teksto, kasama ang mga placeholder upang umangkop sa anumang wika. String ay maaari ring ma-access gamit ang {@ strings.xxxx.yyyy.zzzz} , na payagan ang access sa mga string ng nested mas malalim down na at maiwasan ang mga karagdagang substitutions. Kulot tirante ay maaaring kasama sa isang teksto sa pamamagitan ng paggamit ng na {LBRACE} at {RBRACE} bilang placeholder.

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. (Kung gagawin mo kailangan ng isang string at hindi isang node, maaari mong gamitin ang paraan ng _substitute , na nangangailangan na dumadaan sa isang template.)

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: {
     input: 'pagbabago', / / ​​tawag this._afterInputChange
     boundingBox: [
         {
             uri: 'key',
             fn: sa '_onDirectionKey', / / ​​tawag this._onDirectionKey
             args: ((Y.UA.opera) "down na:":!? "pindutin ang:") + "38, 40, 33, 34"
         },
         Ang 'mousedown' / / tawag this._afterBoundingBoxMousedown
     ],
     Ang dokumentong: sa 'mouseup', / / ​​tawag this._afterDocumentMouseup,
     Y: 'broadcastingObject: someEvent' / / tawag na ito ["_afterYBroadcastingObject: someEvent"]
 }, 

_EVENTS ay isang bagay (isang hash) sa anumang bilang ng mga entry. Ang mga pangalan ng katangian, iyon ay, ang mga susi ng hash, makilala ang mga nodes na ang mga kaganapan namin makinig sa. Sila ay ang parehong mga key ng className na tinukoy sa _CLASS_NAMES . Mayroong ilang mga karagdagang espesyal na key:

• "boundingBox" ay sumangguni sa ang bounding box mismo.

• "document" tumutukoy sa ang dokumento na naglalaman ng widget na ito.

• "THIS" tumutukoy sa ang widget mismo

• "Y" tumutukoy sa Y Halimbawa.

Kung Widget ay pinalawak sa WidgetStdMod pati na rin, ang mga pindutan ng HEADER , BODY at FOOTER ay sumangguni sa mga seksyong iyon dahil sila magagamit sa ang _classNames hash. Ang JavaScript ay hindi kailangan ang mga key na nakasiping kung sila ay wastong mga tagapagpakilala kaya wala sa itaas kailangan na nakasiping.

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 "document" identifier ay mabibigo.

Para sa bawat isa ng mga elemento ay isang kaganapan identifier o isang array ng mga tagapagpakilala ng kaganapan. Ang kaganapan ay makikilala sa pamamagitan ng uri ng kaganapan upang makinig sa o isang bagay na may karagdagang mga detalye. Sa pamamagitan ng default, ang MakeNode ay gamitin bilang isang tagapakinig ng isang paraan pinangalanan gamit ang prefix na na "_after" sinundan sa pamamagitan ng elemento identifier sa unang karakter nito capitalized na sinundan sa pamamagitan ng uri ng kaganapan sa unang karakter nito malaking titik. Ang code block sa itaas ay nagpapakita ng mga pamamaraan na tinatawag na para sa bawat kaganapan.

Isang kaganapan identifier ay maaari ring maging isang bagay na may mga katangian ng type , fn at args . Ang type ay sapilitan at nagpapahiwatig ng uri ng kaganapan na nakinig sa. Ang fn ari-arian ay nagbibigay ng pangalan ng ang paraan na makinig sa kaganapan kaya pag-iwas sa mga awtomatikong pagpapangalan. Dahil _EVENTS ay isang static na ari-arian, ito ay walang access this kaya't hindi ito maaaring tumagal ng isang aktwal na reference sa isang paraan, lamang ang pangalan nito. Ang mga args argument ay maaaring gamitin upang pumasa ang karagdagang mga argumento sa tumatawag tulad ng sa key kaganapan na kung saan ay nangangailangan ng isang susi specification.

MakeNode gagamitin Node.delegate upang makinig sa mga kaganapan sa mga elemento sa loob ng boundingBox , habang ito ay gamitin ang Node.after upang makinig sa mga kaganapan mula sa boundingBox at ang katawan ng dokumento. Ito ay gamitin ang this.after makinig sa mga kaganapan sa ilalim ng THIS key at Y.after para sa mga tagapakinig na nakalista sa ilalim ng Y key. Lahat ng mga kaganapan ay nakinig sa paggamit pagkatapos ng mga tagapakinig ng kaganapan dahil ito ay nilalayong widget tumugon sa mga kaganapan, hindi upang salain ang mga pag-uugali ng mga bagay na apoy sa mga ito upang sa walang kaso mga kaganapang ito ay maaaring pumigil o tumigil. (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, na kung saan ay normal gawin 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. Huwag gamitin ang identifier src kapag ang pagtatakda ng halaga ng katangian, hindi source kung saan ay hindi kinikilala.

Sa lahat ng ito sinabi, Hindi ko pa talked tungkol sa static ari-arian ng _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, bakit dalawang mga listahan, isa para sa nagbubuklod sa iba pang para ng pag-sync? SYNC ay ginagamit sa unang pagkakataon sa paligid, matapos ang renderUI at bindUI pamamaraan, kung wala sila, ay tinatawag na at bago syncUI habang ang mga nakalista sa BIND ay nakasalalay sa ang mga nararapat na katangian para sa mga mamaya pagbabago. 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.

Mga katangian na nakalista sa BIND ay magkaroon ng mga pamamaraan ng ang kanilang _uiSet Xxxx tinatawag sa anumang pagkakasunod-sunod, tulad ng mga katangian ay maaaring itakda sa anumang pagkakasunod-sunod. Mga katangian na nakalista sa SYNC ay tinatawag na isang beses sa pagkakasunud-sunod kung saan sila ay nakalista sa mga ninuno bago sa kanilang mga inheritors, kaya kung isa ay nakasalalay sa ibang (kung saan hindi sila dapat), ang order ay maaaring mahalaga.

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 _uiSet Xxxx 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.

Ang _PUBLISH ari-arian

Panghuli, ang ang _PUBLISH static ari-arian ay ilista ang mga kaganapan na may mai-publish. Ito ay naglalaman ng isang hash na gamit ang pangalan ng kaganapan bilang nito mga susi at isang bagay na literal ng mga katangian ng configuration bilang nito mga halaga. Ito ay i-publish ang lahat ng mga kaganapan na nakalista sa anumang naturang ari-arian sa lahat ng mga kadena mana. Ang parehong pangalan ng kaganapan ay maaaring mai-publish sa isang klase at sa anumang klase inheriting mula sa ito, kung saan ay gumawa ng mga katangian ng configuration ng mamaya mga override ang isa sa mga mas lumang mga. Halimbawa, maaaring gusto mong gumawa ng isang umiiral na kaganapan ng broadcast sa buong mundo. Tulad ng sa _EVENTS ari-arian, dahil ang _PUBLISH ay isang static na ari-arian nang walang access this , kapag tumutukoy function, ito ay ang pangalan ng ang paraan, bilang isang string, na nangangailangan ay mabibigyan.

Konklusyon

MakeNode ay nagbibigay ng isang napaka-simpleng template ng processor, na may 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 at sumangguni sa 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 at ginawa ng isang akurdyon at TimeSpinner bahagi, ang lahat ng mga magagamit na sa Gallery .

Tungkol sa may-akda: Daniel Barreiro (screen name Satyam) ay sa paligid para sa lubos ng ilang oras. Ang ENIAC ang naka-off araw ng bago siya ay ipinanganak, kaya siya nasagot na ngunit siya ay hindi nasagot magkano dahil. Siya ay nagkaroon ng pagkakataon sa sumbi card, programa 6502 chips (tandaan ang Apple II?), Sariling isang TRS-80 at tingnan ang ilang mga hindi kapani-paniwala na piraso ng kagamitan ng operating sa kanyang katutubong Argentina na maaaring sa Museo sa ibang lugar. When globalization opened the doors to the world, his then barely usable English (plus an Electrical Engineering degree) put him on the career path which ended in a 5-year job in the Bay Area back in the days of 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.

Maghanap ng mga pag-uusap: Bloglines | Technorati

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