文件AEM 6.4Forms 指南

最適化和HTML5表單的外觀架構 appearance-framework-for-adaptive-and-html-forms

Last update: Thu May 04 2023 00:00:00 GMT+0000 (Coordinated Universal Time)

建立對象：

  • 使用者
CAUTION
AEM 6.4已結束延伸支援，本檔案不再更新。 如需詳細資訊，請參閱 技術支援期. 尋找支援的版本 此處.

Forms(適用性表單和HTML5表單)使用 jQuery, 骨幹.js 和 Underscore.js 用於外觀和指令碼的庫。 表單也使用 jQuery UI 介面工具集 表單中所有互動式元素（例如欄位和按鈕）的架構。 此架構可讓表單開發人員在Forms中使用一組豐富的可用jQuery Widget和外掛程式。 您也可以實作表單特定邏輯，同時從使用者（例如leadDigits/trailDigits限制）擷取資料或實作圖片子句。 表單開發人員可建立並使用自訂的特色，以改善資料擷取體驗，並讓其更方便使用。

本文適用於對jQuery和jQuery Widget有充分了解的開發人員。 它提供外觀架構的洞察力，並可讓開發人員為表單欄位建立替代外觀。

外觀框架依賴各種選項、事件（觸發器）和函式來捕獲用戶與表單的交互，並響應模型更改以通知最終用戶。 此外：

  • 框架提供一組用於欄位外觀的選項。 這些選項為機碼值組，分為兩個類別：常用選項和欄位類型特定選項。
  • 在合約中，外觀會觸發一組事件，例如進入和退出。
  • 實施一組函式時需要外觀。 有些函式是常見的，有些則是欄位類型函式專用的。

常見選項 common-options

以下是設定的全域選項。 這些選項適用於每個欄位。

屬性
說明
名稱
用於在指令碼表達式中指定此對象或事件的標識符。 例如，此屬性指定主機應用程式的名稱。
值
欄位的實際值。
displayValue
隨即顯示欄位的此值。
screenReaderText
螢幕Reader使用此值提供欄位的相關資訊旁白。 表單會提供值，您可以覆寫值。
tabIndex
欄位在表單的索引標籤序列中的位置。 僅當要更改表單的預設頁簽順序時，才覆蓋tabIndex。
角色
元素的角色，例如標題或表。
高度
介面工具集的高度。 以像素指定。
寬度
介面工具集的寬度。 以像素指定。
存取
用於訪問容器對象（如子表單）的內容的控制項。
paraStyles
Widget的XFA元素的para屬性。
dr
文字的方向。 可能的值為ltr（從左到右）和rtl（從右到左）。

除了這些選項外，框架還提供了一些其他選項，這些選項會根據欄位類型而有所不同。 欄位特定選項的詳細資訊列於下方。

與表單架構互動 interaction-with-forms-framework

若要與表單架構互動，Widget會觸發某些事件，讓表單指令碼可運作。 如果介面工具集未擲回這些事件，則在該欄位表單中撰寫的某些指令碼將無法運作。

由介面工具集觸發的事件 events-triggered-by-widget

Event
說明
XFA_ENTER_EVENT
每當欄位聚焦時，就會觸發此事件。 它可讓「enter」指令碼在欄位上執行。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_ENTER_EVENT)
XFA_EXIT_EVENT
每當使用者離開欄位時，就會觸發此事件。 它可讓引擎設定欄位的值，並執行其「退出」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_EXIT_EVENT)
XFA_CHANGE_EVENT
觸發此事件是為了讓引擎執行寫入欄位的「變更」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CHANGE_EVENT)
XFA_CLICK_EVENT
只要按一下欄位，就會觸發此事件。 它可讓引擎執行寫入欄位的「點按」指令碼。 觸發事件的語法為
（介面工具集）。_trigger(xfalib.ut.XfaUtil.prototype.XFA_CLICK_EVENT)

由介面工具集實作的API apis-implemented-by-widget

外觀框架調用了在自定義Widget中實現的Widget的一些功能。 介面工具集必須實作下列函式：

函數
說明
重點：function()
專注於現場。
按一下：function()
將焦點放在欄位上，並呼叫XFA_CLICK_EVENT。

markError:function(errorMessage, errorType)

錯誤消息：字串 代表錯誤
errorType:字串("warning"/"error")

附註:僅適用於HTML5表單。

傳送錯誤訊息和錯誤類型至介面工具集。 介面工具集會顯示錯誤。

clearError:function()

附註:僅適用於HTML5表單。

若欄位中的錯誤已修正，則呼叫。 介面工具集會隱藏錯誤。

欄位類型的特定選項 options-specific-to-type-of-field

所有自訂Widget都應符合上述規格。 若要使用不同欄位的功能，介面工具集必須符合該特定欄位的准則。

文本編輯：文字欄位 textedit-text-field

選項
說明
多線
如果欄位支援輸入新行字元，則為true，否則為false。
maxChars
可在欄位中輸入的字元數上限。

limitLengthToVisibleArea

附註:僅適用於HTML5表單

指定當文本寬度超過介面工具集的寬度時的文本欄位行為。

ChoiceList:DropDownList, ListBox choicelist-dropdownlist-listbox

選項
說明
值
所選值的陣列。
項目
要顯示為選項的對象陣列。 每個物件都包含兩個屬性 —
儲存：要保存的值，顯示：值。

可編輯

附註:僅適用於HTML5表單。

如果值為true，則會在介面工具集中啟用自訂文字輸入。
displayValue
要顯示的值陣列。
多選
如果允許多個選取，則為true，否則為false。

API api

函數
說明
addItem: function(itemValues)
itemValues:包含顯示和儲存值的物件
{sDisplayVal: <displayvalue>, sSaveVal: <save value="">}
將項目新增至清單。
deleteItem :函式(nIndex)
索引：要從清單中刪除的項的索引
從清單中刪除選項。
clearItems: function()
清除清單中的所有選項。

數值編輯：數值欄位，小數欄位 numericedit-numericfield-decimalfield

選項
說明
dataType
代表欄位資料類型的字串（整數/小數）。
leadDigits
小數位數中允許的最大前導位數。
fracDigits
小數位數中允許的最大小數位數。
零
字串表示在欄位的地區中為零。
小數
字串表示欄位地區中小數的字串。

CheckButton:RadioButton, CheckBox checkbutton-radiobutton-checkbox

選項
說明
values

值陣列（開/關/中性）。

它是checkButton不同狀態的值陣列。 值[0]是狀態為ON時的值，值[1]是狀態為OFF時的值，
values[2]是狀態為NEUTRAL時的值。 值陣列的長度等於state選項的值。

國家

允許的狀態數。

兩個適用於最適化表單（開啟、關閉），三個適用於HTML5個表單（開啟、關閉、中性）。

狀態

元素的目前狀態。

兩個適用於最適化表單（開啟、關閉），三個適用於HTML5個表單（開啟、關閉、中性）。

DateTimeEdit:（日期欄位） datetimeedit-datefield

選項
說明
天
該欄位本地化的天數名稱。
個月
該欄位的本地化月份名稱。
零
數字0的本地化文本。
clearText
清除按鈕的本地化文字。
recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da