Yahoo!のユーザーインターフェイスブログ（YUIBlog）

"makeNode関数"ウィジェットの拡張

私の前回の記事では、 YUI 3アプリケーションのためのレシピは 、私が使用する方法を示したY.substitute非常に基本的なテンプレートのプロセッサとしては。 アイデアは、＃ゆいIRCチャンネルでの人々からの提案で、そこから生命を取って、私はそれを自分のサイト上で利用可能なウィジェットの拡張した、と呼ばmakeNode関数 。 makeNode関数は、汎用的なテンプレートのプロセッサではなく、それは1つは目指していません。 一方で、それはしっかりとYUIと統合されてウィジェット ClassNameプロパティとイベントヘルパーと国際化を含む基礎クラス、。 この記事では、私がかかりますスピナーの例を、私の前回の記事からのガイドラインに従うようにし、makeNode関数を使用するように変更。 修正されたスピナーコンポーネント（ JS 、 CSS 、 スプライト ）だけでなく、 例えば私のサイトから入手できます。 さらにリソースへのリンクはこの記事の終わりに見つけることができます。

あなたのコンポーネントを拡張する

makeNode関数がロードされると、あなたのモジュールに含める必要がYUI().use()の名前を使用してステートメント'makenode' 。 その後、あなたのウィジェットを拡張するには、3番目の引数で、それをリストY.Base.create()このように、：

  Y.スピナー= Y.Base.create（
      "スピナー"、
      Y.ウィジェット、
      [Y. makeNode関数]、
      {
         / /インスタンスのメンバ...
      }、
      {
          / /静的メンバ
      }
 ）; 

あなたがWidgetChild、WidgetStdMode、などWidgetParentなどのウィジェットに適した拡張子を、任意の数に沿ってmakeNode関数を追加することができる、等makeNode関数は2つの保護されたメソッド、追加され_makeNodeと_locateNodes, 、見つかった場合は、いくつかの静的プロパティから読み込まれます。

この拡張子のすべてのメンバーは、彼らがそれらを気にする必要はありませんこれらのコンポーネントを、使用して実装して、コンポーネントの開発者としないことによって、使用することを意図されているのでどちらかprotectedまたはprivateです。

テンプレートの定義

通常どおりになりますまず最初に、コンポーネントのテンプレートを定義することです。 スピナーの場合は、私たちのテンプレートは次のようになります。

  _template：[
     "<input type="text" title="{s input}" class="{c input}">"、
     "<button type="button" title="{s up}" class="{c up}"> </ボタン>'、
     "<button type="button" title="{s down}" class="{c down}"> </ボタン>"
 ]。加入（'\ n'）で、 

デフォルトのテンプレートは、通常、という名前が付けられます_TEMPLATEのようなクラスの他の静的プロパティ、に沿って宣言ATTRS 。 他の何も明示的に指定されていない場合makeNode関数は、このテンプレートを使用します。 テンプレートは、それぞれの1文字（処理のコード）で作られたと1つ以上の引数が続きます、プレーンなHTMLに加えて中括弧で囲まれたプレースホルダのシリーズで作られています。 プレースホルダと彼らが生み出すは以下のとおりです。

• {@ attributeName}の構成属性の値

• {p propertyName}インスタンスのプロパティ値

• {m methodName arg1 arg2 ….}指定されたメソッドの戻り値。 処理コードは、メソッド名と空白で区切られた任意の数の引数が続きます。 文字列は二重引用符で囲む必要があります。 数値、ブール値とnull文字列から、その適切なデータ型に変換されます。

• {c classNameKey}から生成されるCSSクラス名_CLASS_NAMES静的プロパティ

• {s key}から文字strings使用して属性、 keyサブ属性として。

• {? other placeholder }文字列生成checkedプレースホルダの残りを処理した結果がtrueの場合を。

• {}他の値は、同じように処理されますY.substituteない。

例えば、 {@ value}に変換されるthis.get('value')しながら{p value}に変換this['value'] 。

{m}プレースホルダは、もう少し複雑です。 後の最初の引数m処理コードは、指定したメソッドに渡されるすべての空白文字で区切られたメソッドと引数の残りの名前、、です。 これらの引数は、数値になりますnull 、 true 、 falseまたは二重引用符で囲まれた文字列。 makeNode関数は、このように、それらを解析し、適切な型に変換される{m myMethod 123.45 true “this is a string”}呼び出し側につながるthis.myMethod(123.45, true, “this is a string”)最初の二つの引数ようそれらの正しいデータ型に変換され、文字列に空白文字を含めることができます。 二重引用符を含めるには、使用する\\"ダブルバックスラッシュはJavaScriptが単一のものを解釈し、それをmakeNodeに到達する前にそれを破棄するため、必要に応じている。のみ二重引用符が許可されている、makeNode関数が使用されていないeval()パーサは限られているので、しかし安全に。何でも数字、 null 、ブーリアンと二重引用符で囲まれた文字列は無視されます。

{?}プレースホルダは、チェックボックスとラジオボタンで使用する便利です。 それは、文字列が生成します“checked”以下の処理命令コードの真理値に応じて。 このように、 <input type=”checkbox” {? m getLength}/> <input type=”checkbox” {? m getLength}/>場合、マークのチェックボックスを生成するgetLengthメソッドが返ると何かがゼロに。 {?}それが最初の3つのみで理にかなっているものの、他のプレースホルダのいずれかを受け入れます。

のために{c}プレースホルダー、我々は持っている必要があります_CLASS_NAMESプロパティが定義されている。

さらにプレースホルダは、にそれらを追加することにより、makeNodeに追加することができます_templateHandlersハッシュ。

_CLASS_NAMESプロパティ

とともにATTRSと_TEMPLATE静的属性、我々は定義することができます_CLASS_NAMES文字列の配列を指すプロパティを。 これらの文字列のそれぞれは、classNameを生成するために使用されます。 従って_CLASS_NAMES: ['input'] classNameの生成する“yui3-spinner-input” 。 それらのクラス名は、インスタンスのプロパティに格納されていますthis._classNames 。 {c input}上記のテンプレート内のプレースホルダで置き換えられます“yui3-spinner-input” 。

を使うことができます_CLASS_NAMESテンプレートでそれらを使用しているかどうかを、クラス名、任意の数を生成するプロパティを。 あなたはまだ内からそれらの余分なクラス名に到達することができますthis._classNames 。 classNameが使用して生成されるyui3の値が続くプレフィックスNAME静的プロパティを小文字になって、そしてその後に、与えられた文字列_CLASS_NAMES （この最後の1つが小文字になっていないでしょう）、ハイフンで区切られたすべての。 _classNamesハッシュはまたのためのクラス名が含まれますboundingBoxとcontentBox 、下にある最初の"."キーと下の2番目の“content”キーを。 ウィジェットはに割り当てますboundingBox値から派生したクラス名NAMEで始まる、継承チェーン内のクラスのそれぞれのプロパティをyui3-widget 。 にmakeNode関数ストアthis._classNamesのための唯一の最上位classNameのboundingBox 。

コンポーネントは次のように、離れてウィジェットからいくつかのレベルである場合SuperSpecialSpinnerから継承SuperSpinnerから継承Spinnerから継承Widget,およびそのいずれかまたはすべてが持っている場合_CLASS_NAMES定義されたプロパティを、makeNode関数ではそのすべてのクラス名を生成し、それらを格納しますthis._classNames 。 あなたは、それぞれのレベルで既に、以前のレベルで宣言された名前を含める必要はありません。 実際に、それはあなたが各レベルで生成されるクラス名は、の値が使用されるていないので、している方が効果的ですNAMEそのレベルのプロパティを。 このように、でSuperSpecialSpinner 、 {c input}まだになります“yui3-spinner-input”ではなく“yui3-superspecialspinner-input”とので、あなたのCSSファイルがまだ有効続けます。

{S}プレースホルダ

ウィジェットは、持ってstringsが任意の値で初期化されていませんが、定義された構成属性を。 この属性は、ユーザー（または、スクリーンリーダーを経由して、への読み取り）に表示されている文字列を保持するためのものです。 それはあなたが直接テンプレートに表示される文字列を含めることはないことが重要です。 これは、makeNode関数の要件ではありません - それはすべてで良いアイデアをされたことがない。 ユーザーが表示したり、ユーザーに読み取られるすべての文字列は、常にに配置する必要がありますstrings属性。 strings属性は、個々のテキストがそのキーが配置されているハッシュが含まれています。 スピナーコンポーネントは、あなたが上記のテンプレートで使用されて見ることができます以下の文字列を、持っています。

 文字列：{
    値：{
        入力："。マイナー刻み、大きな刻みのためのページアップ/ダウンのためにキーを上下矢印を押して/"、
        上："インクリメント"、
        ダウン："デクリメント"
     }
 }、 

これを行うの最良の部分は、コンポーネントが、コンポーネントを使用する開発者によって非常に簡単に他の言語にローカライズすることができることである。 スピナーのインスタンスを作成するときに、行うことがあります。

  VAR mySpinner =新しいスピナー（{文字列：Y.Intl.get（'スピナー')}); 

コンフィグレーション属性の設定stringsこの方法では、デフォルトに置き換えられますstrings前に定義された言語を使用して、言語リソースファイルからそれらを使って値を。 {s}プレースホルダは、に格納されている文字列にアクセスstrings設定した場合、属性は、デフォルトのものや翻訳ものを。 {s xxxx}プレースホルダは、実際には、へのショートカット以外の何物でもありません{@ strings.xxxx}プレースホルダ。 ただし、最初はトップレベルの間で文字列をのみにアクセスすることができます、例えば、 {@ strings.xxxx.yyyy.zzzz}あなたが深いダウン文字列にアクセスできるようになります。

renderUIで_makeNodeの使い方

私たちは、コンポーネントのマークアップを作成するためのテンプレートを使用してください。 そのために、我々は、makeNode関数の呼び出すことができます_makeNodeこのような、方法を：

  renderUI：関数（）{
     this.get（'contentBox'）のappend（this._makeNode（））;
 }、 

これは、でいっぱいになりますcontentBoxテンプレートを処理してから、マークアップで私たちのウィジェットの。 _makeNode方法は、のインスタンスを返しますY.Node追加または挿入のどこかだけ後で使用するために保持することができます。 それは文字列が返されない、それは生成Nodeインスタンスを。

_makeNodeように、テンプレートへの参照と、プレースホルダに収まるようにオブジェクト：メソッドは2つの省略可能な引数を取りますY.substituteない。 私たちの簡単なスピナーの例では全体のウィジェットが、他のウィジェットがいくつかのテンプレートで作られたビットと断片を必要とするかもしれないため、単一のテンプレートがあります。 その場合は、通常は呼び出します_makeNode主要部分のための引数を指定せずに、余分な部分を埋めるために別のテンプレートを使用して、再びそれを呼び出します。 例では、この含まれていますrenderUI方法を：

  renderUI：関数（）{
     VARにfieldset = this._makeNode（）;
     this.each（関数（アイテム）{
         fieldset.appendChild（this._makeNode（MultipleTemplates.RADIO_TEMPLATE、アイテム））;
     }、この）;
     。this.get（'contentBox'）追記（フィールドセット）;
 } 

最初の呼び出し_makeNode返すNode変数に格納されたインスタンスfieldset 。 サンプルのコンポーネントも使用して拡張されていますY.ArrayListようRADIO_TEMPLATE配列のリストに格納されているアイテムとに付加結果ノードから取得した値が入力されるfieldset 、それが最終的に追加される前にcontentBox 。 などの特殊なプレースホルダ{@}または{p}まだメインオブジェクト内の属性またはプロパティを参照します。 ネストされた項目は同じように処理されますY.substituteと同じ。

_locateNodes方法

makeNode関数は、さらに提供_locateNodes内で宣言クラス名とすべての要素を検索しようとするメソッド_CLASS_NAMES 。 もしそうでない場合は、classNameキーは、任意の数を渡すことができる特定の要素を検索するには、 _locateNodesそれらすべてを試みます。 各classNameの検出された各要素に対して、 _locateNodesキー名とそれに続くアンダースコア接頭辞を使用してプライベートインスタンスのプロパティが生成されます“Node”サフィックスを。 このように、私たちのスピナーの例では、 _locateNodesプロパティが生成されます_inputNode 、 _upNodeと_downNode 。 いくつかの要素が同じclassNameを持っている場合、 _locateNodesそれらの最初の参照を返します。 要素が見つからない場合、どの変数が作成されません。

スピナーのコンポーネントでは使用_locateNodesマークアップを作成した後：

  renderUI：関数（）{
     this.get（CBX）のappend（this._makeNode（））;
     this._locateNodes（）;
 }、 

_EVENTS静的プロパティ

それ以上のプロパティは、の線に沿って定義することができます_TEMPLATEと_CLASS_NAMESとthatです_EVENTS 。 _EVENTSクラス名のキーで構成されるハッシュ、イベントタイプと、それらを処理するメソッドのハッシュを含む各が含まれます。 それは良い例で説明されています：

  _EVENTS：{
     '。'：{
        キー：{
             FN："_onDirectionKey"、
            引数：（！？（Y.UA.opera）"ダウン："："記者："）+"38、40、33、34"
         }、
        マウスダウン："_onMouseDown"
     }、
     '..': {
        マウスアップ："_onDocMouseUp"
     }、
    入力：{
        変更："_onInputChange"
     }
 }、 

_EVENTS任意の数のプロパティを持つオブジェクト（ハッシュ）です。 プロパティ、つまり、ハッシュのキーの名前は、そのイベントが私たちが待機する要素を識別する。 彼らはで使用される同じ識別子です_CLASS_NAMES 。 に二つエクストラ特殊なキーは"."および".." このclassNameキーは内にネストされた要素を参照しながらcontentBox 、 "."キーとは、次のものをさしますboundingBoxしながら自分自身".."このウィジェットを含んでいる文書を参照している。 そうであると考えるchdirにあるときに、コマンドをboundingBoxレベル。 _EVENTS後にプロパティが処理されるrenderUI 、 bindUIとsyncUIウィジェットがすでにドキュメントの本体内に挿入されることが予想されるので、メソッドが呼び出されて、そうでなければ".."失敗します。

内のエントリの各_EVENTS 、そのキーとそれを処理するインスタンスメソッドの名前として、イベントの種類を使用してさらなる目的である。 _EVENTS 、静的変数であること、へのアクセス権は持っていませんthisそれが実際の関数の参照を取ることができないので、イベントリスナーメソッドの名前だけ。 いくつかのイベントタイプは、次のような余分な引数を、必要keyイベントを。 その場合は、代わりにイベントハンドラの名前を提供する代わりに、プロパティを持つオブジェクトを提供することができますfnとargs必要なときに、関数名と追加の引数を保持する。

makeNode関数が使用されますNode.delegateそれが使用される一方、ネストされた要素のイベントをリッスンするようにY.onからイベントをリッスンするようにboundingBoxと、ドキュメントのボディ。 （注：を聞いてkeyの任意のネストした要素でイベントがの代表団以来、上記のバージョンの3.4.0pr1でのみ動作し、 keyイベントが前に利用できなかった他のすべての機能が同様に以前のバージョンで動作。。）

_EVENTSコンポーネントが互いにから継承する場合の宣言は累積されます。 継承チェーン内の各クラスには独自の必要があります_EVENTS別々に処理宣言。

_ATTRS_2_UI静的プロパティ

イベントは、UIからコンポーネントへとコンポーネントからUIまで、両方の道を行く。 最初のによって処理されます_EVENTSプロパティ。 その後、ユーザーインターフェースに反映させる必要のある属性値の変更によってトリガされるイベントがあります。 前回の記事で述べたように、構成属性を変更することから、任意の二次的な影響がある場合、それらはされないオプションで、 変更イベントリスナーで処理する必要がありますsetter値のみが設定されるのを正規化に対処すべき属性の方法、。 UIは初の、構成属性の状態を反映している必要がありますsyncUI初期化されているし、すべての属性の変更イベントで。 後者の場合、我々は我々が行うイベントリスナー、接続する必要がbindUI 。 ウィジェットは、すでに私は前回の記事にコメントで説明されているシンプルを、作るためにメカニズムを提供します。

ウィジェットは、インスタンスのプロパティを使用して_UI_ATTRSさらに2つのプロパティを持つオブジェクトが含まれているSYNCとBIND 。 これらの各々は、最初に同期化し、現在の値を反映したUIを保つために聴くことにコンフィグレーション属性の名前を含んだ配列です。 ウィジェットは、それらのエントリのそれぞれが前につく属性名にちなんで、それに関連付けられたメソッド、存在することを想定し_uiSet適切なキャメルケースでメソッド名を持つように大文字に変換された属性名の最初の文字とを。 したがって、 "value"のいずれかに記載されていた_UI_ATTRS配列（のどちらかのSYNCまたはBIND ）、ウィジェットを見つけることを期待する_uiSetValue方法を。 このメソッドは二つの引数を受け取る、 value設定さとされているsrc変化。 これは、私たちのスピナーのためのコードです_uiSetValue方法：

  _uiSetValue：関数（値は、src）{
    場合（SRC === UI）{
        リターン;
     }
     this._inputNode.set（VALUE、this.get（フォーマッタ）（値））;
 }、 

あなたが文字列定数に対応するコードのこの部分に表示すべて大文字の識別子はYUIコンプレッサーにジョブを適切に行えるように、別の場所で宣言。 方法は、基本的には、設定valueにHTML属性<input>フォーマットされた後、新しい値のセットにボックスを。 テキストボックスへの参照が提供されました_locateNodes 。 src引数は、最初に文字列値に設定されているかどうかチェックされます'ui' その場合は、何も処理は行われません。 これは無限ループを避けるためです。 ユーザーが入力ボックスに何かを入力した場合、その値が入るというvalue後に起動する設定の属性valueChangeされてしまうイベント、 _uiSetValueチェックしない場合、[Go]を選択し、入力ボックスの値を変更するようなこれ、と呼ばれる、どの再び全体のプロセスの引き金となるでしょう。 このように、で_uiSetValue我々が知っていれば、変更はUIから来て、我々は何もしないので、ループを切断する。 しかし、これはどこか別のコードが必要です。 DOMイベントのリスナーでは、我々は構成属性を設定すると、我々はこのように、設定するために3番目の省略可能な引数を使用します。

  _afterValueChange：関数（EV）{
     this.set（VALUE、ev.newVal、{SRC：UI}）;
 } 

それは、UIからの変更はこのようにフラグが付いているし、ループを避けるために、同じフラグを確認することを確保するために私たち次第です。

すべてこれは言うものの、私はまだ静的プロパティ記述されていません_ATTRS_2_UIこのセクションの見出しに記載されているが。 私の前回の記事のショーのコメント（私はそれで作ったの失策を介して）、UIに影響を与えるすべての属性が正しく表示されていることを確認することとして、多少散らかっています。 あなたは、初期化することはありません_UI_ATTRSウィジェットがすでに属性の全体の多くをリストし、それらが失われてしまうので、最初から。 あなたはそれを右に行う方法を覚えて多少ハードである、既存のものよりも新しい属性名を連結する必要があります。 簡単にするために、makeNode関数は、静的プロパティから読み込まれます。 _ATTRS_2_UIとあなたのためにその連結を行います。 それは、それぞれのレベルでクラスごとに独自の属性を処理できるので、継承チェーン内の各クラスからすべてのそのようなリストを連結します。 スピナーでは、我々は持っている。

  _ATTRS_2_UI：{
     BIND：VALUE、
     SYNC：VALUE
 }、 

makeNode関数はこの場合のように、名前の配列、または単一の属性名の両方を受け入れます。

疑問が自然に発生する、2つの理由リスト、同期のために他のバインディングに対して1？ かなり頻繁にSYNC配列は、than少ないエントリhas BINDリストを参照してコンポーネント用テンプレートが既に構成属性とまったく同じデフォルト値を持っているかもしれないし、初期同期を行うために必要がないためです。 ので、デフォルトの値ならvalue設定属性が空の文字列であると<input>テンプレート内の要素がないがないvalue属性を、次に初期化時に、それらを同期する必要はありません。

makeNode関数は、これらの配列のいずれかの重複エントリをチェックします。 いずれかが表示されている場合、それは私たちのコンポーネントが既にを継承したクラスに、この属性を処理し、新しい宣言はほとんど踏み越えたと同じ意味_uiSetXxxxそれ用のハンドラを。 ちなみに、makeNode関数はまたの重複エントリをチェックします_CLASS_NAMESもすべてではないものの、いくつかの競合を引き起こす可能性が、、状況。 makeNode関数は、どのようなエラーのログにメッセージが書き込まれます。

結論

makeNode関数は非常にウィジェットの基礎クラスと統合されているシンプルな機能と、非常にシンプルなテンプレートのプロセッサを提供します。 また、テンプレートで使用するクラス名を作成し、作成したノードを見つけるためにこれらの名前を使用するヘルパーメソッドが用意されています。 また、両方のUIとコンポーネント自体によって生成されたイベントにフックやメソッドでそれぞれを関連付けるための手段を提供します。 まっすぐ上にウィジェットやユーザが定義可能性のクラスの任意のレベルに継承チェーンを尊重するように注意しながら、それは、すべてこれらの事を行います。

それは絶対にすべての可能性を提供していますが、それらの良好な範囲をカバーしていません。 それにもかかわらず、それは余分な機能が追加されるのを妨げるものではない。 することはほとんど書く必要がないかもしれないbindUIまたはsyncUIあなたがmakeNode関数によって提供された接着剤を使用する場合、このメソッドを、しかし、makeNode関数はそれらを使用しないためには、そうするかもしれません。

ここまでお読みに忍耐を持っていた人へのボーナスとして、私はまた、ギャラリーのコンポーネントのアンソニーピプキンのボタンのセットを変更した。

• button.js
• button.css
• ボタンgroup.js
• ボタンgroup.css
• background.png
• 背景- active.png
• アイコン- sprite.gif
• 例えば

APIドキュメントを見つけることができますここで 。

会話して下さい： Bloglinesの | テクノラティ

共有し、拡張する： del.icio.usでブックマーク | Diggそれ！ | のreddit！