在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);

使用XFA指令碼引擎註冊自訂Widget 

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

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

widgetConfigObject

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

*{*

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

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

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

本頁內容

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now