Thema's maken en gebruiken creating-and-using-themes
de Adobe adviseert gebruikend de moderne en verlengbare gegevens vangen Componenten van de Kernvoor het creëren van nieuwe Aangepaste Formsof het toevoegen van Aangepaste Forms aan de pagina's van AEM Sites. Deze componenten betekenen een aanzienlijke vooruitgang in de aanmaak van Adaptive Forms en zorgen voor indrukwekkende gebruikerservaring. In dit artikel wordt een oudere aanpak beschreven voor de auteur Adaptive Forms die gebruikmaakt van stichtingscomponenten.
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
- Een bestaand thema 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:
-
Klik Adobe Experience Manager, klik Forms, en klik dan Thema's.
-
In de pagina van Thema's, klik creeer > Thema.
Er wordt een wizard gestart om een thema te maken. -
In het Basis lusje van de Create tovenaar van het Thema, verstrek Titel en Naam van het thema. Dit zijn verplichte velden.
-
Op het tabblad Geavanceerd krijgt u twee velden:
-
Clientlib Plaats: Plaats in de bewaarplaats die de clientlibs voor het thema opslaat.
-
Clientlib Categorie: Verstrekt een tekstgebied om cliëntlib categorienaam voor het thema in te gaan.
-
-
Klik creeer en klik dan uitgeven om het thema in de Redacteur van het Thema te openen, of klik Gedaan om aan de themapagina terug te keren.
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:
-
Klik Adobe Experience Manager, klik Forms, en klik dan Thema's.
-
In de pagina van Thema's, selecteer een thema, en klik Download. Er wordt een dialoogvenster weergegeven met de details van het thema.
-
Klik 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:
-
Klik Adobe Experience Manager, klik Forms, en klik dan Thema's.
-
In de pagina van Thema's, klik creëren > Dossier uploadt.
-
In het Dossier uploadt herinnering, doorblader en selecteer een themapakket op uw computer en klik uploadt.
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 - verschijnt op de rechterkant. 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 van de resolutie selecteert in de liniaal, wordt een voorbeeld van het voorbeeldformulier of de interactieve communicatie voor de desbetreffende resolutie weergegeven. Canvas wordt besproken in detail hieronder.
-
Sidebar - verschijnt op de linkerkant. Het heeft de volgende punten:
-
Selecteur: toont de component die voor het stileren wordt geselecteerd, en zijn eigenschappen die u kunt stileren. 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.
het Stijlen generische component:
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.het stileren van specifieke 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.
-
Staat: laat u stijlen van een voorwerp in een specifieke staat 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.
-
de Categorieën van het Bezit: het stileren eigenschappen zijn verdeeld in diverse categorieën. 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: laat u douane CSS aan een voorwerp toevoegen, dat de eigenschappen met voeten treedt visuele controles bepalen als er een overlapping is.
-
CSS van de Mening: Laat u CSS van de geselecteerde component bekijken
In de Sidebar is onder aan de zijbalk ook een pijl aanwezig. Wanneer u de pijl klikt, krijgt u twee meer opties: Simuleer Succes en Simuleer Fout. Deze opties, samen met de hierboven beschreven opties worden besproken in detail hieronder.
-
Stijlcomponenten styling-components
U kunt een thema gebruiken in meerdere adaptieve formulieren en interactieve communicatie, waarmee u de componentopmaak importeert die u in het thema hebt opgegeven. 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. Om radioknopen voor het stileren te selecteren, uitgezochte Gebied > Widget > Keuzerondje.
Klik UITBREIDEN ALLES in sidebar aan mening, selecteren, en stijl gecategoriseerde componenten die niet op voorgrond zichtbaar zijn.
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 interactief 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 opmaakeigenschappen 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 direct onder de geselecteerde component in het zijpaneel beschikbaar als een keuzelijst. 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 activabibliotheek wordt toegevoegd, is het beschikbaar voor andere thema's en op de stijlwijzevan de vormredacteur of interactieve communicatie redacteur UI. 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:
-
Op de toolbar CANVAS, klik
-
In het Manage dialoog van Stijlen, selecteer een bewaarde stijl, klik Schrapping.
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 het stileren van een component verandert, wordt de Gereed knoop toegelaten in sidebar. Om veranderingen te behouden, gebruik de Gereed knoop.
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:
-
In het paneel van de EDITOR van het THEMA, klik
-
Op het Algemene lusje, doorblader en selecteer een vorm of interactieve mededeling voor het Aangepaste 1} gebied van de Vorm/van het Document.
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.
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. Navigeer aan Forms & Documenten > Thema's, 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: Sidebar 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:
-
Knevel Zijpaneel
-
de Opties van het Thema
- Configureren: biedt opties voor het selecteren van het voorbeeldformulier of de interactieve communicatie, de basisclientlib en de Adobe Fonts-configuratie.
- Thema CSS weergeven: genereert CSS voor het geselecteerde thema.
- Stijlen beheren: biedt opties voor het beheer van tekst- en afbeeldingsstijlen
- Help: hiermee wordt een rondleiding door de Thema-editor uitgevoerd voor afbeeldingen.
-
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:
-
Numerieke Widget van de Doos: Laat u de component selecteren om zijn blik in sidebar aan te passen.
-
Widget van het Gebied: Laat u de generische component voor het stileren selecteren. In dit voorbeeld worden alle tekstinvoercomponenten (tekstvak/numeriek vak/numerieke stepper/datum-invoer) geselecteerd voor opmaak.
-
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, kunt u de optie Fout simuleren gebruiken die beschikbaar is in de zijbalk. De opties Simulatiefout en Succes worden hieronder gedetailleerd beschreven:
-
Simuleer Succes:
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. -
Simuleer Fout:
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 tekstvak waarin alleen numerieke waarden kunnen worden ingevoerd en een tekstvak waarin alfanumerieke waarden kunnen worden ingevuld. 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:
- Numerieke Widget van de Doos
- Widget van het Gebied
-
Selecteer Numerieke Widget van de Doos.
-
De titel van het zijpaneel verandert in de widget Numerieke vak en bevat opties waarmee u de vormgeving kunt aanpassen.
De optie van het Dimension en van de Positie van het gebruik in sidebar om grootte van de component aan te passen. Zorg ervoor dat de Staat Gebrek is.
In plaats van het selecteren van Numerieke Widget van de Doos, uitgezochte Widget van het Gebied in de componententoolbar, en voer de stappen hierboven uit. Wanneer u afmetingen voor optie van Widget van het Gebied selecteert, hebben alle tekstvakjes behalve de numerieke doos de zelfde 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: Gebrek, Nadruk, Gehandicapten, Fout, Succes, en Hover. 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.
- De opties van het gebruik zoals Grens, Achtergrond in sidebar om aan te passen hoe de component kijkt.
- Gebruik de Simuleer de optie van de Fout bij de bodem van sidebar om te zien hoe het stileren in het uitgeven kijkt.
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. Om de wijze van de Voorproef te gebruiken, klik Voorproef op de paginagtoolbar.
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 mededinger
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. Uit-van-de-doos, Adobe Fonts, de dienst van de het Webdoopvont van de Adobe, is beschikbaar als configuratie. Om Adobe Fonts te gebruiken, creeer een uitrusting, voeg doopvonten in het toe, en verkrijg identiteitskaart van het Kit van Adobe Fonts.
Voer de volgende stappen uit om Adobe Fonts in AEM te configureren:
-
In de auteursinstantie, klik
-
Voor de Cloud Servicen pagina, navigeer aan en open de Adobe Fonts optie. Open de configuratiemap, en klik creëren.
-
Op creeer de dialoog van de Configuratie, specificeer een titel voor de configuratie en klik creeer.
U wordt opnieuw gericht aan de configuratiepagina.
-
In de Edit dialoog van de Component die verschijnt, verstrek uw identiteitskaart van het Bewerken en klik O.K..
Voer de volgende stappen uit om een thema te vormen om de configuratie van Adobe Fonts te gebruiken:
-
Open een thema in de themaeditor voor de auteurinstantie.
-
In de themaredacteur, navigeer aan de Opties van het Thema
-
In het gebied van de Configuratie van Adobe Fonts, selecteer een uitrusting, en klik sparen.
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 de Aangepaste Dienst van de Configuratie van het Thema van de Vorm.
-
Klik +, specificeer de naam van de doopvont, en klik sparen. 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 de sidebar van de themaredacteur, kunt u
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. Om een vorm op te openen geef wijze uit, selecteer een vorm en klik Open.
-
Op geef wijze uit, selecteer een component, dan klik
U kunt eigenschappen van het formulier bewerken in de zijbalk.
-
In sidebar, klik het Stileren.
-
Selecteer uw thema van het Aangepaste Thema van de Vorm drop-down en klik Gereed
Een thema toepassen op een interactieve communicatie:
-
Open de interactieve communicatie in de bewerkingsmodus. Om een interactieve mededeling op uit te geven wijze te openen, selecteer een vorm en klik Open.
-
Op geef wijze uit, selecteer een component, dan klik
U kunt eigenschappen van het formulier bewerken in de zijbalk.
-
In sidebar, onder Basis, selecteer uw thema van het thema drop-down en klik Gereed
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. Met de eigenschap themeOverride kunt u het thema van een formulier dynamisch 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
Met de optie 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:
- In auteursinstantie, navigeer aan Adobe Experience Manager > Forms > Thema's.
- Open de map Themabibliotheek.
- In de omslag van de Bibliotheek van het Thema, houd wijzer over het overeenkomstige uit-van-de-doos thema en selecteer Exemplaar.
- 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
- Publish/unpublish een vorm: Bij het publiceren van een vorm, wordt het thema toegepast op ook gepubliceerd (als het niet reeds wordt gepubliceerd)
- de Invoer/de Uitvoer een vorm: bij het invoeren of het uitvoeren van een vorm, wordt zijn bijbehorend thema ook automatisch ingevoerd of uitgevoerd.
- Verwijzingen van een vorm: Verwijst sectie in vormverwijzingen bevat een extra ingang voor het thema.
- Laatste wijzigingstijd van een vorm: Bijgewerkt wanneer het bijbehorende thema wordt veranderd.
- het Testen A/B: u kunt een verschillend thema op twee versies van de vorm in het testen A/B toepassen. 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 van de Mening optie in sidebar: Wanneer u een component in het Thema selecteert, kunt u de WEERGAVE CSS optie in sidebar zien. De gegenereerde CSS wordt weergegeven, inclusief CSS voor
::before- en::afterpseudo-elementen. -
Problemen oplossen, aanbevelingen en aanbevolen procedures troubleshooting-recommendations-and-best-practices
-
vermijdend activa van een ander Thema
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. Bijvoorbeeld, wanneer u Pagina
-
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.
-
Gebruikend basis clientlib, themaredacteur, en gealigneerd het stileren
-
Clilib van de Basis:
De basisclientbibliotheek bevat opmaakgegevens. Stijlinformatie in bibliotheken aan de clientzijde in thema's gebruiken.
- Navigeer aan Experience Manager > Forms > Thema's.
- In de pagina van Thema's, selecteer een thema en klik Eigenschappen van de Mening.
- In de pagina van Eigenschappen die opent, klik Geavanceerd.
- Blader op het tabblad Geavanceerd in het veld Clientlib-locatie naar de clientbibliotheek die u wilt gebruiken en selecteer deze.
- Klik sparen.
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 behulp van 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.
Zie Worden specifieke verschijning gebruikend Thema's -
Redacteur van het Thema:
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 het stileren:
Als u met een formulier werkt, kunt u de stijlmodus gebruiken in de vorm van een formulier of de interactieve multikanaaleditor voor communicatie. Als u de stijl van een formuliercomponent wijzigt, overschrijft u de stijl die in het thema is opgegeven. Als u het stileren voor bepaalde componenten van een bepaalde vorm wilt veranderen, zie Inline het stileren van componenten.
-
-
Gebruikend cliënt-zijbibliotheken
Als u cliëntbibliotheken wilt tot stand brengen om het stileren informatie in te voeren, zie Gebruikend de Bibliotheken van de Kant van de Cliënt. Nadat u een clientbibliotheek hebt gemaakt, kunt u deze in uw thema importeren aan de hand van de bovenstaande stappen.
-
Veranderend de lay-outbreedte van het containerpaneel
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 om vormredacteur of themaredacteur voor het werken met kopbal en footer te gebruiken
Gebruik de themaeditor als u koptekst en voettekst wilt opmaken met opmaakopties zoals lettertypestijl, 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.