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

2011年9月12日15:18にサティヤム別|での開発YUI 3ギャラリー | 8コメント

編集者注:この記事は、された当初は今年初めに公開 それ以来、 makeNode関数モジュールは、YUIギャラリーに公開されているといくつかの機能強化を受けた。 今日の記事は、makeNodeに、すべての最新の変更が反映されます。

前回の記事では、 YUI 3アプリケーションのためのレシピ 、私が使用する方法を示しY.substitute非常に基本的なテンプレートプロセッサとしてします。 アイデアは#ゆいIRCチャンネルで人々からの提案で、そこから命を奪った、私はそれと呼ばれるYUIギャラリーで使用可能なウィジェットの拡張したmakeNode関数 makeNode関数は、一般的なテンプレートのプロセッサではなく、それは一つとしてのものではありません。 一方、それがしっかりとYUIと統合されているウィジェットのクラス名とイベントヘルパーや国際化など、基礎クラスです。 この記事では、かかりますスピナーの例を、私の前回の記事のガイドラインに従うこととmakeNode関数を使用するように変更します。 makeNode関数は、ギャラリーのコンポーネントと同様に変更されたとして利用可能であるスピナーコンポーネントとこの資料で使用されます。

コンポーネントを拡張する

あなたのモジュールに含める必要がありmakeNode関数をロードするためにYUI().use()名前を使用してステートメント'gallery-makenode'経由してモジュールを定義する場合、またはYUI.add()として、それをリストrequires配列。 次に、ウィジェットを拡張するには、三番目の引数でそれを表示Y.Base.create()このように、:

  Y.Spinner = Y.Base.create(
      "スピナー"、
      Y.Widget、
      [Y.MakeNode]
      {
         / /インスタンスのメンバ...
      }
      {
          / /静的メンバ
      }
 。) 

このようなWidgetParent、WidgetChild、WidgetStdModeとしてウィジェットに適した拡張機能を、任意の数に沿ってmakeNode関数を追加することができ、等makeNode関数は、開発者によって使用される2つのprotectedメソッドが追加され_makeNode_locateNodes,見つかった場合には、いくつかの静的プロパティから読み込まれます。 。

彼らは彼らと気にするべきではありません、これらのコンポーネントを使用して実装することによってコンポーネントの開発者としないことにより、使用することを意図されているので、この拡張子のすべてのメンバーのいずれかprotectedまたはprivateです。 表示するときに"表示の保護"オプションをチェックすることを忘れないでAPIドキュメントを

テンプレートを定義する

あなたが正常に行いますまず最初に、コンポーネント用のテンプレートを定義することです。 スピナーは、当社のテンプレートは次のようになります。

  _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関数は、このテンプレートを使用します。 テンプレートはプレーンなHTMLに加え、中括弧で囲まれたプレースホルダのシリーズは、単一文字(処理コード)から成り、1つまたは複数の引数が続いてそれぞれの作られています。 プレースホルダとその産出は、以下のとおりです。

  • {@ attributeName}コンフィグレーション属性の値

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

  • {m methodName arg1 arg2 ….}与えられたメソッドの戻り値。 処理コードは、メソッド名と空白で区切られた任意の数の引数が続いている。

  • {c classNameKey}から生成されるCSSクラス名_CLASS_NAMES静的プロパティ(参照_CLASS_NAMESプロパティ以下のセクションを)

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

  • {? condition valueIfTrue valueIfFalse }多くのような?: JavaScriptの演算子は、と評価されるvalueIfTrue条件がtruishであれば、 valueIfFalseそうでなければ。

  • {1 condition valueIfOne valueIfMore }条件の値に基づいて、単数/複数の単語を生成するために使用されます。

  • {}以外の値が同じように処理されますY.substituteありません。

たとえば、 {@ value}に変換されますthis.get('value')しながら{p value}に変換されthis['value']

プレースホルダの引数を持っている場合、のような{m}{?}{1}は、文字列は二重引用符で囲む必要があります。 数値、ブール値とnull (すべての引用符で囲まれていない)が適切なデータ型に解析されます。 プレースホルダは、入れ子にすることができます。 {?}{1}プレースホルダは、通常の条件のネストされたプレースホルダが含まれており、恐らくその値を、たとえばます。

  {P個数} {1} {P数量 "単位" "単位"} 

プロパティの場合、 qty 1であり、それに評価され"1 unit" 、2つ以上のことは返します"2 units"などがあります。 ゼロを扱う、より複雑なバージョンは次のようになります。

  {?  {P個数} "{P数量} {1} {P数量"単位 ""単位 "}"が "none"} 

文字列の場合、内側のプレースホルダを処理した結果は、引用符の独自のセットで囲む必要があることに注意してください。

引用符で囲まれた文字列内の二重引用符を含めるには、使用\\" 。makeNode関数は使用しません。JavaScriptは1つ1つを解釈し、それがmakeNodeになる前にそれを破棄するだけ二重引用符が許可されますので、ダブルバックスラッシュが必要とされているeval()ようにパーサは限定的でありながらも安全です。何でも、数字、 null型やブール型、二重引用符で囲まれた文字列は無視されます。

{?}プレースホルダは、また、チェックボックスやラジオボタンで使用するのに便利です。 それは、文字列を生成するために使用することができ"checked"は次の処理命令コードの真理値に応じて。 したがって、 <input type="checkbox" {? {m getLength} "checked" ""}/> <input type="checkbox" {? {m getLength} "checked" ""}/>顕著なチェックボックスを生成する場合getLengthメソッドの返り値は何でもゼロ。

のために{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など、 'input'我々は後で見るように、彼らは実際のクラス名や、それらのクラス名を含む要素を参照するキーとして使用することができるので、 "classNameのキーを "。

を使うことができます_CLASS_NAMESテンプレートかどうかでそれらを使用するかどうか、クラス名、任意の数を生成するためにプロパティを。 あなたはまだの中からそれらの余分なクラス名に到達することができますthis._classNames classNameが使用して生成されますyui3の値が続く接頭NAMEで指定された文字列をその後に小文字になっており、静的プロパティを_CLASS_NAMES (この最後のものが小文字になりません)、ハイフンで区切られたすべての。 _classNamesハッシュはまたのためにクラス名が含まれるboundingBoxcontentBox 、下にある最初の"boundingBox"キーと下の2番目の"content"のキーを。 ウィジェットはに割り当てたboundingBoxの値から派生したクラス名NAMEで始まる、継承チェーン内の各クラスのプロパティyui3-widget にmakeNode関数を格納this._classNamesのための唯一の最上位のclassNameのboundingBox

WidgetStdModモジュールがロードされている場合、makeNode関数はまた、そのためのエントリが生成されます。 HEADERBODYFOOTERまた、同じモジュールで定義されている定数です、同じキーを持つセクションを。

コンポーネントは次のような離れてウィジェットからいくつかのレベルであれば、 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}深いダウンしてネストされた文字列へのアクセスを許可し、それ以上の置換を防ぐことができます。 中括弧は使用してテキストに含めることができます{LBRACE}{RBRACE}プレースホルダとして。

renderUIで_makeNodeを使用して、

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

  renderUI:関数(){
     this.get( 'contentBox')のappend(this._makeNode());
 } 

これに記入しますcontentBoxテンプレートを処理してから、マークアップで私たちのウィジェットの。 _makeNode方法は、インスタンスを返しますY.Node付加または挿入された任意の場所または単に後で使用するために保持することができます。 それは文字列を返しません、それが生成するNodeインスタンスを。 (あなたが文字列ではなく、ノードを必要とするならば、使うことができ_substituteテンプレートに渡すことが必要とするメソッドを、。)

_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 いくつかの要素が同じクラス名を取得している場合は、 _locateNodesそれらの最初に参照を返します。 要素が見つからない場合、変数は作成されません。

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

  renderUI:関数(){
     this.get(CBX)のappend(this._makeNode());
     this._locateNodes();
 } 

_EVENTS静的プロパティ

それ以上のプロパティは、線に沿って定義することができます_TEMPLATE_CLASS_NAMESとつまり_EVENTS_EVENTSクラス名をキー、それらを処理するイベントの型およびメソッドのハッシュを含む各成っハッシュが含まれています。 それは良い例で説明されています。

  _EVENTS:{
    入力: '変更'、/ /コールthis._afterInputChange
     BoundingBoxは:[
         {
            タイプ: 'キー'、
             FN: '_onDirectionKey'、/ /コールthis._onDirectionKey
            引数:((Y.UA.opera) "ダウン":! "記者:")+ "38、40、33、34"
         }
         'MouseDownイベント' / /呼び出しthis._afterBoundingBoxMousedown
     ]
    ドキュメント: 'MouseUpイベント'、/ /コールthis._afterDocumentMouseup、
     Y: 'broadcastingObject:someEvent' / /呼び出し、この["_afterYBroadcastingObject:someEvent"]
 } 

_EVENTS任意の数のエントリを持つオブジェクト(ハッシュ)です。 プロパティの名前は、つまり、ハッシュのキーは、そのイベントは私たちが聞くとなるノードを識別します。 彼らは、で定義されたのと同じclassNameのキーです_CLASS_NAMES いくつかの余分な特別なキーがあります。

  • "boundingBox"バウンディングボックス自体を参照するようになります。

  • "document" 、このウィジェットを含む文書を指します。

  • "THIS"ウィジェット自体を指す

  • "Y"を参照してYインスタンスです。

ウィジェットも同様にWidgetStdModで拡張されている場合は、キーHEADERBODYFOOTER彼らが利用できるようになりますので、それらのセクションを参照します_classNamesハッシュ。 上記のいずれも引用符で囲む必要はありませんので、それらは有効な識別子である場合はJavaScriptを引用符で囲むようにキーを必要としません。

_EVENTS後にプロパティが処理されるrenderUIbindUIsyncUIウィジェットがすでに文書の本文内に挿入されることが期待されるように、メソッドが呼び出されているが、そうでなければ"document"識別子は失敗します。

これらの各要素のイベントIDまたはイベント識別子の配列があります。 イベントを待機するイベントまたは詳細を使用して、オブジェクトの型によって識別することができます。 デフォルトでは、makeNode関数はリスナーとして使用するを使用して名前のメソッド"_after"の最初の文字を持つ要素識別子が続く接頭辞は、その最初の文字は大文字とイベント·タイプに続いて大文字に変更しました。 上記のコードブロックは、各イベントに対して呼び出されるメソッドを示しています。

イベント識別子には、プロパティを持つオブジェクトにすることができますtypefnargs type必須であり、耳を傾けているイベントのタイプを示します。 fnプロパティは、このように自動命名を回避イベントを待機するメソッドの名前を指定します。 以来_EVENTS静的なプロパティであり、それはへのアクセスがありませんthis 、メソッドの実際の参照、その名前だけを取ることができないようにします。 args引数は、そのような場合と同様、呼び出し元にさらに引数を渡すために使用することができるkeyの鍵仕様を必要とするイベント。

makeNode関数を使用しますNode.delegate内の要素のイベントをリッスンするboundingBoxそれが使用されている間、 Node.afterからのイベントに耳を傾けるboundingBoxおよびドキュメントのボディ。 それが使用されますthis.after下にイベントをリッスンするようにTHISキーとY.afterの下に表示さリスナーのYキーを押します。 彼らはこれらのイベントが防止または停止することができ、いかなる場合にも、ので、それらを起動するオブジェクトの動作をフィルタリングするのではなく、ウィジェットがイベントに応答するように意図されているので、すべてのイベントがイベント·リスナーの後に使用するように耳を傾けています。 (注:を聞いてkeyの委任ので、任意のネストした要素にイベントには、上記のバージョン3.4.0pr1でのみ動作し、 key 。他のすべての機能が同様に以前のバージョンで動作する前に、イベントは使用できませんでした)。

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

_ATTRS_2_UI静的プロパティ

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

ウィジェットは、インスタンスのプロパティを使用し_UI_ATTRS 2さらにプロパティを持つオブジェクトが含まれていSYNCBIND これらの各々は、最初に同期化する構成属性の名前をリストする配列であり、その後現在の値を反映した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オフの場合、移動して、入力ボックスの値を変更するだろう、と呼ばれる、どのもう一度全体のプロセスを引き起こすだろう。 したがって、で_uiSetValue我々は変化がUIから来ている知っていれば、我々は何もしないので、ループを解除します。 しかし、これは他の別のコードを必要とします。 DOMイベントのリスナーでは、コンフィグレーション属性を設定するとき、我々は、このように設定するには、3番目の省略可能な引数を使用します。

  _afterValueChange:関数(EV){
     this.set(VALUE、ev.newVal、{SRC:UI});
 } 

それは、UIからの変更はこのようにフラグが設定されていることを確認し、ループを避けるために、同じフラグをチェックするために、私たち次第なのです。 識別子を使用してくださいsrc属性ではなく、の値を設定するときにsourceは認識されません。

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

  _ATTRS_2_UI:{
     BIND:VALUE、
     SYNC:VALUE
 } 

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

疑問が当然生じる、なぜ2つのリストの同期のために他のをバインドするための1? SYNC 、周りに初めて使用された後renderUIbindUIが存在する場合の方法、と呼ばれ、前にsyncUIに記載されている間、 BINDにバインドされます後で変更に対応する属性を指定します。 かなり頻繁にSYNC配列はより少ないエントリがあるBINDリストを、コンポーネントのテンプレートが既に構成属性とまったく同じデフォルト値を持っているかもしれませんし、初期同期を行う必要はありませんので、これは。 のデフォルト値の場合なので、 value設定属性が空の文字列であると<input>テンプレート内の要素は持っていないvalue属性を、その初期化時に、それらを同期する必要はありません。

に記載されている属性はBINDその必要があります_uiSet Xxxx属性は任意の順序で設定することができますので、任意の順序で呼び出されたメソッドです。 に記載されている属性はSYNC 1を別の(それらすべきではない)に依存している場合、順序は重要かもしれないので、彼らが彼らの相続前の先祖のものと記載されていた順序で一度だけ呼び出されます。

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

_PUBLISH財産

最後に、 _PUBLISH静的プロパティは、公開する必要があり、それらのイベントのリストが表示されます。 それは、そのキーとその値などの構成属性のオブジェクトリテラルとして、イベントの名前を使用してハッシュを含んでいます。 これは、すべての継承チェーン内のいずれかのようなプロパティに記載されているすべてのイベントを発行します。 同じイベント名は、クラスおよびそれ以降のものの構成属性は、古いもののものを上書きになりますそれを継承する任意のクラスで公開することができます。 たとえば、グローバルに既存のイベントのブロードキャストを行うことをお勧めします。 だけの場合と同様_EVENTSため、プロパティ、 _PUBLISHへのアクセス権を持たない静的なプロパティなthis 、関数を指定するとき、それは与えられる必要があることを、文字列として、メソッドの名前です。

結論

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

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

これまでを読むための忍耐を持っていた人へのボーナスとして、私もギャラリーコンポーネントのアンソニー小土瓶のボタンセットを変更し、アコーディオンとTimeSpinnerコンポーネントを作った、で利用可能なすべてのしているギャラリー

サティヤム 著者について:ダニエル·バレイロ(画面名サティヤム)はかなりの時間が回避されている。 ENIACは、彼が生まれた日の前日オフになったので、彼はそれを逃したが、彼 ​​は以来、多くを見逃していませんされました。 彼は、パンチカード、プログラム6502チップ(アップルIIを覚えていますか?)にチャンスがあったTRS-80を所有し、他の博物館にあったかもしれない彼の母国アルゼンチンで動作する機器のいくつかの素晴らしい作品を見て。 グローバリゼーションは、彼のその後かろうじて使える英語(プラス電気工学の学位)NCSAモザイクの日にベイエリアの後ろに5年間の仕事で終わったキャリアパスに彼を置き、世界への扉を開いたとき。 完全に彼の友人が<'sと>' sの完全な、彼のプレーンテキストエディタで書いた変な波線に興味をそそられ、彼はフロントエンド·エンジニアリングの世界について非常に多くのことを学んでしまった。 それは、COBOLやFortranから長旅している。 今、彼はバルセロナ、スペインに近い地中海沿岸に半引退した非常に喜んで住んでいます。

共有および拡張: del.icio.usでブックマーク | Diggそれ! | reddit!

8コメント»

このコメント欄のRSSフィード トラックバックURI

  1. ええと、すごい。 最後に、この記事を通してそれを作ったと私はギャラリーのモジュールを試すに熱心だ。 それは*のように私はよく分からない足場のロット*最初のトレンチでされることなくYUIの新たな開発者のための偉大なようですが、私は確かにいくつかの非常に反復的なコードを短くする方法を見ることができ、特に持っている私たちにとってすでに:-)私たちの時間をかける。

    私は、次の文について興味: "ウィジェットはすでに文書の本文内に挿入されることが期待されるように_EVENTSプロパティがrenderUI後に処理され、bindUIとsyncUIメソッドが呼び出されているが、そうでなければ"ドキュメント "識別子は失敗します。"一般的にレンダリングされているウィジェットは、必ずしもそれがDOMであることを意味するものではありません、私は頻繁に私がDOMに手を差し伸べるしようとしない限り正常に動作しますまだ挿入されていないを含むノードにウィジェットをレンダリングする。

    だから、 "ドキュメント"の識別子を使用したい唯一の問題文の中で問題になっているか、一般に処理が失敗する可能性がありますか? 私は_LOCATE_NODES機能が最初に必要なときにDOMのチェックにフォールバックする、チェックする必要があるかどうかだろうか?

    二つの大きな(そうでなければ長さ)の記事やギャラリーのモジュールのためにありがとうございました。

    B

    によるコメントブライアン·J.·ミラー 2011年9月12日-

  2. ブライアン

    あなたが_EVENTSで "ドキュメント"の識別子を使用して、コンポーネントが文書に添付されていない場合、それは無視されます。 さらに、 "文書"は、メイン1またはiframe内の1つかどうか、コンポーネントが入っているドキュメントを参照します。

    _locateNodesはBoundingBoxは内検索するため、それ以外の場合は、コンポーネントの他のインスタンスで同じクラス名で要素を選択する可能性のあるコンポーネントは、ドキュメントにアタッチされているかどうか仕事をしたりしません。

    によるコメントサティヤム - 2011年9月13日

  3. サティヤムは感謝しています。 ウィジェットの書き込みに大きな時間の節約を改善しました。

    私はモジュールの依存関係を把握する少しトラブルを通過しました。 そして8月からバージョンが_EVENTS焼成を持っているように思えませんでした。 しかし、考え出した、より最近のギャラリーのバージョンを使用していた後に、それは素晴らしい作品。

    私は裸の要件魔女とmakeNode関数を使用して、最も基本的なウィジェットが参考になったかもしれない表示するには、簡単な例をまとめました。

    https://github.com/JohnICello/yui-samples

    ジョンIannicelloによるコメント- 2011年9月16日

  4. 別々のギャラリーモジュールに幻想的なテンプレートのプロセッサのうちの分割と考えましたか?

    コメントby ジョンLindal - 2011年9月22日

  5. ジョン

    それはプロジェクト全体だけでテンプレートの事で始まったので質問がアップになることが面白いです。 それはmakeNode関数と呼ばれている理由それはそれは1つ前のステージに行く尋ねるようなものですので、その唯一の、その後のパブリックメソッド、makeNode関数だったものの後に、です。 しかし、それは意味をなさない可能性があり、数字を見ることができます。

    現在のデバッグバージョンでは、縮小さバージョン4.68k、五分の一(私はAPIドキュメントのためにあまりにも多くのコメントを配置)で、23.7kです。 3.4.1が出てくるまでは、このバージョンが含まれているパッチを適用しY.substituteを持っています。 、縮小さは3.87kにダウンしたら、その外にある、換言すれば、パッチは17%になります。

    私はテンプレートに関連しないすべてのものを、(と私はまた落下_locateNodesを意味する)を除去した場合、それは2.13kにダウンします。 それは、テンプレートが既にモジュールの55%を取ることを意味します。 それを分割する価値があるだろうか。

    それは残りの部分を削除するには理にかなっているように、私はテンプレートの部分は、おそらくパッケージの第三であったこと自分自身を考えているだろう。 それがこの数字でこれを行うには理にかなっていますか?

    あなたが_makeNodeを使用したらとても便利であり、すべての残りの部分はすべての後にあまりいないなってしまう_locateNodesが含まれています。

    サティヤムによるコメント- 2011年9月22日

  6. 私は、このモジュールは静かにできるようにしていないようです。

    私は2つの新しい機能を追加しました:

    クラスはmakeNode関数も、それがrenderUIメソッドを持ってから継承され、それらのいずれかを使用した場合、自動的にその後contentBoxに_TEMPLATEを処理するとの結果が_locateNodesを行う追加あなたのための1つを作成します。

    私はまた、処理コードと引数の配列を受け取り、最初の値は、2つ目を処理するために使用するオブジェクトであると仮定します{n}はプレースホルダを追加しました。

    したがって、 {np objRef @ attr}のプロパティから読み込まれます。 objRef 、値がオブジェクトであると仮定し、属性の読み取りattr 、そこから。 それが唯一の引数として単純な識別子を(ない] {名詞}で)を取る処理コードで動作します。

    サティヤムによるコメント- 2011年9月29日

  7. 新たに追加さ:

    _EVENTS記述子は、そのハンドラの新しいオプションが追加されました。 以外にも 'タイプ'、 'FN'とあなたが今持っている '引数'プロパティ '。

    '後'に指定されていない場合、それがデフォルトになります。 また、 '前'と 'デリゲート'にすることができます。 それはY.after(デフォルト)、Y.on( '前'の場合)またはY.delegate( 'デリゲート')のいずれか、イベントをアタッチするために使用する方法を決定します。

    単に '_after'接頭辞がありません今からイベントリスナーメソッドの変更を既定の名前付けは、メソッドは、 '_before'または '_Delegate'で開始することができます。

    サティヤムによるコメント- 2011年10月21日

  8. こんにちは、

    ソースTreebleはEGの角括弧なしでJSONデータを解析することができませんgreat.However次のとおりです。
    {"TreeNodeを"
    [{"ラベル": "ModelDate"、 "モデル1":nullの場合、 "MODEL2":NULL}、
    {"のTreeNode":{"ラベル": "成長率"、 "モデル1":14 "MODEL2":20}、
    "ラベル": "モデルの価格"、 "モデル1": "15"、 "MODEL2": "16"}、
    {"TreeNodeを"
    {"TreeNodeを"
    {"TreeNodeを"
    [{"ラベル": "grant1"、 "モデル1":1000 "MODEL2":1000}、
    {"ラベル": "grant2"、 "モデル1":1000 "MODEL2":800}、
    {"ラベル": "grant3"、 "モデル1":1000 "MODEL2":900}]、
    "ラベル": "既得"、 "モデル1":3000、 "MODEL2":5700}、
    "ラベル": "オプション"、 "モデル1":3000、 "MODEL2":5700}、
    "ラベル": "ネット値"、 "モデル1":3500、 "MODEL2":5000}]}動作していません

    しかし、私は手動で角括弧を置けばそれが仕事だ。

    あなたは答えることができます。これは急務である

    Nandithaによるコメント- 2012年1月16日

コメントを残す

注:コメントは最初タイマーのために司会をされています。 スパムは削除されます。

XHTML:<a href="" title=""> <abbr title=""> <acronym title=""> <b>ダウンロード<blockquote cite=""> <cite>の<code> <del datetime="">た<em> <I> <q cite="">すする<STRONG>

ヤフーが主催する

著作権©2006-2012ヤフー株式会社すべての権利を保有。 プライバシーポリシー - サービス利用規約

を搭載ワードプレスヤフー ウェブホスティング