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.

U kunt thema's tot stand brengen en toepassen om een Aangepast Vorm 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. Het thema wordt beheerd onafhankelijk zonder een verwijzing naar een Aanpassings Vorm .

U kunt AEM Forms pakket van de verwijzingsinhoud van het portaal van de Distributie van de Software downloaden en installerenom verwijzingsthema's en malplaatjes in uw milieu in te voeren.

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. Het staat het hergebruiken van een thema in veelvoudige Aanpassings Forms toe. 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

Thema-editor is een bedrijfsvriendelijke en webontwerper/ontwikkelaarsvriendelijke interface die functies biedt die vereist zijn om de opmaak van verschillende adaptieve formulierelementen gemakkelijk op te geven . 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 eruitziet op een apparaat.

De Thema-editor bestaat uit twee deelvensters:

A. Sidebar B. Canvas

Stijlcomponenten styling-components

U kunt een thema in veelvoudige Aanpassings Forms gebruiken, die component het formatteren invoert 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. Selecteer Field > Widget > Radio Button om keuzerondjes voor opmaak te selecteren.

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

De thema's in AEM Forms steunen het stileren van elementen in de lay-out van panelen in uw vormen . 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 activabibliotheek wordt toegevoegd, is het beschikbaar voor andere thema's en op de stijlwijzevan de vormredacteur UI. Als u de stijlmodus van de gebruikersinterface van de formuliereditor gebruikt om een component op te maken, wordt de stijl in de cache geplaatst 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:

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

Wijzigingen in de opmaak worden direct weerspiegeld in het formulier dat wordt 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, wordt de knop Done ingeschakeld in het zijpaneel. Als u de wijzigingen wilt behouden, gebruikt u de knop Done .

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 naar keuze een formulier selecteren om de opmaak te bepalen en een voorbeeld van de resultaten te bekijken.

Het huidige formulier of in het canvas van de Thema-editor vervangen:

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.

ongedaan

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 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 buiten de keuzelijst valt of met een formulier van uw keuze. Op het canvas ziet u een voorbeeld van het formulier of dat 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:

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:

Selecteer Field Widget in de werkbalk van de component en voer de bovenstaande stappen uit in plaats van Numeric Box Widget te selecteren. Wanneer u afmetingen selecteert voor de optie Field Widget , hebben alle tekstvakken behalve het numerieke vak 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 gegenereerde formulier verplaatst 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 mededinger in Canvas aan meningsheerser en breekpunten. Met de onderbrekingspunten kunt u een voorbeeld van een formulier weergeven 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 formuliercomponenten opmaken voor meerdere apparaten. Formuliercomponenten 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 . 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 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.

wordt vermeld

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 pictogram om een toegepaste stijl onbruikbaar te maken. Als u bijvoorbeeld de afmetingen van een component in een formulier wijzigt, kunt u deze uitschakelen met de maskerknop links van een eigenschap. 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. 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 buiten de doos, veel andere thema's. Als u het formulier met andere thema's wilt ontwerpen, alsmede meer 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:

Nadat u het thema hebt aangepast, past u dit 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:

Bijvoorbeeld, is de achtergrondkleur van een textbox 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