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 對應會顯示在頁面區域中，此標題就會以 <span> 標記的形式新增到 UI 對應中，並會出現在該 UI 對應的頂端。
如果 UI 對應會顯示為區域對應，將忽略此標題。但仍然要依照標準，在 HTML 中包含 <title> 標記。

區域對應

當對應會顯示在區域中作為入口的一部分時，該 UI 對應必須要有框線，讓資訊「包含」在該區域中。

...
 			<body class="oraZoneMap">
...

頁面區域對應與蹦現視窗對應

UI 對應可以有各種不同的呈現方式。已套用下列標準來決定何時使用頁面區域 UI 對應以及何時使用蹦現視窗對應：

如果有序列中有多個 UI 對應，則一律使用「頁面區域」。
如果 UI 對應有許多輸入欄位，則一律使用「頁面區域」。
如果 UI 對應是「確認」類型的對話方塊，或是只有一或兩個輸入欄位，則使用「蹦現視窗」。

備註：「只有幾個輸入欄位」與「許多輸入欄位」之間的差別是選擇性的。最終決策應該由對話方塊設計者來決定。

錯誤訊息

輸入對應能夠向使用者顯示錯誤訊息。

...
<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 對應。按一下連結 (可見時) 會產生蹦現視窗警示，顯示長文字錯誤訊息。

標準版面配置和樣式

在 UI 對應上顯示資訊時，會利用 <table>，以資料列和資料欄的方式來組織資訊。

... 			
<table cellspacing="4" width="100%">
<colgroup>
<col class="oraLabel oraTableLabel" />
 			<col class="oraNormal oraTableData" />
 			</colgroup>
...

<colgroup> 和 <col> 標記可讓您將類別套用到資料欄上 (標籤位於第一欄，資料位於第二欄)。如果您使用這些標記，就不必為每個 <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 屬性會確保內嵌資料表可以跨越整個版面配置資料表中的標準兩資料欄。


...
<tr>
    <td colspan="2" class="oraEmbeddedTable">
    ...
    ...
    ...
    </td>
</tr>
...

內嵌資料表結構

內嵌資料表與基本版面配置資料表非常類似。

...
<table oraList="contactInformation" cellspacing="2">
<thead>
          ...
          ...
</thead>
<tbody>
          ...
          ...
</tbody>
</table>
...

<table> 標記具有稍小的儲存格間距，它會定義包含在 XML 中將用來提供資料的 "list" 元素。
<thead> 元素可用來提供內嵌資料表的資料欄標題。
<tbody> 元素是針對 XML 中每個參考的 "list"元素都會重複使用的元素。在上一個範例中，有兩個 "contactInformation" 列表元素，因此顯示的內嵌資料表將會有兩個資料列。

資料欄標題

內嵌資料表中應顯示的資料欄應該要有標題。<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>
...

有兩個新資料欄新增至輸入內嵌資料表中

oraType="addGridRow" 將會在資料列中新增 "+" 按鈕。讓使用者能夠在現有方格中新增其他資料列。
oraType="deleteGridRow" 將會在資料列中新增 "-" 按鈕。讓使用者能夠從方格中刪除現有資料列。

請注意：<thead> 標記也需要新增這兩個新資料欄。

依照標準，系統會以顯示的順序將這些控制項放置在資料列的開頭。如有需要，您可以省略其中任何一個控制項 (例如不允許使用者刪除資訊)。

只要有上述任何一個控制項，就會啟用「空白列表」處理。這表示如果 XML 中沒有所指定「列表」的資料時，輸入方格會顯示可供輸入新資訊的空白資料列。

動作按鈕

動作按鈕 HTML 範例

動作按鈕可用來執行 UI 對應中的某些指定函數。動作隨著所顯示/更新的資訊而有所不同。以下是兩個常見範例：

儲存：一般用於輸入 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> 元素。	`... <input class="oraButton" oraMdLabel="CANCEL_LBL" type="button" onClick="oraSubmitMap('CANCEL',false);"/> ...`
oraDisplayCell	套用至內嵌資料表的 <td> 標記。它會定義資料表儲存格的外觀 (而不是儲存格所包含資料的外觀)。	`... <td class="oraDisplayCell"> <span oraField="type"></span> </td> ...`
oraEmbeddedTable	套用至將會包含內嵌資料表的 <td> 標記。	`... <tr> <td colspan="2" class=" oraEmbeddedTable"> <table cellspacing="2"> ... ... ... </table> </td> </tr> ...`
oraError	此樣式會套用至被識別為「錯誤元素」的元素。如需詳細資訊，請參閱顯示錯誤。備註：此樣式通常不會直接在 UI 對應 HTML 中套用。
oraErrorText	此樣式會套用至與錯誤訊息有關的元素。	`... <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> ...`
oraGridColumnHeader	此樣式會套用至可定義內嵌資料表之資料欄標頭的 <td> 標記。	`... <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 > ...`
oraGridColumnHeaderButton	此樣式會套用至可定義用於可編輯內嵌資料表之 "+" 和 "-" 按鈕的資料欄標頭的 <td> 標記。	`... <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 > ...`
oraInput	此樣式會套用至輸入欄位： <input type="text"> <input type="checkbox"> <select> <textarea> 備註：此樣式通常可以省略，因為當 oraSchemaDataTypes="true" 時，系統會自動套用輸入樣式。	`... <input type="text" class="oraInput" oraField="address"/> ...`
oraInputMoney	此樣式會套用至輸入欄位： <input type="text"> <select> (罕見) <textarea> (不建議使用) 備註：此樣式通常可以省略，因為當 oraSchemaDataTypes="true" 時，系統會自動套用輸入樣式。	`... <input type="text" class="oraInputMoney" oraField="amount"/> ...`
oraInputNumber	此樣式會套用至輸入欄位： <input type="text"> <select> (罕見) <textarea> (不建議使用) 備註：此樣式通常可以省略，因為當 oraSchemaDataTypes="true" 時，系統會自動套用輸入樣式。	`... <input type="text" class="oraInputNumber" oraField="count"/> ...`
oraLabel	此樣式會套用至靠右對齊的標準標籤欄位。備註：此樣式通常可以省略，因為它會由 <col> 標記套用。	`... <td class="oraLabel" oraLabel="address"></td> ...`
oraLabelAlt	此樣式只有在希望標籤靠左對齊時才會套用至標準標籤欄位。	`... <td class="oraLabelAlt" oraLabel="address"></td> ...`
oraLabelCenter	此樣式只有在希望標籤的對齊方式為儲存格正中間置中時才會套用標準標籤欄位。	`... <td class="oraLabelCenter" oraLabel="address"></td> ...`
oraLink	此樣式僅套用至外來索引鍵參考 (連結)。UI 對應架構會自動新增此樣式，但如有需要也可以手動使用此樣式。	`... <td class="oraLabel"> <a href="www.google.com" class="oraLink">Google</a></td> ...`
oraNormal	此樣式會套用至靠左對齊的標準資料欄位 (僅顯示)。備註：此樣式通常可以省略，因為它會由 <col> 標記套用。	`... <td class="oraNormal" oraField="address"></td> ...`
oraNormalAlt	此樣式只有在希望資料靠右對齊時才會套用至標準資料欄位 (僅顯示)。	`... <td class=" oraNormalAlt" oraField="address"></td> ...`
oraNormalCenter	此樣式只有在希望資料的對齊方式為儲存格正中間置中時才會套用至標準資料欄位 (僅顯示)。	`... <td class=" oraNormalCenter" oraField="address"></td> ...`
oraPageTitle	此樣式會套用至包含頁面標題的元素。備註：此樣式通常不會直接在 UI 對應 HTML 中套用。<span> 是在頁面區域中顯示 UI 對應時，由 UI 對應架構所建立。	`... <span class=" oraPageTitle" oraMdField="PAGE_TITLE_LBL"></span> ...`
oraSectionEnd	此樣式會套用至 "section" (元素群組) 尾端的 <td> 標記。它提供一些空間，將該區段與接下來的資訊分隔。備註：此樣式必須套用至兩個 <td> 標記，否則標籤與資料/輸入可能會不對齊。	`... <tr> <td class="oraSectionEnd" oraLabel="zip"> </td> <td class="oraSectionEnd" oraField="zip"> </td> </tr> ...`
oraSectionHeader	此樣式會套用至用來在所顯示的資訊中提供區段標題的 <td> 標記。它在本身前後不會提供空間。這會使用 oraSectionStart 和 oraSectionEnd 類別。備註：區段標頭應該會跨越標籤欄和資料欄。	`... <tr> <td class="oraSectionHeader" colspan="2" oraMdField="DATA_SECTION_LBL"></td> </tr> ...`
oraSectionStart	此樣式會套用至 "section" (元素群組) 開頭的 <td> 標記。它提供一些空間，將該區段與先前的資訊 (通常是區段標頭) 分隔。備註：此樣式必須套用至兩個 <td> 標記，否則標籤與資料/輸入可能會不對齊。	`... <tr> <td class="oraSectionStart" oraLabel="zip"></td> <td class="oraSectionStart" oraField="zip"></td> </tr> ...`
oraTableData	此樣式會套用至主要資料表之資料欄 (第二欄) 的 <col> 標記。它是用來為用於資訊的水平間距提供寬度百分比。	`... <colgroup> <col class="oraLabel oraTableLabel"/> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTableLabel	此樣式會套用至主要資料表之標籤資料欄 (第一資料欄) 的 <col> 標記。它是用來為用於標籤的水平間距提供寬度百分比。	`... <colgroup> <col class="oraLabel oraTableLabel" /> <col class="oraNormal oraTableData"/> </colgroup> ...`
oraTinyText	此樣式通常會直接套用在 <input> 標記的下方，以向使用者提供與輸入相關的資訊或提示。例如，姓名或地址格式。	`... <tr> <td oraLabel="address"></td> <td> <input type="text" oraField="address"/> <div class="oraTinyText" oraField="addressFormatHint"></div> </td> </tr> ...`
oraZoneMap	當 UI 對應顯示為入口中的區域時，就會套用此樣式。	`... <body class="oraZoneMap"> ...`

使用 OJET

有些產品傳遞的 UI 對應使用由 Oracle JavaScript Extension Toolkit (OJET) 提供的 UI 小工具。OJET 的版次不一定與架構的版次一致。此外，有時 OJET 會調整產品所用的 API。架構會嘗試以確保產品的每個版次都有最新、最佳的 OJET 程式庫版本。不建議實作嘗試使用產品未用到的 OJET 功能，因為產品並不一定會測試這些功能，也無法確保這些功能之 API 的升級可回溯相容。

請注意，產品會將 OJET 的參考都隔離到使用 OJET 小工具之對應所包含的 UI 對應片段中。如此一來，未來 OJET 版本的變更都縮減到單一位置。該對應稱為 F1–OJETLIBS。如果您的實作要使用 OJET，我們建議您使用此 UI 對應片段。