Koncepten i det AEM användargränssnittet med pekskärm
CAUTIONMed AEM 5.6 Adobe introducerades ett nytt pekaktiverat användargränssnitt med responsiv design för redigeringsmiljön. Detta skiljer sig avsevärt från det klassiska användargränssnittet eftersom det är utformat för att fungera både på pekskärmar och på stationära enheter.
Det här pekaktiverade användargränssnittet är nu standardgränssnittet för AEM och ersätter det klassiska användargränssnittet.
NOTEAnvändargränssnittet med pekfunktioner innehåller:
-
Suite header som:
- Visar logotypen
- Tillhandahåller en länk till den globala navigeringen
- Tillhandahåller länk till andra allmänna åtgärder. som Sök, Hjälp, Marketing Cloud Solutions, Notifications och User Settings.
-
Den vänstra listen (visas när den behövs och är dold) som kan visa:
- Tidslinje
- Referenser
- Filter
-
Navigeringsrubriken, som återigen är sammanhangsberoende och kan visa:
- Anger vilken konsol du använder och/eller din plats inom den konsolen
- Markering för den vänstra rälen
- Breadcrumbs
- Tillgång till lämplig Skapa funktionsmakron
- Visa markeringar
-
Innehållsområdet som:
- Visar en lista över innehållsobjekt (sidor, resurser, foruminlägg osv.)
- Kan formateras enligt begäran, t.ex. kolumn, kort eller lista
- Använder en responsiv design (bildskärmen ändrar automatiskt storlek efter enheten och/eller fönsterstorleken)
- Använder oändlig rullning (ingen sidnumrering, alla objekt visas i ett fönster)
NOTEDet pekaktiverade användargränssnittet har utformats av Adobe för att ge en konsekvent användarupplevelse för flera produkter. Den bygger på följande:
- Coral UI (CUI) en implementering av Adobe visuell stil för det beröringsaktiverade användargränssnittet. Coral UI innehåller allt som produkten/projektet/webbprogrammet behöver för att använda den visuella gränssnittsstilen.
- Granite-gränssnitt -komponenter byggs med Coral UI.
De grundläggande principerna för det beröringskänsliga användargränssnittet är:
- Mobil först (med skrivbordet i åtanke)
- Responsiv design
- Sammanhangsberoende visning
- Återanvändbar
- Inkludera inbäddad referensdokumentation
- Inkludera inbäddade tester
- Nedifrån och upp-design för att säkerställa att dessa principer tillämpas på alla element och komponenter
Mer information om den beröringsaktiverade gränssnittsstrukturen finns i artikeln Struktur för det AEM användargränssnittet med pekskärm.
AEM Technology Stack
AEM använder Granite-plattformen som bas och Granite-plattformen innehåller bland annat Java Content Repository.
Granit
Granite är en Adobe Open Web-stack med olika komponenter:
- En programstart
- Ett OSGi-ramverk där allt distribueras
- Ett antal OSGi-sammanläggningstjänster som stöder byggapplikationer
- Ett omfattande loggningsramverk med olika loggnings-API:er
- Implementeringen av CRX-databasen för JCR API-specifikationen
- Apache Sling Web Framework
- Ytterligare delar av den aktuella CRX-produkten
NOTEGranite-gränssnitt
Granites teknikplattform utgör också ett grundläggande ramverk för användargränssnitt. De främsta målen med detta är att
- Tillhandahåll detaljerade gränssnittswidgetar
- Implementera gränssnittskoncept och illustrera vedertagna metoder (långa listor, återgivning, listfiltrering, objekt-CRUD, CUD-guider…).
- Ett utbyggbart och plugin-baserat administrationsgränssnitt
Dessa uppfyller kraven:
- Respektera"mobilen först"
- Var utökningsbar
- Enkelt att åsidosätta
Gränssnittet för Granite:
- Använder RESTful-arkitekturen i Sling
- Implementerar komponentbibliotek som är avsedda för att skapa innehållscentrerade webbprogram
- Tillhandahåller detaljerade gränssnittswidgetar
- Tillhandahåller ett standardgränssnitt
- Är utökningsbar
- Är utformad för både mobila och stationära enheter (respekterar mobilen först)
- Kan användas i alla Granite-baserade plattformar/produkter/projekt. e AEM
-
Granite UI Foundation Components
Det här biblioteket med grundkomponenter kan användas eller utökas av andra bibliotek.
Klientsida jämfört med serversida
Klient-server-kommunikationen i Granite-gränssnittet består av hypertext, inte objekt, så kunden behöver inte förstå affärslogiken
- Servern berikar HTML med semantiska data
- Klienten förbättrar hypertexten med hypermedia (interaktion)
Klientsida
Detta innebär att ett tillägg till HTML-vokabulär används, förutsatt att författaren kan uttrycka sin avsikt att skapa en interaktiv webbapp. Det här är ett liknande tillvägagångssätt WAI-ARIA och mikroformat.
Det består främst av en samling interaktionsmönster (till exempel asynkron sändning av ett formulär) som tolkas av JS- och CSS-koder, som körs på klientsidan. Klientsidans roll är att förstärka markeringen (som serverns hypermedia) för interaktivitet.
Klientsidan är oberoende av serverteknik. Så länge servern ger rätt kod kan klientsidan uppfylla sin roll.
För närvarande levereras JS- och CSS-koderna som Granite klientlibs under kategorin:
granite.ui.foundation and granite.ui.foundation.admin
Dessa levereras som en del av innehållspaketet:
granite.ui.content
Serversida
Detta formas av en samling slingkomponenter som gör att författaren kan komponera en webbapp snabbt. Utvecklaren utvecklar komponenter, författaren sätter ihop komponenterna till en webbapp. Serversidans roll är att förse klienten med hypermedia-råd (markup).
Komponenterna finns för närvarande i Granite-databasen på:
/libs/granite/ui/components/foundation
Detta levereras som en del av innehållspaketet:
granite.ui.content
Skillnader med det klassiska användargränssnittet
Skillnaderna mellan GRUI och ExtJS (används för det klassiska användargränssnittet) är också av intresse:
Granite UI Foundation Components
The Granite UI Foundation Components tillhandahålla de grundläggande byggstenar som behövs för att bygga ett användargränssnitt. De omfattar bland annat följande:
- Knapp
- Hyperlänk
- Avatar för användare
Grundkomponenterna finns under:
/libs/granite/ui/components/foundation
Det här biblioteket innehåller en Granite-gränssnittskomponent för varje Coral-element. En komponent är innehållsdriven och dess konfiguration finns i databasen. Detta gör det möjligt att skapa ett GRI-program utan att skriva HTML-kod manuellt.
Syfte:
- Komponentmodell för HTML Elements
- Komponentdisposition
- Automatisk enhets- och funktionstestning
Implementering:
- Databasbaserad disposition och konfiguration
- Utnyttja testfunktionerna i Granitplattformen
- JSP-mallar
Det här biblioteket med grundkomponenter kan användas eller utökas av andra bibliotek.
ExtJS och motsvarande Granite-gränssnittskomponenter
När du uppgraderar ExtJS-kod för att använda GRA-gränssnittet ger följande lista en bekväm översikt över ExtJS-xtyper och nodtyper med motsvarande Granite-gränssnittsresurstyper.
| ExtJS xtype | Bevilja gränssnittsresurstyp |
|---|---|
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 |
| Nodtyp | Bevilja gränssnittsresurstyp |
|---|---|
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 |
Granite UI Administration Components
The Administrationskomponenter för GRI bygga vidare på grundkomponenterna för att tillhandahålla generiska byggstenar som alla administrationsprogram kan implementera. Dessa omfattar bland annat följande:
- Globalt navigeringsfält
- Rail (skelett)
- Sökpanel
Syfte:
- Enhetlig look och känsla för administrationstillämpningar
- Rad för administrationsprogram
Implementering:
- Fördefinierade komponenter med baskomponenterna
- Komponenter kan anpassas
Coral UI
Coral UI (CUI) är en implementering av Adobe visuell stil för det beröringsaktiverade användargränssnittet, som har utformats för att ge en konsekvent användarupplevelse för flera produkter. Coral UI innehåller allt du behöver för att använda den visuella stil som används i redigeringsmiljön.
CAUTION- När den har levererats och paketerats med AEM.
- Används när du utökar det befintliga gränssnittet i redigeringsmiljön.
- Material, annonser och presentationer för Adobe.
- Gränssnittet för program med Adobe-varumärke (teckensnittet får inte vara lätt tillgängligt för annan användning).
- Med mindre anpassningar.
- Dokument och andra objekt som inte är relaterade till Adobe.
- Miljöer där innehållet skapas (där föregående objekt kan genereras av andra).
- Program/komponenter/webbsidor som inte är tydligt kopplade till Adobe.
Coral UI är en samling byggstenar för utveckling av webbapplikationer.
Varje modul är utformad för att vara modulär från början och utgör ett distinkt lager baserat på dess primära roll. Även om lagren har utformats för att stödja varandra kan de också användas oberoende av varandra vid behov. Detta gör det möjligt att implementera Corals användarupplevelse i vilken miljö som helst med stöd för HTML.
Med Coral UI är det inte obligatoriskt att använda en viss utvecklingsmodell och/eller plattform. Det främsta målet för Coral är att tillhandahålla enhetlig och ren markering på HTML5, oberoende av den metod som faktiskt används för att generera markeringen. Detta kan användas för återgivning på klient- eller serversidan, mallar, JSP, PHP eller till och med Adobe Flash RIA-program - för att nämna några få.
HTML Elements - markeringslagret
HTML-elementen ger ett gemensamt utseende och en gemensam känsla för alla grundläggande gränssnittselement (bland annat navigeringsfält, knapp, meny, räls).
På den mest grundläggande nivån är ett HTML-element en HTML-tagg med ett dedikerat klassnamn. Mer komplexa element kan bestå av flera taggar som är kapslade i varandra (på ett visst sätt).
CSS används för att ge det verkliga utseendet och känslan. För att göra det enkelt att anpassa utseendet (t.ex. för varumärken) deklareras faktiska formatvärden som variabler som expanderas av LESS preprocessor under körning.
Syfte:
- Ge grundläggande gränssnittselement en gemensam look och känsla
- Ange standardstödrastersystemet
Implementering:
- HTML-taggar med format som inspirerats av bootstrap
- Klasser definieras i LESS-filer
- Ikoner definieras som teckensnittssprites
Till exempel koden:
<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>
Visas som:
Utseendet definieras i LESS, som knyts till ett element med ett dedikerat klassnamn (följande utdrag har förkortats av utrymmesskäl):
.btn {
font-size: @baseFontSize;
line-height: @baseLineHeight;
.buttonBackground(@btnBackground,
@btnBackgroundHighlight,
@grayDark, 0 1px 1px rgba(255,255,255,.75));
Faktiska värden definieras i en LESS-variabelfil (följande extrakt har förkortats av utrymmesskäl):
@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;
Elementplugin-program
Många av elementen i HTML måste uppvisa någon typ av dynamiskt beteende, som att öppna och stänga snabbmenyer. Detta är rollen för elementplugin-program, som utför sådana åtgärder genom att ändra DOM med JavaScript.
Ett plugin-program är antingen:
- Utformad för att fungera på ett specifikt DOM-element. En dialogruteplugin förväntar sig till exempel att hitta
DIV class=dialog - Allmän till sin natur. En layouthanterare kan till exempel skapa layout för alla listor med
DIVellerLIelements
Plugin-beteendet kan anpassas med parametrar, antingen genom att:
- Skicka parametrarna med ett javascript-anrop
- Använda dedikerad
data-*attribut knutna till HTML-koden
Även om utvecklaren kan välja det bästa sättet för alla plugin-program är tumregeln att använda:
data-*attribut för alternativ som är relaterade till HTML-layout. Du kan till exempel ange antalet kolumner- API-alternativ/klasser för funktioner som är relaterade till data. Skapa till exempel en lista med objekt som ska visas
Samma koncept används för att implementera formulärvalidering. För ett element som du vill validera måste du ange det obligatoriska indataformuläret som en egen data-* -attribut. Det här attributet används sedan som ett alternativ för ett validerings-plugin-program.
NOTESyfte:
- Ange dynamiskt beteende för HTML Elements
- Skapa anpassade layouter som inte är möjliga med ren CSS
- Utför formulärvalidering
- Utför avancerad DOM-manipulering
Implementering:
- jQuery-plugin, kopplad till specifika DOM-element
- Använda
data-*attribut för att anpassa beteende
Ett extrakt av exempelkod (observera de alternativ som anges som data-* attribut):
<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>
Anropet till jQuery-plugin-programmet:
$(‘.cards’).cardlayout ();
Detta visas som:
The cardLayout plugin-programmet placerar ut det inneslutna UL elementen baserat på deras respektive höjd och med hänsyn tagen till den överordnade objektets bredd.
Widgetar för HTML Elements
En widget kombinerar ett eller flera grundläggande element med ett javascript-plugin-program till gränssnittselement på en högre nivå. Dessa kan implementera mer komplexa beteenden och även mer komplexa utseenden och känsla än vad ett enskilt element kan ge. Bra exempel är taggväljaren eller rälswidgetar.
En widget kan både utlösa och lyssna på anpassade händelser för att samarbeta med andra widgetar på sidan. Vissa widgetar är i själva verket inbyggda jQuery-widgetar som använder Coral HTML-element.
Syfte:
- Implementera element för högre nivå i användargränssnittet som uppvisar komplext beteende
- Utlösa och hantera händelser
Implementering:
- jQuery plugin + HTML markup
- Kan använda klient-/serversidmallar
Exempelkoden är:
<input type="text" name="tags" placeholder="Tags" class="tagManager"/>
Anropet till jQuery-plugin-programmet (med alternativ):
$(".tagManager").tagsManager({
prefilled: ["Pisa", "Rome"] })
Plugin-programmet genererar märkordet HTML (den här markeringen använder grundläggande element, som kan använda andra plugin-program internt):
<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">
Detta visas som:
Verktygsbibliotek
Det här biblioteket är en samling hjälpplugin för javascript och/eller funktioner som är:
- Oberoende av användargränssnitt
- Ändå avgörande för att bygga kompletta webbapplikationer
Detta inkluderar XSS-hantering och händelsebussen.
Trots att plugin-program och widgetar för HTML-element kan förlita sig på funktioner från verktygsbiblioteket, kan verktygsbiblioteket inte ha något svårt beroende av själva elementen eller widgetarna.
Syfte:
- Tillhandahålla vanliga funktioner
- Implementering av händelsebuss
- Mallar på klientsidan
- XSS
Implementering:
- jQuery-plugin-program eller AMD-kompatibla JavaScript-moduler
