演習 5: ページへの Dojo レイアウト・ウィジェットの追加

この演習では、Border Container ウィジェットをページに追加することにより、MyMovieProject Web 2.0 プロジェクト用の Web クライアント・インターフェースの作成を開始します。この演習により、Web アプリケーション作成用のさまざまな Dojo ツールを知ることができます。

MovieService の getMovieList() メソッドは、JSON 応答を返す RPC アダプター・サービスとして公開されています。JavaScript は JSON をネイティブ・オブジェクトとして扱うため、応答は Dojo クライアントで容易に使用できます。Dojo クライアントを作成するには、以下のようにします。

「エンタープライズ・エクスプローラー」ビューで、「MyMovieProject」 > 「WebContent」を展開します。
ShowMovies.html を右クリックし、「アプリケーションから開く」 > 「リッチ・ページ・エディター」を選択します。
リッチ・ページ・エディターで Web アプリケーションを開発するときには、以下のビューが役立ちます。
設計

ビジュアル編集機能を完備した WYSIWYG 環境。「パレット」および「エンタープライズ・エクスプローラー」ビューからのドラッグができます。

ソース

ソース・コードおよびマークアップを直接処理できるエディター。

分割

2 つ以上のペインを水平または垂直に 1 つの分割画面ビューに結合したもの。デフォルトの分割では、「設計」ペインと「ソース」ビューが表示されます。分割画面の一方の部分に加えた変更は、分割画面のもう一方の部分に即時に表示されます。
リッチ・ページ・エディターの「設計」タブをクリックします。
「パレット」で「Dojo レイアウト・ウィジェット (Dojo Layout Widgets)」ドロワーをクリックします。 Dojo 対応の Web プロジェクトで作業している場合、パレットには、ドロワー別に編成されたさまざまな Dojo ウィジェットが含まれています。これらのウィジェットは Web ページにドラッグできます。ウィジェットの上にカーソルを移動すると、そのウィジェットの説明を表示できます。
「BorderContainer」ウィジェットを選択して、ページにドラッグします。「BorderContainer の挿入」ウィンドウでは、「ヘッドライン (Headline)」と「サイドバー」という 2 つの設計モードから選択できます。領域を追加すると、BorderContainer が Web ページにどのようにレンダリングされるのかを示すプレビューが表示されます。
「上部」領域と「中央」領域を選択し、「OK」をクリックします。
BorderContainer ウィジェットが Web ページに挿入されます。
「ウィンドウ」 > 「ビューの表示」 > 「プロパティー」を選択して「プロパティー」ビューを開きます。「プロパティー」ビューを使用して、選択したウィジェットのプロパティーを表示および編集できます。
「設計」ビューで、任意の BorderContainer 領域を選択します。選択したウィジェットのプロパティーを表示するには、「プロパティー」ビューでパンくずリストを使用します。
「スタイル」タブで、「プロパティー」フィールドに次の値「height: 600px; width: 100%」を入力します。
BorderContainer ウィジェットにもう 1 つ領域を追加します。
1. 「Dojo レイアウト・ウィジェット」ドロワーから ContentPane ウィジェットを現在の BorderContainer ウィジェットの右マージンに、「右コンテンツ・ペインの追加」が表示されるまでドラッグします。
「設計」ビューで BorderContainer の上部領域を選択します。「プロパティー」ビューに「ContentPane」セクションが表示されます。
「スタイル」タブにナビゲートし、「プロパティー」フィールドの横にある「参照」をクリックして、「新規スタイル」ウィンドウを開きます。
左側のペインで「テキスト・レイアウト」を選択します。
右側のペインの「水平方向の位置合わせ」グループで「中央」を選択し、「OK」をクリックします。
「設計」ビューで BorderContainer の上部領域をダブルクリックして、領域内のテキストを編集し、My Movie Web Application! と入力します。
ページを保存します。

Dojo Toolkit についてさらに学習する

Dojo Toolkit は、柔軟性のある優れたモジュール式 Ajax Software Development Kit です。これは以下の 3 つの主要な層に分かれています。

Dojo コア: Ajax 開発に必要なすべての主要機能に加え、他のツールキットにはない多数の機能を備えています。
Dijit: Ajax アプリケーションの開発時に使用する、対話性に富んだ高品質のウィジェットとテーマのセット。
DojoX (Dojo eXtensions): Ajax アプリケーションの開発に役立つウィジェットおよび API を含むモジュール (ただし、すべてのアプリケーションで必要とされるわけではない)。

Dojo Toolkit の詳細については、Dojo Toolkit の Web サイトを参照してください。

演習 5: ページへの Dojo レイアウト・ウィジェットの追加

演習のチェックポイント