Conceptos de la IU táctil AEM

Con AEM Adobe 5.6 se ha introducido una nueva IU táctil con diseño interactivo para el entorno de creación. Esto difiere considerablemente de la IU clásica original, ya que está diseñada para funcionar tanto en dispositivos táctiles como de escritorio.

Esta IU táctil es ahora la IU estándar para AEM y sustituye a la IU clásica.

La IU táctil incluye:

• Encabezado de grupo que:

  • Muestra el logotipo
  • Proporciona un vínculo a la navegación global
  • Proporciona un vínculo a otras acciones genéricas; como Búsqueda, Ayuda, Soluciones de Marketing Cloud, Notificaciones y Configuración de usuario.

• El carril izquierdo (se muestra cuando es necesario y se puede ocultar), que puede mostrar:

  • Escala de cronología
  • Referencias
  • Filtros

• El encabezado de navegación, que también es sensible al contexto y puede mostrar:

  • Indica la consola que está utilizando o la ubicación dentro de esa consola
  • Selección del carril izquierdo
  • Rutas de exploración
  • Acceso adecuado Crear acciones
  • Ver selecciones

• El área de contenido que:

  • Enumera los elementos de contenido (ya sean páginas, recursos, publicaciones en foros, etc.)
  • Se puede formatear como se solicite, por ejemplo, columna, tarjeta o lista
  • Utiliza un diseño interactivo (la pantalla cambia de tamaño automáticamente según el dispositivo o el tamaño de la ventana)
  • Utiliza el desplazamiento infinito (no más paginación, todos los elementos se enumeran en una ventana)

La IU táctil ha sido diseñada por Adobe para ofrecer coherencia en la experiencia del usuario en varios productos. Se basa en:

• Interfaz de usuario de Coral (CUI) una implementación del estilo visual de Adobe para la IU táctil. La interfaz de usuario de Coral proporciona todo lo que su producto, proyecto o aplicación web necesita para adoptar el estilo visual de la interfaz de usuario.
• Interfaz de usuario de Granite los componentes se crean con la interfaz de usuario de Coral.

Los principios básicos de la IU táctil son:

• Móvil primero (con el escritorio en mente)
• Diseño interactivo
• Visualización relevante para el contexto
• Reutilizable
• Incluir documentación de referencia incrustada
• Incluir pruebas incrustadas
• Diseño de abajo arriba para garantizar que estos principios se apliquen a cada elemento y componente

Para obtener más información general sobre la estructura de la IU táctil, consulte el artículo Estructura de la interfaz de usuario táctil AEM.

Pila de tecnología AEM

AEM utiliza la plataforma Granite como base y la plataforma Granite incluye, entre otras cosas, el Repositorio de Contenido Java.

Granite

Granite es la pila web abierta de Adobe que proporciona varios componentes, entre los que se incluyen:

• Un iniciador de aplicación
• Un marco OSGi en el que todo está implementado
• Varios servicios de compendio OSGi para apoyar las aplicaciones de construcción
• Un marco de registro completo que proporciona varias API de registro
• Implementación del repositorio CRX de la especificación de la API JCR
• El marco web Apache Sling
• Partes adicionales del producto CRX actual

Interfaz de usuario de Granite

La plataforma de ingeniería de Granite también proporciona un marco de IU base. Los principales objetivos son:

• Proporcionar widgets de IU granulares
• Implemente los conceptos de la interfaz de usuario e ilustre las prácticas recomendadas (representación de listas largas, filtrado de listas, CRUD de objetos, asistentes CUD…).
• Proporcionar una interfaz de usuario de administración ampliable y basada en complementos

Cumplen los requisitos:

• Respetar "móvil primero"
• Ser extensible
• Sea fácil de anular

La interfaz de usuario de Granite:

• Utiliza la arquitectura RESTful de Sling
• Implementa bibliotecas de componentes diseñadas para crear aplicaciones web centradas en el contenido
• Proporciona widgets de IU granulares
• Proporciona una interfaz de usuario estándar predeterminada
• Es extensible
• Está diseñado tanto para dispositivos móviles como de escritorio (primero respeta el móvil)
• Puede utilizarse en cualquier plataforma, producto o proyecto basado en Granite; p AEM

• Componentes básicos de Granite UI

  Otras bibliotecas pueden usar o ampliar esta biblioteca de componentes de base.

• Componentes de administración de Granite UI

Lado del cliente frente al servidor

La comunicación cliente-servidor en la interfaz de usuario de Granite consiste en hipertexto, no en objetos, por lo que no es necesario que el cliente entienda la lógica empresarial

• El servidor enriquece el HTML con datos semánticos
• El cliente enriquece el hipertexto con hipermedios (interacción)

Lado del cliente

Esto utiliza una extensión del vocabulario del HTML, siempre que el autor pueda expresar su intención de crear un webapp interactivo. Este es un enfoque similar a WAI-ARIA y microformatos.

Consiste principalmente en una colección de patrones de interacción (por ejemplo, el envío asincrónico de un formulario) que son interpretados por códigos JS y CSS, que se ejecutan en el lado del cliente. La función del lado del cliente es mejorar el marcado (dado como el soporte multimedia del servidor) para la interactividad.

El lado del cliente es independiente de cualquier tecnología de servidor. Siempre que el servidor proporcione el marcado adecuado, el lado del cliente puede cumplir su función.

Actualmente, los códigos JS y CSS se entregan como Granite clientlibs en la categoría :

granite.ui.foundation and granite.ui.foundation.admin

Se entregan como parte del paquete de contenido:

granite.ui.content

Servidor

Esto se forma mediante una colección de componentes de Sling que permiten al autor componer un webapp rápido. El desarrollador desarrolla componentes, el autor ensamblan los componentes para que sean una aplicación web. La función del lado del servidor es proporcionar al cliente la asequibilidad de los hipermedios (marcado).

Actualmente, los componentes se encuentran en el repositorio de Granite, en:

/libs/granite/ui/components/foundation

Esto se entrega como parte del paquete de contenido:

granite.ui.content

Diferencias con la IU clásica

Las diferencias entre la interfaz de usuario de Granite y ExtJS (utilizado para la IU clásica) también son de interés:

Componentes básicos de Granite UI

La variable Componentes básicos de Granite UI proporciona los componentes básicos necesarios para crear cualquier interfaz de usuario. Entre otros:

• Botón
• Hipervínculo
• Avatar del usuario

Los componentes de base se encuentran en:

/libs/granite/ui/components/foundation

Esta biblioteca contiene un componente de interfaz de usuario de Granite para cada elemento Coral. Un componente está impulsado por contenido, con su configuración residiendo en el repositorio. Esto permite componer una aplicación de interfaz de usuario de Granite sin escribir a mano el marcado del HTML.

Función:

• Modelo de componente para elementos HTML
• Composición de componentes
• Pruebas automáticas de unidades y funcionalidades

Implementación:

• Composición y configuración basadas en repositorios
• Aprovechamiento de las instalaciones de pruebas proporcionadas por la plataforma Granite
• Plantilla JSP

Otras bibliotecas pueden usar o ampliar esta biblioteca de componentes de base.

Componentes de interfaz de usuario de ExtJS y Granite correspondientes

Al actualizar el código de ExtJS para utilizar la interfaz de usuario de Granite, la siguiente lista proporciona una descripción general práctica de los xtype y tipos de nodo de ExtJS con sus tipos de recursos equivalentes de la interfaz de usuario de Granite.

Componentes de administración de Granite UI

La variable Componentes de administración de Granite UI aproveche los componentes de base para proporcionar componentes genéricos que cualquier aplicación de administración puede implementar. Entre ellos se incluyen:

• Barra de navegación global
• Carril (esqueleto)
• Panel de búsqueda

Función:

• Aspecto unificado para aplicaciones de administración
• Rad para aplicaciones de administración

Implementación:

• Componentes predefinidos que utilizan los componentes de base
• Los componentes se pueden personalizar

Interfaz de usuario de Coral

La IU de Coral (CUI) es una implementación del estilo visual de Adobe para la IU táctil, que se ha diseñado para proporcionar coherencia en la experiencia del usuario en varios productos. La IU de Coral proporciona todo lo necesario para adoptar el estilo visual utilizado en el entorno de creación.

La interfaz de usuario de Coral es una colección de componentes básicos para el desarrollo de aplicaciones web.

Diseñado para ser modular desde el principio, cada módulo forma una capa distinta basada en su función principal. Aunque las capas se han diseñado para apoyarse mutuamente, también pueden utilizarse de forma independiente si es necesario. Esto permite implementar la experiencia de usuario de Coral en cualquier entorno compatible con HTML.

Con la interfaz de usuario de Coral no es obligatorio utilizar un modelo de desarrollo o una plataforma particulares. El objetivo principal de Coral es proporcionar un marcado HTML5 unificado y limpio, independiente del método real utilizado para emitir este marcado. Esto puede utilizarse para el procesamiento del lado del cliente o del servidor, plantillas, JSP, PHP o incluso aplicaciones RIA de Flash de Adobe, por nombrar solo algunas.

Elementos de HTML: la capa de marcado

Los elementos HTML proporcionan un aspecto común para todos los elementos de la interfaz de usuario base (incluida la barra de navegación, el botón, el menú, el carril, entre otros).

En el nivel más básico, un elemento HTML es una etiqueta HTML con un nombre de clase dedicado. Los elementos más complejos pueden estar compuestos por varias etiquetas, anidadas entre sí (de forma específica).

El CSS se utiliza para proporcionar el aspecto real. Para que sea posible personalizar fácilmente la apariencia (por ejemplo, en el caso de la promoción de la marca), los valores de estilo reales se declaran como variables expandidas por el LESS preprocesador durante el tiempo de ejecución.

Función:

• Proporcionar elementos básicos de la interfaz de usuario con una apariencia común
• Proporcionar el sistema de cuadrícula predeterminado

Implementación:

• etiquetas HTML con estilos inspirados en bootstrap
• Las clases se definen en archivos LESS
• Los iconos se definen como sprites de fuente

Por ejemplo, el marcado:

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

Se muestra como:

La apariencia se define en LESS, y se vincula a un elemento con un nombre de clase dedicado (el siguiente extracto se ha acortado en aras de la brevedad):

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

Los valores reales se definen en un archivo de variable LESS (se ha abreviado el siguiente extracto en aras de la brevedad):

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

Complementos de elementos

Muchos de los elementos del HTML deberán mostrar algún tipo de comportamiento dinámico, como abrir y cerrar menús emergentes. Esta es la función de los complementos de elemento, que realizan estas tareas manipulando el DOM mediante JavaScript.

Un complemento puede ser:

• Diseñado para funcionar con un elemento DOM específico. Por ejemplo, un complemento de cuadro de diálogo espera encontrar DIV class=dialog
• Genérico por naturaleza. Por ejemplo, un administrador de diseños proporciona un diseño para cualquier lista de DIV o LI elementos

El comportamiento del complemento se puede personalizar con parámetros mediante:

• Pasar los parámetros mediante una llamada de javascript
• Uso de data-* atributos vinculados al marcado del HTML

Aunque el desarrollador puede seleccionar el mejor enfoque para cualquier complemento, la regla general es utilizar:

• data-* atributos para opciones relacionadas con el diseño del HTML. Por ejemplo, para especificar el número de columnas
• Opciones/clases de API para funciones relacionadas con los datos. Por ejemplo, construir la lista de elementos para mostrar

Se utiliza el mismo concepto para implementar la validación del formulario. Para un elemento que desea validar, debe especificar el formulario de entrada requerido como personalizado data-* atributo. A continuación, este atributo se utiliza como opción para un complemento de validación.

Función:

• Proporcionar comportamiento dinámico para elementos de HTML
• Proporcionar diseños personalizados no posibles con CSS pura
• Realizar validación del formulario
• Realizar manipulación DOM avanzada

Implementación:

• Complemento jQuery, vinculado a elementos DOM específicos
• Uso data-* atributos para personalizar el comportamiento

Un extracto de ejemplo de marcado (observe las opciones especificadas como data* atributos):

<ul data-column-width="220" data-layout="card" class="cards">
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
          <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>
  <li class="item">
    <div class="thumbnail">
      <img href="/a.html" src="/a.thumb.319.319..png">
      <div class="caption">
        <h4>Toolbar</h4>
        <p><small>toolbar</small><br></p>
      </div>
    </div>
  </li>

Llamada al complemento jQuery:

$(‘.cards’).cardlayout ();

Esto se mostrará como:

La variable cardLayout el complemento presenta el UL elementos basados en sus alturas respectivas y teniendo en cuenta también la anchura del elemento principal.

Widgets de elementos del HTML

Un widget combina uno o más elementos básicos con un complemento de javascript para formar elementos de IU de "nivel superior". Esto puede implementar un comportamiento más complejo y también una apariencia más compleja de la que podría ofrecer un solo elemento. Algunos ejemplos son el selector de etiquetas o los widgets de raíl.

Un widget puede almacenar en déclencheur y escuchar eventos personalizados para cooperar con otras utilidades de la página. Algunas utilidades son en realidad utilidades nativas de jQuery que utilizan los elementos del HTML de Coral.

Función:

• Implementar elementos de interfaz de usuario de nivel superior que muestren un comportamiento complejo
• Activación y gestión de eventos

Implementación:

• Complemento jQuery + marcado de HTML
• Puede utilizar plantillas del lado del cliente/servidor

El ejemplo de marcado es:

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

Llamada al complemento jQuery (con opciones):

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

El complemento emite el marcado del HTML (este marcado utiliza elementos básicos, que pueden utilizar otros complementos internamente):

<span>Pisa</span>
<a title="Removing tag" tagidtoremove="0"
   id="myRemover_0" class="myTagRemover" href="#">x</a></span>

<span id="myTag_1" class="myTag"><span>Rome</span>
<a title="Removing tag" tagidtoremove="1"
   id="myRemover_1" class="myTagRemover" href="#">x</a></span>

<input type="text" data-original-title="" class="input-medium tagManager"
       placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
       autocomplete="off">

Esto se mostrará como:

Biblioteca de utilidades

Esta biblioteca es una colección de complementos de ayuda de javascript y/o funciones que son:

• IU independiente
• Sin embargo, es crucial para crear aplicaciones web con todas las funciones

Estos incluyen el manejo de XSS y el bus de evento.

Aunque los complementos y las utilidades del elemento HTML pueden depender de la funcionalidad proporcionada por la biblioteca de utilidades, la biblioteca de utilidades no puede tener dependencia fuerte de los elementos ni de las utilidades.

Función:

• Proporcionar funcionalidad común
• Implementación del bus de evento
• Plantillas del lado del cliente
• XSS

Implementación:

• Complementos jQuery o módulos JavaScript compatibles con AMD

Recursos de Business.Adobe.com

Ecommerce Integrations Auto Form Fill Mobile Forms Theme Editor Document Generation Dynamic Forms