トピック

概論 To top of page

RAD 6.0 における Web 導入環境では、Web ユーザー・インターフェースを素早く作成するための包括的な複数のツールが備えられています。これには、Web Site Designer および Page Designer、さらには複雑な Web ページを簡単に作成する多様なウィザードが含まれます。この資料では、こうしたツールを使用して Web ユーザー・インターフェースを効果的に作成する方法についてのガイドラインが提供されています。導入手法の説明、サポートされるページ・タイプについて、さらには Web ページの作成を支援する機能について取り上げられています。

導入手法 To top of page

直接 Page Designer を使用して、ユーザー・インターフェースに個々の Web ページを作成できますが、RAD 6.0 では Web Site Designer を開始点として使用するトップダウン導入手法が用いられています。Navigation エディターを使用すると、以下の事柄が可能です。

  • Web サイトのナビゲーション構造の定義:
  • Web サイトの構造を示す階層図を最初に作成します。[Site] ドロワーは [パレット] ビューで使用でき、新規または既存のページとプロジェクトを階層図にドラッグ・アンド・ドロップして、グループに編成することができます。このエディターを用いると、目に見える方法で簡単にページを追加、削除、さらには並べ替えることができます。ナビゲーション・ダイアグラムを作成すると、Web Site Designer は、Web ページ間のナビゲーション・リンクの追跡を自動的に識別して保持し、サイト・マップを作成できます。 後ほど、Page Designer を使用して個々のページを構成する際に、ナビゲーション・バーやメニューなどのナビゲーション要素を追加できます。サイト構造に基づいて、適切なリンクのみを表示するようカスタマイズできます (たとえば、トップ、親、兄弟、および最初の子へのリンクのみを表示できます)。

  • ページ・テンプレートの適用:
  • ページ・テンプレートはご使用のページすべてに共通のビジュアル要素とレイアウトを定義し、Web サイトで一貫性のあるルック&フィールを適用できるようにします。Web プロジェクトの作成中に、あるいは後ほど別の機会にウィザードを使用して、ページ・テンプレートを作成できます。Navigation エディターを使用すると、図中の選択したページまたはすべてのページにテンプレートを簡単に適用できます。ナビゲーション要素をテンプレートに含め、それをすべてのページに適用して Web サイト全体において一貫したナビゲーション制御を行えるようにするのが、提案されている優れた方法です。

  • 各 Web ページに使用するページ・タイプの選択:
  • ページをダブルクリックして、[Create a page] ウィザードを起動します。サポートされているページ・タイプ (「ページ・タイプの選択」を参照してください) のいずれかを選択し、最初のページ・プロパティーを指定して Page Designer エディターで開きます。 これで、Web ページ・コンテンツの構成と編集が可能です。[Web Site Navigation] ドロワーは、ナビゲーション要素をページにドラッグ・アンド・ドロップできる [パレット] ビューで自動的に使用可能になることに注意してください。

ページ・タイプの選択 To top of page

RAD 6.0 では、HTML、JSP、および Faces JSP テクノロジーを使用する、Web ユーザー・インターフェースの作成がサポートされています。それぞれは、異なるタイプの Web アプリケーションの要件に対応する実装の選択です。さらに各テクノロジーは、別々の Web ユーザー・インターフェース機能をサポートするページ・タイプを定義します。それで Web ユーザー・インターフェースを作成する場合、各ページ・タイプがサポートする機能や、導入している Web アプリケーションのタイプに適しているかどうかを把握するのは重要なことです。以下のセクションでは、RAD 6.0 でそれぞれのページ・タイプがサポートしている Web ユーザー・インターフェースが示されていて、さらに Web アプリケーションに応じて静的、動的な Struts および JavaServer Faces (JSF) フレームワークで使用されるページ・タイプが明記されています。

サポートされるユーザー・インターフェース機能 To top of page

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 クライアント・コンポーネントが提供されています。

  • データ・グリッド: リレーショナル・データ・ソースからのレコード、または JavaBean 配列からの要素を表に表示します。
  • グラフ: 棒グラフ、円グラフ、折れ線グラフにデータを示します。グラフを使用するには、Macromedia Flash プラグインがブラウザーにインストールされていないければなりません。
  • ツリー・ビュー: ツリー構造に階層データを表示します。
  • Web サービス: Faces ページで、ページをリフレッシュすることなく既存の Web サービスからデータを取り出すことができます。

以下の表には、各ページ・タイプでサポートされている機能が要約されているので、Web アプリケーションのユーザー・インターフェース要件を満たす最適のタイプを判別するガイドとして使用できます。

ページ・タイプ マークアップ言語 Cascading Style Sheet のサポート ページ・テンプレートのサポート XML スタイル構文 スクリプト記述サポート SDO データ・アクセス (*)
HTML

HTML 4.01

HTML 4.01 Frameset

Compact HTML 1.0

XHTML 1.0 または 1.1

XHTML 1.0 Frameset

WML 1.3

はい

はい

いいえ

はい

はい

いいえ

はい

いいえ

いいえ

はい

いいえ

いいえ

該当なし JavaScript 該当なし
JSP

HTML 4.01

HTML 4.01 Frameset

Compact HTML 1.0

XHTML 1.0 または 1.1

XHTML 1.0 Frameset

WML 1.3

はい

はい

いいえ

はい

はい

いいえ

はい

いいえ

いいえ

はい

いいえ

いいえ

いいえ

いいえ

いいえ

はい

はい

はい

JavaScript

Java Scriptlet

Custom Tag

はい
Struts JSP

HTML 4.01

HTML 4.01 Frameset

XHTML 1.0 または 1.1

XHTML 1.0 Frameset

はい

はい

はい

はい

はい

 

いいえ

はい

いいえ

いいえ

いいえ

はい

はい

JavaScript

Java Scriptlet

Custom Tag

はい
Faces JSP

HTML 4.01

XHTML 1.0 または 1.1

はい

はい

はい

はい

いいえ

はい

JavaScript

Java Scriptlet

Custom Tag

Java Snippet

はい
クライアント・サイド・キャッシングを使用した Faces JSP

HTML 4.01

XHTML 1.0 または 1.1

はい

はい

はい

はい

いいえ

はい

JavaScript

Java Scriptlet

Custom Tag

Java Snippet

Macromedia Flash

はい (クライアント・サイド・データ・キャッシングを使用)

* SDO データ・アクセスには、導入ターゲットとして WAS v5.1 が必要です

表 1 - ページ・タイプのフィーチャー

 

Web アプリケーションの適用性 To top of page


Web ユーザー・インターフェースの実装に使用するページ・タイプは、導入している Web アプリケーションのタイプにまず影響を受けます。静的な Web アプリケーションの場合、オプションには HTML ページ・タイプしかないので、選択は難しくありません。動的な Web アプリケーションの場合には、HTML と JSP ページの両方が使用可能です。さらに、Struts または JSF フレームワークを使用する動的 Web アプリケーションを導入している場合には、こうしたテクノロジーに固有のユーザー・インターフェース・ページ・タイプを使用することができます。そのようにすると、ツールが提供する特殊なサポートの利点を生かすことができますし、ユーザー・インターフェースを簡単に構成できます。 表 2 は、静的 Web アプリケーション、動的 Web アプリケーション、および Struts と JSF フレームワークを使用した Web アプリケーションに対する各ページ・タイプの適用性を示しています。

ページ・タイプ 静的 Web アプリケーション 動的 Web アプリケーション (フレームワーク・ベースではない) Struts Web アプリケーション JSF Web アプリケーション
HTML はい はい はい はい
JSP いいえ はい はい はい
Struts JSP いいえ いいえ はい (推奨) いいえ
Faces JSP いいえ いいえ はい (統合ライブラリーを使用) はい (推奨)
クライアント・サイド・キャッシングを使用した Faces JSP いいえ いいえ はい (統合ライブラリーを使用) はい (推奨)

表 2 - ページ・タイプの適用性

 

ページ編集 To top of page

Page Designer は、Web ページを編集するための RAD 6.0 内のツールです。このツールには主要なエディター・ビューがあり、様式に応じてページをビジュアル WYSIWYG またはテキスト・ベースのソース・コードで作成できます。このツールは他のビューと連動して作業を行い、他の Web ページ・タイプの導入をサポートします。特に、以下のビューはページ編集を行う上で大いに役立ちます。

[パレット] ビュー

[パレット] ビューでは、ページにドロップできるすぐに使用可能な UI コンポーネントが数多く提供されています。それらを、機能上関連するコンポーネントごとグループ化して、ドロワーに編成します。たとえば、ボタン、テキスト・フィールド、およびドロップダウン・ボックスなどの標準的な HTML フォーム要素は [Form Tags] ドロワーにグループ化されます。[パレット] ビューに表示されるドロワーのリストは、編集しているページ・タイプによって異なります。表 3 には、サポートされる各ページ・タイプに表示されるデフォルト・ドロワーがリストされています。ドロワーおよびコンポーネントをそれぞれ追加、削除、隠蔽、または隠蔽解除して、パレットおよび多くのドロワーをカスタマイズできます。各ドロワーとそのデフォルト・コンテンツに関する説明は、製品資料を参照してください。

パレット・ドロワー HTML JSP Struts JSP Faces JSP クライアント・サイド・キャッシングを使用した Faces JSP
HTML Tags X X X X X
Form Tags X X X    
Page Template X X X X X
Web Site Navigation X X X X X
Portal X X X X X
JSP Tags   X X X X
データ   X X X X
Faces Components       X X
Faces Client Components         X
Struts HTML Tags     X    
Struts Bean Tags     X    
Struts Logic Tags     X    
Struts Nested Tags     隠蔽    
Struts Tiles Tags     隠蔽    

表 3 - ページ・タイプごとのデフォルト・パレット・ドロワー

 

[Quick Edit] ビュー

このビューを使用すると、JavaScript コード断片を素早くページに追加できます。 ページ上のコンポーネントを選択すると、該当する使用可能なイベントのリストが、[Quick Edit] ビューの左ペインに表示されます。その後、イベントを選択して、以下のいずれかの方法でスクリプトを追加できます。

  • 右ペインのスクリプト・エディターに直接スクリプトを入力する。
  • スクリプト・エディターを右マウス・ボタンでクリックして、[Insert Snippet] を選択し、表示されるコンテキスト・ベースのリストから断片を 1 つ選ぶ。

リソース To top of page

Web Site DesignerPage Designer の詳細については、製品資料を参照してください。

  1. Rational Application Developer v6.0 を開始する。
  2. メニュー・バーで、[ヘルプ] > [Help Contents] を選択します。
  3. <[Developing Web Applications] を展開します。
  4. [Web Site Design] または [Web Page Design] を探します。



Rational Unified Process   2003.06.15