自訂AEM表單工作區簡介 introduction-to-customizing-aem-form-workspace
AEM表單工作區提供修改其介面的呈現語意和功能的功能。 以下說明用於變更樣式、版面、格式、品牌和核心功能的自訂型別。
自訂工作區的範例
自訂型別 types-of-customizations
AEM Forms工作區支援各種自訂,以更新使用者介面的版面、外觀、功能等。 自訂涉及更新下列一或多個專案:
- 使用者介面的外觀
- 使用語意自訂的功能
- 在其他應用程式中重複使用HTML元件
使用者介面變更 user-interface-changes
您可以變更AEM Forms工作區的外觀、版面配置和其他簡報語意。 自訂CSS、HTML範本和JavaScript™檔案以變更工作區。 預設安裝會提供所有預設檔案。
最常用的步驟包含在AEM Forms工作區自訂的一般步驟中。 如需這類自訂的特定範例,包括詳細步驟,請參閱本文結尾的相關文章。
瞭解樣式表 understanding-the-style-sheet
在自訂工作區之前,請熟悉AEM Forms所提供的預設樣式表,網址為/libs/ws/css/style.css。
若要自訂工作區,建議您熟悉/libs/ws/css資料夾中的現有樣式表style.css。 幾個主要元件說明如下。
CSS css
AEM Forms工作區的外觀會從CSS借用。 透過自訂CSS,您可以變更工作區的表現語意,例如字型、顏色、品牌和版面。
CSS自訂的頂層步驟為:
- 建立CSS檔案。
- 將樣式專案新增至此CSS。 如需詳細資訊,請參閱瞭解CSS樣式。
- 在
html.jsp
中更新其參考。
如需進行這些自訂的確切步驟,請參閱AEM Forms工作區自訂的一般步驟。 AEM Forms工作區隨附的CSS檔案位於/libs/ws/css/。 對於與CSS相關的自訂,請使用出貨套件。 如需CSS相關自訂的特定範例,請參閱本文結尾的相關說明主題。
影像 image
您可以自訂AEM Forms工作區,以新增使用者的頭像或新增組織的標誌。 對於這些自訂,請使用出貨套件。
影像自訂的最上層步驟為:
- 安裝及設定WebDAV。
- 新增影像。
- 新增與新增的影像對應的新樣式。
- 連結至
html.jsp
檔案中的新CSS檔案。
若要開始在AEM Forms工作區中自訂影像,請依照AEM Forms工作區自訂的一般步驟操作。 如需影像相關自訂的特定範例,請參閱本文結尾的相關說明主題。
HTML範本 html-template
HTML範本有助於定義工作區使用者介面的外觀和配置。 透過更新預設HTML範本,您可以自訂版面配置預設使用者介面。
HTML範本自訂的最上層步驟為:
- 在使用者建立的資料夾中,複製所需的預設檔案。
- 在使用者定義的資料夾中新增範本。
- 對複製的檔案進行相關更新,例如新範本的路徑。
如需此類自訂的特定範例,請參閱本文結尾提供的說明主題。 根據要自訂的範本,選擇出貨封裝或開發封裝。
語意變更 semantic-changes
若要修改AEM Forms工作區功能,請變更JavaScript原始碼。 核心功能中的修改會標示為語意變更。 您可以修改作為AEM Forms工作區原始程式碼的一部分提供的模型、檢視和範本。
進行語意變更以修改AEM Forms工作區功能的頂層步驟如下:
- 在使用者建立的資料夾中,複製適當的預設檔案。
- 在使用者定義的資料夾中新增模型和檢視。
- 進行相關更新,例如更新預設JavaScript檔案中新新增的模型和檢視的路徑。
- 將套件最小化,以最佳化效能。
如需原始程式碼中元件的詳細概念資訊,請參閱可重複使用元件的說明。 對於這些自訂,請使用開發套件。
可重複使用的元件 reusable-components
由於AEM Forms工作區是元件式軟體,因此可輕鬆自訂及重複使用。 您可以輕鬆地將工作區元件與網頁應用程式整合。
如需更多概念資訊,請參閱可重複使用元件的說明,如需使用這些元件的說明,請參閱在網頁應用程式中整合AEM Forms工作區元件。
建立AEM Forms工作區程式碼 building-html-workspace-code
SDK套件 sdk-package
此套件包含AEM Forms工作區的原始程式碼。 封裝位於[LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip
。
此範本主要用於自訂,因為它提供產生以下內容的功能:
- 出貨、偵錯和開發設定檔的CRX套件(在CRX套件中提到)。
- 自訂程式碼的縮製版本(用於語意變更)。
WS內容 ws-content
-
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-package
CRX套件可部署在CRX™存放庫上。 它在[LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip
可用。
此套件可使用下述的三個設定檔來建置。
出貨設定檔 ship-profile
命令 command
- mvn clean -P在Source套件的client-pkg資料夾上傳送安裝至使用者端。
- Ship profile命令僅能在64位元JVM上執行。
WS內容 ws-content-1
-
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
偵錯設定檔 debug-profile
命令 command-1
- mvn clean -P在client-pkg上偵錯安裝
- 偵錯設定檔命令僅能在64位元JVM上執行。
WS內容 ws-content-2
-
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
開發設定檔 dev-profile
命令 command-2
mvn clean -P在client-pkg上安裝開發
WS內容 ws-content-3
-
css — 包含style.css、ie.css和jqueri-ui.css。
-
影像 — 包含所有影像。
-
js:
-
libs — 包含AEM Forms工作區中使用的所有程式庫。
-
require - Contains require.js
-
江渡 — 包含jquery.ui.datepicker.ja.js
-
執行階段:
- 初始設定式 — 包含初始設定式.js和modelcontrollerpath.js。
- 模型 — 包含AEM Forms工作區中所有元件的模型。
- 路由 — 包含JavaScript檔案和HTML檔案,會在AEM Forms工作區中載入啟動程式、待辦事項、追蹤和偏好設定。
- 服務 — 包含用於AEM Forms工作區的service.js。
- 範本 — 包含所有範本,即AEM Forms工作區中所有元件的HTML檔案。
- util — 包含在AEM Forms工作區中使用的所有公用程式檔案(JavaScript)。
- 檢視 — 包含AEM Forms工作區中所有元件的檢視。
-
main.js
-
registry.js
-
router.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