UIマップの標準
内容
基本のUIマップ・テンプレート
すべてのUIマップは、配置(ページ領域、ゾーン、ポップアップ)や使用方法(表示専用、入力)に関係なく、同じ基本構造を共有します。
サンプルXML
このドキュメント内のすべての情報は、次のXML構造に基づいています。
<xml>
<root>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
<contactInformation>
<type>Home Phone</type>
<number>510-555-2287</number>
</contactInformation>
<contactInformation>
<type>Cell Phone</type>
<number>510-555-4285</number>
</contactInformation>
</root>
</xml>表示専用UIマップ
<html>
<head>
<title oraMdLabel="ADDRESS_LBL"></title>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body class="oraZoneMap">
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
<col class="oraNormal oraTableData" />
</colgroup>
<tr>
<td oraLabel="address"></td>
<td oraField="address"></td>
</tr>
<tr>
<td oraLabel="city"></td>
<td oraField="city"></td>
</tr>
<tr>
<td oraLabel="state"></td>
<td oraField="state"></td>
</tr>
<tr>
<td class="oraSectionEnd" oraLabel="zip"></td>
<td class="oraSectionEnd" oraField="zip"></td>
</tr>
<tr>
<td colspan="2" class="oraSectionHeader" oraMdLabel="CONTACT_LBL"></td>
</tr>
<tr>
<td colspan="2" class="oraSectionStart oraEmbeddedTable">
<table oraList="contactInformation" cellspacing="2">
<thead >
<tr>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/type></span>
</th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/number"></span>
</th>
</tr>
</thead >
<tbody>
<tr>
<td class="oraNormalAlt oraDisplayCell">
<span oraField="type"></span>
</td>
<td class="oraNormal oraDisplayCell">
<span oraField="number"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
<xml>
<root>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
<contactInformation>
<type>Home Phone</type>
<number>510-555-2287</number>
</contactInformation>
<contactInformation>
<type>Cell Phone</type>
<number>510-555-4285</number>
</contactInformation>
</root>
</xml>
</html>入力UIマップ
<html>
<head>
<title oraMdLabel="ADDRESS_LBL"></title>
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
</head>
<body>
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td><a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span></a>
</td>
</tr>
</table>
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
<col class="oraNormal oraTableData" />
</colgroup>
<tr>
<td oraLabel="address"></td>
<td><input type="text" oraField="address"/></td>
</tr>
<tr>
<td oraLabel="city"></td>
<td><input type="text" oraField="city"/></td>
</tr>
<tr>
<td oraLabel="state"></td>
<td><input type="text" oraField="state"/></td>
</tr>
<tr>
<td oraLabel="zip"></td>
<td><input type="text" oraField="zip"/></td>
</tr>
<tr>
<td colspan="2" class="oraSectionHeader" oraMdLabel="CONTACT_LBL"></td>
</tr>
<tr>
<td colspan="2" class="oraSectionStart oraEmbeddedTable">
<table oraList="contactInformation" cellspacing="2">
<thead >
<tr>
<th class="oraGridColumnHeaderButton"></th>
<th class="oraGridColumnHeaderButton"></th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/type></span>
</th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/number"></span>
</th>
</tr>
</thead >
<tbody>
<tr>
<td oraType="addGridRow"></td>
<td oraType="deleteGridRow"></td>
<td>
<input type="text" oraField="type"/>
</td>
<td>
<input type="text" oraField="number"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td colspan="2" class="oraSectionStart oraEmbeddedTable">
<table cellspacing="2">
<tr>
<td>
<input class="oraButton" oraMdLabel="C1_SAVE_LBL" type="button"
onClick="oraSubmitMap('OK');"/>
</td>
<td>
<input class="oraButton" oraMdLabel="CANCEL_LBL" type="button"
onClick="oraSubmitMap('CANCEL',false);"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
<xml>
<root>
<address>123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
<contactInformation>
<type>Home Phone</type>
<number>510-555-2287</number>
</contactInformation>
<contactInformation>
<type>Cell Phone</type>
<number>510-555-4285</number>
</contactInformation>
</root>
</xml>
</html>基本のHTMLおよびスタイル
基本テンプレートには、UIマップに使用する標準のHTMLおよびスタイルが導入されています。これらの標準について、次の各項で個別に説明します。
スタイルシート
標準の外観をマップに適用するスタイルはすべて、スタイルシートに含まれています。これらのスタイルシートは、すべてのUIマップに組み込まれます。
...
<link rel="stylesheet" type="text/css" href="cisDisabled.css"/>
<link rel="stylesheet" type="text/css" href="cisEnabled.css"/>
...タイトル
各UIマップには<title>タグがあります。
...
<title oraMdLabel="ADDRESS_LBL"></title>
...これによって、UIマップに説明的なタイトルが表示されます。
- UIマップがポップアップに表示される場合、タイトルはウィンドウのタイトル・バーに表示されます。
- UIマップがページ領域に表示される場合、タイトルはUIマップに<span>タグとして追加され、UIマップの最上部に表示されます。
- UIマップがゾーン・マップとして表示される場合、タイトルは無視されます。その場合でも、<title>タグは、HTMLに標準で組み込まれています。
ゾーン・マップ
マップがポータルの一部としてゾーンに表示される場合、UIマップには、情報がゾーン内に含まれる境界があります。
...
<body class="oraZoneMap">
...ページ領域マップとポップアップ・マップの比較
UIマップの表示は設計ごとに変更できます。ページ領域UIマップを使用する場合とポップアップ・マップを使用する場合を判断するために、次の基準が適用されています。
- 複数のUIマップが順番に存在する場合は、常にページ領域を使用します。
- UIマップに多数の入力フィールドがある場合は、常にページ領域を使用します。
- UIマップが確認タイプのダイアログの場合や、入力フィールドが1つか2つのみの場合は、ポップアップを使用します。
注意: 「少数の入力フィールド」と「多数の入力フィールド」の違いについては自由裁量です。最終判断はダイアログのデザイナに一任されます。
エラー・メッセージ
入力マップには、ユーザーにエラー・メッセージを表示する機能があります。
...
<table width="100%" cellpadding="12">
<tr class="oraErrorText">
<td><a href="" onclick="oraShowErrorAlert(); return false;">
<span class="oraErrorText" oraErrorVar="ERRMSG-TEXT"></span></a></td>
</tr>
</table>
...このHTML構造には、ユーザーにエラーを表示するために必要な要素と関数が用意されています。これは、<body>タグの直後にあります。エラーがない場合、UIマップには何も表示されません。エラーが発生し、UIマップがユーザーに再提示されると表示されます。リンクをクリックすると(表示される場合)、ポップアップ・アラートに長いエラー・メッセージ・テキストが表示されます。
標準のレイアウトおよびスタイル
情報は、行と列に編成するために、<table>を使用してUIマップに表示されます。
...
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
<col class="oraNormal oraTableData" />
</colgroup>
...<colgroup>タグと<col>タグによって、列へのクラスの適用が可能になります(ラベルは最初の列に表示され、データは2番目の列に表示されます)。これらのタグの使用は、各<td>でクラス属性(スタイルを適用する)を定義する必要がないことを意味します。
グリッド(データの表)
UIマップには、グリッドとして最適に表示される情報を含めることができます。これらは「埋込み表」と呼ばれます。埋込み表は、情報または入力情報を表示するために使用できます。
埋込み表のHTMLの例
埋込み表は、基本レイアウトの行(<tr>)内に組み込まれます。
...
<tr>
<td colspan="2" class="oraEmbeddedTable">
<table oraList="contactInformation" cellspacing="2">
<thead >
<tr>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/type></span>
</th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/number"></span>
</th>
</tr>
</thead >
<tbody>
<tr>
<td class="oraNormalAlt oraDisplayCell">
<span oraField="type"></span>
</td>
<td class="oraNormal oraDisplayCell">
<span oraField="number"></span>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
...
<xml>
<root>
<address> 123 Main St</address>
<city>Alameda</city>
<state>CA</state>
<zip>94770</zip>
<contactInformation>
<type>Home Phone</type>
<number>510-555-2287</number>
</contactInformation>
<contactInformation>
<type>Cell Phone</type>
<number>510-555-4285</number>
</contactInformation>
</root>
</xml>表の埋込み
埋込み表は、表構造全体の中に組み込まれます。colspan属性によって、レイアウト表全体のうち標準の2列を埋込み表の対象にできます。
...
<tr>
<td colspan="2" class="oraEmbeddedTable">
...
...
...
</td>
</tr>
...埋込み表の構造
埋込み表は、基本レイアウト表に非常に似ています。
...
<table oraList="contactInformation" cellspacing="2">
<thead>
...
...
</thead>
<tbody>
...
...
</tbody>
</table>
...- <table>タグのcellspacingは若干小さく、データの提供に使用されるXMLに含まれるリスト要素が定義されます。
- <thead>要素は、埋込み表の列見出しを表示するために使用されます。
- <tbody>要素は、XML内の各参照先のリスト要素に対して繰り返される要素です。前述の例では、2つの"contactInformation"リスト要素があるため、表示される埋込み表は2行になります。
列見出し
埋込み表の表示列には見出しが必要です。これらは<thead>タグによって定義されます。
...
<thead>
<tr>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/type></span>
</th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/number"></span>
</th>
</tr>
</thead>
..."nowrap"属性によって、列見出しが複数の行に分割されないようにします。複数の行が必要な場合は、"nowrap"を削除できます。
入力フィールド
埋込み表は、表示専用に加えて入力用にも使用できます。フレームワークには、編集可能な埋込み表の作成を支援する便利なコントロールが用意されています。
...
<tr>
<td colspan="2" class="oraEmbeddedTable">
<table oraList="contactInformation" cellspacing="2">
<thead >
<tr>
<th class="oraGridColumnHeaderButton"></th>
<th class="oraGridColumnHeaderButton"></th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/type></span>
</th>
<th class="oraGridColumnHeader" nowrap="nowrap">
<span oraLabel="contactInformation/number"></span>
</th>
</tr>
</thead >
<tbody>
<tr>
<td oraType="addGridRow"></td>
<td oraType="deleteGridRow"></td>
<td>
<input type="text" oraField="type"/>
</td>
<td>
<input type="text" oraField="number"/>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
...入力埋込み表に、2つの新しい列が追加されています。
- oraType="addGridRow"は、行に"+"ボタンを追加します。これによって、ユーザーは既存のグリッドに行を追加できます。
- oraType="deleteGridRow"は、行に"-"ボタンを追加します。これによって、ユーザーはグリッドから既存の行を削除できます。
注意: 追加する2つの新しい行には<thead>タグも必要です。
標準では、これらのコントロールは、示されている順序で行の先頭に配置されます。必要な場合(たとえば、ユーザーが情報の削除を許可されていない場合)は、いずれかのコントロールを省略できます。
これらのコントロールのいずれかが存在する場合は、"empty list"プロセスが有効になります。これは、XMLのリストにデータが指定されていない場合は、入力グリッドに空の行を表示して、新しい情報の入力に備えることを意味します。
処理ボタン
処理ボタンのHTMLの例
処理ボタンは、指定された特定の関数をUIマップから実行するために使用されます。処理は、表示/更新される情報と同様に多様です。次は、一般的な2つの例です。
- 保存。通常は、ユーザーが加えた変更を保存できるようにするために、入力UIマップで使用されます。
-
取消。通常は、ユーザーが進行中の変更を取り消すことができるようにするために、入力UIマップで使用されます。
...
<tr>
<td colspan="2" class=" oraEmbeddedTable">
<table cellspacing="2">
<tr>
<td>
<input class="oraButton" oraMdLabel="C1_SAVE_LBL" type="button"
onClick="oraSubmitMap('OK');"/>
</td>
<td>
<input class="oraButton" oraMdLabel="CANCEL_LBL" type="button"
onClick="oraSubmitMap('CANCEL',false);"/>
</td>
</tr>
</table>
</td>
</tr>
...ボタンの標準
次に、ボタンに関する標準をいくつか説明します。
- ボタンは埋込み表として組み込まれます。
- ボタンはまとめてグループ化する必要があります。UIマップの異なる領域にそれぞれ配置することはできません。
- ボタンの場所は、主にUIマップのタイプに応じて異なります。
- 表示専用UIマップでは、UIマップの右上に「レコード処理」セクションが必要です。
- 入力UIマップでは、UIマップの下部(すべての入力フィールドの下)にボタンが必要です。
使用可能なスタイル
スタイルはすべて、参照先CSSスタイルシートに含まれています。それらはHTMLの"class"属性によって適用されます。実際のスタイル設定は調整される場合があるため、ここには記載しません。この項では、特定のスタイルを使用する必要がある場合のみ明記します。
注意: "class"属性は複数のスタイルを参照できます(class="oraLabel oraSectionEnd")
| スタイル | コメント |
例 |
|---|---|---|
| oraButton | タイプがボタンの<input>要素に適用されます。 |
|
| oraDisplayCell | 埋込み表の<td>に適用されます。表のセルの外観(セル内に格納されるデータではなく)を定義します。 |
|
| oraEmbeddedTable | 埋込み表が含まれる<td>タグに適用されます。 |
|
| oraError | このスタイルは、エラー要素として識別される要素に適用されます。詳細は、「エラーの表示」を参照してください。
注意: 通常、このスタイルはUIマップのHTMLには直接適用されません
|
|
| oraErrorText | このスタイルは、エラー・メッセージに関する要素に適用されます。 |
|
| oraGridColumnHeader | このスタイルは、埋込み表内の列ヘッダーを定義する<td>タグに適用されます。 |
|
| oraGridColumnHeaderButton | このスタイルは、編集可能埋込みで使用される"+"および"-"ボタンの列ヘッダーを定義する<td>タグに適用されます。 |
|
| oraInput | このスタイルは、入力フィールドに適用されます。
注意: oraSchemaDataTypes="true"の場合は入力スタイルが自動的に適用されるため、通常は省略できます。
|
|
| oraInputMoney | このスタイルは、入力フィールドに適用されます。
注意: oraSchemaDataTypes="true"の場合は入力スタイルが自動的に適用されるため、通常は省略できます。
|
|
| oraInputNumber | このスタイルは、入力フィールドに適用されます。
注意: oraSchemaDataTypes="true"の場合は入力スタイルが自動的に適用されるため、通常は省略できます。
|
|
| oraLabel | このスタイルは、右揃えの標準のラベル・フィールドに適用されます。 注意: これは<col>タグによって適用されるため、通常は省略できます。
|
|
| oraLabelAlt | このスタイルは、ラベルを左揃えにする場合のみ、標準のラベル・フィールドに適用されます。 |
|
| oraLabelCenter | このスタイルは、ラベルをセルの中央揃えにする場合のみ、標準のラベル・フィールドに適用されます。 |
|
| oraLink | このスタイルは、外部キー参照(リンク)に適用されます。これはUIマップ・フレームワークによって自動的に追加されますが、必要に応じて手動で使用できます。 |
|
| oraNormal | このスタイルは、左揃えの標準のデータ・フィールド(表示専用)に適用されます。 注意: これは<col>タグによって適用されるため、通常は省略できます。
|
|
| oraNormalAlt | このスタイルは、データを右揃えにする場合のみ、標準のデータ・フィールド(表示専用)に適用されます。 |
|
| oraNormalCenter | このスタイルは、データをセルの中央揃えにする場合のみ、標準のデータ・フィールド(表示専用)に適用されます。 |
|
| oraPageTitle | このスタイルは、ページ・タイトルが含まれる要素に適用されます。 注意: 通常、このスタイルはUIマップのHTMLには直接適用されません。UIマップがページ領域に表示される場合は、UIマップ・フレームワークによって<span>が作成されます。
|
|
| oraSectionEnd | このスタイルは、セクション(要素のグループ)の最後の<td>タグに適用されます。次の情報からセクションを分離するためにスペースが挿入されます。 注意: 両方の<td>タグにスタイルを適用する必要があります。そうしないと、ラベルがデータ/入力と不整合になる場合があります。
|
|
| oraSectionHeader | このスタイルは、表示する情報内のセクションに見出しを表示するために<td>タグに適用されます。前後にスペースは挿入されません。これには、oraSectionStartクラスとoraSectionEndクラスが使用されます。 注意: セクション・ヘッダーはラベル列とデータ列の両方を対象とする必要があります。
|
|
| oraSectionStart | このスタイルは、セクション(要素のグループ)の最初の<td>タグに適用されます。前の情報(多くの場合、セクション・ヘッダー)からセクションを分離するためにスペースが挿入されます。 注意: 両方の<td>タグにスタイルを適用する必要があります。そうしないと、ラベルがデータ/入力と不整合になる場合があります。
|
|
| oraTableData | このスタイルは、主表のデータ列(2番目の列)の<col>タグに適用されます。情報に使用する水平方向のスペースに幅の割合を設定するために使用されます。 |
|
| oraTableLabel | このスタイルは、主表のラベル列(最初の列)の<col>タグに適用されます。ラベルに使用する水平方向のスペースに幅の割合を設定するために使用されます。 |
|
| oraTinyText | このスタイルは通常、入力に関する情報について、ユーザーに情報やヒントを提供するために<input>タグの直下に適用されます。たとえば、名前や住所の書式です。 |
|
| oraZoneMap | この関数は、UIマップがポータルにゾーンとして表示される場合に適用されます。 |
|
OJETの使用
製品には、Oracle JavaScript Extension Toolkit (OJET)によって提供されるUIウィジットを使用する特定のUIマップが用意されています。OJETのリリースは、フレームワークのリリースと常に一致しているとはかぎりません。また、OJETでは、製品が使用するAPIを調整している場合があります。フレームワークでは、製品の各リリースにOJETライブラリの最新かつ最良のバージョンを確保するよう試みています。実装では、製品で使用されていないOJETの機能の使用を試みないことをお薦めします。これは、製品では必ずしもこれらの機能がテストされておらず、これらの機能のためのAPIのアップグレードに下位互換性があることが保証されていないためです。
製品では、OJETへの参照を、OJETウィジェットを使用するマップに含まれているUIマップ・フラグメントに分離しています。これは、OJETの将来のバージョンへの変更を1箇所に最小化するためです。このマップはF1–OJETLIBSと呼ばれます。実装でOJETを使用する場合は、このUIマップ・フラグメントの使用をお薦めします。