Koncepten i det AEM användargränssnittet med pekskärm concepts-of-the-aem-touch-enabled-ui

Med 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.

Användargränssnittet med pekfunktioner innehåller:

Det 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:

De grundläggande principerna för det beröringskänsliga användargränssnittet är:

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-technology-stack

AEM använder Granite-plattformen som bas och Granite-plattformen innehåller bland annat Java Content Repository.

Granit granite

Granite är en Adobe Open Web-stack med olika komponenter:

Granite-gränssnitt granite-ui

Granites teknikplattform utgör också ett grundläggande ramverk för användargränssnitt. De främsta målen med detta är att

Dessa uppfyller kraven:

Gränssnittet för Granite:

Klientsida jämfört med serversida client-side-vs-server-side

Klient-server-kommunikationen i Granite-gränssnittet består av hypertext, inte objekt, så kunden behöver inte förstå affärslogiken

Klientsida client-side

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 server-side

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 differences-with-the-classic-ui

Skillnaderna mellan GRUI och ExtJS (används för det klassiska användargränssnittet) är också av intresse:

Granite UI Foundation Components 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:

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:

Implementering:

Det här biblioteket med grundkomponenter kan användas eller utökas av andra bibliotek.

ExtJS och motsvarande Granite-gränssnittskomponenter extjs-and-corresponding-granite-ui-components

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.

Granite UI Administration Components 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:

Syfte:

Implementering:

Coral UI 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.

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-elements-the-markup-layer

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:

Implementering:

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 element-plugins

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:

Plugin-beteendet kan anpassas med parametrar, antingen genom att:

Även om utvecklaren kan välja det bästa sättet för alla plugin-program är tumregeln att använda:

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.

Syfte:

Implementering:

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 html-elements-widgets

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:

Implementering:

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 utility-library

Det här biblioteket är en samling hjälpplugin för javascript och/eller funktioner som är:

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:

Implementering: