Thema's maken en gebruiken creating-and-using-themes
Inleiding introduction
U kunt thema's maken en toepassen om een adaptief formulier of interactieve communicatie te stileren. Een thema bevat opmaakgegevens voor de componenten en deelvensters. Stijlen omvatten eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, weerspiegelt de opgegeven stijl de corresponderende componenten. Thema's worden onafhankelijk beheerd zonder verwijzing naar een adaptieve vorm of interactieve communicatie.
U kunt:
- Een thema maken
- Een bestaand thema bewerken en kopiëren
- Bestaande thema's downloaden en uploaden naar de AEM Forms-server
- Afhankelijkheden voor een thema beheren
Een thema maken, downloaden of uploaden creating-downloading-or-uploading-a-theme
Met AEM Forms kunt u thema's maken, downloaden of uploaden. Net als andere elementen, zoals formulieren, documenten en letters, wordt een thema gemaakt. Het thema wordt opgeslagen als een afzonderlijke entiteit, compleet met meta-eigenschappen zoals formulieren. Thema's die een afzonderlijke entiteit zijn, maken hergebruik in meerdere adaptieve vormen en interactieve communicatie mogelijk. U kunt een thema ook naar een andere AEM Forms-instantie verplaatsen en opnieuw gebruiken.
Een thema maken creating-a-theme
Voer de volgende stappen uit om een thema te maken:
-
Klikken Adobe Experience Manager, klikt u op Forms en klik vervolgens op Themes.
-
Klik op de pagina Thema's op Create > Theme.
Er wordt een wizard gestart om een thema te maken.
-
Geef op het tabblad Standaard van de wizard Thema maken de volgende informatie op Title en Name van het thema. Dit zijn verplichte velden.
-
Op het tabblad Geavanceerd krijgt u twee velden:
- Clientlib Location: Locatie in de opslagplaats waar de clientlibs voor het thema worden opgeslagen.
- Clientlib Category: Verstrekt een tekstgebied om cliëntlib categorienaam voor het thema in te gaan.
-
Klikken Create en klik vervolgens op Edit om het thema te openen in de Thema-editor of klik op Done om terug te keren naar de themapagina.
Een thema downloaden downloading-a-theme
U kunt thema's exporteren als ZIP-bestand en deze gebruiken in andere projecten of AEM. Een thema downloaden:
-
Klikken Adobe Experience Manager, klikt u op Forms en klik vervolgens op Themes.
-
Selecteer een thema op de pagina Thema's en klik op Download. Er wordt een dialoogvenster weergegeven met de details van het thema.
-
Klik op Download. Het thema wordt gedownload als een ZIP-bestand.
Een thema uploaden uploading-a-theme
U kunt gemaakte thema's gebruiken met voorinstellingen voor stijlen voor uw project. U kunt themapakketten die anderen maken, importeren door deze te uploaden naar uw project.
Een thema uploaden:
-
Klikken Adobe Experience Manager, klikt u op Forms en klik vervolgens op Themes.
-
Klik op de pagina Thema's op Create > File Upload.
-
Blader in de vraag Bestand uploaden naar en selecteer een themapakket op uw computer en klik op Upload.
Het geüploade thema is beschikbaar op de themapagina.
Metagegevens van een thema metadata-of-a-theme
Lijst met meta-eigenschappen van een thema (bevindt zich op de pagina met eigenschappen van een thema).
Over de Thema-editor about-the-theme-editor
AEM Forms wordt geleverd met Thema Editor. Het is een handige interface voor zakelijke gebruikers en webontwerpers/ontwikkelaars die functies biedt die vereist zijn om de opmaak van verschillende adaptieve formulieren en interactieve communicatie-elementen eenvoudig op te geven. Wanneer u een thema maakt, wordt het opgeslagen als een afzonderlijke entiteit, zoals formulieren, interactieve communicatie, letters, documentfragmenten en gegevenswoordenboeken.
In de Thema-editor kunt u stijlen van de componenten die in een thema zijn opgemaakt, aanpassen. U kunt de weergave van een formulier of interactieve communicatie op een apparaat aanpassen.
De Thema-editor bestaat uit twee deelvensters:
-
Canvas - Wordt aan de rechterkant weergegeven. Het toont een voorbeeld van een adaptief formulier of interactieve communicatie waarin alle opmaakwijzigingen direct worden weerspiegeld. U kunt ook rechtstreeks objecten op het canvas selecteren om de bijbehorende stijlen op te zoeken en deze stijlen te bewerken. Een liniaal voor apparaatresolutie bovenaan bestuurt het canvas. Als u een onderbrekingspunt voor de resolutie selecteert in de liniaal, wordt een voorbeeld van het voorbeeldformulier of de interactieve communicatie voor de desbetreffende resolutie weergegeven. Canvas wordt uitgebreid besproken onder.
-
Zijbalk- Wordt aan de linkerkant weergegeven. Het heeft de volgende punten:
-
Kiezer: Hiermee geeft u de component weer die u voor opmaak hebt geselecteerd en de eigenschappen die u kunt opmaken. De kiezer vertegenwoordigt alle componenten van een type. Als u een tekstvakcomponent in een thema voor het stileren selecteert, erven alle tekstvakjes in uw formulier of interactieve mededeling de stijl. Met kiezers kunt u een algemene component of een specifieke component voor opmaak selecteren. Een veldcomponent is bijvoorbeeld een algemeen onderdeel en een tekstvak is een specifiek onderdeel.
Algemene stijlcomponent:
Een veld kan een numeriek veld zijn, zoals leeftijd, of een veld in een tekstvak, zoals een adres.
Wanneer u een veld opmaakt, worden alle velden opgemaakt, zoals pagina, naam en adres.
Stijlspecifieke component:
Een specifieke component is van invloed op objecten van de specifieke categorie. Wanneer u de stijl van de numerieke vakcomponent in het thema toepast, overerft alleen het object van het numerieke vak de stijl.
Een tekstveld zoals een adres is bijvoorbeeld langer en een numeriek veld van een vak zoals de leeftijd is korter. U kunt een numeriek veld selecteren, de lengte ervan verkleinen en op het formulier toepassen. De breedte van alle velden van numerieke vakken wordt verkleind in het formulier.
Wanneer u alle veldcomponenten met een specifieke achtergrondkleur aanpast, nemen alle velden, zoals leeftijd, naam en adres, de achtergrondkleur over. Wanneer u een numeriek vak selecteert, zoals de leeftijd, en de breedte en breedte van alle numerieke vakken zoals de leeftijd verkleint, wordt het aantal personen in een familie verminderd. De breedte van tekstvakken wordt niet gewijzigd.
-
Status: Hiermee kunt u stijlen van een object in een specifieke status aanpassen. U kunt bijvoorbeeld opgeven hoe een object eruitziet als het zich in de standaardtoestand, de standaardfocus, de uitgeschakelde toestand, de aanwijsstatus of de foutstatus bevindt.
-
Eigenschapcategorieën: De stijleigenschappen worden in verschillende categorieën verdeeld. Bijvoorbeeld Dimension en positie, Tekst, Achtergrond, Rand en Effecten. Onder elke categorie geeft u opmaakgegevens op. Onder Achtergrond kunt u bijvoorbeeld Achtergrondkleur en Afbeelding en Verloop opgeven.
-
Geavanceerd: Hiermee kunt u aangepaste CSS aan een object toevoegen, die de eigenschappen overschrijft die door visuele besturingselementen worden gedefinieerd als er sprake is van overlapping.
-
CSS weergeven: Hiermee kunt u CSS van de geselecteerde component weergeven
In de zijbalk onder in het scherm is bovendien een pijl aanwezig. Als u op de pijl klikt, hebt u nog twee opties: Simuleren voltooid en Fout simuleren. Deze opties worden samen met de hierboven beschreven opties uitgebreid besproken onder.
-
Stijlcomponenten styling-components
U kunt een thema in veelvoudige adaptieve vormen en interactieve mededelingen gebruiken, die de componentenformattering invoeren die u in het thema hebt gespecificeerd. U kunt diverse componenten opmaken, zoals titels, beschrijving, deelvensters, velden, pictogrammen en tekstvakken. Gebruik widgets om componenteigenschappen in een thema te configureren. Eerdere kennis van CSS of LESS is niet vereist maar gewenst, hoewel u met de sectie CSS-overschrijvingen CSS-code kunt schrijven of aangepaste kiezers kunt opgeven. De sectie CSS overschrijven wordt weergegeven wanneer u een component in de zijbalk selecteert.
Opties in het zijpaneel waarmee u verschillende componenten kunt selecteren en opmaken.
Als u op de knop Bewerken klikt op een component in het zijpaneel, wordt de component in Canvas geselecteerd en kunt u de component opmaken met de opties in het zijpaneel.
Bepaalde componenten, zoals tekstvak, numeriek vak, keuzerondje en selectievakje, zijn gecategoriseerd onder algemene componenten, zoals Veld. U wilt bijvoorbeeld de opmaak van keuzerondjes aanpassen. Als u keuzerondjes voor opmaak wilt selecteren, selecteert u Veld > Widget > Keuzerondje.
Klikken ALLES UITBREIDEN in de zijbalk om gecategoriseerde componenten die niet op voorgrond zichtbaar zijn, weer te geven, te selecteren en op te maken.
Lay-outs van het deelvenster Stijlen styling-panel-layouts-br
Thema's in AEM Forms ondersteunen het opmaken van elementen in de lay-out van deelvensters in uw formulieren en interactieve communicatie. Het opmaken van elementen in lay-outs buiten de box en aangepaste lay-outs wordt ondersteund.
Voorbeelden van deelvensters buiten het vak zijn:
-
Tabs links
-
Bovenaan tabs
-
Accordeon
-
Responsief
-
Wizard
-
Mobiele lay-out
- Titels van deelvensters in koptekst
- Zonder deelvenstertitels in koptekst
De kiezers variëren voor elke lay-out.
Aangepaste lay-outs opmaken in de Thema-editor is:
- Componenten definiëren voor een lay-out die kan worden vormgegeven, en CSS-kiezers voor unieke identificatie van deze componenten
- CSS-eigenschappen definiëren die op deze componenten kunnen worden toegepast
- Definieer de opmaak voor deze componenten op interactieve wijze vanuit de gebruikersinterface
Verschillende stijlen voor verschillende schermgrootten different-styles-for-different-screen-sizes-br
Bureaublad- en mobiele lay-outs kunnen enigszins of geheel verschillende stijlen hebben. Voor mobiele apparaten hebben tablets en telefoons dezelfde lay-outs, behalve voor componentformaten.
Onderbrekingspunten van de Thema-editor gebruiken om alternatieve opmaak voor verschillende schermgrootten te definiëren. U kunt een basisapparaat of een basisresolutie selecteren waarop u het thema begint te maken en de variaties in stijlen voor andere resoluties worden automatisch gegenereerd. U kunt de opmaak van alle resoluties expliciet wijzigen.
Contextwijzigingen in opmaakeigenschappen in zijbalk bij het selecteren van objecten styling-properties-context-changes-in-sidebar-on-selecting-objects
Wanneer u een component op het canvas selecteert, worden de stijleigenschappen van de component weergegeven in het zijpaneel. Selecteer het objecttype en de objectstatus en geef de objectstijl op.
Onlangs gebruikte stijlen in de Thema-editor recently-used-styles-in-theme-editor
In de themaeditor worden maximaal 10 stijlen opgeslagen die op een component zijn toegepast. U kunt de stijlen in de cache gebruiken met een andere component van een thema. Onlangs gebruikte stijlen zijn als keuzelijst direct onder de geselecteerde component in het zijpaneel beschikbaar. In eerste instantie is de lijst met onlangs gebruikte stijlen leeg.
Terwijl u een component opmaakt, worden de stijlen in de cache opgeslagen en in het lijstvak weergegeven. In dit voorbeeld wordt het label van het tekstvak opgemaakt om de tekengrootte en -kleur te wijzigen. U kunt vergelijkbare stappen volgen voor het kiezen van een afbeelding of het wijzigen van kleuren om een component op te maken. U kunt zien hoe de stijl in de cache wordt geplaatst en in het lijstvak wordt weergegeven wanneer de opmaak van het veldlabel wordt gewijzigd.
In dit voorbeeld wordt de stijl voor het veldlabel gewijzigd. Wanneer de optie Beschrijving van responsief deelvenster is geselecteerd als stijl, wordt een lijstitem toegevoegd aan de elementenbibliotheek. Het item in de elementenbibliotheek kan worden gebruikt om de stijl voor de beschrijving van het deelvenster Responsief te wijzigen.
Wanneer een stijl in de elementenbibliotheek wordt toegevoegd, is deze beschikbaar voor andere thema's en in de stijlmodus van de interface van de formuliereditor of interactieve communicatie-editor. Als u de stijlmodus van de gebruikersinterface van de formuliereditor of de interactieve communicatie-editor gebruikt om een component op te maken, wordt de stijl in het cachegeheugen opgeslagen en is deze beschikbaar in thema's.
Met de plusknop in de elementenbibliotheek kunt u de stijl permanent opslaan met een naam die u opgeeft. Met de plusknop slaat u de stijl op, zelfs als u niet op de knop Opslaan in het zijpaneel klikt om de stijl toe te passen op een component. De plus knoop om een stijl voor later gebruik te bewaren is niet beschikbaar op de stijlwijze.
Wanneer u een aangepaste naam voor een stijl opgeeft, is de stijl gekoppeld aan een thema en is deze niet meer beschikbaar voor andere thema's. Een opgeslagen stijl verwijderen:
-
Klik op de CANVAS-werkbalk op Theme Options
-
Selecteer een opgeslagen stijl in het dialoogvenster Stijlen beheren en klik op Delete.
Wijzigingen live voorvertonen, opslaan en negeren live-preview-save-and-discard-changes
Wijzigingen in de opmaak worden direct weerspiegeld in het formulier of de interactieve communicatie die op het canvas is geladen. Met Live voorvertoning kunt u interactief de invloed van de opmaak definiëren en bekijken. Wanneer u de opmaak van een component wijzigt, worden de Done is ingeschakeld in het zijpaneel. Als u de wijzigingen wilt behouden, gebruikt u de Done knop.
Thema met een ander adaptief formulier of interactieve communicatie theme-with-another-adaptive-form-or-interactive-communication
Wanneer u een thema maakt, wordt dit gemaakt met een formulier dat wordt geleverd bij de Thema-editor. U biedt stijlen voor componenten in dit formulier. In plaats van het formulier dat bij de Thema-editor wordt geleverd, kunt u een formulier of interactieve communicatie van uw keuze selecteren om de opmaak te bepalen en een voorbeeld van de resultaten te bekijken.
Het huidige formulier of de interactieve communicatie in het Thema Editor Canvas vervangen:
-
Klik in het deelvenster THEMA EDITOR op Theme Options
-
Blader op het tabblad Algemeen naar een formulier of interactieve communicatie voor de Adaptive Form/Document veld.
Opnieuw/Ongedaan maken redo-undo
U kunt de ongewenste wijzigingen die per ongeluk optreden, ongedaan maken of opnieuw uitvoeren. Gebruik de knoppen Opnieuw uitvoeren/Ongedaan maken op het canvas.
Afbeelding: Knoppen Ongedaan maken/Opnieuw uitvoeren in Canvas
De knoppen voor Opnieuw/Ongedaan maken verschijnen wanneer u een component opmaakt in de Thema-editor.
De Thema-editor gebruiken using-the-theme-editor
Met de Thema-editor kunt u een thema bewerken dat u hebt gemaakt of geüpload. Navigeren naar Forms & Documents > Themes en selecteer een thema en open het. Het thema wordt geopend in de Thema-editor.
Zoals hierboven is beschreven, heeft de Thema-editor twee deelvensters: Zijbalk en canvas.
De successtatusopmaak van de widgetcomponent Tekstvak aanpassen in de Thema-editor. Component wordt geselecteerd in Canvas, en zijn staat wordt geselecteerd in sidebar. De opmaakopties in de zijbalk worden gebruikt om de vormgeving van een component aan te passen.
Canvas gebruiken using-canvas
Het thema wordt gemaakt met het formulier dat u wilt uitvouwen of met een formulier of interactieve communicatie van uw keuze. Op het canvas ziet u een voorbeeld van het formulier of de interactieve communicatie die wordt gebruikt voor het maken van het thema met aanpassingen die in het thema zijn opgegeven. De liniaal boven het formulier wordt gebruikt om de indeling te bepalen op basis van de grootte van de weergave van het apparaat.
In de werkbalk Canvas ziet u:
-
Toggle Side Panel
-
Theme Options
- Configureren: Hier vindt u opties waarmee u het voorbeeldformulier of de interactieve communicatie, de basisclientlib- en typekit-configuratie kunt selecteren.
- Thema-CSS weergeven: Hiermee genereert u CSS voor het geselecteerde thema.
- Stijlen beheren: Biedt opties voor het beheer van tekst- en afbeeldingsstijlen
- Help: Voert een afbeelding met instructies rondleiding door de Thema-editor uit.
-
Emulator
Wanneer u een component selecteert in het canvas, ziet u de componentwerkbalk er bovenop. Met de componentwerkbalk kunt u componenten selecteren of overschakelen op algemene componenten. U selecteert bijvoorbeeld een numeriek tekstvak in een deelvenster. De werkbalk van de component bevat de volgende opties:
-
Numeric Box Widget: Hiermee kunt u de component selecteren om het uiterlijk in het zijpaneel aan te passen.
-
Field Widget: Hiermee kunt u de algemene component voor opmaak selecteren. In dit voorbeeld worden alle tekstinvoercomponenten (tekstvak/numeriek vak/numerieke stepper/datum-invoer) geselecteerd voor opmaak.
-
Afbeelding: De werkbalk Component op het numerieke vak in Canvas
Zijbalk gebruiken using-rail
Het zijpaneel in de themaeditor bevat opties waarmee u stijlen voor componenten in een thema kunt aanpassen en kiezers kunt gebruiken. Met kiezers kunt u een groep componenten of afzonderlijke componenten selecteren en u kunt zoeken naar kiezers in het zijpaneel. U kunt kiezers schrijven voor aangepaste componenten.
Wanneer u een component selecteert op het canvas of op de zijbalk van de kiezer, worden in het zijpaneel alle opties weergegeven waarmee u stijlen kunt aanpassen.
Hieronder ziet u de opties die in het zijpaneel worden weergegeven wanneer u een component selecteert:
- Staat
- Eigenschappenblad
- Fout/succes simuleren
Staat state
Een status is een indicator van gebruikersinteractie met een component. Wanneer een gebruiker bijvoorbeeld onjuiste gegevens in een tekstvak invoert, verandert de status van het tekstvak in een foutstatus. Met de Thema-editor kunt u stijlen voor een bepaalde status opgeven.
De opties voor het aanpassen van statusstijlen variëren voor verschillende componenten.
Eigenschappenblad property-sheet
Fout/succes simuleren simulate-error-success
De opties Fout simuleren en Succes zijn beschikbaar onder aan het zijpaneel. U kunt ze zien met een tonen/verbergen-pijl die onder aan het zijpaneel zichtbaar is. Met de Thema-editor kunt u verschillende toestanden van een component opmaken.
U voegt bijvoorbeeld een numeriek veld aan het formulier toe en u geeft de opmaak op in de themaeditor. Wanneer een gebruiker een alfanumerieke waarde in het veld typt, moet u de achtergrondkleur van het tekstvak wijzigen. U selecteert het numerieke veld in het thema en gebruikt de statusoptie in het zijpaneel. U selecteert de staat van de Fout in sidebar, en verander de achtergrondkleur in rood. Als u een voorvertoning van het gedrag wilt weergeven, gebruikt u de optie Fout simuleren die beschikbaar is in het zijpaneel. De opties Simulatiefout en Succes worden hieronder gedetailleerd beschreven:
-
Simuleren voltooid:
Hiermee kunt u zien hoe een component eruitziet als u de stijl voor de successtatus opgeeft. In een formulier stellen klanten bijvoorbeeld een wachtwoord in. Gebruikers kunnen een wachtwoord instellen op basis van de richtlijnen die u opgeeft. Wanneer een gebruiker een wachtwoord typt dat voldoet aan alle richtlijnen die u opgeeft, wordt het tekstvak groen. Als het tekstvak groen wordt, is de status geslaagd. U kunt stijlen voor een component in successtaat specificeren, en zijn verschijning simuleren gebruikend de Simulate optie van het Succes.
-
Fout simuleren:
Hiermee kunt u zien hoe een component eruitziet als u de opmaak voor de foutstatus opgeeft. In een formulier stellen klanten bijvoorbeeld een wachtwoord in. Gebruikers kunnen een wachtwoord instellen op basis van de richtlijnen die u opgeeft. Wanneer een gebruiker een wachtwoord typt dat niet aan alle richtlijnen voldoet, wordt het tekstvak rood. Als het tekstvak rood wordt, treedt er een fout op. U kunt stijlen voor een component in foutenstaat specificeren, en zijn verschijning simuleren gebruikend de Simulate optie van de Fout.
Een component opmaken styling-a-component
In uw formulier hebt u bijvoorbeeld twee typen tekstvakken: een object dat alleen numerieke waarden accepteert, en een ander object dat alfanumerieke waarden accepteert. U kunt de opmaak aanpassen voor het tekstvak waarin alleen numerieke waarden kunnen worden ingevoerd (een numeriek vak).
Voer de volgende stappen uit om de opmaak voor een bepaalde component aan te passen (een numeriek vak in dit voorbeeld):
-
Selecteer in de Thema-editor het numerieke vak op het canvas.
-
Wanneer u het numerieke vak selecteert, ziet u de werkbalk met de componenten met drie opties:
-
Numeric Box Widget
-
Field Widget
-
-
-
Selecteer Numeric Box Widget.
-
De titel van het zijpaneel verandert in de widget Numerieke vak en bevat opties waarmee u de vormgeving kunt aanpassen.
Gebruiken Dimension & Position in de zijbalk om de grootte van de component aan te passen. Ervoor zorgen dat de staat Default.
In plaats van te selecteren Numeric Box Widget, selecteert u Field Widget in de componentwerkbalk en voer de bovenstaande stappen uit. Wanneer u afmetingen selecteert voor Field Widget alle tekstvakken behalve het numerieke vak hebben dezelfde grootte.
Velden voor een bepaalde status opmaken styling-fields-given-state
Met de componentwerkbalk kunt u ook de opmaak van componenten voor de verschillende werkstaten opgeven. Als een component bijvoorbeeld is uitgeschakeld, is deze uitgeschakeld. Veelgebruikte staten van een component die u in themaredacteur kunt opmaken zijn: Standaard, Focus, Uitgeschakeld, Fout, Succes en Aanwijzen. U kunt een component in het canvas selecteren en de optie Staat in het zijpaneel gebruiken om het uiterlijk aan te passen.
Voer de volgende stappen uit om de opmaak van een component in een specifieke status aan te passen:
-
Selecteer een component in het canvas en selecteer de gewenste optie op de werkbalk van de component.
In de zijbalk ziet u opties waarmee u de opmaak van de component kunt aanpassen.
-
Selecteer een staat in de zijbalk. Bijvoorbeeld de status Fout.
-
Gebruik opties zoals Border, Background in de zijbalk om aan te passen hoe de component eruitziet.
-
Gebruik de Simulate Error onder aan het zijpaneel om te zien hoe de opmaak er uitziet bij het bewerken.
Wanneer u de opmaak van een component aanpast nadat u de status ervan hebt opgegeven, wordt de aanpassing alleen voor de component weergegeven voor de opgegeven status. Als u bijvoorbeeld de opmaak voor de component aanpast wanneer de aanwijsstatus is geselecteerd. De aanpassing wordt weergegeven voor de component wanneer u de aanwijzer over de component beweegt in het gegenereerde formulier of de interactieve communicatie waarop u het thema toepast.
Gebruik de modus Voorbeeld om gedrag van andere staten dan fout en succes te simuleren. Als u de modus Voorbeeld wilt gebruiken, klikt u op Preview op de pagina-werkbalk.
Lay-outs voor kleinere schermen opmaken styling-layouts-for-smaller-displays
Gebruik de liniaal in Canvas om onderbrekingspunten te selecteren voor apparaten met kleinere beeldschermen. Klik op emulator
U kunt als volgt componenten voor verschillende onderbrekingspunten opmaken:
-
Selecteer op het canvas een onderbrekingspunt boven de liniaal.
Een onderbrekingspunt vertegenwoordigt een mobiel apparaat en zijn vertoningsgrootte.
-
Met de zijbalk kunt u de opmaak van formulieren of interactieve communicatiecomponenten in het thema voor de geselecteerde weergavegrootte aanpassen.
-
Zorg ervoor dat de aanpassing wordt opgeslagen.
U kunt formulieren of interactieve communicatiecomponenten opmaken voor meerdere apparaten. Formulier- en interactieve communicatiecomponenten voor desktops en mobiele apparaten kunnen geheel verschillende stijlen hebben.
Weblettertypen in een thema gebruiken using-web-fonts-in-a-theme
U kunt nu lettertypen gebruiken die beschikbaar zijn in een webservice in een adaptief formulier of interactieve communicatie. out-of-the-box, Typekit, Adobe is beschikbaar als een service. Als u Typekit wilt gebruiken, maakt u een kit en maakt u er lettertypen in en haalt u de kit-id op bij Typekit-website.
Voer de volgende stappen uit om Typekit in AEM te configureren:
-
Klik in de auteurinstantie op
-
Op de Cloud Services pagina, navigeren naar Third Party Services > Typekit en klik op Configure Now onder Typekit. Als er al een configuratie beschikbaar is, klikt u op de knop + om een nieuwe instantie te maken.
-
Op de Create Configuration een titel voor de configuratie op en klik op Create.
U wordt opnieuw gericht aan de configuratiepagina.
-
Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw kit-id op en klik op OK.
Voer de volgende stappen uit om een thema te vormen om de configuratie te gebruiken TypeKit:
-
Open een thema in de themaeditor voor de auteurinstantie.
-
Navigeer in de themaeditor naar Theme Options
-
In Typekit Configuration veld, selecteer een kit en klik op Save.
U ziet nu dat de lettertypen zijn toegevoegd aan de eigenschap font-family van het thema.
Lettertypen weergeven en selecteren in themaeditor listing-and-selecting-fonts-in-theme-editor
U kunt de dienst van de themaconfiguratie gebruiken om meer doopvonten aan de themaredacteur toe te voegen. Voer de volgende stappen uit om lettertypen toe te voegen:
-
Meld u aan bij AEM webconsole met beheerdersrechten. URL voor de AEM webconsole is
https://[server]:[port]/system/console/configMgr. -
Open Adaptive Form Theme Configuration Service.
-
Klik op +, geef de naam van het lettertype op en klik op Opslaan. Het lettertype wordt toegevoegd en is beschikbaar in de themaeditor.
Lettertypen selecteren in themaeditor selecting-fonts-in-theme-editor
U kunt de knop + gebruiken om een lettertype toe te voegen. Wanneer u een lettertype toevoegt, wordt dit weergegeven in het zijpaneel.
Naast de optie voor themaconfiguratie kunt u ook uw lettertype uit de themaeditor zelf toevoegen. Typ het lettertype dat u wilt gebruiken in het veld Lettertypefamilie onder het zijpaneel en druk op de toets Enter op het toetsenbord.
Wanneer u een lettertype selecteert, wordt dit toegevoegd onder de lijst van lettertypefamilies. Met de optie Masker in de themaeditor kunt u de weergegeven lettertypen in- of uitschakelen.
U ziet de wijziging in het lettertype van de component.
Het veld Lettertypefamilie ondersteunt meerdere lettertypen. Wanneer u een lettertype typt, zoekt de browser ernaar en past deze toe op de geselecteerde component. Als de browser geen lettertype kan vinden, zoekt het naar een lettertype dat er naast ligt in de familie. U kunt beginnen met het typen van het specifieke lettertype dat u zoekt. Als u niet het lettertype vindt dat u wilt gebruiken, kunt u een algemeen lettertype in de familie typen en dit gebruiken.
Maskerstijlen die zijn toegepast in de themaeditor mask-styles-applied-in-theme-editor
U kunt stijlen maskeren die in een thema zijn toegepast. In het zijpaneel van de themageditor kunt u het
In het onderstaande voorbeeld ziet u gemaskeerde en niet-gemaskerde stijlen in een thema.
Een thema toepassen op een formulier of interactieve communicatie applying-a-theme-to-a-form-or-interactive-communication-br
Een thema toepassen op een adaptief formulier:
-
Open het formulier in de bewerkingsmodus. Als u een formulier wilt openen in de bewerkingsmodus, selecteert u een formulier en klikt u op Open.
-
Selecteer in de bewerkingsmodus een component en klik vervolgens op
U kunt eigenschappen van het formulier bewerken in de zijbalk.
-
Klik in de zijbalk op Styling.
-
Selecteer uw thema in het menu Adaptive Form Theme vervolgkeuzelijst en klik op Done
Een thema toepassen op een interactieve communicatie:
-
Open de interactieve communicatie in de bewerkingsmodus. Als u een interactieve communicatie wilt openen in de bewerkingsmodus, selecteert u een formulier en klikt u op Open.
-
Selecteer in de bewerkingsmodus een component en klik vervolgens op
U kunt eigenschappen van het formulier bewerken in de zijbalk.
-
In de zijbalk, onder Basic, selecteert u uw thema in het menu Theme vervolgkeuzelijst en klik op Done
Het thema van een formulier tijdens runtime wijzigen change-theme-of-a-form-at-runtime
Met een thema kunt u verschillende onderdelen van een formulier opmaken. U kunt de themeOverride om het thema van een formulier dynamisch te wijzigen. Een typische URL van een formulier is:
https://<server>:<port>/content/forms/af/test.html
U kunt de parameter themeOverride gebruiken om een thema op runtime toe te passen.
https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme
De themeOverride kunt u een pad naar een thema opgeven. Het wijzigt het thema van het formulier en vernieuwt het formulier met bijgewerkte stijlen.
Specifieke weergave ophalen met thema's specific-af-appearance
Met AEM Forms zijn er, samen met het standaard canvasthema voor buitengebruik, veel andere thema's. Als u een formulier of interactieve communicatie met andere thema's wilt ontwerpen, alsmede aanvullende wijzigingen, kopieert u het thema uit de map Themabibliotheek. Plak de gekopieerde thema's buiten de map Themabibliotheek en bewerk het gekopieerde thema op basis van de gewenste wijzigingen.
Voer de volgende stappen uit om een thema te kopiëren:
- Navigeer in ontwerpinstantie naar Adobe Experience Manager > Forms > Themes.
- Open de map Themabibliotheek.
- Houd de aanwijzer in de map Themabibliotheek boven het corresponderende, uit-de-box thema en tik Copy.
- Plak het gekopieerde thema buiten de map Themabibliotheek.
- Pas het gekopieerde thema aan.
Nadat u het thema hebt aangepast, past u het toe op uw formulier of interactieve communicatie.
Gevolgen voor andere adaptieve gevallen van formuliergebruik impact-on-other-adaptive-form-use-cases
- Een formulier publiceren/publiceren ongedaan maken: Bij het publiceren van een formulier wordt het thema dat op is toegepast, ook gepubliceerd (als het nog niet is gepubliceerd)
- Een formulier importeren/exporteren: Bij het importeren of exporteren van een formulier wordt het bijbehorende thema ook automatisch geïmporteerd of geëxporteerd.
- Referenties van een formulier: De sectie Verwijzingen in formulierverwijzingen bevat een extra item voor het thema.
- Tijdstip van laatste wijziging van een formulier: Wordt bijgewerkt wanneer het gekoppelde thema wordt gewijzigd.
- A/B-tests: U kunt een ander thema toepassen op twee versies van het formulier in A/B-tests. De informatie over de twee thema's wordt afzonderlijk opgeslagen op de twee hulplijncontainers.
CSS-generatiereeks css-generation-sequence
Wanneer u weergave-CSS selecteert, verzamelt de Thema-editor alle opmaakgegevens en wordt een CSS gemaakt. Het verzamelt informatie in de volgende orde:
- Stijl die in de basisclientbibliotheek van het thema wordt gedefinieerd.
- Door gebruiker gedefinieerde stijl, opgegeven met gebruik van de eigenschappen in de zijbalk.
- CSS-stijl opgegeven met de optie CSS overschrijven.
De achtergrondkleur van een tekstvak is bijvoorbeeld blauw in de basisclientbibliotheek. U wijzigt de afbeelding in roze met de eigenschappen in de zijbalk. Wanneer u CSS genereert, ziet u de achtergrondkleur van het tekstvak roze. Nadat de achtergrondkleur is gewijzigd met de eigenschappen, gebruikt een andere auteur de CSS-overschrijvingsoptie om het tekstvak voor de achtergrondkleur als wit te wijzigen. Wanneer u CSS genereert, ziet u achtergrondkleur als wit in de gegenereerde CSS.
Foutopsporingsstijlen debugging-styles
Wanneer u stijlen voor componenten opgeeft in de Thema-editor, wordt een CSS gegenereerd. Wanneer u een generische component opmaakt, worden ook meerdere componenten in de component opgemaakt. Wanneer u bijvoorbeeld een veld opmaakt, worden het tekstvak en het label ook opgemaakt. Wanneer u het tekstvak binnen het veld opmaakt, krijgt het een eigen CSS. Als u fouten wilt opsporen in de CSS die voor het veld en de component is gegenereerd, biedt de Thema-editor opties waarmee u CSS kunt weergeven.
De gegenereerde CSS kunt u met de volgende opties zien:
-
CSS weergeven in de zijbalk: Wanneer u een component in het thema selecteert, ziet u de optie CSS weergeven in de zijbalk. De gegenereerde CSS, inclusief CSS voor
::beforeen::afterpseudo-elementen. -
Thema-CSS weergeven in de werkbalk Canvas: Klik op de werkbalk Canvas op
Problemen oplossen, aanbevelingen en aanbevolen procedures troubleshooting-recommendations-and-best-practices
-
Elementen uit een ander thema vermijden
Wanneer u een thema bewerkt, kunt u door elementen (zoals afbeeldingen) bladeren en elementen uit andere thema's toevoegen. U bewerkt bijvoorbeeld de achtergrond van een pagina. Wanneer u bijvoorbeeld Page
-
U kunt problemen met uw huidige thema oplossen als een element wordt toegevoegd uit een ander thema en het andere thema wordt verplaatst of verwijderd. U wordt aangeraden te voorkomen dat u bladeren en elementen uit andere thema's toevoegt.
-
Het gebruiken van basis clientlib, themageditor, en gealigneerde het stileren
-
Basis-clientlib:
De basisclientbibliotheek bevat opmaakgegevens. Stijlinformatie in bibliotheken aan de clientzijde in thema's gebruiken.
- Ga naar Experience Manager > Forms > Themes.
- Selecteer een thema op de pagina Thema's en klik op View Properties.
- Klik op de pagina Eigenschappen die wordt geopend op Advanced.
- Blader op het tabblad Geavanceerd in het veld Clientlib-locatie naar de clientbibliotheek die u wilt gebruiken en selecteer deze.
- Klik op Save.
De stijl die u opgeeft in de clientbibliotheek, wordt geïmporteerd in het thema dat deze stijl gebruikt. U geeft bijvoorbeeld de opmaak op voor tekstvak, numeriek vak en voor de clientbibliotheek. Wanneer u de clientbibliotheek in het thema importeert, wordt de stijl voor het tekstvak, het numerieke vak en de switch geïmporteerd. Vervolgens kunt u andere componenten opmaken met de themaeditor.
U kunt ook een thema maken, er kopieën van maken en vervolgens de opmaak wijzigen die in de gekopieerde thema's wordt geboden voor vergelijkbare gebruiksdoeleinden. -
Thema-editor:
Met de Thema-editor kunt u thema's maken om uw formulier of interactieve communicatie op te maken. U kunt de opmaak van componenten in een thema opgeven, zodat u de weergave in meerdere formulieren of interactieve communicatie die u ontwikkelt consistent kunt houden. Het wordt aanbevolen om opmaakgegevens op te geven in een thema en het thema vervolgens toe te passen op een formulier.
-
Inline styling:
Als u met een formulier werkt, kunt u opmaakcomponenten maken in de modus Stijl in een formulier of in een interactieve multikanaaleditor voor communicatie. Als u de stijl van een formuliercomponent wijzigt, overschrijft u de stijl die in het thema is opgegeven. Als u de opmaak voor bepaalde componenten van een bepaald formulier wilt wijzigen, raadpleegt u Inline styling van componenten.
-
-
Bibliotheken op de client gebruiken
Als u clientbibliotheken wilt maken om opmaakgegevens te importeren, raadpleegt u Clientzijbibliotheken gebruiken. Nadat u een clientbibliotheek hebt gemaakt, kunt u deze in uw thema importeren aan de hand van de bovenstaande stappen.
-
De lay-outbreedte van het containervenster wijzigen
Het wordt niet aanbevolen de lay-outbreedte van het containervenster te wijzigen. Wanneer u de breedte van een containerdeelvenster opgeeft, wordt het statisch en wordt het niet aangepast aan verschillende weergaven.
-
Wanneer moet u de formuliereditor of themaeditor gebruiken om met kop- en voettekst te werken?
Gebruik de themaeditor als u koptekst en voettekst wilt opmaken met opmaakopties zoals letterstijl, achtergrond en transparantie.
Gebruik de opties voor de formuliereditor als u informatie wilt opgeven, zoals een logoafbeelding, een bedrijfsnaam in de koptekst en copyrightinformatie in de voettekst.