互動式通訊製作UI簡介 introduction-to-interactive-communication-authoring-ui

CAUTION
AEM 6.4已結束延伸支援,本檔案不再更新。 如需詳細資訊,請參閱 技術支援期. 尋找支援的版本 此處.

介紹您可用來製作互動式通訊的各種使用者介面元素

製作的使用者介面 互動式通訊 是直觀的,並提供以下內容來編寫互動式通信的打印和web通道:

  • WYSIWYG拖放檔案編輯器
  • 資產的整合存放庫 — 上傳至伺服器並在伺服器上建立的資產可在互動式通訊製作介面的資產瀏覽器中使用

當您 建立新的或編輯現有的互動式通信,則會使用下列使用者介面元素:

互動式通訊製作使用者介面

答: 側欄 B. 頁面工具列 C. 內容區域

側欄 sidebar

側欄

按一下放大

答: 頻道瀏覽器 B. 內容瀏覽器 C. 屬性瀏覽器 D. 資產瀏覽器 E. 元件瀏覽器 F. 資料來源瀏覽器 — 資料模型 G. 資料來源瀏覽器 — 主內容

側欄包括:

  • 頻道瀏覽器

    通道瀏覽器可協助您在互動式通訊的列印和網頁通道之間切換。 根據您在管道瀏覽器中選取的管道,內容和元件等瀏覽器會顯示選項。

  • 內容瀏覽器

    在內容瀏覽器中,您可以看到所選頻道的檔案物件階層。 作者可在「文檔對象樹」中點選該元素,以導覽至特定元件。 作者可在Web通道中搜尋物件,並從此樹狀結構中重新排列。

  • 屬性瀏覽器

    可讓您編輯元件的屬性。 屬性會根據元件而變更。 例如,要查看文檔容器的屬性:

    選取元件,然後點選 欄位層級 > 文檔容器,然後點選 cppr .

  • 資產瀏覽器

    區隔不同類型的內容,例如版面片段、影像、檔案、頁面、影片。 作者可將資產拖放至互動式通訊中。

  • 元件瀏覽器

    包括可用於構建文檔的打印和Web通道的元件。 您可以將元件拖曳至互動式通訊以新增元素,並視需求設定新增的元素。 下表說明「元件」瀏覽器中列出的用於列印和Web通道的元件:

Component
Print Channel
Web Channel
功能
圖表
新增圖表,供您在互動式通訊中使用,以視覺化方式呈現從表單資料模型收集項目擷取的二維資料。
文件片段
可讓您將可重複使用的元件、文字、清單或條件新增至互動式通訊。 添加到互動式通信的可重複使用的元件可以是基於表單資料模型的元件,也可以是沒有表單資料模型的元件。
影像
讓您插入影像。
面板
-
「面板」元件是將其他元件分組在一起的佔位符,它控制如何在「互動式通信」中佈置一組元件。 面板元件也可讓您讓一組元件可為一般使用者重複,例如填入教育認證所需的多個項目。 也建議將每個面板用於具有多個標籤的互動式通訊的標籤。
表格
*
新增表格以整理行和欄中的資料。
目標區域
**
在Web通道中插入目標區域,以組織Web通道特定的元件。
文字
-
將文本添加到互動式通信的Web通道中。 文本可以利用表單資料模型對象來使內容動態。

*在「列印」通道中使用「版面片段」來新增表格。

**在「列印」通道中,目標區域在XDP/列印範本中預先定義。 無法使用互動式通信編寫UI添加新的目標區域。

  • 資料來源瀏覽器

    資料來源瀏覽器會在您建立互動式通訊時選取的表單資料模型中顯示可用的資料來源。

使用元件的關鍵點 key-points-for-working-with-components

使用互動式通訊元件時的要點如下:

  • 每個元件都具有控制其外觀和功能的關聯屬性。 若要設定元件的屬性,請點選元件並點選 cppr 在「屬性」瀏覽器中開啟元件屬性。

  • 元件以其元素名稱來識別。 當您點選 cppr ,您可以變更屬性瀏覽器中的「元素名稱」欄位值,以變更元件的名稱。 「元素名稱」欄位僅接受字母、數字、連字型大小(-)和底線(_)。 不允許使用其他特殊字元,元素名稱應以字母開頭。

  • 只要「互動式通信」上顯示標題,您就可以修改編輯器中內嵌的「互動式通信」元件的「標題」屬性,而無需開啟「屬性」瀏覽器。 若要這麼做:

    1. 點選以選取具有Title屬性且其Hide title屬性已停用的元件。
    2. 點選 aem_6_3_edit 讓標題可編輯。
    3. 修改標題並點選「Return(返回)」鍵,或點選元件外部的任何位置以儲存變更。 點選Esc鍵以捨棄變更。

元件工具列 component-toolbar

選取元件時,您會看到工具列可供您使用。 您可以獲得剪切、貼上、移動和指定元件屬性的選項。 您的選項為:

答: 設定:當您點選 設定,元件屬性會顯示在側邊欄中。

B. 編輯規則:點選「編輯規則」時,會出現「規則編輯器」,您可在其中編輯和建立所選元件的規則。 在規則編輯器中,您也可以選取其他表單物件(元件),並編輯/建立這些表單物件的規則。

C. 複製:您可以使用複製選項來複製元件,並貼到互動式通訊中的其他位置。

D. 剪下:在「交互通信」中,可以使用剪切選項將元件從一個位置移動到另一個位置。

E. 刪除:可讓您從互動式通訊中刪除元件。

F. 插入元件:可讓您在選取的元件上方插入元件。

G. 貼上:可讓您使用上述選項來貼上您剪下或複製的元件。

H. 群組:如果您想要剪下、複製或貼上多個元件,可讓您選取多個元件。

我。 父級:可讓您選取元件的父項。

J. 更多:提供更多選項以使用所選元件。

  • 檢視SOM運算式(僅適用於面板)
  • 在面板中對對象進行分組(僅適用於面板)
  • 編輯片段(僅適用於片段)
  • 將面板儲存為片段(僅適用於面板)
  • 新增子面板(僅適用於面板)
  • 新增面板工具列(僅適用於面板)
  • 更換(不適用於面板)

頁面工具列 page-toolbar

頂部的「頁面」工具欄提供了選項,可以預覽互動式通信並更改其屬性。 您可以在編寫互動式通訊時加以預覽,並據此進行變更。 在頁面工具列中,您會看到:

  • 切換側面板 切換側面板 :讓您顯示或隱藏側欄。

  • 頁面資訊 pageinformationad :可讓您檢視頁面屬性。

  • 模擬器 尺標 :可讓您模擬不同顯示大小(例如平板電腦和手機)的互動式通訊外觀。

  • 編輯:可讓您選取其他模式,例如:編輯、樣式、開發人員和設計。

    • 編輯:可讓您編輯互動式通訊及其元件的屬性。 例如,新增元件、拖放影像並指定必填欄位。

    • 樣式:可讓您設定互動式通訊元件外觀的樣式。 例如,在樣式模式中,您可以選取面板並指定其背景顏色。

    • 開發人員:讓開發人員:

      • 探索互動式通訊的組成。
      • 對發生在何處和何時的情況進行除錯,進而有助於解決問題。
    • 目標:可讓您啟用或停用自訂元件,或側邊欄中未列出的現成元件。

  • 預覽:可讓您預覽發佈互動式通訊時的外觀。

recommendation-more-help
a6ebf046-2b8b-4543-bd46-42a0d77792da