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

今オープンYUIConf 2011年ワークショップの登録

ワークショップの登録はYUIConf 2011年に現在開いている。 各セッションのチケットは別途販売されています。 スペースが限られているので、早期にサインアップしてください！

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

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

YUIConf 2011アーリーバード登録がオープンしました

YUIConf 2011年の早期割引登録はEventBriteににオープンしました！今年のイベントは、Yahoo!のグレートアメリカのキャンパス十一月2月4日開催されます。 私たちはあなたのハンズオントレーニングワークショップ（水）YUI（木/金）についての技術講演の2日間フルに続いての一日を持って興奮している。 会議の登録は50ドルの早期割引率は、今年75ドル。 ワークショップの登録はすぐに来ている会議や詳細から分離されます。

我々は、偉大なトピックまで忙しいライニングです、を含む。

• ダイヤルとカレンダーを含むYUIコンポーネントの深いダイビング、
• モバイル環境でのYUI
• YUIを使用したテスト
• 現実世界のマイグレーションストーリー
• とは、はるかに！

いつものように、会議のセッションはビデオ録画して利用できるようになりますYUIシアターと当社のYouTubeチャンネル楽しむことがすべてのために。

そこにお会いしたい！

（重要内部Yahoosは、Yahoo!の従業員のチケットに登録して、仕事用メールアドレスを記入してください。）

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

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

YUI 3.4.1は、現在のライブです

YUI 3.4.1短周期のリリースが利用可能ですCDNとするためのダウンロード 、初期の一週間以上！ ここに、このリリースにおけるいくつかのハイライトは以下のとおりです。

• 150以上のバグ修正のためのコントローラ 、 パネル 、 DataTableに 、 カレンダー 、およびその他のモジュールの数。
• バグは修正Y.substitute（） YUIコントリビュータによるサティヤム 。
• のための日本語言語サポートカレンダーとコンソール 、YUI寄稿の礼儀龍一奥村 。
• にその他の微調整のドキュメントと例。

また、確認したりできますYUI 3.4.1のコンポーネントの履歴ファイルに記載されているすべての変更の要約だけでなく、 YUI 3.4.1の開発中に対処チケットの完全なリストを 。 いつものように、我々はあなたがどんなあなたが持つかもしれない提案や、私たちのチケットデータベースで発見可能性の欠陥を提出することいただければ幸いです。 YUI 3.4.1のためのフィードバックは、で入力することができますYUI 3チケットデータベース 。

我々はまた、YUIの次のリリースでそれを発表したい、 DataType.Date、DataType.NumberとDataType.XMLはそれぞれ、Y.日付、Y.番号、およびY. XMLを支持して廃止される予定です。 後方互換性は誰にでも切り替えるにチャンスを与えるために、つのリリースのために保持されます。

ああ、そしてもう一つのこと：我々は移行にも我々の方法にあるYouTubeにYUIのシアターの内容を 。 手始めに、Douglas Crockfordのレクチャーシリーズをチェックアウト"はJavaScriptでクロックフォードを" -字幕付きの完全な！

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

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

CDN上でYUI 3.4.1 PR1は、今すぐ利用可能

YUI 3.4.1 PR1は、現在のコミュニティのテストとフィードバックのために利用可能です。 それは、時点のYahoo! CDN上で使用可能ですhttp://yui.yahooapis.com/3.4.1pr1/build/yui/yui-min.js 、そしてあなたから3.4.1に入るの変化見ることができますチェックしているチケットのリストをリリース用に 。

3.4.1リリースは10月5日までに行くの存続のためにスケジュールの短縮、開発サイクルを持つ小規模なバグ修正リリース、となります。 内のファイルのバグとリグレッションくださいYUILibrary.comのチケットデータベースを我々は、重大な問題が一般リリース前に対処していることを確認できるように9月26日（月曜日）の朝を。 ない緊急の問題が報告されていない場合、我々は9月27日には早くも3.4.1をリリースします。

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

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

YUI：営業時間木9月15日

サティヤムのmakeNode関数の拡張

あなたがわからない場合はサティヤムのは、YUIにとって新しいドライブである必要があります。 彼は、YUI 2の初期の頃以来、YUIのコミュニティの柱なっている。 YUIBlog上で、彼の記事はほとんど読んで"実際にライブラリをどのように使用する"ための情報源と呼ばれるスタイルのコンテンツの一部です。 あなたがサティヤムがそれを書いたことが表示された場合、それはおそらく読み取り価値がある、と、再読み込みしてブックマーク。

月に、彼は上で素晴らしい記事投稿MakeNodeウィジェットを構築する際に使用される一般的なパターンのいくつかを単純化することを目的とウィジェットの拡張子を、そしてそれが簡単に一般的な失策を避けるために行います。 モジュールは、以来されているギャラリーに追加し、前に今日、彼はポストアップデート彼の元記事への。

それは我々が話しするつもりだんだ。 特徴、歴史、との理由づけ。 もしコンポーネントのインフラストラクチャを使用してきた場合、特に、 Y.Widget 、おそらくサティヤムで対処するために定められたハードルの少なくともいくつか遭遇しましたMakeNode 。 これはベストプラクティスの催しであることを行っているので、共有するために、メモ帳、そしてあなた自身の経験をもたらす。

時間＆詳細

私たちは、 午前10時から11時PDTに、木曜日にオンラインになっているでしょう。

会議に参加

録画

録音はYUILibrary YouTubeチャンネルで利用できる 。

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

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

YUIConf 2011年のトークを提出する

あなたがYUIの操作中に学んだことを何かにまたは共有取り組んできたコードを自慢して見せて下さい！ ゆいイベント（時）金曜日からヤフー- inc.com、2011年9月23日に提案書を提出する。 含めるようにしてください。

• タイトル
• 説明
• 対象読者
• あなたのお名前
• 簡単なバイオ

YUIConf 2011はYahoo!のサンタクララ、カリフォルニア州のキャンパスで11月3日と4日に開催されます。 プレゼンテーションは約45分かかるはずです。 我々は、Q＆Aのプレゼンテーションの後に最大15分があるでしょう コメントでご質問を投稿、またはゆいイベント（で）ヤフー- inc.comで直接私達に電子メールを送る。

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

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

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

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

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

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

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

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

このようなWidgetParent、WidgetChild、WidgetStdModeとしてウィジェットに適した拡張子、任意の数に沿ってmakeNode関数を追加することができる、などmakeNode関数は、開発者によって使用される2つの保護されたメソッドが追加され_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関数は、このテンプレートを使用します。 テンプレートは、それぞれの1文字（処理のコード）で作られた、1つまたは複数の引数が続く、プレーンなHTMLに加え、中括弧で囲まれたプレースホルダのシリーズで作られています。 プレースホルダとそれらの生成は、以下のとおりです。

• {@ 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"} 

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

引用符で囲まれた文字列内に二重引用符を含めるには、使用する\\" 。JavaScriptは単一のものを解釈し、それをmakeNodeに到達する前にそれを破棄するので、ダブルバックスラッシュが必要とされている唯一の二重引用符が許可されている、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 （この最後の1つが小文字になっていないでしょう）、ハイフンで区切られたすべての。 _classNamesハッシュはまたのためのクラス名が含まれますboundingBoxとcontentBox 、下にある最初の"boundingBox"キーと下の2番目の"content"キーを。 ウィジェットはに割り当てますboundingBox値から派生したクラス名NAMEで始まる、継承チェーン内のクラスのそれぞれのプロパティをyui3-widget 。 にmakeNode関数店this._classNamesのための唯一の最上位classNameのboundingBox 。

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

コンポーネントは次のように、離れてウィジェットからいくつかのレベルである場合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 。 いくつかの要素が同じclassNameを持っている場合、 _locateNodesそれらの最初の参照を返します。 要素が見つからない場合は、変数は作成されません。

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

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

_EVENTS静的プロパティ

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

  _EVENTS：{
    入力：'変更'、/ /コールthis._afterInputChange
    バウンディングボックス：[
         {
            タイプ：'キー'、
             FN："_onDirectionKey'、/ /コールthis._onDirectionKey
            引数：（（Y.UA.opera）"下："：！？"記者："）+"38、40、33、34"
         }、
         "マウスダウン'/ /呼び出しthis._afterBoundingBoxMousedown
     ]、
    ドキュメント："マウスアップ"、/ /コールthis._afterDocumentMouseup、
     Y："broadcastingObject：someEvent'/ /呼び出しは、この["_afterYBroadcastingObject：someEvent"]
 }、 

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

• "boundingBox"バウンディングボックス自体を参照します。

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

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

• "Y"を参照するYインスタンス。

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

_EVENTS後にプロパティが処理されるrenderUI 、 bindUIとsyncUIウィジェットがすでにドキュメントの本体内に挿入されることが予想されるので、メソッドが呼び出されて、そうでない場合は"document"の識別子は失敗します。

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

イベント識別子は、プロパティを持つオブジェクトを取りますtype 、 fnとargs 。 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つのプロパティを持つオブジェクトが含まれている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呼ばれる、チェックされない場合、入力ボックスの値を移動し、変更します、これ再び全体のプロセスの引き金となるでしょう。 このように、で_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関数はこの場合のように、名前の配列、または単一の属性名の両方を受け入れます。

質問自然に発生する、なぜ二つのリスト、同期のために他のバインディングに対して1？ SYNCの後、最初の頃使用されているrenderUIとbindUIが存在する場合は、メソッドが呼び出され、前にしているsyncUIに記載されている間、 BINDにバインドされます。後で変更に対応する属性。 かなり頻繁にSYNC配列はより少ないエントリがあるBINDリストを、コンポーネントのテンプレートが既に構成属性として非常に同じデフォルト値を持っているかもしれないし、初期同期を実行する必要がないためです。 そう、のための場合のデフォルト値value構成属性は、空の文字列ですと<input>テンプレート内の要素がないがないvalue属性を、次に初期化時に、それらを同期する必要はありません。

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

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の完全な、彼のプレーンテキストエディタで書いた変な波線に興味をそそら、彼は、フロントエンドエンジニアリングの世界についてのかなり多くを学ぶことになった。 COBOLやFortranからの長い道のりそれている。 今、彼はバルセロナ、スペインに近い地中海沿岸に非常に喜んでセミリタイア住んでいる。

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

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