Aangepaste aangepaste formulierthema's maken creating-custom-adaptive-form-themes
Vereisten prerequisites
- Kennis van het LESS-framework (Leaner CSS)
- Een clientbibliotheek maken in Adobe Experience Manager
- Creërend een adaptief vormmalplaatjevoor het gebruiken van het thema u creeert
Adaptief formulierthema adaptive-form-theme
Een adaptief vormthema is een AEM cliëntbibliotheek die u gebruikt om de stijlen (blik en gevoel) voor een adaptieve vorm te bepalen.
U creeert een adaptieve malplaatje en past het thema op het malplaatje toe. U kunt dit douanemalplaatje dan gebruiken om een adaptieve vorm tot stand te brengen.
Een adaptief formulierthema maken to-create-an-adaptive-form-theme
Figuur: Steekproef van het Thema van het Bos
-
Creeer een knoop van type
cq:ClientLibraryFolder
onder de/apps
knoop.Maak bijvoorbeeld het volgende knooppunt:
/apps/myAfThemes/forestTheme
-
Voeg een multi-getaxeerde koordbezit
categories
aan de knoop toe en plaats correct zijn waarde.Stel de eigenschap bijvoorbeeld in op:
af.theme.forest
. -
Voeg twee mappen,
less
encss
, en een bestandcss.txt
toe aan het knooppunt dat in stap 1 wordt gemaakt:-
less
map: bevat deless
variabele bestanden waarin u deless
variabelen enless mixins
definieert die worden gebruikt om de CSS-stijlen te beheren.Deze map bestaat uit
less
variabele bestanden,less
mixin bestandenless
en bestanden die stijlen definiëren met behulp van mixins en variabelen. En al dezeless
dossiers worden dan ingevoerd in styles.less. -
css
omslag: Bevat de .css dossiers waarin u de statische stijlen bepaalt die in het thema moeten worden gebruikt.
Minder veranderlijke dossiers: Dit zijn de dossiers waar u de variabelen bepaalt of met voeten treedt die in het bepalen van CSS stijlen worden gebruikt.
Adaptieve formulieren bieden variabelen die in de volgende
.less
-bestanden zijn gedefinieerd:/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less
/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
Adaptieve formulieren bevatten ook variabelen van derden die zijn gedefinieerd in:
/apps/clientlibs/fd/af/third-party/less/variables.less
U kunt de variabelen van
less
gebruiken die bij adaptieve formulieren worden geleverd, u kunt deze variabelen overschrijven of u kunt nieuwe variabelen vanless
maken.note note NOTE Geef tijdens het importeren van de bestanden van de mindere voorprocessor in de instructie import het relatieve pad van de bestanden op. Voorbeeld overschrijvende variabelen:
code language-css @button-background-color: rgb(19, 102, 44); @button-border-color: rgb(19, 102, 44); @button-border-size: 0px; @button-padding: 10px 15px; @button-font-color: #ffffff;
Om de
less
variabelen met voeten te treden:-
Standaardadaptieve formuliervariabelen importeren:
/apps/clientlibs/fd/af/guidetheme/common/less/globalvariables.less/apps/clientlibs/fd/af/guidetheme/common/less/layoutvariables.less
-
Importeer vervolgens het bestand met de waarde Minder, dat overschreven variabelen bevat.
Voorbeeld van nieuwe definities van variabelen:
code language-css @button-focus-bg-color: rgb(40, 208, 90); @button-hover-bg-color: rgb(30, 156, 67);
Minder mixin dossiers: u kunt de functies bepalen die variabelen als argumenten goedkeuren. De uitvoer van deze functies is de resulterende stijlen. Gebruik deze combinaties in verschillende stijlen, zodat u niet telkens CSS-stijlen hoeft te herhalen.
Adaptieve formulieren bieden buitenste mixen die zijn gedefinieerd in:
/apps/clientlibs/fd/af/guidetheme/common/less/adaptiveforms-mixins.less
Aangepaste formulieren bieden ook mengsels van derden, zoals gedefinieerd in:
/apps/clientlibs/fd/af/third-party/less/mixins.less
Definitie van monstermix:
code language-css .rounded-corners (@radius) { -webkit-border-radius: @radius; -moz-border-radius: @radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .border(@color, @type, @size) { border: @color @size @type; }
Styles.less Dossier: Gebruik dit dossier om alle
less
dossiers (variabelen, mengen, stijlen) te omvatten die u in de cliëntbibliotheek moet gebruiken.In het volgende voorbeeldbestand
styles.less
kan de instructie import in willekeurige volgorde worden geplaatst.De instructies voor het importeren van de volgende
.less
-bestanden zijn verplicht:globalvariables.less
layoutvariables.less
components.less
layouts.less
code language-css @import "../../../clientlibs/fd/af/guidetheme/common/less/globalvariables.less"; @import "../../../clientlibs/fd/af/guidetheme/common/less/layoutvariables.less"; @import "forestTheme-variables"; @import "../../../clientlibs/fd/af/guidetheme/common/less/components.less"; @import "../../../clientlibs/fd/af/guidetheme/common/less/layouts.less"; /* custom styles */ .guidetoolbar { input[type="button"], button, .button { .rounded-corners (@button-radius); &:hover { background-color: @button-hover-bg-color; } &:focus { background-color: @button-focus-bg-color; } } } form { background-image: url(../images/forest.png); background-repeat: no-repeat; background-size: 100%; }
css.txt
bevat de paden van CSS-bestanden die voor de bibliotheek moeten worden gedownload.Bijvoorbeeld:
code language-javascript #base=/apps/clientlibs/fd/af/third-party/css bootstrap.css #base=less styles.less #base=/apps/clientlibs/fd/xfaforms/xfalib/css datepicker.css listboxwidget.css scribble.css dialog.css
note note NOTE Het bestand styles.less is niet verplicht. Dit betekent dat u dit bestand niet hoeft te maken als u geen aangepaste stijlen, variabelen of mixen hebt gedefinieerd. Als u echter geen bestand style.less maakt, moet u de commentaarmarkering in het bestand css.txt op de volgende regel verwijderen: #base=less
En becommentariëer de volgende lijn: styles.less
-
Een thema in een adaptieve vorm gebruiken to-use-a-theme-in-an-adaptive-form
Nadat u een adaptief formulierthema hebt gemaakt, voert u de volgende stappen uit om dit thema in een adaptieve vorm te gebruiken:
-
Om het thema te omvatten dat in wordt gecreeerd om een adaptieve sectie van het vormthematot stand te brengen, creeer een douanepagina van type
cq:Component
.Bijvoorbeeld:
/apps/myAfCustomizations/myAfPages/forestPage
-
Voeg een eigenschap
sling:resourceSuperType
toe en stel de waarde ervan in alsfd/af/components/page/base
. -
Als u een thema op de pagina wilt gebruiken, moet u een bestand library.jsp dat met voeten wordt getreden, aan het knooppunt toevoegen.
Vervolgens kunt u het thema importeren dat is gemaakt in Een adaptieve sectie voor formulierthema maken van dit artikel.
In het volgende voorbeeldcodefragment wordt het thema
af.theme.forest
geïmporteerd.code language-jsp <%@include file="/libs/fd/af/components/guidesglobal.jsp"%> <cq:includeClientLib categories="af.theme.forest"/>
-
Facultatief: In de douanepagina, treedt header.jsp, footer.jsp, en body.jsp met voeten, zoals vereist.
-
-
Maak een aangepaste sjabloon (bijvoorbeeld:
/apps/myAfCustomizations/myAfTemplates/forestTemplate
) waarvan de jcr:content verwijst naar een aangepaste pagina die in de vorige stap is gemaakt (bijvoorbeeld:myAfCustomizations/myAfPages/forestPage)
. -
Maak een adaptief formulier met de sjabloon die u in de vorige stap hebt gemaakt. De vormgeving van het adaptieve formulier wordt bepaald door het thema dat is gemaakt in de sectie Voor het maken van een adaptief formulierthema van dit artikel.