Adobe Experience Manager Touch-aktiverade användargränssnitt concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager (AEM) har ett pekaktiverat användargränssnitt med responsiv design för redigeringsmiljön, som är utformat för att fungera både på pekskärmar och på stationära enheter.

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 Struktur för det AEM beröringsaktiverade gränssnittet.

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:

GraniteUI.pdf

Hämta fil
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. Detta liknar WAI-ARIA och microformats.

Det består främst av en samling interaktionsmönster (till exempel asynkront skicka 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 clientlibs 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 sling-komponenter som gör att författaren snabbt kan komponera en webbapp. Utvecklaren utvecklar komponenter, författaren sätter ihop komponenterna till en webbapp. Serversidans roll är att förse klienten med hypermedia-överkomlighet (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

Grund-gränssnittskomponenternainnehåller de grundläggande byggstenarna som behövs för att skapa 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

Administrationskomponenterna för GRE UI-gränssnittet bygger på grundkomponenterna och tillhandahåller generiska byggstenar som alla administrationsprogram kan implementera. Dessa omfattar bland annat följande:

Syfte:

Implementering:

Coral UI coral-ui

CoralUI.pdf

Hämta fil
Coral UI (CUI) är en implementering av Adobe visuell stil för det pekaktiverade användargränssnittet som är utformat 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 det ska vara enkelt att anpassa utseendet och känslan (till exempel för varumärken) deklareras faktiska formatvärden som variabler som expanderas av LESS -preprocessorn under körningen.

Syfte:

Implementering:

Exempel:

<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 ett anpassat 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:

Plugin-programmet cardLayout lägger ut de omslutna UL-elementen baserat på deras respektive höjder och tar även hänsyn 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 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</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">

Detta visas som:

Verktygsbibliotek utility-library

Det här biblioteket är en samling JavaScript hjälpplugin-program 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: