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

私達にあなたのプロジェクトについて少し教えてください。

"デメテル"は、Web会議、アドホック会議、およびアカウント管理に強力なソリューションを提供しています我々が構築された最近のWeb 2.0アプリケーションのコードネームです。 "ミーティングセンター"と "管理モジュール"：現在、我々は2つ​​の主要な製品スイートを持っています。

それを表示するしないパブリックアクセスとRCフレーズはまだですが、私が抽出した管理モジュールのプロトタイプポータルのプロパティの管理を示しています。

YUIライブラリのどのコンポーネントがプロジェクト内に使用されていますか？

我々は最初にJSフレームワークとUIライブラリを使用するかを決定しようとしたとき、そこにYUIで私たちを売って三つあった：素晴らしいドキュメント、成熟したウィジェットの多種多様な、とBSDライセンスなので、私は会社にYUIを導入しました。 次のモジュールが我々のプロジェクトで使用されます。

• CSS：リセット、フォント
• コア：YAHOO、ドム、イベント
• ユーティリティ：接続マネージャ、データソース、要素、JSON
• ウィジェット：カレンダー、コンテナは、DataTable
• ツール：ロガー、テスト

adminモジュールの実装の概要

Adminモジュールのための私達の主な要件が含まれる：

• カスタマイズされたエディタのポップアップを持つDataTable
• テーマ/スキンのカスタマイズ
• ブラウザの互換性

ここでUIを設定する単純なマークアップは、次のとおりです。

     <div id="datatable-ux"> <div id="datatable-ux-hd"> </ DIV> <div id="datatable-ux-bd"> <DIV ID = "ノードの深さ"スタイル= "表示：なし ">ルート>テスト> 5_DevテストBA> 80000_1010 </ DIV> <div id="output"> </ DIV> <div id="yui-datatable" class="yui-dt"> <IMG SRC = "画像/アイコンloading.gifの" alt = "ローディング" = "absmiddle"スタイル= "マージン：30pxの0;"整列/>データをロードする方法を...  </ DIV> </ DIV> <div id="datatable-ux-ft"> </ DIV> </ DIV> <div id="node-apply-wrap" style="display: none;"> <フィールドセット> <legend> </伝説> <input type="radio" name="node-apply" checked="checked" />現在のノードのみ<br /> <入力タイプ= "ラジオ"名前= "ノードに適用"/>現在のノードと子ノード<br /> <input type="radio" name="node-apply" />子ノードのみ</ fieldset要素> </ divの適用> 

ここで私は、DataTable TextboxCellEditor用に構築されたシンプルな拡張機能のコードスニペットは、次のとおりです。

    CellEditorにクラスを拡張する/ /単純な例
    / /短いエイリアス
    VAR LANG = YAHOO.lang、
	   UTIL = YAHOO.util、
	  ウィジェット= YAHOO.widget、
	  ドム= util.Dom、
	  イベント= util.Event。

    / / TextboxCellEditorを拡張
    Gcc.admin.TextboxCellEditor =関数（設定）{
	    Gcc.admin.TextboxCellEditor.superclass.constructor.call（これは、設定）
    };
    lang.extend（Gcc.admin.TextboxCellEditor、widget.TextboxCellEditor、{
	    renderForm：関数（）{
		    Gcc.admin.TextboxCellEditor.superclass.renderForm.call（この）;

		    VAR OHD = document.createElement（ 'DIV'）;
		    。this.getContainerEl（）INSERTBEFORE（OHD、this.textbox）;
		    oHd.id = container.id + '-adminのエディタヘッド';
		    Dom.addClass（OHD、 "管理エディタ -  HD '）;

		    VAR oCurrNode = document.createElement（ 'DIV'）;
		    。this.getContainerEl（）INSERTBEFORE（oCurrNode、this.textbox）;
		    oCurrNode.innerHTML = '現在のノード： "+ Dom.get（'ノードの深さ '）innerHTMLプロパティ;
		    Dom.addClass（oCurrNode、 "管理エディタ-PD '）;

		    VAR oApply = document.createElement（ 'DIV'）;
		    。this.getContainerEl（）にappendChild（oApply）;
		    oApply.innerHTML = Dom.get（ 'ノード適用ラップ'）innerHTMLプロパティ。
		    Dom.addClass（oApply、 "管理エディタのfieldset-'）;
	    }

	   移動：関数（）{
		    Gcc.admin.TextboxCellEditor.superclass.move.call（この）;
		    Dom.addClass（this.textbox、 "管理エディタ-PD '）;
	    }
    }）;

その後cellClickEventハンドラは、編集中のデータ値の基になる型を検出し、カスタマイズしたセルエディタの1つを呼び出します。

Apache StrutsフレームワークおよびアプリケーションコンテナのWeblogicから成る私たちのサーバー·アーキテクチャでは、我々はYUIは、 "クライアント側·コントローラー"として優れたコンパニオンの役割を果たしており、データソースの動的なように、Strutsのアクションの結果でうまく動作することがわかった。

 <％@ = "UTF-8"のcontentType = pageEncodingをページの "application / jsonに;のcharset = UTF-8"％> <％@ taglibを接頭辞= "s"のURI = "/配下にあるstruts-タグ"％> {"PropertySetのを" {"プロパティ"：[<s:iterator value="displayPropertyResultList" status="index">、{"ID"： "<s:property value="id" />"、 "名前"： "<S：プロパティ値= "名前" /> "、"タイプ "：" <s:property value="type" /> "、"値 "：" <s:if test="%{value != null}"> <Sます：if> "、" ApplyFrom "：" <s:property value="applyFrom" /> "、" ApplyTo "：" <S：プロパティの値= "applyTo" / = "値" /> </ sのプロパティ値> "、"読み取り "：" <s:property value="readable" /> "、"書き込み可能 "：" <s:property value="writable" /> "} <S：もしテスト="％{＃！ index.last} ">、</ S：}}イテレータ>]> </ sの場合 

詳細とソースコードがご利用いただけますGitHubの私は、単純なデモンストレーションとしてデータソースをローカルを使用してAdmin UIのプロトタイプを抽出した。

何がこのプロジェクトでYUIを使用しての挑戦行っていたの？

主な課題は、我々の開発者のほとんどはフロントエンドエンジニアは、実際にはないという事実の周りされている。 彼らはいつも非常に限り、クロスブラウザの問題に対処する経験やJavaScript固有のトリックを持っていません。 幸いにもYUIは良いコードの構造を作るために、ほとんどのブラウザの互換性の問題を滑らかにする私達に多くのことができます。

デメテルのために次は何ですか？ あなたはYUIと取り組んでいるいくつかの今後の機能は何ですか？

私たちが取り組んでいる新機能の一つは、頻繁に使用になるレポートのモジュールであるYUIチャート 。 我々はまた、使用することを計画しているTreeViewコントロールのリファクタリング私たちのアドレス帳モジュールにウィジェットを。

我々はまだ使用しているYUI 2 、しかし、に基づいて、より多くの公式のウィジェットの場合YUI 3が出てくる、我々は完全に将来的にはYUI 3に移動することを検討します。