Thema's maken en gebruiken creating-and-using-themes

Adobe beveelt aan moderne en uitbreidbare gegevensvastlegging te gebruiken Kernonderdelenfor nieuwe Adaptieve Forms makenof Aangepaste Forms toevoegen aan AEM Sites-pagina's. 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.

U kunt thema's maken en toepassen om een adaptief formulier 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 wordt onafhankelijk beheerd zonder verwijzing naar een adaptief formulier.

U kunt downloaden en installeren AEM Forms referentie-inhoudspakket van Softwaredistributie portal voor het importeren van referentiethema's en sjablonen naar uw omgeving.

Een thema maken, downloaden of uploaden creating-downloading-or-uploading-a-theme

Een thema wordt gemaakt en opgeslagen als een afzonderlijke entiteit, compleet met meta-eigenschappen zoals Adaptive Forms. U kunt een thema opnieuw gebruiken in meerdere Adaptive Forms. U kunt een thema ook naar een andere instantie verplaatsen en opnieuw gebruiken.

Een thema maken creating-a-theme

Een thema maken:

Verschil van thema's in Experience Manager 6.5 Forms en eerdere versies difference-in-themes

Thema's die op een instantie Cloud Service worden gemaakt:

Een thema downloaden downloading-a-theme

U kunt thema's exporteren als ZIP-bestand en deze thema's gebruiken in andere projecten of instanties van Experience Managers. Een thema downloaden:

Een thema uploaden uploading-a-theme

Een gebruiker met beheerdersrechten kan een thema uploaden dat is gemaakt in Experience Manager Forms 6.5 of eerdere versies.

Een thema uploaden:

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

De Redacteur van het thema is een zaken-gebruiker en web-ontwerper/ontwikkelaarsvriendelijke interface die functionaliteit verstrekt die wordt vereist om het stileren van diverse AanpassingsVorm te specificeren eenvoudig elementen. Wanneer u een thema maakt, wordt het opgeslagen als een afzonderlijke entiteit, zoals formulieren .

In de Thema-editor kunt u stijlen van de componenten die in een thema zijn opgemaakt, aanpassen. U kunt aanpassen hoe een formulier zoekt op een apparaat.

De Thema-editor bestaat uit twee deelvensters:

A. Zijbalk B. Canvas

Stijlcomponenten styling-components

U kunt een thema gebruiken in meerdere Adaptive Forms, die 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. Als u keuzerondjes voor opmaak wilt selecteren, selecteert u Field > Widget > Radio Button.

Lay-outs van het deelvenster Stijlen styling-panel-layouts-br

Thema's AEM Forms ondersteuning voor het opmaken van elementen in de indeling van deelvensters in uw formulieren. Het opmaken van elementen in lay-outs buiten de box en aangepaste lay-outs wordt ondersteund.

Voorbeelden van deelvensters buiten het vak zijn:

De kiezers variëren voor elke lay-out.
Aangepaste lay-outs opmaken in de Thema-editor is:

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 tien 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. De lijst met onlangs gebruikte stijlen is aanvankelijk 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. Op dezelfde manier wanneer u de stijlmodus van de formuliereditor gebruikt UI voor het opmaken van een component, wordt de stijl in het cachegeheugen opgeslagen en is 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:

Wijzigingen live voorvertonen, opslaan en negeren live-preview-save-and-discard-changes

Wijzigingen in de opmaak worden direct weerspiegeld in het formulier geladen in het canvas. 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 theme-with-another-adaptive-form

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 selecteren van uw keuze voor opmaak en voorvertoning van de resultaten.

Het huidige formulier vervangen of in Thema Editor Canvas:

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.

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: 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 uit de doos bestaat of met een formulier van uw keuze. Op het canvas ziet u een voorbeeld van het formulier of 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:

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:

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 state

Een status is een indicator van gebruikersinteractie met een component. Wanneer een gebruiker bijvoorbeeld onjuiste gegevens invoert in een tekstvak, 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:

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 (een numeriek vak in dit voorbeeld) aan te passen:

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: 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:

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 in het gerenderde formulier beweegt 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 in Canvas om de liniaal en onderbrekingspunten weer te geven. Met de onderbrekingspunten kunt u een voorbeeld van een formulier bekijken voor weergavegrootten die betrekking hebben op verschillende apparaten, zoals telefoons en tablets. Meerdere weergavegrootten worden ondersteund in de Thema-editor.

U kunt als volgt componenten voor verschillende onderbrekingspunten opmaken:

U kunt een formulier opmaken componenten voor meerdere apparaten. Formulier -componenten voor desktops en mobiele apparaten kunnen geheel verschillende stijlen hebben.

Webben Fonts gebruiken in een thema using-web-fonts-in-a-theme

U kunt nu lettertypen gebruiken die beschikbaar zijn in een webservice in een adaptief formulier . out-of-the-box Adobe Fonts, is de service voor weblettertypen van Adobe beschikbaar als configuratie. Als u Adobe Fonts wilt gebruiken, maakt u een kit, voegt u er lettertypen aan toe en haalt u de kit-id op van Adobe Fonts.

Voer de volgende stappen uit om Adobe Fonts in Experience Manager te configureren:

Voer de volgende stappen uit om een thema te configureren voor gebruik van de Adobe Fonts-configuratie:

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 pictogram om een toegepaste stijl uit te schakelen. Als u bijvoorbeeld de afmetingen van een component in een formulier wijzigt Vervolgens kunt u de maskerknop links van een eigenschap gebruiken om deze uit te schakelen. Wanneer u een thema opslaat, blijven de geselecteerde maskeringsopties behouden.

In het onderstaande voorbeeld ziet u gemaskeerde en niet-gemaskerde stijlen in een thema.

Een thema toepassen op een formulier applying-a-theme-to-a-form-or-interactive-communication-br

Een thema toepassen op een adaptief formulier:

U kunt ook een thema voor een adaptief formulier definiëren wanneer u het maakt.

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 FormsEr zijn veel andere thema's, samen met het standaard canvasthema dat buiten de box valt. Als u het formulier wilt ontwerpen wanneer u andere thema's gebruikt, kopieert u het thema samen met meer wijzigingen 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:

Nadat u het thema hebt aangepast, past u het toe op het formulier .

Gevolgen voor andere gebruiksgevallen van adaptieve formulieren impact-on-other-adaptive-form-use-cases

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:

De achtergrondkleur van een tekstvak is bijvoorbeeld blauw. 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:

Problemen oplossen, aanbevelingen en aanbevolen procedures troubleshooting-recommendations-and-best-practices

Zie ook see-also