使用和擴充Widget(傳統UI)

注意

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

Adobe Experience Manager的網頁型介面使用AJAX和其他現代瀏覽器技術,讓作者直接在網頁上編輯和格式化內容。

Adobe Experience Manager(AEM)使用 ExtJS widget程式庫,提供精良的使用者介面元素,可在所有最重要的瀏覽器上運作,並可建立案頭級UI體驗。

這些Widget包含在AEM中,除了供AEM本身使用外,也可供使用AEM建立的任何網站使用。

如需AEM中所有可用小工具的完整參考,請參閱 介面工具集API檔案現有xtype清單. 此外,也提供許多範例,說明如何使用ExtJS架構,位於 森沙 站點,框架的所有者。

本頁面提供如何使用和擴充Widget的相關分析。 它首先描述如何 在頁面中包含用戶端代碼. 接著,它會說明已建立的一些範例元件,以說明一些基本用途和擴充功能。 這些元件可在 使用ExtJS Widget 封裝 封裝共用.

套件包含下列範例:

注意

Adobe Experience Manager的傳統UI建置於 ExtJS 3.4.0.

注意

本頁面說明傳統UI中Widget的使用方式。 Adobe建議您運用現代 觸控式UI 根據 Coral UIGranite UI.

在頁面中包括用戶端代碼

客戶端javascript和樣式表代碼應放置在客戶端庫中。

要建立客戶端庫:

  1. 在下方建立節點 /apps/<project> ,並搭配下列屬性:

        name="clientlib"
        jcr:mixinTypes="[mix:lockable]"
        jcr:primaryType="cq:ClientLibraryFolder"
        sling:resourceType="widgets/clientlib"
        categories="[<category-name>]"
        dependencies="[cq.widgets]"
    
    注意

    注意: <category-name> 是自訂程式庫的名稱(例如"cq.extjtraing"),並用於在頁面上包含程式庫。

  2. 在下 clientlib 建立 cssjs 資料夾(nt:folder)。

  3. 在下 clientlib 建立 css.txtjs.txt 檔案(nt:files)。 這些.txt檔案會列出程式庫中包含的檔案。

  4. 編輯 js.txt:它需要從「 #base=js「 」,接著CQ用戶端程式庫服務要匯總的檔案清單,例如:

    #base=js
     components.js
     exercises.js
     CustomWidget.js
     CustomBrowseField.js
     InsertTextPlugin.js
    
  5. 編輯 css.txt:它需要從「 #base=css「 」,接著CQ用戶端程式庫服務要匯總的檔案清單,例如:

    #base=css
     components.css
    
  6. js 資料夾中,放置屬於程式庫的javascript檔案。

  7. css 資料夾,放置 .css 檔案和css檔案使用的資源(例如 my_icon.png)。

注意

以前介紹的樣式表的處理是可選的。

要將客戶端庫包含在頁面元件jsp中:

  • 要同時包括javascript代碼和樣式表,請執行以下操作:

    <ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

    where <category-nameX> 是用戶端程式庫的名稱。

  • 僅包含javascript程式碼:

    <ui:includeClientLib js="<category-name>"/>

如需更多詳細資訊,請參閱 <ui:includeclientlib> 標籤。

在某些情況下,用戶端程式庫應僅能以製作模式使用,且應以發佈模式排除。 具體實現如下:

    if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
        %><ui:includeClientLib categories="cq.collab.blog"/><%
    }

範例快速入門

若要遵循本頁的教學課程,請安裝以下的套件: 使用ExtJS Widget 在本機AEM例項中,並建立要包含元件的範例頁面。 若要這麼做:

  1. 在您的AEM例項中,下載以下的套件: 使用ExtJS Widget(v01) 從「包共用」安裝包。 它會建立專案 extjstraining low /apps 儲存庫中。

  2. 將包含指令碼(js)和樣式表(css)的用戶端程式庫包含在geometrixx頁jsp的head標籤中,因為您會將範例元件包含在的新頁面中 Geometrixx 分支:

    in CRXDE Lite 開啟檔案 /apps/geometrixx/components/page/headlibs.jsp 並新增 cq.extjstraining 類別至現有 <ui:includeClientLib> 標籤,如下所示:

    %><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%

  3. Geometrixx 分支 /content/geometrixx/en/products 然後叫它 使用ExtJS Widget.

  4. 進入設計模式,然後新增群組的所有元件,稱為 使用ExtJS Widget 設計Geometrixx

  5. 在編輯模式中返回:組成部分 使用ExtJS Widget 可在Sidekick中使用。

注意

本頁的範例以Geometrixx範例內容為基礎,這些內容已由We.Retail取代,不再隨AEM提供。 請參閱檔案 We.Retail參考實作 以了解如何下載和安裝Geometrixx。

基本對話方塊

對話方塊通常用於編輯內容,但也只能顯示資訊。 檢視完整對話方塊的簡單方式,是存取其json格式的表示法。 若要這麼做,請將瀏覽器指向:

http://localhost:4502/<path-to-dialog>.-1.json

的第一個元件 使用ExtJS Widget sidekick中的群組稱為 1. 對話基本知識 和包含四個基本對話方塊,這些對話方塊是使用現成可用的Widget建置,而不使用自訂的Javascript邏輯。 對話方塊儲存於下方 /apps/extjstraining/components/dialogbasics. 基本對話方塊為:

  • 完整對話方塊( full 節點):它顯示一個包含3個頁簽的窗口,每個頁簽都包含2個文本欄位。

  • 「單一面板」對話方塊( singlepanel 節點):它會顯示一個包含1個標籤的視窗,其中包含2個文字欄位。

  • 「多面板」對話框( multipanel 節點):其顯示與「完整」對話方塊相同,但建置方式不同。

  • 設計對話方塊( design 節點):它顯示一個包含2個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽具有一個欄位集,其中包含4個文本欄位,另一個可折疊欄位集,其中包含2個文本欄位。

納入 1. 對話基本知識 元件(在範例頁面中):

  1. 新增 1. 對話基本知識 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.

  2. 元件會顯示標題、部分文字和 屬性 連結:按一下連結以顯示儲存庫中儲存的段落的屬性。 再按一下連結以隱藏屬性。

元件顯示如下:

chlimage_1-135

範例1:完整對話方塊

完整 對話框顯示一個窗口,其中包含三個頁簽,每個頁簽都包含兩個文本欄位。 這是 對話基本知識 元件。 其特點是:

  • 由節點定義:節點類型= cq:Dialog, xtype = dialog.

  • 顯示3個頁簽(節點類型= cq:Panel)。

  • 每個索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。

  • 由節點定義:

    /apps/extjstraining/components/dialogbasics/full

  • 會以JSON格式呈現,方法是要求:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

對話方塊顯示如下:

screen_shot_2012-01-31at45411pm

範例2:單一面板對話方塊

單一面板 對話框顯示一個窗口,其中一個頁簽包含兩個文本欄位。 其特點是:

  • 顯示1個頁簽(節點類型= cq:Dialog, xtype = panel)

  • 索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)

  • 由節點定義:

    /apps/extjstraining/components/dialogbasics/singlepanel

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

  • 優於 完整對話方塊 就是需要的配置較少。

  • 建議使用:顯示資訊或只有幾個欄位的簡單對話框。

若要使用「單一面板」對話方塊:

  1. 取代 對話基本知識 元件 單一面板 對話框:

    1. CRXDE Lite,刪除節點: /apps/extjstraining/components/dialogbasics/dialog
    2. 按一下 全部儲存 以儲存變更。
    3. 複製節點: /apps/extjstraining/components/dialogbasics/singlepanel
    4. 將複製的節點貼到下方: /apps/extjstraining/components/dialogbasics
    5. 選取節點: /apps/extjstraining/components/dialogbasics/Copy of singlepanel重新命名 dialog.
  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-01-31at45952pm

範例3:多面板對話方塊

多面板 對話框的顯示與 完整 但對話的構建方式不同。 其特點是:

  • 由節點定義(節點類型= cq:Dialog, xtype = tabpanel)。

  • 顯示3個頁簽(節點類型= cq:Panel)。

  • 每個索引標籤有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。

  • 由節點定義:

    /apps/extjstraining/components/dialogbasics/multipanel

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json

  • 優於 完整對話方塊 就是它有簡化的結構。

  • 建議使用:對話框。

要使用「多面板」對話框,請執行以下操作:

  1. 取代 對話基本知識 元件 多面板 對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-01-31at50119pm

範例4:豐富對話方塊

Rich 對話框顯示一個包含兩個頁簽的窗口。 第一個頁簽具有文本欄位、下拉菜單和可折疊的文本區域。 第二個頁簽有一個欄位集,包含四個文本欄位,一個可折疊欄位集包含兩個文本欄位。 其特點是:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示2個頁簽(節點類型= cq:Panel)。

  • 第一個索引標籤具有 dialogfieldset 帶有 textfieldselection 包含3個選項的介面工具集和可折疊 dialogfieldsettextarea 介面工具集。

  • 第二個索引標籤具有 dialogfieldset 4件小工具 textfield 小工具和可折疊 dialogfieldset 2 textfield 小工具。

  • 由節點定義:

    /apps/extjstraining/components/dialogbasics/rich

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

若要使用 Rich 對話框:

  1. 取代 對話基本知識 元件 Rich 對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-01-31at50429pm screen_shot_2012-01-31at50519pm

動態對話方塊

的第二個元件 使用ExtJS Widget sidekick中的群組稱為 2. 動態對話方塊 包含三個使用現成可用小工具建立的動態對話方塊,以及 使用自訂的javascript邏輯. 對話方塊儲存於下方 /apps/extjstraining/components/dynamicdialogs. 動態對話方塊為:

  • 切換頁簽對話框( switchtabs 節點):它會顯示一個包含兩個索引標籤的視窗。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。
  • 任意對話框( arbitrary 節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤有一個欄位,可拖放或上傳資產,以及一個欄位,可顯示容納頁面和資產的相關資訊(如果參考了該頁面)。
  • 切換欄位對話方塊( togglefield 節點):它會顯示一個包含一個索引標籤的視窗。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。

若要包含 2. 動態對話方塊 元件(在範例頁面上):

  1. 新增 2. 動態對話方塊 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.

  2. 元件會顯示標題、部分文字和 屬性 連結:按一下以顯示儲存庫中儲存的段落的屬性。 再按一下以隱藏屬性。

元件顯示如下:

chlimage_1-136

範例1:切換頁簽對話框

切換標籤 對話框顯示一個包含兩個頁簽的窗口。 第一個索引標籤有一個選項選項,包含三個選項:選取選項時,會顯示與選項相關的索引標籤。 第二個索引標籤有兩個文字欄位。

其主要特點是:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示2個頁簽(節點類型= cq:Panel):1選擇頁簽,第2個頁簽取決於第1個頁簽(3個選項)中的選擇。

  • 有3個可選頁簽(節點類型= cq:Panel),每個欄位都有2個文字欄位(節點類型= cq:Widget, xtype = textfield)。 一次只會顯示一個選用索引標籤。

  • switchtabs 節點位於:

    /apps/extjstraining/components/dynamicdialogs/switchtabs

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

此邏輯是透過事件接聽程式和Javascript程式碼來實作,如下所示:

  • 對話框節點具有「 beforeshow"在顯示對話框之前隱藏所有可選頁簽的偵聽器:

    beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

    dialog.items.get(0) 獲取包含「選擇」面板和3個可選面板的表。

  • Ejst.x2 物件是在 exercises.js 檔案位置:

    /apps/extjstraining/clientlib/js/exercises.js

  • Ejst.x2.manageTabs() 方法,作為 index 為–1時,會隱藏所有可選索引標籤(從1到3)。

  • 選擇頁簽有2個監聽器:一個在載入對話框時顯示選定頁簽(" loadcontent" event),以及變更選取項目時顯示所選索引標籤的索引標籤(" selectionchanged「事件):

    loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

    selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

  • Ejst.x2.showTab() 方法:

    field.findParentByType('tabpanel') 獲取包含所有頁簽( field 代表選取介面工具集)

    field.getValue() 獲取選取項的值,例如:tab2

    Ejst.x2.manageTabs() 顯示所選頁簽。

  • 每個可選頁簽都有一個監聽器,它隱藏「 render"事件:

    render="function(tab){Ejst.x2.hideTab(tab);}"

  • Ejst.x2.hideTab() 方法:

    tabPanel 是包含所有標籤的表格面板

    index 是可選頁簽的索引

    tabPanel.hideTabStripItem(index) 隱藏索引標籤

其顯示如下:

screen_shot_2012-02-01at114745am

範例2:任意對話

對話方塊通常會顯示基礎元件的內容。 此處描述的對話方塊稱為 任意 對話方塊,從不同元件提取內容。

任意 對話框顯示一個帶有一個頁簽的窗口。 索引標籤有兩個欄位:一個用於拖放或上傳資產,一個用於顯示容納頁面和資產的相關資訊(若已參考)。

其主要特點是:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel),具有1個面板(節點類型= cq:Panel)

  • 面板具有smartfile介面工具集(節點類型= cq:Widget, xtype = smartfile)和擁有者介面工具集(節點類型= cq:Widget, xtype = ownerdraw)

  • arbitrary 節點位於:

    /apps/extjstraining/components/dynamicdialogs/arbitrary

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

此邏輯是透過事件接聽程式和Javascript程式碼來實作,如下所示:

  • 所有權繪製小部件具有「 loadcontent"在載入內容時顯示包含元件的頁面和smartfile介面工具集引用的資產資訊的偵聽器:

    loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"

    field 是使用ownerdraw對象設定的

    path 是以元件的內容路徑設定(例如:/content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

  • Ejst.x2 物件是在 exercises.js 檔案位置:

    /apps/extjstraining/clientlib/js/exercises.js

  • Ejst.x2.showInfo() 方法:

    pagePath 是包含元件的頁面路徑

    pageInfo 以json格式代表頁面屬性

    reference 是參考資產的路徑

    metadata 以json格式表示資產的中繼資料

    ownerdraw.getEl().update(html); 在對話方塊中顯示已建立的html

若要使用 任意 對話框:

  1. 取代 動態對話方塊 元件 任意 對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-02-01at115300am

範例3:切換欄位對話方塊

切換欄位 對話框顯示一個帶有一個頁簽的窗口。 索引標籤中有核取方塊:勾選此欄位時,會顯示包含兩個文字欄位的欄位集。

其主要特點是:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel),具有1個面板(節點類型= cq:Panel)。

  • 此面板具有選取/核取方塊Widget(節點類型= cq:Widget, xtype = selection, type = checkbox)和可折疊的對話欄位集widget(節點類型= cq:Widget, xtype = dialogfieldset),預設為隱藏,包含2個文字欄位小工具(節點類型= cq:Widget, xtype = textfield)。

  • togglefields 節點位於:

    /apps/extjstraining/components/dynamicdialogs/togglefields

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

此邏輯是透過事件接聽程式和Javascript程式碼來實作,如下所示:

  • 「選擇」頁簽有2個監聽器:顯示內容載入時的dialogfieldset的對話欄位集(" loadcontent" event),以及在更改選項時顯示對話框欄位集(" selectionchanged「事件):

    loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

    selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

  • Ejst.x2 物件是在 exercises.js 檔案位置:

    /apps/extjstraining/clientlib/js/exercises.js

  • Ejst.x2.toggleFieldSet() 方法:

    • box 是選取物件
    • panel 是包含選取項目和dialogfieldset小工具的面板
    • fieldSet 是dialogfieldset對象
    • show 是選取項目的值(true或false)
    • 基於' show'是否顯示dialogfieldset

若要使用 切換欄位 對話框:

  1. 取代 動態對話方塊 元件 切換欄位 對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-02-01at115518am

自訂介面工具集

AEM隨附的現成可用Widget應涵蓋大部分使用案例。 不過,有時可能需要建立自訂Widget,以滿足專案特定需求。 可通過擴展現有小部件來建立自定義小部件。 為協助您開始進行此類自訂, 使用ExtJS Widget 套件包含三個使用三個不同自訂小工具的對話方塊:

  • 多欄位對話方塊( multifield 節點)顯示一個包含一個頁簽的窗口。 索引標籤具有自訂的多欄位介面工具集,其中包含兩個欄位:一個下拉式功能表,其中包含兩個選項和一個文字欄位。 因為是以現成可用的為基礎 multifield 介面工具集(只有一個文本欄位),它具有 multifield 介面工具集。

  • 樹瀏覽對話框( treebrowse 節點)顯示一個窗口,其中一個頁簽包含路徑瀏覽小工具:按一下箭頭時,會向上開啟一個窗口,您可以在其中瀏覽層次並選擇項目。 然後,項目的路徑會新增至路徑欄位,並在對話方塊關閉時持續保存。

  • RTF編輯器外掛程式對話方塊( rteplugin 節點),將自訂按鈕新增至RTF編輯器,以將一些自訂文字插入主要文字。 它包含 richtext 介面工具集(RTE)和自訂功能的介面工具集(透過RTE外掛程式機制新增)。

自訂Widget和外掛程式會包含在 3. 自訂介面工具集使用ExtJS Widget 包。 若要將此元件包含至範例頁面:

  1. 新增 3. 自訂介面工具集 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.

  2. 元件會顯示標題、部分文字,以及按一下 屬性 連結,儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。

    元件顯示如下:

chlimage_1-137

範例1:自訂多欄位介面工具集

自訂多欄位 基於介面工具集的對話框顯示一個窗口,其中包含一個頁簽。 索引標籤具有自訂的多欄位介面工具集,與具有一個欄位的標準介面工具集不同,它有兩個欄位:一個下拉式功能表,其中包含兩個選項和一個文字欄位。

自訂多欄位 基於介面工具集的對話框:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)包含面板(節點類型= cq:Widget, xtype = panel)。

  • 面板具有 multifield widget(節點類型) cq:Widget, xtype = multifield)。

  • multifield 介面工具集的欄位設定(節點類型= nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions),此變數以自訂xtype '為基礎 ejstcustom':

    • ' fieldconfig'是 CQ.form.MultiField 物件。

    • ' optionsProvider'是 ejstcustom 介面工具集。 已使用 Ejst.x3.provideOptions 定義於 exercises.js at:

      /apps/extjstraining/clientlib/js/exercises.js

      和會傳回2個選項。

  • multifield 節點位於:

    /apps/extjstraining/components/customwidgets/multifield

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

自訂多欄位介面工具集(xtype = ejstcustom):

  • 是Javascript物件,稱為 Ejst.CustomWidget.

  • 定義於 CustomWidget.js javascript檔案:

    /apps/extjstraining/clientlib/js/CustomWidget.js

  • CQ.form.CompositeField 介面工具集。

  • 有3個欄位: hiddenField (文本欄位), allowField (ComboBox)和 otherField (文本欄位)

  • 覆寫 CQ.Ext.Component#initComponent 若要新增3個欄位:

    • allowFieldCQ.form.Selection 「select」類型的對象。 optionsProvider是Selection對象的配置,在對話框中定義的CustomWidget的optionsProvider配置已實例化
    • otherFieldCQ.Ext.form.TextField 物件
  • 覆寫方法 setValue, getValuegetRawValue of CQ.form.CompositeField 若要以下格式設定及擷取CustomWidget的值:

    <allowField value>/<otherField value>, e.g.: 'Bla1/hello'

  • 將自身註冊為「 ejstcustom' xtype:

    CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

自訂多欄位 介面工具集對話方塊的顯示如下:

screen_shot_2012-02-01at115840am

範例2:自訂樹狀瀏覽介面工具集

自訂 樹狀瀏覽 基於介面工具集的對話框顯示一個窗口,其中包含一個包含自定義路徑瀏覽介面工具集的頁簽:按一下箭頭時,會向上開啟一個窗口,您可以在其中瀏覽層次並選擇項目。 然後,項目的路徑會新增至路徑欄位,並在對話方塊關閉時持續保存。

自定義樹瀏覽對話框:

  • 由節點定義(節點類型= cq:Dialog, xtype = dialog)。

  • 顯示1個表格介面工具集(節點類型= cq:Widget, xtype = tabpanel)包含面板(節點類型= cq:Widget, xtype = panel)。

  • 面板具有自訂Widget(節點類型= cq:Widget, xtype = ejstbrowse)

  • treebrowse 節點位於:

    /apps/extjstraining/components/customwidgets/treebrowse

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

自訂樹狀瀏覽介面工具集(xtype = ejstbrowse):

  • 是Javascript物件,稱為 Ejst.CustomWidget.

  • 定義於 CustomBrowseField.js javascript檔案:

    /apps/extjstraining/clientlib/js/CustomBrowseField.js

  • 延伸 CQ.Ext.form.TriggerField.

  • 定義名為的瀏覽窗口 browseWindow.

  • 覆寫 CQ.Ext.form.TriggerField 按一下箭頭時顯示瀏覽窗口。

  • 定義 CQ.Ext.tree.TreePanel 物件:

    • 它會呼叫註冊於的servlet以取得其資料 /bin/wcm/siteadmin/tree.json.
    • 其根為「 apps/extjstraining」。
  • 定義 window 對象(CQ.Ext.Window):

    • 根據預先定義的面板。
    • 確定 按鈕,設定所選路徑的值並隱藏面板。
  • 窗戶固定在 路徑 欄位。

  • 所選路徑將從瀏覽欄位傳遞到上的窗口 show 事件。

  • 將自身註冊為「 ejstbrowse' xtype:

    CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

若要使用 自訂樹狀瀏覽 基於介面工具集的對話框:

  1. 取代 自訂介面工具集 元件 自訂樹狀瀏覽 對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件:對話方塊顯示如下:

screen_shot_2012-02-01at120104pm

範例3:RTF編輯器(RTE)外掛程式

RTF編輯器(RTE)外掛程式 「基於」對話方塊是以RTF編輯器為基礎的對話方塊,其中提供自訂按鈕,可在方括弧內插入某些自訂文字。 自訂文字可由某些伺服器端邏輯剖析(此範例中未實作),例如新增在指定路徑上定義的一些文字:

RTE外掛程式 基於對話框:

  • 由rtplugin節點定義:

    /apps/extjstraining/components/customwidgets/rteplugin

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

  • rtePlugins 節點具有子節點 inserttext (節點類型= nt:unstructured),以外掛程式命名。 其屬性稱為 features,定義RTE可使用的外掛程式功能。

RTE外掛程式:

  • 是Javascript物件,稱為 Ejst.InsertTextPlugin.

  • 定義於 InsertTextPlugin.js javascript檔案:

    /apps/extjstraining/clientlib/js/InsertTextPlugin.js

  • CQ.form.rte.plugins.Plugin 物件。

  • 下列方法會定義 CQ.form.rte.plugins.Plugin 物件,且在實作外掛程式中遭覆寫:

    • getFeatures() 會傳回外掛程式可用之所有功能的陣列。
    • initializeUI() 將新按鈕添加到RTE工具欄。
    • notifyPluginConfig() 當按鈕暫留時顯示標題和文字。
    • execute() 按一下按鈕並執行外掛程式動作時,會呼叫:它顯示一個窗口,用於定義要包括的文本。
  • insertText() 使用對應的對話框對象插入文本 Ejst.InsertTextPlugin.Dialog (請參閱之後)。

  • executeInsertText() 由呼叫 apply() 對話方塊的方法,會在 確定 按鈕。

  • 將自身註冊為「 inserttext'插件:

    CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

  • the Ejst.InsertTextPlugin.Dialog object定義按一下外掛程式按鈕時開啟的對話方塊。 對話方塊由面板、表單、文字欄位和2個按鈕(確定取消)。

若要使用 RTF編輯器(RTE)外掛程式 基於對話框:

  1. 取代 自訂介面工具集 元件 RTF編輯器(RTE)外掛程式 基於對話框:

    請依照 範例2:單一面板對話方塊

  2. 編輯元件。

  3. 按一下右側的最後一個圖示(四個箭頭的圖示)。 輸入路徑並按一下 確定:

    路徑會顯示在方括弧內([])。

  4. 按一下 確定 來關閉RTF編輯器。

RTF編輯器(RTE)外掛程式 基於對話方塊的顯示如下:

screen_shot_2012-02-01at120254pm

注意

此範例僅顯示如何實作邏輯的用戶端部分:佔位符([文字]),則會在伺服器端明確剖析(例如在元件JSP中)。

樹概述

現成可用 CQ.Ext.tree.TreePanel 物件提供樹狀結構資料的樹狀結構UI表示。 包含在 使用ExtJS Widget 套件會示範如何使用 TreePanel 對象,在指定路徑下顯示JCR樹。 窗口本身可以停靠/取消停靠。 在此示例中,窗口邏輯嵌入到元件jsp中, <script></script> 標籤。

若要包含 樹概述 元件至範例頁面:

  1. 新增 4. 樹概述 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.

  2. 元件隨即顯示:

    • 標題,帶一些文字
    • 屬性​連結:按一下以顯示儲存在儲存庫中的段落的屬性。再按一下以隱藏屬性。
    • 浮動視窗,內含存放庫的樹狀表示,可展開。

元件顯示如下:

screen_shot_2012-02-01at120639pm

樹概述元件:

  • 定義於:

    /apps/extjstraining/components/treeoverview

  • 其對話框用於設定窗口的大小,以及固定/取消固定窗口(請參閱下面的詳細資訊)。

元件jsp:

  • 從儲存庫中檢索寬度、高度和停靠屬性。

  • 顯示樹概述資料格式的一些文本。

  • 在javascript標籤之間,將視窗邏輯嵌入元件jsp中。

  • 定義於:

    apps/extjstraining/components/treeoverview/content.jsp

元件jsp中嵌入的javascript代碼:

  • 定義 tree 對象,方法是嘗試從頁中檢索樹窗口。

  • 如果顯示樹的窗口不存在, treePanel (CQ.Ext.tree.TreePanel)已建立:

    • treePanel 包含用於建立視窗的資料。

    • 通過調用在註冊的servlet來檢索資料:

      /bin/wcm/siteadmin/tree.json

  • beforeload 偵聽器確保已載入點擊的節點。

  • root 對象設定路徑 apps/extjstraining 作為樹根。

  • tree (CQ.Ext.Window),則會根據預先定義 treePanel,及顯示為:

    tree.show();

  • 如果窗口已存在,則根據從儲存庫檢索到的寬度、高度和停靠屬性顯示該窗口。

元件對話方塊:

  • 顯示1個頁簽,其中包含2個欄位,用於設定樹概覽窗口的大小(寬度和高度),以及1個欄位用於固定/取消固定窗口

  • 由節點定義(節點類型= cq:Dialog, xtype = panel)。

  • 面板具有大小欄位小部件(節點類型= cq:Widget, xtype = sizefield)和選取介面工具集(節點類型= cq:Widget, xtype = selection, type = radio),包含2個選項(true/false)

  • 由對話方塊節點在下列位置定義:

    /apps/extjstraining/components/treeoverview/dialog

  • 會透過要求:

    http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

  • 顯示如下:

screen_shot_2012-02-01at120745pm

格線概述

「網格面板」以行和列的表格格式表示資料。 由下列部分組成:

  • 商店:保存資料記錄(列)的模型。
  • 欄模型:柱子的組成。
  • 檢視:封裝用戶介面。
  • 選取模型:選取行為。

包含在 使用ExtJS Widget 套件會顯示如何以表格格式顯示資料:

  • 範例1使用靜態資料。
  • 範例2使用從存放庫擷取的資料。

要將「網格概述」元件包含到示例頁,請執行以下操作:

  1. 新增 5。 格線概述 元件至範例頁面(從 使用ExtJS Widget 標籤 Sidekick.

  2. 元件隨即顯示:

    • 帶有文本的標題
    • a 屬性 連結:按一下以顯示儲存庫中儲存的段落的屬性。 Click again to hide the properties.
    • 包含表格格式的資料的浮動視窗。

元件顯示如下:

screen_shot_2012-02-01at121109pm

範例1:預設網格

在其現成版本中,網格概述​元件以表格格式顯示一個包含靜態資料的窗口。在此示例中,邏輯通過兩種方式嵌入到元件jsp中:

  • 在<script></script>標籤之間定義一般邏輯
  • 特定邏輯可在單獨的.js檔案中使用,並在jsp中連結到。此設定可借由註解所需的<script>標籤,輕鬆在兩個邏輯(靜態/動態)之間切換。

網格概述元件:

  • 定義於:

    /apps/extjstraining/components/gridoverview

  • 其對話框用於設定窗口的大小,以及固定/取消固定窗口。

元件jsp:

  • 從儲存庫中檢索寬度、高度和停靠屬性。

  • 顯示一些文本作為網格概述資料格式的簡介。

  • 參考定義GridPanel對象的Javascript代碼:

    <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

    defaultgrid.js將一些靜態資料定義為GridPanel對象的基礎。

  • 在javascript標籤之間嵌入javascript代碼,該標籤定義使用GridPanel對象的窗口對象。

  • 定義於:

    apps/extjstraining/components/gridoverview/content.jsp

元件jsp中嵌入的javascript代碼:

  • 定義 grid 物件,方法是嘗試從頁面擷取視窗元件:

    var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

  • grid 不存在,a CQ.Ext.grid.GridPanel 對象( gridPanel)的定義方式為呼叫 getGridPanel() 方法(請參閱下方)。 此方法定義於 defaultgrid.js.

  • gridCQ.Ext.Window物件,會根據預先定義的GridPanel顯示: grid.show();

  • grid 已存在,則會根據從儲存庫檢索到的寬度、高度和停靠屬性來顯示。

Javascript檔案( defaultgrid.js)在元件jsp中引用,定義 getGridPanel() 方法,由JSP中嵌入的指令碼調用,並返回 CQ.Ext.grid.GridPanel 物件,以靜態資料為基礎。 邏輯如下:

  • myData 是靜態資料的陣列,格式為5欄4列的表格。

  • storeCQ.Ext.data.Store 使用的對象 myData.

  • store 已載入記憶體中:

    store.load();

  • gridPanelCQ.Ext.grid.GridPanel 使用的對象 store:

    • 欄寬隨時會重新比例:

      forceFit: true

    • 一次只能選取一列:

      singleSelect:true

範例2:參考搜索網格

安裝套件時, content.jsp格線概述 元件顯示基於靜態資料的網格。 可以修改元件以顯示具有以下特徵的網格:

  • 有三欄。
  • 是以呼叫Servlet從存放庫擷取的資料為基礎。
  • 可以編輯最後一列的儲存格。 值持續存在於 test 由第一列中顯示的路徑定義的節點下的屬性。

如前一節所述,視窗物件會取得其 CQ.Ext.grid.GridPanel 物件,方法是呼叫 getGridPanel() 在中定義的方法 defaultgrid.js 檔案位置 /apps/extjstraining/components/gridoverview/defaultgrid.js. 此 格線概述 元件提供不同的實作 getGridPanel() 方法,在中定義 referencesearch.js 檔案位置 /apps/extjstraining/components/gridoverview/referencesearch.js. 切換元件jsp中參考的.js檔案後,網格將以從儲存庫擷取的資料為基礎。

切換元件jsp中引用的.js檔案:

  1. CRXDE Lite,在 content.jsp 元件的檔案中,對包含 defaultgrid.js 檔案,因此如下所示:

    <!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->

  2. 從包含 referencesearch.js 檔案,因此如下所示:

    <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>

  3. 儲存變更。

  4. 重新整理範例頁面。

元件顯示如下:

screen_shot_2012-02-01at121429pm

元件jsp中引用的javascript代碼(referencesearch.js)定義 getGridPanel() 方法從元件jsp中調用並返回 CQ.Ext.grid.GridPanel 物件,以動態從存放庫擷取的資料為基礎。 中的邏輯 referencesearch.js 將某些動態資料定義為GridPanel的基礎:

  • readerCQ.Ext.data.JsonReader 為3欄以json格式讀取servlet回應的物件。

  • cmCQ.Ext.grid.ColumnModel 3欄的物件。

    「測試」欄儲存格可依使用編輯器定義的方式加以編輯:

    editor: new CQ.Ext.form.TextField({})

  • 欄可排序:

    cm.defaultSortable = true;

  • storeCQ.Ext.data.GroupingStore 物件:

    • 它會呼叫註冊於「 」的servlet以取得其資料 /bin/querybuilder.json",其中幾個參數用於篩選查詢
    • 其基礎為 reader預先定義
    • 表格會根據​jcr:path​按升序列
  • gridPanelCQ.Ext.grid.EditorGridPanel 可編輯的物件:

    • 其基礎為預先定義 store 和列模型 cm

    • 一次只能選取一列:

      sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

    • the afteredit 接聽程式會在「測試​已編輯「 」列:

      • 屬性' testjcr:path「 」欄是在儲存庫中使用儲存格的值設定
      • 如果POST成功,則會將值新增至 store 對象,否則它被拒絕

本頁內容