Formatsystem

Med Style System kan mallskapare definiera formatklasser i en komponents innehållsprincip så att en innehållsförfattare kan markera dem när komponenten på en sida redigeras. Dessa format kan vara alternativa visuella varianter av en komponent, vilket gör komponenten mer flexibel.

På så sätt elimineras behovet av att utveckla en anpassad komponent för varje format eller att anpassa komponentdialogrutan för att aktivera sådana formatfunktioner. Det leder till mer återanvändbara komponenter som snabbt och enkelt kan anpassas efter innehållsförfattarnas behov utan någon AEM bakomliggande utveckling.

Användningsfall

Mallförfattare behöver inte bara kunna konfigurera hur komponenterna fungerar för innehållsförfattarna, utan även konfigurera ett antal alternativa visuella varianter av en komponent.

På samma sätt behöver innehållsförfattare inte bara kunna strukturera och ordna sitt innehåll, utan också kunna välja hur det ska presenteras visuellt.

Style System ger en enhetlig lösning för både mallskaparens och innehållsförfattarens krav:

  • Mallförfattare kan definiera formatklasser i komponenternas innehållsprincip.
  • Innehållsförfattare kan sedan välja dessa klasser i en listruta när de redigerar komponenten på en sida för att tillämpa motsvarande format.

Klassen style infogas sedan i elementet dekoration wrapper i komponenten så att komponentutvecklaren inte behöver bekymra sig om att hantera formaten utöver att tillhandahålla sina CSS-regler.

Översikt

Vanligtvis har du följande format när du använder Style System.

  1. Webbdesignern skapar olika visuella variationer av en komponent.

  2. HTML-utvecklaren får komponenternas HTML-utdata och de visuella variationer som ska implementeras.

  3. Utvecklaren i HTML definierar CSS-klasserna som motsvarar varje visuell variation och som ska infogas i elementet som omsluter komponenterna.

  4. Utvecklaren HTML implementerar motsvarande CSS-kod (och eventuellt JS-kod) för alla visuella variationer så att de ser ut som de definierats.

  5. Den AEM utvecklaren placerar angiven CSS (och JS som tillval) i en Klientbibliotek och använder den.

  6. AEM utvecklare eller mallskapare konfigurerar sidmallarna och redigerar profilen för varje formaterad komponent, lägger till definierade CSS-klasser, ger användarvänliga namn för varje format och anger vilka format som kan kombineras.

  7. AEM kan sedan välja de formgivna formaten i sidredigeraren via formatmenyn i komponentens verktygsfält.

Observera att endast de tre sista stegen faktiskt utförs i AEM. Detta innebär att all utveckling av nödvändig CSS och Javascript kan göras utan AEM.

För att kunna implementera formaten behöver du bara distribuera AEM och välja mellan komponenterna i de önskade mallarna.

Följande diagram visar arkitekturen i Style System.

aem-style-system

Användning

För att demonstrera funktionen kommer vi att använda WKNDimplementering av kärnkomponentens titelkomponent som ett exempel.

Följande avsnitt Som innehållsförfattare och Som mallskapare beskriver hur du testar funktionaliteten i Style System med Style System of WKND.

Om du vill använda Style System för dina egna komponenter gör du följande:

  1. Installera CSS som klientbibliotek enligt beskrivningen i avsnittet Översikt.
  2. Konfigurera de CSS-klasser som du vill göra tillgängliga för innehållsförfattarna enligt beskrivningen i avsnittet Som mallskapare.
  3. Innehållsförfattare kan sedan använda de format som beskrivs i avsnittet Som innehållsförfattare.

Som innehållsförfattare

  1. När du har installerat WKND-projektet går du till WKND:s överordnad engelska språksida på http://<host>:<port>/sites.html/content/wknd/language-masters/en och redigera sidan.

  2. Välj en Titel komponenten längre ned på sidan

    Formatsystem för författaren

  3. Tryck eller klicka på Stilar i verktygsfältet i Lista om du vill öppna stilmenyn och ändra komponentens utseende.

    Markera format

    OBSERVERA

    I det här exemplet Färger format (Svart, Vit och Grå) utesluter varandra, medan Stil alternativ (Understruken, Högerjustera och Mini-avstånd) kan kombineras. Detta kan konfigureras i mallen som mallskapare.

Som mallskapare

  1. När du redigerade WKND:s engelska överordnad hemsida på http://<host>:<port>/sites.html/content/wknd/language-masters/en, redigera sidans mall via Sidinformation -> Redigera mall.

    Redigera mall

  2. Redigera profilen för Titel genom att trycka på eller klicka på Policy komponentens knapp.

    Redigera princip

  3. På fliken Format i egenskaperna kan du se hur formaten har konfigurerats.

    Redigera egenskaper

    • Gruppnamn: Format kan grupperas tillsammans på den formatmeny som innehållsförfattaren ska se när komponentens format konfigureras.
    • Du kan kombinera format: Tillåter att flera format i den gruppen markeras samtidigt.
    • Formatnamn: Beskrivningen av det format som ska visas för innehållsförfattaren när komponentens format konfigureras.
    • CSS-klasser: Det faktiska namnet på CSS-klassen som är associerad med formatet.

    Använd draghandtagen för att ordna gruppernas och gruppernas inbördes ordning. Använd ikonerna för att lägga till eller ta bort för att lägga till eller ta bort grupper eller format i grupper.

FÖRSIKTIGHET

CSS-klasserna (och eventuell nödvändig JavaScript) som konfigurerats som formategenskaper för en komponents policy måste distribueras som Klientbibliotek för att kunna arbeta.

Inställningar

Core Components version 2 och senare är helt aktiverade för att utnyttja Style System och kräver ingen ytterligare konfiguration.

Följande steg är bara nödvändiga för att aktivera Style System för dina egna anpassade komponenter eller för att kan du aktivera fliken Stilar i dialogrutan Redigera.

Aktivera fliken Format i designdialogrutan

För att en komponent ska kunna arbeta med AEM Style System och visa stilfliken i sin designdialogruta måste komponentutvecklaren inkludera stilfliken med följande inställningar för komponenten:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
OBSERVERA

Detta använder övertäckningargenom Samla resurser.

När komponenten är konfigurerad infogas de format som är konfigurerade av sidförfattarna automatiskt av AEM på dekorationselementet som AEM runt varje redigerbar komponent automatiskt. Själva komponenten behöver inte göra något annat för att detta ska hända.

Aktivera fliken Format i dialogrutan Redigera

Det finns även en valfri formatflik i dialogrutan Redigera. Till skillnad från fliken Design Dialog är fliken i dialogrutan Redigera inte nödvändig för att formatsystemet ska fungera, men den är ett valfritt gränssnitt där en innehållsförfattare kan ange format.

Fliken för redigeringsdialogrutan kan läggas in på ungefär samma sätt som fliken för designdialogrutan:

  • path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_edit/styletab"
  • sling:resourceType = "granite/ui/components/coral/foundation/include"
OBSERVERA

Detta använder övertäckningargenom Samla resurser.

OBSERVERA

Fliken Format i dialogrutan Redigera är inte aktiverad som standard.

Format med elementnamn

En utvecklare kan också konfigurera en lista med tillåtna elementnamn för format i komponenten med cq:styleElements strängmatrisegenskap. På fliken Format i profilen i designdialogrutan kan mallskaparen också välja ett elementnamn som ska anges för varje format. Då anges elementnamnet för elementet wrapper.

Den här egenskapen ställs in på cq:Component nod. Till exempel:

  • /apps/<yoursite>/components/content/list@cq:styleElements=[div,section,span]
FÖRSIKTIGHET

Undvik att definiera elementnamn för format som kan kombineras. När flera elementnamn definieras är prioritetsordningen:

  1. HTML har företräde framför allt: data-sly-resource="${'path/to/resource' @ decorationTagName='span'}
  2. Sedan används det första formatet i listan med format som är konfigurerade i komponentens profil bland flera aktiva format.
  3. Slutligen är komponentens cq:htmlTag/ cq:tagName betraktas som ett reservvärde.

Den här möjligheten att definiera formatnamn är användbar för mycket generiska komponenter, som Layoutbehållaren eller komponenten Innehållsfragment, för att ge dem ytterligare innebörd.

Den tillåter till exempel att en Layout Container får semantik som <main>, <aside>, <nav>, osv.

På denna sida