自訂AEM表單工作區簡介

AEM form workspace提供修改其介面的呈現語義和功能的功能。 以下說明可變更樣式、版面、格式、品牌和核心功能的自訂類型。

自定義類型

AEM Forms工作區支援多種自訂功能，以更新使用者介面的版面、外觀、功能等。 這些自訂項目包括更新下列其中一或多個項目：

• 用戶介面的外觀
• 使用語義自定義的功能
• 在其他應用程式中重複使用HTML元件

用戶介面更改

您可以變更AEM Forms工作區的外觀、版面配置和其他呈現語意。 透過自訂CSS、HTML範本和JavaScript™檔案來變更工作區。 所有預設檔案都在預設安裝中提供。

最常適用的步驟在AEM Forms工作區自訂的一般步驟中涵蓋。 如需這類自訂的特定範例，包括詳細步驟，請參閱本文結尾的相關文章。

了解樣式表

在自訂工作區之前，請詳閱AEM Forms提供的預設樣式表，網址為/libs/ws/css/style.css。

若要自訂工作區，建議您熟悉位於/libs/ws/css資料夾中的現有樣式表style.css。 以下說明幾個顯著元件。

CSS

AEM Forms工作區的外觀借用了CSS的外觀。 通過自定義CSS，您可以更改工作區的演示語義，如字型、顏色、品牌和佈局。

CSS自訂的頂層步驟為：

• 建立CSS檔案。
• 新增樣式項目至此CSS。 如需詳細資訊，請參閱了解CSS樣式。
• 在html.jsp中更新其引用。

如需這些自訂的確切步驟，請參閱AEM Forms工作區自訂的一般步驟。 AEM Forms工作區隨附的CSS檔案位於/libs/ws/css/。 有關與CSS相關的定製，請使用發運包。 如需CSS相關自訂的特定範例，請參閱本文結尾的相關說明主題。

影像

您可以自訂AEM Forms工作區，以新增使用者的變身，或新增組織的標誌。 對於這些自定義項，請使用發運包。

自訂影像的頂層步驟為：

• 安裝和配置WebDAV。
• 新增影像。
• 新增與新增的影像對應的新樣式。
• 連結至html.jsp檔案中的新CSS檔案。

若要開始自訂AEM Forms工作區中的影像，請遵循AEM Forms工作區自訂的一般步驟。 如需影像相關自訂的特定範例，請參閱本文結尾的相關說明主題。

HTML範本

HTML範本有助於定義工作區使用者介面的外觀和版面。 更新預設的HTML範本後，您可以自訂版面預設使用者介面。

自訂HTML範本的頂層步驟為：

• 在用戶建立的資料夾中，建立所需預設檔案的副本。
• 在使用者定義的資料夾中新增範本。
• 對複製的檔案（如新範本的路徑）進行相關更新。

如需這類自訂的特定範例，請參閱本文結尾提供的說明主題。 根據要自定義的模板，在發運包或開發包之間進行選擇。

語義更改

若要修改AEM Forms工作區功能，請變更JavaScript原始碼。 核心功能中的修改會標示為「語義變更」。 您可以修改作為AEM Forms工作區原始碼一部分提供的模型、檢視和範本。

進行語義變更以修改AEM Forms工作區功能的頂層步驟為：

• 在用戶建立的資料夾中，建立相應預設檔案的副本。
• 在用戶定義的資料夾中添加新模型和視圖。
• 進行相關更新，例如更新預設JavaScript檔案中新增模型和檢視的路徑。
• 縮小套件以最佳化效能。

有關屬於原始碼一部分的元件的詳細概念資訊，請參閱可重複使用元件的說明。 對於這些自訂項目，請使用開發套件。

可重複使用的元件

由於AEM Forms工作區是以元件為基礎的軟體，因此可輕鬆自訂及重複使用。 您可以輕鬆將工作區元件與網頁應用程式整合。

有關更多概念資訊，請參閱可重複使用元件的說明和有關使用元件的說明，請參閱將AEM Forms工作區元件整合到Web應用程式。

建立AEM Forms工作區程式碼

SDK套件

套件包含AEM Forms工作區的原始碼。 此包在[*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip處可用。

主要用於自訂，因為它提供產生下列內容的功能：

• 發運、偵錯和開發設定檔的CRX套件（CRX套件中提及）。
• 自訂程式碼的縮製版本（用於語義變更）。

WS內容

• client-pkg:

  • src — 包含建立CRX節點所需的成品。
  • pom.xml — 為各種配置檔案生成部署包的指令碼WS-Deploy包

• client-html:

  • assembly — 包含指令碼用於建立AEM Forms工作區SDK的zip.xml。

  • src/main/webapp -

    • css — 包含AEM Forms工作區的樣式表。

    • 影像 — 包含AEM Forms工作區中使用的影像。

    • js:

      • libs — 包含AEM Forms工作區中使用的所有協力廠商程式庫。

      • 許可證 — 包含HTML和JS檔案的許可證，以及為這些許可證加上前置詞的代碼。

      • 縮制器 — 用於自訂javascript程式碼的組合、縮制和縮制。

      • resourcejs_optimizer — 用於javascript來源的組合、縮制和升級。

      • resource_generator — 用於生成register.js和modelcontrollerpath.js。

      • 執行階段：

        • 初始值設定項 — 包含初始化主幹視圖和AEM Forms工作區中使用的模型時使用的初始值設定項.js。
        • 模型 — 包含AEM Forms工作區中所有元件的骨幹模型。
        • routes — 包含javascript檔案和HTML檔案，這些檔案會在AEM Forms工作區中載入啟動程式、todo、追蹤和偏好設定。
        • 服務 — 包含AEM Forms工作區中使用的service.js。 所有伺服器呼叫都是透過service.js進行。
        • 範本 — 包含AEM Forms工作區中所有檢視的所有範本，即HTML檔案。
        • util — 包含AEM Forms工作區中使用的所有公用程式檔案(javascript)。
        • 檢視 — 包含AEM Forms工作區中所有元件的骨幹檢視。

      • main.js

      • router.js

    • libs/ws:pdf.html和pluginPing.pdf用於載入AEM Forms工作區中的PDF forms，而WSNextAdapter.swf用於載入AEM Forms工作區中的SWF表單和參考線。

    • 區域設定：

      • de-DE — 包含德文版的translation.json 。
      • en-US — 包含英文的translation.json 。
      • fr-FR — 包含法文的translation.json 。
      • ja-JP — 包含日文版的translation.json。
      • html.jsp — 包含用於查找當前瀏覽器區域設定的代碼。

    • html.jsp

    • GET.jsp

CRX包

CRX套件可部署在CRX™存放庫上。 可在[*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip取得。

可使用下列三個設定檔來建立此套件。

發運配置檔案

命令

• mvn clean -P發運安裝在發運到客戶端的源包的client-pkg資料夾上。
• 發運配置檔案命令僅在64位JVM上工作。

WS內容

• css — 包含style.css、ie.css和jquery-ui.css。

• 影像 — 包含所有影像。

• js:

  • libs:

    • require — 包含require.js。
    • jqueryui — 包含jquery.ui.datepicker.ja.js。

  • 執行階段：

    • 範本 — 包含所有範本，即AEM Forms工作區中所有元件的HTML檔案。

  • main.js（結合、縮制和縮制）。

  • registry.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 地區 — 包含.content.xml。

• 區域設定：

  • de-DE — 包含德文版的translation.json 。
  • en-US — 包含英文的translation.json 。
  • fr-FR — 包含法文的translation.json 。
  • ja-JP — 包含日文版的translation.json。
  • html.jsp — 包含用於查找當前瀏覽器區域設定的代碼。

• 索引 — 包含.content.xml

• profile — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

調試配置檔案

命令

• mvn clean -P在client-pkg上安裝調試
• 調試配置檔案命令僅在64位JVM上工作。

WS內容

• css — 包含style.css、ie.css和jquery-ui.css。

• 影像 — 包含所有影像。

• js:

  • libs:

    • require — 包含require.js。
    • jqueryui — 包含jquery.ui.datepicker.ja.js。

  • 執行階段：

    • 範本 — 包含所有範本，即AEM Forms工作區中所有元件的HTML檔案。

  • main.js（結合）。

  • registry.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 地區 — 包含.content.xml。

• 區域設定：

  • de-DE — 包含德文版的translation.json 。
  • en-US — 包含英文的translation.json 。
  • fr-FR — 包含法文的translation.json 。
  • ja-JP — 包含日文版的translation.json。
  • html.jsp — 包含用於查找當前瀏覽器區域設定的代碼。

• 索引 — 包含.content.xml

• profile — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml

開發配置檔案

命令

mvn clean -P Dev安裝在client-pkg上

WS內容

• css — 包含style.css、ie.css和jquery-ui.css。

• 影像 — 包含所有影像。

• js:

  • libs — 包含AEM Forms工作區中使用的所有程式庫。

  • require — 包含require.js

  • jqueryui — 包含jquery.ui.datepicker.ja.js

  • 執行階段：

    • 初始值設定項 — 包含初始值設定項.js和modelcontrollerpath.js。
    • 模型 — 包含AEM Forms工作區中所有元件的模型。
    • routes — 包含javascript檔案和HTML檔案，這些檔案會在AEM Forms工作區中載入啟動程式、todo、追蹤和偏好設定。
    • 服務 — 包含AEM Forms工作區中使用的service.js。
    • 範本 — 包含所有範本，即AEM Forms工作區中所有元件的HTML檔案。
    • util — 包含AEM Forms工作區中使用的所有公用程式檔案(JavaScript)。
    • 檢視 — 包含AEM Forms工作區中所有元件的檢視。

  • main.js

  • registry.js

  • router.js

• libs:

  • ws — 包含pluginPing.pdf、pdf.html和WSNextAdapter.swf。

• 地區 — 包含.content.xml。

• 區域設定：

  • de-DE — 包含德文版的translation.json 。
  • en-US — 包含英文的translation.json 。
  • fr-FR — 包含法文的translation.json 。
  • ja-JP — 包含日文版的translation.json。
  • html.jsp — 包含用於查找當前瀏覽器區域設定的代碼。

• 索引 — 包含.content.xml

• profile — 包含offline.jsp。

• GET.jsp

• html.jsp

• content.xml

• _rep_policy.xml