自訂AEM表單工作區簡介

AEM表單工作區提供修改其介面之呈現語義和功能的功能。 變更樣式、版面、格式、品牌和核心功能的自訂類型如下所述。

自訂類型

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工作區的頁首
.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相關自訂，請使用 Ship Package。 如需CSS相關自訂的特定範例，請參閱本文結尾的相關說明主題。

影像

您可以自訂AEM Forms工作區，以新增使用者的變數，或新增組織的標誌。 對於這些自訂項目，請使 用Ship Package。

自訂影像的頂層步驟為：

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

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

HTML範本

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

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

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

如需此類自訂的特定範例，請參閱本文結尾提供的「說明」主題。 根據要自 訂的範本 ，選擇「發 運套件」或「開發套件」。

語義變化

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

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

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

如需屬於原始碼一部分的元件的詳細概念資訊，請參閱可重 復使用元件的說明。 對於這些自定義，請使用「開發包」。

可重複使用的元件

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

如需更多概念資訊，請參閱「可重 復使用元件的說明 」，以及如需使用元件的說明，請參閱「在Web應用程式中整 合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:

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

  • src/main/webapp -

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

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

    • js:

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

      • 授權——包含HTML和JS檔案的授權，以及將這些授權首碼放在個別來源檔案的程式碼。

      • Minifier —— 用於自訂Javascript程式碼的組合、精簡和醜化。

      • resourcejs_optimizer —— 用於Javascript來源的組合、精簡和優化。

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

      • 執行時期：

        • 初始設定式——包含用來初始化AEM Forms工作區中主幹檢視和模型的初始設定式。js。
        • 模型——包含AEM Forms工作區中所有元件的骨幹模型。
        • routes —— 包含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表格，而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 Ship install on client-pkg folder of Source package shipped to client.
• 發運配置檔案命令執行僅在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和jqueri-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和jqueri-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工作區中載入開始程式、工作、追蹤和偏好設定。
    • 服務——包含用於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