Viewportで画面全体をレイアウトする

Viewportで画面全体をレイアウトする

Viewportはbody直下に生成されるコンテナで、最上位に位置するコンテナとなります。ですので、Viewportは基本的に1ページにつき1つとなります。その中に個々のコンポーネントを配置してくことで、簡単に典型的なアプリケーションの外観を構築することができます。

Viewportを使って典型的な2カラム構成のアプリケーションの外観を作ってみましょう。このサンプルファイルはダウンロードできますので、この中の「html/sample/2pane.html」を見ながら解説します。ダウンロード（html.zip/593KB）。

なお、このサンプルもExt JSからダウンロードした「ext-2.1/examples/layout/column.html」を、本連載の解説用に一部改変を加え、コメントなどを追記したものです。

サンプルは大きく分けて「viewportを生成（step1）」、「viewportの中身をitems配列に定義（step2）」、「左メニューの中身をitems配列に定義（step3）」、「センターメニューの中身を定義（step4）」の4ステップで作成してあります。

step1では、レイアウトタイプ：borderでレイアウトします。

step2では、今回は左メニュー（region: 'west'）とセンターメニュー（region: 'center'）を定義します。borderレイアウトの場合はregion属性を設定します。region属性はnorth | west | center | east | southのいずれかになります。

step3では、左メニューの中身はアコーディオンメニューを3つ配置しています。その際にtitleやmarginの設定も行います。

step4では、センターメニューの中に直接htmlの設定を定義しています。左メニューのようにitemsを定義して入れ子にすることももちろん可能です。

高度に抽象化されたhtmlとJavaScript

borderレイアウトは図3のように境界ラインもこのようにドラッグ＆ドロップで幅の変更も可能です。また左メニューはアニメーションしながら閉じることも可能です。このようにExt JSのレイアウト機能を使うとデスクトップアプリケーションのような挙動を簡単に実現することができます。

今回ご紹介した機能はExt JSの機能のほんのごくごく一部にすぎません。サイトに行けば秀逸なサンプルもありますので、ぜひみなさんもサンプルをダウンロードしてこのすごさを体感してください。

このようにExt JSでは、さまざまなオブジェクトが高度に抽象化されているのがご理解いただけるかと思います。htmlとJavaScriptをベースに独自のルールを定義し、極めて高度な機能を簡潔に提供してくれるUIフレームワークです。レイアウトすらもhtmlを書かずに構築することができてしまうのですから驚きです。

近い将来、MicrosoftのVisualStudioのようにIDEで、ドラッグドロップで配置していくだけで、Ext JSベースのUIの構築ができるということになりそうですね。AdobeのFlexの開発に近い形になるのではないでしょうか。

こういったコンポーネント指向のWeb開発は今後のトレンドの1つになっていくでしょう。Webアプリケーションであれば、よく使われるUIコンポーネントは共通化できそうですし、そうすることで開発の効率化、バグの減少にもつながります。デザインテーマはcssを変更することで容易に変更できますので、開発とデザインも今まで以上に分業がしやすくなるでしょう。

次回はExt JSとGoogle Ajax Feed APIでミニRSSリーダーを作ります。See you next week！