Yahoo! User Interface Blog (YUIBlog)

"MakeNode" Widget Rozšíření

Poznámka editora: Protože tento článek byl původně publikován, je modul MakeNode byla zveřejněna do galerie Yui a obdržela několik vylepšení. Naleznete v aktualizované článku, Aktualizováno: "MakeNode" Widget rozšíření .

V mém předchozím článku, recept na YUI 3 aplikace , ukázal jsem způsob, jak využít Y.substitute jako velmi základní šablony procesoru. Nápad se život odtud, kde se návrhy od lidí v Č. Yui IRC kanálu, a udělal jsem to Widget rozšíření, které je k dispozici na mých stránkách, tzv. MakeNode . MakeNode není obecná šablona procesor a to není myšleno jako jeden. Na druhou stranu, je úzce integrován s YUI Widget třídy nadace, včetně className a událost pomocníků a internacionalizace. V tomto článku se budu mít Spinner příklad a upravte jej řídit pokyny z mého předchozího článku a používat MakeNode. Upravené Spinner složka ( JS , CSS , skřítci ), stejně jako příklad jsou k dispozici na mých stránkách. Odkazy na další zdroje lze nalézt na konci tohoto článku.

Prodloužení komponentu

Jakmile MakeNode je načten, je třeba zahrnout modul ve vašem YUI().use() prohlášení použitím jména 'makenode' . Poté, rozšířit svůj widget, můžete jej uvést ve třetím argumentu Y.Base.create() , takto:

  Y.Spinner = Y.Base.create (
      "Spinner",
      Y.Widget,
      [Y.MakeNode]
      {
         / / Instance členů ...
      }
      {
          / / Statické členy
      }
 ); 

Můžete přidat MakeNode po libovolném počtu vhodných pro rozšíření Widget, jako WidgetParent a WidgetChild a WidgetStdMode atd. MakeNode přidá dvě chráněné metody, _makeNode a _locateNodes, a to bude číst z několika statických vlastností, je-li nalezen.

Všichni členové tohoto rozšíření jsou buď chráněné nebo soukromé, neboť jsou určeny k použití ve složce vývojáře a ne ze strany realizátora pomocí těchto součástí, které by neměly být neobtěžovali s nimi.

Definování šablony

První věc, kterou normálně udělat, je definovat šablonu pro vaše komponenty. Pro Spinner, naše šablona je:

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

Výchozí šablona bude obvykle být jmenován _TEMPLATE a prohlásil, podél jiných statické vlastnosti třídy, jako jsou ATTRS . MakeNode bude používat tuto šablonu, pokud nikdo jiný je výslovně stanoveno. Šablona je vyrobena z prostého HTML plus řada zástupných symbolů uzavřeny v hranatých závorkách složených, každý z jednoho znaku (zpracování kódu) a následuje jeden nebo více argumentů. Zástupné symboly a to, co produkují, jsou:

• {@ attributeName} nastavení hodnotu atributu

• {p propertyName} instance hodnota vlastnosti

• {m methodName arg1 arg2 ….} Návratová hodnota dané metody. Operační kód následuje název metody a libovolný počet argumentů oddělených mezerou. Řetězce musí být uzavřeny v uvozovkách. Čísla, booleovské a null budou převedeny z řetězce na jejich vlastních datových typů

• {c classNameKey} CSS className generována z _CLASS_NAMES statické vlastnosti

• {s key} řetězce z strings atributu, pomocí key jako sub-atributu.

• {? other placeholder } Vytvoří řetězec checked , když výsledkem zpracování zbytek zástupného symbolu, je pravda.

• {} Jakákoli jiná hodnota bude nakládáno stejně jako Y.substitute dělá.

Například {@ value} se projeví vytvořením this.get('value') , zatímco {p value} překládá k this['value'] .

{m} symbol je trochu složitější. První argument za m kódem zpracování je název metody a zbytek z argumentů, to vše jsou odděleny mezerou, které budou předány na danou metodou. Tyto argumenty mohou být čísla, null , true , false nebo řetězce uzavřené v uvozovkách. MakeNode bude analyzovat je a převést je do svých vlastních typů, tedy {m myMethod 123.45 true “this is a string”} bude mít za následek volání this.myMethod(123.45, true, “this is a string”) tak, že první dva argumenty jsou převedeny na jejich správné datové typy a řetězec může obsahovat mezery. Chcete-li zahrnout uvozovky, použijte \\" , dvojité lomítko bylo nezbytné, protože JavaScript, bude interpretovat ani jednu a zahodí ji dřív, než se dostane do MakeNode. pouze dvojité uvozovky jsou povoleny, MakeNode nepoužívá eval() , takže analyzátor je omezena ale bezpečné. Cokoli, jen čísla, null , Booleans a dvojité uvedené řetězce budou ignorovány.

{?} zástupný se hodí pro použití s zaškrtávacích políček a přepínače. Budou se zde vyrábět řetězec “checked” v závislosti na pravdivostní hodnotu kódu pro zpracování instrukcí, který následuje. Tak, <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/> bude produkovat výrazné políčko, pokud getLength metoda vrací něco jiného než nula. {?} bude akceptovat některou z dalších zástupných symbolů, i když to má smysl pouze s prvními třemi.

Pro {c} zástupný symbol, musíme mít _CLASS_NAMES vlastnost definovaná.

Další zástupné symboly mohou být přidány do MakeNode, přidejte je do _templateHandlers hash.

_CLASS_NAMES Nemovitosti

Spolu s ATTRS a _TEMPLATE statických atributů, můžeme definovat _CLASS_NAMES majetek, který ukazuje na pole řetězců. Každá z těchto řetězců bude použit pro generování className. Tak _CLASS_NAMES: ['input'] vyvolává className “yui3-spinner-input” týden Tyto názvů tříd, jsou uloženy v takovém případě vlastnictví this._classNames . {c input} symbol v šabloně výše bude nahrazen “yui3-spinner-input” .

Můžete použít _CLASS_NAMES vlastnost vytvářet libovolný počet názvů tříd, ať už je použít v šabloně, nebo ne. Stále můžete dosáhnout těchto názvů tříd, navíc v rámci this._classNames . ClassName je generován pomocí yui3 prefix následovaný hodnoty NAME statické vlastnosti otočil malé, a pak řetězec uveden v _CLASS_NAMES (poslední z nich nebude se obrátil malými písmeny), vše odděleno pomlčkami. _classNames hash bude obsahovat také názvů tříd pro boundingBox a contentBox , první v rámci "." klíče a druhý za “content” klíč. Widget přiřadí k boundingBox se názvů tříd, odvozené z hodnoty NAME majetku každou ze tříd v dědické řetězci, od yui3-widget . MakeNode ukládá do this._classNames pouze na nejvyšší className pro boundingBox .

Je-li součástí je několik úrovní daleko od Widget, jako SuperSpecialSpinner dědění z SuperSpinner , která dědí od Spinner , která dědí od Widget, a je-li některé nebo všechny z nich mají _CLASS_NAMES vlastnosti definováno, budou produkovat MakeNode názvů tříd, pro všechny z nich a uložte je na this._classNames . Není nutné vkládat na všech úrovních jména již vykázané v předchozích úrovních. Ve skutečnosti, to je lepší, že není, protože názvů tříd, vyráběné na všech úrovních budou používat hodnotu NAME majetku této úrovni. Tak, v SuperSpecialSpinner , {c input} povede ke “yui3-spinner-input” a ne “yui3-superspecialspinner-input” a tak to bude držet CSS soubor stále platný.

{S} zástupný symbol

Widget má strings konfiguraci definovaný atribut, ačkoli to není inicializován s nějakou hodnotou. Tento atribut je určen k držení řetězce, které jsou viditelné (nebo prostřednictvím čtení z obrazovky, číst) uživatele. Je důležité, že jste nikdy obsahovat viditelné řetězce přímo v šabloně. To není požadavek MakeNode - to nikdy nebylo dobré vůbec. Všechny řetězce, které mají být viděn nebo čtení pro uživatele by měla být vždy umístěna v strings atributu. strings atribut obsahuje hash, kde je každý textový nachází jeho klíče. Spinner složka má následující řetězce, které můžete vidět použité v šabloně výše.

  Řetězce: {
     Hodnota: {
         vstup: "Stiskem šipky nahoru / dolů pro malé přírůstky, Stránka nahoru / dolů pro hlavní krocích."
         se: "Zvyšuje"
         stanoví: "Decrement"
     }
 } 

Nejlepší na tom, jak to udělat je to, že vaše komponenta může být lokalizována do jiných jazyků se velmi snadno vývojáře, kteří používají vaši komponentu. Při vytváření instance Spinner, můžete udělat:

  var mySpinner = new Spinner ({řetězce: Y.Intl.get ("přadlena")}); 

Nastavení konfiguračních atributů strings v tomto případě nenahrazuje výchozí strings hodnoty s těmi ze souboru jazyka zdrojů pomocí jazyka dříve definované. {s} zástupný přistupuje řetězce uložené v strings atributu, buď výchozí volby nebo přeložené ty, pokud je nastavena. {s xxxx} zástupný symbol je ve skutečnosti nic jiného než zástupce do {@ strings.xxxx} zástupný symbol. Nicméně, nejprve jen přístup k řetězce na nejvyšší úrovni, zatímco například {@ strings.xxxx.yyyy.zzzz} by Vám umožní přístup do řetězec hlouběji.

Použití _makeNode v renderUI

Používáme šablonu k vytvoření značky pro naši komponentu. K tomu můžeme říkat MakeNode je _makeNode metody, jako toto:

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

To vyplní contentBox našeho widgetu se značky od zpracování šablony. _makeNode metoda vrátí instanci Y.Node , který může být připojen nebo vložit kdekoliv nebo jen rozhodl pro pozdější použití. Je to nevrátí řetězec, to produkuje Node instance.

_makeNode metoda přebírá dva volitelné argumenty: odkaz na šablonu a objekt vyplnit zástupné symboly, jako Y.substitute dělá. V našem jednoduchém příkladu Spinner je jediná šablona pro celý ovládací prvek, ale další widgety mohou vyžadovat kousky vyrobené z několika šablon. V takovém případě byste obvykle volají _makeNode bez argumentů pro hlavní části a nazývají to opět s různými šablonami vyplnit dodatečné části. Příklad obsahuje tento renderUI metody:

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

První výzva k _makeNode vrátí Node instance uložené v proměnné fieldset . Vzorek součást je také rozšířena o Y.ArrayList tak RADIO_TEMPLATE bude naplněn hodnotami odebraných z položek uložených v poli seznamu a následným uzlů připojených k fieldset před tím, než se konečně připojen k contentBox . Zvláštní zástupné symboly jako {@} nebo {p} bude stále odkazovat na atributy nebo vlastnosti, v hlavním objektu. Vnořené položky budou zpracovány stejně jako Y.substitute by.

Metoda _locateNodes

MakeNode dále poskytuje _locateNodes metodu, která se pokusí najít všechny prvky s názvů tříd, deklarovaných v _CLASS_NAMES . Chcete-li vyhledat konkrétní prvky, které lze projít libovolný počet className klíčů, jinak _locateNodes snaží všechny. Pro každý prvek nachází každého className, _locateNodes bude vyrábět vlastní instance vlastnost pomocí podtrhl prefix následovaný název klíče a “Node” přípony. Tedy v našem příkladu Spinner, _locateNodes vygeneruje vlastnosti _inputNode a _upNode a _downNode . Je-li několik prvků mají stejné className, _locateNodes vrátí odkaz na první z nich. Pokud prvek není nalezen, žádný variabilní být vytvořen.

V Spinner složky používáme _locateNodes po vytvoření značky:

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

_EVENTS Statická vlastnost

Jeden další vlastnost může být definován v duchu _TEMPLATE a _CLASS_NAMES a to je _EVENTS . _EVENTS bude obsahovat hash složený z klíčů název třídy, z nichž každá obsahuje hash typy událostí a metod pro manipulaci s nimi. Je lépe vysvětlit na příkladu:

  _EVENTS: {
     '.': {
         klíč: {
             fn: '_onDirectionKey "
             args: ((Y.UA.opera) "dolů"!? "stiskněte tlačítko:") + "38, 40, 33, 34"
         }
         mouseDown: "_onMouseDown"
     }
     '..': {
         MouseUp: "_onDocMouseUp"
     }
     Vstup: {
         Změna: "_onInputChange"
     }
 } 

_EVENTS je objekt (hash) s libovolným počtem nemovitostí. Názvy vlastností, to znamená, že klíče od hash, identifikovat prvky, jejichž akce budeme poslouchat. Jsou stejné identifikátory používané v _CLASS_NAMES . Existují dva další speciální klávesy "." a ".." . Zatímco className klíče odkazují na prvky vnořené do contentBox , "." klíč odkazuje na boundingBox sám, zatímco ".." se odkazuje na dokument obsahující tento widget. Myslete na ně dělá chdir příkaz, jestliže jsou umístěny na boundingBox úrovni. _EVENTS nemovitost je zpracován po renderUI , bindUI a syncUI metody byly jen tak udělátko Očekává se, že již vložena v textu dokumentu, jinak ".." se nezdaří.

Každá z položek v _EVENTS je další objekt, který používá typ události jako jeho klíče a název metody instance s ní zacházet. _EVENTS , je statická proměnná, nemá přístup k this takže to nemůže vzít skutečné funkční odkazy, jen název metody posluchače událostí. Některé typy událostí potřebovat další argumenty, jako je například key události. V tomto případě, namísto poskytování název obslužné rutiny události můžete poskytnout Objekt s vlastnostmi, fn a args držet název funkce a další argumenty, v případě potřeby.

MakeNode bude používat Node.delegate naslouchat událostem vnořených prvků, i když bude používat Y.on poslouchat na události z boundingBox a textu dokumentu. (Poznámka: poslech na key události na každé vnořené prvek pracuje pouze s verzí 3.4.0pr1 a výše, protože delegace key .. případě nebyl k dispozici dříve, než všechny ostatní funkce pracují s předchozími verzemi také)

V _EVENTS prohlášení jsou kumulativní, kdy složky dědí od sebe. Každá třída v dědické řetězce bude mít svůj vlastní _EVENTS prohlášení zpracována odděleně.

_ATTRS_2_UI Statická vlastnost

Akce pohybovat oběma směry, od uživatelského rozhraní s komponentem a z části na rozhraní. První jsou zpracovány _EVENTS majetku. Pak tam jsou události, pro domácnost na změny atributů hodnoty, které musí být uvedeno v uživatelském rozhraní. Jak jsem se zmínil v předchozím článku, když tam jsou nějaké vedlejší účinky změna konfigurace atributu, měly by být řešeny posluchači události change, ne volitelné setter metody atribut, který by měl řešit normalizaci hodnotu na displeji. Uživatelské rozhraní by mělo odrážet stav konfiguračních atributů, nejprve v syncUI , když je inicializován a pak na každou akci atribut změny. V druhém případě je třeba připojit posluchače událostí, které děláme v bindUI . Widget již stanoví mechanismus, který by to tak jednoduché, který jsem popsal v komentářích k předchozímu článku.

Widget využívá instance vlastnictví _UI_ATTRS , která obsahuje objekt s další dvě vlastnosti, SYNC a BIND . Každý z nich je řada obsahovala jména konfiguračních atributů, které se zpočátku synchronizovaných a pak poslouchal s cílem udržet uživatelské rozhraní, které odráží aktuální hodnoty. Widget očekává, že každý z těchto položek má metodu s ním spojené, pojmenoval podle názvu atributu prefixed _uiSet se první písmeno názvu atributu převedeny na velká písmena mít název metody v řádném případě velblouda. Pokud tedy "value" byla vypsána v některém z _UI_ATTRS polí (buď SYNC nebo BIND ), by se očekávat, že Widget najít _uiSetValue metodu. Tato metoda dostane dva argumenty, value jsou nastaveny a src změny. To je kód pro náš Spinner _uiSetValue metody:

  _uiSetValue: function (hodnota, src) {
     if (src === UI) {
         návrat;
     }
     this._inputNode.set (hodnota, this.get (Formatter) (hodnota));
 } 

Všechna velká identifikátory, které vidíte v tomto kusu kódu odpovídají konstanty řetězec prohlásil jinde, aby YUI kompresor dělat svou práci lépe. Tato metoda, v podstatě nastaví value atributu v HTML <input> pole na novou hodnotu sady, po formátování. Odkaz na textové pole byla poskytována _locateNodes . src argument je nejprve zkontrolovat, zda nastavena na hodnotu řetězce 'ui' . Pokud tomu tak je, bude žádná opatření. Tak lze zabránit nekonečné smyčky. Pokud uživatel zadá něco do vstupního pole, bude jeho hodnota jít do value atributu konfigurace, které by pak oheň na valueChange událost, která by si _uiSetValue s názvem, který v případě odškrtnutí by pak jít a změnit hodnotu vstupního pole, které by spustit celý proces znovu. Tak, v _uiSetValue , víme-li změna pochází z uživatelského rozhraní, my nic, a tak rozbít smyčku. To však vyžaduje jiný kus kódu jinde. V posluchače pro událost DOM, když jsme konfigurační atribut jsme použít třetí nepovinný argument pro nastavení, jako toto:

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

Je na nás, abychom zajistili, že změny pocházející z uživatelského rozhraní jsou označeny tak, a pak zkontrolujte, zda stejnou vlajkou, aby se zabránilo smyčky.

S tím řekl, ještě jsem se zmínil o statickou vlastnost _ATTRS_2_UI uvedené v záhlaví tohoto oddílu. Vzhledem k tomu, komentáře v mém předchozím článku ukazuje (přes hrubé chyby jsem udělal v nich) a ujistěte se, že všechny atributy ovlivňující UI jsou správně uvedeny, je poněkud neuspořádaný. Nikdy byste neměli inicializovat _UI_ATTRS od nuly, protože Widget již obsahuje spoustu atributů a ty by se ztratil. Musíte spojit nové názvy atributů za stávajících, což je poněkud těžké si vzpomenout, jak na to právo. Aby to bylo jednoduché, bude číst z MakeNode statické vlastnosti _ATTRS_2_UI a dělat, že zřetězení pro vás. Bude spojit všechny tyto seznamy od každé třídy v dědické řetězce, takže na každé úrovni každá třída může zpracovávat své vlastní atributy. V Spinner, my máme:

  _ATTRS_2_UI: {
     BIND: hodnota,
     SYNC: VALUE
 } 

MakeNode bude přijímat i řadu jmen, nebo jeden název atributu, jako v tomto případě.

Otázkou přirozeně vzniká, proč dva seznamy, jeden pro vazbu jiný pro synchronizaci? Docela často SYNC pole má méně bodů než BIND seznamu a je to proto, šablona pro prvek by mohl již velmi stejnou výchozí hodnotu jako atribut konfigurace a není potřeba dělat počáteční synchronizaci. Takže, pokud výchozí hodnota pro value atributu konfigurace je prázdný řetězec a <input> prvek v šabloně nemá value atributu, pak není potřeba synchronizovat je na inicializaci.

MakeNode bude zjištění duplicitních záznamů v žádné z těchto polí. Pokud některý objeví, znamená to, že naše třída dědí z komponent již zpracovává tento atribut a nové prohlášení bude s největší pravděpodobností překročí v _uiSetXxxx handler pro něj. Mimochodem, MakeNode také kontroluje duplicitní záznamy v _CLASS_NAMES , které mohou způsobit konflikt v některých, i když ne všichni, okolnosti. MakeNode bude psát zprávu do protokolu o tyto chyby.

Závěr

MakeNode poskytuje velmi jednoduché šablony procesor, s jednoduchou funkcí, které jsou vysoce integrované s třídou nadace Widget. Poskytuje také pomocné metody pro vytváření názvů tříd, které mají být použity v šabloně a používání těchto názvů najít vytvořené uzly. To také poskytuje prostředky pro připojení do událostí generovaných jak uživatelského rozhraní a komponenty jako takové a každá spojit s metodou. To dělá všechny tyto věci, a zároveň dbát na respektování dědictví řetězce rovnou do Widget a na jakékoliv úrovni tříd Můžete definovat.

Neposkytuje pro absolutně všechny možnosti, ale jsou dobré řadu z nich. Nicméně to nebrání tomu, aby vám přináší nové funkce. Možná jen zřídka muset napsat bindUI nebo syncUI metodu, pokud použijete lepidlo poskytnuté MakeNode, ale můžete tak učinit, protože MakeNode nepoužívá je.

Jako bonus pro ty, kteří měli trpělivost dočetli až sem, jsem také modifikovanou Anthony Pipkin na tlačítko sady galerie komponent:

• button.js
• button.css
• Tlačítko-group.js
• Tlačítko-group.css
• background.png
• background-active.png
• icon-sprite.gif
• příklad

API dokumenty lze nalézt zde .

Hledat konverzace: Bloglines | technorati

Sdílet a rozšiřovat: Záložka se Del.icio.us | Digg to! | reddit!