Adobe Experience Manager (AEM) offre une interface utilisateur tactile responsive design pour l’environnement de création conçu pour fonctionner sur les périphériques tactiles et de bureau.
L’IU tactile est l’IU standard d’AEM. L’IU classique est devenue obsolète avec AEM 6.4.
L’interface utilisateur tactile se compose des éléments suivants :
Presque toutes les fonctionnalités d’AEM ont été transférées vers l’interface utilisateur tactile. Cependant, dans certains cas, la fonctionnalité revient à l’IU classique. Voir État des fonctionnalités de l’interface utilisateur tactile pour plus d’informations.
L’interface utilisateur tactile a été conçue par Adobe pour assurer la cohérence de l’expérience utilisateur sur plusieurs produits. Elle est basée sur :
Les principes de base de l’interface utilisateur tactile sont les suivants :
Pour une présentation plus détaillée de la structure de l’interface utilisateur tactile, voir Structure de l’interface utilisateur tactile d’AEM.
AEM utilise la plateforme Granite comme base et la plateforme Granite inclut, entre autres, le référentiel de contenu Java™.
Granite est la pile Open Web de l’Adobe, qui fournit divers composants, notamment :
Granite est exécuté en tant que projet de développement ouvert dans Adobe : les contributions au code, aux discussions et aux problèmes proviennent de l’ensemble de l’entreprise.
Cependant, Granite est not un projet open source. Il est fortement basé sur plusieurs projets open source (Apache Sling, Felix, Jackrabbit, et Lucene en particulier), mais l'Adobe trace une ligne claire entre ce qui est public et ce qui est interne.
La plateforme d’ingénierie Granite fournit également une structure d’interface utilisateur de base. Les principaux objectifs sont les suivants :
Ils respectent les exigences suivantes :
GraniteUI.pdf
Obtenir le fichier
L’IU Granite :
La communication client-serveur dans l’interface utilisateur Granite se compose d’hypertexte, et non d’objets. Il n’est donc pas nécessaire que le client comprenne la logique commerciale.
Cela utilise une extension du vocabulaire de HTML, à condition que l’auteur puisse exprimer son intention de créer une application web interactive. Il s’agit d’une approche similaire à la WAI-ARIA et microformats.
Il se compose principalement d’un ensemble de modèles d’interaction (par exemple, l’envoi asynchrone d’un formulaire) interprétés par des codes JS et CSS, exécutés côté client. Le rôle du côté client est d’améliorer le balisage (fourni comme support hypermédia par le serveur) pour l’interactivité.
Le côté client est indépendant de toute technologie de serveur. Tant que le serveur fournit le balisage approprié, le côté client peut remplir son rôle.
Actuellement, les codes JS et CSS sont fournis en tant que Granite. clientlibs sous la catégorie :
granite.ui.foundation and granite.ui.foundation.admin
Elles sont distribuées dans le cadre du package de contenu :
granite.ui.content
Il est formé par une collection de composants Sling qui permettent à l’auteur de composer une application web rapide. Le développeur développe des composants, l’auteur les assemble pour en faire une application web. Le rôle du côté serveur est de donner au client l’accès hypermédia (balisage).
Actuellement, les composants se trouvent dans le référentiel Granite à l’adresse :
/libs/granite/ui/components/foundation
Il est distribué dans le cadre du package de contenu :
granite.ui.content
Il est aussi intéressant d’examiner les différences entre l’IU Granite et ExtJS (utilisé pour l’IU classique) :
ExtJS | IU Granite |
Appel de procédure à distance |
Transitions d’état |
Objets de transfert de données | Hypermédia |
Le client connaît les paramètres internes du serveur. | Le client ne connaît pas les informations internes. |
« Client lourd » | « Client léger » |
Bibliothèques clientes spécialisées | Bibliothèques client universelles |
Le Composants de base de l’IU Granite fournissent les blocs de création de base nécessaires à la création d’une interface utilisateur. Ils incluent, entre autres :
Les composants de base se trouvent sous :
/libs/granite/ui/components/foundation
Cette bibliothèque contient un composant d’IU Granite pour chaque élément Coral. Un composant est piloté par le contenu, sa configuration résidant dans le référentiel. Cela permet de composer une application IU Granite sans écrire manuellement de balises HTML.
Objectif :
Mise en œuvre :
Cette bibliothèque de composants de base peut être utilisée ou étendue par d’autres bibliothèques.
Lors de la mise à niveau du code ExtJS pour utiliser l’interface utilisateur Granite, la liste suivante fournit un aperçu pratique des xtypes ExtJS et des types de noeuds avec leurs types de ressources d’interface utilisateur Granite équivalents.
ExtJS xtype | Type de ressource de l’IU 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 |
Type de nœud | Type de ressource de l’IU 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 |
Les composants d’administration de l’IU Granite dépendent des composants de base pour fournir les éléments génériques que toute application d’administration peut implémenter. Il s’agit, entre autres :
Objectif :
Mise en œuvre :
CoralUI.pdf
Obtenir le fichier
L’IU Coral (CUI) est une implémentation du style visuel de l’Adobe pour l’IU tactile conçue pour assurer la cohérence de l’expérience utilisateur sur plusieurs produits. L’interface utilisateur Coral fournit tout ce dont vous avez besoin pour adopter le style visuel utilisé dans l’environnement de création.
L’interface utilisateur Coral est une bibliothèque d’interface utilisateur mise à la disposition des clients AEM pour qu’ils puissent créer des applications et des interfaces web dans les limites de leur utilisation sous licence du produit.
L’utilisation de l’IU Coral est autorisée uniquement dans les cas suivants :
L’utilisation de l’IU Coral doit être évitée dans :
L’IU Coral est un ensemble de composantes de base destinées au développement d’applications web.
Conçu pour être modulaire dès le départ, chaque module forme une couche distincte en fonction de son rôle Principal. Bien que les calques aient été conçus pour se soutenir les uns les autres, ils peuvent également être utilisés indépendamment si nécessaire. Cela permet de mettre en oeuvre l’expérience utilisateur de Coral dans n’importe quel environnement compatible avec les HTMLS.
Avec l’interface utilisateur Coral, il n’est pas obligatoire d’utiliser un modèle de développement et/ou une plateforme spécifique. L’objectif Principal de Coral est de fournir un balisage HTML5 unifié et propre, indépendamment de la méthode utilisée pour émettre ce balisage. Il peut être utilisé pour le rendu côté client ou côté serveur, les modèles, JSP, PHP ou même les applications RIA Flash Adobe, pour n’en citer que quelques-unes.
Les éléments de HTML offrent un aspect commun à tous les éléments de l’interface utilisateur de base (y compris la barre de navigation, les boutons, le menu, le rail, etc.).
Au niveau le plus élémentaire, un élément de HTML est une balise de HTML avec un nom de classe dédié. Les éléments plus complexes peuvent être composés de plusieurs balises, imbriquées les unes dans les autres (d’une manière spécifique).
Le code CSS est utilisé pour définir l’apparence réelle. Pour permettre de personnaliser facilement l’apparence (par exemple, dans le cas d’une valorisation de marque), les valeurs de style réelles sont déclarées en tant que variables qui sont développées par la variable MOINS préprocesseur pendant l’exécution.
Objectif :
Mise en œuvre :
Par exemple, le balisage suivant :
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
s’affiche sous la forme :
L’apparence est définie dans un fichier LESS et liée à un élément par un nom de classe dédié (l’extrait suivant a été raccourci dans un souci de concision) :
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
Les valeurs réelles sont définies dans un fichier de variables LESS (l’extrait suivant a été raccourci dans un souci de concision) :
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
La plupart des éléments de HTML doivent présenter un comportement dynamique, tel que l’ouverture et la fermeture des menus contextuels. Il s’agit du rôle des modules externes d’élément, qui exécutent de telles tâches en manipulant le DOM à l’aide de JavaScript.
Un module externe est :
DIV class=dialog
.DIV
ou LI
.Le comportement du module externe peut être personnalisé avec des paramètres, en effectuant l’une des opérations suivantes :
data-*
dédiés liés au balisage HTMLBien que le développeur puisse choisir la méthode la mieux adaptée à chaque module externe, le principe de base consiste à utiliser les éléments suivants :
data-*
pour les options relatives à la mise en page HTML ; Par exemple, pour spécifier le nombre de colonnesLe même concept est utilisé pour implémenter la validation de formulaire. Pour un élément qui doit être validé, vous devez spécifier le formulaire de saisie requis sous la forme d’un attribut data-*
personnalisé. Cet attribut est ensuite utilisé comme option pour un module externe de validation.
La validation de formulaire native au format HTML5 doit être utilisée lorsque cela s’avère possible et/ou s’il y a une volonté de l’enrichir.
Objectif :
Mise en œuvre :
data-*
pour personnaliser le comportementExtrait de l’exemple de balisage (notez les options spécifiées sous la forme d’attributs data-*) :
<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>
Appel au module externe jQuery :
$('.cards').cardlayout ();
Cela se présente comme suit :
Le cardLayout
Le module externe met en forme l’objet UL
en fonction de leurs hauteurs respectives et en tenant également compte de la largeur du parent.
Un widget combine un ou plusieurs éléments de base avec un module externe JavaScript pour former des éléments d’IU de "niveau supérieur". Elles peuvent implémenter un comportement plus complexe, ainsi qu’un aspect plus complexe que celui qu’un seul élément peut fournir. Le sélecteur de balises et les widgets de rail constituent deux bons exemples.
Un widget peut se déclencher et écouter des événements personnalisés pour coopérer avec d’autres widgets sur la page. Certains widgets sont des widgets jQuery natifs qui utilisent les éléments de HTML Coral.
Objectif :
Mise en œuvre :
Voici un exemple de balisage :
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
L’appel au module externe jQuery (avec options) :
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
Le module externe émet un balisage de HTML (ce balisage utilise des éléments de base, qui peuvent utiliser d’autres modules externes en interne) :
<span>Pisa</code>
<a title="Removing tag" tagidtoremove="0"
id="myRemover_0" class="myTagRemover" href="#">x</a></code>
<span id="myTag_1" class="myTag"><span>Rome</code>
<a title="Removing tag" tagidtoremove="1"
id="myRemover_1" class="myTagRemover" href="#">x</a></code>
<input type="text" data-original-title="" class="input-medium tagManager"
placeholder="Tags" name="tags" data-provide="typeahead" data-items="6"
autocomplete="off">
Cela se présente comme suit :
Cette bibliothèque est une collection de modules externes et/ou de fonctions d’assistance JavaScript qui sont les suivants :
Il s’agit notamment de la gestion XSS et du bus d’événements.
Bien que les modules externes et les widgets des éléments de HTML puissent dépendre des fonctionnalités fournies par la bibliothèque d’utilitaires, celle-ci ne peut pas avoir de dépendance stricte vis-à-vis des éléments ou des widgets eux-mêmes.
Objectif :
Mise en œuvre :