Formatsystem style-system
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 use-case
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 overview
Vanligtvis har du följande format när du använder Style System.
-
Webbdesignern skapar olika visuella variationer av en komponent.
-
HTML-utvecklaren får komponenternas HTML-utdata och de visuella variationer som ska implementeras.
-
Utvecklaren i HTML definierar CSS-klasserna som motsvarar varje visuell variation och som ska infogas i elementet som omsluter komponenterna.
-
Utvecklaren HTML implementerar motsvarande CSS-kod (och eventuellt JS-kod) för alla visuella variationer så att de ser ut som de definierats.
-
Den AEM utvecklaren placerar angiven CSS (och JS som tillval) i en Klientbibliotek och använder den.
-
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.
-
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.
Använd use
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:
- Installera CSS som klientbibliotek enligt beskrivningen i avsnittet Översikt.
- Konfigurera de CSS-klasser som du vill göra tillgängliga för innehållsförfattarna enligt beskrivningen i avsnittet Som mallskapare.
- Innehållsförfattare kan sedan använda de format som beskrivs i avsnittet Som innehållsförfattare.
Som innehållsförfattare as-a-content-author
-
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/enoch redigera sidan. -
Välj en Titel komponenten längre ned på sidan
-
Tryck eller klicka på Stilar i verktygsfältet i Lista om du vill öppna stilmenyn och ändra komponentens utseende.
note note NOTE 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 as-a-template-author
-
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 profilen för Titel genom att trycka på eller klicka på Policy komponentens knapp.
-
På fliken Format i egenskaperna kan du se hur formaten har konfigurerats.
- 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.
Inställningar setup
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 enable-styles-tab-design
För att en komponent ska kunna fungera 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"
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 enable-styles-tab-edit
Från och med AEM version 6.4.7.0 finns nu fliken Format i dialogrutan Redigera tillgänglig. 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"
Format med elementnamn styles-with-element-names
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]
- HTML har företräde framför allt:
data-sly-resource="${'path/to/resource' @ decorationTagName='span'} - Sedan används det första formatet i listan med format som är konfigurerade i komponentens profil bland flera aktiva format.
- Slutligen är komponentens
cq:htmlTag/cq:tagNamebetraktas 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.