AEM form workspace提供修改其介面的呈現語義和功能的功能。 以下說明可變更樣式、版面、格式、品牌和核心功能的自訂類型。
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相關的自訂,請使用 發運包. 如需CSS相關自訂的特定範例,請參閱本文結尾的相關說明主題。
您可以自訂AEM Forms工作區,以新增使用者的變身,或新增組織的標誌。 對於這些自訂項目,請使用 發運包.
自訂影像的頂層步驟為:
html.jsp
檔案。若要開始自訂AEM Forms工作區中的影像,請遵循 AEM Forms工作區自訂的一般步驟. 如需影像相關自訂的特定範例,請參閱本文結尾的相關說明主題。
HTML範本有助於定義工作區使用者介面的外觀和版面。 更新預設HTML範本後,您可以自訂版面預設使用者介面。
自訂HTML範本的頂層步驟為:
如需這類自訂的特定範例,請參閱本文結尾提供的說明主題。 在 發運包 或 開發套件,視要自訂的範本而定。
若要修改AEM Forms工作區功能,請變更JavaScript原始碼。 核心功能中的修改會標示為「語義變更」。 您可以修改作為AEM Forms工作區原始碼一部分提供的模型、檢視和範本。
進行語義變更以修改AEM Forms工作區功能的頂層步驟為:
如需原始碼中元件的詳細概念資訊,請參閱 可重複使用元件的說明. 對於這些自訂項目,請使用開發套件。
由於AEM Forms工作區是以元件為基礎的軟體,因此可輕鬆自訂及重複使用。 您可以輕鬆將工作區元件與網頁應用程式整合。
如需更多概念資訊,請參閱 可重複使用元件的說明 如需有關使用元件的說明,請參閱 將AEM Forms工作區元件整合至網頁應用程式.
套件包含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檔案的許可證,以及為這些許可證加上前置詞的代碼。
縮制器 — 用於自訂javascript程式碼的組合、縮制和縮制。
resourcejs_optimizer — 用於javascript來源的組合、縮制和升級。
resource_generator — 用於生成register.js和modelcontrollerpath.js。
執行階段:
main.js
router.js
libs/ws:pdf.html和pluginPing.pdf用於載入AEM Forms工作區中的PDF forms,而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和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
mvn clean -P Dev安裝在client-pkg上
css — 包含style.css、ie.css和jquery-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