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

YUI 3のDataTableとTreeble

10:41 2011年1月24日ジョンリンダルによって午前|で開発、 YUI 3ギャラリー | 6コメント

のベータリリースのDataTable YUI 3.3.0には私たちと遊ぶのが非常に強力なコンポーネントを提供します。有用な方法でタイヤを蹴るために、私は更新することを決めたTreeble DataTableを使用する例を。（Treebleが可能にテーブル内の階層データを表示する。）

私の喜びに、それは非常に簡単だった！すべてのハードワークがで行われているTreebleDataSource YUI 3は私がしなければならなかったすべては使用してDataTableに差すとなるように、DataSourceを拡張する、 Y.Plugin.DataTableDataSourceしてから、列を設定します。

 VAR DS =新しいY.はTreebleDataSource (...),
	 PG =新しいY.ネータ(...),
	表;

関数SendRequestの（）{
	 table.datasource.load（{
		リクエスト：{
			 startIndexの：pg.getStartIndex（）、
			 resultCount：pg.getRowsPerPage（）
		 }
	 }）;
 }

 VAR COLS = [
     {キー：'yui33 -ハック"、ラベル：''}、
     {
        キー："treeblenub"、ラベル：''、
        フォーマッタ：Y.Treeble.buildTwistdownFormatter（SendRequestの）
     }、
     {
        キー：'タイトル'、ラベル："タイトル"、
        フォーマッタ：Y.Treeble.treeValueFormatter
     }、
     ...
 ];

表=新しいY.DataTable.Base（{columnset：COLS}）;
 table.plug（{データソース：DS}を、Y.Plugin.DataTableDataSource）;

完全なソースコードを参照するには、を参照してくださいライブ例。

軟膏での唯一のハエは、以下のとおりです。

yui33 -ハックの列。によるYUI 3.3.0 DataTableのバグ、 td列のフォーマッタに渡される要素は、前の列から実際にです。したがって、テーブルの最初の列はtwistdownが表示され、2番目の列は空です。
データの未定義の値は次のように表示されている{value}の代わりにブランク（バグ2529858 ）。

使いやすくTreebleにするために、私はどのスタイルで書き出されるCSSクラスへのサムのスキンが追加されましたY.Treebleフォーマッタを。

お楽しみください！

著者について： ジョンリンダル（ @ jafl5272 Twitter上では）上の基盤構築のリードエンジニアの一人であるYahoo!を APTが構築されています。 以前、彼は、Yahoo!のPublisher Networkに取り組みました。

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

YUI：営業時間木1月27日

16:04時ルークスミス2011年1月21日|で開発、営業時間 | コメントはまだありません

次のYUI：営業時間は、27次木曜日になります。

先週、私たちは、短縮1時間のタイムスロットにあまりをパックしよう、そして最も重要なセグメントの一つ前に時間が足りなく：2011 YUI 3ロードマップのフィードバックと提案の部分。だから我々はSatyenは先週からラフロードマップを更新したと指摘して、中断したところから再開するつもりだ、それはあなたの考えがすべてです。

そうな質問や提案が付属しています。私達はあなたの優先順位は、来年のためであり、どのように我々が助ける、そしてどのようなお考えは、製品（または製品ファミリ）より完全な、卓越したとして、YUIを作ることになることができるのかお聞きしたいと思っています。

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

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

Grehヒンチが開始した会話得たフォーラムでは、まだブレインストーミングに取得し、我々は木曜日お会いしましょう！

UPDATE（1 / 26）

あなたのドラフト見つけることができます2011年のロードマップを SatyenがYUILibrary.com wikiに先週説明した。我々はそれを見直すのに多くの時間を費やすことがありますので、呼び出しの前に見て。

* - Skypeがオプションでない場合は、ローカル番号のために、私にメール。

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

Yahoo!を発表ユーザインタフェースライブラリ2.xのクックブック

9:00 2011年1月21日マットスナイダーによって午前|中開発 | 6コメント

置くPacktパブリッシングは、私の新しい本、のリリース発表していますYahoo!を ユーザインタフェースライブラリ2.xのクックブック 。本は含め二〇から五以上YUI 2.xのコンポーネントの詳細な例、を読者に提供し、多数のコーディングのレシピが含まコンテナ、ドラッグ＆ドロップ、接続マネージャ、データテーブル、ツリービュー、および大いに多く。

あなたはこの本から学ぶことは何

それはあなたがクライアントを印象づけ、あなたの友人にすごい、よりリッチでインタラクティブなWebアプリケーションを構築するYUI 2.xを使用する方法を学ぶのに役立つように、私はこの本を書きました。それはそれらを使用する方法を示す、そしてどのようにそれらがあなたのニーズに合わせて設定するには、25 YUIコンポーネントを介して説明するレシピを持っています。各対象コンポーネントは、コンポーネントが使用されていることを一般的な方法を紹介する抽出コードサンプルを持つことになります。

さらに、完全な作業用のコードが章ごとに別々にダウンロードすることができますので、一緒に従うことが簡単です。レシピのそれぞれについて、コンポーネントの動作とYUIが何をしているかについての説明に続いて、より高度な例では、その後、初歩的な例があります。より多くの経験豊富な開発者のために、ほとんどのレシピは、さらにコンポーネントをカスタマイズし、強化する方法を説明し、ソリューションの追加の議論が含まれています。

実用的でわかりやすいレシピを充填した、本は、Yahoo!ユーザインターフェイスライブラリ（YUI）の最も強力なコンポーネントを使用して近代的な、リッチインターネットアプリケーションを作成するのに役立ちます。

誰がこの本のために書かれている

本は最良の比較的YUI 2〜新しいまたはクイックガイドに興味を持っているJavaScript開発者に適しています。しかし、それはほとんどすべてのコンポーネントのサンプルが含まれており、均等にブラッシュアップまたは各コンポーネントの最も強力な機能の一部を探索する経験豊富な開発者のためのリファレンスとして適しています。

15％オフプレゼント！

置くPackt PublishingはどんなYUIBlogリーダーに15％の割引を提供しています、そしてあなたは私の本が電子書籍と伝統的な形式の両方で利用できることがわかります。割引を受けるために、単に購入Yahoo!の ユーザインタフェースライブラリ2.xのクックブック置くPackt出版を通して、そしてチェックアウトでコードYUI2XCBK15を提供しています。（注：あなたが動作するようにコードを行うにはログインする必要があります。）

サンプルをしたいですか？

あなたが私の本の中で提供されるコンテンツの感触を得るために、置くPacktは、あなたが期待できるかのサンプルを提供するために十分な寛大です。

" YUI 2.X：イベントのコンポーネントの使用 "

著者について： マットスナイダーは、 Web開発者とJavaScript愛好家です。マットは、過去7年間のフレームワークやさまざまな言語でWebアプリケーションを開発している、ともほぼ4年間、Web開発に関するブログを執筆している。 マットは、主任エンジニアであるMint.com 。 彼は、YUI 2のストレージコンポーネント（この本で説明されています）を含めて、YUI 2と3の両方に広く貢献しています。 マットは彼の日の仕事、彼のブログ、そしてオープンソースコミュニティへの貢献の間の彼の時間のバランスをとります。 彼は働いていないときに彼はすべてのそれから離れてバックパッキングやに滞在し、彼の広大なビデオゲームのコレクションを探索楽しんでいます。

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

YUIシアター- Satyenデサイ：""電話、バーにタブレットとラップトップウォーク..."モバイルWeb開発に、YUIのアプローチ"（55分）

8時37分時2011年1月17日エリックMiragliaによって午前|で開発、 YUI劇場 | コメントはまだありません

Satyenデサイ（ @ dezzinessの特徴や制約の面で）、YUI 3コンポーネントとウィジェットのサブシステムの生みの親、今日の市場でのWeb対応デバイスの新しいセットをサポートするYUIのアプローチを説明し、どのように我々は彼らを考えること等孤立した問題のスペースに反対した。

ビデオは下に埋め込んだ場合、お好みのRSSリーダーで正しく表示されない、必ずYUI劇場でのビデオの高解像度版を見るためにクリックスルーする。

その他の最近のYUIの劇場動画：

ルークスミス：YUI 3：表面の下に -ルークスミス、YUIチームのエンジニアは、YUI 3の中心に位置するコアパターンとインフラストラクチャ部分のいくつかの内を調べ、YUIConf 2010で最も高い評価を交渉の一つを提供しています。
ライアングローブ：YUI 3オートコンプリートの紹介 - YUIConf 2010年からこの講演では、YUI 3オートコンプリート著者ライアングローブは多くのオートコンプリートのパターンのいくつかの旋風ツアーを取るには、このコンポーネントによって可能とし、その強力な新しいYQL統合に深いダイビングを提供します、フィルタリング、および機能を強調。
ポールドネリーとNagesh Susarla：YQL + YUI：ビルエンドツーエンドのアプリケーション -ウィジェットを開発する場合、それは質問のように立ち上がるYQLデータを使用する方法ではない、むしろどのようにアクセスする。このYUIConf 2010セッションでは、YQLエンジニアポールドネリーとNagesh Susarlaレビューは、YQLコンソールでクエリを始め、様々なエンドポイントを経由してYQLデータにアクセスし、YQLのさまざまな認証層を通過して。
エリックFerraiuolo：TipTheWeb.org：ヘビーデューティYUI 3＆YQL -このセッションではYUIConf 2010年から、TipTheWeb共同設立者とYUI寄稿エリックFerraiuoloはYUI 3、YUI 3ギャラリー、とYQLを使ってプロジェクトの規模のコードベースの作成について説明します。
リードバーク：イエティ：YUIの簡単なテストインターフェース -テスト、クロスブラウザのWebアプリケーションでは、長すぎるのが、難しくなりすぎた：は、手動のブラウザをリロードするか、複雑な自動化ソフトウェアで苦労している。 YUIConf 2010年からこのセッションでは、YUIのイエティプロジェクトはこれらの問題を解決するためにどのように役立つかについてはYUIのエンジニアリードバーク語る。リードは数分とどのようにYUIのチームがより良い製品を出荷するイエティを使用するには、クロスブラウザのテストをセットアップする方法には、イエティがYUI Testでどのように動作するか、あなたのフロントエンドのコード用の自動テストを使用する必要がある場合について説明します。

CCコンテンツ/厚意によって使用される：

YUI劇場へのサブスクライブ：

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

YUIシアター-ルークスミス："YUI 3：表面の下に"（48分）

2011年1月14日2:33 PMにエリックMiragliaから|で開発、 YUI劇場 | コメントはまだありません

このYUIシアタービデオでは、YUIエンジニアルークスミス（ @ ls_nは）YUI 3の中心に位置するコアパターンとインフラストラクチャ部分のいくつかの内を調べ、YUIConf 2010で最も高い評価を交渉の一つを提供しています。

ビデオは、あなたのRSSリーダーで正しく表示されない下に埋め込んだ場合、必ずYUI劇場でのビデオの高解像度版を見るためにクリックスルーする。

その他の最近のYUIの劇場動画：

Satyenデサイ：モバイルWeb開発に"電話、タブレットやバーにラップトップウォーク..."- YUIのアプローチ - Satyenデサイ、YUI 3コンポーネントとウィジェットのサブシステムの作成者は、有効になってウェブの新しいセットをサポートするYUIのアプローチを説明します市場上のデバイス、今日、そしてどのように我々は孤立した問題のスペースとは対照的に、機能と制約の観点から、それらを考えるしたい。
ライアングローブ：YUI 3オートコンプリートの紹介 - YUIConf 2010年からこの講演では、YUI 3オートコンプリート著者ライアングローブは多くのオートコンプリートのパターンのいくつかの旋風ツアーを取るには、このコンポーネントによって可能とし、その強力な新しいYQL統合に深いダイビングを提供します、フィルタリング、および機能を強調。
ポールドネリーとNagesh Susarla：YQL + YUI：ビルエンドツーエンドのアプリケーション -ウィジェットを開発する場合、それは質問のように立ち上がるYQLデータを使用する方法ではない、むしろどのようにアクセスする。このYUIConf 2010セッションでは、YQLエンジニアポールドネリーとNagesh Susarlaレビューは、YQLコンソールでクエリを始め、様々なエンドポイントを経由してYQLデータにアクセスし、YQLのさまざまな認証層を通過して。
エリックFerraiuolo：TipTheWeb.org：ヘビーデューティYUI 3＆YQL -このセッションではYUIConf 2010年から、TipTheWeb共同設立者とYUI寄稿エリックFerraiuoloはYUI 3、YUI 3ギャラリー、とYQLを使ってプロジェクトの規模のコードベースの作成について説明します。
リードバーク：イエティ：YUIの簡単なテストインターフェース -テスト、クロスブラウザのWebアプリケーションでは、長すぎるのが、難しくなりすぎた：は、手動のブラウザをリロードするか、複雑な自動化ソフトウェアで苦労している。 YUIConf 2010年からこのセッションでは、YUIのイエティプロジェクトはこれらの問題を解決するためにどのように役立つかについてはYUIのエンジニアリードバーク語る。あなたがイエティはYUIか数分で、クロスブラウザのテストをセットアップするためのテスト、そしてどのようにYUIチームはイエティがより良い製品を出荷するために使用するとどのように機能するか、あなたのフロントエンドのコード用の自動テストを使用する必要がある場合Reidさんは説明します。

CCコンテンツ/厚意によって使用される：

YUI劇場へのサブスクライブ：

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

YUI：営業時間水曜日1月19日

中| 16:10時ルークスミス2011年1月13日開発 | 3コメント

2011年に歓迎し、YUI：営業時間は、再びスタートさせる予定、と新しい年の最初の割賦は次水曜日、19になります。

当然、とYUI 3.3.0のリリース、それは今年の最初の営業時間のメイントピックになります。私は通話に参加するために、できるだけYUIのチームと外部の貢献者の多くと口論しようとするつもりです、そして我々はあなたが既にプレビューからでプレイしているのかを聞いて会話を開いて私たちのお気に入りのハイライトを介して行くよリリース。我々が2.9で更新があるでしょうし、（と私はかなりこの興奮）、2011年の3.xのロードマップを話し始める。私たちはあなたのアイデア、ご意見ご感想を求めています。 あなたは今年のYUIが行く見てどこのですか？あなたの欲しい物のリスト上にホットチケットアイテムは何ですか？

そう来ると新機能とどのような未来が保持するかについてYUIチームとのチャット！

プログラムの物流の正面から他のニュースでは、営業時間のフォーマットにはいくつかの変更が行われるであろう。

最初に、私たちは2時間からのより多くの営業時間にやさしい1時間に呼び出しを短縮することができます
（特別なトピックの対象に、新規リリースのような私はすべての呼び出しで実装フォーカススタイルのセクションを組み込むつもりですので、すべてのYUI 3はトレンチで使用されている方法を学ぶことができる
そして最後にと畏怖の念を起こさせて、エリックFerraiuoloの、 TipTheWeb名声は、永続的な共同司会者として私を参加されます。彼は、3.0ベータ1以降にYUI 3夢を生きている、と現実世界のアプリケーションの声と経験を追加します。

会話が停止するためにも良い場合を除いて私たちは、午前10時から午後11時PSTにオンラインになるでしょう。接続の詳細は、いつもと同じです。

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

を購読することを忘れないでくださいYUIカレンダーとフォロー@ yuilibraryを営業時間と他のYUIの興味深さに関する最新のアップデートをTwitterで。

そこにあなたを参照してください！

* - Skypeがオプションでない場合は、ローカル番号のために、私にメール。

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

YUI 2 DataTableのテーブルフッター統計

2011年1月13日16:00のMattパーカー|中開発 | コメントはまだありません

YUI 2 DataTableには手を拡げている。しかし、それは行っていないことの一つは、合計、平均またはその他の集計データを見つけることが予想されるテーブルのフッター、持つものです。だから私は、数値データの集計データを追加するには、DataTableを拡張しました。

それは行くなって

最初に、それを使用する：あなたはからいくつかのコードが必要ですgithubの - 3つのjsファイルが存在し、YUIのDataTable jsファイルの後にページ上でそれらのすべてが必要です。そして、あなたは名前空間を変更する場合があります-私たちは使用YAHOO.LPLT.DataTableの延長としてYAHOO.widget.DataTable 。私は以下のこれらのファイルについて、もう少し詳しく説明します。

あなたは通常どおりDataTableを設定するが、作業の概要を取得するために必要な三つのことがあります。

インラインセルの編集をやっている場合は特に、あなたのデータソースは、集計するすべてのフィールドに対して"数値"パーサを指定することを確認してください：
```
  myDataSource.responseSchema = {フィールド：[
    {キー："量"、パーサ："数"}
    / *等..  * /
 ]};
```
あなたの列定義の配列でtrue：columnStatsの設定キーと値を追加します。
```
  VAR myColumnDefs = [
     {キー："量"、ラベル："数量"、columnStats：真} 
     / *等..  * /
 ];
```
あなたが要約したい列の。（あなたの'id'カラムの合計は、おそらく非常に有用ではありません！）。
計算する統計DataTableを伝えます。
```
 VARーブル=新しいYAHOO.LPLT.DataTable（"exampleEl"、
     myColumnDefs、 
     MyDataSourceの、 
     {columnStats：{上：真、統計情報：['和']}}
 ）;
```
これは、列の統計情報を設定する最もシンプルな方法ですが、あなたは、余分な統計を追加してラベルをカスタマイズしたりすることができます。

例ありますgithubの上でプレーするが。

いくつかのポイント：

フッターは、テーブルで変更されます。もし表示/、それらを移動、新しいものを追加し、行を追加/削除、ソート、またはインラインセルエディタを使用して、列を非表示のであれば、フッターには、それに応じてUIと統計情報が更新されます。
あなたが好きなように、フッターに多くの行として、各統計ごとに1行を追加することができます。現状では、あなたは平均値、中央値、合計、最小値、最大値、範囲、STDEV、分散、またはvarianceUnbiasedを持つことができます。設定で"統計"の項目は配列です：（例：ちょうどあなたがこの配列にしたいの統計情報を追加stats: ["min", "median", "stdev"] ）。
テーブルのフッターには、その列に指定されたフォーマッタを使用します。
あなたがページネータを持っていれば、表示される統計情報は、単にテーブル全体または現在表示されているページのためにあるかどうかを選択することができます。追加pagedTotals: true columnStatsには、ページの統計情報を持つオブジェクト。
configオブジェクトの'統計'配列はまた、キー'ラベル'と'FN'で、オブジェクトリテラルを含めることができます。 fnは統計を計算する関数です - は、'min'または数値を返す関数のような文字列のどちらか。 GitHub上の例では、"加重合計"は、つの列からデータを使用して行うことができる方法を示しています。

実際の拡張コードの詳細

メインファイル、YAHOO_DataTable_colStats.jsは、DataTableに保護されたプロパティのいくつか、いくつかのprotectedメソッド、およびつのパブリックメソッド、追加されcolStatsRefresh再計算し、テーブルのフッターを再描画される、とcolStatsGetRecordSetすべてのいずれかの配列を返す、レコード、または単にの値に応じて目に見えるもの、 pagedTotals 。あなたが（直接、基になるレコードセット内のデータを変更するなど）便利なイベントが発生しないテーブルへの変更を作っている場合は、最初は便利かもしれません、第二は、カスタム集計関数を使用している場合。

YAHOO_DataSource_patch.jsが追加されますparseField(key, value)データソースへの方法を。あなたが数値データのテキストボックスのインラインセルエディタを持っている場合に必要です。エディタは自動的に解析されていない、などを追加することができない文字列を返します。 parseFieldは、編集したデータを変換するために、データソースで指定されたパーサへのアクセスを提供します。

YAHOO_util_Stats.jsは、スタンドアロンの提供YAHOO.util.Stats数値データの（ソート）の配列をラップし、要約統計量を提供するクラスを。それは、依存関係がYAHOO.langているだけです。 YAHOO.util.Statsインスタンスが要約される列ごとにデータテーブルで維持し、パフォーマンスを向上させるために難しい数学の一部をキャッシュしています。統計の配列（'分'、'中央'など）に渡される文字列はYAHOO.util.Statsクラスのメソッドですので、簡単にプロトタイプを追加して、追加のものを追加したりすることができます。彼らは唯一の"彼らの"列のデータへのアクセスを持っていることも注意してください。

そして最後に

私は、これはスクロールDataTablesで仕事に行くされていませんかなり確信し、私もそれを試したことだ！しかし、あなたは、何か問題を見つけたり、アイデアがある方はGitHubのイシュートラッカーにそれらを置いてくださいです。

著者について：マットパーカーが（ Twitterの@ Lamplightdb ）の創立者および開発者であるランプライトのデータベースシステム、英国の非営利団体のためのフル機能のWebベースの管理システムを提供する小さな会社。 マットの生活と北西ロンドン在住。

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

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

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

YUI 3のDataTableとTreeble