2011»9月»ヤフーユーザーインターフェイスブログ（YUIBlog）

YUIConf 2011早期登録がオープンしました

ジェニードネリーによって21:31に2011年9月30日|での開発、 YUIのイベント | 4コメント

YUIConf 2011年の早朝登録はEventbriteでのオープンです！今年のイベントは、Yahoo!のグレートアメリカのキャンパスで11月2月4日開催されます。私たちはあなたのYUIに関する技術交渉（木/金）の2日間続いてハンズオントレーニング·ワークショップ（水）の一日をもたらすことに興奮している。会議の登録は50ドルの早期鳥率が、今年は75ドルかかります。ワークショップの登録は、会議と詳細がすぐに来ているから別となります。

我々を含む大きなトピックは、最大忙しい裏地は次のとおりです。

ダイヤルとカレンダーを含むYUIコンポーネントの深いダイブ、
モバイル環境におけるYUI
YUIを使ったテスト
実世界での移行の物語
とはるかに、はるかに！

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

そこにお会いしたい！

（重要！内部ヤフーは、Yahoo!社員のチケットを登録し、仕事用メールアドレスを入力してください。）

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

YUI 3.4.1は今生きている

2011年9月27日14:37にアレンラビノビチ別|中開発 | 8コメント

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.Date、Y.Number、とY.XMLの賛成で廃止される予定です。後方互換性は誰もが切り替える機会を与えるために、1つのリリースのために保持されます。

ああ、もう一つ私たちが移行する際に我々の方法でよくあるYouTubeにYUIシアターの内容を。手始めに、Douglas Crockfordの講義シリーズをチェックアウト"JavaScriptをクロックフォードを" -サブタイトルと完全！

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

オープンソース·アワード決勝でYUIに投票

ジェニードネリーによって21:21に2011年9月26日|で雑録 | 1件のコメント

置くPacktパブリッシングオープンソースの賞にYUIがノミネート皆に感謝します。お好みのJavaScriptライブラリとしてYUIになりましたら投票してください！

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

YUI 3.4.1 PR1今すぐ利用可能なCDN上

ジェニードネリーによって1:35 pmに2011年9月22日|で開発 | 1件のコメント

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をリリースします。

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

YUI：営業時間木曜9月15日

中|ルーク·スミス21:58で2011年9月12日開発、営業時間 | 2コメント

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

あなたがわからない場合は、サティヤムのは、YUIの新しいなければなりません。彼は、YUI 2の初期の頃以来、YUI社会の柱されている。 YUIBlogの彼の記事はほとんど読んで、スタイルコンテンツ "実際にライブラリを使用する方法"のソースを参照の一部です。あなたはサティヤムはそれを書いたことが表示されている場合は、それは読み取りの価値と、最も可能性が高い、再読み込み、ブックマークしている。

7月に、彼は大きな記事掲載MakeNodeウィジェットを構築するときに使用される一般的なパターンの一部を簡素化し、それが簡単に一般的な失策を避けるためにすることを目指してウィジェットの拡張子を。モジュールは、以来されているギャラリーに追加されただけ以前の今日、彼はポストアップデート彼の元の記事にします。

それは我々が話しすることになるだろうものだ。機能、履歴、および推論。あなたは、コンポーネントのインフラストラクチャを使用して、特にされている場合Y.Widget 、おそらくサティヤムはと取り組むために着手したハードルの少なくとも一部が遭遇したMakeNode 。これには共有にメモ帳、あなた自身の経験を持って、ベストプラクティスの祭りになるだろう。

時間と詳細

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

会議に参加

記録

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

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

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

ジェニードネリーによって15:48に2011年9月12日|での開発、 YUIのイベント | コメントはまだありません

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

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

YUIConf 2011 Yahoo!のサンタクララ、カリフォルニア州のキャンパスで11月3日と4日に開催されます。プレゼンテーションは45分ほど持続する必要があります。我々は、Q＆Aあなたのプレゼンテーションの後に最大15分ありますコメント内の任意の質問を投稿するか、ゆいイベント（で）ヤフー-inc.comに直接電子メールをお送りください。

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

更新： "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ハッシュはまたのためにクラス名が含まれる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 。いくつかの要素が同じクラス名を取得している場合は、 _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で拡張されている場合は、キー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関数は、この場合のように、名前の配列、または単一の属性名の両方を受け入れます。

疑問が当然生じる、なぜ2つのリストの同期のために他のをバインドするための1？ SYNC 、周りに初めて使用された後renderUIとbindUIが存在する場合の方法、と呼ばれ、前に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！

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

ヤフーユーザーインターフェイスブログ（YUIBlog）

YUIConf 2011早期登録がオープンしました

YUI 3.4.1は今生きている

オープンソース·アワード決勝でYUIに投票

YUI 3.4.1 PR1今すぐ利用可能なCDN上

YUI：営業時間木曜9月15日

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

時間と詳細

記録

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

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

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

テンプレートを定義する

_CLASS_NAMESプロパティ

{S}プレースホルダ

renderUIで_makeNodeを使用して、

_locateNodes方法

_EVENTS静的プロパティ

_ATTRS_2_UI静的プロパティ

_PUBLISH財産

結論

TwitterのYUIライブラリ

翻訳する

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ポリシーのコメント

ヤフーになる

メタ：

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

時間と詳細

記録

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

テンプレートを定義する

_CLASS_NAMESプロパティ

{S}プレースホルダ

renderUIで_makeNodeを使用して、

_locateNodes方法

_EVENTS静的プロパティ

_ATTRS_2_UI静的プロパティ

_PUBLISH財産

結論

TwitterのYUIライブラリ

翻訳する

シンジケート

最近の投稿

YUIライブラリ

アーカイブ：

ブログロール

ポリシーのコメント

ヤフーになる

メタ：