建立和使用主題 creating-and-using-themes

簡介 introduction

您可以建立並套用主題，使最適化表單或互動式通訊風格化。 主題包含元件和面板的樣式詳細資料。 樣式包括背景顏色、狀態顏色、透明度、對齊方式和大小等屬性。 應用主題時，指定的樣式會反映在相應的元件上。 主題是獨立管理的，不參考最適化表單或互動式通訊。

您可以：

建立、下載或上傳主題 creating-downloading-or-uploading-a-theme

使用AEM Forms，您可以建立、下載或上傳主題。 主題的建立方式與其他資產（如表單、檔案和信函）相同。 主題會儲存為個別實體，並包含表單等中繼屬性。 主題是獨立的實體，可在多種最適化表單和互動式通訊中重複使用。 您也可以將主題移至AEM Forms的不同例項，並加以重複使用。

建立主題 creating-a-theme

執行下列步驟以建立主題：

下載主題 downloading-a-theme

您可以將主題匯出為zip檔案，並在其他專案或AEM例項中使用這些主題。 若要下載主題：

上傳主題 uploading-a-theme

您可以在專案上使用具有樣式預設集的已建立主題。 您可以在您的專案上上傳其他人建立的主題套件，借此匯入這些套件。

上傳主題：

主題元資料 metadata-of-a-theme

主題的元屬性清單（可在主題的屬性頁面中找到）。

關於主題編輯器 about-the-theme-editor

AEM Forms隨附主題編輯器。 它是商務使用者和網頁設計人員/開發人員友好的介面，提供所需的功能，以便輕鬆指定各種最適化表單和互動式通訊元素的樣式。 當您建立主題時，主題會儲存為單獨的實體，例如表單、互動式通訊、信函、檔案片段和資料字典。

主題編輯器可讓您自訂主題中已設定樣式的元件樣式。 您可以自訂表單或互動式通訊在裝置上的外觀。

主題編輯器分為兩個面板：

樣式元件 styling-components

您可以在多個最適化表單和互動式通訊中使用主題，這會匯入您在主題中指定的元件格式。 您可以設定各種元件的樣式，例如標題、說明、面板、欄位、圖示和文字方塊。 使用小工具集在主題中配置元件屬性。 雖然「CSS覆寫」區段可讓您編寫CSS程式碼或提供自訂選取器，但您並不需要CSS或LESS的先前知識。 當您在側欄中選取元件時，「CSS覆蓋」區段便會出現。

邊欄中的選項，可讓您選取不同元件並設定其樣式。

對側欄中的元件按一下「編輯」按鈕，可在畫布中選取元件，並讓您使用側欄中的選項來設定元件的樣式。

文字方塊、數值方塊、選項按鈕和核取方塊等特定元件會分類在「欄位」等一般元件下。 例如，您要自訂選項按鈕的樣式。 要選擇樣式的單選按鈕，請選擇 「欄位」>「介面工具集」>「單選按鈕」.

按一下 全部展開 在側邊欄中檢視、選取及設定未先顯示的分類元件。

樣式面板佈局 styling-panel-layouts-br

AEM Forms中的主題支援表單面板版面中的元素樣式和互動式通訊。 支援現成可用配置和自訂配置中的元素樣式。

現成可用的面板包括：

每個版面的選取器不同。
來自主題編輯器的樣式自訂配置涉及：

不同螢幕大小的不同樣式 different-styles-for-different-screen-sizes-br

案頭和行動版面的樣式可能稍有或完全不同。 對於行動裝置，平板電腦和手機共用的版面與元件大小不同。

使用主題編輯器斷點為不同螢幕大小定義替代樣式。 您可以選取開始建立主題的基本裝置或解析度，並自動產生其他解析度的樣式變數。 您可以明確修改所有解析度的樣式。

樣式屬性在選擇對象時在側欄中上下文更改 styling-properties-context-changes-in-sidebar-on-selecting-objects

在畫布中選取元件時，其樣式屬性會列在側欄中。 選取物件類型及其狀態，然後提供其樣式。

主題編輯器中最近使用的樣式 recently-used-styles-in-theme-editor

主題編輯器快取最多10種套用至元件的樣式。 您可以將快取樣式與主題的其他元件搭配使用。 最近使用的樣式位於側欄中所選元件的正下方，作為清單框。 最初，最近使用的樣式清單為空。

設定元件的樣式時，樣式會快取並列在清單方塊中。 在此示例中，文本框的標籤已設定樣式以更改字型大小和顏色。 您可以依照類似步驟選擇影像或變更顏色以設定元件樣式。 當欄位標籤樣式變更時，觀察樣式快取和列在清單方塊中的方式。

在此範例中，欄位標籤的樣式已變更，而為樣式選取「回應式面板說明」時，資產資料庫中會新增清單項目。 資產資料庫中的項目可用來變更回應式面板說明的樣式。

在資產庫中新增樣式時，可供其他主題和 樣式模式 表單編輯器或互動式通訊編輯器UI。 同樣地，使用表單編輯器或互動式通訊編輯器UI的樣式模式來設定元件的樣式時，會快取樣式，並可在主題中使用。

資產資料庫的加號按鈕可讓您以您提供的名稱永久儲存樣式。 即使您未按一下側邊欄中的「儲存」按鈕將樣式套用至元件，加號按鈕仍會儲存樣式。 樣式模式中不提供保存樣式以供以後使用的加號按鈕。

當您為樣式提供自訂名稱時，樣式會系結至主題，而不再適用於其他主題。 要刪除保存的樣式：

即時預覽、儲存和捨棄變更 live-preview-save-and-discard-changes

在樣式中所做的修改會立即反映在畫布中載入的表單或互動式通訊中。 即時預覽可讓您以互動方式定義及查看樣式的影響。 變更元件的樣式時， 完成 按鈕。 若要保留變更，請使用 完成 按鈕。

具有其他最適化表單或互動式通訊的主題 theme-with-another-adaptive-form-or-interactive-communication

當您建立主題時，會使用主題編輯器附帶的表單建立主題。 您在此表單中提供元件的樣式。 您可以選取您選擇的表單或互動式通訊，以提供樣式並預覽結果，而不是主題編輯器隨附的表單。

要在主題編輯器畫布中替換當前表單或互動式通信：

重做/還原 redo-undo

您可以還原或重做意外發生的不適當變更。 在畫布中使用重做/還原按鈕。

圖： 在畫布中還原/重做按鈕

在主題編輯器中設定元件樣式時，重做/還原按鈕會出現。

使用主題編輯器 using-the-theme-editor

主題編輯器可讓您編輯您建立或上傳的主題。 導覽至 Forms與檔案>主題，然後選取主題並開啟它。 主題在主題編輯器中開啟。

如上所述，主題編輯器有兩個面板：側欄和畫布。

在主題編輯器中自訂文字方塊Widget元件的成功狀態樣式。 元件在畫布中選取，其狀態在側欄中選取。 側欄中可用的樣式選項可用於自訂元件的外觀。

使用畫布 using-canvas

主題是使用現成可用的表單建立，或使用您所選擇的表單或互動式通訊。 畫布會顯示用於建立主題的表單或互動式通訊的預覽，以及主題中指定的自訂項目。 表單上方的尺標用於根據裝置的顯示大小決定版面。

在畫布工具列中，您會看到：

在畫布中選取元件時，元件工具列上方會顯示該元件。 元件工具列可讓您選取元件或切換至一般元件。 例如，您可在面板中選取數值文字方塊。 您會在元件工具列中看到下列選項：

圖： 畫布中數值方塊上的元件工具列

使用側欄 using-rail

主題編輯器中的側欄提供可自訂主題中元件的樣式和使用選擇器的選項。 選取器可讓您選取一組元件或個別元件，並可在側邊欄中搜尋選取器。 您可以為自訂元件編寫選取器。

當您從側欄的畫布或選取器中選取元件時，側欄會顯示所有選項，讓您自訂元件的樣式。
以下是選取元件時，您在側邊欄中看到的選項：

狀態 state

狀態是使用者與元件互動的指標。 例如，當使用者在文字方塊中輸入錯誤資料時，文字方塊的狀態會變更為錯誤狀態。 主題編輯器可讓您指定特定狀態的樣式。

自訂狀態樣式的選項會因元件而異。

屬性表 property-sheet

模擬錯誤/成功 simulate-error-success

模擬錯誤和成功選項位於側欄底部。 您可以使用側欄底部顯示的顯示/隱藏箭頭來查看它們。 使用主題編輯器，您可以設定元件的各種狀態樣式。

例如，您在表單中新增數值欄位，並在主題編輯器中指定其樣式。 當用戶在欄位中鍵入字母數字值時，您希望文本框的背景顏色更改。 您可以在主題中選取數值欄位，然後在側欄中使用狀態選項。 在側欄中選取「錯誤」狀態，然後將背景顏色變更為紅色。 若要預覽行為，您可以使用側邊欄中的「模擬錯誤」選項。 「模擬錯誤」和「成功」選項的詳細說明如下：

元件的樣式 styling-a-component

例如，在您的表單中，您有兩種文字方塊：僅接受數值，而接受英數字值的。 您可以為僅接受數值的文字方塊（數值方塊）自訂樣式。

執行下列步驟來自訂特定元件的樣式（此範例中為數值方塊）:

而不是選取 數值框Widget，選取 欄位介面工具集 在元件工具列中，並執行上述步驟。 為選擇維時 欄位介面工具集 選項，則除數字框外的所有文本框都具有相同大小。

指定狀態的樣式欄位 styling-fields-given-state

使用元件工具欄，還可以為元件的不同狀態指定元件的樣式。 例如，如果元件已停用，則會處於停用狀態。 在主題編輯器中可設定樣式的元件的常用狀態為：預設、焦點、停用、錯誤、成功和暫留。 您可以在畫布中選取元件，然後使用側邊欄中的狀態選項來自訂其外觀。

執行以下步驟來自定義特定狀態下元件的樣式：

在指定元件狀態後自訂元件的樣式時，只會針對指定狀態顯示元件的自訂。 例如，如果您在選取暫留狀態時自訂元件的樣式。 當您在已轉譯的表單或您套用主題的互動式通訊中，將指標移至元件上時，元件便會顯示自訂。

若要模擬錯誤和成功以外的狀態行為，請使用「預覽」模式。 若要使用預覽模式，請按一下 預覽 中。

小型顯示器的樣式配置 styling-layouts-for-smaller-displays

在畫布中使用尺標可為顯示較小的設備選擇斷點。 按一下模擬器 在畫布中查看尺標和斷點。 中斷點可讓您預覽表單或互動式通訊，以顯示與不同裝置（例如手機和平板電腦）相關的大小。 主題編輯器支援多種顯示大小。

要為不同斷點設定元件樣式：

您可以為多部裝置設定表單或互動式通訊元件的樣式。 適用於桌上型電腦和行動裝置的表單和互動式通訊元件可能有完全不同的樣式。

在主題中使用網頁字型 using-web-fonts-in-a-theme

您現在可以透過最適化表單或互動式通訊，使用網路服務中可用的字型。 現成可用， Typekit，則Adobe的網頁字型服務可作為設定使用。 若要使用Typekit，請在其中建立套件和字型，然後從中取得套件ID Typekit網站.

執行下列步驟以在AEM中設定Typekit:

執行以下步驟來配置主題以使用TypeKit配置：

在主題編輯器中列出和選擇字型 listing-and-selecting-fonts-in-theme-editor

您可以使用主題配置服務向主題編輯器添加更多字型。 執行以下步驟來添加字型：

在主題編輯器中選擇字型 selecting-fonts-in-theme-editor

您可以使用+按鈕來新增字型。 新增字型時，會列在側欄中。

除了主題配置選項之外，您還可以從主題編輯器本身添加字型。 在側欄下方的字型系列欄位中輸入您要使用的字型，然後在鍵盤上按回車鍵。

選取字型時，該字型會新增在字型系列清單下。 您可以使用主題編輯器中的「遮色片」選項來停用或啟用列出的字型。

您可以看到元件字型變更。

「字型系列」欄位支援多種字型。 輸入字型時，瀏覽器會尋找字型並將其套用至選取的元件。 如果瀏覽器找不到字型，它會在系列中查找該字型旁邊的字型。 首先，您可以輸入要尋找的特定字型。 如果找不到要使用的字型，可以在族中鍵入通用字型並使用它。

主題編輯器中套用的遮色片樣式 mask-styles-applied-in-theme-editor

您可以遮罩主題中套用的樣式。 在主題編輯器側欄中，您可以使用 表徵圖禁用應用樣式。 例如，如果您以表單或互動式通訊方式變更元件的尺寸，則可以使用屬性左側的遮色片按鈕加以停用。 保存主題時，將保留所選掩碼選項。

以下範例顯示主題中的遮罩和未遮罩樣式。

將主題應用於表單或互動式通信 applying-a-theme-to-a-form-or-interactive-communication-br

若要將主題套用至最適化表單：

要將主題應用於互動式通信，請執行以下操作：

在運行時更改表單的主題 change-theme-of-a-form-at-runtime

主題對表單的不同元件設定樣式。 您可以使用 themeOverride 屬性，以動態變更表單的主題。 表單的一般URL為：

https://<server>:<port>/content/forms/af/test.html

您可以使用themeOverride參數在運行時應用主題。

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

此 themeOverride 選項可讓您提供主題的路徑。 它會變更表單的主題，並以更新的樣式重新整理表單。

使用主題獲取特定外觀 specific-af-appearance

有了AEM Forms以及預設的現成畫布主題，還有其他許多主題。 如果您想要使用其他主題來設計表單或互動式通訊，以及進行其他變更，請從「主題庫」資料夾複製主題。 將複製的主題貼到「主題庫」資料夾之外，並根據您想要的更改編輯複製的主題。

要複製主題，請執行以下步驟：

自訂主題後，將其套用至您的表單或互動式通訊。

對其他最適化表單使用案例的影響 impact-on-other-adaptive-form-use-cases

CSS產生序列 css-generation-sequence

選取檢視CSS時，主題編輯器會收集所有樣式資訊並建置CSS。 它會依下列順序收集資訊：

例如，在基本客戶端庫中，文本框的背景顏色為藍色。 您可以使用側欄中的屬性將其變更為粉紅色。 產生CSS時，文字方塊的背景顏色會顯示為粉紅色。 使用屬性變更背景顏色後，另一個作者會使用CSS覆寫選項，將背景顏色文字方塊變更為白色。 當您產生CSS時，您會在產生的CSS中將背景顏色顯示為白色。

調試樣式 debugging-styles

當您在主題編輯器中指定元件的樣式時，會產生CSS。 對通用元件進行樣式設定時，其中包含的多個元件也會進行樣式設定。 例如，當您設定欄位樣式時，其中的文字方塊和標籤也會設定樣式。 當您在欄位中設定文字方塊的樣式時，它會取得自己的CSS。 如果您想對為欄位和元件產生的CSS除錯，主題編輯器會提供可讓您檢視CSS的選項。

您可以使用下列選項來查看產生的CSS:

疑難排解、建議和最佳實務 troubleshooting-recommendations-and-best-practices