Yahoo! User Interface Blog (YUIBlog)

Update: Ang "MakeNode" Extension ng Widget

Setyembre 12, 2011 sa 03:18 pm sa pamamagitan ng Satyam | Sa Development , Yui 3 Gallery | 6 Comments

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

Sa aking nakaraang artikulo, Isang Recipe para sa isang Application Yui 3, nagpakita ako ng isang paraan Y.substitute gamitin Y.substitute bilang isang pangunahing processor ng template. 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 generic na template ng processor at ito ay hindi nakatalaga bilang isa. Sa kabilang banda, mahigpit ito ay isinama sa Yui Widget klase ng 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 upang gamitin ang MakeNode. MakeNode ay magagamit bilang isang bahagi ng gallery pati na rin ang nabago Spinner bahagi at ang mga halimbawa na ginamit sa artikulong ito .

Pagpapahaba ng iyong bahagi

Upang load MakeNode, kailangan mong isama ang module sa YUI().use() ) pahayag gamit ang 'gallery-makenode' 'o, kung ang pagtukoy sa isang YUI.add() ng YUI.add (), requires bilang ang nangangailangan ng array. Pagkatapos, upang mapalawak ang iyong widget, mong ilista ito sa ikatlong argumento Y.Base.create() ), tulad nito :

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

Maaari kang magdagdag ng MakeNode kasama anumang bilang ng mga angkop na mga extension para sa Widget, tulad ng WidgetParent, WidgetChild, WidgetStdMode, atbp MakeNode nagdadagdag ng dalawang protektado mga pamamaraan upang magamit _makeNode pamamagitan _locateNodes, , _makeNode at _locateNodes, at ito ay basahin mula sa ilang mga static na katangian, na kung nakitang .

Ang lahat ng mga miyembro ng extension na ito ay alinman sa protektado o pribadong dahil ang mga ito ay nilalayong gamitin sa pamamagitan ng developer ang component at hindi sa pamamagitan ng implementer na gamit ang mga bahagi, na hindi dapat bothered sa kanila. Tandaan upang suriin ang "Ipakita ang Protected" na pagpipilian kapag tinitingnan ang API doc.

Pagtukoy ng template

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

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

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

• {@ attributeName} configuration attribute value

• {p propertyName} halimbawa ari-arian halaga

• {m methodName arg1 arg2 ….} bumalik halaga ng ibinigay na pamamaraan . Ang pagproseso ng code ay sinundan sa pamamagitan ng paraan ng pangalan at ng anumang numero ng mga argumento na pinaghiwalay ng whitespace.

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

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

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

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

• {} anumang iba pang mga halaga ay hawakan tulad Y.substitute ay.

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

Kapag ang mga placeholder may argumento, {m} m {?} ? {1} 1}, string ay dapat na nakapaloob sa dobleng panipi. Numero, booleans at null (lahat unquoted) ay mai-parse sa kanilang tamang mga uri ng data . Placeholder ay nested. Ang {?} at {1} placeholder ay karaniwang naglalaman ng isang nested placeholder para sa mga kondisyon at lubos na marahil para sa kanilang mga halaga, halimbawa:

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

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

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

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

Upang isama ang isang double quote sa loob ng isang quoted string, gamitin \\" ", ang dobleng backslash na kinakailangan dahil sa JavaScript ay bigyang-kahulugan ang isang solong isa at Tinatapon ang mga ito bago ito ay makakakuha ng sa MakeNode double quotes lamang ay pinapayagan; MakeNode eval() eval () upang pang-parse ay limitado ngunit ligtas. Ano ngunit mga numero null 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 katotohanan na halaga ng pagtuturo ng pagproseso ng code na sumusunod. Kaya, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> ​​""}/> ay makagawa ng isang minarkahan checkbox kung getLength getLength paraan ay nagbabalik ng anumang bagay ngunit zero.

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

Karagdagang placeholder ay maaaring idagdag sa MakeNode sa pamamagitan ng pagdaragdag sa kanila _templateHandlers _templateHandlers hash .

Ang _CLASS_NAMES ari-arian

Kasama ang ATTRS at _TEMPLATE static na katangian, maaari naming tukuyin ang isang _CLASS_NAMES na mga _CLASS_NAMES ari-arian na puntos sa isang array ng mga string. Ang bawat isa sa mga string ay ginagamit upang bumuo ng isang className. Kaya _CLASS_NAMES: ['input'] 'ay gumawa ng "yui3-spinner-input" " . Yaong mga classNames ay naka-imbak sa isang halimbawa this._classNames - arian this._classNames. Ang {c input} placeholder sa template sa itaas ay pinalitan ng "yui3-spinner-input" . Tinatawag ko ang string na nakalista _CLASS_NAMES mga _CLASS_NAMES, 'input' input ', ang "mga className key" dahil sila ay ginagamit bilang isang susi upang sumangguni sa ang aktwal na className o ang mga elemento na naglalaman ng mga classNames, pati na kami makita mamaya.

Maaari mong gamitin ang _CLASS_NAMES _CLASS_NAMES ari-arian upang bumuo ng anumang bilang ng mga classNames, kung kayo gamitin ang mga ito sa template o hindi. Maaari mo pa ring maabot ang mga dagdag classNames na iyon this._classNames sa loob this._classNames. Ang className ay binuo gamit ang yui3 prefix na sinundan sa pamamagitan ng ang halaga ng ari-arian NAME NAME naka maliit na, at pagkatapos string ng mga ibinigay _CLASS_NAMES _CLASS_NAMES (ang huli na ito ay hindi naka-maliit na), lahat ay pinaghihiwalay sa pamamagitan ng gitling. Ang _classNames hash ay naglalaman ng mga classNames boundingBox sa boundingBox contentBox ang contentBox, ang unang "boundingBox" "boundingBox" na key at "content" ilalim ng ang "nilalaman" na key. Nagtatalaga ng Widget sa boundingBox boundingBox ang mga classNames nagmula sa mga NAME ng NAME na ari-arian ng bawat ng mga klase sa chain mana yui3-widget sa yui3-widget. MakeNode tindahan sa this._classNames lamang ang top-pinaka className para sa boundingBox .

Kung ang WidgetStdMod module ay load, MakeNode ay ring makabuo ng mga entry HEADER sa BODY , FOOTER at footer seksyon na may mga parehong mga key, na kung saan ay din ang mga constants na tinukoy sa sa parehong module na iyon.

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

Ang {s} placeholder

Widget ay isang strings ng katangian ng configuration na tinukoy, bagaman ito ay hindi initialized sa anumang halaga. Ang katangian na ito ay nilalayong hold ng mga string na makikita sa (o, sa pamamagitan ng mga screen reader, basahin sa) ng gumagamit. Mahalaga na hindi mo na isama ang makikita string direkta sa template. Ito ay hindi isang kinakailangan ng MakeNode - hindi ito ay isang magandang ideya sa lahat. Lahat ng mga string na tiningnan ng o basahin sa gumagamit ay dapat palaging nakalagay strings attribute ang string. Ang strings attribute ay naglalaman ng hash na kung saan ang bawat indibidwal na teksto ay matatagpuan sa pamamagitan ng nito key. Ang Spinner bahagi ay ang mga sumusunod na mga string, kung saan maaari mong makita na ginamit sa template sa itaas.

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

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

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

Pagtatakda ng configuration strings string ng katangian sa paraang ito ay strings sa mga halaga ng string ng default sa mga mula sa file ng mapagkukunan ng wika gamit ang wika na dati tinukoy. Ang {s} placeholder-access ang mga string na naka - strings sa ang katangian ng mga string, 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 naisalokal na mga string sa kapalit ay maaaring magkaroon ng mga placeholder na karagdagang naproseso. Ito ay mahalaga para sa pagsasalin dahil syntactical upang ay nag-iiba-iba mula sa wika sa wika at ito ay nagpapahintulot rephrasing ang teksto, kasama ang mga placeholder upang umangkop sa anumang wika. String ay maaari ring ma-access gamit {@ strings.xxxx.yyyy.zzzz} }, na kung saan ay pinapayagan ng access sa mga string na nested mas malalim down at maiwasan ang mga karagdagang substitutions. Curly tirante ay maaaring kasama sa isang text sa pamamagitan {LBRACE} LBRACE {RBRACE} 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 MakeNode ng _makeNode paraan, tulad nito:

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

Ito ay punan ang contentBox ng aming mga widget sa markup mula sa pagproseso ng template . Ang _makeNode paraan ay nagbabalik ng isang Y.Node Y. node na maaaring idinagdag o ipinasok sa kahit saan o lamang na gaganapin para sa mamaya gamitin. Hindi ito bumalik ng isang string, ito ay gumagawa ng Node node halimbawa . (Kung ikaw ay kailangan ng isang string at hindi isang node, maaari mong gamitin ang _substitute pamamaraan, na nangangailangan na kayo na ipasa ang sa isang template.)

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

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

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

Ang _locateNodes paraan

MakeNode karagdagang nagbibigay ng _locateNodes _locateNodes paraan na kung saan ay subukan upang mahanap ang lahat ng mga elemento sa _CLASS_NAMES na ipinahayag sa _CLASS_NAMES. Upang mahanap ang mga tiyak na mga elemento maaari mong pumasa sa anumang bilang ng mga key ng className _locateNodes kung hindi man , sinusubukan ng _locateNodes lahat ito. Para sa bawat sangkap na natagpuan ng bawat className _locateNodes _locateNodes ay makabuo ng isang pribadong ari-arian Halimbawa gamit ang salungguhit prefix na sinundan ng key na "Node" "node "na hulapi. Kaya, sa aming Spinner halimbawa, _locateNodes ay bubuo ang mga katangian ng _inputNode , _upNode at _downNode . Kung ang ilang mga elemento ay ang parehong _locateNodes , _locateNodes ay babalik ng isang reference sa ang unang ng mga ito. Kung ang isang sangkap ay hindi natagpuan, ang variable na walang ay nilikha.

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

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

_EVENTS Static ang ari-arian

Isang karagdagang ari-arian ay maaaring tinukoy kasama ang mga linya _TEMPLATE _TEMPLATE _CLASS_NAMES _CLASS_NAMES _EVENTS _EVENTS _EVENTS _EVENTS ay naglalaman ng isang hash na ginawa up ng mga key ng pangalan ng klase, ang bawat isa ay naglalaman ng 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: 'baguhin', / / ​​tawag this._afterInputChange
     boundingBox: [
         {
             uri: 'key',
             fn: '_onDirectionKey', / / ​​tawag this._onDirectionKey
             args: ((Y.UA.opera) "down:":!? "pindutin ang:") + "38, 40, 33, 34"
         },
         'Mousedown' / / tawag this._afterBoundingBoxMousedown
     ],
     dokumento: 'mouseup', / / ​​mga 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 mga katangian, iyon ay, ang mga susi ng hash, makilala ang mga nodes na ang mga kaganapan namin makinig sa. Sila ay ang parehong className key na tinukoy _CLASS_NAMES _CLASS_NAMES . May ilang dagdag na espesyal na key:

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

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

• "THIS" ay tumutukoy sa ang widget mismo

• "Y" "ay Y sa Y Halimbawa.

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

Ang _EVENTS ari-arian ay naproseso pagkatapos ng renderUI , bindUI at syncUI pamamaraan ay tinatawag na kaya ang widget ay inaasahan na ipinasok sa loob ng katawan ng dokumento, kung hindi, "document" "identifier ay mabibigo .

Para sa bawat isa ng mga elemento ay isang kaganapan identifier o isang array ng mga identifier ng kaganapan. Ang isang kaganapan ay maaaring nakilala 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 sa isang paraan na pinangalanan "_after" na "_after" na sinundan ng elemento identifier na ang mga unang character capitalized sinundan sa pamamagitan ng ang uri ng kaganapan sa unang character nito capitalized. Ang block ng code sa itaas ay nagpapakita ng mga pamamaraan na tinatawag na para sa bawat kaganapan.

Ang isang kaganapan identifier ay maaari ring isang bagay sa type katangian fn uri args 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 ang kaganapan kaya pag-iwas sa ang awtomatikong pagpapangalan . Dahil _EVENTS ay isang static na ari-arian, ito ay walang this dito kaya't hindi ito maaaring tumagal ng isang aktwal na reference sa isang paraan, tanging ang pangalan nito . Ang args argument ay maaaring gamitin upang pumasa ang karagdagang mga argumento sa tumatawag tulad key sa key na kaganapan na kung saan ay nangangailangan ng isang key detalye.

MakeNode gagamitin Node.delegate upang makinig sa mga kaganapan sa mga elemento sa loob boundingBox boundingBox, habang ito ay Node.after ang Node.after upang makinig sa mga boundingBox mula sa boundingBox at ang katawan ng dokumento. Ito ay gamitin this.after this.after upang makinig sa mga kaganapan THIS ilalim ng Y.after key at Y.after para sa mga Y na nakalista sa ilalim ng Y key. Ang lahat ng mga kaganapan ay nakinig sa paggamit pagkatapos tagapakinig ng kaganapan dahil ang mga ito ay nilalayong gawing widget tumugon sa mga kaganapan, hindi i-filter ang pag-uugali ng mga bagay na apoy ang mga ito upang hindi kaso ang mga kaganapan ay maaaring pumigil o tumigil. (Tandaan: pakikinig sa ang key kaganapan sa anumang nested elemento ay gumagana lamang sa mga 3.4.0pr1 bersyon at sa itaas, dahil ang key ng key na kaganapan ay hindi magagamit bago ang lahat ng mga iba pang mga tampok na gumagana sa mga nakaraang bersyon pati na rin.).

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

_ATTRS_2_UI Static ang ari-arian

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

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

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

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

  _afterValueChange: ang function (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 flag upang maiwasan ang mga loop. Huwag gamitin ang identifier src kapag ng pagtatakda ng halaga ng ang attribute, source source na hindi kinikilala .

Sa lahat ng ito sinabi, hindi ko pa talked tungkol sa _ATTRS_2_UI _ATTRS_2_UI ari- arian na nabanggit sa heading ng seksyong ito. Bilang ng mga puna sa aking nakaraang artikulo na nagpapakita (sa pamamagitan ng mga blunders na ko ginawa sa kanila), siguraduhin na ang lahat ng mga katangian na nakakaapekto ang UI ay maayos na nakalista ay medyo magulo. Hindi ka dapat magpasimula _UI_ATTRS mga _UI_ATTRS mula sa simula dahil Widget ay listahan ng isang buong maraming ng mga katangian at mga ay mawawala. Kailangan mong pagdugtungin ang bagong pangalan ng katangian sa ang mga umiiral na, na kung saan ay medyo mahirap matandaan kung paano ito gawin karapatan. Upang gawin ito simple, MakeNode ay basahin mula sa mga static na ari- _ATTRS_2_UI _ATTRS_2_UI at gawin na pagdudugtong para sa iyo . Ito ay pagdugtungin ang lahat ng mga tulad listahan mula sa bawat at bawat uri sa mana ang chain ito sa bawat antas klase sa bawat ay maaaring hawakan ang kanyang sariling mga katangian. Sa Spinner, kami ay may:

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

MakeNode ay tanggapin ang parehong isang array ng mga pangalan o isang solong pangalan ng katangian, tulad ng sa kasong ito.

Tanong natural arises, kung bakit ang dalawang mga listahan, isa para sa umiiral sa iba pang para- SYNC ? Sync ay ginagamit sa unang pagkakataon sa paligid, renderUI ang bindUI at bindUI pamamaraan, kung umiiral nila, ay tinatawag na syncUI bago syncUI habang ang mga BIND sa magtali ay nakasalalay sa nararapat na mga katangian para sa mamaya mga pagbabago. Medyo madalas ang SYNC array ay may mas kaunting mga entry sa BIND ng magbigkis at ito ay dahil ang mga template para sa mga bahagi ay maaaring mayroon ng parehong halaga ng default na bilang configuration ang katangian at hindi na kailangan upang gawin ng isang paunang-sync. Kaya, kung ang default na halaga para value halaga ng configuration ng katangian ay isang walang laman <input> string at ang <input> elemento value template ay walang halaga na katangian, pagkatapos ay doon ay hindi na kailangan i -sync ang mga ito sa Pinasimulan.

Katangian na nakalista BIND magtali ay magkakaroon _uiSet Xxxx mga _uiSet xxxx pamamaraan na tinatawag sa anumang pagkakasunod-sunod, tulad ng mga katangian ay maaaring itakda sa anumang pagkakasunod-sunod. Attribute na nakalista SYNC Sync ay tinatawag na isang beses sa pagkakasunod-sunod kung saan sila ay nakalista sa mga ninuno bago sa kanilang mga inheritors, kaya kung isa ay umaasa sa isa pang (na hindi sila dapat), ang order ay maaaring mahalaga.

MakeNode ay suriin para sa mga duplicate na mga entry sa anumang ng mga arrays. Kung ang anumang lumitaw, ito ay nangangahulugan na ang isang uri ng bahagi ng aming inherits mula sa na humahawak ito katangian at anumang _uiSet Xxxx ay malamang overstep _uiSet xxxx handler para sa. Hindi sinasadya, ang MakeNode din tseke para sa mga _CLASS_NAMES na mga entry sa _CLASS_NAMES, na maaari ring maging sanhi salungatan sa ilang, bagaman hindi lahat, ang mga pangyayari. MakeNode ay sumulat ng isang mensahe sa log para sa anumang naturang error.

Ang _PUBLISH ari-arian

Panghuli, ang _PUBLISH static ari-arian ay listahan ng mga kaganapan na mai-publish . Ito ay naglalaman ng hash gamit ang pangalan ng kaganapan dahil ang mga key 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 chain mana. Ang parehong pangalan ng kaganapan ay maaaring mai-publish sa isang klase at sa anumang klase ng inheriting mula dito, na kung saan ay ang mga configuration na mga katangian ng mamaya mga sasapaw sa mga 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 _PUBLISH ay isang static na ari-arian this walang access dito, kapag pagtukoy function, ito ay ang pangalan ng ang paraan, tulad ng isang string, na pangangailangan upang maging ibinigay.

Konklusyon

MakeNode ay nagbibigay ng isang napaka-simpleng template ng processor, na may pag-andar na lubos na isinama sa klase ng pundasyon ng Widget. Nagbibigay din ito ng mga paraan helper upang lumikha ng mga classNames ay ginamit sa template at upang gamitin ang mga pangalan upang mahanap at sumangguni sa nodes nilikha. Nagbibigay din ito ng paraan upang hook sa mga kaganapan na binuo parehong sa pamamagitan ng UI at ang bahagi mismo at iugnay ang bawat isa ay may isang paraan. Ito ay 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.

Hindi ito magbigay para sa ganap na ang 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. Maaari mong bihira na magsulat ng isang bindUI o syncUI paraan kung gagamitin mo ang kola na ibinigay sa pamamagitan ng MakeNode, ngunit maaari mong gawin ito, dahil MakeNode ay hindi gamitin ang mga ito .

Bilang isang bonus sa mga na ang pasensya upang basahin ito ngayon, ako rin nabago Anthony pipkin Pindutan hanay ng mga bahagi ng gallery at ginawa ng isang akurdyon at TimeSpinner bahagi, lahat ng magagamit na sa gallery.

Tungkol sa may-akda: Daniel Barreiro (screen name Satyam) ay sa paligid para sa lubos ng ilang oras. Ang ENIAC ay naka-off ang araw na bago siya ay ipinanganak, kaya siya nasagot na ngunit hindi siya nasagot magkano dahil. Siya ay nagkaroon ng pagkakataon na sapok card, ang programa sa 6502 chips (tandaan ang Apple II?), Sariling isang TRS-80 at makita ang ilang mga hindi kapani-paniwala na piraso ng operating kagamitan sa kanyang katutubong Argentina na kung saan ay maaaring sa Museo sa ibang lugar. Kapag globalization binuksan ang mga pintuan sa mundo, ang kanyang pagkatapos ay bahagya na magagamit Ingles (plus isang Electrical Engineering degree) ilagay siya sa career path na natapos sa isang 5-taon ng trabaho sa ang Bay Area pabalik sa mga araw ng NCSA Mosaic . Lubos intrigued sa pamamagitan ng nakakatawa squiggles isang kaibigan ng kanyang mga isinulat sa kanyang plain text editor, na puno ng <'at>', siya natapos sa pag-aaral lubos ng maraming tungkol sa mundo ng engineering sa frontend. Ito ay isang mahabang paglalakbay dahil COBOL at Fortran. Ngayon siya ay tunay maligaya semi-retirado sa Mediterranean baybayin na malapit sa Barcelona, ​​Espanya .

Hanapin ang mga pag- uusap : Bloglines | Technorati

Ibahagi at i- extend: Bookmark sa del.icio.us | Digg ito ! | reddit!