Personalización de la creación de páginas

AEM proporciona varios mecanismos para permitirle personalizar la funcionalidad de creación de páginas (y las consolas) de la instancia de creación.

• Clientlibs

  Las bibliotecas de clientes permiten ampliar la implementación predeterminada para obtener una nueva funcionalidad, al mismo tiempo que se reutilizan las funciones, los objetos y los métodos estándar. Al personalizar, puede crear su propia clientlib en /apps. La nueva clientlib debe:

  • dependen de la clientlib cq.authoring.editor.sites.page de creación
  • formar parte de la categoría cq.authoring.editor.sites.page.hook adecuada

• Superposiciones

  Las superposiciones se basan en definiciones de nodos y permiten superponer la funcionalidad estándar (en /libs) con su propia funcionalidad personalizada (en /apps). Al crear una superposición, no se requiere una copia 1:1 del original, ya que la combinación de recursos sling permite la herencia.

Se pueden utilizar de muchas formas para ampliar la funcionalidad de creación de páginas en la instancia de AEM. A continuación se incluye una selección (de alto nivel).

Añadir nueva capa (modo)

Cuando está editando una página, hay varios modos disponibles. Estos modos se implementan mediante capas. Permiten el acceso a diferentes tipos de funcionalidad para el mismo contenido de página. Las capas estándar son: editar, previsualización, anotar, desarrollador y segmentación.

Ejemplo de capa: Estado de Live Copy

Una instancia de AEM estándar proporciona la capa MSM. Esto accede a los datos relacionados con administración de varios sitios y los resalta en la capa.

Para verlo en acción, puede editar cualquier copia del idioma de We.Retail página (o cualquier otra página de Live Copy) y seleccionar el modo Estado de Live Copy.

Puede encontrar la definición de capa MSM (como referencia) en:

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Ejemplo de código

Este es un paquete de muestra que muestra cómo crear una nueva capa (modo), que es una nueva capa para la vista MSM.

CÓDIGO DE GITHUB

Puede encontrar el código de esta página en GitHub

• Abrir un proyecto de modo de nueva capa de creación de AEM en GitHub
• Descargue el proyecto como un archivo ZIP

Añadir nueva Categoría de selección en el navegador de recursos

El navegador de recursos muestra recursos de varios tipos o categorías (por ejemplo, imágenes, documentos, etc.). Estos recursos también se pueden filtrar mediante estas categorías.

Ejemplo de código

aem-authoring-extension-assetfinder-flickr es un paquete de muestra que muestra cómo agregar un nuevo grupo al buscador de recursos. Este ejemplo se conecta al flujo público de Flickr y se muestra en el panel lateral.

CÓDIGO DE GITHUB

Puede encontrar el código de esta página en GitHub

• Abrir el proyecto aem-authoring-extension-assetfinder-flickr en GitHub
• Descargue el proyecto como un archivo ZIP

Filtrado de recursos

Al crear páginas, el usuario debe seleccionar a menudo entre los recursos (p. ej. páginas, componentes, recursos, etc.). Esto puede adoptar la forma de una lista, por ejemplo, desde la cual el autor debe elegir un elemento.

Para mantener la lista a un tamaño razonable y también relevante para el caso de uso, se puede implementar un filtro en forma de predicado personalizado. Por ejemplo, si se utiliza el componente pathbrowser Granite para permitir al usuario seleccionar la ruta a un recurso en particular, las rutas presentadas se pueden filtrar de la siguiente manera:

• Implementar el predicado personalizado mediante la implementación de la interfaz com.day.cq.commons.predicate.AbstractNodePredicate.
• Especifique un nombre para el predicado y consulte ese nombre al usar el pathbrowser.

Para obtener más información sobre la creación de un predicado personalizado, consulte este artículo.

Añadir nueva acción en una barra de herramientas de componentes

Cada componente (normalmente) tiene una barra de herramientas que proporciona acceso a una serie de acciones que se pueden realizar en dicho componente.

Ejemplo de código

aem-authoring-extension-toolbar-screenshot es un paquete de muestra que muestra cómo crear una acción de barra de herramientas personalizada para procesar componentes.

CÓDIGO DE GITHUB

Puede encontrar el código de esta página en GitHub

• Abrir un proyecto de captura de pantalla de la barra de herramientas de aem-authoring-extension-toolbar en GitHub
• Descargue el proyecto como un archivo ZIP

Añadir nuevo editor in situ

Editor en el lugar estándar

En una instalación estándar de AEM:

1. /libs/cq/gui/components/authoring/editors/clientlibs/core/js/editors/editorExample.js

   Contiene definiciones de los diversos editores disponibles.

2. Hay una conexión entre el editor y cada tipo de recurso (como en el componente) que puede utilizarlo:

   • cq:inplaceEditing

     por ejemplo:

     • /libs/foundation/components/text/cq:editConfig

     • /libs/foundation/components/image/cq:editConfig

       • propiedad: editorType

         Define el tipo de editor en línea que se utilizará cuando se active la edición in-situ para ese componente; p. ej. text, textimage, image, title.

3. Los detalles de configuración adicionales del editor se pueden configurar usando un nodo config que contenga configuraciones, así como un nodo plugin adicional para contener los detalles de configuración del complemento necesarios.

   A continuación se muestra un ejemplo de definición de proporciones de aspecto para el complemento de recorte de imagen del componente de imagen. Tenga en cuenta que debido al potencial de tamaño de pantalla muy limitado, las proporciones de aspecto de recorte se movieron al editor de pantalla completa y solo se pueden ver allí.

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>
   

   PRECAUCIÓN

   Tenga en cuenta que en AEM relaciones de recorte, según lo establecido por la propiedad ratio, se definen como height/width. Esto es distinto de la definición convencional de anchura/altura y se realiza por motivos de compatibilidad con sistemas heredados. Los usuarios autores no tendrán en cuenta ninguna diferencia siempre que defina la propiedad name claramente, ya que esto es lo que se muestra en la interfaz de usuario.

Creación de un nuevo editor in situ

Para implementar un nuevo editor in situ (dentro de la clientlib):

1. Implementar:

   • setUp
   • tearDown

2. Registre el editor (incluye el constructor):

   • editor.register

3. Proporcione la conexión entre el editor y cada tipo de recurso (como en el componente) que pueda utilizarlo.

Ejemplo de código para crear un nuevo editor en contexto

aem-authoring-extension-inplace-editor es un paquete de muestra que muestra cómo crear un nuevo editor in situ en AEM.

CÓDIGO DE GITHUB

Puede encontrar el código de esta página en GitHub

• Abrir un proyecto de editor de aem-authoring-extension-in-place en GitHub
• Descargue el proyecto como un archivo ZIP

Configuración de varios editores in-situ

Es posible configurar un componente para que tenga varios editores in-situ. Cuando se configuran varios editores in situ, puede seleccionar el contenido adecuado y abrir el editor correspondiente. Consulte la documentación de Configuración de varios editores in-situ para obtener más información.

Añadir una nueva acción de página

Para agregar una nueva acción de página a la barra de herramientas de la página, por ejemplo una acción Volver a sitios (consola).

Ejemplo de código

aem-authoring-extension-header-backtosites es un paquete de muestra que muestra cómo crear una acción de barra de encabezado personalizada para volver a la consola Sitios.

CÓDIGO DE GITHUB

Puede encontrar el código de esta página en GitHub

• Abrir un proyecto de aem-authoring-extension-header-backtosites en GitHub
• Descargue el proyecto como un archivo ZIP

Personalización del flujo de trabajo de solicitud de Activación

El flujo de trabajo predeterminado, Solicitud de Activación, se activa automáticamente cuando un autor de contenido no tiene los derechos de replicación adecuados.

Para tener un comportamiento personalizado con dicha activación, puede superponer el flujo de trabajo Solicitud de Activación:

1. En /apps superponga el asistente Sites:

   /libs/wcm/core/content/common/managepublicationwizard

   NOTA

   Esto mismo anula la instancia común de:

   /libs/cq/gui/content/common/managepublicationwizard

2. Actualice el modelo de flujo de trabajo y las configuraciones/secuencias de comandos relacionadas según sea necesario.

3. Quite el derecho a la acción replicate de todos los usuarios correspondientes para todas las páginas relevantes; para que este flujo de trabajo se active como acción predeterminada cuando cualquiera de los usuarios intente publicar (o replicar) una página.

Recursos de Business.Adobe.com

Ecommerce Integrations Style System Customer Communications Document Generation Version History Content Management System