自訂AEM表單工作區簡介

最後更新： 2024年7月14日
  • 適用對象：
  • Experience Manager 6.5
  • 主題：

建立對象：

  • 管理員
  • 使用者
  • 開發人員

AEM表單工作區提供修改其介面的呈現語意和功能的功能。 以下說明用於變更樣式、版面、格式、品牌和核心功能的自訂型別。

cu_customized_workspace_example

自訂工作區的範例

自訂型別

AEM Forms工作區支援各種自訂，以更新使用者介面的版面、外觀、功能等。 自訂涉及更新下列一或多個專案：

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

使用者介面變更

您可以變更AEM Forms工作區的外觀、版面配置和其他簡報語意。 自訂CSS、HTML範本和JavaScript™檔案以變更工作區。 預設安裝會提供所有預設檔案。

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

瞭解樣式表

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

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

CSS元素使用者介面元件已修改
#headerAEM Forms工作區的標頭
.categoryList類別清單
.categoryList .header類別清單的標題
.categories， .filters類別清單下方的空間
.category， .filter類別
.category：hover， .category.selected， .filter：hover， .filter.selected選取的類別並將滑鼠移至類別樣式上方
categoryListBar .tool， categoryListBar .content開始程式頁面（已關閉的類別清單）
filterListBar .tool， filterListBar .content待辦事項頁面（已關閉的篩選器清單）
processNameListBar .tool， processNameListBar .content追蹤頁面（已關閉的流程名稱清單）
.startPointList， .tasklist起點清單或任務清單
.startPointList .header， .tasklist .header起點清單或任務清單的標題
.startpoint.selected， .task.selected選取的起始點或任務
.startpoint.selected .description， .task.selected .description所選起點或任務的說明
#taskarea工作區域
#header .dropdown標題中的使用者下拉式清單
.sortDrop dd ul排序任務下拉式清單

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工作區元件。

建立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：

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

    • src/main/webapp -

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

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

      • js：

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

        • licenses — 包含HTML和JS檔案的授權，以及讓這些授權成為個別原始程式檔字首的程式碼。

        • minifier — 用於組合、縮制和升級customizedJavaScript程式碼。

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

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

        • 執行階段：

          • 初始設定式 — 包含用於初始化AEM Forms工作區中使用的骨幹檢視和模型的initializer.js。
          • 模型 — 包含AEM Forms工作區中所有元件的主幹模型。
          • 路由 — 包含JavaScript檔案和HTML檔案，會在AEM Forms工作區中載入啟動程式、待辦事項、追蹤和偏好設定。
          • 服務 — 包含用於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可用。

此套件可使用下述的三個設定檔來建置。

設定檔說明使用狀況
出貨設定檔此設定檔會使用縮制來建立儘可能最小的CRX套件。 此套件最有效率。 所有JavaScript™檔案會合併並縮製為單一JS檔案。當JS檔案中不需要進一步語意變更時，使用此設定檔。
偵錯設定檔此設定檔會建立中等效率的CRX套件。 套件的大小略大於使用「出貨」設定檔建立的套件。 此套件已將大部分JavaScript檔案合併為單一JS檔案。使用此設定檔進行偵錯。
開發設定檔此設定檔會建立最大可能大小的CRX套件。 所有JavaScript檔案都可單獨使用，因為它們位於SDK套件中。在合併語意變更時使用此設定檔。

出貨設定檔

命令

  • mvn clean -P在Source套件的client-pkg資料夾上傳送安裝至使用者端。
  • Ship profile命令僅能在64位元JVM上執行。

WS內容

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

  • 影像 — 包含所有影像。

  • js：

    • 程式庫：

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

    • 執行階段：

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

    • main.js （合併、縮小和放大）。

    • registry.js

  • 程式庫：

    • 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

  • 設定檔 — 包含offline.jsp。

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

偵錯設定檔

命令

  • mvn clean -P在client-pkg上偵錯安裝
  • 偵錯設定檔命令僅能在64位元JVM上執行。

WS內容

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

  • 影像 — 包含所有影像。

  • js：

    • 程式庫：

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

    • 執行階段：

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

    • main.js （結合）。

    • registry.js

  • 程式庫：

    • 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

  • 設定檔 — 包含offline.jsp。

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml