Concepten van de interface AEM Touch-Enabled concepts-of-the-aem-touch-enabled-ui

Met AEM 5.6-Adobe werd een nieuwe interface met aanraakbediening geïntroduceerd met responsief ontwerp voor de auteursomgeving. Dit verschilt aanzienlijk van de oorspronkelijke klassieke interface omdat deze is ontworpen voor zowel touch- als desktopapparaten.

Deze interface met aanraakbediening is nu de standaardinterface voor AEM en vervangt de klassieke interface.

De interface met aanraakbediening bevat:

De interface met aanraakbediening is ontworpen door Adobe om consistentie te bieden in de gebruikerservaring van meerdere producten. Het is gebaseerd op:

De basisbeginselen van de interface met aanraakbediening zijn:

Raadpleeg het artikel voor een verder overzicht van de interface met aanraakbediening Structuur van de interface voor AEM aanraakbediening.

AEM aem-technology-stack

AEM gebruikt het Granite-platform als basis en het Granite-platform bevat onder andere de Java Content Repository.

Graniet granite

Graniet is Adobe Open Web-stapel, die diverse componenten verstrekt:

Graniet-interface granite-ui

Het technische platform van Granite verstrekt ook een kader van stichting UI. De belangrijkste doelstellingen hiervan zijn:

Deze voldoen aan de eisen:

De graniet-interface:

Client-kant versus server-kant client-side-vs-server-side

De cliënt-server mededeling in granite UI bestaat uit hypertext, niet voorwerpen, zodat is er geen behoefte aan de cliënt om de bedrijfslogica te begrijpen

Client-kant client-side

Hierbij wordt een uitbreiding van de woordenlijst HTML gebruikt, op voorwaarde dat de auteur zijn voornemen kenbaar kan maken om een interactieve webapp te maken. Dit is een vergelijkbare aanpak WAI-ARIA en microformaten.

Het bestaat voornamelijk uit een verzameling interactiepatronen (bijvoorbeeld het asynchroon verzenden van een formulier) die worden geïnterpreteerd door JS- en CSS-codes die op de client worden uitgevoerd. De rol van de client-kant bestaat uit het verbeteren van de opmaak (gegeven als de hypermediapliteit van de server) voor interactiviteit.

De client-kant is onafhankelijk van servertechnologie. Zolang de server de aangewezen prijsverhoging geeft, kan de cliënt-kant zijn rol vervullen.

Momenteel worden de JS- en CSS-codes geleverd als graniet clientlibs in de categorie:

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

Deze worden geleverd als onderdeel van het inhoudspakket:

granite.ui.content

Server-kant server-side

Dit wordt gevormd door een inzameling van hellende componenten die de auteur toelaten om samenstellen snel een webapp. De ontwikkelaar ontwikkelt componenten, de auteur assembleert de componenten aan webapp. De rol van de server-kant is de hypermedia betaalbaarheid (prijsverhoging) aan de cliënt te geven.

Momenteel bevinden de componenten zich in de granietopslagplaats op:

/libs/granite/ui/components/foundation

Deze wordt geleverd als onderdeel van het inhoudspakket:

granite.ui.content

Verschillen met de klassieke gebruikersinterface differences-with-the-classic-ui

De verschillen tussen de gebruikersinterface van Granite en ExtJS (die voor de klassieke gebruikersinterface worden gebruikt) zijn ook van belang:

Graniet UI Foundation-componenten granite-ui-foundation-components

De Basiscomponenten van graniet UI verstrekken de basisbouwstenen nodig voor de bouw van om het even welke UI. Deze omvatten onder meer:

De basiscomponenten zijn te vinden onder:

/libs/granite/ui/components/foundation

Deze bibliotheek bevat een graniet UI-component voor elk koraalelement. Een component wordt aangedreven door inhoud, met zijn configuratie die in de bewaarplaats verblijft. Hierdoor is het mogelijk een Granite UI-toepassing samen te stellen zonder handmatig markeringen voor HTML te schrijven.

Doel:

Implementatie:

Deze bibliotheek van stichtingscomponenten kan door andere bibliotheken worden gebruikt of worden uitgebreid.

ExtJS en corresponderende UI-componenten voor graniet extjs-and-corresponding-granite-ui-components

Wanneer het bevorderen van code ExtJS om granite UI te gebruiken, verstrekt de volgende lijst een geschikt overzicht van xtypes ExtJS en knooptypes van ExtJS met hun gelijkwaardige middeltypes van Granite UI.

Algemene UI-componenten granite-ui-administration-components

De Graniet UI-beheercomponenten bouwen op de stichtingscomponenten voort om generische bouwstenen te verstrekken die om het even welke beleidstoepassing kan uitvoeren. Deze omvatten onder meer:

Doel:

Implementatie:

Koraalinterface coral-ui

Koraal UI (koral UI) is een implementatie van CUI (Adobe style) voor aanraking-toegelaten UI, die is ontworpen om consistentie in de gebruikerservaring over veelvoudige producten te verstrekken. Koraal UI verstrekt alles u de visuele stijl moet goedkeuren die op het auteursmilieu wordt gebruikt.

De koraalinterface is een verzameling bouwstenen voor het ontwikkelen van webtoepassingen.

Ontworpen om modulair van het begin te zijn, vormt elke module een afzonderlijke laag die op zijn primaire rol wordt gebaseerd. Hoewel de lagen zijn ontworpen om elkaar te steunen, kunnen zij ook onafhankelijk worden gebruikt indien nodig. Hierdoor kan de gebruikerservaring van Coral worden geïmplementeerd in elke omgeving die geschikt is voor HTML.

Met de koraalinterface is het niet verplicht een bepaald ontwikkelingsmodel en/of -platform te gebruiken. Het primaire doel van Coral is verenigde en schone HTML5 prijsverhoging te verstrekken, onafhankelijk van de daadwerkelijke methode die wordt gebruikt om deze prijsverhoging uit te zenden. Dit kan worden gebruikt voor client- of server-side rendering, sjablonen, JSP-, PHP- of zelfs Adobe Flash RIA-toepassingen - om er maar een paar te noemen.

HTML-elementen - De opmaaklaag html-elements-the-markup-layer

De HTML-elementen bieden een gemeenschappelijke look en feel voor alle UI-basiselementen (zoals navigatiebalk, knop, menu, spoorstaaf).

Op het eenvoudigste niveau is een HTML-element een HTML-tag met een toegewezen klassenaam. Complexere elementen kunnen bestaan uit meerdere tags, die binnen elkaar zijn genest (op een specifieke manier).

De CSS wordt gebruikt om het daadwerkelijke uiterlijk te geven. Om het uiterlijk van de stijl gemakkelijk aan te passen (bijvoorbeeld voor branding) worden de werkelijke stijlwaarden gedeclareerd als variabelen die door de MINDER pre-processor tijdens runtime.

Doel:

Implementatie:

De markering:

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

Wordt weergegeven als:

De look-and-feel wordt gedefinieerd in LESS, gekoppeld aan een element met een speciale klassenaam (het volgende extract is verkort omwille van de beknoptheid):

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

Werkelijke waarden worden gedefinieerd in een LESS-variabelebestand (het volgende uittreksel is verkort vanwege de beknoptheid):

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

Elementplug-ins element-plugins

Veel van de HTML-elementen moeten een dynamisch gedrag vertonen, zoals het openen en sluiten van pop-upmenu's. Dit is de rol van de elementinsteekmodules, die dergelijke taken uitvoeren door de DOM te manipuleren met behulp van JavaScript.

Een insteekmodule is:

Het gedrag van de stop kan met parameters worden aangepast, door één van beiden:

Hoewel de ontwikkelaar de beste aanpak voor elke plug-in kan kiezen, is de duimregel:

Hetzelfde concept wordt gebruikt om formuliervalidatie te implementeren. Voor een element dat u wilt valideren, moet u het vereiste invoerformulier opgeven als een aangepast formulier data-* kenmerk. Dit kenmerk wordt vervolgens gebruikt als een optie voor een validatie-insteekmodule.

Doel:

Implementatie:

Een uittreksel van bijvoorbeeld prijsverhoging (noteer de opties die als gegeven&ast worden gespecificeerd; kenmerken):

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

De aanroep van de jQuery-insteekmodule:

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

Dit wordt weergegeven als:

De cardLayout insteekmodule maakt de ingesloten UL elementen op basis van hun respectieve hoogten en ook rekening houdend met de breedte van het bovenliggende element.

HTML Elements-widgets html-elements-widgets

Een widget combineert een of meer basiselementen met een javascript-insteekmodule om interface-elementen op een hoger niveau te vormen. Deze kunnen complexer gedrag en ook een complexere blik en het gevoel uitvoeren dan één enkel element zou kunnen leveren. Goede voorbeelden zijn de tagkiezer of de spoorwidgets.

Een widget kan zowel aangepaste gebeurtenissen activeren als naar aangepaste gebeurtenissen luisteren om samen te werken met andere widgets op de pagina. Sommige widgets zijn in feite native jQuery-widgets die de Coral HTML-elementen gebruiken.

Doel:

Implementatie:

Voorbeeldopmaak is:

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

De aanroep van de jQuery-insteekmodule (met opties):

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

De plug-in geeft HTML-markeringen uit (deze markering gebruikt basiselementen, die mogelijk intern andere plug-ins gebruiken):

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

Dit wordt weergegeven als:

Hulpprogrammabibliotheek utility-library

Deze bibliotheek is een verzameling javascript-hulplijnplug-ins en/of -functies:

Dit zijn onder andere XSS-afhandeling en de gebeurtenisbus.

Hoewel de HTML-elemenu's en -widgets kunnen vertrouwen op functionaliteit die wordt geleverd door de nutsbibliotheek, kan de hulpprogrammabibliotheek niet afhankelijk zijn van de elementen of widgets zelf.

Doel:

Implementatie: