AEM Esta página describe el uso de widgets dentro de la interfaz de usuario clásica, que quedó obsoleta en la versión 6.4 de la.
El Adobe recomienda utilizar el moderno, IU táctil basado en IU de Coral y Granite UI.
La interfaz basada en web de Adobe Experience Manager AEM AJAX () utiliza la interfaz de usuario y otras tecnologías modernas de explorador para permitir que los autores puedan editar y dar formato WYSIWYG al contenido directamente en la página web.
AEM utiliza el ExtJS La biblioteca de widgets de, que proporciona los elementos de interfaz de usuario altamente pulidos que funcionan en todos los exploradores más importantes y permiten la creación de experiencias de interfaz de usuario de nivel de escritorio.
AEM AEM AEM Estos widgets se incluyen dentro de los elementos y, además de ser utilizados por el propio, pueden ser utilizados por cualquier sitio web creado mediante el uso de la herramienta de creación de páginas de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de la página de.
AEM Para obtener una referencia completa de todos los widgets disponibles en la documentación de, consulte la sección sobre la configuración de los widgets en la documentación de documentación de API de widget o el lista de xtype existentes. Además, hay muchos ejemplos disponibles en el que se muestra cómo utilizar el marco de ExtJS Sencha , el propietario del marco de trabajo.
Esta página ofrece información sobre cómo utilizar y ampliar widgets. En primer lugar, describe cómo incluir código del lado del cliente en una página. A continuación, se describen algunos componentes de muestra que se han creado para ilustrar algunos usos y extensiones básicos. Estos componentes están disponibles en el Uso de widgets de ExtJS paquete en Package Share.
El paquete incluye ejemplos de lo siguiente:
La IU clásica de Adobe Experience Manager se basa en ExtJS 3.4.0.
El JavaScript del lado del cliente y el código de la hoja de estilos deben colocarse en una biblioteca de cliente.
Para crear una biblioteca de cliente:
Cree un nodo a continuación /apps/<project>
con las siguientes propiedades:
Note: <category-name> is the name of the custom library (for example, "cq.extjstraining") and is used to include the library on the page.
Abajo clientlib
cree el css
y js
carpetas (nt:folder).
Abajo clientlib
cree el css.txt
y js.txt
archivos (nt:files). Estos archivos .txt enumeran los archivos que se incluyen en la biblioteca.
Editar js.txt
: debe comenzar con ' #base=js
' seguido de la lista de los archivos agregados por el servicio de biblioteca del cliente de CQ, por ejemplo:
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
Editar css.txt
: debe comenzar con ' #base=css
' seguido de la lista de los archivos agregados por el servicio de biblioteca del cliente de CQ, por ejemplo:
#base=css
components.css
Debajo de js
, coloque los archivos JavaScript que pertenecen a la biblioteca.
Debajo de css
carpeta, coloque el .css
archivos y los recursos utilizados por los archivos css (por ejemplo, my_icon.png
).
El manejo de las hojas de estilo descritas anteriormente es opcional.
Para incluir la biblioteca de cliente en el jsp del componente de página:
para incluir hojas de estilos y código JavaScript:
<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>"/>
Para obtener más información, consulte la descripción del <ui:includeclientlib> etiqueta.
A veces, una biblioteca de cliente solo debe estar disponible en el modo de autor y debe excluirse en el modo de publicación. Se puede lograr de la siguiente manera:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Para seguir los tutoriales de esta página, instale el paquete Uso de widgets de ExtJS AEM en una instancia de local y cree una página de muestra en la que se incluyan los componentes. Para ello, haga lo siguiente:
extjstraining
abajo /apps
en el repositorio./apps/geometrixx/components/page/headlibs.jsp
y añada el cq.extjstraining
categoría a la existente <ui:includeClientLib>
como se indica a continuación:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
y llámalo Uso de widgets de ExtJS.Los ejemplos de esta página se basan en el contenido de muestra de la Geometrixx AEM, que ya no se envía con el que se ha sustituido por We.Retail. Consulte la Implementación de referencia de We.Retail para obtener información sobre cómo descargar e instalar Geometrixx.
Los cuadros de diálogo suelen utilizarse para editar contenido, pero también pueden mostrar información. Una manera fácil de ver un cuadro de diálogo completo es acceder a su representación en formato json. Para ello, dirija su explorador a:
https://localhost:4502/<path-to-dialog>.-1.json
El primer componente del Uso de widgets de ExtJS El grupo de la barra de tareas se llama 1. Conceptos básicos de diálogo e incluye cuatro cuadros de diálogo básicos creados con widgets predeterminados y sin lógica personalizada de JavaScript. Los cuadros de diálogo se almacenan a continuación /apps/extjstraining/components/dialogbasics
. Los cuadros de diálogo básicos son:
full
: muestra una ventana con tres pestañas, cada una con dos campos de texto.singlepanel
nodo): muestra una ventana con una pestaña que tiene dos campos de texto.multipanel
): su visualización es la misma que el cuadro de diálogo Completo, pero se crea de forma diferente.design
(nodo ): muestra una ventana con dos pestañas. La primera pestaña tiene un campo de texto, un menú desplegable y un área de texto contraíble. La segunda pestaña tiene un conjunto de campos con cuatro campos de texto y un conjunto de campos contraíbles con dos campos de texto.Incluya el 1. Conceptos básicos de diálogo en la página de muestra:
El componente se muestra de la siguiente manera:
El Completo muestra una ventana con tres pestañas, cada una con dos campos de texto. Es el cuadro de diálogo predeterminado de Conceptos básicos de diálogo componente. Sus características son:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
.cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/full
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
El cuadro de diálogo se muestra de la siguiente manera:
El Panel único El cuadro de diálogo muestra una ventana con una pestaña que tiene dos campos de texto. Sus características son:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)/apps/extjstraining/components/dialogbasics/singlepanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
Para usar el cuadro de diálogo Panel único:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
y cambiarle el nombre dialog
.El Panel múltiple tiene la misma visualización que el cuadro de diálogo Completo diálogo, pero se crea de forma diferente. Sus características son:
cq:Dialog
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
).cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/multipanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
Para usar el cuadro de diálogo Varios paneles:
El Rico muestra una ventana con dos pestañas. La primera pestaña tiene un campo de texto, un menú desplegable y un área de texto contraíble. La segunda pestaña tiene un conjunto de campos con cuatro campos de texto y un conjunto de campos contraíbles con dos campos de texto. Sus características son:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
). [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget con un [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
y una [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
widget con tres opciones y un plegable [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
con un [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
widget. [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
widget con cuatro [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widgets y un plegable dialogfieldset
con dos [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widgets./apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Para usar la variable Rico diálogo:
El segundo componente del Uso de widgets de ExtJS El grupo de la barra de tareas se llama 2. Cuadros de diálogo dinámicos e incluye tres cuadros de diálogo dinámicos creados con widgets y con lógica JavaScript personalizada. Los cuadros de diálogo se almacenan a continuación /apps/extjstraining/components/dynamicdialogs
. Los cuadros de diálogo dinámicos son:
switchtabs
(nodo ): muestra una ventana con dos pestañas. La primera pestaña tiene una selección de opción con tres opciones: cuando se selecciona una opción, se muestra una pestaña relacionada con la opción. La segunda pestaña tiene dos campos de texto.arbitrary
nodo): muestra una ventana con una pestaña. La pestaña tiene un campo para soltar o cargar un recurso y un campo que muestra información sobre la página contenedora y sobre el recurso si se hace referencia a uno.togglefield
nodo): muestra una ventana con una pestaña. La pestaña tiene una casilla de verificación: cuando se activa, se muestra un conjunto de campos con dos campos de texto.Para incluir la variable 2. Cuadros de diálogo dinámicos en la página de muestra:
El componente se muestra de la siguiente manera:
El Cambiar fichas muestra una ventana con dos pestañas. La primera pestaña tiene una selección de opción con tres opciones: cuando se selecciona una opción, se muestra una pestaña relacionada con la opción. La segunda pestaña tiene dos campos de texto.
Sus principales características son:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): una pestaña de selección, la segunda pestaña depende de la selección en la primera pestaña (tres opciones).cq:Panel
), cada uno tiene dos campos de texto (tipo de nodo = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
). Solo se muestra una pestaña opcional a la vez.switchtabs
nodo en:/apps/extjstraining/components/dynamicdialogs/switchtabs
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
La lógica se implementa mediante detectores de eventos y código JavaScript de la siguiente manera:
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 tabpanel
que contiene el panel de selección y los tres paneles opcionales.Ejst.x2
se define en la variable exercises.js
archivo en:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.manageTabs()
método, como valor de index
es -1, todas las pestañas opcionales están ocultas (va del 1 al 3).loadcontent
" evento ) y uno que muestra la ficha seleccionada cuando se cambia la selección (" selectionchanged
" (evento ):loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
Ejst.x2.showTab()
método,field.findParentByType('tabpanel')
obtiene el tabpanel
que contiene todas las pestañas ( field
representa el widget de selección)field.getValue()
obtiene el valor de la selección, por ejemplo, tab2Ejst.x2.manageTabs()
muestra la ficha seleccionada.render
" evento:render="function(tab){Ejst.x2.hideTab(tab);}"
Ejst.x2.hideTab()
método,tabPanel
es el tabpanel
que contiene todas las pestañasindex
es el índice de la pestaña opcionaltabPanel.hideTabStripItem(index)
oculta la pestañaSe muestra de la siguiente manera:
A menudo, un cuadro de diálogo muestra el contenido del componente subyacente. El cuadro de diálogo descrito aquí, denominado Arbitrario , extrae contenido de un componente diferente.
El Arbitrario El cuadro de diálogo muestra una ventana con una pestaña. La pestaña tiene dos campos: uno para soltar o cargar un recurso y otro que muestra información sobre la página contenedora y sobre el recurso si se ha hecho referencia a uno.
Sus principales características son:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nodo = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) con un panel (tipo de nodo = cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
) y un widget ownerdraw (tipo de nodo = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
nodo en:/apps/extjstraining/components/dynamicdialogs/arbitrary
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
La lógica se implementa mediante detectores de eventos y código JavaScript de la siguiente manera:
ownerdraw
el widget tiene un " loadcontent
"Listener que muestra información sobre la página que contiene el componente. Es decir, el recurso al que hace referencia el widget smartfile cuando se carga el contenido:loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
se configura con la variable ownerdraw
objetopath
se establece con la ruta de contenido del componente (por ejemplo, /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs
)Ejst.x2
se define en la variable exercises.js
archivo en:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.showInfo()
método,pagePath
es la ruta de la página que contiene el componente;pageInfo
representa las propiedades de la 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 diálogoPara usar la variable Arbitrario diálogo:
La pestaña tiene una casilla de verificación: cuando se activa, se muestra un conjunto de campos con dos campos de texto.
Sus principales características son:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nodo = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
) con un panel (tipo de nodo = cq:Panel
).cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = [checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
) y un widget de conjunto de campos de diálogo contraíble (tipo de nodo = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) que está oculto de forma predeterminada, con dos widgets de campo de texto (tipo de nodo = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
).togglefields
nodo en:/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
La lógica se implementa mediante detectores de eventos y código JavaScript de la siguiente manera:
loadcontent
") y uno que muestra el conjunto de campos de diálogo cuando se cambia la selección (" selectionchanged
" (evento ):loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
Ejst.x2
se define en la variable exercises.js
archivo en:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.toggleFieldSet()
método,box
es el objeto selection;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); se basa en ' show
' el conjunto de campos de diálogo se muestra o noPara usar la variable Alternar campos diálogo, haga lo siguiente:
AEM Los widgets listos para usar enviados con deben cubrir la mayoría de los casos de uso de los que se dispone de forma predeterminada y con los que se envían los. Sin embargo, a veces puede ser necesario crear un widget personalizado para cubrir un requisito específico de un proyecto. Se pueden crear widgets personalizados ampliando los existentes. Para ayudarle a empezar con estas personalizaciones, la variable Using ExtJS Widgets
incluye tres cuadros de diálogo que utilizan tres widgets personalizados diferentes:
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
widget (que solo tiene un campo de texto), tiene todas las características de la multifield
widget.treebrowse
nodo) muestra una ventana con una pestaña 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.rteplugin
) que agrega un botón personalizado al Editor de texto enriquecido para insertar texto personalizado en el texto principal. Consiste en un richtext
widget (RTE) y de una función personalizada que se añade mediante el mecanismo de complemento RTE.Los widgets personalizados y el complemento se incluyen en el componente llamado 3. Widgets personalizados de la Uso de widgets de ExtJS paquete. Para incluir este componente en la página de muestra:
El Multicampo personalizado el cuadro de diálogo basado en widgets muestra una ventana con una pestaña. La pestaña tiene un widget de varios campos personalizado que, a diferencia del estándar que tiene un campo, tiene dos campos: un menú desplegable con dos opciones y un campo de texto.
El Multicampo personalizado Cuadro de diálogo basado en widgets:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nodo = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) que contiene un panel (tipo de nodo = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).multifield
widget (tipo de nodo = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
).multifield
el widget tiene un fieldconfig (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 [CQ.form.MultiField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.MultiField)
objeto.
' optionsProvider
' es una configuración del ejstcustom
widget. Se configura con la variable Ejst.x3.provideOptions
método definido en el exercises.js
a las:
/apps/extjstraining/clientlib/js/exercises.js
y devuelve dos opciones.
multifield
nodo en:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
El personalizado multifield
widget (xtype = ejstcustom
):
Ejst.CustomWidget
CustomWidget.js
Archivo JavaScript en:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField)
widget.hiddenField
(Campo De Texto), allowField
(ComboBox) y otherField
(Campo de texto)CQ.Ext.Component#initComponent
para añadir los tres campos:
allowField
es un CQ.form.Selection objeto de tipo 'select'. optionsProvider es una configuración del objeto Selection que se crea una instancia con la configuración optionsProvider del CustomWidget definido en el cuadro de diálogootherField
es un CQ.Ext.form.TextField objetosetValue
, getValue
, y getRawValue
de CQ.form.CompositeField para establecer y recuperar el valor de CustomWidget con el formato:<allowField value>/<otherField value>, for example: 'Bla1/hello'
.ejstcustom
CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
Treebrowse
WidgetEl personalizado Treebrowse
el cuadro de diálogo basado en widgets muestra una ventana con una pestaña que contiene un widget de navegador de ruta personalizada. Al seleccionar 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.
El personalizado treebrowse
diálogo:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
widget (tipo de nodo = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) que contiene un panel (tipo de nodo = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = ejstbrowse
)treebrowse
nodo en:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
El widget de exploración del árbol personalizado (xtype = ejstbrowse
):
Ejst.CustomWidget
CustomBrowseField.js
Archivo JavaScript en:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
para mostrar la ventana examinar cuando se hace clic en la flecha./bin/wcm/siteadmin/tree.json
.apps/extjstraining
".window
objeto ( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
):
show
evento.ejstbrowse
’ xtype:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para usar la variable Exploración de árbol personalizada Cuadro de diálogo basado en widgets:
El Complemento Editor de texto enriquecido (RTE) El cuadro de diálogo basado en es un cuadro de diálogo basado en el Editor de texto enriquecido que tiene un botón personalizado para insertar texto personalizado entre corchetes. El texto personalizado se puede analizar mediante alguna lógica del lado del servidor (no implementada en este ejemplo), por ejemplo para agregar texto definido en la ruta determinada:
El Complemento RTE cuadro de diálogo basado:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
el nodo tiene un nodo secundario inserttext
(tipo de nodo = nt:unstructured
), que recibe su nombre del complemento. Tiene una propiedad llamada features
que define qué características del complemento están disponibles para RTE.El complemento RTE:
Ejst.InsertTextPlugin
InsertTextPlugin.js
Archivo JavaScript en:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
[CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
objeto. [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
y se anulan en el complemento de implementación:
getFeatures()
devuelve una matriz de todas las características que el complemento pone a disposición.initializeUI()
añade el nuevo botón a la barra de herramientas RTE.notifyPluginConfig()
muestra el título y el texto cuando se pasa el ratón por encima del botón.execute()
se llama 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 dialog correspondiente Ejst.InsertTextPlugin.Dialog
(ver más adelante).executeInsertText()
es invocado por apply()
del cuadro de diálogo, que se activa cuando la variable OK Haga clic en el botón.inserttext
’ complemento:CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
define el cuadro de diálogo que se abre al hacer clic en el botón del complemento. El cuadro de diálogo consta de un panel, un formulario, un campo de texto y dos botones (OK y Cancelar).Para usar la variable Complemento Editor de texto enriquecido (RTE) cuadro de diálogo basado:
El Complemento Editor de texto enriquecido (RTE) El cuadro de diálogo basado en se muestra de la siguiente manera:
Este ejemplo solo muestra cómo implementar la parte de la lógica del lado del cliente: los marcadores de posición ([texto]) deben analizarse explícitamente en el lado del servidor (por ejemplo, en el componente JSP).
[CQ.Ext.tree.TreePanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
El componente Información general de árbol incluido en Uso de widgets de ExtJS El paquete muestra cómo utilizar el TreePanel
para mostrar un árbol JCR bajo una ruta determinada. La propia ventana se puede acoplar/desacoplar. En este ejemplo, la lógica de ventana está incrustada en el componente jsp entre <script></script> etiquetas.
Para incluir la variable Resumen de árbol a la página de muestra:
El componente se muestra de la siguiente manera:
El componente Información general de árbol:
Se define en:
/apps/extjstraining/components/treeoverview
El cuadro de diálogo le permite establecer el tamaño de la ventana y acoplarla o desacoplarla (consulte los detalles a continuación).
El componente jsp:
apps/extjstraining/components/treeoverview/content.jsp
El código JavaScript incrustado en el componente jsp:
tree
al intentar recuperar una ventana de árbol de la página.treePanel
(CQ.Ext.tree.TreePanel) se ha creado:
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
beforeload
El listener se asegura de que se ha cargado el nodo seleccionado.root
establece la ruta apps/extjstraining
como raíz de árbol.tree
( [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
) se establece en función del valor predefinido treePanel
, y se muestra con:tree.show();
El cuadro de diálogo de componentes:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = [sizefield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#sizefield)
) y un widget de selección (tipo de nodo = cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = radio
) con dos opciones (true/false)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Un panel Cuadrícula representa los datos en un formato tabular de filas y columnas. Se compone de lo siguiente:
El componente Información general de cuadrícula incluido en Uso de widgets de ExtJS El paquete muestra cómo mostrar los datos en formato tabular:
Para incluir el componente Información general de cuadrícula en la página de muestra:
El componente se muestra de la siguiente manera:
En su versión predeterminada, la variable Resumen de cuadrícula El componente muestra una ventana con datos estáticos en formato tabular. En este ejemplo, la lógica está incrustada en el componente jsp de dos maneras:
The Grid Overview component:
/apps/extjstraining/components/gridoverview
El componente jsp:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
define algunos datos estáticos como base para el objeto GridPanel.apps/extjstraining/components/gridoverview/content.jsp
El código JavaScript incrustado en el componente jsp:
grid
al intentar recuperar el componente ventana de la página:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
no existe, un CQ.Ext.grid.GridPanel objeto ( gridPanel
) se define llamando a la función getGridPanel()
(ver más abajo). Este método se define en defaultgrid.js
.grid
es un [CQ.Ext.Window](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
basado en el GridPanel predefinido y se muestra: grid.show();
grid
existe, se muestra en función de las propiedades de anchura, altura y acoplamiento recuperadas del repositorio.El archivo JavaScript ( defaultgrid.js
) al que se hace referencia en el componente jsp define el getGridPanel()
método al que llama el script incrustado en JSP y devuelve un [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
basado en datos estáticos. La lógica es la siguiente:
myData
es una matriz de datos estáticos con el formato de una tabla de cinco columnas y cuatro filas.store
es un CQ.Ext.data.Store
objeto que consume myData
.store
se carga en la memoria:store.load();
gridPanel
es un [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
objeto que consume store
:
las anchuras de columna siempre se redimensionan:
forceFit: true
solo se puede seleccionar una fila a la vez:
singleSelect:true
Al instalar el paquete, la variable content.jsp
de la Resumen de cuadrícula El componente muestra una cuadrícula basada en datos estáticos. Es posible modificar el componente para mostrar una cuadrícula con las siguientes características:
test
propiedad debajo del nodo definido por la ruta mostrada en la primera columna.Como se explica en la sección anterior, el objeto window obtiene su [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
llamando a la función getGridPanel()
método definido en la variable defaultgrid.js
archivo en /apps/extjstraining/components/gridoverview/defaultgrid.js
. El componente Información general de cuadrícula proporciona una implementación diferente para getGridPanel()
método, definido en la variable referencesearch.js
archivo en /apps/extjstraining/components/gridoverview/referencesearch.js
. Al cambiar el archivo .js al que se hace referencia en el componente jsp, la cuadrícula se basa en los datos recuperados del repositorio.
Cambie el archivo .js al que se hace referencia en el componente jsp:
content.jsp
del componente, comente la línea que incluye el defaultgrid.js
archivo, de modo que tenga el siguiente aspecto:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
archivo, de modo que tenga el siguiente aspecto:<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
El componente se muestra de la siguiente manera:
El código JavaScript al que se hace referencia en el componente jsp ( referencesearch.js
) define el getGridPanel()
método llamado desde el componente jsp y devuelve un [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
basado en datos que se recuperan dinámicamente del repositorio. La lógica de referencesearch.js
define algunos datos dinámicos como base para GridPanel:
reader
es un [CQ.Ext.data.JsonReader](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
que lee la respuesta del servlet en formato json para tres columnas.cm
es un [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
objeto para tres columnas.editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
es un [CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
objeto:
/bin/querybuilder.json
" con algunos parámetros utilizados para filtrar la consultareader
, definido de antemanogridPanel
es un [CQ.Ext.grid.EditorGridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
objeto que se puede editar:
se basa en el valor predefinido store
y en el modelo de columna cm
solo se puede seleccionar una fila a la vez:
sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
el afteredit
El oyente se asegura de que después de una celda en la Prueba Se ha editado la columna ":
test
' del nodo en la ruta definida por el "jcr:ruta La columna " se configura en el repositorio con el valor de la celdastore
objeto; de lo contrario, se rechaza