Yahoo! User Interface Blog (YUIBlog)

YUIConf 2011 Early Bird Registracija je sada otvoren

Rano-ptica registracija za YUIConf 2011 od sada je otvoren na Eventbrite! Ovogodišnja manifestacija održat će se 2-4 studenog na Yahoo! 's Great America kampusu. Mi smo uzbuđeni da bi vam cijeli dan hands-on radionice (Wed), a nakon puna dva dana tech govori o Yui (čet / pet). Registracija za konferenciju košta 75 dolara ove godine, uz rano ptica stopi od 50 $. Prijave za radionice će biti odvojena od konferencije i detalji dolaze uskoro.

Mi smo zauzeti podstava gore velikim temama, uključujući:

• Yui dojelova za duboke urona, uključujući biranje i kalendar
• YUI u mobilnim okruženjima
• Ispitivanje s Yui
• Stvarnom svijetu migracija priče
• i mnogo, mnogo više!

Kao i uvijek, konferencija će biti snimljen video-i dostupni na Yui kazališta i naš YouTube kanal za sve za uživanje.

Nadam se da vas vidjeti tamo!

(IMPORTANT! Unutarnja Yahoos molimo vas da se registrirate za ulaznicu Yahoo! zaposlenika i osigurati svoju poslovnu adresu e-pošte.)

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI 3.4.1 sada žive

YUI 3.4.1 kratki ciklus release je sada dostupan na CDN i preuzimanje više od tjedan dana rano! Evo nekoliko vrhunci za ovom izdanju:

• Više od 150 bug ispravke za kontroler i vijeću i DataTable i kalendar , te niz drugih modula.
• Bug popravci na Y.substitute () je Yui Ženski Satyam .
• Japanski jezik podrška za kalendar i konzole , ljubaznošću Yui Ženski Ryuichi Okumura .
• Razno Friziranje na dokumentaciju i primjere.

Možete također može pregledati sažetak svih promjena je navedeno u datotekama komponente povijesti za YUI 3.4.1 , kao i cijeli popis ulaznica kojima će se tijekom YUI 3.4.1 razvoja . Kao i uvijek, bili bismo Vam zahvalni da podnese bilo kakve prijedloge što bi mogli imati ili oštećenja možda razotkriti u našoj bazi podataka karte. Povratne informacije za YUI 3.4.1 mogu se upisati u u Yui 3 ulaznica baze podataka .

Mi bi također željeli objaviti u sljedećem izdanju Yui i DataType.Date i DataType.Number i DataType.XML će biti uklonjena u korist Y.Date i Y.Number i Y.XML, respektivno. Kompatibilnost unatrag će se čuvati jedno izdanje, dati svakome priliku prijeći.

Oh, i još jedna stvar: mi smo na dobrom putu u migraciju na sadržaj Yui Theater na YouTube . Za početak, provjerite Douglasa Crockford predavanje serije "Crockford JavaScript" - zajedno s titlovima!

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Glasajte za Yui u Open Source Awards finala

Hvala svima koji su nominirani Yui za Packt Publishing Open Source Awards. Glasajte za sada Yui kao svoj ​​omiljeni JavaScript knjižnici!

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI 3.4.1 PR1 sada su dostupni na CDN

YUI 3.4.1 PR1 je sada dostupan za testiranje i povratne informacije zajednice. To je dostupna na Yahoo! CDN na http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js~~pobj , a možete vidjeti promjene ide u 3.4.1 iz popisa ulaznica provjerenih u za oslobađanje .

3.4.1 release će biti manji bug-fix release sa skraćenom razvojnog ciklusa, zakazano je za go-živjeti od 5. listopada. Molimo prijavljivati ​​bugove i regresije u ulaznica baze podataka o YUILibrary.com je ujutro u ponedjeljak, 26. rujna kako bismo bili sigurni da sve kritične pitanja rješavaju pred opće release. Ako nema hitnih pitanja prijavljen, mi ćemo objaviti 3.4.1 već 27. rujna.

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

YUI: Open sati Čet 15. rujna

Satyam je MakeNode proširenje

Ako ne znate Satyam , morate biti novi Yui. On je bio stup Yui zajednice od ranih dana 2 Yui. Njegovi članci o YUIBlog su neke od najčitanijih i iz izvora za "kako bismo doista mogli koristiti knjižnici" stil sadržaj. Ako vidite da Satyam je pisao, to je vrijedno pročitati, i najvjerojatnije, ponovno čitati i oznaka.

U srpnju, objavio je veliki članak na MakeNode produženje widget koji ima za cilj pojednostaviti neke od uobičajenih obrazaca koji se koriste pri izgradnji Sprave, a čine ga lakše izbjeći uobičajene missteps. Modul jer je dodan u Galeriji i samo ranije danas, on je objavio update na njegov originalni članak.

To je ono što smo si idući u biti pričaju. Osobine, povijest, i reasonings. Ako ste koristeći komponenti infrastrukture, a osobito Y.Widget , vjerojatno ste naišli na barem neke od prepreka Satyam utvrđenim za rješavanje s MakeNode . Ovo će biti najbolje prakse fest, pa donijeti svoju bilježnicu, i svoje iskustvo podijeliti s drugima.

Vrijeme i Brodu

Mi ćemo biti online u četvrtak od 10 do 11 sati PDT.

Pridružite se sastanak

Snimanje

Snimanje je dostupan u YUILibrary YouTube kanalu .

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Pošaljite Talk YUIConf 2011

Pokažite kod ste radili ili dijeliti nešto što ste naučili radeći s Yui! Pošaljite svoj prijedlog za Yui-događaja (at) yahoo-inc.com do petka, 23. rujna 2011. Budite sigurni da uključuju:

• Naslov
• Opis
• Ciljana publika
• Vaše ime
• Kratak bio

YUIConf 2011 održat će se 3. i 4. studenog na Yahoo! 's Santa Clari, CA kampusa. Prezentacija trebao trajati oko 45 minuta. Mi ćemo imati i do 15 minuta nakon prezentacije za Q & A. Postavljati pitanja u komentarima, ili nam pošaljite e izravno na Yui-događaja (at) yahoo-inc.com.

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!

Obnovljeno: "MakeNode" Widget Produljenje

Napomena urednika: Ovaj članak je izvorno objavljen početkom ove godine . Od tada, MakeNode modul je objavljen u Galeriji Yui i dobio neke poboljšanja. Današnji članak odražava sve najnovije izmjene MakeNode.

U mom prethodnom članku, recept za Yui 3 primjene , sam pokazao put koristiti Y.substitute kao vrlo osnovni predložak za obradu. Ideja je život od tamo, s prijedlozima iz ljudi u # Yui IRC kanalu, a ja sam napravio to Widget nastavak koji je dostupan na Yui Galeriji zove MakeNode . MakeNode nije generički template procesor i nije namijenjen kao jedan. S druge strane, to je čvrsto integrirana s Yui Widget zaklade klasi, uključujući i className događaj pomagača, ali i internacionalizacija. U ovom članku, ja ću uzeti Spinner primjer i izmijeniti ga slijediti smjernice iz mog prethodnog članka i za korištenje MakeNode. MakeNode je dostupna kao galerija komponente, kao i izmjene Spinner komponente i primjerom koji će biti korišten u ovom članku .

Produljenje svoju komponentu

Za učitavanje MakeNode morate uključiti modul u svoj YUI().use() izjavu koristeci ime 'gallery-makenode' ili, ako definiranja modula putem YUI.add() , to navesti kao requires niz. Zatim, kako bi produžili Vaše widget, možete ga navesti u trećem argumentu da Y.Base.create() , ovako:

  Y.Spinner Y.Base.create = (
      'Spinner'
      Y.Widget,
      [Y.MakeNode]
      {
         / / Primjer članovi ...
      },
      {
          / / Statički članovi
      }
 ); 

Možete dodati MakeNode uz bilo koji broj odgovarajućih nastavaka za Widget, kao što su WidgetParent i WidgetChild i WidgetStdMode, itd. MakeNode dodaje dvije zaštićene metode koje se koriste od strane developer, _makeNode i _locateNodes, i ona će pročitati nekoliko statičkih svojstava, ako se utvrdi .

Svi članovi ovog proširenja su ili zaštićeni ili privatno jer su značilo da se koristi komponente programer a ne Nositelj implementacije pomoću onih dijelova, koji se ne treba gnjaviti s njima. Ne zaboravite da provjerite "Show zaštićeni" opciju kada gledate API dokumenata .

Definiranje predložak

Prva stvar koju će učiniti je obično definirati predložak za komponente. Za Spinner, naš predložak bit će:

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

Zadani predložak će obično biti imenovan _TEMPLATE i proglasio duž drugih statičkih svojstava klasi, kao što su ATTRS . MakeNode će koristiti ovaj predložak ako ništa drugo izrijekom određeno. Predložak se sastoji od običnog HTML-a plus niz rezervirana mjesta zatvorena u vitičastim zagradama, svaki od jednog lika (obrada kod) i nakon čega slijedi jedno ili više argumenata. U rezerviranih mjesta i ono što oni proizvode su:

• {@ attributeName} konfiguracija vrijednost atributa

• {p propertyName} primjer vrijednost imovine

• {m methodName arg1 arg2 ….} povratak vrijednost zadanog načina. Obrada kod slijedi metoda ime i bilo koji broj argumenata odvojenih razmakom.

• {c classNameKey} CSS className generirani od _CLASS_NAMES statičke imovine (vidi The _CLASS_NAMES imovine odjeljak u nastavku)

• {s key} niz od strings atributa, koristeći key kao pod-atribut.

• {? condition valueIfTrue valueIfFalse } slično kao ?: operator JavaScript, procjenjuje se valueIfTrue ako je uvjet truish, valueIfFalse drugačije.

• {1 condition valueIfOne valueIfMore } koristi za proizvodnju jednine / množine riječi na temelju vrijednosti stanju.

• {} bilo koja druga vrijednost će biti obrađene kao Y.substitute radi.

Na primjer, {@ value} će se prevesti na this.get('value') , dok {p value} prevodi na this['value'] .

Kad rezerviranih mjesta imaju argumente, kao {m} , {?} i {1} , žice moraju biti priloženi u navodnicima. Brojevi, Booleani i null (sve necitiran) će se raščlaniti na svoje odgovarajuće vrste podataka. Rezerviranih mjesta može biti smješteno. {?} i {1} rezerviranih mjesta obično sadrži ugniježđene rezervirano za stanje i vrlo vjerojatno za svoje vrijednosti, na primjer:

  {P Kol} {1} {p Kol "jedinica", "jedinica"} 

Ako je imovina qty 1, to će procijeniti da "1 unit" , za 2 ili više će se vratiti "2 units" i tako dalje. Više razraditi verzija koja se bavi nule bio bi:

  {?  {P Kol} "{p Kol} {1} {p Kol" jedinica "," jedinica "}" "none"} 

Imajte na umu da je rezultat obrade unutarnjih rezerviranih mjesta, ako je string, moraju biti priloženi u svom skup citati.

Da su dvostruku ponudu unutar jednog citirani niza, koristite \\" , bračni obrnuta kosa crta se traži jer JavaScripta će tumačiti ni jedan i odbacuje prije nego što dobiva MakeNode Samo navodnike dopušteno;. MakeNode ne koristi eval() tako da parser je ograničen, ali sigurno. Sve, ali brojevi, null , Booleani i dvokrevetne nizove će biti zanemaren.

{?} rezervirano je također zgodan za korištenje s potvrdnih okvira i radio gumbima. To se može koristiti za proizvodnju string "checked" ovisno o istinitosti vrijednosti kod obrade koja slijedi upute. Dakle, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> će proizvesti značajan kućicu ako getLength metoda vraća ništa, ali nula.

Za {c} rezerviranog mjesta, trebamo imati _CLASS_NAMES imovina definirana.

Daljnje rezerviranih mjesta mogu biti dodan u MakeNode tako da ih dodate u _templateHandlers mljeveno meso.

_CLASS_NAMES Nekretnina

Uz ATTRS i _TEMPLATE statičkih svojstava, možemo definirati _CLASS_NAMES statički imovine koji ukazuje na niz žica. Svaki od tih nizova će se koristiti za generiranje className. Tako _CLASS_NAMES: ['input'] će proizvesti className "yui3-spinner-input" . Ti classNames su pohranjeni u stupnju vlasništva this._classNames . {c input} varijabla u predlošku iznad će biti zamijenjen "yui3-spinner-input" . Pozivam konce navedene u _CLASS_NAMES , kao što su 'input' i na "className Keys", budući da se može koristiti kao ključ za odnose sa stvarnim className ili elemenata koji sadrže te classNames, kao što ćemo vidjeti kasnije.

Možete koristiti _CLASS_NAMES imovine generirati bilo koji broj classNames, da li ih koristiti u predlošku ili ne. Još uvijek možete doći do tih dodatnih classNames iz this._classNames . ClassName se generira pomoću yui3 prefiks slijedi vrijednosti NAME statičke imovine okrenuo mala, a zatim dano u niz _CLASS_NAMES (ovo posljednje neće biti uključena mala), a sve odvojeni crticama. _classNames hash će također sadržavati classNames za boundingBox i contentBox , prvi pod "boundingBox" ključ i drugi pod "content" ključ. Widget dodjeljuje na boundingBox classNames su izvedene iz vrijednosti NAME imovine svake od klasa u nasljednom lancu, počevši s yui3-widget . MakeNode pohranjuje u this._classNames samo top-najviše className za boundingBox .

Ako WidgetStdMod modul učitan, MakeNode također će generirati zapise za svoje HEADER i BODY i FOOTER sekcije s tim istim tipkama, koji su ujedno i konstante definirane u tom istom modulu.

Ako komponenta je nekoliko razina udaljen od Widget, kao SuperSpecialSpinner nasljeđivanja od SuperSpinner koji nasljeđuje od Spinner koji nasljeđuje od Widget, i ako bilo koju ili sve od njih imaju _CLASS_NAMES svojstva definirana, MakeNode će proizvoditi classNames za sve njih i spremiti ih u this._classNames . Ne morate uključiti na svakoj razini imena već objavljene u prethodnim razinama. U stvari, bolje je da ne jer classNames proizvedene na svakoj razini će koristiti vrijednost NAME imovine toj razini. Dakle, u SuperSpecialSpinner , {c input} još uvijek će rezultirati u "yui3-spinner-input" a ne "yui3-superspecialspinner-input" i tako da će vaše CSS datoteke još uvijek na snazi.

{E} placeholder

Widget ima strings atribut konfiguracije definiran, iako nije inicijaliziran s bilo koje vrijednosti. Ovaj atribut je značilo da držite konce koji su vidljivi (ili preko čitača zaslona, ​​pročitati) korisnika. Važno je da nikada ne uključuju vidljive konce izravno u predložak. Ovo nije zahtjev MakeNode - to nikada nije bila dobra ideja uopće. Svi nizovi koji su se vidjeti ili pročitati korisniku uvijek trebali biti smješteni u strings atribut. strings atribut sadrži mljeveno meso, gdje svaki pojedini tekst se nalazi po ključ. Spinner komponenta ima sljedeće konce, što možete vidjeti koji se koriste u predlošku gore.

  nizovi: {
     Vrijednost: {
         Ulaz: "Pritisnite strelicu gore / dolje tipke za manje povećanja, stranica gore / dolje za velike koracima."
         gore: "Povećanje",
         dolje: "opadanje"
     }
 }, 

Najbolji dio to je da je vaša komponenta može biti lokaliziran na drugim jezicima vrlo lako programere koristeći svoj komponentu. Prilikom stvaranja primjerka Spinner, možda ćete učiniti:

  var mySpinner = new Spinner ({žice: Y.Intl.get ('pauk')}); 

Postavljanje konfiguracije atributnih strings na taj način zamjenjuje zadane strings vrijednosti s onima iz datoteke jezika resursima uporabom jezika prethodno definirali. {s} rezervirano pristupa konce pohranjene u strings atributa, bilo zadane one ili su prevedeni one, ako je postavljen. {s xxxx} rezervirano je gotovo poput korištenja {@ strings.xxxx} osim što su lokalizirani zamjenski nizovi mogu imati rezervirana mjesta koja će biti dodatno obrađene. To je važno za prijevode od sintaktičke kako varira od jezika do jezika, a to omogućuje Rephrasing tekst, uključujući i njegove rezervirana mjesta tako da odgovaraju bilo kojem jeziku. Strings se može pristupiti pomoću {@ strings.xxxx.yyyy.zzzz} , koji će omogućiti pristup žicama ugniježđena dublje dolje i da će spriječiti daljnje zamjene. Vitičastih zagrada mogu biti uključeni u tekst pomoću {LBRACE} i {RBRACE} kao rezervirana mjesta.

Korištenje _makeNode u renderUI

Mi koristimo predložak za stvaranje oznake za naš komponente. Da biste to učinili, možemo nazvati MakeNode je _makeNode metode, kao što je ovaj:

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

To će ispuniti contentBox naše widget s oznake iz obrade predložak. _makeNode metoda vraća instancu Y.Node koja se može umetnuti bilo gdje u dodatku ili ili samo održati za kasniju uporabu. To se ne vraća niz, stvara Node instancu. (Ako je potrebno učiniti niz, a ne čvor, možete koristiti _substitute metodu, koja zahtijeva da ćete proći u predložak.)

_makeNode metoda uzima dva dodatnih argumenata: referentnih u predložak i objekt za ispunjavanje rezerviranih mjesta, kao Y.substitute radi. U našem jednostavnom Spinner primjer postoji jedan predložak za cijelu widget, ali drugi dodaci mogu zahtijevati bitova i komada izrađene od nekoliko predložaka. U tom slučaju, obično bi se nazvati _makeNode bez argumenata za glavni dio i nazovite ga ponovno s različitim predlošcima ispuniti dodatnih dijelova. Primjer sadrži ove renderUI način:

  renderUI: Funkcija () {
     var fieldset this._makeNode = ();
     this.each (funkcija (točka) {
         fieldset.appendChild (this._makeNode (MultipleTemplates.RADIO_TEMPLATE točka));
     }, To);
     this.get ('contentBox') append (fieldset).;
 } 

Prvi poziv za _makeNode vraća Node primjerak pohranjen u varijablu fieldset . Uzorak komponenta je također proširena Y.ArrayList tako RADIO_TEMPLATE će biti popunjena s vrijednostima preuzetim iz stavke pohranjene u popisu polja i rezultat čvorova dodat fieldset prije nego što konačno dodaje do contentBox . Posebne rezerviranih mjesta, kao što su {@} ili {p} i dalje će se odnositi na atribute ili svojstva u glavnom objektu. U ugniježđena stavke će biti obrađen kao Y.substitute bi.

_locateNodes Metoda

MakeNode dalje pruža _locateNodes metodu koja će pokušati pronaći sve elemente s classNames deklariranih u _CLASS_NAMES . Da biste pronašli određene elemente možete proći bilo koji broj className tipki, inače, _locateNodes pokušava ih sve. Za svaki element nalazi svakog className, _locateNodes će proizvoditi privatnu imovinu prvostupanjsku koristeći donju prefiks slijedi ključna imena i "Node" sufiksa. Dakle, u našem Spinner primjer, _locateNodes će generirati svojstva _inputNode i _upNode i _downNode . Ako više elementi imaju istu className, _locateNodes će se vratiti referencu na prvi od njih. Ako element ne nalazi, ne varijabla će biti kreirana.

U Spinner komponente koristimo _locateNodes nakon stvaranja oznake:

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

_EVENTS Statički objekt

Jedan dodatno svojstvo može definirati na tragu _TEMPLATE i _CLASS_NAMES a to je _EVENTS . _EVENTS će sadržavati mljeveno meso sastavljen od imena klase ključeva, svaki sadrži mljeveno meso vrsta događaja i metode da ih obrađuju. Bolje je objasniti primjer:

  _EVENTS: {
     ulaz: 'promjene', / / ​​poziva this._afterInputChange
     boundingBox: [
         {
             Vrsta: 'ključ',
             fn: možeš _onDirectionKey ', / / ​​poziva this._onDirectionKey
             args: ((Y.UA.opera) "dolje"!? "Press") + ", 38, 40, 33, 34"
         },
         'Mousedown' / / poziva this._afterBoundingBoxMousedown
     ]
     dokument: 'mouseup', / / ​​poziva this._afterDocumentMouseup,
     Y: "broadcastingObject: someEvent '/ / pozivi ovo [" _afterYBroadcastingObject: someEvent "]
 }, 

_EVENTS je objekt (hash) s bilo kojim brojem unosa. Imena svojstvima, koja je, tipke u mljeveno meso, identificirati čvorove čiji događaji ćemo slušati. Oni su isti className tipke definirani u _CLASS_NAMES . Postoji nekoliko dodatnih posebne tipke:

• "boundingBox" će se odnositi na granični okvir sama.

• "document" odnosi se na dokument koji sadrži ovaj widget.

• "THIS" odnosi se na widget sama

• "Y" odnosi se na Y primjer.

Ako Widget proširena je WidgetStdMod te, tipke HEADER , BODY i FOOTER će se odnositi na one dijelove, budući da će biti dostupan u _classNames mljeveno meso. JavaScript ne treba ključeve navesti jesu li valjani identifikatori, pa nitko od gore navedenih je potrebno navesti.

_EVENTS Objekt je obrađen nakon renderUI , bindUI i syncUI metode su tako zove dodatak Očekuje se da će već biti umetnuta u tijelo dokumenta, inače "document" identifikator neće uspjeti.

Za svaki od tih elemenata je identifikator događaj ili niz događaja identifikatore. Događaj se mogu prepoznati po vrsti događaja, slušaju ili objekta s više detalja. Po defaultu, MakeNode će se koristiti kao slušatelj metoda nazvana pomoću "_after" prefiks slijedi elementa identifikator sa svojim prvim znakom kapitaliziraju slijedi događaja tipa sa svojim prvi znak kapitaliziraju. Kod blok iznad pokazuje metode zvane za svaki događaj.

Identifikator događaj može biti objekt svojstva type i fn i args . type je obvezna i ukazuje na vrstu događaja se slušali. fn imovina daje naziv način koji će slušati događaja čime se izbjegava automatsko imenovanje. Od _EVENTS je statički objekt, nema pristup this tako da se ne može uzeti stvarni referencu na način, samo svoje ime. args argument može se koristiti za donošenje daljnje argumente pozivatelju kao što su s key događaj koji zahtijeva specifikaciju tipke.

MakeNode će koristiti Node.delegate slušati događaja na elementima unutar boundingBox , a ona će se koristiti Node.after slušati na događaje iz boundingBox i dokumenata tijela. Koristit će this.after slušati događaja pod THIS ključ i Y.after za slušatelja navedenih pod Y ključ. Sva događanja su slušali na korištenje nakon događaja slušateljima jer su značilo da bi dodatak reagirati na događaje, a ne za filtriranje ponašanje objekta koji ispaljuje ih tako ni u kojem slučaju ti događaji mogu spriječiti ili zaustaviti. (Napomena: slušanje key događaj na bilo nested elementa radi samo s verzijama 3.4.0pr1 i gore, jer Izaslanstvo key događaja nije bio dostupan prije svih drugih mogućnosti raditi s prijašnjim verzijama, kao dobro.).

U _EVENTS deklaracije kumulativni su dijelovi kada nasljeđuju jedni od drugih. Svaki razred u nasljedstvo lanac će imati vlastiti _EVENTS izjavu obrađuju odvojeno.

_ATTRS_2_UI Statički objekt

Događanja ići u oba smjera, od UI do komponente i iz dijela na UI. Prvi su obrađene od strane _EVENTS imovine. Zatim tu su zbivanja Peći na vrijednosti atributa promjene koje se trebaju odraziti u korisničkom sučelju. Kao što sam spomenuo u prethodnom članku, kada postoje sekundarni učinci mijenjanje konfiguracije atribut, trebaju biti obrađene od strane promjena događaja slušateljima, a ne dodatnoj setter metode atribut, koji bi trebao baviti normalizaciju vrijednosti se postavili. UI treba odražavati stanje konfiguracijskih atributa, prvo u syncUI , kada se inicijalizira, a zatim na svaki događaj atributa promjena. Za potonje, trebamo priključiti događaj slušatelja, koje mi inače će to učiniti u bindUI . Dodatak već pruža mehanizam da bi tako jednostavno, što sam opisao u svojim komentarima u prethodnom članku.

Widget koristi stupnju vlasništva _UI_ATTRS koji sadrži objekt s dva dodatna svojstva, SYNC i BIND . Svaki od njih je polje s popisom imena atributa konfiguracije na početku se synched, a zatim je slušao kako bi UI odražava trenutne vrijednosti. Widget očekuje da će svaki od tih unosa imati način povezane s njom, nazvanog po imenu osobine prefiksom po _uiSet s prvim znakom u imenu osobine pretvorena u velika slova da imaju metodu ime u pravilnom deve slučaju. Dakle, ako je "value" je naveden u bilo kojem od _UI_ATTRS polja (u oba SYNC ili BIND ), dodatak bi očekivati ​​da će pronaći _uiSetValue metodu. Ova metoda će dobiti dvije argumente, value se postaviti i src promjene. Ovo je kod za naše Spinner _uiSetValue metode:

  _uiSetValue: funkcija (vrijednost, src) {
     if (src === UI) {
         povratak;
     }
     this._inputNode.set (VALUE, this.get (FORMATTER) (vrijednost));
 }, 

Svi Velika identifikatori koje vidite u ovom djelu koda odgovarati string konstante proglašen negdje drugdje, kako bi se omogućilo YUI kompresor raditi svoj posao bolje. Metoda, u osnovi, postavlja value HTML atributa u <input> okvir na novi set vrijednosti, nakon što je formatiran. Referenca na polje dao je _locateNodes . src argument početku se provjerava da li podešen na vrijednosti niza 'ui' . Ako je to tako, ništa će se poduzeti. Time se izbjegava beskrajne petlje. Ako korisnik unese nešto u okvir za unos, njegova vrijednost će ići u value atributa konfiguraciji koja bi potom ispaliti valueChange događaj, koji bi se _uiSetValue zove koji, ako je neprovjeren, a zatim će otići i promijeniti vrijednost u okvir za unos, koji će pokrenuti cijeli proces ponovno. Dakle, u _uiSetValue , ako znamo promjena dolazi iz UI, možemo učiniti ništa i tako prekinuti petlju. Međutim, to zahtijeva drugi dio koda drugdje. U slušatelja za DOM slučaju, kada smo postavili konfiguracijsku atribut, mi koristimo treći dodatni argument za postavljanje, ovako:

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

To je do nas kako bi se osiguralo da promjene dolaze iz UI su označena tako, a zatim provjerite da istu zastavu kako bi se izbjeglo petlje. Nemojte koristiti identifikator src pri određivanju vrijednosti atributa, a ne source koji neće biti priznata.

Uz sve to, rekao je, još nisam razgovarao o statičkom nekretnina _ATTRS_2_UI spominje u naslovu ovog poglavlja. Kao komentare na moj prethodni članak pokazuje (putem zabluda sam napravio u njima), pazeći da svi atributi koji utječu na korisničko sučelje ispravno naveden je nešto neuredno. Vi nikada ne treba inicijalizirati _UI_ATTRS od nule od Widget već navodi cijeli niz atributa i oni će biti izgubljeni. Morate spojite novih imena atributa preko postojećih, što je nešto teško zapamtiti kako to učiniti pravu. Da bi se jednostavno, MakeNode će pročitati od statičkog nekretnina _ATTRS_2_UI i to da stjecajem za vas. To će spojite sve takve popise od svakog razreda u nasljednom lancu tako da na svakoj razini svaki razred može nositi svoje atribute. U Spinner, imamo:

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

MakeNode će prihvatiti obje niz imena ili samo jedan atribut ime, kao u ovom slučaju.

Pitanje je, naravno, proizlazi, zašto dva popisa, jedan za vezanje drugi za sinkronizaciju ¡ť SYNC se koristi prvi put, nakon renderUI i bindUI metode, ako postoje, nazivaju se i prije syncUI dok su oni navedeni u BIND će biti dužan odgovarajući atributi za kasnije promjene. Vrlo često SYNC polje ima manje ulazaka nego u BIND popisa, a to je zato što je predložak za komponentu možda već imaju vrlo istu zadanu vrijednost atributa kao konfiguracije i nema potrebe raditi početna sinkronizacija. Dakle, ako je zadana vrijednost za value atributa konfiguracije je prazan string i <input> element u predlošku nema value atributa, onda nema potrebe da ih sinkronizirati na inicijalizacije.

Značajke koje su navedene u BIND će imati svoje _uiSet Xxxx metode zvane u bilo kojem redoslijedu, kao atributi mogu se postaviti u bilo kojem redoslijedu. Značajke koje su navedene u SYNC će se zvati jednom u redoslijedu u kojem su navedeni s onima predaka pred njihovim nasljednicima, pa ako je netko ovisan o drugi (što ne treba), kako bi moglo biti važno.

MakeNode će provjeriti dvostruke unose u bilo kojem od tih polja. Ako bilo koji pojavi, to znači da je naša komponenta klasa nasljeđuje od već rješava taj atribut i sve nova izjava će najvjerojatnije prekorače _uiSet Xxxx vodič za njega. Usput, MakeNode također provjerava dvostruke unose u _CLASS_NAMES , koji također može izazvati sukob u nekim, iako ne sve, okolnostima. MakeNode pisati poruke u log za bilo koje takve pogreške.

_PUBLISH Nekretnina

Konačno, _PUBLISH statički objekt će se popis onih događaja koji moraju biti objavljeni. Ona sadrži mljeveno meso koristeći naziv događaja svojim tipkama i objekt doslovnom konfiguracije atribute kao svoje vrijednosti. To će objaviti sve događaje navedene u takve imovine u sve nasljedstvo lanca. Isti događaj ime može biti objavljena u razredu iu svakom razredu Nasljeđivanje iz nje, što će učiniti konfiguracijske atributi kasnijih nadjačati one u starijih. Na primjer, možda želite da se postojeći događaj emitirati na globalnoj razini. Baš kao i kod _EVENTS imovine, budući da _PUBLISH je statički objekt bez pristupa this , kada navodeći funkcije, to je naziv metode, kao niz, koji treba dati.

Zaključak

MakeNode pruža vrlo jednostavan predložak procesor, s funkcijom da visoko je integriran s klase Widget zaklade. Ona također pruža pomoćne metode za stvaranje classNames će se koristiti u predlošku i koristiti ta imena za pronalaženje i odnose se na čvorovima stvorili. To također osigurava sredstva priključiti u događaja nastalih obje strane korisničkog sučelja i komponente sam i povezati jedni s metodom. To se sve te stvari, a vodeći računa da će poštovati lanac nasljedstvo ravno do widget i bilo kojoj razini nastave možete definirati.

To ne pruža apsolutno sve mogućnosti, ali pokriva dobar raspon od njih. Ipak, to ne sprječava vas od dodavanja dodatnih funkcionalnosti. Vi se rijetko mogao napisati bindUI ili syncUI metodu ako koristite ljepilo koje pruža MakeNode, ali možete to učiniti, jer MakeNode ih ne koristite.

Kao bonus za one koji su imali strpljenja pročitati ovaj sada sam i modificiranog Anthony zemljano lonče na gumb skup galerija komponenti i napravio harmoniku i TimeSpinner komponente, sve dostupne u galeriji .

O Autor: Daniel Barreiro (zaslonsko ime Satyam) je oko za neko vrijeme. ENIAC je bio isključen dan prije nego što je rođen, tako da je promašio, ali on nije propustio puno od. On je imao priliku na bušenim karticama, program 6502 pločice (sjetite se Apple II?), Vlastita TRS-80 i vidjeti neke sjajne komade operativnom opreme u rodnoj Argentini koji je mogao biti u muzejima i drugdje. Kada je globalizacija otvorila vrata u svijet, a zatim mu jedva upotrebljiv Engleski (plus stupanj za elektrotehniku) staviti ga na karijeru koja je završila u pet godina posao u leđa Bay Area u dane NCSA Mosaic. Totalno zaintrigirao i smiješne squiggles njegov prijatelj napisao u svom tekstualnom editor, puna <ih i> 's, završio je učenja dosta o svijetu frontenda inženjerstva. To je bio dug put od COBOL i Fortran. Sada živi dosta sretno polu-mirovini u mediteranskoj obali u blizini Barcelone, Španjolska.

Nađi razgovore: Bloglines | technorati

Podijelite i proširiti: Označi s del.icio.us | digg it! | Reddit!