AEM offre un'interfaccia touch con design reattivo per l'ambiente di authoring, progettato per funzionare sia sui dispositivi touch che su quelli desktop.
L’interfaccia touch è l’interfaccia standard per AEM. L’interfaccia classica era obsoleta con AEM 6.4.
L’interfaccia touch include:
Quasi tutte AEM funzionalità sono state portate nell’interfaccia touch. Tuttavia, in alcuni casi limitati, le funzionalità torneranno all’interfaccia classica. Per ulteriori informazioni, vedere Stato delle funzioni dell'interfaccia utente touch.
L’interfaccia touch è stata progettata da Adobe per garantire la coerenza dell’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, consultate l'articolo Struttura dell'AEM interfaccia utente touch.
AEM utilizza la piattaforma Granite come base e la piattaforma Granite include, tra le altre cose, l'archivio dei contenuti Java.
Granite è Adobe Open Web stack, che fornisce vari componenti tra cui:
Granite è eseguito come progetto di sviluppo aperto all'interno Adobe: i contributi al codice, le discussioni e le questioni vengono effettuati da tutta l'azienda.
Tuttavia, Granite è non un progetto open source. È fortemente basato su diversi progetti open source (Apache Sling, Felix, Jackrabbit e Lucene in particolare), ma Adobe traccia 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 di tale iniziativa sono:
Tali requisiti sono conformi:
GraniteUI.pdf
Ottieni
fileInterfaccia Granite:
La comunicazione client-server nell'interfaccia utente Granite è costituita da ipertesto, non da oggetti, quindi non è necessario che il client comprenda la logica di business
Viene utilizzata un'estensione del vocabolario HTML, purché l'autore possa esprimere l'intenzione di creare un'app Web interattiva. Questo approccio è simile a WAI-ARIA e microformati.
Consiste principalmente in 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 l'ipermedia conveniente dal server) per l'interattività.
Il lato client è indipendente da qualsiasi tecnologia server. Fintanto che il server fornisce la marcatura appropriata, il lato client può svolgere il proprio ruolo.
Attualmente i codici JS e CSS sono forniti come Granite clientlibs nella categoria:
granite.ui.foundation and granite.ui.foundation.admin
Questi vengono forniti come parte del pacchetto di contenuti:
granite.ui.content
Questo è costituito da una raccolta di componenti sling che consentono all'autore di comporre rapidamente un'app Web. Lo sviluppatore sviluppa i componenti, l’autore assembla i componenti come un’app Web. Il ruolo del lato server consiste nel fornire al client i costi (markup) dell'ipermedia.
Attualmente i componenti si trovano nel repository di Granite all'indirizzo:
/libs/granite/ui/components/foundation
Viene distribuito come parte del pacchetto di contenuti:
granite.ui.content
Sono interessanti anche le differenze tra l’interfaccia Granite e ExtJS (utilizzata per l’interfaccia classica):
ExtJS | Interfaccia Granite |
Chiamata di procedura remota |
Transistenze Stato |
Oggetti di trasferimento dati | Hypermedia |
Il client conosce gli interni del server | Il client non conosce gli interni |
"Fat client" | "Thin client" |
Librerie client specializzate | Librerie client universali |
I componenti di base dell'interfaccia utente Granite forniscono gli elementi 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 dell’interfaccia Granite per ogni elemento Coral. Un componente è basato sul contenuto e la sua configurazione risiede nella directory archivio. Questo consente di comporre un’applicazione di interfaccia Granite senza scrivere tag HTML a mano.
Scopo:
Implementazione:
Questa libreria di componenti di base può essere utilizzata o estesa da altre librerie.
Quando si aggiorna il codice ExtJS per l'utilizzo dell'interfaccia utente Granite, l'elenco seguente fornisce una panoramica pratica degli xtype e dei tipi di nodo ExtJS con i tipi di risorse equivalenti dell'interfaccia Granite.
ExtJS xtype | Tipo di risorsa dell’interfaccia utente 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 utente 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 |
I componenti di amministrazione dell'interfaccia utente Granite si basano sui componenti di base per fornire blocchi di generazione generici che qualsiasi applicazione di amministrazione può implementare. Tra questi figurano, tra l'altro:
Scopo:
Implementazione:
CoralUI.pdf
L’interfaccia utente Get
FileCoral (CUI) è un’implementazione stile visivo per l’interfaccia touch, progettata per garantire 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 che AEM i clienti possono creare applicazioni e interfacce Web all’interno dei limiti dell’utilizzo concesso in licenza del prodotto.
L’utilizzo dell’interfaccia utente Coral è consentito solo:
È consigliabile evitare l’utilizzo dell’interfaccia utente Coral in:
L’interfaccia utente Coral è una raccolta di elementi di base per lo sviluppo di applicazioni Web.
Progettato per essere modulare fin dall'inizio, ciascun modulo forma un livello distinto in base al suo ruolo primario. Sebbene i livelli siano stati progettati per supportare l’uno con l’altro, possono essere utilizzati anche 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 di sviluppo e/o piattaforma. L’obiettivo principale di Coral è quello di fornire tag HTML5 unificati e puliti, indipendentemente dal metodo utilizzato per emettere tale marcatura. Questo può essere utilizzato per il rendering lato client o server, modelli, JSP, PHP o anche applicazioni RIA Flash Adobe, per citarne solo alcuni.
Gli elementi 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ù basilare, un elemento HTML è un tag HTML con un nome di classe dedicato. Gli elementi più complessi possono essere composti da più tag, nidificati l'uno all'altro (in un modo specifico).
Il CSS viene utilizzato per fornire l'aspetto e il comportamento effettivi. Per rendere possibile la personalizzazione dei valori di stile effettivi (ad esempio per il marchio), vengono dichiarati come variabili espanse dal LESS pre-processore durante il runtime.
Scopo:
Implementazione:
Ad esempio, la marcatura:
<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:
L'aspetto è definito in LESS, legato a un elemento per nome di classe dedicato (l'estratto seguente è stato abbreviato per ragioni 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 ragioni di brevità):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
Molti degli elementi HTML dovranno mostrare una sorta di comportamento dinamico, come 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
Il comportamento del plug-in può essere personalizzato con parametri, tramite:
data-*
associati alla marcatura HTMLAnche se lo sviluppatore può selezionare l'approccio migliore per qualsiasi plug-in, la regola del pollice consiste nell'utilizzare:
data-*
attributi per le opzioni relative al layout 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 il modulo di input richiesto come attributo data-*
personalizzato. Questo attributo viene quindi utilizzato come opzione per un plug-in di convalida.
La convalida del modulo nativo per HTML5 deve essere utilizzata ogni volta che è possibile e/o estesa.
Scopo:
Implementazione:
data-*
per personalizzare il comportamentoUn estratto del codice di esempio (notare le opzioni specificate come attributi 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>
La chiamata al plug-in jQuery:
$(‘.cards’).cardlayout ();
Questo verrà visualizzato come:
Il plug-in cardLayout
contiene gli elementi UL
racchiusi in base alle rispettive altezze e tenendo conto anche della larghezza del padre.
Un widget combina uno o più elementi di base con un plug-in javascript per creare elementi dell’interfaccia utente di livello superiore. Questi possono implementare un comportamento più complesso e anche un aspetto e un aspetto più complessi di quanto un singolo elemento possa offrire. Esempi validi sono il selettore di tag o i widget della barra.
Un widget può attivare e ascoltare eventi personalizzati per collaborare con altri widget sulla pagina. Alcuni widget sono in realtà widget jQuery nativi che utilizzano gli elementi HTML Coral.
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 (questa marcatura 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 e/o funzioni helper JavaScript:
Questi includono la gestione XSS e il bus dell'evento.
Sebbene i plug-in e i widget degli elementi HTML possano basarsi sulle funzionalità fornite dalla libreria dell'utilità, la libreria dell'utilità non può avere alcuna dipendenza dagli elementi o dai widget stessi.
Scopo:
Implementazione: