Yahoo! User Interface Blog (YUIBlog)

YUIConf 2011 Workshop Anmeldungen ab sofort möglich

Workshop Anmeldungen sind jetzt für YUIConf 2011 eröffnet. Tickets zu jeder Sitzung sind separat erhältlich. Spaces begrenzt sind, so melden Sie sich bitte frühzeitig!

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

YUIConf 2011 Early Bird Registrierung ist jetzt geöffnet

Frühbucher-Registrierung YUIConf 2011 ist ab sofort geöffnet Eventbrite! Die diesjährige Veranstaltung findet November 2-4 auf Yahoo! 's Great America Campus. Wir freuen uns, Ihnen einen ganzen Tag hands-on Workshops (Mi), gefolgt von zwei volle Tage Tech-Gespräche über YUI (Do / Fr). Anmeldung für die Konferenz kostet 75 $ in diesem Jahr mit einem Early-Bird-Rate von 50 $. Anmeldung zu den Workshops wird separat von der Konferenz und Details folgen in Kürze.

Wir sind damit beschäftigt, Futter bis große Themen, darunter:

• YUI Komponente tiefe Tauchgänge, einschließlich Dial und Kalender
• YUI in mobilen Umgebungen
• Testen mit YUI
• Real-world Migration Geschichten
• und vieles, vieles mehr!

Wie immer wird Konferenzsitzungen werden auf Video aufgenommen und auf YUI Theater und unsere YouTube-Kanal für alle zu genießen.

Wir hoffen, Sie dort zu sehen!

(WICHTIG! Internal Yahoos registrieren Sie sich bitte für eine Yahoo! Mitarbeiter Ticket und geben Sie Ihre Arbeit-Mail-Adresse.)

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

YUI 3.4.1 ist jetzt live

Die YUI 3.4.1 kurze Zykluszeiten Release ist sofort verfügbar EUR und für Download , mehr als eine Woche früher! Hier sind ein paar Highlights dieser Version:

• Mehr als 150 Bugfixes für Steuerung , Systemsteuerung , DataTable , Kalender , und eine Reihe anderer Module.
• Bug Fixes Y.substitute () von YUI Beitrag Satyam .
• Japanische Sprachunterstützung für Kalender und Console , mit freundlicher Genehmigung von YUI Beitrag Ryuichi Okumura .
• Diverse Optimierungen an der Dokumentation und Beispiele.

Sie können können auch die Zusammenfassung aller Änderungen in der Komponente History-Dateien für YUI 3.4.1 hingewiesen sowie die vollständige Liste der Karten während YUI 3.4.1 Entwicklung angesprochen . Wie immer würden wir uns freuen, dass Sie irgendwelche Vorschläge haben Sie vielleicht oder Mängel, Sie in unserem Ticket-Datenbank aufdecken könnten Datei. Feedback für YUI 3.4.1 kann eingegeben werden dem YUI 3 Ticket-Datenbank .

Wir möchten auch, dass in der nächsten Version von YUI ankündigen, DataType.Date, DataType.Number und DataType.XML wird zugunsten von Y. Date, Y. Anzahl und Y. XML veraltet sein, bzw.. Abwärtskompatibilität wird für ein Release beibehalten werden, um jedem die Chance zum Umschalten.

Oh, und noch etwas: Wir sind auf einem guten Weg in die Migration der YUI Theater Inhalte auf YouTube . Für Vorspeisen, lesen Sie in Douglas Crockford Vortragsreihe "Crockford auf JavaScript" - komplett mit Untertiteln!

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

YUI 3.4.1 PR1 jetzt erhältlich auf EUR

YUI 3.4.1 PR1 ist nun auch für Gemeinde Tests und Feedback. Es ist auf der Yahoo! EUR bei http://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js , und Sie können die Änderungen gehen in 3.4.1 aus dem siehe Liste der Tickets überprüft in für die Freigabe .

Die 3.4.1 Version wird eine kleinere Bug-Fix Release mit einem verkürzten Entwicklungszyklus, denn durch 5. Oktober Go-Live geplant werden. Bitte Bugs und Regressionen in den Ticket-Datenbank auf YUILibrary.com am Morgen des Montag, 26. September, so können wir sicherstellen, dass alle kritischen Fragen vor der allgemeinen Freigabe angesprochen werden. Wenn keine dringenden Probleme gemeldet sind, werden wir 3.4.1 so früh wie 27. September veröffentlichen.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

YUI: Öffnungszeiten Do 15. September

Satyam MakeNode Erweiterung

Wenn Sie nicht wissen, Satyam , müssen Sie neu sein YUI. Er war ein Pfeiler des YUI Community seit den frühen Tagen der YUI 2. Seine Artikel über YUIBlog sind einige der am meisten gelesene und nach Quellen für "how to wirklich nutzen die Bibliothek" style Inhalt. Wenn Sie, dass Satyam schrieb es sehen, es lohnt sich zu lesen ist, und wahrscheinlich eine neu zu lesen und ein Lesezeichen.

Im Juli verzeichnete er ein großer Artikel über eine MakeNode Widget-Erweiterung, um einige der gängigen Muster verwendet werden, wenn Gebäude Widgets vereinfachen und erleichtern die gemeinsame Fehltritte vermeiden will. Das Modul ist seitdem in der Galerie hinzugefügt und gerade heute früh veröffentlichte er ein Update zu seinem ursprünglichen Artikel.

Das ist, was werden wir darüber reden. Die Merkmale, die Geschichte und die Argumentationen. Wenn Sie bislang verwendet haben, die Komponente der Infrastruktur, insbesondere, Y.Widget haben Sie wahrscheinlich zumindest einige der Hürden Satyam dargelegt, um mit der Adresse angetroffen MakeNode . Das wird eine Best-Practices fest sein, so bringen Sie Ihren Editor, und Ihre eigenen Erfahrungen zu teilen.

Zeit & Details

Wir werden am Donnerstag, Online-10.00 Uhr bis 11.00 Uhr PDT.

Join the Meeting

Aufnahme

Die Aufnahme wird in der YUILibrary YouTube-Kanal zur Verfügung .

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Einen Talk für YUIConf 2011

Zeigen Sie Code, den Sie haben auf oder teilen Sie etwas, was Sie gelernt bei der Arbeit mit YUI gearbeitet haben! Senden Sie Ihren Vorschlag zu yui-events (at) yahoo-inc.com von Freitag 23. September, 2011. Achten Sie darauf, gehören:

• Titel
• Beschreibung
• Zielgruppe
• Ihr Name
• Eine kurze bio

YUIConf 2011 3. und 4. November auf Yahoo! 's Santa Clara, CA-Campus statt. Ihre Präsentation sollte etwa 45 Minuten dauern. Wir werden bis zu 15 Minuten nach der Präsentation für Q & A. haben Beitrag Fragen in den Kommentaren oder per E-Mail direkt an uns yui-events (at) yahoo-inc.com.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!

Aktualisiert: Die "MakeNode" Widget-Erweiterung

Anmerkung der Redaktion: Dieser Artikel wurde ursprünglich Anfang dieses Jahres veröffentlicht . Seitdem die hat MakeNode Modul, um die YUI Galerie veröffentlicht und erhielt einige Verbesserungen. Der heutige Artikel spiegelt die neuesten Änderungen an MakeNode.

In meinem vorherigen Artikel, ein Rezept für ein YUI 3 Anwendung , zeigte ich einen Weg zu benutzen Y.substitute als eine sehr grundlegende Vorlage Prozessor. Die Idee nahm das Leben von dort mit Anregungen von den Leuten in der # yui IRC-Channel, und ich machte es ein Widget-Erweiterung, die auf dem YUI Galerie, die so genannte MakeNode . MakeNode ist nicht eine generische Vorlage Prozessor und es ist nicht so gemeint ist. Auf der anderen Seite ist es eng mit dem YUI integrierten Widget Foundation Class, inklusive className-und Event-Helfer und Internationalisierung. In diesem Artikel werde ich die Spinner Beispiel, und ändern Sie den Richtlinien von meinem früheren Artikel zu folgen und MakeNode verwenden. MakeNode ist als eine Galerie Komponente sowie die modifizierte Spinner -Komponente und die beispielsweise in diesem Artikel verwendet werden .

Erweitern Sie Ihre Komponente

So laden MakeNode Sie brauchen, um das Modul in Ihrem gehören YUI().use() -Anweisung mit dem Namen 'gallery-makenode' oder, wenn die Definition eines Moduls über YUI.add() , geben Sie es als requires Array. Dann erweitern Sie Ihr Widget listen Sie sie in das dritte Argument zu Y.Base.create() , wie folgt aus:

  Y. Spinner = Y.Base.create (
      'Spinner',
      Y. Widget,
      [Y. MakeNode]
      {
         / / Instanz Mitglieder ...
      }
      {
          / / Static Mitglieder
      }
 ); 

Sie können MakeNode entlang einer beliebigen Anzahl von geeigneten Erweiterungen für Widget, wie WidgetParent, WidgetChild, WidgetStdMode hinzufügen, fügt etc. MakeNode zwei geschützte Methoden, die von den Entwickler, verwendet werden _makeNode und _locateNodes, und es wird von mehreren statischen Eigenschaften zu lesen, wenn gefunden .

Alle Mitglieder dieser Erweiterung sind entweder geschützt oder privat, da sie dazu bestimmt sind, von der Komponenten-Entwickler und nicht durch den Implementierer Verwendung dieser Komponenten, die nicht mit ihnen belästigt werden sollte verwendet werden. Denken Sie daran, die "Show Protected"-Option prüfen bei der Anzeige der API-Dokumentation .

Definieren Sie die Vorlage

Das erste, was Sie normalerweise tun müssen, ist die Vorlage für Ihre Komponente zu definieren. Für die Spinner, werden unsere Vorlage werden:

  _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'), 

Die Standardvorlage wird in der Regel genannt werden _TEMPLATE und erklärte, auf der anderen statischen Eigenschaften der Klasse, wie ATTRS . MakeNode wird diese Vorlage benutzen, wenn nichts anderes ausdrücklich vorgesehen ist. Die Vorlage ist von einfachem HTML sowie eine Reihe von Platzhaltern in geschweiften Klammern, die jeweils ein einzelnes Zeichen (die Verarbeitung code) gemacht, gefolgt von einem oder mehreren Argumenten eingeschlossen wurden. Die Platzhalter und was sie produzieren, sind:

• {@ attributeName} Konfiguration Attributwert

• {p propertyName} Instanzeigenschaft Wert

• {m methodName arg1 arg2 ….} Rückgabewert der Methode gegeben. Die Verarbeitung Code wird durch den Namen der Methode und eine beliebige Anzahl von Argumenten durch Leerzeichen getrennt werden.

• {c classNameKey} CSS className aus den generierten _CLASS_NAMES statische Eigenschaft (siehe Die _CLASS_NAMES Eigentum Abschnitt weiter unten)

• {s key} -String aus dem strings -Attribut, mit key , als die sub-Attribut.

• {? condition valueIfTrue valueIfFalse } ähnlich wie die ?: Betreiber von JavaScript, ausgewertet valueIfTrue wenn die Bedingung truish, valueIfFalse anders.

• {1 condition valueIfOne valueIfMore } verwendet werden, um Singular / Plural Worte über den Wert der Bedingung Basis zu produzieren.

• {} jeder andere Wert wird wie behandelt werden Y.substitute tut.

Zum Beispiel, {@ value} wird zu übersetzen this.get('value') , während {p value} übersetzt this['value'] .

Als Platzhalter Argumente haben, wie {m} , {?} und {1} , müssen Strings in doppelte Anführungszeichen eingeschlossen werden. Zahlen, boolesche Werte und null (alle ohne Anführungszeichen) wird an ihren richtigen Datentypen analysiert werden. Platzhalter können verschachtelt werden. Die {?} und {1} Platzhalter enthält üblicherweise eine verschachtelte Platzhalter für den Zustand und sehr wahrscheinlich für ihre Werte, zum Beispiel:

  {P qty} {1} {p qty "Einheit" "Einheiten"} 

Wenn die Eigenschaft qty 1 ist, wird es zu bewerten "1 unit" , für 2 oder mehr wird es wieder "2 units" und so weiter. Eine ausführlichere Version Umgang mit Null wäre:

  {?  {P qty} "{p qty} {1} {p qty" Einheit "" Einheiten "}" "none"} 

Beachten Sie, dass das Ergebnis der Verarbeitung der inneren Platzhalter, wenn ein String ist, muss in seinen eigenen Satz von Anführungszeichen gesetzt werden.

Um ein doppeltes Anführungszeichen in eine Zeichenfolge in Anführungszeichen, verwenden Sie \\" , wobei der doppelten Backslash erforderlich, weil JavaScript wird ein einziger interpretieren und verwirft, bevor es zu MakeNode bekommt nur doppelte Anführungszeichen sind erlaubt;. MakeNode nicht verwenden eval() so Der Parser ist begrenzt, aber sicher. Anything but Zahlen, null , booleans und doppelte Anführungszeichen werden ignoriert.

Die {?} Platzhalter ist auch praktisch, um mit Checkboxen und Radio-Buttons verwenden. Es kann verwendet werden zur Herstellung der String "checked" in Abhängigkeit von der Wahrheitswert der Verarbeitungsanweisung Code, der folgt. So <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/> wird eine deutliche Checkbox zu produzieren, wenn die getLength Methode liefert alles andere als Null.

Für die {c} Platzhalter, müssen wir eine _CLASS_NAMES -Eigenschaft definiert.

Weitere Platzhalter können MakeNode, indem Sie sie in die hinzugefügt werden _templateHandlers Hash.

Die _CLASS_NAMES Eigentum

Zusammen mit dem ATTRS und _TEMPLATE statische Eigenschaften können wir definieren eine _CLASS_NAMES statische Eigenschaft, die ein Array von Strings Punkte. Jeder dieser Strings wird verwendet, um ein className erzeugen. So _CLASS_NAMES: ['input'] wird die className produzieren "yui3-spinner-input" . Die Klassennamen werden in einer Instanz-Eigenschaft gespeichert this._classNames . Die {c input} Platzhalter in der Vorlage oben wird ersetzt durch "yui3-spinner-input" . Ich nenne die Saiten in börsennotierte _CLASS_NAMES wie 'input' , die "className Schlüssel", da sie als Schlüssel zu den tatsächlichen className oder die Elemente enthält, die Klassennamen beziehen verwendet werden können, wie wir später sehen werden.

Sie können die _CLASS_NAMES -Eigenschaft auf eine beliebige Anzahl von Klassennamen zu generieren, ob man sie in der Vorlage verwenden oder nicht. Sie können noch erreichen diese zusätzlichen Klassennamen aus this._classNames . Der className wird mit Hilfe des yui3 Präfix durch den Wert des folgenden NAME statische Eigenschaft aktiviert Kleinbuchstaben, und dann den String in bestimmten _CLASS_NAMES (diese letzte wird nicht eingeschaltet Kleinbuchstaben), die alle getrennt durch Bindestriche. Die _classNames Hash enthält auch die Klassennamen für die boundingBox und die contentBox , die erste unter der "boundingBox" -Taste und die zweite unter dem "content" -Taste. Widget ordnet den boundingBox die Klassennamen von den Werten der abgeleiteten NAME Eigenschaft der einzelnen Klassen in der Erbschaft-Kette, beginnend mit yui3-widget . MakeNode Läden in this._classNames nur die oberste className für die boundingBox .

Wenn die WidgetStdMod Modul geladen ist, wird MakeNode erzeugen auch Einträge für seine HEADER , BODY und FOOTER Abschnitte mit den gleichen Tasten, die auch die Konstanten in der gleichen Modul definiert.

Wenn eine Komponente mehrere Ebenen vom Widget, wie SuperSpecialSpinner Erben von SuperSpinner , die sich aus erbt Spinner , die sich aus erbt Widget, und wenn einer oder alle von ihnen haben _CLASS_NAMES Eigenschaften definiert, MakeNode wird Klassennamen für alle von ihnen produzieren und speichern sie in this._classNames . Sie brauchen nicht auf jeder Ebene die Namen bereits in den vorherigen Stufen deklariert sind. In der Tat ist es besser, dass Sie nicht seit dem Klassennamen auf jeder Ebene produziert wird der Wert der Nutzung NAME Eigenschaft dieser Ebene. So in SuperSpecialSpinner , {c input} wird noch in Folge "yui3-spinner-input" und nicht "yui3-superspecialspinner-input" und so wird es um Ihre CSS-Datei weiterhin gültig.

Die {s} Platzhalter

Widget hat eine strings -Konfiguration Attribut definiert, wenn es nicht mit einem beliebigen Wert initialisiert. Dieses Attribut soll Strings, die sichtbar (oder mittels Screenreader, um zu lesen) den Benutzer zu halten. Es ist wichtig, dass Sie nie gehört sichtbaren Strings direkt in die Vorlage. Dies ist keine Voraussetzung für MakeNode - es hat nie eine gute Idee gewesen war. Alle Zeichenketten, die durch angesehen oder gelesen werden, um den Benutzer sind, sollten immer in der platziert werden strings -Attribut. Die strings Attribut enthält einen Hash, wo jeder einzelne Text durch seinen Schlüssel befindet. Die Spinner-Komponente hat die folgenden Zeichenfolgen, die Sie in der Vorlage verwendet oben sehen kann.

  Streicher: {
     Wert: {
         Eingabe: ". Drücken Sie die Pfeiltasten nach oben / unten-Tasten für kleinere Schritten page up / down für die wichtigsten Schritten",
         up: "Increment"
         unten: "Decrement"
     }
 } 

Der beste Teil der dabei ist, dass Ihre Komponente in andere Sprachen lokalisiert sehr leicht von Entwicklern mit der Komponente. Beim Erstellen einer Instanz der Spinner, könnten Sie tun:

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

Einstellung der Konfiguration Attribut strings auf diese Weise ersetzt das Standard- strings -Werte mit denen aus der Sprache-Ressource-Datei mit der Sprache bereits definiert. Die {s} Platzhalter greift die Saiten in die gespeicherten strings Attribut, entweder die Standardeinstellungen oder die übersetzten Lieben, wenn gesetzt. Die {s xxxx} Platzhalter ist fast wie mit {@ strings.xxxx} , außer dass die lokalisierten Ersetzungszeichenfolgen können Platzhalter, die weiterverarbeitet werden müssen. Dies ist für Übersetzungen wichtig, da syntaktische Reihenfolge variiert von Sprache zu Sprache und das ermöglicht Umformulierung des Textes, einschließlich der Platzhalter für jede Sprache anpassen. Strings kann ebenfalls durch sein {@ strings.xxxx.yyyy.zzzz} , die den Zugriff auf Saiten tiefer und verschachtelte weiter Substitutionen zu verhindern ermöglichen. Geschweifte Klammern können in einem Text mit aufgenommen werden {LBRACE} und {RBRACE} als Platzhalter.

Mit _makeNode in renderUI

Wir verwenden die Vorlage auf das Markup für unsere Komponente zu erstellen. Dazu rufen wir MakeNode ist _makeNode Methode, wie folgt aus:

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

Dies wird in der Füllung contentBox unserer Widget mit dem Markup aus der Verarbeitung der Vorlage. Die _makeNode Methode gibt eine Instanz von Y.Node , die angehängt werden kann oder eingeschoben werden oder einfach nur statt für eine spätere Verwendung. Es gibt nicht einen String, erzeugt es eine Node -Instanz. (Wenn Sie brauchen einen String und nicht ein Knoten, können Sie die _substitute Methode, die Sie in einer Vorlage Pass benötigt.)

Die _makeNode Methode hat zwei optionale Argumente: ein Verweis auf eine Vorlage und ein Objekt in Platzhalter zu füllen, wie Y.substitute tut. In unserem einfachen Spinner Beispiel gibt es eine einzige Vorlage für die ganze Widget, sondern auch andere Widgets können Bits und Stücke aus mehreren Vorlagen zu verlangen. In diesem Fall würden Sie in der Regel rufen _makeNode ohne Argumente für den Hauptteil und nennen es noch einmal mit verschiedenen Vorlagen in den zusätzlichen Teilen zu füllen. Das Beispiel enthält diese renderUI Methode:

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

Der erste Aufruf von _makeNode gibt einen Node -Instanz in der Variable gespeichert fieldset . Die Probe-Komponente ist auch mit erweiterten Y.ArrayList so die RADIO_TEMPLATE mit Werten aus der Elemente im Array-Liste gespeichert und die daraus resultierenden Knoten angehängt, die getroffen gefüllt werden fieldset , bevor es schließlich auf die beigefügten contentBox . Die spezielle Platzhalter wie {@} oder {p} wird noch Attribute oder Eigenschaften in der Hauptsache zu verweisen. Die verschachtelte Elemente werden verarbeitet, wie sein Y.substitute würde.

Die _locateNodes Methode

MakeNode ferner ein _locateNodes Methode, die versuchen, alle Elemente mit dem Klassennamen in deklariert wird lokalisieren _CLASS_NAMES . So suchen Sie bestimmte Elemente, die Sie beliebig viele className Schlüssel übergeben können, sonst _locateNodes versucht sie alle. Für jedes Element eines jeden className gefunden, _locateNodes erzeugt eine private Instanz Eigenschaft mit dem Unterstrich, gefolgt von der Name des Schlüssels und die folgen "Node" -Suffix. So wird in unserer Spinner Beispiel _locateNodes generiert die Eigenschaften _inputNode , _upNode und _downNode . Wenn mehrere Elemente den gleichen className haben, _locateNodes zurückkehren wird ein Verweis auf die erste von ihnen. Wenn ein Element nicht gefunden wird, wird keine Variable angelegt werden.

In der Spinner-Komponente verwenden wir _locateNodes nach dem Erstellen des Markups:

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

Die _EVENTS statische Eigenschaft

Eine weitere Eigenschaft kann entlang der Linien definiert werden _TEMPLATE und _CLASS_NAMES und das ist _EVENTS . _EVENTS wird ein Hash-up der Klasse Name Tasten, die jeweils mit einem Hash von Event-Typen und Methoden, um mit ihnen umzugehen enthalten. Es ist besser mit einem Beispiel erklären:

  _EVENTS: {
     Eingang: 'change', / / ​​ruft this._afterInputChange
     boundingBox: [
         {
             Typ: "Schlüssel",
             fn: "_onDirectionKey ', / / ​​ruft this._onDirectionKey
             args: ((Y.UA.opera) "down":? "drücken:") + "38, 40, 33, 34"
         }
         "Mousedown '/ / ruft this._afterBoundingBoxMousedown
     ]
     Dokument: "mouseup ', / / ​​ruft this._afterDocumentMouseup,
     Y: "broadcastingObject: someEvent '/ / ruft diese [" _afterYBroadcastingObject: someEvent "]
 } 

_EVENTS ist ein Objekt (ein Hash) mit einer beliebigen Anzahl von Einträgen. Die Namen der Eigenschaften, das heißt, die Schlüssel des Hash, identifizieren die Knoten, deren Veranstaltungen werden wir zu hören. Es sind die gleichen className Schlüssel in definierten _CLASS_NAMES . Es gibt mehrere zusätzliche Sondertasten:

• "boundingBox" wird das umgebende Feld selbst beziehen.

• "document" bezieht sich auf das Dokument mit diesem Widget.

• "THIS" bezieht sich auf den Widget selbst

• "Y" bezieht sich auf die Y -Instanz.

Wenn das Widget mit WidgetStdMod sowie erweitert, doch die Schlüssel HEADER , BODY und FOOTER wird auf jene Abschnitte beziehen, da sie zur Verfügung stehen wird in der _classNames Hash. JavaScript muss nicht der Schlüssel zum zitiert werden, wenn sie gültige Bezeichner so dass keiner der oben zitierte werden müssen.

Die _EVENTS Gegenständen verarbeitet wird, nachdem die renderUI , bindUI und syncUI Methoden genannt worden, so das Widget wird voraussichtlich bereits im Hauptteil des Dokuments eingefügt werden, da sonst die "document" -Kennung wird scheitern.

Für jedes dieser Elemente gibt es ein Ereignis-ID oder ein Array von Event-IDs. Ein Ereignis kann durch die Art des Ereignisses zu hören oder ein Objekt mit weiteren Details erkannt werden. Standardmäßig wird MakeNode Verwendung als Zuhörer eine Methode namens Verwendung der "_after" Präfix durch das Element Kennung mit dem ersten Zeichen, gefolgt von den Event-Typ mit seinem ersten Charakter groß kapitalisierten gefolgt. Die Code-Block oben zeigt die Methoden für jede Veranstaltung genannt.

Ein Ereignis-ID kann auch ein Objekt mit Eigenschaften werden type , fn und args . Der type ist obligatorisch und gibt die Art der Veranstaltung gehört zu werden. Die fn -Eigenschaft gibt den Namen der Methode, die die Veranstaltung damit Vermeidung der automatischen Benennung hören wird. Da _EVENTS ist eine statische Eigenschaft, hat sie keinen Zugang zu this , damit es nicht kann ein Verweis auf eine Methode, nur seinen Namen. Der args -Argument kann verwendet werden, um weitere Argumente für den Anrufer wie mit dem Pass werden key Ereignis, das einen Schlüssel-Spezifikation erfordert.

MakeNode verwenden Node.delegate , um auf Ereignisse auf Elemente innerhalb der zuhören boundingBox , während es benutzen will Node.after , um auf Ereignisse aus dem hören boundingBox und das Dokument Körper. Es wird verwendet this.after zu Veranstaltungen unter dem hören THIS Schlüssel und Y.after für Zuhörer unter den genannten Y -Taste. Alle Veranstaltungen sind auf die Verwendung hörte nach Ereignis-Listener, da sie gemeint sind, um das Widget auf Ereignisse zu reagieren, nicht um das Verhalten des Objekts, das sie so in keinem Fall diese Ereignisse verhindert oder gestoppt werden Brände Filter. (Anmerkung: Hören auf die key Veranstaltung auf alle verschachtelten Element funktioniert nur mit Version 3.4.0pr1 und höher, da Delegation der key Veranstaltung nicht zur Verfügung stand, bevor alle anderen Funktionen arbeiten mit früheren Versionen als auch.).

Die _EVENTS Erklärungen sind kumulativ, wenn die Komponenten voneinander erben. Jede Klasse in die Erbschaft-Kette wird eine eigene _EVENTS Erklärung getrennt verarbeitet.

Die _ATTRS_2_UI statische Eigenschaft

Events in beide Richtungen gehen, aus dem UI auf die Komponente und von der Komponente bis zur UI. Die ersten sind von der Handhabung _EVENTS Eigentum. Dann gibt es die Veranstaltungen, die von Attribut-Wert Änderungen, die in der Benutzeroberfläche widerspiegeln müssen gefeuert. Als ich im vorigen Artikel, wenn es irgendwelche Nebenwirkungen aus Ändern einer Konfiguration Attribut erwähnt, sollten sie nach Veränderung Ereignis-Listener verarbeitet werden, nicht durch die optional setter -Methode des Attributs, die nur mit der Normalisierung der Wert gesetzt umgehen sollen. Die UI sollte spiegeln den Stand der Konfiguration Attribute, zuerst in syncUI , wenn initialisiert und dann auf jedes Attribut change-Ereignis. Für letztere müssen wir ein Ereignis-Listener anhängen, die wir normalerweise in nicht bindUI . Widget bietet bereits einen Mechanismus, um so einfach, die ich in den Kommentaren zum vorherigen Artikel beschrieben zu machen.

Widget verwendet die Instanz Eigentum _UI_ATTRS , dass ein Objekt mit zwei weiteren Eigenschaften, enthält SYNC und BIND . Jede dieser ist ein Array mit den Namen der Konfiguration Attribute zunächst synchronisiert werden und dann hörte, um die UI spiegelt die aktuellen Werte zu halten. Widget rechnet jeder dieser Einträge auf ein Verfahren mit ihm verbunden sind, nach dem Attributnamen vorangestellt benannt haben _uiSet mit dem ersten Zeichen des Attributs name in Großbuchstaben umgewandelt, um den Namen der Methode in der richtigen Kamel Fall haben. So, wenn "value" in einem der aufgelisteten war _UI_ATTRS Arrays (in beiden SYNC oder BIND ), würde Widget erwarten, eine zu finden _uiSetValue Methode. Diese Methode werden zwei Argumente zu erhalten, der value festgelegt, und src der Änderung. Dies ist der Code für unser Spinner _uiSetValue Methode:

  _uiSetValue: function (value, src) {
     if (src === UI) {
         return;
     }
     this._inputNode.set (VALUE, this.get (FORMATTER) (Wert));
 } 

Alle Groß-Kennungen Sie sehen in diesem Teil des Codes entsprechen Stringkonstanten deklariert anderswo, damit die YUI Kompressor seine Arbeit besser machen. Die Methode, im Grunde setzt der value HTML-Attribut in der <input> Feld, um den neuen Wert zu setzen, nachdem sie formatiert. Der Verweis auf das Textfeld war, bereitgestellt durch _locateNodes . Das src Argument ist zunächst überprüft, ob der String-Wert gesetzt 'ui' . Wenn dies so ist, werden keine Maßnahmen ergriffen werden. Dies ist um Endlosschleifen zu vermeiden. Gibt der Benutzer etwas in das Eingabefeld ein, würde dessen Wert in die go value Konfiguration Attribut, das dann ein Feuer würde valueChange Ereignis, das würde sich _uiSetValue genannt, die, wenn nicht aktiviert, dann gehen Sie und ändern Sie den Wert des Eingangs-Box, die würde den gesamten Prozess erneut auslösen. So in _uiSetValue , wenn wir wissen, der Wechsel von der UI kommt, wissen wir nichts, und so brechen die Schleife. Dies erfordert jedoch einen anderen Teil des Codes anderswo. In der Zuhörer für das DOM-Ereignis, wenn wir die Konfiguration Attribut, verwenden wir die dritte optionale Argument gesetzt, wie folgt aus:

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

Es liegt an uns, um sicherzustellen, dass Änderungen aus dem UI gekennzeichnet sind damit und dann prüfen, ob dieselbe Flagge, um Schleifen zu vermeiden. Sie verwenden den Bezeichner src , wenn Sie den Wert des Attributs, nicht source , die nicht erkannt.

Mit all das gesagt hatte, habe ich noch nicht über die statische Eigenschaft gesprochen _ATTRS_2_UI in der Überschrift dieses Abschnitts erwähnt. Da die Kommentare in meinem vorhergehenden Artikel zeigt (durch die Fehler ich in ihnen gemacht), um sicherzustellen, dass alle Attribute, die die UI richtig aufgeführt sind, ist etwas unordentlich. Sie sollten nie zu initialisieren _UI_ATTRS von Grund auf neu seit Widget bereits listet eine ganze Reihe von Attributen und die verloren gehen würden. Sie haben zu neuen Attributnamen über die existierenden, was etwas ist schwer zu erinnern, wie man es richtig zu verketten. Um es einfach zu, wird MakeNode aus der statischen Eigenschaft gelesen _ATTRS_2_UI und tun Verkettung für Sie. Es werden alle solche Listen von jeder Klasse verketten in die Erbschaft-Kette so auf jeder Ebene jede Klasse kann eigene Attribute zu behandeln. In Spinner, haben wir:

  _ATTRS_2_UI: {
     BIND: VALUE,
     SYNC: VALUE
 } 

MakeNode akzeptieren sowohl eine Reihe von Namen oder ein einzelnes Attribut name, wie in diesem Fall.

Die Frage stellt sich natürlich, warum zwei Listen, eine für die Bindung der anderen für die Synchronisierung? SYNC ist das erste Mal verwendet, nachdem die renderUI und bindUI Methoden, wenn sie vorhanden sind, werden genannt und vor syncUI während jene, die in BIND wird, gebunden zu sein die entsprechenden Attribute für spätere Änderungen. Oft werden die SYNC -Array hat weniger Einträge als der BIND -Liste und das ist, weil die Vorlage für die Komponente vielleicht schon am selben Standardwert als die Konfiguration Attribut, und es gibt keine Notwendigkeit, eine erste Synchronisierung zu tun. Also, wenn der Standardwert für den value Konfiguration Attribut wird eine leere Zeichenkette und die <input> Element in der Vorlage hat keine value -Attribut, dann gibt es keine Notwendigkeit, sie bei der Initialisierung zu synchronisieren.

Attribute in börsennotierte BIND werden ihre _uiSet Xxxx Methoden in beliebiger Reihenfolge genannt, die als Attribute in beliebiger Reihenfolge gesetzt werden können. Attribute in börsennotierte SYNC einmal werden in der Reihenfolge, in der sie mit denen der Vorfahren vor ihren Erben aufgeführt sind aufgerufen werden, so, wenn man von anderen abhängig (was sie nicht) ist, kann die Reihenfolge wichtig sein.

MakeNode wird nach doppelten Einträgen in einer dieser Arrays zu überprüfen. Falls angezeigt, bedeutet dies, dass eine Klasse unserer Komponente aus bereits behandelt dieses Attribut und jede neue Erklärung würde höchstwahrscheinlich überschreiten die erbt _uiSet Xxxx Handler für sie. Übrigens MakeNode prüft auch, ob doppelte Einträge in _CLASS_NAMES , die auch zu Konflikten in einigen können, aber nicht alle Umstände. MakeNode wird eine Meldung in das Protokoll für solche Fehler zu schreiben.

Die _PUBLISH Eigentum

Schließlich ist die _PUBLISH wird statische Eigenschaft Liste jener Ereignisse, die veröffentlicht werden müssen. Es enthält einen Hash mit dem Namen des Ereignisses, wie die Tasten und einem Objekt-Literal der Konfiguration Attribute wie seine Werte. Es veröffentlicht alle Ereignisse in einer solchen Immobilie in allen die Erbschaft-Kette aufgeführt. Das gleiche Ereignis Name kann in einer Klasse erschienen und in jeder Klasse erbt von ihm, das macht die Konfiguration Attribute später zu überschreiben diejenigen in die älteren. Zum Beispiel könnten Sie ein vorhandenes Ereignis sendet weltweit zu machen. Genau wie bei den _EVENTS Eigenschaft, da _PUBLISH ist eine statische Eigenschaft, die keinen Zugang zu this , bei der Angabe von Funktionen ist es der Name der Methode, wie eine Zeichenfolge, die gegeben werden muss.

Abschluss

MakeNode bietet eine sehr einfache Vorlage Prozessor, mit Funktionen, die stark mit dem Widget Foundation Class integriert ist. Es bietet auch Hilfsmethoden Klassennamen zu schaffen, in der Vorlage verwendet werden, und diese Namen verwenden zu lokalisieren und beziehen sich auf den Knoten erstellt. Es bietet auch die Mittel, um in das Geschehen sowohl durch die UI und das Bauteil selbst erzeugt Haken und assoziieren mit jeweils einer Methode. Es macht alle diese Dinge, und achten dabei auf die Erbschaft-Kette geradeaus bis zum Widget und jede Art von Klassen können Sie definieren, zu respektieren.

Sie gilt nicht für absolut alle Möglichkeiten bieten, deckt aber eine gute Auswahl von ihnen. Dennoch ist es nicht auszuschließen Sie das Hinzufügen zusätzlicher Funktionalität. Vielleicht haben nur selten zu einer Zuschreibung bindUI oder syncUI Methode, wenn Sie den Kleber durch MakeNode zu verwenden, aber Sie können dies tun, da MakeNode nicht nutzt sie.

Als Bonus für diejenigen, die die Geduld hatten, um so weit, ich habe auch so modifiziert Anthony Pipkins Knopf Set von Galerie-Komponenten zu lesen und machte ein Akkordeon und TimeSpinner Komponenten, die alle in der Gallery .

Über den Autor: Daniel Barreiro (Chat-Namen Satyam) gibt es schon seit geraumer Zeit. Der ENIAC wurde aus dem Tag gemacht, bevor er geboren wurde, so verpasste er das, aber er hat nicht viel, da verpasst. Er hatte eine Chance, Lochkarten, Programm 6502 Chips (erinnere mich an den Apple II?), Besitzen einen TRS-80 und einige fantastische Stücke von Betriebsmitteln in seinem Heimatland Argentinien, die in Museen anderswo haben könnte. Wenn die Globalisierung öffneten sich die Türen zur Welt, legte dann kaum brauchbare English (plus ein Elektrotechnik-Studium) ihn auf der Laufbahn, die in einem 5-Jahres-Job in der Bay Area endete wieder in den Tagen des NCSA Mosaic. Völlig von der lustigen Schnörkel ein Freund von ihm in seiner einfachen Texteditor, voll von <'s und>' s schrieb fasziniert, landete er lernen sehr viel über die Welt der Frontend-Engineering. Es war eine lange Reise, da COBOL und Fortran. Jetzt lebt er ganz glücklich semi-Ruhestand an der Mittelmeerküste in der Nähe von Barcelona, ​​Spanien.

Finden Gespräche: bloglines | technorati

Share and erweitern: Lesezeichen mit del.icio.us | digg it! | reddit!