Konzepte der Touch-optimierten Benutzeroberfläche von AEM concepts-of-the-aem-touch-enabled-ui

Mit AEM Adobe 5.6 wurde eine neue Touch-optimierte Benutzeroberfläche mit responsives Design für die Autorenumgebung. Dies unterscheidet sich erheblich von der klassischen Benutzeroberfläche, da sie sowohl für Touch- als auch für Desktop-Geräte entwickelt wurde.

Diese Touch-optimierte Benutzeroberfläche ist jetzt die Standardbenutzeroberfläche für AEM und ersetzt die klassische Benutzeroberfläche.

Die Touch-optimierte Benutzeroberfläche umfasst Folgendes:

Die Touch-optimierte Benutzeroberfläche wurde von Adobe entwickelt, um die Konsistenz des Benutzererlebnisses über mehrere Produkte hinweg zu gewährleisten. Er basiert auf:

Die Grundprinzipien der Touch-optimierten Benutzeroberfläche sind:

Einen weiteren Überblick über die Struktur der Touch-optimierten Benutzeroberfläche finden Sie im Artikel Struktur der Touch-optimierten Benutzeroberfläche von AEM.

AEM aem-technology-stack

AEM verwendet die Granite-Plattform als Basis und die Granite-Plattform umfasst unter anderem das Java Content Repository.

Granite granite

Granite ist der Open-Web-Stack der Adobe und bietet verschiedene Komponenten wie:

Granite-Benutzeroberfläche granite-ui

Die Granite-Engineering-Plattform bietet außerdem ein Framework für die Foundation-Benutzeroberfläche. Die wichtigsten Ziele sind:

Diese erfüllen die Anforderungen:

Die Granite-Benutzeroberfläche:

Client-seitig und Server-seitig client-side-vs-server-side

Die Client-Server-Kommunikation in der Granite-Benutzeroberfläche besteht aus Hypertext, nicht aus Objekten. Daher ist es nicht erforderlich, dass der Client die Geschäftslogik versteht

Clientseite client-side

Dabei wird eine Erweiterung des HTML-Vokabulars verwendet, vorausgesetzt der Autor kann seine Absicht zum Erstellen einer interaktiven Webanwendung zum Ausdruck bringen. Dies ist ein ähnlicher Ansatz wie WAI-ARIA und Mikroformate.

Sie besteht in erster Linie aus einer Sammlung von Interaktionsmustern (z. B. asynchron Senden eines Formulars), die von JS- und CSS-Codes interpretiert werden und clientseitig ausgeführt werden. Die Rolle der Client-Seite besteht darin, das Markup für Interaktivität zu verbessern (das vom Server als Hypermedia-Angebot angegeben wird).

Die Client-Seite ist unabhängig von jeder Server-Technologie. Solange der Server das entsprechende Markup bereitstellt, kann die Client-Seite seine Rolle erfüllen.

Derzeit werden die JS- und CSS-Codes als Granite bereitgestellt clientlibs unter der Kategorie:

granite.ui.foundation and granite.ui.foundation.admin

Die Bereitstellung erfolgt im Rahmen des Inhaltspakets:

granite.ui.content

Serverseitig server-side

Dies wird durch eine Sammlung von Sling-Komponenten gebildet, die es dem Autor ermöglichen, zusammensetzen eine schnelle Webapp. Der Entwickler entwickelt Komponenten, der Autor stellt die Komponenten zu einer Webanwendung zusammen. Die Rolle der Server-Seite besteht darin, dem Client das Hypermedia-Angebot (Markup) zu geben.

Die Komponenten befinden sich derzeit im Granite-Repository unter:

/libs/granite/ui/components/foundation

Dies wird als Teil des Inhaltspakets bereitgestellt:

granite.ui.content

Unterschiede zur klassischen Benutzeroberfläche differences-with-the-classic-ui

Die Unterschiede zwischen der Granite-Benutzeroberfläche und ExtJS (für die klassische Benutzeroberfläche verwendet) sind ebenfalls interessant:

Foundation-Komponenten der Granite-Benutzeroberfläche granite-ui-foundation-components

Die Foundation-Komponenten der Granite-Benutzeroberfläche stellen die grundlegenden Bausteine bereit, die zum Erstellen einer beliebigen Benutzeroberfläche erforderlich sind. Dazu gehören unter anderem:

Die Foundation-Komponenten finden Sie unter:

/libs/granite/ui/components/foundation

Diese Bibliothek enthält eine Granite-UI-Komponente für jedes Coral-Element. Eine Komponente ist inhaltsgesteuert, wobei sich ihre Konfiguration im Repository befindet. Dies ermöglicht die Erstellung einer Granite-Benutzeroberflächen-Anwendung, ohne dass manuell HTML-Markup geschrieben werden muss.

Zweck:

Implementierung:

Diese Bibliothek mit Foundation-Komponenten kann von anderen Bibliotheken verwendet oder erweitert werden.

ExtJS und zugehörige Granite-UI-Komponenten extjs-and-corresponding-granite-ui-components

Bei der Aktualisierung von ExtJS-Code zur Verwendung der Granite-Benutzeroberfläche bietet die folgende Liste einen praktischen Überblick über ExtJS-xtypes und Knotentypen mit den entsprechenden Granite-UI-Ressourcentypen.

Granite-Benutzeroberfläche – Verwaltungskomponenten granite-ui-administration-components

Die Verwaltungskomponenten der Granite-Benutzeroberfläche auf den Foundation-Komponenten aufbauen, um allgemeine Bausteine bereitzustellen, die von jeder Administration-Anwendung implementiert werden können. Dazu gehören unter anderem:

Zweck:

Implementierung:

Coral-Benutzeroberfläche coral-ui

Die Coral-Benutzeroberfläche (CUI) ist eine Implementierung des visuellen Stils der Adobe für die Touch-optimierte Benutzeroberfläche, die darauf ausgelegt ist, die Konsistenz des Benutzererlebnisses über mehrere Produkte hinweg zu gewährleisten. Die Coral-Benutzeroberfläche bietet alles, was Sie zur Übernahme des visuellen Stils in der Authoring-Umgebung benötigen.

Die Coral-Benutzeroberfläche ist eine Sammlung von Bausteinen für die Entwicklung von Web-Anwendungen.

Sie ist vollständig modular konzipiert und jedes Modul stellt basierend auf seiner primäre Rolle eine eigene Ebene dar. Obwohl die Ebenen so konzipiert wurden, dass sie sich gegenseitig unterstützen, können sie bei Bedarf auch unabhängig voneinander verwendet werden. Dies ermöglicht die Implementierung des Benutzererlebnisses von Coral in jeder HTML-fähigen Umgebung.

Mit der Coral-Benutzeroberfläche ist es nicht erforderlich, ein bestimmtes Entwicklungsmodell und/oder eine bestimmte Plattform zu verwenden. Hauptziel von Coral ist die Bereitstellung eines einheitlichen und sauberen HTML5-Markups, unabhängig von der eigentlichen Methode, mit der dieses Markup ausgegeben wird. Er kann für Client- oder Server-seitiges Rendering, Vorlagen, JSP, PHP oder auch Adobe Flash-RIA-Anwendungen verwendet werden, um nur einige zu nennen.

HTML-Elemente - Markup-Ebene html-elements-the-markup-layer

Über die HTML-Elemente wird ein einheitliches Erscheinungsbild für alle Basiselemente der Benutzeroberfläche (z. B. Navigationsleiste, Schaltfläche, Menü, Leiste usw.) erzielt.

Auf der einfachsten Ebene ist ein HTML-Element ein HTML-Tag mit einem dedizierten Klassennamen. Komplexere Elemente können aus mehreren Tags zusammengestellt werden, die ineinander geschachtelt sind (auf spezifische Weise).

Das CSS wird verwendet, um das eigentliche Erscheinungsbild bereitzustellen. Um eine einfache Anpassung des Erscheinungsbilds (z. B. für Branding-Fälle) zu ermöglichen, werden die Formatierungswerte als Variablen deklariert, die zur Laufzeit vom LESS-Prozessor vorab verarbeitet werden.

Zweck:

Implementierung:

Beispiel für verwendeten Markup-Code:

<button class="btn btn-large btn-primary" type="button">Large button</button>
<button class="btn btn-large" type="button">Large button</button>

Darstellung:

Das Erscheinungsbild wird in LESS definiert und es besteht eine Bindung an ein Element nach dem dedizierten Klassennamen (der folgende Auszug wurde gekürzt):

.btn {
    font-size: @baseFontSize;
    line-height: @baseLineHeight;
    .buttonBackground(@btnBackground,
                                @btnBackgroundHighlight,
                                @grayDark, 0 1px 1px rgba(255,255,255,.75));

Die tatsächlichen Werte werden in einer LESS-Variablendatei definiert (der folgende Auszug wurde gekürzt):

@btnBackgroundHighlight: darken(@white, 10%);
@btnPrimaryBackgroundHighlight: spin(@btnPrimaryBackground, 20%);
@baseFontSize: 17px;
@baseFontFamily: @sansFontFamily;

Element-Plugins element-plugins

Viele der HTML-Elemente müssen eine gewisse Dynamik aufweisen, z. B. das Öffnen und Schließen von Popup-Menüs. Dies ist die Rolle der Element-Plug-ins, die solche Aufgaben durch Manipulation des DOM mit JavaScript ausführen.

Ein Plug-in ist entweder:

Das Plug-in-Verhalten kann mit Parametern angepasst werden, indem Sie:

Entwickler können für jedes Plug-in den besten Ansatz wählen, aber die Faustregel lautet:

Dasselbe Konzept wird für die Implementierung der Formularüberprüfung verwendet. Für ein Element, das validiert werden soll, müssen Sie das erforderliche Eingabeformular als benutzerdefiniertes data-*-Attribut angeben. Dieses Attribut wird dann als Option für ein Validierungs-Plug-in verwendet.

Zweck:

Implementierung:

Ein Auszug aus Beispielmarkup (beachten Sie die Optionen, die als data-&ast angegeben sind); -Attribute):

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

Aufruf des jQuery-Plug-ins:

$(‘.cards’).cardlayout ();

Anzeige als:

Mit dem cardLayout-Plug-in wird das Layout für die eingebundenen UL-Elemente basierend auf der entsprechenden Höhe erstellt und außerdem wird die Breite des übergeordneten Elements berücksichtigt.

HTML-Elemente-Widgets html-elements-widgets

Ein Widget kombiniert ein oder mehrere grundlegende Elemente mit einem JavaScript-Plug-in, um UI-Elemente auf "höherer Ebene"zu bilden. Dadurch können komplexere Verhaltensweisen sowie ein komplexeres Erscheinungsbild implementiert werden, als ein einzelnes Element liefern könnte. Gute Beispiele hierfür sind die Tag-Auswahl oder Leisten-Widgets.

Ein Widget kann benutzerdefinierte Ereignisse sowohl auslösen als auch darauf lauschen, um eine Kooperation mit anderen Widgets der Seite zu ermöglichen. Bei einigen Widgets handelt es sich eigentlich um native jQuery-Widgets, für die die Coral-HTML-Elemente verwendet werden.

Zweck:

Implementierung:

Beispiel-Markup:

<input type="text" name="tags" placeholder="Tags" class="tagManager"/>

Aufruf des jQuery-Plug-ins (mit Optionen):

$(".tagManager").tagsManager({
        prefilled: ["Pisa", "Rome"] })

Das Plug-in gibt HTML Markup aus (dieses Markup verwendet grundlegende Elemente, die intern andere Plug-ins verwenden können):

<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">

Anzeige als:

Dienstprogrammbibliothek utility-library

Diese Bibliothek ist eine Sammlung von JavaScript-Helper-Plug-ins und/oder Funktionen, die:

Dazu gehören die XSS-Handhabung und der Ereignisbus.

Die HTML-Element-Plug-ins und Widgets können zwar auf Funktionen der Dienstprogrammbibliothek beruhen, die Dienstprogrammbibliothek kann jedoch keine feste Abhängigkeit von den Elementen und Widgets selbst aufweisen.

Zweck:

Implementierung: