Concepten van de gebruikersinterface voor Adobe Experience Manager Touch concepts-of-the-aem-touch-enabled-ui

Adobe Experience Manager (AEM) kenmerkt een aanraking-toegelaten UI met ontvankelijk ontwerpvoor het auteursmilieu dat wordt ontworpen om op zowel aanraak als Desktopapparaten te werken.

De interface met aanraakbediening bevat:

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

De basisbeginselen van de interface met aanraakbediening zijn:

Voor een verder overzicht van de aanraking-Toegelaten structuur UI, zie Structuur van de AEM aanraking-Toegelaten UI.

AEM aem-technology-stack

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

Graniet granite

Granite is de Open Web-stapel van de Adobe, die diverse componenten verstrekt die omvatten:

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:

GraniteUI.pdf

krijgt Dossier
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 gelijkaardige benadering van WAI-ARIAen microformats.

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 JS en CSS codes geleverd als Granite clientlibsonder 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 sling componenten die de auteur toelaten om webapp snel samen te stellen. 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 de stichtingscomponenten van UI van Graniteverstrekken 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 gestuurd door inhoud, waarbij de configuratie zich in de repository bevindt. Hierdoor is het mogelijk een Granite UI-toepassing samen te stellen zonder handmatig markeringen voor HTML te schrijven.

Doel:

Implementatie:

Deze bibliotheek met basiscomponenten kan door andere bibliotheken worden gebruikt of 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 componenten van het beleid van Granite UIbouwen 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

CoralUI.pdf

krijgt Dossier
CUI (Coral UI) is een implementatie van de visuele stijl van de Adobe voor de interface met aanraakbediening die is ontworpen om consistentie in de gebruikerservaring op meerdere producten te bieden. Koraal UI verstrekt alles dat u de visuele stijl moet aannemen 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 is het mogelijk om de gebruikerservaring van Coral te implementeren 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 mogelijk te maken om het blik-en-gevoel (bijvoorbeeld, voor het geval van branding) gemakkelijk aan te passen, worden de daadwerkelijke stijlwaarden verklaard als variabelen die door LESSpre-bewerker tijdens runtime worden uitgebreid.

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 soort 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 insteekmodule 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 data-* -kenmerk. Dit kenmerk wordt vervolgens gebruikt als een optie voor een validatie-insteekmodule.

Doel:

Implementatie:

Een uittreksel van voorbeeldprijsverhoging (neem nota van de opties die als gegeven * attributen worden gespecificeerd):

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

Met de plug-in cardLayout worden de omsloten UL -elementen ingedeeld op basis van hun respectieve hoogten en waarbij ook rekening wordt gehouden 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 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</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">

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: