AEM表單工作區提供修改其介面之呈現語義和功能的功能。 變更樣式、版面、格式、品牌和核心功能的自訂類型如下所述。
AEM Forms工作區支援多種自訂設定,以更新使用者介面的版面、外觀、功能等。 這些定制包括更新以下一個或多個內容:
您可以變更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 |
排序任務下拉式清單 |
AEM Forms工作區的外觀是從CSS中借用其外觀。 透過自訂CSS,您可以變更工作區的呈現語義,例如字型、顏色、品牌和版面。
CSS自訂的頂層步驟為:
html.jsp
中更新其引用。如需完整的這些自訂步驟,請參閱「AEM Forms工作區自訂的一般步驟」。 AEM Forms工作區隨附的CSS檔案位於/libs/ws/css/。 對於與CSS相關的自訂,請使用Ship Package。 如需CSS相關自訂的特定範例,請參閱本文結尾的相關說明主題。
您可以自訂AEM Forms工作區,以新增使用者的變數,或新增組織的標誌。 對於這些定制,請使用Ship Package。
自訂影像的頂層步驟為:
html.jsp
檔案中的新CSS檔案。若要開始自訂AEM Forms工作區中的影像,請依照AEM Forms工作區自訂的一般步驟進行。 如需影像相關自訂的特定範例,請參閱本文結尾的相關說明主題。
HTML範本可協助定義工作區使用者介面的外觀和版面。 透過更新預設HTML範本,您可以自訂版面預設使用者介面。
自訂HTML範本的頂層步驟為:
如需此類自訂的特定範例,請參閱本文結尾提供的「說明」主題。 選擇Ship Package或Dev Package,視要自訂的範本而定。
若要修改AEM Forms工作區功能,請變更JavaScript原始碼。 核心功能中的修改會標示為「語義變更」。 您可修改AEM Forms工作區原始碼中提供的模型、檢視和範本。
進行語義變更以修改AEM Forms工作區功能的頂層步驟為:
有關屬於原始碼一部分的元件的更多概念性資訊,請參見可重複使用元件的說明。 對於這些自定義,請使用「開發包」。
由於AEM Forms工作區是以元件為基礎的軟體,因此可輕鬆自訂和重複使用。 您可輕鬆將工作區元件與您的Web應用程式整合。
如需概念性的詳細資訊,請參閱可重複使用的元件說明,如需使用元件的說明,請參閱將AEM Forms工作區元件整合在Web應用程式中。
套件包含AEM Forms工作區的原始碼。 此軟體包可在[*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip
獲得。
它主要用於定制,因為它提供了生成:
client-pkg:
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。
執行時期:
main.js
router.js
libs/ws:pdf.html和pluginPing.pdf用於在AEM Forms工作區中載入PDF表格,而WSNextAdapter.swf用於在AEM Forms工作區中載入SWF表格和參考線。
地區設定:
html.jsp
GET.jsp
CRX軟體包可部署在CRX™儲存庫上。 可在[*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip
取得。
此套件可使用下述三個描述檔來建立。
設定檔 | 說明 | 使用狀況 |
---|---|---|
出貨設定檔 | 此配置檔案使用精簡功能建立盡可能小的CRX包。 此套件最有效率。 所有JavaScript™檔案都會合併並精簡為單一JS檔案。 | 在JS檔案中不需要進一步的語義變更時,請使用此描述檔。 |
除錯設定檔 | 此配置檔案建立一個中等效率的CRX包。 套件的大小比使用「發運描述檔」建立的套件稍大。 此套件將大部分的JavaScript檔案結合為單一JS檔案。 | 使用此設定檔進行除錯。 |
開發設定檔 | 此配置檔案會建立最大大小的CRX包。 所有JavaScript檔案都是個別提供的,因為它們都位於SDK套件中。 | 在合併語義更改時使用此配置檔案。 |
css —— 包含style.css、ie.css和jquery-ui.css。
影像——包含所有影像。
js:
libs:
執行時期:
main.js(結合、精簡和增強)。
registry.js
libs:
地區——包含。content.xml。
地區設定:
索引——包含。content.xml
profile —— 包含offline.jsp。
GET.jsp
html.jsp
content.xml
_rep_policy.xml
css —— 包含style.css、ie.css和jqueri-ui.css。
影像——包含所有影像。
js:
libs:
執行時期:
main.js(結合)。
registry.js
libs:
地區——包含。content.xml。
地區設定:
索引——包含。content.xml
profile —— 包含offline.jsp。
GET.jsp
html.jsp
content.xml
_rep_policy.xml
mvn clean -P Dev安裝在client-pkg上
css —— 包含style.css、ie.css和jqueri-ui.css。
影像——包含所有影像。
js:
libs —— 包含AEM Forms工作區中使用的所有程式庫。
require —— 包含require.js
jqueryui —— 包含jquery.ui.datepicker.ja.js
執行時期:
main.js
registry.js
router.js
libs:
地區——包含。content.xml。
地區設定:
索引——包含。content.xml
profile —— 包含offline.jsp。
GET.jsp
html.jsp
content.xml
_rep_policy.xml