Yahoo! User Interface Blog (YUIBlog)

YUIConf 2011 Registrazione Early Bird è ora aperta

Settembre 30, 2011 at 09:31 di Jenny Donnelly | In Development e YUI Eventi | 4 Comments

Early-bird registrazione per YUIConf 2011 è ora aperto Eventbrite! L'evento di quest'anno si terrà il 2-4 Novembre campus Yahoo! 's Great America. Siamo lieti di offrirvi una giornata piena di hands-on workshop di formazione (mer), seguita da due giorni di colloqui tech circa YUI (gio / ven). L'iscrizione al convegno costa $ 75 di quest'anno, con un congresso a costo di $ 50. La registrazione per i workshop sarà separata dalla conferenza ei dettagli saranno presto disponibili.

Siamo impegnati fino rivestimento grandi temi, tra cui:

• Immersioni profonde YUI componenti, tra cui Dial e calendario
• YUI in ambienti mobili
• Test con YUI
• Reali storie di migrazione
• e molto, molto di più!

Come sempre, le sessioni della conferenza saranno video-registrate e disponibili su YUI Theater e il nostro canale su YouTube per tutti di godere.

Spero di vedervi lì!

(IMPORTANTE! yahoo interni si prega di registrarsi per un biglietto Employee Yahoo! e fornire il proprio indirizzo e-mail di lavoro.)

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI 3.4.1 è finalmente disponibile

Settembre 27, 2011 at 02:37 di Allen Rabinovich | In Development | 8 commenti

Il ciclo di YUI 3.4.1 versione breve è ora disponibile su CDN e per il download , più di una settimana in anticipo! Qui ci sono alcuni punti salienti di questa versione:

• Oltre 150 correzioni di bug per il controller , Panel , DataTable , Calendar , e una serie di altri moduli.
• Bug fixes a Y.substitute () da YUI contributor Satyam .
• Supporto per la lingua giapponese per Calendar e Console , per gentile concessione di YUI contribuente Ryuichi Okumura .
• Varie tweaks alla documentazione e gli esempi.

Puoi anche possibile verificare il riepilogo di tutti i cambiamenti rilevati nei file di storia delle componenti per YUI 3.4.1 , nonché l'elenco completo dei biglietti YUI 3.4.1 affrontati durante lo sviluppo . Come sempre, gradiremmo che si compila tutti i suggerimenti che potreste avere o difetti si può scoprire nel nostro database biglietto. Feedback per YUI 3.4.1 può essere inserito nella banca dati 3 ticket YUI .

Vorremmo anche per annunciare che nella prossima versione di YUI, DataType.Date, DataType.Number e DataType.XML sarà deprecato in favore di Y.Date, Y.Number e Y.XML, rispettivamente. Compatibilità con le versioni precedenti saranno conservati per una release, per dare a tutti la possibilità di passare.

Oh, e un'altra cosa: siamo sulla buona strada nella migrazione del contenuto di YUI Theater su YouTube . Per cominciare, controlla lezione di Douglas Crockford la serie "Crockford su JavaScript" - completo di sottotitoli!

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Vota per YUI nelle finali Open Source Awards

26 settembre, 2011 alle 9:21 pm da Jenny Donnelly | In Miscellanea | 1 commento

Grazie a tutti coloro nominato YUI per i Packt Publishing Open Source Awards. Vota ora per YUI come libreria JavaScript preferita!

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI 3.4.1 PR1 ora disponibile su CDN

22 Settembre 2011 alle ore 01:35 da Jenny Donnelly | In Development | 1 commento

YUI 3.4.1 PR1 è ora disponibile per il test della comunità e di feedback. E 'disponibile sul CDN a Yahoo! http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , e si possono vedere i cambiamenti in atto nella 3.4.1 dalla lista dei biglietti controllati in per il rilascio .

La versione 3.4.1 sarà un piccolo bug-fix release con un ciclo di sviluppo ridotto, prevista per il go-live dal 5 ottobre. Si prega di bug dei file e regressioni nel database biglietto YUILibrary.com la mattina di Lunedi, September 26th modo che possiamo verificare eventuali criticità sono affrontati prima del rilascio generale. Se non vengono segnalati problemi urgenti, verranno rilasciati 3.4.1 fin dal 27 settembre.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

YUI: Open Ore Gio 15 Set

Settembre 12, 2011 at 9:58 pm da Luke Smith | In Development e orari di apertura | 2 commenti

Satyam di MakeNode estensione

Se non sai Satyam , che deve essere nuovo per YUI. E 'stato un pilastro della comunità YUI fin dai primi giorni di YUI 2. I suoi articoli su YUIBlog sono alcune tra le più leggere e di cui le fonti per "come utilizzare davvero la libreria" contenuto di stile. Se vedi che Satyam ha scritto, vale la pena leggere, e molto probabilmente, una ri-lettura e un segnalibro.

Nel mese di luglio, ha pubblicato un grande articolo su un MakeNode estensione Widget che mira a semplificare alcuni dei modelli comuni utilizzati durante la creazione di Widget, e rendere più facile per evitare passi falsi comuni. Il modulo è stato poi aggiunto alla Galleria e solo in data odierna, ha pubblicato un aggiornamento al suo articolo originale.

Questo è quello che stiamo andando a parlare di. Le caratteristiche, la storia ei ragionamenti. Se state utilizzando l'infrastruttura dei componenti e, in particolare, Y.Widget , probabilmente hai incontrato almeno alcuni degli ostacoli Satyam si propongono di affrontare con MakeNode . Questo sarà un best fest pratiche, in modo da portare il notepad, e le vostre esperienze da condividere.

Time & Details

Saremo on-line il Giovedi 10:00-11:00 PDT.

Partecipare alla riunione

Registrazione

La registrazione è disponibile nel canale di YouTube YUILibrary .

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Invia un Talk per YUIConf 2011

Settembre 12, 2011 at 15:48 di Jenny Donnelly | In Development e YUI Eventi | Nessun Commento

Mostra il codice che hai lavorato o condividere qualcosa che ho imparato lavorando con YUI! Invia la tua proposta di yui-eventi (at) yahoo-inc.com da Venerdì 23 Settembre 2011. Assicurati di includere:

• Titolo
• Descrizione
• A chi è destinato
• Il tuo nome
• A breve biografia

YUIConf 2011 si terrà 3 novembre e 4 su Yahoo! 's Santa Clara, CA campus. La presentazione dovrebbe durare circa 45 minuti. Dovremo fino a 15 minuti dopo la presentazione per la Q & A. Invia le domande nei commenti, o via e-mail direttamente a yui-eventi (at) yahoo-inc.com.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!

Aggiornamento: L'estensione Widget "MakeNode"

Settembre 12, 2011 at 15:18 di Satyam | In Development e YUI 3 galleria | 8 commenti

Nota dell'editore: Questo articolo è stato originariamente pubblicato all'inizio di quest'anno . Da allora, il modulo MakeNode è stato pubblicato alla Galleria YUI e ha ricevuto alcuni miglioramenti. L'articolo di oggi riflette tutte le ultime modifiche apportate MakeNode.

Nel mio articolo precedente, una ricetta per una applicazione 3 YUI , ho mostrato un modo per utilizzare Y.substitute come un processore modello molto di base. L'idea ha preso vita da lì, con i suggerimenti delle persone nel canale IRC # yui, e ho fatto una estensione Widget che è disponibile nella Galleria YUI, chiamato MakeNode . MakeNode non è un processore modello generico e non è intesa come uno. D'altra parte, è strettamente integrato con il YUI Widget classe base, compresi aiutanti className e l'evento e l'internazionalizzazione. In questo articolo, voglio prendere il Spinner esempio e modificarlo in modo da seguire le linee guida del mio precedente articolo e di utilizzare MakeNode. MakeNode è disponibile come componente galleria così come la modifica Spinner componente e l' esempio che verrà utilizzato in questo articolo .

Estendere il componente

Per caricare MakeNode è necessario includere il modulo nel vostro YUI().use() istruzione usando il nome 'gallery-makenode' o, se la definizione di un modulo via YUI.add() , lo segnaliamo come requires array. Quindi, per estendere la widget, si iscrive nel terzo argomento Y.Base.create() , in questo modo:

  Y.Spinner Y.Base.create = (
      'Spinner',
      Y.Widget,
      [Y.MakeNode],
      {
         / / Istanza membri ...
      },
      {
          / / Membri statici
      }
 ); 

È possibile aggiungere MakeNode lungo qualsiasi numero di estensioni adatte per Widget, come WidgetParent, WidgetChild, WidgetStdMode, ecc MakeNode aggiunge due metodi protetti per essere utilizzati dallo sviluppatore, _makeNode e _locateNodes, e sarà letto da diverse proprietà statiche, se trovato .

Tutti i membri di questa estensione sono sia protetto o privato dal momento che sono destinati ad essere utilizzati dallo sviluppatore componente e non il realizzatore l'utilizzo di tali componenti, che non deve essere disturbato con la loro. Ricordati di controllare l'opzione "Mostra protetto" durante la visualizzazione della documentazione API .

Definizione del modello

La prima cosa che normalmente è quello di definire il modello per il componente. Per il Spinner, il nostro modello sarà:

  _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>'
 ]. Join ('\ n'), 

Il modello di default di solito è chiamato _TEMPLATE e dichiarato lungo le altre proprietà statiche della classe, ad esempio ATTRS . MakeNode utilizzerà questo modello se non altro è esplicitamente previsto. Il modello è realizzato in semplice HTML più una serie di segnaposto racchiusi tra parentesi graffe, ciascuno costituito da un singolo carattere (il codice di elaborazione) e seguita da uno o più argomenti. I segnaposto e ciò che producono sono i seguenti:

• {@ attributeName} configurazione valore dell'attributo

• {p propertyName} valore della proprietà di istanza

• {m methodName arg1 arg2 ….} valore restituito dal metodo indicato. Il codice di elaborazione è seguita dal nome del metodo e qualsiasi numero di argomenti separati da spazi bianchi.

• {c classNameKey} CSS className generato dal _CLASS_NAMES proprietà statica (si veda la proprietà _CLASS_NAMES sezione seguente)

• {s key} stringa da strings di attributi, utilizzando key come il sub-attributo.

• {? condition valueIfTrue valueIfFalse } molto simile ?: operatore di JavaScript, restituisce valueIfTrue se la condizione è truish, valueIfFalse altrimenti.

• {1 condition valueIfOne valueIfMore } utilizzato per produrre singolari / plurali parole basandosi sul valore della condizione.

• {} qualsiasi altro valore verranno trattati esattamente come Y.substitute fa.

Ad esempio, {@ value} si tradurrà in this.get('value') , mentre {p value} si traduce in this['value'] .

Quando segnaposto avere argomenti, come {m} , {?} e {1} , le stringhe devono essere racchiuse tra virgolette doppie. Numeri, booleani e null (tutte quotate) sarà analizzata per i tipi di dati appropriati. I segnaposto possono essere nidificate. Il {?} e {1} segnaposto di solito contengono un segnaposto nidificato per la condizione e molto probabilmente per i loro valori, ad esempio:

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

Se la proprietà qty è 1, valuterà a "1 unit" , per 2 o più ritornerà "2 units" e così via. Una versione più elaborata trattare zero sarebbe:

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

Si noti che il risultato della trasformazione dei segnaposto interni, quando una stringa, deve essere racchiusa in una propria serie di citazioni.

Per includere una virgoletta doppia all'interno di una stringa tra virgolette, utilizzare \\" , la barra rovesciata due volte il perché JavaScript interpreterà una sola e se ne disfa prima che arrivi al MakeNode solo le doppie virgolette sono consentiti;. MakeNode non usa eval() in modo il parser è limitato ma sicuro. Qualsiasi cosa, ma i numeri, null , booleani e stringhe tra doppi apici verrà ignorato.

Il {?} segnaposto è anche utile da usare con caselle di controllo e pulsanti di opzione. Può essere usato per produrre la stringa "checked" in base al valore di verità del codice di istruzioni di elaborazione che segue. Così, <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> produrrà una casella di controllo marcata se il getLength metodo restituisce qualcosa, ma zero.

Per la {c} segnaposto, abbiamo bisogno di avere un _CLASS_NAMES proprietà definita.

Ulteriori segnaposto può essere aggiunto a MakeNode aggiungendoli in _templateHandlers hash.

La proprietà _CLASS_NAMES

Insieme al ATTRS e _TEMPLATE proprietà statiche, si può definire una _CLASS_NAMES proprietà statica che punta ad un array di stringhe. Ciascuno di tali stringhe verrà utilizzato per generare un className. Così _CLASS_NAMES: ['input'] produrrà il className "yui3-spinner-input" . Queste NOMECLASSE vengono memorizzati in proprietà un esempio this._classNames . L' {c input} segnaposto nel modello di cui sopra saranno sostituiti da "yui3-spinner-input" . Chiamo le stringhe di cui _CLASS_NAMES , come 'input' , le "chiavi className", in quanto possono essere utilizzati come chiave per riferirsi al className reale o gli elementi contenenti tali NOMECLASSE, come vedremo più avanti.

È possibile utilizzare la _CLASS_NAMES proprietà di generare un numero illimitato di nomi di classi, se si utilizzano nel modello o meno. È ancora possibile raggiungere tali NOMECLASSE extra dall'interno this._classNames . Il className viene generato utilizzando il yui3 prefisso seguito dal valore del NAME proprietà statica trasformato in minuscolo, e poi la stringa indicata in _CLASS_NAMES (quest'ultimo non sarà trasformato in minuscolo), tutti separati da trattini. Il _classNames hash conterrà anche le NOMECLASSE per la boundingBox e contentBox , la prima sotto la "boundingBox" chiave e il secondo sotto il "content" il tasto. Widget assegna alla boundingBox i NOMECLASSE derivanti dai valori della NAME proprietà di ciascuna delle classi nella catena di ereditarietà, a partire yui3-widget . Negozi MakeNode in this._classNames solo il più in alto className per il boundingBox .

Se il modulo viene caricato WidgetStdMod, MakeNode genererà anche le voci per la sua HEADER , BODY e FOOTER sezioni con le stesse chiavi, che sono anche le costanti definite in quello stesso modulo.

Se un componente è a diversi livelli di distanza da Widget, come SuperSpecialSpinner ereditando da SuperSpinner che eredita da Spinner che eredita da Widget, e se qualcuno o tutti loro hanno _CLASS_NAMES proprietà definite, MakeNode produrrà NOMECLASSE per tutti loro e memorizzarli in this._classNames . Non è necessario inserire ad ogni livello i nomi già dichiarato nei livelli precedenti. In realtà, è meglio che non in quanto le NOMECLASSE prodotte ad ogni livello verrà utilizzato il valore della NAME proprietà di quel livello. Così, in SuperSpecialSpinner , {c input} ancora causare "yui3-spinner-input" e non "yui3-superspecialspinner-input" e quindi manterrà il vostro file CSS ancora valido.

Il segnaposto {s}

Widget ha una strings di configurazione attributo definito, anche se non viene inizializzato con qualsiasi valore. Questo attributo è destinato a contenere le stringhe che sono visibili (o, tramite lettori di schermo, leggere) l'utente. E 'importante che non si comprendono le stringhe visibili direttamente nel modello. Questo non è un requisito di MakeNode - non è mai stata una buona idea a tutti. Tutte le stringhe che devono essere visualizzati da o leggere l'utente deve sempre essere messi in strings attributo. La strings attributo contiene un hash dove si trova ogni singolo testo per la sua chiave. Il componente Spinner ha le seguenti stringhe, che potete vedere utilizzati nel modello di cui sopra.

  stringhe: {
     valore: {
         Ingresso: "Premere la freccia su / giù per incrementi minori, pagina su / giù per incrementi maggiori."
         up: "Increment",
         verso il basso: "Decremento"
     }
 }, 

La parte migliore di questa operazione è che il componente può essere localizzato in altre lingue molto facilmente dagli sviluppatori che utilizzano il componente. Quando si crea un'istanza di Spinner, si potrebbe fare:

  var = new mySpinner Spinner ({stringhe: Y.Intl.get ('filatore')}); 

Impostando l'attributo di configurazione strings in questo modo, sostituisce i default strings valori con quelli del file di risorsa di lingua utilizzando il linguaggio precedentemente definito. Il {s} segnaposto accede alle stringhe memorizzate in strings attributo, sia quelli di default o quelli tradotti, se impostato. Il {s xxxx} segnaposto è quasi come usare {@ strings.xxxx} eccezione del fatto che le stringhe di sostituzione localizzate possono avere segnaposto che verranno ulteriormente elaborati. Questo è importante per le traduzioni poiché l 'ordine sintattico varia da una lingua all'altra, e questo permette di riformulare il testo, compresi i suoi segnaposto per soddisfare qualsiasi lingua. Le stringhe possono anche essere accessibile tramite {@ strings.xxxx.yyyy.zzzz} , che consentirà l'accesso a stringhe nidificate più in basso ed eviterà ulteriori sostituzioni. Le parentesi graffe possono essere inclusi in un testo utilizzando {LBRACE} e {RBRACE} come segnaposto.

Utilizzando _makeNode in renderUI

Usiamo il modello per creare il markup per la nostra componente. Per fare ciò, possiamo chiamare MakeNode di _makeNode metodo, in questo modo:

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

Questo compilare il contentBox del nostro widget con il markup dalla trasformazione del modello. Il _makeNode metodo restituisce un'istanza di Y.Node che può essere aggiunto o inserito ovunque o semplicemente tenuto per un uso successivo. Non restituisce una stringa, produce un Node esempio. (Se avete bisogno di una stringa e non un nodo, è possibile utilizzare il _substitute metodo, che richiede che si passa in un modello.)

Il _makeNode metodo accetta due argomenti opzionali: un riferimento a un modello e un oggetto da compilare segnaposto, come Y.substitute fa. Nel nostro esempio Spinner semplice c'è un modello unico per il widget di tutto, ma altri widget che potrebbero richiedere i pezzi realizzati in diversi modelli. In questo caso, si chiama di solito _makeNode senza argomenti per la parte principale e lo chiamano ancora una volta con diversi modelli per compilare le parti extra. L' esempio contiene questa renderUI metodo:

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

La prima chiamata a _makeNode restituisce un Node esempio memorizzato nella variabile fieldset . Il componente di esempio può essere prolungata anche Y.ArrayList in modo che il RADIO_TEMPLATE sarà riempito con i valori presi dalle voci memorizzate nella lista di array ei nodi risultanti allegata alla fieldset prima della sua definitiva allegato al contentBox . I segnaposto speciali come {@} o {p} continuerà a fare riferimento agli attributi o proprietà dell'oggetto principale. Gli elementi nidificati saranno trattati proprio come Y.substitute farebbe.

Il metodo _locateNodes

MakeNode prevede inoltre un _locateNodes metodo che cercherà di individuare tutti gli elementi con i NOMECLASSE dichiarati in _CLASS_NAMES . Per individuare gli elementi specifici che si possono passare un numero qualsiasi di chiavi className, altrimenti, _locateNodes tenta tutte. Per ogni elemento trovato di ogni className, _locateNodes produrrà una proprietà privata istanza utilizzando l'underscore prefisso seguito dal nome della chiave e il "Node" suffisso. Così, nel nostro esempio Spinner, _locateNodes genererà la proprietà _inputNode , _upNode e _downNode . Se diversi elementi hanno la stessa className, _locateNodes restituirà un riferimento al primo di essi. Se un elemento non viene trovato, non variabile verrà creato.

Nel componente Spinner usiamo _locateNodes dopo la creazione del markup:

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

La proprietà _EVENTI statica

Una proprietà ulteriore può essere definita lungo le linee di _TEMPLATE e _CLASS_NAMES e che è _EVENTS . _EVENTS conterrà un hash costituito da tasti nome della classe, ciascuno contenente un hash di tipi di eventi e metodi per gestirli. È meglio spiegato con un esempio:

  _EVENTI: {
     Ingresso: 'cambiamento', / / ​​this._afterInputChange chiamate
     boundingBox: [
         {
             Tipo: 'chiave',
             fn: '_onDirectionKey', / / ​​chiamate this._onDirectionKey
             args: ((Y.UA.opera) "down":? "stampa:") + "38, 40, 33, 34"
         },
         'MouseDown' / / chiamate this._afterBoundingBoxMousedown
     ],
     documento: 'mouseUp', / / ​​this._afterDocumentMouseup chiamate,
     Y: 'broadcastingObject: SomeEvent' / / chiama ["_afterYBroadcastingObject: someEvent"]
 }, 

_EVENTS è un oggetto (un hash) con qualsiasi numero di voci. I nomi delle proprietà, vale a dire, le chiavi di hash, individuare i nodi il cui eventi che si ascolta. Essi sono le chiavi className stessi definiti in _CLASS_NAMES . Ci sono diverse chiavi aggiuntive speciali:

• "boundingBox" farà riferimento ai limiti del box stesso.

• "document" si riferisce al documento che contiene questo widget.

• "THIS" si riferisce al widget stesso

• "Y" si riferisce al Y istanza.

Se il Widget è stata ampliata con WidgetStdMod così, le chiavi HEADER , BODY e FOOTER farà riferimento a queste sezioni dal momento che sarà disponibile nel _classNames hash. JavaScript non ha bisogno delle chiavi per essere citati se sono identificatori validi per nessuna delle precedenti devono essere citato.

Il _EVENTS proprietà viene elaborato dopo le renderUI , bindUI e syncUI metodi sono stati chiamati così il widget dovrebbe essere già inserito all'interno del corpo del documento, altrimenti il "document" identificativo avrà esito negativo.

Per ciascuno di questi elementi è un identificatore evento o una matrice di identificatori di eventi. Un evento può essere identificato il tipo di evento per ascoltare o un oggetto con ulteriori dettagli. Per impostazione predefinita, MakeNode userà come un ascoltatore un metodo chiamato con il "_after" maiuscola seguita prefisso seguito dal identificatore elemento con il suo carattere in primo luogo dal tipo di evento con il suo primo carattere maiuscolo. Il blocco di codice qui sopra mostra i metodi chiamati per ogni evento.

Un identificatore evento può anche essere un oggetto con proprietà type , fn e args . Il type è obbligatorio e indica il tipo di evento che si ascolta. La fn proprietà dà il nome del metodo che ascoltare l'evento evitando così la nomina automatica. Dal momento che _EVENTS è una struttura statica, non ha accesso a this in modo che non può prendere un riferimento reale a un metodo, solo il suo nome. Il args argomento può essere utilizzato per passare ulteriori argomenti al chiamante, come con la key evento che richiede una specifica chiavi.

MakeNode userà Node.delegate per ascoltare gli eventi sugli elementi all'interno del boundingBox , mentre userà Node.after per ascoltare gli eventi dal boundingBox e il corpo del documento. Userà this.after per ascoltare gli eventi sotto il THIS chiave e Y.after per gli ascoltatori elencati sotto la Y chiave. Tutti gli eventi sono ascoltati di post listener di eventi dal momento che sono destinati per rendere il widget di rispondere agli eventi, di non filtrare il comportamento dell'oggetto in modo che spara in nessun caso tali eventi possono essere prevenuti o fermati. (Nota: ascoltare la key evento su qualsiasi elemento nidificato funziona solo con 3.4.0pr1 versione e soprattutto, in quanto delegazione della key evento non era disponibile prima di tutte le altre caratteristiche funzionano con le versioni precedenti pure.).

I _EVENTS dichiarazioni sono cumulabili quando i componenti ereditano gli uni dagli altri. Ogni classe nella catena di ereditarietà avrà un proprio _EVENTS dichiarazione elaborata separatamente.

La proprietà _ATTRS_2_UI statica

Eventi in entrambe le direzioni, dall'interfaccia utente al componente e dal componente per l'interfaccia utente. I primi sono gestiti dal _EVENTS proprietà. Poi ci sono gli eventi generati da variazioni del valore di attributi che devono essere riflessi nell'interfaccia utente. Come ho già detto nel precedente articolo, quando ci sono degli effetti secondari di modificare un attributo di configurazione, che dovrebbe essere gestita dal listener di eventi di cambiamento, non dal opzionale setter metodo dell'attributo, che dovrebbe trattare solo con la normalizzazione del valore che viene impostato. L'interfaccia utente dovrebbe riflettere lo stato degli attributi di configurazione, prima in syncUI , quando viene inizializzato e poi su ogni evento change attributo. Per questi ultimi, abbiamo bisogno di collegare un listener di eventi, che normalmente farebbe in bindUI . Widget fornisce già un meccanismo per fare quella semplice, che ho descritto nel commento al precedente articolo.

Widget utilizza l'istanza di proprietà _UI_ATTRS che contiene un oggetto con due ulteriori proprietà, SYNC e BIND . Ciascuno di questi è un array elenco dei nomi degli attributi di configurazione di essere inizialmente sincronizzati e poi ascoltato per mantenere l'interfaccia utente riflettente valori correnti. Widget attende che ciascuna di queste voci per avere un metodo associato ad esso, prende il nome dell'attributo prefisso _uiSet con il primo carattere del nome dell'attributo convertito in caratteri maiuscoli per avere il nome del metodo, in caso camel corretta. Quindi, se "value" è stata quotata in una qualsiasi delle _UI_ATTRS array (in entrambi i SYNC o BIND ), Widget si aspetterebbe di trovare un _uiSetValue metodo. Questo metodo riceve due argomenti, il value viene impostato e la src del cambiamento. Questo è il codice per la nostra Spinner _uiSetValue metodo:

  _uiSetValue: function (value, src) {
     if (src === UI) {
         ritorno;
     }
     this._inputNode.set (VALUE, this.get (formattatore) (valore));
 }, 

Tutti gli identificatori maiuscole che vedete in questo pezzo di codice corrispondono a costanti stringa dichiarata altrove, per consentire al compressore YUI per fare il suo lavoro migliore. Il metodo, in fondo, imposta il value attributo HTML nella <input> casella per il set di nuovo valore, dopo essere stato formattato. Il riferimento alla casella di testo è stato fornito da _locateNodes . La src argomento viene inizialmente controllato per vedere se impostato il valore di stringa 'ui' . Se è così, nessuna azione sarà presa. Questo per evitare cicli infiniti. Se l'utente inserisce qualcosa nella casella di input, il suo valore sarebbe andato nel value attributo di configurazione che poi avrebbe sparato un valueChange evento, che otterrebbe _uiSetValue chiamata che, se incontrollata, potrebbe poi andare a modificare il valore della casella di input, che farebbe scattare l'intero processo di nuovo. Così, in _uiSetValue , se conosciamo il cambiamento deriva dalla UI, non facciamo nulla e così interrompere il loop. Tuttavia, ciò richiede un altro pezzo di codice altrove. Nel listener per l'evento DOM, quando abbiamo impostato l'attributo di configurazione, si usa il terzo argomento opzionale per impostare, in questo modo:

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

Spetta a noi far sì che i cambiamenti provenienti dal UI sono contrassegnati così e quindi controllare che stessa bandiera per evitare loop. Usare l'identificatore src quando si imposta il valore dell'attributo non, source che non sarà riconosciuto.

Con tutto questo detto, non ho ancora parlato della proprietà statica _ATTRS_2_UI menzionato nel titolo di questa sezione. Come i commenti nei miei spettacoli precedente articolo (attraverso gli errori che ho fatto in loro), facendo in modo che tutti gli attributi che riguardano l'interfaccia utente sono correttamente elencati è un po 'disordinato. Non si dovrebbe mai inizializzare _UI_ATTRS da zero dal momento che già Widget elenca tutta una serie di attributi e di quelli andrebbero perduti. Devi concatenare i nomi degli attributi nuovi su quelli già esistenti, che è un po 'difficile ricordare come farlo nel modo giusto. Per farla semplice, MakeNode leggerà dalla proprietà statica _ATTRS_2_UI e fare che la concatenazione per voi. Si concatenare tutte le liste di questo tipo dalla classe ogni nella catena di ereditarietà così a ogni livello ogni classe in grado di gestire i propri attributi. In Spinner, abbiamo:

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

MakeNode accetterà sia un array di nomi o un nome singolo attributo, come in questo caso.

La domanda sorge spontanea, perché due liste, una per legare l'altra per la sincronizzazione? SYNC viene utilizzata la prima volta, dopo le renderUI e bindUI metodi, se esistono, si chiamano e prima syncUI mentre quelli elencati in BIND saranno tenute a gli attributi corrispondenti per successive modifiche. Molto spesso il SYNC matrice ha meno voci BIND lista e questo perché il modello per il componente può già avere il valore molto stesso attributo di configurazione e non c'è bisogno di fare una sincronizzazione iniziale. Quindi, se il valore predefinito per il value attributo di configurazione è una stringa vuota e la <input> elemento nel modello non ha alcun value attributo, allora non c'è bisogno di sincronizzare il loro inizializzazione.

Attributi elencati in BIND avranno il loro _uiSet Xxxx metodi chiamati in qualsiasi ordine, come attributi possono essere impostati in qualsiasi ordine. Attributi elencati nella SYNC sarà chiamata una volta nell'ordine in cui sono elencati con quelli degli antenati prima di loro eredi, per cui se uno è dipendente da un altro (cosa che non dovrebbe), l'ordine può essere importante.

MakeNode verificherà le voci duplicate in una qualsiasi di queste matrici. Se qualcuno appare, significa che un nostro componente eredita dalla classe gestisce già questo attributo e ogni nuova dichiarazione avrebbe oltrepassato molto probabilmente il _uiSet Xxxx gestore per esso. Per inciso, MakeNode verifica anche per le voci duplicate in _CLASS_NAMES , che possono anche causare conflitti in alcuni, anche se non tutte, le circostanze. MakeNode scriverà un messaggio nel registro per tali errori.

La proprietà _PUBLISH

Infine, il _PUBLISH proprietà statica vengono elencati gli eventi che devono essere pubblicati. Esso contiene un hash utilizzando il nome della manifestazione come le sue chiavi e un oggetto letterale di attributi di configurazione come i suoi valori. Essa pubblicherà tutti gli eventi elencati in tale proprietà in tutta la catena di ereditarietà. Il nome stesso evento può essere pubblicato in una classe e in ogni classe che eredita da essa, che renderà gli attributi di configurazione di quelle successive sovrascrivono quelle in quelli più anziani. Ad esempio, si potrebbe desiderare di fare una trasmissione di eventi esistente a livello globale. Proprio come con la _EVENTS proprietà, dal momento che _PUBLISH è una proprietà statica senza accesso a this , quando si specificano le funzioni, è il nome del metodo, come una stringa, che deve essere dato.

Conclusione

MakeNode offre un processore modello molto semplice, con funzionalità che è fortemente integrata con la classe base Widget. Esso fornisce anche metodi di supporto per creare NOMECLASSE da utilizzare nel modello e di utilizzare questi nomi per individuare e riferimento ai nodi creati. Inoltre fornisce i mezzi per agganciare sugli eventi generati sia dalla UI e il componente stesso e associare ognuna con un metodo. Lo fa tutte queste cose, avendo cura di rispettare la catena di ereditarietà dritto fino a Widget e qualsiasi livello di classi che si possono definire.

Esso non prevede assolutamente tutte le possibilità, ma copre una vasta gamma di loro. Tuttavia, non vi preclude la possibilità di aggiungere funzionalità extra. Raramente si potrebbe avere a dare una bindUI o syncUI metodo se si utilizza la colla fornita da MakeNode, ma è possibile farlo, dal momento che MakeNode non li utilizza.

Come un bonus a chi ha avuto la pazienza di leggere insieme Button fino a questo punto, ho anche modificato Anthony Pipkin di componenti galleria e fece una fisarmonica e componenti TimeSpinner, tutti disponibili in Galleria .

Circa l'autore: Daniel Barreiro (schermata con il nome Satyam) è stato intorno per un bel po 'di tempo. L'ENIAC è stato spento il giorno prima che lui nascesse, in modo che gli mancava, ma non ha perso molto da allora. Ha avuto la possibilità di schede perforate, il programma 6502 chip (ricordate l'Apple II?), Possiede un TRS-80 e vedere alcuni pezzi fantastici di attrezzatura operativa nella sua nativa Argentina che avrebbero potuto essere nei musei altrove. Quando la globalizzazione ha aperto le porte al mondo, il suo allora poco sfruttabili inglese (più una laurea in Ingegneria Elettrica) lo ha messo sul percorso di carriera che si è conclusa in 5 anni di lavoro nella parte posteriore della Bay Area nei giorni di NCSA Mosaic. Totalmente affascinato dalle scarabocchi divertenti un suo amico scrisse nel suo editor di testo semplice, piena di <'s e>' s, ha finito per imparare un bel po 'sul mondo di ingegneria frontend. E 'stato un lungo viaggio dal COBOL e Fortran. Ora vive tranquillamente semi-pensionato nella vicina costa del Mediterraneo a Barcellona, ​​Spagna.

Trova le conversazioni: bloglines | technorati

Condividi ed estendere: Segnalibro con Del.icio.us | Digg it! | reddit!