ガイドライン: Web ユーザー・インターフェースの作成トピック概論
RAD 6.0 における Web 導入環境では、Web ユーザー・インターフェースを素早く作成するための包括的な複数のツールが備えられています。これには、Web Site Designer および Page Designer、さらには複雑な Web ページを簡単に作成する多様なウィザードが含まれます。この資料では、こうしたツールを使用して Web ユーザー・インターフェースを効果的に作成する方法についてのガイドラインが提供されています。導入手法の説明、サポートされるページ・タイプについて、さらには Web ページの作成を支援する機能について取り上げられています。 導入手法
直接 Page Designer を使用して、ユーザー・インターフェースに個々の Web ページを作成できますが、RAD 6.0 では Web Site Designer を開始点として使用するトップダウン導入手法が用いられています。Navigation エディターを使用すると、以下の事柄が可能です。
Web サイトの構造を示す階層図を最初に作成します。[Site] ドロワーは [パレット] ビューで使用でき、新規または既存のページとプロジェクトを階層図にドラッグ・アンド・ドロップして、グループに編成することができます。このエディターを用いると、目に見える方法で簡単にページを追加、削除、さらには並べ替えることができます。ナビゲーション・ダイアグラムを作成すると、Web Site Designer は、Web ページ間のナビゲーション・リンクの追跡を自動的に識別して保持し、サイト・マップを作成できます。 後ほど、Page Designer を使用して個々のページを構成する際に、ナビゲーション・バーやメニューなどのナビゲーション要素を追加できます。サイト構造に基づいて、適切なリンクのみを表示するようカスタマイズできます (たとえば、トップ、親、兄弟、および最初の子へのリンクのみを表示できます)。 ページ・テンプレートはご使用のページすべてに共通のビジュアル要素とレイアウトを定義し、Web サイトで一貫性のあるルック&フィールを適用できるようにします。Web プロジェクトの作成中に、あるいは後ほど別の機会にウィザードを使用して、ページ・テンプレートを作成できます。Navigation エディターを使用すると、図中の選択したページまたはすべてのページにテンプレートを簡単に適用できます。ナビゲーション要素をテンプレートに含め、それをすべてのページに適用して Web サイト全体において一貫したナビゲーション制御を行えるようにするのが、提案されている優れた方法です。 ページをダブルクリックして、[Create a page] ウィザードを起動します。サポートされているページ・タイプ (「ページ・タイプの選択」を参照してください) のいずれかを選択し、最初のページ・プロパティーを指定して Page Designer エディターで開きます。 これで、Web ページ・コンテンツの構成と編集が可能です。[Web Site Navigation] ドロワーは、ナビゲーション要素をページにドラッグ・アンド・ドロップできる [パレット] ビューで自動的に使用可能になることに注意してください。 ページ・タイプの選択
RAD 6.0 では、HTML、JSP、および Faces JSP テクノロジーを使用する、Web ユーザー・インターフェースの作成がサポートされています。それぞれは、異なるタイプの Web アプリケーションの要件に対応する実装の選択です。さらに各テクノロジーは、別々の Web ユーザー・インターフェース機能をサポートするページ・タイプを定義します。それで Web ユーザー・インターフェースを作成する場合、各ページ・タイプがサポートする機能や、導入している Web アプリケーションのタイプに適しているかどうかを把握するのは重要なことです。以下のセクションでは、RAD 6.0 でそれぞれのページ・タイプがサポートしている Web ユーザー・インターフェースが示されていて、さらに Web アプリケーションに応じて静的、動的な Struts および JavaServer Faces (JSF) フレームワークで使用されるページ・タイプが明記されています。 サポートされるユーザー・インターフェース機能![]() Web ユーザー・インターフェースを実装するために RAD 6.0 で提供されているページ・タイプは、HTML、JSP、および Faces JSP の 3 つのカテゴリーにグループ化できます。JSP ページ・タイプは、単純 JSP ファイルと Struts JSP ページとにさらに分けられます。 さらに、Faces JSP ページ・タイプは、基本 Faces JSP か、クライアント・サイド・キャッシングを使用した Faces JSP のいずれかになります。それぞれのページ・タイプについて、以下で説明します。 HTML このページ・タイプを使用すると、基本的な HTML ページを作成し、他のマークアップ言語もサポートできます (「表 1 - ページ・タイプ・フィーチャー」を参照してください)。Frameset、Cascading Style Sheet、および JavaScript スクリプト記述などの標準的な HTML 機能もサポートされます。 加えて、このツールによってページ・テンプレートの定義と使用が可能になり、Web ページ全体にわたって一貫性のあるルック&フィールを作成できるようにサポートされます。 JSP JSP ページ・タイプは、JSP テクノロジーを使用してユーザー・インターフェースの実装をサポートすることを意図しています (RAD 6.0 は JSP 2.0 標準をサポートしています)。基本的な HTML ページのすべての機能が使用可能で、JSP スクリプト記述 (Java Scriptlet) およびアクション (Custom Tag) テクノロジーによって補われています。このツールを使用すると、JSP フラグメントの定義が可能で、必要に応じてページのある部分を他の JSP ページに含まれる別のファイルと見なすことができます。また、Service Data Object (SDO) テクノロジーを使用したバックエンド・データへのアクセスもサポートされます (SDO の説明については、「概念: Web アプリケーション・フレームワーク」を参照してください)。 Struts JSP Struts JSP ページは、自動的に Struts 固有の要素に対するサポートを組み込むことによって Simple JSP を拡張します (Struts の説明については、「概念: Web アプリケーション・フレームワーク」を参照してください)。Struts フレームワークを使用して実装されるアプリケーション用の Web ユーザー・インターフェースの導入に使用することが目的です。特に、このツールは Struts HTML (struts-html.tld) および Bean (struts-bean.tld) タグ・ライブラリーへのアクセスを自動的に組み込み、ActionForm Bean からページに直接フィールドを含めることができます。さらに、他の Struts ライブラリーを追加するオプションも可能です。 Faces JSP Faces JSP ページ・タイプは、JSF テクノロジーを使用して実装される Web ユーザー・インターフェース用に特に設計された JSP ページです (JSP の説明については、「概念: Web アプリケーション・フレームワーク」を参照してください)。JSF コア・タグ・ライブラリー、およびページ上にドラッグ・アンド・ドロップできる事前定義されたユーザー・インターフェース・コンポーネント (Faces コンポーネント) へのアクセスを提供します。加えて、Faces JSP は Java Snippet を使用したスクリプト記述をサポートしています。たとえば、Java Snippet はユーザー・インターフェース・コンポーネント・イベントの処理を指定します。 クライアント・サイド・キャッシングを使用した Faces JSP このページ・タイプは、クライアント・サイドにキャッシュされるデータを有するユーザー・インターフェース・コンポーネントを提供することによって Faces JSP を拡張します。特に、クライアント・サイド・キャッシングを使用すると、サーバー・サイドのデータとは対照的に、JavaScript 変数にコンポーネントをバインドできます。これにより、クライアントとサーバー間の往復の回数が減るので、一層効率的な Web ページを作成できます。以下の Faces クライアント・コンポーネントが提供されています。
以下の表には、各ページ・タイプでサポートされている機能が要約されているので、Web アプリケーションのユーザー・インターフェース要件を満たす最適のタイプを判別するガイドとして使用できます。
* SDO データ・アクセスには、導入ターゲットとして WAS v5.1 が必要です 表 1 - ページ・タイプのフィーチャー
Web アプリケーションの適用性
表 2 - ページ・タイプの適用性
ページ編集
Page Designer は、Web ページを編集するための RAD 6.0 内のツールです。このツールには主要なエディター・ビューがあり、様式に応じてページをビジュアル WYSIWYG またはテキスト・ベースのソース・コードで作成できます。このツールは他のビューと連動して作業を行い、他の Web ページ・タイプの導入をサポートします。特に、以下のビューはページ編集を行う上で大いに役立ちます。 [パレット] ビュー [パレット] ビューでは、ページにドロップできるすぐに使用可能な UI コンポーネントが数多く提供されています。それらを、機能上関連するコンポーネントごとグループ化して、ドロワーに編成します。たとえば、ボタン、テキスト・フィールド、およびドロップダウン・ボックスなどの標準的な HTML フォーム要素は [Form Tags] ドロワーにグループ化されます。[パレット] ビューに表示されるドロワーのリストは、編集しているページ・タイプによって異なります。表 3 には、サポートされる各ページ・タイプに表示されるデフォルト・ドロワーがリストされています。ドロワーおよびコンポーネントをそれぞれ追加、削除、隠蔽、または隠蔽解除して、パレットおよび多くのドロワーをカスタマイズできます。各ドロワーとそのデフォルト・コンテンツに関する説明は、製品資料を参照してください。
表 3 - ページ・タイプごとのデフォルト・パレット・ドロワー
[Quick Edit] ビュー このビューを使用すると、JavaScript コード断片を素早くページに追加できます。 ページ上のコンポーネントを選択すると、該当する使用可能なイベントのリストが、[Quick Edit] ビューの左ペインに表示されます。その後、イベントを選択して、以下のいずれかの方法でスクリプトを追加できます。
リソース
Web Site Designer と Page Designer の詳細については、製品資料を参照してください。
|
Rational Unified Process
|