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

CDN上で利用可能今すぐYUI 3.4.0のプレビューリリース3

YUIのチームは3.4.0リリースのための最終的な開発のスプリントを完了しています。 この時点で我々はコードが機能的に完成することを検討してください。 我々は、より多くの例とドキュメントのテストと作成の私達の最終ラウンドに焦点を当てた我々の次のスプリントを過ごすために計画しています。 私たちは、FC（機能的な完全な）地域の探査とフィードバックのためのCDNにビルドを掲載している。 あなたは少なくとも、このリリースにアクセスできますhttp://yui.yahooapis.com/3.4.0pr3/build/yui/yui-min.jsを 。

我々はコミュニティからのフィードバックを持ってみたいライブラリのいくつかの特定の領域があります。

• ローダは 3.4.0のための重要なアップデートがあった。 あなた経由で手動ロードの仕様を行う場合use("*")か、サブモジュールの構成を利用する、我々は、大幅に私たちが正しく、すべてのユースケースを扱っているを確認するために、新しいローダーを使用してコードを試しいただければと思います。 このリリースのローダーの変更の詳細については、を参照してください3.4.0ローダーの変更を記述するブログ記事 。
• カレンダーとパネルが完全に機能すると開発者の使用のための準備が整いました。
• グラフィックス：PR2のリリースでは、分散グラフィックスAPIに書き込まれた実験的なコードに影響を与えるいくつかのAPIの変更がなされている。 getShape()名前が変更されてaddShape() また、いくつかの属性の置換が行われている。
• トランジション：ネイティブトランジションはFirefoxでサポートされています。
• WidgetButtonsは、標準モジュールのサポートを実装する任意のウィジェットのヘッダーとフッター内のCSSスタイルのボタンを置くことができる新しいウィジェットの拡張機能としてリリースされました。
• ウィジェット-モダリティとウィジェット-自動的に隠すプラグインは拡張子に変換されています。
• ウィジェット：ウィジェットのバウンディングボックス内に含まれるすべての子ノードを（だけでなく、BoundingBoxおよびcontentBox）を削除して破壊する破壊するためのサポートを追加（真）。 破壊（）は、すべての子ノードを破壊する可能性の高いランタイムコストのために現在の動作を維持します。 あなたのアプリケーション内のウィジェットを破棄するか、カスタムウィジェットの開発者の場合、この変更をテストであなたの助けをいただければ幸いです。
• ScrollViewは scrollviewリスト直ちにリストの要素にCSSクラス名を追加するプラグインだけでなく、いくつかのバグ修正とリファクタリングを含む、垂直ページングをサポートしています。
• アプリケーションフレームワーク ：私たちは、新しいアプリケーションフレームワークをテストドライブするために時間を取られているコミュニティの開発者のすべてに感謝誠実に拡張する。 我々は、PR2のリリースは、次の優秀なフィードバックを受けています。 これらのコンポーネントを探求し続け、私達にあなたの観察やご提案を送信してください。

あなたが見直すことで、このリリースの内容に関する追加情報を得ることができる歴史のロールアップおよびPR3で対応チケットの完全なリストを 。 内の任意の拡張要求、バグとリグレッションを提出してくださいYUILibrary.comのチケットデータベース 。

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

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

YUI：営業時間木7月28日

Y.Calendar 3.4.0に来ている

カレンダーは、YUI 2ファミリーの我々のより一般的なウィジェットの一つであり、そしてそれは3.4.0でYUI 3のアーキテクチャ上でそのデビューをしている。 アレンラビノビチは 、コンポーネントの所有者と執筆しており、この古いお気に入りに私たちを再導入の呼び出しになります。 2.xのカレンダーが直面する問題へのいくつかの新しいアプローチを示している。 私は、特に国際化のサポートについては奮起したが、新しいレンダリングのルールもかなり魅力的ですね。

でで来る、と持参して、日付ピッカー、イベントカレンダー、輸入から、iCalのアンドメイクパンケーキの質問とあなたと機能のリクエスト私たちが肉付け現在と未来とY.Calendar 。 （いいえ、それはiCalをインポートすることはありませんが、誰かがその獣を飼いならすためにギャラリーのモジュールを作成したい場合、あなたのためにそれにYUIConfのチケットになるはずないです;））

我々は、今週私たちのいつもの時間に戻れば、私たちは午前10時PDT時に接続]でお会いしましょう​​。

時間＆詳細

私たちは、 午前11時PDT〜木曜日午前10時からオンラインになるでしょう。 接続の詳細は、いつもと同じです。

1. 1-888-371-8922（Skypeは米国以外の参加者*のために素晴らしい作品）へのダイヤル
2. 出席者コード47188953を入力してください＃
3. 画面共有セッションに参加する （これはそれを初めて使用する場合、これはAdobe Connectのプラグインをインストールするようにプロンプトが表示されます）

注 ：これは、オープンカンファレンスのラインなので、我々は彼らが、活発な議論に参加している限り、発信者が自分の回線をミュートするようお願いいたします。

* - Skypeがオプションでない場合は、ローカル番号のためにfreenodeの＃ゆいIRCチャン​​ネルで私あてにメールまたは私（ls_n）をキャッチ。

録画

で呼び出すための全ての人に感謝！ セッションのオンライン記録が利用できるようになりました。

高品質、iPhone / iPadに対応、ダウンロード可能な記録はこちらです 。

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

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

YUI：営業時間木7月21日

DataTableの更新とギャラリーショーケース

それが持っているべきと3.4.0リリースのサイクルが終わりに来ているとの優れた機能のすべての種類でパックされますが、端的に言えば、DataTableには、非常に開発の焦点として至っていない。 いくつかのバグ修正、しかし、および3.5.0で対象とされる変更のための計画のかなりの量、およびその開発と地域社会への貢献への素晴らしいスタートが行われている。

私たちは、集中的な開発を遅らせることのコストを理解するため、DataTableには、多くの顧客にとって非常に重要なウィジェットであることを知っている。 この営業時間は、3.5.0で計画されている、3.4.0のために行わばかりされているものの仕事上の更新、および機能を追加し、DataTableのバグを修正するために、ギャラリーに跳ね上がるし始めている素晴らしい仕事の紹介になります（とクラスをサポートしているのファミリー）。

我々は以上見ることになりますギャラリーパッチの数を提供している伯爵ブロスナン（別名、＃ユイからモーゼン）、の利益のために今週オンラインで時間になるでしょう。 そうでなければ、我々は他の＃ゆいの住人と自社製品を示すギャラリー貢献があるでしょう。 あなたは、DataTableのソリューションや、共有したい、進行中の作業がある場合、私は（＃ゆいかのls_nすべてを合わせてスケジュールをブロックすることができますのでお知らせくださいさえずり ）。

時間＆詳細

私たちは、 午前9時から午前10時PDT木曜日までオンラインになるでしょう。 接続の詳細は、いつもと同じです。

1. 1-888-371-8922（Skypeは米国以外の参加者*のために素晴らしい作品）へのダイヤル
2. 出席者コード47188953を入力してください＃
3. 画面共有セッションに参加する （これはそれを初めて使用する場合、これはAdobe Connectのプラグインをインストールするようにプロンプトが表示されます）

注 ：これは、オープンカンファレンスのラインなので、我々は彼らが、活発な議論に参加している限り、発信者が自分の回線をミュートするようお願いいたします。

* - Skypeがオプションでない場合は、ローカル番号のためにfreenodeの＃ゆいIRCチャン​​ネルで私あてにメールまたは私（ls_n）をキャッチ。

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

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

YUIを搭載した次世代のYSlowの

数週間前、Yahoo!が発表した携帯電話用YSlowをで速度2011モバイルの世界にYSlowのパフォーマンス分析のパワーをもたらす、。

モバイルのためのYSlowのような作品をブックマークレット 、それが可能な以外のブラウザ上で実行することのFirefox（アドオンなど）またはクロム（拡張子など） 。

YSlowのアーキテクチャは、部分的にクロスプラットフォームとYUIを動作するように再設計されたサンドボックス作る、クロスブラウザの抽象化と可能な限りシンプルなYQLアクセスに不可欠な要素でした。

サンドボックス

パフォーマンス分析でとページ自体をいじくることなく、干渉することなく、ページに埋め込まれるためには、YSlowのはYUIサンドボックスの力を活用することで、任意のページにJavaScriptとCSSを注入するブックマークレットです。

ブックマークレットのURL：

ジャバスクリプト：（関数（Y、P、O）{
     P = y.body.appendChild（y.createElement（'iframeを'））;
     p.id ='YSlowは、ブックマークレット';
     p.style.cssText ='表示：なし';
     O = p.contentWindow.document。
     o.open（）。'（書き込み
         <HEAD>
         <体のonload ="
             YUI_config = {
                勝利：window.parent、
                 DOC：window.parent.document
             };
             VAR D =文書;
             d.getElementsByTagName（\'頭\'）[0]
                 。appendChildを（
                     d.createElement（\'スクリプト\'）
                 ）。SRC = \'http://d.yimg.com/jc/yslow-bookmarklet.js \'"
         >
     '）;
     o.close（）
 }（ドキュメント））

上記のコード：

• 空のiframeを作成します。
• ページの本文に追加します。
• iframeは*非表示にします。
• そのウィンドウハンドラを取得します。
• そのコンテンツにiframeのボディを書き込みます。
• このボディは空ですが、持ってonloadイベントを
• onloadイベントは、YSlowのJSを注入する方法を定義します。
  • 設定YUI_config 、そのwinとdoc 、分析対象のページにポイントをwindowとdocumentそれぞれ
  • 動的に作成することで、YSlowのURLを注入するscriptインラインフレームの中に要素をhead

* iframeがすべてYSlowのプレゼンテーションの資産がロードされている時間が表示されます

これは、解析対象のページにiframeを配置します。 このiframeは、その中に常駐するサンドボックス環境とYSlowのように動作します。 iframeが動的にすることなく作成されるためsrc属性は存在しているので、それはその親（ページが解析される）にアクセスできるようになります同一生成元ポリシーの違反が起こっていない。

YUI_configオブジェクトは、それが設定しているため便利であるwinとdoc配線への呼び出し、iframeの親（解析対象のページ）に、このように、新しいYUIのインスタンスは、デフォルトでは親の文書にバインドされるY.allとY.one介してY.config.winまたはY.config.doc YUIのからuseコールバック。

YSlowののプレゼンテーションは、iframeのによって処理されwindowやdocumentだけでなく、親のページのスタイルと競合することなくこのiframe内に外部CSSをフェッチするようにYSlowはメインのスクリプトがマークアップをレンダリングできるように、参照。 YSlowは、後でパフォーマンス分析に必要なすべてのコンポーネント（画像、スクリプト、リンク、背景画像、フラッシュ、など）を取得するために、親ページをスキャンします。 これは、アクセスすることによって行われますY.config.winとY.config.doc彼らは、親ページを参照しているため、。

クロスブラウザの抽象化

ブックマークレットなので、携帯用YSlowのは、任意のブラウザ上で動作することになっています* YUIは、その結果、ブラウザの違いを正規化することにより、クロスブラウザの問題を抽象化してクリーンな、読みやすいと保守性の高いコードベース。

YSlowのは完全にYUI 3に移植されていない-今のところ唯一のコントローラ層（今後のアプリケーションコンポーネントから） -まだ、すべてのDOM操作やイベント処理は、によって行われているnodeとeventモジュール。 将来のリリースでは、YUI 3に多くのYSlowの機能を移植する予定です。

*ではないすべてのブラウザは現在サポートされています

YQL

YSlowのページ上にあるコンポーネントのHTTPヘッダーをチェックしてページを分析。 HTTPレスポンスヘッダーには、それらのコンポーネントは、レスポンスヘッダー情報を取得YSlowのために再度要求する必要があるので、ページでは利用できません。 このは、XMLHttpRequest（AJAX）を介してコンポーネントのURLのリストを要求することによって実現が、 ​​残念ながら原因である可能性が同一生成元ポリシーの制約のすべてのコンポーネントはほとんどないと思わページと同じドメインにある場合を除き、これは不可能です。

同一生成元ポリシーによる制限のための一般的な回避策は、外部サーバがコンポーネントのURLのリストを要求し、YSlowのに代わって彼らのHTTPレスポンスヘッダーを取得するプロキシとして機能するJSONPを使用しています。 YSlowのの人気と最近のモバイルパフォーマンス分析の努力により、我々はモバイルブックマークレット用YSlowのために非常に大量のトラフィックを期待している。 そのようなトラフィックをサポートするために、 YQLはを通じてYSlowので採択されたスケーラブルなソリューションであり、オープンデータのテーブルという名前data.headers予想されるコンテンツがあることを確認するためにユーザーエージェントを偽装している間のURLの特定のリストについては、レスポンスヘッダーとコンテンツを取得、取得。

YQLクエリーコンポーネントには、YSlowのコントローラのコードがはるかに簡単、容易に維持すること、フードの下でJSONPのリクエストを管理しながらYQLクエリーを管理するためのすべての作業を行います。

将来の機能強化：モバイルフレンドリーなインターフェースのための新しいYSlowの

現在、モバイルユーザーエクスペリエンスのためのYSlowのは、デスクトップエクスペリエンスと同じです。 パフォーマンス分析データの長いリストを扱うのは小規模なスマートフォンの画面上で最善の方法ではありません。 YUIも抽象化するので、クロスデバイスのジェスチャーを 、モバイル用YSlowのは、将来のリリースでは、ブランドの新しいモバイルフレンドリーなインターフェイスを取得します。

パフォーマンスツールのパフォーマンス

モバイル展開のためのYSlowのは、慎重に分析されているページのロード時間に与えるパフォーマンスの影響を考慮して行われました。 YSlowのに使用されるYUIの3つのモジュールはできるだけ速くYSlowをロードするために必要なモジュールのみを含むように精査された。 YUIのシードファイルとローダーが含まれていない必要なすべてのモジュールおよびサブモジュールは、以下の互いに結合されて以来、 ライアングローブのパフォーマンス禅 YSlowは、bookmarklet.js：：シングル小シングルの要求に一緒にすべてをロードすることを可能にした、ヒント、204キロバイト、66キロバイトを（ GZIP）は次のとおりです。

• YUI：75KB、27キロバイト（GZIP）
• YSlowは：129KB、39KB（GZIP）

YSlowの詳細について

の最新YSlowの発表で最新にしてください：

• で再設計されたYSlowのページ訪問getyslow.comを
• Facebookに好きYSlowは： facebook.com / getyslow
• Twitterで以下のYSlowは： twitter.com / getyslow

著者について：マルセルデュランは、Yahoo!の卓越したパフォーマンスチームのためのフロントエンドリードです。 彼は、適用されるとさらに速くページを作るのWebパフォーマンスのベストプラクティスを調査Yahoo!のフロントページと検索のチームで、トラフィックの多いサイトでのWebのパフォーマンスの最適化になっている。 彼は現在、YSlowは、他のパフォーマンスツールの開発、研究と伝道に専念しています。 彼の目標は、Webがさらに高速化がわからなくなったりもすることですと、"わずか数ミリ秒が傷つけることになります"などというものが存在しないと考えています。

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

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

傾斜ブラウザのサポートのアップデート

GBSの変更

この更新プログラムの特定の変更点は次のとおりです。

• もはや経験の等級を割り当てることが
• 中止処方特定のオペレーティングシステム（モバイルを除く）
• Internet Explorer 9のためにカバレッジを追加
• Firefox 4のためにカバレッジを追加しました。†
• Firefoxの5の範囲を追加しました。†

注意事項：

• 短剣の記号は、（"Firefox 4の。†"のように）その支店レベルでの最も現在の非ベータ版のサポートを受け取ることを示します。
• のガイダンスは、IOSやAndroid OSのデバイスの使用状況に与えられていない。 勧告では、各OS用のユーザーベースの最も代表的なデバイスを選択することです。

ブラウザテストのベースラインからグレードを削除

GBS更新のこのエディションでは、我々は経験のグレード（例えば"Aグレード"と"Cグレード"）に直接マッピングブラウザから離れて移動している点で、私たちの以前のアップデートからの脱却を表します。 ではなく、ブラウザは、我々はテストカバレッジを最大化し、テストの表面を最小限に抑える効率的なベースラインのテスト戦略の定義に焦点を合わせる対象となるユーザーエクスペリエンスが適切であるかを規定する。 例えば、IE6のまま、重要なグローバル市場シェアワラントは、テストを続けていますが、今日のGBSはIE9の経験とは異なることにIE6のユーザーエクスペリエンスが可能になります。

ブラウザテストのベースラインからのオペレーティングシステムの削除

テストを合理化し、リソース要件を最小限にするために、私たちはもはや上でテストする必要のあるオペレーティングシステムを指定しません。 ブラウザがしっかりと我々はOSのバージョンではなく、ブラウザのバージョン（例："サファリのiOS 4"）を参照している場合は、OSのバージョン、と結合されている場合は例外です。 これにより、ブラウザのバージョンでテストカバレッジを集中し、プラットフォーム間で余分なもののテストを最小限に抑えることができます。 バージョン間で同じブラウザでの問題は無視できる程度であり、一般的にそのようなキーの処理や利用可能なフォントのような高レベルのOSの違い、に関連する。 クロスプラットフォームの問題に触れたいと知られているコードは、できるだけ多くのプラットフォームでテストする必要がありますが、このテストは、一般的ではなく、すべての機能の完全なリグレッションテストを実行するよりも、特定の問題に単離することができる。 私達はあなたのユーザーベースを持つオペレーティングシステムのテストの優先度を揃えることをお勧めします。

なぜIE6はリストにまだありますか？

IE6はまだ検証可能なユーザー体験を保証する重要な十分なグローバル市場のシェアを持っています。 プログレッシブエンハンスメント戦略によくある誤解の1つは、一度、ブラウザが実際には本当にそれがHTMLのみの体験を配信する必要があることを意味するとき、それは"サポートされていない"になることを"Cグレード"に入ることになっている。 我々は、もはやブラウザがどのような経験を受信する処方しないので、これは、ユーザーおよびリソースに基づいて決定するプロジェクトのために残されている。 GBSは、ブラウザがそのような市場シェアや影響力などの要因に基づいて、検証可能な経験を必要とするかを指定するに焦点を当てています。 チームが決定するために"使える"が何であるかを定義すると劣化の許容レベルをspecifiyingが残されています。 我々はまだシンプルな推進プログレッシブエンハンスメントのモデルを、および追加の開発におけるコスト、テスト、およびメンテナンスのリソースを考慮せずに新しい層を作成することからプロジェクトをそぐ。

GBS予測

我々は次のアップデートで以下の変更を行うことを期待。

• iOSの3日のSafariへの対応を中止してください。
• アンドロイド3 Webkitのためのカバレッジを追加します。
• Firefoxの6の範囲を追加します。
• SafariのiOSの5の範囲を追加します。

GBSアーカイブ

• GBSの更新、2010年11月3日
• GBSの更新、2010年2月16日
• GBSの更新、2009年10月16日
• GBSの更新、2009年7月2日
• GBSの更新、2009年1月28日
• GBSの更新、2008年7月3日
• GBSの更新、2008年2月19日

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

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

"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関数]、
      {
         / /インスタンスのメンバ...
      }、
      {
          / /静的メンバ
      }
 ）; 

このようなWidgetParent、WidgetChild、WidgetStdModeとしてウィジェットに適した拡張子、任意の数に沿って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 、下にある最初の"."下のキーと第二“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 、それはです_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プロパティ。 その後、ユーザーインターフェースに反映させる必要のある属性値の変更によってトリガされるイベントがあります。 As I mentioned in the previous article, when there are any secondary effects from changing a configuration attribute, they should be handled by change event listeners, not by the optional setter method of the attribute, which should only deal with normalizing the value being set. The UI should reflect the state of the configuration attributes, first in syncUI , when being initialized and then on every attribute change event. For the latter, we need to attach an event listener, which we do in bindUI . Widget already provides a mechanism to make that simple, which I described in the comments to the previous article.

Widget uses the instance property _UI_ATTRS that contains an object with two further properties, SYNC and BIND . Each of these is an array listing the names of the configuration attributes to be initially synched and then listened to in order to keep the UI reflecting current values. Widget expects each of those entries to have a method associated with it, named after the attribute name prefixed by _uiSet with the first character of the attribute name converted to uppercase to have the method name in proper camel case. Thus, if "value" was listed in any of the _UI_ATTRS arrays (in either SYNC or BIND ), Widget would expect to find a _uiSetValue method. This method will receive two arguments, the value being set and the src of the change. This is the code for our Spinner _uiSetValue method:

 _uiSetValue : function(value, src) {
    if (src === UI) {
        リターン;
     }
    this._inputNode.set(VALUE, this.get(FORMATTER)(value));
 }、 

All the uppercase identifiers you see in this piece of code correspond to string constants declared elsewhere, to allow the YUI compressor to do its job better. The method, basically, sets the value HTML attribute in the <input> box to the new value set, after being formatted. The reference to the textbox was provided by _locateNodes . The src argument is initially checked to see if set to the string value 'ui' . If this is so, no action will be taken. This is to avoid endless loops. If the user enters something in the input box, its value would go into the value configuration attribute which then would fire a valueChange event, which would get _uiSetValue called which, if unchecked, would then go and change the value of the input box, which would trigger the whole process again. Thus, in _uiSetValue , if we know the change comes from the UI, we do nothing and so break the loop. However, this requires another piece of code elsewhere. In the listener for the DOM event, when we set the configuration attribute, we use the third optional argument to set, like this:

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

It is up to us to ensure that changes coming from the UI are flagged thus and then check that same flag to avoid loops.

With all this said, I haven't yet mentioned the static property _ATTRS_2_UI mentioned in the heading of this section. As the comments in my previous article shows (through the blunders I made in them), making sure that all attributes affecting the UI are properly listed is somewhat messy. You should never initialize _UI_ATTRS from scratch since Widget already lists a whole lot of attributes and those would be lost. You have to concatenate new attribute names over the existing ones, which is somewhat hard to remember how to do it right. To make it simple, MakeNode will read from the static property _ATTRS_2_UI and do that concatenation for you. It will concatenate all such lists from each and every class in the inheritance chain so at each level each class can handle its own attributes. In Spinner, we have:

 _ATTRS_2_UI: {
    BIND: VALUE,
    SYNC: VALUE
 }、 

MakeNode will accept both an array of names or a single attribute name, as in this case.

The question naturally arises, why two lists, one for binding the other for syncing? Quite often the SYNC array has fewer entries than the BIND list and this is because the template for the component might already have the very same default value as the configuration attribute and there is no need to do an initial syncing. So, if the default value for the value configuration attribute is an empty string and the <input> element in the template has no value attribute, then there is no need to sync them on initialization.

MakeNode will check for duplicate entries in any of these arrays. If any appear, it means that a class our component inherits from already handles this attribute and any new declaration would most likely overstep the _uiSetXxxx handler for it. Incidentally, MakeNode also checks for duplicate entries in _CLASS_NAMES , which can also cause conflict in some, though not all, circumstances. MakeNode will write a message to the log for any such error.

結論

MakeNode provides a very simple template processor, with simple functionality that is highly integrated with the Widget foundation class. It also provides helper methods to create classNames to be used in the template and use those names to locate the nodes created. It also provides the means to hook into the events generated both by the UI and the component itself and associate each with a method. It does all these things, while taking care to respect the inheritance chain straight up to Widget and any level of classes you may define.

It does not provide for absolutely all possibilities, but covers a good range of them. Nevertheless, it does not preclude you from adding extra functionality. You might rarely have to write a bindUI or syncUI method if you use the glue provided by MakeNode, but you may do so, since MakeNode does not use them.

As a bonus to those who had the patience to read this far, I have also modified Anthony Pipkin's Button set of gallery components:

• button.js
• button.css
• button-group.js
• button-group.css
• background.png
• background-active.png
• icon-sprite.gif
• example

The API docs can be found here .

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

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

3.4.0のためのYUIとローダー変更

In 3.4.0 we started the process of shifting some of Loader's logic around, to not only make it more performant, but to make it more robust and easier to use in other places (like on the server). We will be rolling out more changes in future revisions, but I wanted to take some time and explain what was changed, why it was changed and how it may impact developers. For the majority of use-cases, developers will notice nothing different, except that things are a little faster and their requirement downloads are a little smaller.

Seed File

The first thing I want to address is the YUI seed file. In previous versions of YUI, our seed file was very tiny and did not contain Loader or any of its meta-data. We've found that in the 90% use-case this was not as performant as we had hoped. The normal user includes the seed file then requests their modules, which in turn means that the seed needs to first fetch Loader, then calculate all of its dependencies, then fetch them all. We now feel that this extra http request is the wrong thing to do, so the new standard seed file contains Loader and its meta-data. Yes, this will make the initial request a little larger, but it will make the loading of modules that much faster since all of its meta-data requirements are now already on the page.

If you wish to use it the old way, you can just include the yui-base seed file instead. It contains everything that is needed to make YUI run in stand-alone mode plus it contains the ability to fetch Loader on demand. If you require even finer-grained dependencies, we have created a yui-core seed file that is exactly what the old yui-base seed was.

    /build/yui/yui-min.js //YUI Seed + Loader
    /build/yui-base/yui-base-min.js //Old YUI Seed with Loader fetch support
    /build/yui-core/yui-core-min.js //Old yui-base without Loader fetch support

It should be noted that these URLs are different than the previous URLs. Anyone that was using the yui/yui-base.js files need to repoint them to yui-core/yui-core.js . If you want the older way of loading the seed and fetching Loader, you would use the yui-base/yui-base.js seed file.

The other reasoning for this change is our roadmap for making YUI run in as many places as possible. The old seed file plus Loader in a single combo server request is all well and good if you have a combo server available in your application. But what about on the server? Or in an offline app on a mobile device? These places need to minimize file access while still getting the information they need.

Rollups

The next thing that we changed was removing rollups from the system and defaulting allowRollup to false in the Loader config. What does this mean to you? Well, hopefully nothing at all. Before I explain the impact of the change, let me explain the reasoning behind it. The primary reason is, again, performance, along with payload delivery. Take this example:

     Module A: requires event-a, event-b
     Module B: requires event-c, event-d

When you request both, the rollup logic prior to 3.4.0 used to determine that you should get the event rollup. Which actually meant that you were getting:

     event.a, event.b, event.c, event.d, event.e, event.f, event.g, event.h

You ended up with more on your page than you actually needed. By turning off the rollup support, YUI will now ask for only what you actually requested and nothing more. In most cases, you will not notice this . Module developers, may run into a situation where things that worked in the past may not work now. The reason for this is that they actually worked by accident before. Let me use a real world example: Dial .

In 3.3.0, Dial required this:

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter', 
        'transition',
        'intl'
     ]

For the most part, Dial worked in 3.4.0, however keyboard support did not work. After doing some simple investigating, it turned out that the rollup support was actually requesting the entire Event rollup (which includes event-move and event-key). Without the rollup logic pulling in all of event, 3.4.0 Dial no longer had all of its requirements. Making Dial's requirements more specific and defining all of its actual dependencies properly makes it work as expected.

    requires: [
        'widget',
        'dd-drag',
        'substitute',
        'event-mouseenter',
        'event-move',
        'event-key',
        'transition',
        'intl'
     ]

For module developers, it is a best practice to make sure that your module requires exactly what it needs to function. Do not assume that an upstream module requirement is there. It's always better to make sure that you ask for what you need.

This also means that module requirements are more well defined. For example, datatype-date has Intl support built in. In previous versions you would access the Intl like this:

    Y.Intl.getAvailableLangs('datatype-date');

But since this module doesn't actually have a language (the datatype-date-format module does), this will fail. It needs to be more specific and actually ask for languages for the correct module:

    Y.Intl.getAvailableLangs('datatype-date-format');

Build File Explosion and Submodule Removal

After making this change, the next change we made was exploding the build directory and removing submodules from the core system. Submodule logic was not removed, only our meta-data structure was changed. This will provide backward compatibility for current installations.

Submodules in the core system caused a couple of issues that we needed to resolve. The first reason was performance. Each time Loader needed to calculate dependencies, it needed to walk the submodule/plugin structure of each module. Doing this thousands of times was hurting our performance during the Loader calculate routine. By removing support for submodules in the core system we saved tens of thousands of function calls and iterations.

Loader was changed so that if a use property in a module's meta-data defined more modules, it will use those modules instead of trying to load the original module. So, if you requested “ dd ” Loader would inspect “ dd “'s meta-data and see a use property that looks something like this:

    "dd-ddm-base,dd-ddm,dd-ddm-drop,dd-drag,dd-proxy,dd-constrain,dd-drop,dd-scroll,dd-drop-plugin"

In the core YUI seed file, we are also including what we are calling virtual rollups or aliases . These module definitions are exactly the same as the meta-data in Loader. This way you can include all the files exported from our Dependency Configurator and still use these rollups without having Loader present on the page. In future releases, we will be refining this approach even more.

After making this change, we then preceeded to explode our build files. In previous releases, the submodules determined the modules file path. 次に例を示します。

    "dd": {
        "submodules": {
            "dd-drag": 
            // Module data
         }
     }

In 3.3.0 when you built “dd”, the file structure looked something like this:

    /build/dd/dd-drag.js
    /build/dd/dd-ddm.js
    /build/dd/dd-drop.js

With the build system exploded in 3.4.0, “dd”'s build files now look like this:

    /build/dd-drag/dd-drag.js
    /build/dd-ddm/dd-ddm.js
    /build/dd-drop/dd-drop.js

This allowed us to remove the “path” property from all of our module meta-data as well, saving file size and reducing the logic required to assemble the modules url paths.

If you are including a pre-configured combo URL, you must recalculate your URL when you upgrade.

The downside to this change is that if you are including a combo URL of modules to “prep” your page you can not just change the version number and upgrade. You will need to revisit the Dependency Configurator and generate a new URL with new module structure.

今後の

I will be continuing to refine, refactor and maximize every aspect of our Loader and Seed strategy. These first steps were needed to aid in future changes that need to be made for not only our client-side strategy but also our server, command-line and mobile device strategies as well.

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

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