Uso y ampliación de utilidades (IU clásica) using-and-extending-widgets-classic-ui

para incluir tanto el código de javascript como las hojas de estilo:

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

donde <category-nameX> es el nombre de la biblioteca del lado del cliente.

para incluir solo código javascript:

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

el cuadro de diálogo Completo ( full nodo): muestra una ventana con 3 pestañas, cada una con 2 campos de texto.

el cuadro de diálogo Panel único( singlepanel nodo): muestra una ventana con una ficha que tiene 2 campos de texto.

el cuadro de diálogo Panel múltiple( multipanel nodo): su visualización es la misma que el cuadro de diálogo Completo pero está diseñada de forma diferente.

Cuadro de diálogo Diseño( design nodo): muestra una ventana con 2 pestañas. La primera ficha tiene un campo de texto, un menú desplegable y un área de texto contraíble. La segunda ficha tiene un conjunto de campos con 4 campos de texto y un conjunto de campos contraíble con 2 campos de texto.

Está definido por un nodo: tipo de nodo = cq:Dialog, xtype = dialog.

Muestra 3 pestañas (tipo de nodo = cq:Panel).

Cada ficha tiene 2 campos de texto (tipo de nodo = cq:Widget, xtype = textfield).

Se define mediante el nodo :

/apps/extjstraining/components/dialogbasics/full

Se procesa en formato JSON solicitando:

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

Muestra 1 ficha (tipo de nodo = cq:Dialog, xtype = panel)

La pestaña tiene 2 campos de texto (tipo de nodo = cq:Widget, xtype = textfield)

Se define mediante el nodo :

/apps/extjstraining/components/dialogbasics/singlepanel

Se procesa en formato json solicitando:

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

Una ventaja sobre Diálogo completo es que se necesita menos configuración.

Uso recomendado: para cuadros de diálogo simples que muestran información o que solo tienen unos pocos campos.

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = tabpanel).

Muestra 3 pestañas (tipo de nodo = cq:Panel).

Cada ficha tiene 2 campos de texto (tipo de nodo = cq:Widget, xtype = textfield).

Se define mediante el nodo :

/apps/extjstraining/components/dialogbasics/multipanel

Se procesa en formato json solicitando:

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

Una ventaja sobre Diálogo completo es que tiene una estructura simplificada.

Uso recomendado: para los cuadros de diálogo multipestaña.

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 2 pestañas (tipo de nodo = cq:Panel).

La primera pestaña tiene un dialogfieldset widget con un textfield y selection widget con 3 opciones y un contraíble dialogfieldset con un textarea para abrir el Navegador.

La segunda pestaña tiene un dialogfieldset widget con 4 textfield widgets y un contraíble dialogfieldset con 2 textfield widgets.

Se define mediante el nodo :

/apps/extjstraining/components/dialogbasics/rich

Se procesa en formato json solicitando:

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

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 2 pestañas (tipo de nodo = cq:Panel): 1 pestaña de selección, la segunda pestaña depende de la selección de la primera pestaña (3 opciones).

Tiene 3 pestañas opcionales (tipo de nodo = cq:Panel), cada uno tiene 2 campos de texto (tipo de nodo = cq:Widget, xtype = textfield). Solo se muestra una pestaña opcional a la vez.

Se define mediante la variable switchtabs en:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Se procesa en formato json solicitando:

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

El nodo de diálogo tiene un " beforeshow" oyente que oculta todas las pestañas opcionales antes de que se muestre el cuadro de diálogo:

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

dialog.items.get(0) obtiene el panel de tabla que contiene el panel de selección y los 3 paneles opcionales.

La variable Ejst.x2 se define en la variable exercises.js en:

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

En el Ejst.x2.manageTabs() como el valor de index es -1, todas las pestañas opcionales están ocultas (i va del 1 al 3).

La pestaña de selección tiene 2 oyentes: uno que muestra la ficha seleccionada cuando se carga el cuadro de diálogo (" loadcontent") y una que muestre la ficha seleccionada cuando se cambia la selección (" selectionchanged"):

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

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

En el Ejst.x2.showTab() método:

field.findParentByType('tabpanel') obtiene el panel de tabla que contiene todas las pestañas ( field representa el widget de selección)

field.getValue() obtiene el valor de la selección, por ejemplo: tab2

Ejst.x2.manageTabs() muestra la ficha seleccionada.

Cada ficha opcional tiene un oyente que oculta la pestaña en " render" evento:

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

En el Ejst.x2.hideTab() método:

tabPanel es el panel de tabla que contiene todas las pestañas

index es el índice de la pestaña opcional

tabPanel.hideTabStripItem(index) oculta la pestaña

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 1 widget de panel de tabla (tipo de nodo = cq:Widget, xtype = tabpanel) con 1 panel (tipo de nodo = cq:Panel)

El panel tiene un widget de archivos inteligentes (tipo de nodo = cq:Widget, xtype = smartfile) y un widget de dibujo del propietario (tipo de nodo = cq:Widget, xtype = ownerdraw)

Se define mediante la variable arbitrary en:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Se procesa en formato json solicitando:

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

El widget de dibujo de propietario tiene un " loadcontent" oyente que muestra información sobre la página que contiene el componente y el recurso al que hace referencia el widget de archivos inteligentes cuando se carga el contenido:

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

field se define con el objeto ownerdraw

path se configura con la ruta de contenido del componente (p. ej.: /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

La variable Ejst.x2 se define en la variable exercises.js en:

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

En el Ejst.x2.showInfo() método:

pagePath es la ruta de la página que contiene el componente

pageInfo representa las propiedades de página en formato json

reference es la ruta del recurso al que se hace referencia

metadata representa los metadatos del recurso en formato json

ownerdraw.getEl().update(html); muestra el html creado en el cuadro de diálogo

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 1 widget de panel de tabla (tipo de nodo = cq:Widget, xtype = tabpanel) con 1 panel (tipo de nodo = cq:Panel).

El panel tiene un widget de selección/casilla de verificación (tipo de nodo = cq:Widget, xtype = selection, tipo = checkbox) y un widget de conjunto de cuadros de diálogo contraíble (tipo de nodo = cq:Widget, xtype = dialogfieldset) que está oculto de forma predeterminada, con 2 utilidades de campo de texto (tipo de nodo = cq:Widget, xtype = textfield).

Se define mediante la variable togglefields en:

/apps/extjstraining/components/dynamicdialogs/togglefields

Se procesa en formato json solicitando:

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

la pestaña selección tiene 2 oyentes: uno que muestra el conjunto de campos de diálogo cuando se carga el contenido (" loadcontent") y una que muestre el conjunto de campos de diálogo cuando se cambia la selección (" selectionchanged"):

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

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

La variable Ejst.x2 se define en la variable exercises.js en:

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

En el Ejst.x2.toggleFieldSet() método:

• box es el objeto de selección
• panel es el panel que contiene la selección y los widgets dialogfieldset
• fieldSet es el objeto dialogfieldset
• show es el valor de la selección (verdadero o falso)
• basado en ' show' el cuadro de diálogo se muestra o no

el cuadro de diálogo Campos múltiples ( multifield ) muestra una ventana con una pestaña. La pestaña tiene un widget de varios campos personalizado que tiene dos campos: un menú desplegable con dos opciones y un campo de texto. Ya que se basa en la configuración predeterminada multifield (que solo tiene un campo de texto), tiene todas las características de la multifield para abrir el Navegador.

el cuadro de diálogo Examinar árbol ( treebrowse ) muestra una ventana con una ficha que contiene un widget de exploración de rutas: al hacer clic en la flecha, se abre una ventana en la que puede examinar una jerarquía y seleccionar un elemento. A continuación, la ruta del elemento se agrega al campo de ruta y se mantiene cuando se cierra el cuadro de diálogo.

un cuadro de diálogo basado en el complemento Editor de texto enriquecido (nodo rteplugin) que agrega un botón personalizado al Editor de texto enriquecido para insertar texto personalizado en el texto principal. Consiste en un richtext de una función personalizada que se añade a través del mecanismo de complementos RTE.

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 1 widget de panel de tabla (tipo de nodo = cq:Widget, xtype = tabpanel) que contiene un panel (tipo de nodo = cq:Widget, xtype = panel).

El panel tiene un multifield widget (tipo de nodo = cq:Widget, xtype = multifield).

La variable multifield El widget tiene un campo dconfig (tipo de nodo = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) que se basa en el xtype personalizado ' ejstcustom':

• ' fieldconfig' es una opción de configuración de la variable CQ.form.MultiField objeto.

• ' optionsProvider' es una configuración de la variable ejstcustom para abrir el Navegador. Se configura con la variable Ejst.x3.provideOptions método definido en exercises.js en:

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

  y devuelve 2 opciones.

Se define mediante la variable multifield en:

/apps/extjstraining/components/customwidgets/multifield

Se procesa en formato json solicitando:

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

Es un objeto de javascript llamado Ejst.CustomWidget.

Se define en la variable CustomWidget.js archivo javascript en:

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

Amplía el CQ.form.CompositeField para abrir el Navegador.

Tiene 3 campos: hiddenField (Campo de texto), allowField (ComboBox) y otherField (Campo de texto)

Anulaciones CQ.Ext.Component#initComponent para añadir los 3 campos:

• allowField es CQ.form.Selection objeto de tipo "select". optionsProvider es una configuración del objeto Selection a la que se crea una instancia con la configuración optionsProvider del widget personalizado definido en el cuadro de diálogo
• otherField es CQ.Ext.form.TextField object

Anula los métodos setValue, getValue y getRawValue de CQ.form.CompositeField para establecer y recuperar el valor de CustomWidget con el formato :

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

Se registra como ' ejstcustom' xtype:

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

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = dialog).

Muestra 1 widget de panel de tabla (tipo de nodo = cq:Widget, xtype = tabpanel) que contiene un panel (tipo de nodo = cq:Widget, xtype = panel).

El panel tiene un widget personalizado (tipo de nodo = cq:Widget, xtype = ejstbrowse)

Se define mediante la variable treebrowse en:

/apps/extjstraining/components/customwidgets/treebrowse

Se procesa en formato json solicitando:

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

Es un objeto de javascript llamado Ejst.CustomWidget.

Se define en la variable CustomBrowseField.js archivo javascript en:

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

Extensiones CQ.Ext.form.TriggerField.

Define una ventana de navegación llamada browseWindow.

Anulaciones CQ.Ext.form.TriggerField para mostrar la ventana de navegación cuando se hace clic en la flecha.

Define un CQ.Ext.tree.TreePanel objeto:

• Obtiene sus datos llamando al servlet registrado en /bin/wcm/siteadmin/tree.json.
• Su raíz es " apps/extjstraining".

Define un window objeto (CQ.Ext.Window):

• Basado en el panel predefinido.
• Tiene un OK que define el valor de la ruta seleccionada y oculta el panel.

La ventana está anclada debajo del Ruta campo .

La ruta seleccionada se pasa del campo Examinar a la ventana de show evento.

Se registra como ' ejstbrowse' xtype:

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

Se define mediante el nodo replugin en:

/apps/extjstraining/components/customwidgets/rteplugin

Se procesa en formato json solicitando:

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

La variable rtePlugins el nodo tiene un nodo secundario inserttext (tipo de nodo = nt:unstructured) que recibe el nombre del complemento. Tiene una propiedad denominada features, que define qué características del complemento están disponibles para RTE.

Es un objeto de javascript llamado Ejst.InsertTextPlugin.

Se define en la variable InsertTextPlugin.js archivo javascript en:

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

Amplía el CQ.form.rte.plugins.Plugin objeto.

Los siguientes métodos definen la variable CQ.form.rte.plugins.Plugin y se anulan en el complemento de implementación:

• getFeatures() devuelve una matriz de todas las funciones que pone a disposición el complemento.
• initializeUI() agrega el nuevo botón a la barra de herramientas de RTE.
• notifyPluginConfig() muestra título y texto cuando se sitúa el botón sobre él.
• execute() cuando se hace clic en el botón y realiza la acción del complemento: muestra una ventana que se utiliza para definir el texto que se va a incluir.

insertText() inserta un texto utilizando el objeto de diálogo correspondiente Ejst.InsertTextPlugin.Dialog (ver más adelante).

executeInsertText() es invocado por el apply() método del cuadro de diálogo, que se activa cuando se activa la variable OK se hace clic en el botón .

Se registra como ' inserttext' plugin:

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

el Ejst.InsertTextPlugin.Dialog define el cuadro de diálogo que se abre cuando se hace clic en el botón del complemento. El cuadro de diálogo consta de un panel, un formulario, un campo de texto y 2 botones (OK y Cancelar).

Se define en:

/apps/extjstraining/components/treeoverview

Su cuadro de diálogo permite establecer el tamaño de la ventana y acoplar/desacoplar la ventana (ver detalles a continuación).

Recupera las propiedades de ancho, alto y acoplado del repositorio.

Muestra texto sobre el formato de datos de descripción general del árbol.

Incrusta la lógica de ventana en el jsp del componente entre las etiquetas javascript.

Se define en:

apps/extjstraining/components/treeoverview/content.jsp

Define un tree intentando recuperar una ventana de árbol de la página.

Si la ventana que muestra el árbol no existe, treePanel (CQ.Ext.tree.TreePanel):

• treePanel contiene los datos que se utilizan para crear la ventana.

• Los datos se recuperan llamando al servlet registrado en:

  /bin/wcm/siteadmin/tree.json

La variable beforeload listener se asegura de que el nodo en el que se ha hecho clic se carga.

root apps/extjstraining

tree (CQ.Ext.Window) se configura en función del treePanely se muestra con:

tree.show();

Si la ventana ya existe, se muestra en función del ancho, la altura y las propiedades acopladas recuperadas del repositorio.

Muestra una ficha con 2 campos para definir el tamaño (anchura y altura) de la ventana de información general del árbol y un campo para acoplar/desacoplar la ventana

Está definido por un nodo (tipo de nodo = cq:Dialog, xtype = panel).

El panel tiene un widget de campo de tamaño (tipo de nodo = cq:Widget, xtype = sizefield) y un widget de selección (tipo de nodo = cq:Widget, xtype = selection, tipo = radio) con 2 opciones (true/false)

Se define mediante el nodo de diálogo en:

/apps/extjstraining/components/treeoverview/dialog

Se procesa en formato json solicitando:

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

Se muestra de la siguiente manera:

Se define en:

/apps/extjstraining/components/gridoverview

Su cuadro de diálogo permite definir el tamaño de la ventana y acoplar/desacoplar la ventana.

Recupera las propiedades de ancho, alto y acoplado del repositorio.

Muestra texto como introducción al formato de datos de información general de la cuadrícula.

Hace referencia al código javascript que define el objeto GridPanel:

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

defaultgrid.js define algunos datos estáticos como una base para el objeto GridPanel.

Incrusta código javascript entre etiquetas javascript que define el objeto Window que consume el objeto GridPanel.

Se define en:

apps/extjstraining/components/gridoverview/content.jsp

Define el grid intentando recuperar el componente de ventana de la página:

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

If grid no existe, un CQ.Ext.grid.GridPanel objeto ( gridPanel) se define llamando a la función getGridPanel() método (consulte a continuación). Este método se define en defaultgrid.js.

grid es CQ.Ext.Windowbasado en el panel de cuadrícula predefinido y se muestra: grid.show();

If grid ya existe, se muestra en función de la anchura, la altura y las propiedades acopladas recuperadas del repositorio.

myData es una matriz de datos estáticos con formato de tabla de 5 columnas y 4 filas.

store es CQ.Ext.data.Store objeto que consume myData.

store se carga en la memoria:

store.load();

gridPanel es CQ.Ext.grid.GridPanel objeto que consume store:

• los anchos de columna se vuelven a asignar en todo momento:

  forceFit: true

• solo se puede seleccionar una fila a la vez:

  singleSelect:true

reader es CQ.Ext.data.JsonReader objeto que lee la respuesta del servlet en formato json para 3 columnas.

cm es CQ.Ext.grid.ColumnModel para 3 columnas.

Las celdas de la columna "Prueba" se pueden editar tal como se definen con un editor:

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

las columnas se pueden ordenar:

cm.defaultSortable = true;

store es CQ.Ext.data.GroupingStore objeto:

• obtiene sus datos llamando al servlet registrado en " /bin/querybuilder.json" con algunos parámetros utilizados para filtrar la consulta
• se basa en reader, definido previamente
• la tabla se ordena según el 'jcr:path' en orden ascendente

gridPanel es CQ.Ext.grid.EditorGridPanel objeto que se puede editar:

• se basa en el store y en el modelo de columna cm

• solo se puede seleccionar una fila a la vez:

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

• el afteredit el listener se asegura de que, después de una celda de la sección Prueba" se ha editado la columna:

  • la propiedad ' test' del nodo en la ruta definida por la columna "jcr:path" se establece en el repositorio con el valor de la celda
  • si el POST se realiza correctamente, el valor se agrega al objeto store; de lo contrario, se rechaza