Show Menu
TEMAS×

Uso y ampliación de utilidades (IU clásica)

En esta página se describe el uso de las utilidades en la IU clásica, que se dejó de utilizar en AEM 6.4.
Adobe recomienda aprovechar la moderna interfaz de usuario táctil basada en la IU de Coral y la IU de Granite Componentes básicos de la interfaz de usuario de Granite .
La interfaz basada en la web de Adobe Experience Manager utiliza AJAX y otras tecnologías de navegador modernas para permitir a los autores editar y dar formato al contenido WYSIWYG directamente en la página web.
Adobe Experience Manager (AEM) utiliza la biblioteca de widgets ExtJS , que proporciona elementos de interfaz de usuario muy pulidos que funcionan en todos los exploradores más importantes y permiten la creación de experiencias de interfaz de usuario de escritorio.
Estas utilidades se incluyen en AEM y, además de ser utilizadas por AEM, pueden ser utilizadas por cualquier sitio web creado con AEM.
Para obtener una referencia completa de todas las utilidades disponibles en AEM, consulte la documentación de la API de la utilidad o la lista de xtypes existentes. Además, en el sitio web Sencha , el propietario del marco, encontrará muchos ejemplos que muestran cómo utilizar el marco de trabajo ExtJS.
Esta página proporciona algunas perspectivas sobre cómo utilizar y ampliar utilidades. En primer lugar, se describe cómo incluir código de cliente en una página . A continuación, se describen algunos componentes de muestra que se han creado para ilustrar el uso básico y la extensión. Estos componentes están disponibles en el paquete Uso de utilidades ExtJS en Uso compartido de paquetes .
El paquete incluye ejemplos de:
  • Diálogos básicos creados con utilidades integradas.
  • Diálogos dinámicos creados con utilidades integradas y lógica personalizada de javascript.
  • Cuadros de diálogo basados en widgets personalizados .
  • Panel de árbol que muestra un árbol JCR debajo de una ruta determinada.
  • Un panel de cuadrícula que muestra los datos en formato de tabla.
La IU clásica de Adobe Experience Manager se basa en ExtJS 3.4.0 .

Inclusión del código de cliente en una página

El código de javascript y hoja de estilo del lado del cliente debe colocarse en una biblioteca de cliente.
Para crear una biblioteca de cliente:
  1. Cree un nodo a continuación /apps/<project> con las siguientes propiedades:
    • name="clientlib"
    • jcr:mixinTypes=" # "
    • jcr:parentType="cq:ClientLibraryFolder"
    • sling:resourceType="widgets/clientlib"
    • categories=" # "
    • dependencias=" # "
    Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
  2. Debajo clientlib cree las css carpetas y js (nt:folder).
  3. A continuación, clientlib cree los archivos css.txt y js.txt (nt:files). Estos archivos .txt enumeran los archivos que se incluyen en la biblioteca.
  4. Editar js.txt : debe comenzar con ' #base=js ' seguido de la lista de archivos que agregará el servicio de biblioteca del cliente de CQ, por ejemplo:
    #base=js
     components.js
     exercises.js
     CustomWidget.js
     CustomBrowseField.js
     InsertTextPlugin.js
    
    
  5. Editar css.txt : debe comenzar con ' #base=css ' seguido de la lista de archivos que agregará el servicio de biblioteca del cliente de CQ, por ejemplo:
    #base=css
     components.css
    
    
  6. Debajo de la js carpeta, coloque los archivos de javascript que pertenecen a la biblioteca.
  7. Debajo de la css carpeta, coloque los .css archivos y los recursos utilizados por los archivos css (p. ej. my_icon.png ).
El manejo de hojas de estilo descrito anteriormente es opcional.
Para incluir la biblioteca del cliente en el jsp del componente de página:
  • 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 únicamente código javascript: <ui:includeClientLib js="<category-name>"/>
Para obtener más información, consulte la descripción de la etiqueta <ui:includeClientLib> .
En algunos casos, una biblioteca de cliente solo debería estar disponible en modo de autor y excluirse en modo de publicación. Puede lograrse de la siguiente manera:
    if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
        %><ui:includeClientLib categories="cq.collab.blog"/><%
    }

Introducción a los ejemplos

Para seguir los tutoriales de esta página, instale el paquete llamado Uso de utilidades ExtJS en una instancia local de AEM y cree una página de muestra en la que se incluirán los componentes. Para ello:
  1. En la instancia de AEM, descargue el paquete denominado Uso de utilidades ExtJS (v01) desde Package Share e instálelo. Crea el proyecto extjstraining siguiente /apps en el repositorio.
  2. Incluya la biblioteca de cliente que contiene las secuencias de comandos (js) y la hoja de estilo (css) en la etiqueta head de la página geometrixx jsp, ya que incluirá los componentes de muestra en una nueva página de la rama Geometrixx : en CRXDE Lite , abra el archivo /apps/geometrixx/components/page/headlibs.jsp y agregue la cq.extjstraining categoría a la etiqueta existente de la <ui:includeClientLib> siguiente manera: %><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
  3. Cree una nueva página en la rama de Geometrixx a continuación /content/geometrixx/en/products y llámala usando utilidades ExtJS.
  4. Vaya al modo de diseño y agregue todos los componentes del grupo llamados Uso de utilidades ExtJS al diseño de Geometrixx
  5. Volver al modo de edición: los componentes del grupo Uso de utilidades ExtJS están disponibles en la barra de tareas.
Los ejemplos de esta página se basan en el contenido de muestra de Geometrixx, que ya no se envía con AEM, tras haber sido reemplazado por We.Retail. Consulte el documento Implementación de referencia de We.Retail para ver cómo descargar e instalar Geometrixx.

Cuadros de diálogo básicos

Los diálogos se utilizan generalmente 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, señale el explorador a:
https://localhost:4502/<path-to-dialog>.-1.json
El primer componente del grupo Utilizando utilidades ExtJS en la barra de tareas se denomina 1. Conceptos básicos del cuadro de diálogo e incluye cuatro cuadros de diálogo básicos creados con utilidades integradas y sin lógica personalizada de javascript. Los cuadros de diálogo se almacenan a continuación /apps/extjstraining/components/dialogbasics . Los diálogos básicos son:
  • el cuadro de diálogo Completo ( full nodo): muestra una ventana con 3 fichas, 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 se crea de forma diferente.
  • el cuadro de diálogo Diseño ( design nodo): muestra una ventana con 2 fichas. 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 campo contraíble con 2 campos de texto.
Incluya el 1. Componente Conceptos básicos de cuadro de diálogo en la página de muestra:
  1. Agregue el 1. Conceptos básicos de cuadro de diálogo para la página de muestra desde la ficha Uso de utilidades de ExcelJS en la barra de tareas .
  2. El componente muestra un título, texto y un vínculo PROPIEDADES : haga clic en el vínculo para mostrar las propiedades del párrafo almacenado en el repositorio. Vuelva a hacer clic en el vínculo para ocultar las propiedades.
El componente muestra lo siguiente:

Ejemplo 1: Cuadro de diálogo completo

El cuadro de diálogo Completo muestra una ventana con tres fichas, cada una con dos campos de texto. Es el cuadro de diálogo predeterminado del componente Conceptos básicos del cuadro de diálogo. Sus características son:
  • Está definido por un nodo: node type = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) .
  • Muestra 3 fichas (tipo de nodo = cq:Panel ).
  • Cada ficha tiene 2 campos de texto (tipo de nodo = cq:Widget , xtype = [textfield](/help/sites-developing/xtypes.md#textfield) ).
  • Está definido por el nodo: /apps/extjstraining/components/dialogbasics/full
  • Se procesa en formato JSON al solicitar: https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
El cuadro de diálogo muestra lo siguiente:

Ejemplo 2: Cuadro de diálogo de un solo panel

El cuadro de diálogo Panel único muestra una ventana con una ficha que tiene dos campos de texto. Sus características son:
  • Muestra 1 ficha (tipo de nodo = cq:Dialog , xtype = [panel](/help/sites-developing/xtypes.md#panel) )
  • La ficha tiene 2 campos de texto (tipo de nodo = cq:Widget , xtype = [textfield](/help/sites-developing/xtypes.md#textfield) )
  • Está definido por el nodo: /apps/extjstraining/components/dialogbasics/singlepanel
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
  • Una ventaja sobre el cuadro de diálogo ​completo es que se necesita menos configuración.
  • Uso recomendado: para los diálogos simples que muestran información o solo tienen unos pocos campos.
Para utilizar el cuadro de diálogo Panel único:
  1. Sustituya el cuadro de diálogo del componente Conceptos básicos del cuadro de diálogo por el cuadro de diálogo Un solo panel :
    1. En CRXDE Lite , elimine el nodo: /apps/extjstraining/components/dialogbasics/dialog
    2. Haga clic en Guardar todo para guardar los cambios.
    3. Copie el nodo: /apps/extjstraining/components/dialogbasics/singlepanel
    4. Pegue el nodo copiado a continuación: /apps/extjstraining/components/dialogbasics
    5. Seleccione el nodo: /apps/extjstraining/components/dialogbasics/Copy of singlepanel y cambie su nombre dialog .
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Ejemplo 3: Cuadro de diálogo de varios paneles

El cuadro de diálogo Multi Panel tiene la misma visualización que el cuadro de diálogo Completo , pero se crea de forma diferente. Sus características son:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [tabpanel](/help/sites-developing/xtypes.md#tabpanel) ).
  • Muestra 3 fichas (tipo de nodo = cq:Panel ).
  • Cada ficha tiene 2 campos de texto (tipo de nodo = cq:Widget , xtype = [textfield](/help/sites-developing/xtypes.md#textfield) ).
  • Está definido por el nodo: /apps/extjstraining/components/dialogbasics/multipanel
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
  • Una ventaja sobre el diálogo ​completo es que tiene una estructura simplificada.
  • Uso recomendado: para cuadros de diálogo con varias fichas.
Para utilizar el cuadro de diálogo Panel múltiple:
  1. Sustituya el cuadro de diálogo del componente Conceptos básicos del cuadro de diálogo por el cuadro de diálogo Varios paneles : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Ejemplo 4: Diálogo enriquecido

El cuadro de diálogo Enriquecido muestra una ventana con dos fichas. 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 cuatro campos de texto y un campo que se puede contraer con dos campos de texto. Sus características son:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 2 fichas (tipo de nodo = cq:Panel ).
  • La primera ficha tiene una [dialogfieldset](/help/sites-developing/xtypes.md#dialogfieldset) utilidad con una [textfield](/help/sites-developing/xtypes.md#textfield) y una [selection](/help/sites-developing/xtypes.md#selection) utilidad con 3 opciones, y una contraíble [dialogfieldset](/help/sites-developing/xtypes.md#dialogfieldset) con una [textarea](/help/sites-developing/xtypes.md#textarea) utilidad.
  • La segunda ficha tiene una [dialogfieldset](/help/sites-developing/xtypes.md#dialogfieldset) utilidad con 4 [textfield](/help/sites-developing/xtypes.md#textfield) utilidades y una contraíble dialogfieldset con 2 [textfield](/help/sites-developing/xtypes.md#textfield) utilidades.
  • Está definido por el nodo: /apps/extjstraining/components/dialogbasics/rich
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Para utilizar el cuadro de diálogo Ricos :
  1. Sustituya el cuadro de diálogo del componente Conceptos básicos del cuadro de diálogo por el cuadro de diálogo Ricos : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Cuadros de diálogo dinámicos

El segundo componente del grupo Uso de utilidades ExtJS en la barra de tareas se denomina 2. Diálogos dinámicos e incluye tres cuadros de diálogo dinámicos creados con utilidades integradas y con lógica personalizada de javascript. Los cuadros de diálogo se almacenan a continuación /apps/extjstraining/components/dynamicdialogs . Los diálogos dinámicos son:
  • el cuadro de diálogo Cambiar fichas ( switchtabs nodo): muestra una ventana con dos fichas. La primera ficha tiene una selección de radio con tres opciones: cuando se selecciona una opción, se muestra una ficha relacionada con la opción. La segunda ficha tiene dos campos de texto.
  • el cuadro de diálogo Arbitrario ( arbitrary nodo): muestra una ventana con una ficha. La ficha tiene un campo para soltar o cargar un recurso y un campo que muestra información sobre la página que lo contiene y sobre el recurso si se hace referencia a uno.
  • el cuadro de diálogo Alternar campos ( togglefield nodo): muestra una ventana con una ficha. La ficha tiene una casilla de verificación: cuando está marcado, se muestra un conjunto de campos con dos campos de texto.
Para incluir el 2. Componente de diálogos dinámicos en la página de muestra:
  1. Agregue el 2. Diálogos dinámicos a la página de muestra desde la ficha Uso de utilidades ExtJS en la barra de tareas .
  2. El componente muestra un título, texto y un vínculo PROPIEDADES : haga clic para mostrar las propiedades del párrafo almacenado en el repositorio. Haga clic de nuevo para ocultar las propiedades.
El componente muestra lo siguiente:

Ejemplo 1: Cuadro de diálogo Cambiar fichas

El cuadro de diálogo Cambiar fichas muestra una ventana con dos fichas. La primera ficha tiene una selección de radio con tres opciones: cuando se selecciona una opción, se muestra una ficha relacionada con la opción. La segunda ficha tiene dos campos de texto.
Sus principales características son:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 2 fichas (tipo de nodo = cq:Panel ): 1 ficha de selección, la segunda ficha depende de la selección de la primera ficha (3 opciones).
  • Tiene 3 fichas opcionales (tipo de nodo = cq:Panel ), cada una tiene 2 campos de texto (tipo de nodo = cq:Widget , xtype = [textfield](/help/sites-developing/xtypes.md#textfield) ). Solo se muestra una ficha opcional a la vez.
  • Está definido por el switchtabs nodo en: /apps/extjstraining/components/dynamicdialogs/switchtabs
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
La lógica se implementa mediante los oyentes de eventos y el código javascript de la siguiente manera:
  • El nodo de cuadro de diálogo tiene un detector " beforeshow " que oculta todas las fichas 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.
  • El Ejst.x2 objeto se define en el exercises.js archivo en: /apps/extjstraining/clientlib/js/exercises.js
  • En el Ejst.x2.manageTabs() método, como el valor de index es -1, todas las fichas opcionales están ocultas (pasa de 1 a 3).
  • La ficha de selección tiene 2 oyentes: una que muestra la ficha seleccionada cuando se carga el cuadro de diálogo (" loadcontent " evento) y otra 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);}"
  • En el Ejst.x2.showTab() método: field.findParentByType('tabpanel') obtiene el panel de tabla que contiene todas las fichas ( 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 detector que oculta la ficha en el evento " render ": render="function(tab){Ejst.x2.hideTab(tab);}"
  • En el Ejst.x2.hideTab() método: tabPanel es el panel de fichas que contiene todas las fichas index es el índice de la ficha opcional tabPanel.hideTabStripItem(index) oculta la ficha
Muestra lo siguiente:

Ejemplo 2: Diálogo arbitrario

Muy a menudo, un cuadro de diálogo muestra el contenido del componente subyacente. El cuadro de diálogo que se describe aquí, llamado cuadro de diálogo arbitrario , extrae contenido de un componente diferente.
El cuadro de diálogo Arbitrario muestra una ventana con una ficha. La ficha tiene dos campos: una para soltar o cargar un recurso y otra que muestre información sobre la página contenedora y sobre el recurso si se ha hecho referencia a uno.
Sus principales características son:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 1 widget de panel de fichas (tipo de nodo = cq:Widget , xtype = [tabpanel](/help/sites-developing/xtypes.md#tabpanel) ) con 1 panel (tipo de nodo = cq:Panel )
  • El panel tiene un widget de archivo inteligente (tipo de nodo = cq:Widget , xtype = [smartfile](/help/sites-developing/xtypes.md#smartfile) ) y un widget de dibujo de propietario (tipo de nodo = cq:Widget , xtype = [ownerdraw](/help/sites-developing/xtypes.md#ownerdraw) )
  • Está definido por el arbitrary nodo en: /apps/extjstraining/components/dynamicdialogs/arbitrary
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
La lógica se implementa mediante los oyentes de eventos y el código javascript de la siguiente manera:
  • El widget de dibujo de propietario tiene un detector " loadcontent " que muestra información sobre la página que contiene el componente y el recurso al que hace referencia el widget de archivo inteligente cuando se carga el contenido: loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}" field se establece con el objeto de dibujo del propietario path se configura con la ruta de contenido del componente (p. ej.: /content/geometrixx/es/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)
  • El Ejst.x2 objeto se define en el exercises.js archivo 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
Para utilizar el cuadro de diálogo Arbitrario :
  1. Reemplazar el cuadro de diálogo del componente Diálogo ​dinámico por el cuadro de diálogo Arbitrario : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Ejemplo 3: Cuadro de diálogo Alternar campos

El cuadro de diálogo Alternar campos muestra una ventana con una ficha. La ficha tiene una casilla de verificación: cuando está marcado, se muestra un conjunto de campos con dos campos de texto.
Sus principales características son:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 1 widget de panel de fichas (tipo de nodo = cq:Widget , xtype = [tabpanel](/help/sites-developing/xtypes.md#textpanel) ) 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](/help/sites-developing/xtypes.md#selection) , tipo = [checkbox](/help/sites-developing/xtypes.md#checkbox) ) y un widget de conjunto de cuadros de diálogo contraíble (tipo de nodo = cq:Widget , xtype = [dialogfieldset](/help/sites-developing/xtypes.md#dialogfieldset) ) que está oculto de forma predeterminada, con 2 utilidades de campo de texto (tipo de nodo = cq:Widget , xtype = [textfield](/help/sites-developing/xtypes.md#textfield) ).
  • Está definido por el togglefields nodo en: /apps/extjstraining/components/dynamicdialogs/togglefields
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
La lógica se implementa mediante los oyentes de eventos y el código javascript de la siguiente manera:
  • la ficha de selección tiene 2 oyentes: uno que muestra el conjunto de campos de diálogo cuando se carga el contenido (" loadcontent " evento) 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);}"
  • El Ejst.x2 objeto se define en el exercises.js archivo 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 de conjunto de cuadros de diálogo fieldSet es el objeto dialogfield show es el valor de la selección (true o false) basada en ' show ' el conjunto de campos de diálogo se muestra o no
Para utilizar el cuadro de diálogo Alternar campos :
  1. Reemplazar el cuadro de diálogo del componente Cuadro de diálogo ​dinámico con el cuadro de diálogo Alternar campos : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Widgets personalizados

Los widgets integrados que se envían con AEM deben cubrir la mayoría de los casos de uso. Sin embargo, a veces puede ser necesario crear una utilidad personalizada para cubrir un requisito específico del proyecto. Los widgets personalizados se pueden crear ampliando los existentes. Para ayudarle a empezar a personalizarla, el paquete Uso de utilidades de ExtJS incluye tres cuadros de diálogo que utilizan tres utilidades personalizadas diferentes:
  • el cuadro de diálogo Campo múltiple ( multifield nodo) muestra una ventana con una ficha. La ficha tiene un widget de varios campos personalizado que tiene dos campos: un menú desplegable con dos opciones y un campo de texto. Como se basa en la utilidad lista para usar (que solo tiene un campo de texto), multifield tiene todas las funciones de la multifield utilidad.
  • el cuadro de diálogo Examinar árbol ( treebrowse nodo) muestra una ventana con una ficha que contiene un widget de exploración de ruta: al hacer clic en la flecha, se abre una ventana en la que puede examinar una jerarquía y seleccionar un elemento. 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 ( rteplugin nodo) 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 agrega a través del mecanismo de complemento RTE.
Los widgets personalizados y el complemento se incluyen en el componente llamado 3. Widgets personalizados del paquete Uso de utilidades ExtJS. Para incluir este componente en la página de muestra:
  1. Agregue el 3. Componente Widgets personalizados a la página de muestra desde la ficha Uso de utilidades ExtJS en la barra de tareas .
  2. El componente muestra un título, texto y, al hacer clic en el vínculo PROPIEDADES , las propiedades del párrafo almacenadas en el repositorio. Al volver a hacer clic se ocultan las propiedades. El componente muestra lo siguiente:

Ejemplo 1: Utilidad de varios campos personalizada

El cuadro de diálogo basado en el widget personalizado multicampo muestra una ventana con una ficha. La ficha 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.
Cuadro de diálogo basado en el widget personalizado de varios campos :
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 1 widget de panel de fichas (tipo de nodo = cq:Widget , xtype = [tabpanel](/help/sites-developing/xtypes.md#tabpanel) ) que contiene un panel (tipo de nodo = cq:Widget , xtype = [panel](/help/sites-developing/xtypes.md#panel) ).
  • El panel tiene un multifield widget (tipo de nodo = cq:Widget , xtype = [multifield](/help/sites-developing/xtypes.md#multifield) ).
  • El multifield widget tiene una configuración de campo (tipo de nodo = nt:unstructured , xtype = ejstcustom , optionsProvider = Ejst.x3.provideOptions ) basada en el xtype personalizado ' ejstcustom ':
    • ' fieldconfig ' es una opción de configuración del [CQ.form.MultiField](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField) objeto.
    • ' optionsProvider ' es una configuración del ejstcustom widget. Se establece con el Ejst.x3.provideOptions método definido en exercises.js :
      /apps/extjstraining/clientlib/js/exercises.js y devuelve 2 opciones.
  • Está definido por el multifield nodo en: /apps/extjstraining/components/customwidgets/multifield
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
El widget de varios campos personalizado (xtype = ejstcustom ):
  • Es un objeto de javascript llamado Ejst.CustomWidget .
  • Se define en el archivo CustomWidget.js javascript en: /apps/extjstraining/clientlib/js/CustomWidget.js
  • Amplía la [CQ.form.CompositeField](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.CompositeField) utilidad.
  • Tiene 3 campos: hiddenField (Campo de texto), allowField (ComboBox) y otherField (Campo de texto)
  • Anula CQ.Ext.Component#initComponent la adición de los 3 campos:
    • allowField es un objeto CQ.form.Selection de tipo 'select'. optionsProvider es una configuración del objeto Selection a la que se crea una instancia con la configuración optionsProvider del objeto CustomWidget definido en el cuadro de diálogo
    • otherField es un objeto CQ.Ext.form.TextField
  • 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 xtype ' ejstcustom ': CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
El cuadro de diálogo basado en el widget personalizado de varios campos muestra lo siguiente:

Ejemplo 2: Utilidad Treebrowse personalizada

El cuadro de diálogo personalizado basado en la utilidad Examinar muestra una ventana con una ficha que contiene una utilidad de exploración de ruta personalizada: al hacer clic en la flecha, se abre una ventana en la que puede examinar una jerarquía y seleccionar un elemento. La ruta del elemento se agrega al campo de ruta y se mantiene cuando se cierra el cuadro de diálogo.
Cuadro de diálogo de la ventana de árbol personalizada:
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [dialog](/help/sites-developing/xtypes.md#dialog) ).
  • Muestra 1 widget de panel de fichas (tipo de nodo = cq:Widget , xtype = [tabpanel](/help/sites-developing/xtypes.md#tabpanel) ) que contiene un panel (tipo de nodo = cq:Widget , xtype = [panel](/help/sites-developing/xtypes.md#panel) ).
  • El panel tiene una utilidad personalizada (tipo de nodo = cq:Widget , xtype = ejstbrowse )
  • Está definido por el treebrowse nodo en: /apps/extjstraining/components/customwidgets/treebrowse
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
La utilidad de exploración de árbol personalizada (xtype = ejstbrowse ):
  • Es un objeto de javascript llamado Ejst.CustomWidget .
  • Se define en el archivo CustomBrowseField.js javascript en: /apps/extjstraining/clientlib/js/CustomBrowseField.js
  • Se amplía [CQ.Ext.form.TriggerField](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField) .
  • Define una ventana de exploración llamada browseWindow .
  • Se anula [CQ.Ext.form.TriggerField](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick para mostrar la ventana de exploración cuando se hace clic en la flecha.
  • Define un objeto CQ.Ext.tree.TreePanel :
    • 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](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window) ):
    • Basado en el panel predefinido.
    • Tiene un botón Aceptar que establece el valor del trazado seleccionado y oculta el panel.
  • La ventana está anclada debajo del campo Ruta .
  • La ruta seleccionada se pasa del campo Examinar a la ventana en caso de show evento.
  • Se registra como xtype ' ejstbrowse ': CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Para utilizar el cuadro de diálogo basado en la utilidad Restablecimiento personalizado:
  1. Reemplazar el cuadro de diálogo del componente Widgets ​personalizados con el cuadro de diálogo Examinar personalizado : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente: el cuadro de diálogo muestra lo siguiente:

Ejemplo 3: Complemento Editor de texto enriquecido (RTE)

El cuadro de diálogo basado en el complemento Editor de texto enriquecido (RTE) es un cuadro de diálogo basado en editor de texto enriquecido que tiene un botón personalizado para insertar texto personalizado entre corchetes. El texto personalizado se puede analizar con alguna lógica del lado del servidor (no implementada en este ejemplo), por ejemplo para agregar texto definido en la ruta dada:
Cuadro de diálogo basado en el complemento RTE :
  • Está definido por el nodo replugin en: /apps/extjstraining/components/customwidgets/rteplugin
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
  • El rtePlugins nodo tiene un nodo secundario inserttext (tipo de nodo = nt:unstructured ) que recibe el nombre del complemento. Tiene una propiedad llamada features , que define qué características del complemento están disponibles para RTE.
El complemento RTE:
  • Es un objeto de javascript llamado Ejst.InsertTextPlugin .
  • Se define en el archivo InsertTextPlugin.js javascript en: /apps/extjstraining/clientlib/js/InsertTextPlugin.js
  • Extiende el [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) objeto.
  • Los siguientes métodos definen el [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin) objeto y se sustituyen en el complemento de implementación:
    • getFeatures() devuelve una matriz de todas las funciones que el complemento pone a disposición.
    • initializeUI() agrega el nuevo botón a la barra de herramientas RTE.
    • notifyPluginConfig() muestra el título y el texto cuando se sitúa el botón al pasar el ratón por encima.
    • 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 de cuadro de diálogo correspondiente Ejst.InsertTextPlugin.Dialog (consulte más adelante).
  • executeInsertText() se activa mediante el apply() método del cuadro de diálogo, que se activa cuando se hace clic en el botón Aceptar .
  • Se registra como complemento ' inserttext ': CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
  • el Ejst.InsertTextPlugin.Dialog objeto 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 ( Aceptar y Cancelar ).
Para utilizar el cuadro de diálogo basado en el complemento Editor de texto enriquecido (RTE) :
  1. Reemplace el cuadro de diálogo del componente Widgets ​personalizados con el cuadro de diálogo basado en el complemento Editor de texto enriquecido (RTE) : siga los pasos descritos para el Ejemplo 2: Cuadro de diálogo de un solo panel
  2. Edite el componente .
  3. Haga clic en el último icono de la derecha (el que tiene cuatro flechas). Introduzca una ruta y haga clic en Aceptar : La ruta se muestra entre corchetes ( # ).
  4. Haga clic en Aceptar para cerrar el Editor de texto enriquecido.
El cuadro de diálogo basado en el complemento Editor de texto enriquecido (RTE) muestra lo siguiente:
Este ejemplo solo muestra cómo implementar la parte de la lógica del lado del cliente: los marcadores de posición ( # ) deben analizarse explícitamente en el servidor (por ejemplo, en el JSP del componente).

Información general de árbol

El objeto predeterminado [CQ.Ext.tree.TreePanel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.tree.TreePanel) proporciona una representación de interfaz de usuario con estructura de árbol de datos con estructura de árbol. El componente Información general de árbol incluido en el paquete Uso de utilidades de ExtJS muestra cómo utilizar el TreePanel objeto para mostrar un árbol JCR debajo de una ruta determinada. La ventana misma puede acoplarse o desacoplarse. En este ejemplo, la lógica de ventana está incrustada en el jsp del componente entre etiquetas <script></script>.
Para incluir el componente Información general de árbol en la página de muestra:
  1. Agregue el 4. El componente Información general de árbol de la página de muestra de la ficha Uso de utilidades ExtJS de la barra de tareas .
  2. El componente muestra:
    • un título, con texto
    • un vínculo PROPIEDADES : haga clic para mostrar las propiedades del párrafo almacenado en el repositorio. Haga clic de nuevo para ocultar las propiedades.
    • una ventana flotante con una representación de árbol del repositorio, que se puede expandir.
El componente muestra lo siguiente:
El componente Información general de árbol:
  • 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 los detalles a continuación).
El jsp del componente:
  • Recupera las propiedades de ancho, alto y acoplado del repositorio.
  • Muestra texto sobre el formato de datos de información general de árbol.
  • Incrusta la lógica de la ventana en el jsp del componente entre etiquetas de javascript.
  • Se define en: apps/extjstraining/components/treeoverview/content.jsp
Código de javascript incrustado en el jsp del componente:
  • Define un tree objeto intentando recuperar una ventana de árbol de la página.
  • Si la ventana que muestra el árbol no existe, treePanel ( CQ.Ext.tree.TreePanel ) se crea:
    • 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
  • El beforeload listener se asegura de que se cargue el nodo en el que se ha hecho clic.
  • El root objeto establece la ruta apps/extjstraining como raíz del árbol.
  • tree ( [CQ.Ext.Window](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window) ) se establece en función del valor predefinido treePanel , y se muestra con: tree.show();
  • Si la ventana ya existe, se muestra en función de la anchura, la altura y las propiedades acopladas recuperadas del repositorio.
Cuadro de diálogo del componente:
  • Muestra 1 ficha con 2 campos para definir el tamaño (anchura y altura) de la ventana de información general de árbol y 1 campo para acoplar/desacoplar la ventana
  • Está definido por un nodo (tipo de nodo = cq:Dialog , xtype = [panel](/help/sites-developing/xtypes.md#panel) ).
  • El panel tiene un widget de campo de tamaño (tipo de nodo = cq:Widget , xtype = [sizefield](/help/sites-developing/xtypes.md#sizefield) ) y un widget de selección (tipo de nodo = cq:Widget , xtype = [selection](/help/sites-developing/xtypes.md#selection) , tipo = radio ) con 2 opciones (true/false)
  • Está definido por el nodo de cuadro de diálogo en: /apps/extjstraining/components/treeoverview/dialog
  • Se procesa en formato json al solicitar: https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
  • Muestra lo siguiente:

Información general de cuadrícula

Un panel de cuadrícula representa los datos en un formato de tabla de filas y columnas. Se compone de lo siguiente:
  • Tienda: el modelo que contiene los registros de datos (filas).
  • Modelo de columna: la composición de la columna.
  • Ver: encapsula la interfaz de usuario.
  • Modelo de selección: el comportamiento de selección.
El componente Información general de cuadrícula incluido en el paquete Uso de utilidades ExtJS muestra cómo mostrar los datos en formato de tabla:
  • El ejemplo 1 utiliza datos estáticos.
  • El ejemplo 2 utiliza datos recuperados del repositorio.
Para incluir el componente Información general de cuadrícula en la página de muestra:
  1. Agregue el 5. El componente Información general de cuadrícula a la página de muestra desde la ficha Uso de utilidades de ExcelJS en la barra de tareas .
  2. El componente muestra:
    • un título con texto
    • un vínculo PROPIEDADES : haga clic para mostrar las propiedades del párrafo almacenado en el repositorio. Haga clic de nuevo para ocultar las propiedades.
    • ventana flotante que contiene datos en formato de tabla.
El componente muestra lo siguiente:

Ejemplo 1: Cuadrícula predeterminada

En su versión lista para usar, el componente Información general de cuadrícula muestra una ventana con datos estáticos en formato de tabla. En este ejemplo, la lógica se incrusta en el jsp del componente de dos formas:
  • la lógica genérica se define entre las etiquetas <script></script>
  • la lógica específica está disponible en un archivo .js independiente y está vinculada en el archivo jsp. Esta configuración permite cambiar fácilmente entre las dos lógicas (estática/dinámica) mediante el comentario de las etiquetas <script> deseadas.
El componente Información general de cuadrícula:
  • 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.
El jsp del componente:
  • 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
Código de javascript incrustado en el jsp del componente:
  • Define el grid objeto intentando recuperar el componente de ventana de la página: var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
  • Si grid no existe, se define un objeto CQ.Ext.grid.GridPanel ( gridPanel ) llamando al getGridPanel() método (véase más adelante). Este método se define en defaultgrid.js .
  • grid es un [CQ.Ext.Window](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window) objeto, basado en el GridPanel predefinido, y se muestra: grid.show();
  • Si grid ya existe, se muestra en función de la anchura, la altura y las propiedades acopladas recuperadas del repositorio.
El archivo javascript ( defaultgrid.js ) al que se hace referencia en el jsp del componente define el getGridPanel() método al que llama la secuencia de comandos incrustada en el JSP y devuelve un [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) objeto, basado en datos estáticos. La lógica es la siguiente:
  • myData es una matriz de datos estáticos formateada como una tabla de 5 columnas y 4 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://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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

Ejemplo 2: Cuadrícula de búsqueda de referencia

Al instalar el paquete, el content.jsp componente Información general de cuadrícula muestra una cuadrícula basada en datos estáticos. Es posible modificar el componente para mostrar una cuadrícula con las características siguientes:
  • Tiene tres columnas.
  • Se basa en los datos recuperados del repositorio llamando a un servlet.
  • Se pueden editar las celdas de la última columna. El valor se mantiene en una test propiedad debajo del nodo definido por la ruta que se muestra en la primera columna.
Como se explica en la sección anterior, el objeto window obtiene su [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) objeto llamando al getGridPanel() método definido en el defaultgrid.js archivo en /apps/extjstraining/components/gridoverview/defaultgrid.js . El componente Información general de cuadrícula proporciona una implementación diferente para el getGridPanel() método, definido en el referencesearch.js archivo en /apps/extjstraining/components/gridoverview/referencesearch.js . Al cambiar el archivo .js al que se hace referencia en el archivo jsp del componente, la cuadrícula se basará en los datos recuperados del repositorio.
Cambie el archivo .js al que se hace referencia en el archivo jsp del componente:
  1. En CRXDE Lite , en el content.jsp archivo del componente, haga un comentario de 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-->
  2. Elimine el comentario de la línea que incluye el referencesearch.js archivo, de modo que tenga el siguiente aspecto: <script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
  3. Guarde los cambios.
  4. Actualice la página de muestra.
El componente muestra lo siguiente:
El código javascript al que se hace referencia en el jsp del componente ( referencesearch.js ) define el getGridPanel() método al que se llama desde el jsp del componente y devuelve un [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel) objeto, basado en datos que se recuperan dinámicamente del repositorio. La lógica de referencesearch.js define algunos datos dinámicos como una base para el panel de cuadrícula:
  • reader es un [CQ.Ext.data.JsonReader](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader) objeto que lee la respuesta del servlet en formato json para 3 columnas.
  • cm es un [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel) objeto 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](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
  • las columnas se pueden ordenar: cm.defaultSortable = true;
  • store es un [CQ.Ext.data.GroupingStore](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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 , definida de antemano
    • la tabla se ordena según la columna ' jcr:path ' en orden ascendente
  • gridPanel es un [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel) objeto que se puede editar:
    • se basa en el modelo 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://helpx.adobe.com/es/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
    • el afteredit oyente se asegura de que después de editar una celda de la columna " Prueba ":
      • 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 POST se realiza correctamente, el valor se agrega al store objeto; de lo contrario, se rechaza