使用和擴展Widget(傳統UI)

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

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

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

如需AEM中所有可用小工具的完整參考,請參閱小工具集API檔案或現有xtypes🔗清單。 此外,在Sencha網站(該架構的擁有者)上也提供許多顯示如何使用ExtJS架構的範例。

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

套件包含下列範例:

  • 使 用現成可用的小工具建立基本對話方塊。
  • 使 用現成可用的Widget和自訂的JavaScript邏輯建立動態對話方塊。
  • 自訂Widget為基礎的對話方塊。
  • 樹面板在給定路徑下顯示JCR樹。
  • 網格面板以表格格式顯示資料。
注意

Adobe Experience Manager的傳統UI是以ExtJS 3.4.0為基礎而建置。

注意

本頁面說明傳統UI中Widget的使用方式。 Adobe建議您根據Coral UIGranite UI運用現代化的觸控式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>, ..."/>

    其中<category-nameX>是客戶端庫的名稱。

  • 僅包含javascript程式碼:

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

如需詳細資訊,請參閱<ui:includeClientLib>標籤的說明。

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

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

範例快速入門

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

  1. 在您的AEM例項中,從Package Share下載名為​Using ExtJS Widget(v01)​的套件並安裝該套件。 它會在存放庫的/apps下建立專案extjstraining

  2. 將包含指令碼(js)和樣式表(css)的客戶端庫包括在geometrixx頁jsp的head標籤中,因為將示例元件包含在​Geometrixx​分支的新頁中:

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

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

  3. /content/geometrixx/en/products下方的​Geometrixx​分支中建立新頁面,並呼叫它​使用ExtJS介面工具集

  4. 進入設計模式,將名為​Using ExtJS Widgets​的組的所有元件添加到Geometrixx設計中

  5. 在編輯模式中返回:組​使用ExtJS Widget​的元件可在Sidekick中使用。

注意

本頁的範例以Geometrixx範例內容為基礎,這些內容已由We.Retail取代,不再隨AEM提供。 有關如何下載和安裝Geometrixx,請參閱文檔We.Retail Reference Implementation

基本對話框

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

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

Sidekick中​使用ExtJS Widget​組的第一個元件稱為​1。 Dialog Basics,包含四個基本對話方塊,這些對話方塊是使用現成可用的Widget建置,而不使用自訂的Javascript邏輯。 對話框儲存在/apps/extjstraining/components/dialogbasics下。 基本對話方塊為:

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

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

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

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

納入​1。 範例頁面中的Dialog Basics​元件:

  1. 新增​1。 從 Sidekick 的「使用ExtJS Widget」標籤,將Dialog Basics 元件導向至範例頁面。

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

元件顯示如下:

chlimage_1-135

範例1:完整對話框

Full​對話框顯示一個窗口,其中包含三個頁簽,每個頁簽都包含兩個文本欄位。 這是​Dialog Basics​元件的預設對話框。 其特點是:

  • 由節點定義:節點類型= 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. 將​Dialog Basics​元件的對話框替換為​Single Panel​對話框:

    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. 將​Dialog Basics​元件的對話框替換為​Multi Panel​對話框:

    請依照範例2所述的步驟操作:單一面板對話方塊

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

screen_shot_2012-01-31at50119pm

範例4:富對話框

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

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

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

  • 第一個頁簽具有dialogfieldset介面工具集(具有textfield)和selection介面工具集(具有3個選項),以及具有textarea介面工具集的可折疊dialogfieldset

  • 第二個頁簽具有帶4個textfield小工具的dialogfieldset小工具,以及帶2個textfield小工具的可折疊dialogfieldset

  • 由節點定義:

    /apps/extjstraining/components/dialogbasics/rich

  • 會透過要求:

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

要使用​Rich​對話框,請執行以下操作:

  1. 將​Dialog Basics​元件的對話框替換為​Rich​對話框:

    請依照範例2所述的步驟操作:單一面板對話方塊

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

screen_shot_2012-01-31at50429 pmscreen_shot_2012-01-31at50519pm

動態對話框

Sidekick中​使用ExtJS Widget​組的第二個元件稱為​2。 動態對話框,包括三個使用現成小工具構建的動態對話框,以及使用自定義javascript邏輯​構建的。 對話框儲存在/apps/extjstraining/components/dynamicdialogs下。 動態對話方塊為:

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

納入​2。 範例頁面上的動態對話方塊​元件:

  1. 新增​2。 從 Sidekick 的「使用ExtJS Widget」標籤中​使用ExtJS Widget範例頁面的動態對話​元件。

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

元件顯示如下:

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" event):

    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:任意對話框

對話方塊通常會顯示基礎元件的內容。 此處描述的對話方塊(稱為​Anvertial​對話框)從不同元件提取內容。

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

其主要特點是:

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

  • 顯示1個面板構件(節點類型= cq:Widget, xtype = tabpanel),其中1個面板(節點類型= cq:Panel

  • 該面板具有智慧檔案介面工具集(節點類型= 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程式碼來實作,如下所示:

  • ownerdraw widget具有「 loadcontent」監聽器,該監聽器顯示包含元件的頁面資訊以及載入內容時智慧檔案widget引用的資產:

    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)。

  • 該面板具有一個選擇/複選框構件(節點類型= cq:Widget, xtype = selection,類型= checkbox)和一個可折疊的對話框欄位集構件(節點類型= 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),另一個顯示更改選擇時的dialogfieldset(" selectionchanged" event):

    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介面工具集​套件包含三個對話方塊,分別使用三個不同的自訂介面工具集:

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

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

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

自訂Widget和外掛程式包含在名為​3的元件中。​使用ExtJS Widget 套件的自訂Widget。 若要將此元件包含至範例頁面:

  1. 新增​3。 從 Sidekick 的「使用ExtJS Widget」標籤的​使用ExtJS Widget​元件到範例頁面。

  2. 元件顯示標題和一些文本,並在按一下​PROPERTIES​連結時,顯示儲存在儲存庫中的段落的屬性。 再按一下會隱藏屬性。

    元件顯示如下:

chlimage_1-137

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

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

自訂多欄位​介面工具集對話方塊:

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

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

  • 此面板具有multifield介面工具集(節點類型= 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中定義:

      /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):

  • 是名為Ejst.CustomWidget的Javascript物件。

  • CustomWidget.js javascript檔案中定義:

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

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

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

  • 覆蓋CQ.Ext.Component#initComponent以添加3個欄位:

    • allowField 是CQ. form. 「selectionobject」類型的。optionsProvider是Selection對象的配置,在對話框中定義的CustomWidget的optionsProvider配置已實例化
    • otherFieldCQ.Ext.form. TextFieldobject
  • 覆寫CQ.form.CompositeField的方法setValuegetValuegetRawValue,以便以下格式設定和檢索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)的表板Widget(節點類型= 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):

  • 是名為Ejst.CustomWidget的Javascript物件。

  • CustomBrowseField.js javascript檔案中定義:

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

  • 延伸CQ.Ext.form.TriggerField

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

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

  • 定義CQ.Ext.tree.TreePanel對象:

    • 它通過調用在/bin/wcm/siteadmin/tree.json註冊的servlet來獲取其資料。
    • 其根為" apps/extjstraining"。
  • 定義window對象(CQ.Ext.Window):

    • 根據預先定義的面板。
    • 具有​OK​按鈕,該按鈕設定選定路徑的值並隱藏面板。
  • 窗口錨定在​Path​欄位下。

  • 所選路徑將從瀏覽欄位傳遞到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外掛程式:

  • 是名為Ejst.InsertTextPlugin的Javascript物件。

  • 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);

  • Ejst.InsertTextPlugin.Dialog物件定義按一下外掛程式按鈕時開啟的對話方塊。 對話框由面板、表單、文本欄位和2個按鈕(OK​和​Cancel)組成。

要使用基於​RTF編輯器(RTE)插件​的對話框,請執行以下操作:

  1. 使用​RTF編輯器(RTE)插件​基於對話框的​自定義Widget​元件的對話框替換:

    請依照範例2所述的步驟操作:單一面板對話方塊

  2. 編輯元件。

  3. 按一下右側的最後一個圖示(四個箭頭的圖示)。 輸入路徑,然後按一下​OK:

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

  4. 按一下​OK​以關閉RTF編輯器。

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

screen_shot_2012-02-01at120254pm

注意

此範例僅顯示如何實作邏輯的用戶端部分:然後,必須在伺服器端明確剖析預留位置([text])(例如在元件JSP中)。

樹概覽

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

要將​樹概述​元件包含到示例頁:

  1. 新增​4。 從 Sidekick 中的​使用ExtJS Widget 標籤到範例頁面的樹狀結構概述​元件。

  2. 元件隨即顯示:

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

元件顯示如下:

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。 從 Sidekick 中的​使用ExtJS Widget 標籤到範例頁面的格線概述​元件。

  2. 元件隨即顯示:

    • 帶有文本的標題
    • a 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不存在,則通過調用getGridPanel()方法來定義CQ.Ext.grid.GridPanel對象(gridPanel)(請參見下面)。 此方法在defaultgrid.js中定義。

  • grid 是以 CQ.Ext.Window預先定義的GridPanel為基礎的物件,且會顯示: grid.show();

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

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

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

  • store 是耗 CQ.Ext.data.Store 用的物 myData件。

  • store 已載入記憶體中:

    store.load();

  • gridPanel 是會 CQ.Ext.grid.GridPanel 使用的物件 store:

    • 欄寬隨時會重新比例:

      forceFit: true

    • 一次只能選取一列:

      singleSelect:true

範例2:參考搜索網格

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

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

如前一節所述,窗口對象通過調用defaultgrid.js檔案中/apps/extjstraining/components/gridoverview/defaultgrid.js中定義的getGridPanel()方法來獲取其CQ.Ext.grid.GridPanel對象。 格線概述​元件提供了在/apps/extjstraining/components/gridoverview/referencesearch.jsreferencesearch.js檔案中定義的getGridPanel()方法的不同實現。 切換元件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(referencesearch.js)中引用的javascript代碼定義了從元件jsp調用的getGridPanel()方法,並基於從儲存庫動態檢索的資料返回CQ.Ext.grid.GridPanel對象。 referencesearch.js中的邏輯將某些動態資料定義為GridPanel的基礎:

  • reader 是物 CQ.Ext.data.JsonReader 件,可讀取3欄json格式的servlet回應。

  • cm 是3 CQ.Ext.grid.ColumnModel 欄的物件。

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

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

  • 欄可排序:

    cm.defaultSortable = true;

  • store 是物 CQ.Ext.data.GroupingStore 件:

    • 它會呼叫註冊於" /bin/querybuilder.json"的servlet,並使用一些用於篩選查詢的參數來取得其資料
    • 它以reader為基礎,預先定義
    • 表按「jcr:path」列的升序排序
  • gridPanel 是可 CQ.Ext.grid.EditorGridPanel 編輯的物件:

    • 它以預定義的store和列模型cm為基礎

    • 一次只能選取一列:

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

    • afteredit接聽程式確保在「Test」欄中的儲存格已編輯後:

      • 儲存庫中設定了由「jcr:path」列定義的路徑上節點的屬性「 test」,其值為單元格
      • 如果POST成功,則值將添加到store對象,否則它將被拒絕

本頁內容