在HTML5表單中建立自訂外觀

您可以將自訂Widget插入MobileForms。您可以擴充現有的jQuery Widget，或使用外觀架構開發您自己的自訂Widget。 XFA引擎使用各種Widget，如需詳細資訊，請參閱最適化和HTML5表單的外觀架構。

的範例圖： 預設和自訂介面工具集的範例

將自訂Widget與HTML5表單整合

您可以建立描述檔或選擇現有的描述檔以新增自訂介面工具集。有關建立配置檔案的詳細資訊，請參閱建立自定義配置檔案。

HTML5表格提供Widget架構的實作，可加以擴充以建立新Widget。實作是jQuery Widget abstractWidget，可擴充以編寫新Widget。只有延伸／覆寫下列功能，才能讓新介面工具集運作。

函式／類	說明
渲染	render函式返回構件的預設HTML元素的jQuery對象。預設的HTML元素應為可聚焦類型。例如，<a>、<input>和<li>。傳回的元素會用作$userControl。如果$userControl指定上述限制，則AbstractWidget類的函式如預期般運作，否則某些常見API（焦點、按一下）需要變更。
getEventMap	傳回將HTML事件轉換為XFA事件的地圖。 { blur:XFA_EXIT_EVENT, }此範例顯示模糊是HTML事件，XFA_EXIT_EVENT是對應的XFA事件。
getOptionsMap	傳回地圖，其中提供選項變更時要執行的動作的詳細資訊。鍵是提供給介面工具集的選項，值是每當偵測到該選項的變更時所呼叫的函式。介面工具集為所有常用選項（value和displayValue除外）提供處理常式
getCommitValue	每當Widget的值儲存在XFAModel中時（例如，在textField的exit事件上）,Widget架構就會載入函式。實作應傳回儲存在介面工具集中的值。處理常式會隨附選項的新值。
showValue	依預設，在XFA中，輸入事件時，會顯示欄位的rawValue。此函式被呼叫，以向使用者顯示rawValue。
showDisplayValue	依預設，在退出事件時的XFA中，會顯示欄位的formattedValue。調用此函式可向用戶顯示formattedValue。

若要建立您自己的介面工具集，請在上述建立的描述檔中，包含JavaScript檔案的參考，其中包含覆寫的函式和新增的函式。例如，sliderNumericFieldWidget是數值欄位的介面工具集。若要在頁首區段中使用描述檔中的介面工具集，請加入下列行：

window.formBridge.registerConfig("widgetConfig" , widgetConfigObject);

當自訂介面工具集程式碼準備就緒時，請使用registerConfig表單Bridge的API，向指令碼引擎註冊介面工具集。它以widgetConfigObject為輸入。

window.formBridge.registerConfig("widgetConfig",
        {
        ".<field-identifier>":"<name-of-the-widget>"
        }
    );

介面工具集設定是以JSON物件（索引鍵值配對的集合）提供，其中索引鍵識別欄位，而值代表要搭配這些欄位使用的介面工具集。範例配置如下所示：

*{*

*“identifier1” : “customwidgetname”,  
“identifier2” : “customwidgetname2”,  
..  
}*

其中，「identifier」是jQuery CSS選擇器，代表特定欄位、特定類型的欄位集或所有欄位。以下列出不同情況下識別碼的值：

識別碼類型	識別碼	說明
具有名稱欄位名的特定欄位	識別碼："div.fieldname"	所有名稱為「fieldname」的欄位都會使用介面工具集呈現。
所有類型為「type」的欄位（其中類型為NumericField、DateField等）。:	識別碼："div.type"	對於Timefield和DateTimeField，類型為textfield，因為不支援這些欄位。
所有欄位	識別碼："div.field"