Using and Extending Widgets (Classic UI) using-and-extending-widgets-classic-ui

to include both javascript code and stylesheets:

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

where <category-nameX> is the name of the client-sided library.

to only include javascript code:

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

the Full dialog ( full node): it displays a window with 3 tabs, each tab having 2 text fields.

the Single Panel dialog( singlepanel node): it displays a window with 1 tab that has 2 text fields.

the Multi Panel dialog( multipanel node): its display is the same as the Full dialog but it is built differently.

the Design dialog( design node): it displays a window with 2 tabs. The first tab has a text field, a drop-down menu and a collapsible textarea. The second tab has a field set with 4 text fields and a collapsible field set with 2 text fields.

Is defined by a node: node type = cq:Dialog, xtype = dialog.

Displays 3 tabs (node type = cq:Panel).

Each tab has 2 textfields (node type = cq:Widget, xtype = textfield).

Is defined by the node:

/apps/extjstraining/components/dialogbasics/full

Is rendered in JSON format by requesting:

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

Displays 1 tab (node type = cq:Dialog, xtype = panel)

The tab has 2 textfields (node type = cq:Widget, xtype = textfield)

Is defined by the node:

/apps/extjstraining/components/dialogbasics/singlepanel

Is rendered in json format by requesting:

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

One advantage over the Full Dialog is that less configuration is needed.

Recommended use: for simple dialogs that display information or only have just a few fields.

Is defined by a node (node type = cq:Dialog, xtype = tabpanel).

Displays 3 tabs (node type = cq:Panel).

Each tab has 2 textfields (node type = cq:Widget, xtype = textfield).

Is defined by the node:

/apps/extjstraining/components/dialogbasics/multipanel

Is rendered in json format by requesting:

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

One advantage over the Full Dialog is that it has a simplified structure.

Recommended use: for multi-tab dialogs.

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 2 tabs (node type = cq:Panel).

The first tab has a dialogfieldset widget with a textfield and a selection widget with 3 options, and a collapsible dialogfieldset with a textarea widget.

The second tab has a dialogfieldset widget with 4 textfield widgets, and a collapsible dialogfieldset with 2 textfield widgets.

Is defined by the node:

/apps/extjstraining/components/dialogbasics/rich

Is rendered in json format by requesting:

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

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 2 tabs (node type = cq:Panel): 1 selection tab, the 2nd tab depends on the selection in the 1st tab (3 options).

Has 3 optional tabs (node type = cq:Panel), each one has 2 textfields (node type = cq:Widget, xtype = textfield). Only one optional tab is displayed at a time.

Is defined by the switchtabs node at:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Is rendered in json format by requesting:

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

The dialog node has a " beforeshow" listener that hides all the optional tabs before the dialog is shown:

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

dialog.items.get(0) gets the tabpanel that contains the selection panel and the 3 optional panels.

The Ejst.x2 object is defined in the exercises.js file at:

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

In the Ejst.x2.manageTabs() method, as the value of index is -1, all the optional tabs are hidden (i goes from 1 to 3).

The selection tab has 2 listeners: one that shows the selected tab when the dialog is loaded (" loadcontent" event) and one that shows the selected tab when the selection is changed (" selectionchanged" event):

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

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

In the Ejst.x2.showTab() method:

field.findParentByType('tabpanel') gets the tabpanel that contains all the tabs ( field represents the selection widget)

field.getValue() gets the value of the selection, e.g.: tab2

Ejst.x2.manageTabs() displays the selected tab.

Each optional tab has a listener that hides the tab on " render" event:

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

In the Ejst.x2.hideTab() method:

tabPanel is the tabpanel that contains all the tabs

index is the index of the optional tab

tabPanel.hideTabStripItem(index) hides the tab

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 1 tabpanel widget (node type = cq:Widget, xtype = tabpanel) with 1 panel (node type = cq:Panel)

The panel has a smartfile widget (node type = cq:Widget, xtype = smartfile) and an ownerdraw widget (node type = cq:Widget, xtype = ownerdraw)

Is defined by the arbitrary node at:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Is rendered in json format by requesting:

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

The ownerdraw widget has a " loadcontent" listener that shows info about the page containing the component and the asset referenced by the smartfile widget when the content is loaded:

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

field is set with the ownerdraw object

path is set with the content path of the component (e.g.: /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

The Ejst.x2 object is defined in the exercises.js file at:

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

In the Ejst.x2.showInfo() method:

pagePath is the path of the page containing the component

pageInfo represents the page properties in json format

reference is the path of the referenced asset

metadata represents the metadata of the asset in json format

ownerdraw.getEl().update(html); displays the created html in the dialog

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 1 tabpanel widget (node type = cq:Widget, xtype = tabpanel) with 1 panel (node type = cq:Panel).

The panel has a selection/checkbox widget (node type = cq:Widget, xtype = selection, type = checkbox) and a collapsible dialogfieldset widget (node type = cq:Widget, xtype = dialogfieldset) that is hidden by default, with 2 textfield widgets (node type = cq:Widget, xtype = textfield).

Is defined by the togglefields node at:

/apps/extjstraining/components/dynamicdialogs/togglefields

Is rendered in json format by requesting:

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

the selection tab has 2 listeners: one that shows the dialogfieldset when the content is loaded (" loadcontent" event) and one that shows the dialogfieldset when the selection is changed (" selectionchanged" event):

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

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

The Ejst.x2 object is defined in the exercises.js file at:

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

In the Ejst.x2.toggleFieldSet() method:

• box is the selection object
• panel is the panel containing the selection and the dialogfieldset widgets
• fieldSet is the dialogfieldset object
• show is the value of the selection (true or false)
• based on ’ show’ the dialogfieldset is displayed or not

the Multi Field dialog ( multifield node) displays a window with one tab. The tab has a customized multifield widget that has two fields: a drop-down menu with two options and a text field. As it is based on the out-of-the-box multifield widget (that only has a text field), it has all the features of the multifield widget.

the Tree Browse dialog ( treebrowse node) displays a window with one tab containing a path browse widget: when you click the arrow, a window opens up in which you can browse a hierarchy and select an item. The path of the item is then added to the path field and is persisted when the dialog is closed.

a Rich Text Editor Plug-in based dialog ( rteplugin node) that adds a custom button to the Rich Text Editor to insert some custom text to the main text. It consists of a richtext widget (RTE) and of a custom feature which is added through the RTE plug-in mechanism.

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 1 tabpanel widget (node type = cq:Widget, xtype = tabpanel) containing a panel (node type = cq:Widget, xtype = panel).

The panel has a multifield widget (node type = cq:Widget, xtype = multifield).

The multifield widget has a fieldconfig (node type = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) that is based on the custom xtype ’ ejstcustom’:

• ’ fieldconfig’ is a config option of the CQ.form.MultiField object.

• ’ optionsProvider’ is a configuration of the ejstcustom widget. It is set with the Ejst.x3.provideOptions method which is defined in exercises.js at:

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

  and returns 2 options.

Is defined by the multifield node at:

/apps/extjstraining/components/customwidgets/multifield

Is rendered in json format by requesting:

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

Is a javascript object called Ejst.CustomWidget.

Is defined in the CustomWidget.js javascript file at:

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

Extends the CQ.form.CompositeField widget.

Has 3 fields: hiddenField (Textfield), allowField (ComboBox) and otherField (Textfield)

Overrides CQ.Ext.Component#initComponent to add the 3 fields:

• allowField is a CQ.form.Selection object of type ‘select’. optionsProvider is a configuration of the Selection object that is instantiated with the optionsProvider configuration of the CustomWidget defined in the dialog
• otherField is a CQ.Ext.form.TextField object

Overrides the methods setValue, getValue and getRawValue of CQ.form.CompositeField in order to set and retrieve the value of CustomWidget with the format:

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

Registers itself as ’ ejstcustom’ xtype:

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

Is defined by a node (node type = cq:Dialog, xtype = dialog).

Displays 1 tabpanel widget (node type = cq:Widget, xtype = tabpanel) containing a panel (node type = cq:Widget, xtype = panel).

The panel has a custom widget (node type = cq:Widget, xtype = ejstbrowse)

Is defined by the treebrowse node at:

/apps/extjstraining/components/customwidgets/treebrowse

Is rendered in json format by requesting:

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

Is a javascript object called Ejst.CustomWidget.

Is defined in the CustomBrowseField.js javascript file at:

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

Extends CQ.Ext.form.TriggerField.

Defines a browse window called browseWindow.

Overrides CQ.Ext.form.TriggerField to show the browse window when the arrow is clicked.

Defines a CQ.Ext.tree.TreePanel object:

• It gets its data by calling the servlet registered at /bin/wcm/siteadmin/tree.json.
• Its root is " apps/extjstraining".

Defines a window object (CQ.Ext.Window):

• Based on the pre-defined panel.
• Has an OK button that sets the value of the selected path and hides the panel.

The window is anchored below the Path field.

The selected path is passed from the browse field to the window on show event.

Registers itself as ’ ejstbrowse’ xtype:

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

Is defined by the rteplugin node at:

/apps/extjstraining/components/customwidgets/rteplugin

Is rendered in json format by requesting:

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

The rtePlugins node has a child node inserttext (node type = nt:unstructured) that is named after the plugin. It has a property called features, that defines which of the plugin features are available to the RTE.

Is a javascript object called Ejst.InsertTextPlugin.

Is defined in the InsertTextPlugin.js javascript file at:

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

Extends the CQ.form.rte.plugins.Plugin object.

The following methods define the CQ.form.rte.plugins.Plugin object and are overridden in the implementing plugin:

• getFeatures() returns an array of all the features that the plugin makes available.
• initializeUI() adds the new button to the RTE toolbar.
• notifyPluginConfig() displays title and text when the button is hovered.
• execute() is called when the button is clicked and performs the plugin action: it displays a window that is used to define the text to be included.

insertText() inserts a text using the corresponding dialog object Ejst.InsertTextPlugin.Dialog (see afterwards).

executeInsertText() is called by the apply() method of the dialog, which is triggered when the OK button is clicked.

Registers itself as ’ inserttext’ plugin:

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

the Ejst.InsertTextPlugin.Dialog object defines the dialog that is opened when the plugin button is clicked. The dialog consists of a panel, a form, a textfield and 2 buttons (OK and Cancel).

Is defined at:

/apps/extjstraining/components/treeoverview

Its dialog enables to set the size of the window and to dock/undock the window (see details below).

Retrieves the width, heigth and docked properties from the repository.

Displays some text about the tree overview data format.

Embeds the window logic in the component jsp between javascript tags.

Is defined at:

apps/extjstraining/components/treeoverview/content.jsp

Defines a tree object by trying to retrieve a tree window from the page.

If the window displaying the tree does not exist, treePanel (CQ.Ext.tree.TreePanel) is created:

• treePanel contains the data that is used to create the window.
• The data are retrieved by calling the servlet registered at:
  /bin/wcm/siteadmin/tree.json

The beforeload listener makes sure the clicked node is loaded.

The root object sets the path apps/extjstraining as the tree root.

tree (CQ.Ext.Window) is set based on the pre-defined treePanel, and is displayed with:

tree.show();

If the window already exists, it is displayed based on the width, heigth and docked properties retrieved from the repository.

Displays 1 tab with 2 fields to set the size (width and heigth) of the tree overview window and 1 field to dock/undock the window

Is defined by a node (node type = cq:Dialog, xtype = panel).

The panel has a sizefield widget (node type = cq:Widget, xtype = sizefield) and a selection widget (node type = cq:Widget, xtype = selection, type = radio) with 2 options (true/false)

Is defined by the dialog node at:

/apps/extjstraining/components/treeoverview/dialog

Is rendered in json format by requesting:

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

Displays as follows:

Is defined at:

/apps/extjstraining/components/gridoverview

Its dialog enables to set the size of the window and to dock/undock the window.

Retrieves the width, heigth and docked properties from the repository.

Displays some text as introduction to the grid overview data format.

References javascript code that defines the GridPanel object:

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

defaultgrid.js defines some static data as a base for the GridPanel object.

Embeds javascript code between javascript tags that defines the Window object consuming the GridPanel object.

Is defined at:

apps/extjstraining/components/gridoverview/content.jsp

Defines the grid object by trying to retrieve the window component from the page:

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

If grid does not exist, a CQ.Ext.grid.GridPanel object ( gridPanel) is defined by calling the getGridPanel() method (see below). This method is defined in defaultgrid.js.

grid is a CQ.Ext.Windowobject, based on the pre-defined GridPanel, and is displayed: grid.show();

If grid already exists, it is displayed based on the width, height and docked properties retrieved from the repository.

myData is an array of static data formatted as a table of 5 columns and 4 rows.

store is a CQ.Ext.data.Store object that consumes myData.

store is loaded in memory:

store.load();

gridPanel is a CQ.Ext.grid.GridPanel object that consumes store:

• the column widths are re-proportioned at all times:

  forceFit: true

• only one row at a time can be selected:

  singleSelect:true

reader is a CQ.Ext.data.JsonReader object that reads the servlet response in json format for 3 columns.

cm is a CQ.Ext.grid.ColumnModel object for 3 columns.

The “Test” column cells can be edited as they are defined with an editor:

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

the columns are sortable:

cm.defaultSortable = true;

store is a CQ.Ext.data.GroupingStore object:

• it gets its data by calling the servlet registered at " /bin/querybuilder.json" with a few parameters used to filter the query
• it is based on reader, defined beforehand
• the table is sorted according to the ‘jcr:path’ column in ascending order

gridPanel is a CQ.Ext.grid.EditorGridPanel object that can be edited:

• it is based on the pre-defined store and on the column model cm

• only one row at a time can be selected:

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

• the afteredit listener makes sure that after a cell in the “Test” column has been edited:

  • the property ’ test’ of the node at the path defined by the “jcr:path” column is set in the repository with the value of the cell
  • if the POST is successful, the value is added to the store object, otherwise it is rejected