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, reemplazando a la IU clásica.
La IU táctil es la IU estándar para AEM, aunque la IU clásica sigue siendo compatible.
La IU táctil incluye:
Encabezado de grupo que:
El carril izquierdo (se muestra cuando es necesario y se puede ocultar), que puede mostrar:
El encabezado de navegación, que también distingue entre contexto y puede mostrar:
El área de contenido que:
Casi todas las funciones de AEM se han adaptado a la IU táctil. Sin embargo, en algunos casos, la funcionalidad volverá a la IU clásica. Consulte Estado de la función de IU táctil para obtener más información.
La IU táctil ha sido diseñada por Adobe para ofrecer coherencia en la experiencia del usuario en varios productos. Se basa en:
Los principios básicos de la IU táctil son:
Para obtener más información general sobre la estructura de IU táctil, consulte el artículo Estructura de la IU táctil AEM.
AEM utiliza la plataforma Granite como base y la plataforma Granite incluye, entre otras cosas, el repositorio de contenido Java.
Granite es la pila web abierta del Adobe, que proporciona varios componentes, entre los que se incluyen:
Granite se ejecuta como un proyecto de desarrollo abierto dentro del Adobe: las contribuciones al código, los debates y las cuestiones se realizan desde toda la compañía.
Sin embargo, Granite es no un proyecto de código abierto. Está fuertemente basado en varios proyectos de código abierto (Apache Sling, Felix, Jackrabbit y Lucene en particular), pero el Adobe traza una línea clara entre lo que es público y lo que es interno.
La plataforma de ingeniería Granite también proporciona un marco de interfaz de usuario básico. Los principales objetivos de este proceso son:
Se ajustan a los requisitos:
La interfaz de usuario de Granite:
Componentes básicos de la interfaz de usuario de Granite
Esta biblioteca de componentes de base puede ser utilizada o extendida por otras bibliotecas.
Componentes de administración de la interfaz de usuario de Granite
La comunicación cliente-servidor en la interfaz de usuario de Granite consiste en hipertexto, no objetos, por lo que no es necesario que el cliente entienda la lógica empresarial
Esto utiliza una extensión del vocabulario HTML, siempre que el autor pueda expresar su intención de crear una aplicación web interactiva. Este es un enfoque similar a los microformatos WAI-ARIA y a3/>.
Consiste principalmente en una colección de patrones de interacción (por ejemplo, el envío asíncrono de un formulario) que son interpretados por códigos JS y CSS, ejecutados en el lado del cliente. La función del cliente es mejorar el marcado (dado como la relación hipermedia del servidor) para la interactividad.
El cliente es independiente de cualquier tecnología de servidor. Siempre que el servidor proporcione el marcado adecuado, el 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
Esto está formado por una colección de componentes sling que permiten al autor componer una aplicación web rápidamente. El desarrollador desarrolla componentes, el autor los ensambla para que sean una aplicación web. La función del servidor es proporcionar al cliente la asequibilidad de los hipermedios (marcado).
Actualmente, los componentes se encuentran en el repositorio Granite en:
/libs/granite/ui/components/foundation
Esto se entrega como parte del paquete de contenido:
granite.ui.content
Las diferencias entre la interfaz de usuario de Granite y ExtJS (que se usa para la IU clásica) también son de interés:
ExtJS | Interfaz de usuario de granito |
Llamada a procedimiento remoto |
Transiciones de estado |
Objetos de transferencia de datos | Hipermedia |
El cliente conoce los internales del servidor | El cliente no conoce internamente |
"Cliente ligero" | "Cliente ligero" |
Bibliotecas de clientes especializadas | Bibliotecas de cliente universales |
Los componentes básicos de la interfaz de usuario de Granite proporcionan los componentes básicos necesarios para generar cualquier interfaz de usuario. Entre otros:
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 es contenido controlado, con su configuración en el repositorio. Esto permite componer una aplicación de interfaz de usuario Granite sin escribir a mano el código HTML.
Función:
Implementación:
Esta biblioteca de componentes de base puede ser utilizada o extendida por otras bibliotecas.
Al actualizar el código de ExtJS para utilizar la interfaz de usuario de Granite, la siguiente lista proporciona información general sobre xtypes y tipos de nodos de ExtJS con sus tipos de recursos de la interfaz de usuario de Granite equivalentes.
ExtJS xtype | Tipo de recurso de la interfaz de usuario de Granite |
---|---|
button |
granite/ui/components/foundation/form/button |
checkbox |
granite/ui/components/foundation/form/checkbox |
componentstyles |
cq/gui/components/authoring/dialog/componentstyles |
cqinclude |
granite/ui/components/foundation/include |
datetime |
granite/ui/components/foundation/form/datepicker |
dialogfieldset |
granite/ui/components/foundation/form/fieldset |
hidden |
granite/ui/components/foundation/form/hidden |
html5smartfile, html5smartimage |
granite/ui/components/foundation/form/fileupload |
multifield |
granite/ui/components/foundation/form/multifield |
numberfield |
granite/ui/components/foundation/form/numberfield |
pathfield, paragraphreference |
granite/ui/components/foundation/form/pathbrowser |
selection |
granite/ui/components/foundation/form/select |
sizefield |
cq/gui/components/authoring/dialog/sizefield |
tags |
granite/ui/components/foundation/form/autocomplete cq/gui/components/common/datasources/tags |
textarea |
granite/ui/components/foundation/form/textarea |
textfield |
granite/ui/components/foundation/form/textfield |
Tipo de nodo | Tipo de recurso de la interfaz de usuario de Granite |
---|---|
cq:WidgetCollection |
granite/ui/components/foundation/container |
cq:TabPanel |
granite/ui/components/foundation/container granite/ui/components/foundation/layouts/tabs |
cq:panel |
granite/ui/components/foundation/container |
Los componentes de administración de la interfaz de usuario de Granite se basan en los componentes de base para proporcionar componentes genéricos que cualquier aplicación de administración puede implementar. Entre ellos se incluyen:
Función:
Implementación:
La IU de Coral (CUI) es una implementación del estilo visual del Adobe para la IU táctil, que se ha diseñado para proporcionar coherencia en la experiencia del usuario en varios productos. La interfaz de usuario 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 biblioteca de interfaz de usuario disponible para AEM clientes para crear aplicaciones e interfaces web dentro de los límites de su uso con licencia del producto.
Solo se permite el uso de la interfaz de usuario de Coral:
Se debe evitar el uso de la IU de Coral en:
La interfaz de usuario de Coral es una colección de componentes para desarrollar aplicaciones web.
Diseñado para ser modular desde el inicio, 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 se pueden utilizar 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 en particular. 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 en el cliente o en el servidor, plantillas, JSP, PHP o incluso aplicaciones RIA de Flash de Adobe, por nombrar sólo algunas.
Los elementos HTML proporcionan una apariencia 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, etc.).
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 se pueden componer de varias etiquetas, anidadas entre sí (de forma específica).
La CSS se utiliza para proporcionar el aspecto real. Para que sea posible personalizar fácilmente el aspecto (por ejemplo, en el caso de la marca), los valores de estilo reales se declaran como variables que se expanden con el preprocesador LESS durante el tiempo de ejecución.
Función:
Implementación:
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, vinculada a un elemento por un nombre de clase dedicado (el siguiente extracto se ha abreviado 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;
Muchos de los elementos HTML necesitará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 elementos, que realizan estas tareas manipulando el DOM mediante JavaScript.
Un complemento es:
DIV class=dialog
DIV
o LI
El comportamiento del complemento se puede personalizar con parámetros, ya sea de la siguiente manera:
data-*
dedicados asociados al marcado HTMLAunque el desarrollador puede seleccionar el mejor método para cualquier complemento, la regla general es utilizar:
data-*
atributos para opciones relacionadas con el diseño HTML. Por ejemplo, para especificar el número de columnasEl mismo concepto se utiliza para implementar la validación del formulario. Para un elemento que desea validar, debe especificar el formulario de entrada requerido como un atributo data-*
personalizado. Este atributo se utiliza luego como opción para un complemento de validación.
La validación de formularios nativos de HTML5 debe utilizarse siempre que sea posible y/o expandirse.
Función:
Implementación:
data-*
para personalizar el comportamientoUn extracto de marca de ejemplo (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>
La llamada al complemento jQuery:
$(‘.cards’).cardlayout ();
Esto se mostrará como:
El complemento cardLayout
presenta los elementos UL
adjuntos en función de sus alturas respectivas y teniendo en cuenta también la anchura del elemento principal.
Una utilidad combina uno o varios elementos básicos con un complemento de javascript para formar elementos de IU de "nivel superior". Estos pueden implementar un comportamiento más complejo y también una apariencia más compleja que la que podría ofrecer un solo elemento. Algunos buenos ejemplos son los widgets de riel o de selector de etiquetas.
Una utilidad puede déclencheur y escuchar eventos personalizados para cooperar con otras utilidades de la página. Algunos widgets son en realidad widgets de jQuery nativos que utilizan los elementos HTML de Coral.
Función:
Implementación:
Ejemplo de marcado:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
La llamada al complemento jQuery (con opciones):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
El complemento emite marcado 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:
Esta biblioteca es una colección de complementos de ayuda de javascript y/o funciones que son:
Entre ellos se incluyen el manejo de XSS y el bus de evento.
Aunque los complementos y utilidades de elementos HTML pueden depender de la funcionalidad proporcionada por la biblioteca de utilidades, la biblioteca de utilidades no puede tener dependencia en los elementos ni en los propios widgets.
Función:
Implementación: