AEM presenta un’interfaccia touch con design dinamico per l’ambiente di authoring progettato per funzionare sia su dispositivi touch che su dispositivi desktop.
L’interfaccia touch è l’interfaccia standard per AEM. L’interfaccia classica era obsoleta con AEM 6.4.
L’interfaccia touch include:
Quasi tutte le funzionalità AEM sono state trasferite nell’interfaccia touch. Tuttavia, in alcuni casi limitati, le funzionalità torneranno all’interfaccia classica. Vedi Stato delle funzioni dell’interfaccia touch per ulteriori informazioni.
L’interfaccia touch è stata progettata per Adobe per fornire coerenza nell’esperienza utente tra più prodotti. Si basa su:
I principi di base dell’interfaccia touch sono:
Per un’ulteriore panoramica della struttura dell’interfaccia touch, consulta l’articolo Struttura dell’interfaccia utente AEM touch.
AEM utilizza la piattaforma Granite come base e la piattaforma Granite include, tra le altre cose, Java Content Repository.
Granite è uno stack Web aperto di Adobe che fornisce vari componenti tra cui:
Granite viene eseguito come progetto di sviluppo aperto in Adobe: i contributi al codice, le discussioni e le questioni vengono effettuati da tutta l'azienda.
Tuttavia, Granite è not un progetto open source. È fortemente basato su diversi progetti open source (Apache Sling, Felix, Jackrabbit e Lucene in particolare), ma l'Adobe disegna una linea chiara tra ciò che è pubblico e ciò che è interno.
La piattaforma di progettazione Granite fornisce anche un framework di interfaccia utente di base. I principali obiettivi sono:
Questi sono conformi ai requisiti:
GraniteUI.pdf
Ottieni file
Interfaccia utente Granite:
La comunicazione client-server nell'interfaccia utente Granite è costituita da ipertesto e non da oggetti, pertanto non è necessario che il client comprenda la logica di business
Viene utilizzata un’estensione del vocabolario di HTML, purché l’autore possa esprimere l’intenzione di creare un’app web interattiva. Questo è un approccio simile a WAI-ARIA e microformati.
Si compone principalmente di una raccolta di pattern di interazione (ad esempio, l’invio asincrono di un modulo) interpretati dai codici JS e CSS, eseguiti sul lato client. Il ruolo del lato client è quello di migliorare il markup (dato come il costo dell'ipermedia dal server) per l'interattività.
Il lato client è indipendente da qualsiasi tecnologia server. Se il server fornisce il markup appropriato, il lato client può svolgere il proprio ruolo.
Attualmente i codici JS e CSS vengono consegnati come Granite clientlibs nella categoria:
granite.ui.foundation and granite.ui.foundation.admin
Questi vengono consegnati come parte del pacchetto di contenuti:
granite.ui.content
Questo è costituito da una raccolta di componenti sling che consentono all’autore di comporre una webapp veloce. Lo sviluppatore sviluppa i componenti, l’autore assembla i componenti in un’app Web. Il ruolo del lato server è quello di fornire al client l'accessibilità (markup) dell'ipermedia.
Attualmente i componenti si trovano nell’archivio Granite all’indirizzo:
/libs/granite/ui/components/foundation
Viene fornito come parte del pacchetto di contenuti:
granite.ui.content
Interessano anche le differenze tra l’interfaccia Granite e ExtJS (utilizzata per l’interfaccia classica):
ExtJS | Interfaccia Granite |
Chiamata a procedura remota |
Transistenze di stato |
Oggetti di trasferimento dati | Hypermedia |
Il client conosce gli interni del server | Il client non conosce gli interni |
"client grasso" | "Thin client" |
Librerie client specializzate | Librerie client universali |
La Componenti di base dell’interfaccia utente Granite fornisce i blocchi predefiniti di base necessari per la creazione di qualsiasi interfaccia utente. Esse comprendono, tra l'altro:
I componenti di base si trovano in:
/libs/granite/ui/components/foundation
Questa libreria contiene un componente Granite UI per ogni elemento Coral. Un componente è basato sui contenuti e la sua configurazione risiede nell’archivio. Questo consente di comporre un’applicazione Granite UI senza scrivere manualmente il markup HTML.
Scopo:
Implementazione:
Questa libreria di componenti di base può essere utilizzata o estesa da altre librerie.
Quando si aggiorna il codice ExtJS per utilizzare l'interfaccia utente Granite, l'elenco seguente fornisce una comoda panoramica degli xtype e dei tipi di nodo ExtJS con i tipi di risorse equivalenti dell'interfaccia Granite.
ExtJS xtype | Tipo di risorsa dell’interfaccia 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 di nodo | Tipo di risorsa dell’interfaccia 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 |
La Componenti per l’amministrazione dell’interfaccia utente Granite crea i componenti di base per fornire blocchi predefiniti generici che qualsiasi applicazione di amministrazione può implementare. Tra questi figurano, tra l'altro:
Scopo:
Implementazione:
CoralUI.pdf
Ottieni file
L’interfaccia utente Coral (CUI) è un’implementazione dello stile visivo di Adobe per l’interfaccia touch, progettata per fornire coerenza nell’esperienza utente tra più prodotti. L’interfaccia utente Coral offre tutto il necessario per adottare lo stile visivo utilizzato nell’ambiente di authoring.
L’interfaccia utente Coral è una libreria di interfaccia utente resa disponibile ai clienti AEM per la creazione di applicazioni e interfacce web entro i limiti dell’utilizzo concesso in licenza del prodotto.
L’utilizzo dell’interfaccia utente Coral è consentito solo:
L’utilizzo dell’interfaccia utente Coral deve essere evitato in:
L’interfaccia utente Coral è una raccolta di blocchi predefiniti per lo sviluppo di applicazioni web.
Progettato per essere modulare fin dall'inizio, ogni modulo forma un livello distinto in base al suo ruolo primario. Anche se i livelli sono stati progettati per sostenersi l'uno con l'altro, possono anche essere utilizzati in modo indipendente se necessario. Questo consente di implementare l’esperienza utente di Coral in qualsiasi ambiente compatibile con HTML.
Con l’interfaccia utente Coral non è obbligatorio utilizzare un particolare modello e/o piattaforma di sviluppo. L’obiettivo principale di Coral è quello di fornire un markup HTML5 unificato e pulito, indipendentemente dal metodo effettivo utilizzato per emettere questo markup. Questo può essere utilizzato per il rendering lato client o server, modelli, JSP, PHP o anche applicazioni RIA Flash di Adobe - per citarne solo alcuni.
Gli elementi di HTML offrono un aspetto comune a tutti gli elementi dell’interfaccia utente di base (tra cui barra di navigazione, pulsante, menu, barra laterale, ecc.).
Al livello più semplice, un elemento HTML è un tag HTML con un nome di classe dedicato. Gli elementi più complessi possono essere composti da più tag, nidificati uno all’altro (in un modo specifico).
Il CSS viene utilizzato per fornire l’aspetto effettivo. Per personalizzare facilmente l’aspetto (ad esempio, per il caso del branding), i valori di stile effettivi sono dichiarati come variabili espanse dal MENO pre-processore durante il runtime.
Scopo:
Implementazione:
Ad esempio, il markup:
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
Viene visualizzato come:
Il look-and-feel è definito in LESS, legato a un elemento dal nome di classe dedicato (il seguente estratto è stato abbreviato per motivi di brevità):
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
I valori effettivi sono definiti in un file variabile LESS (il seguente estratto è stato abbreviato per motivi di brevità):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
Molti degli elementi di HTML dovranno mostrare un comportamento dinamico, ad esempio l’apertura e la chiusura dei menu a comparsa. Questo è il ruolo dei plug-in di elementi, che eseguono tali attività manipolando il DOM utilizzando JavaScript.
Un plug-in è:
DIV class=dialog
DIV
o LI
elementiIl comportamento del plug-in può essere personalizzato con i parametri tramite:
data-*
attributi associati al markup HTMLAnche se lo sviluppatore può selezionare l’approccio migliore per qualsiasi plug-in, la regola del pollice è di utilizzare:
data-*
attributi per le opzioni relative al layout di HTML. Ad esempio, per specificare il numero di colonneLo stesso concetto viene utilizzato per implementare la convalida del modulo. Per un elemento che si desidera convalidare, è necessario specificare come personalizzato il modulo di input richiesto data-*
attributo. Questo attributo viene quindi utilizzato come opzione per un plug-in di convalida.
La convalida del modulo nativo di HTML5 deve essere utilizzata ogni volta che è possibile e/o estesa.
Scopo:
Implementazione:
data-*
attributi per personalizzare il comportamentoUn estratto del markup di esempio (nota le opzioni specificate come dati-* attributes):
<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 chiamata al plug-in jQuery:
$(‘.cards’).cardlayout ();
Questo verrà visualizzato come:
La cardLayout
il plug-in espone il UL
elementi in base alle rispettive altezze e tenendo conto anche della larghezza del genitore.
Un widget combina uno o più elementi di base con un plug-in javascript per formare elementi di interfaccia utente di "livello superiore". Questi possono implementare un comportamento più complesso e anche un aspetto e un aspetto più complessi rispetto a quanto un singolo elemento potrebbe fornire. Esempi validi sono il selettore tag o i widget per barra.
Un widget può attivare e ascoltare eventi personalizzati per cooperare con altri widget sulla pagina. Alcuni widget sono in realtà widget jQuery nativi che utilizzano gli elementi Coral HTML.
Scopo:
Implementazione:
Esempio di markup:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
La chiamata al plug-in jQuery (con opzioni):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
Il plug-in emette tag HTML (questo markup utilizza elementi di base, che possono utilizzare altri plug-in internamente):
<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">
Questo verrà visualizzato come:
Questa libreria è una raccolta di plug-in di supporto javascript e/o funzioni che sono:
tra cui la gestione XSS e il bus dell'evento.
Anche se i plug-in e i widget dell'elemento HTML possono basarsi sulle funzionalità fornite dalla libreria di utilità, la libreria di utilità non può avere alcuna dipendenza dagli elementi o dai widget stessi.
Scopo:
Implementazione: