Skapa och använda teman creating-and-using-themes

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenterfor skapa ny Adaptive Formseller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

Introduktion introduction

Du kan skapa och använda teman för att utforma en adaptiv form eller interaktiv kommunikation. Ett tema innehåller formatinformation för komponenterna och panelerna. Format innehåller egenskaper som bakgrundsfärger, lägesfärger, genomskinlighet, justering och storlek. När du använder ett tema återspeglas det angivna formatet i motsvarande komponenter. Temat hanteras oberoende av varandra utan någon referens till en adaptiv form eller interaktiv kommunikation.

Du kan:

Skapa, hämta eller överföra ett tema creating-downloading-or-uploading-a-theme

Med AEM Forms kan du skapa, ladda ned och ladda upp teman. Ett tema skapas som andra resurser som formulär, dokument och brev. Temat sparas som en separat enhet, komplett med metaegenskaper som formulär. Teman som är en separat enhet tillåter återanvändning i flera adaptiva formulär och interaktiv kommunikation. Du kan också flytta ett tema till en annan instans av AEM Forms och återanvända det.

Skapa ett tema creating-a-theme

Så här skapar du ett tema:

Hämta ett tema downloading-a-theme

Du kan exportera teman som en zip-fil och använda dem i andra projekt eller AEM. Så här hämtar du ett tema:

Överföra ett tema uploading-a-theme

Du kan använda skapade teman med formatförinställningar i ditt projekt. Du kan importera temapaket som andra skapar genom att överföra dem till ditt projekt.

Så här överför du ett tema:

Metadata för ett tema metadata-of-a-theme

Lista med metaegenskaper för ett tema (finns på egenskapssidan för ett tema).

Om Theme Editor about-the-theme-editor

AEM Forms levereras med Theme Editor. Det är ett användarvänligt och webbdesignervänligt gränssnitt för utvecklare som tillhandahåller funktioner som krävs för att enkelt specificera hur olika adaptiva formulär och interaktiva kommunikationselement ska formateras. När du skapar ett tema lagras det som en separat enhet, som formulär, interaktiv kommunikation, brev, dokumentfragment och dataordlistor.

Med Theme Editor kan du anpassa stilar för de komponenter som är formaterade i ett tema. Du kan anpassa hur ett formulär eller en interaktiv kommunikation ser ut på en enhet.

Temaredigeraren är uppdelad i två paneler:

S. Sidebar B. Arbetsyta

Formatkomponenter styling-components

Du kan använda ett tema i flera adaptiva formulär och interaktiv kommunikation, som importerar komponentformateringen som du har angett i temat. Du kan formatera olika komponenter som titlar, beskrivning, paneler, fält, ikoner och textrutor. Använd widgetar för att konfigurera komponentegenskaper i ett tema. Det krävs ingen tidigare kunskap om CSS eller LESS, men det önskas även om du kan skriva CSS-kod eller använda anpassade väljare i avsnittet CSS-åsidosättningar. Avsnittet CSS-åsidosättningar visas när du markerar en komponent i sidofältet.

Alternativ i sidofältet som gör att du kan markera och formatera olika komponenter.

Om du klickar på redigeringsknappen mot en komponent i sidlisten markeras komponenten på arbetsytan. Du kan också formatera komponenten med alternativen i sidlisten.

Vissa komponenter som textruta, numerisk ruta, alternativknapp och kryssruta kategoriseras under generiska komponenter som Fält. Du kan till exempel anpassa stilen på alternativknappar. Om du vill välja alternativknappar för formatering väljer du Fält > Widget > Alternativknapp.

Klicka UTÖKA ALLA i sidofältet för att visa, markera och formatera komponenter som inte är synliga framför.

Layout på formatpanelen styling-panel-layouts-br

Temana i AEM Forms har stöd för att formatera element i panelernas layout i formulär och interaktiv kommunikation. Formatering av element i färdiga layouter och anpassade layouter stöds.

De färdiga panelerna är:

Väljarna varierar för de olika layouterna.
Skräddarsydda layouter från Theme Editor innehåller:

Olika format för olika skärmstorlekar different-styles-for-different-screen-sizes-br

Skrivbords- och mobillayouter kan ha något eller helt olika format. För mobila enheter har surfplattor och telefoner liknande layouter förutom komponentstorlekar.

Använd Theme Editor-brytpunkter för att definiera alternativ formatering för olika skärmstorlekar. Du kan välja en basenhet eller upplösning som du börjar bygga temat på, och formatvariationerna för andra upplösningar genereras automatiskt. Du kan ändra formateringen för alla upplösningar.

Kontexten för formategenskaper ändras i sidofältet när objekt markeras styling-properties-context-changes-in-sidebar-on-selecting-objects

När du markerar en komponent på arbetsytan visas dess formategenskaper i sidlisten. Markera objekttypen och dess läge och ange sedan dess format.

Nyligen använda format i Theme Editor recently-used-styles-in-theme-editor

Temaredigeraren cachelagrar upp till 10 format som används på en komponent. Du kan använda de cachelagrade formaten med andra komponenter i ett tema. Nyligen använda format är tillgängliga direkt under den markerade komponenten i sidlisten som en listruta. Till att börja med är listan över senast använda format tom.

När du formaterar en komponent cachelagras formaten och visas i listrutan. I det här exemplet är textrutans etikett formaterad för att ändra teckenstorlek och färg. Du kan följa liknande steg när du väljer en bild eller ändrar färger för att formatera en komponent. Lägg märke till hur formatet cachelagras och visas i listrutan när fältetikettens format ändras.

I det här exemplet ändras formatet för fältetiketten och när du väljer Responsiv panelbeskrivning för formatet läggs en listpost till i resursbiblioteket. Posten i resursbiblioteket kan användas för att ändra formatet för responsiv panelbeskrivning.

När ett format läggs till i resursbiblioteket är det tillgängligt för andra teman och i stilläge formulärredigeraren eller gränssnittet för interaktiv kommunikationsredigerare. På samma sätt gäller att om du använder stilläget för formulärredigeraren eller gränssnittet för den interaktiva kommunikationsredigeraren när du formaterar en komponent cachelagras stilen och är tillgänglig i teman.

Med plusknappen mot resursbiblioteket kan du spara formatet med ett namn som du anger permanent. Med plusknappen sparas formatet även om du inte klickar på knappen Spara i sidlisten för att tillämpa formatet på en komponent. Den plusknapp som används för att spara ett format för senare bruk är inte tillgänglig i formatläget.

När du anger ett anpassat namn för ett format kopplas formatet till ett tema och är inte längre tillgängligt för andra teman. Så här tar du bort ett sparat format:

Förhandsgranska, spara och ignorera ändringar live-preview-save-and-discard-changes

Ändringar som görs i formateringen återspeglas direkt i formuläret eller i interaktiv kommunikation som läses in på arbetsytan. Med direktförhandsvisning kan du interaktivt definiera och se hur formateringen påverkas. När du ändrar en komponents stil visas Klar knappen är aktiverad i sidlisten. Använd Klar -knappen.

Tema med en annan anpassningsbar form eller interaktiv kommunikation theme-with-another-adaptive-form-or-interactive-communication

När du skapar ett tema skapas det med ett formulär som levereras med Theme Editor. Du anger format för komponenter i det här formuläret. I stället för det formulär som levereras med Theme Editor kan du välja ett formulär eller en interaktiv kommunikation som du vill använda som formatering och förhandsgranska resultatet.

Så här ersätter du det aktuella formuläret eller den interaktiva kommunikationen på arbetsytan i temeredigeraren:

Gör om/Ångra redo-undo

Du kan ångra eller göra om oönskade ändringar som inträffar av misstag. Använd gör om-/ångra-knapparna på arbetsytan.

Ångra/gör om-knappar på arbetsytan

Knappar för att göra om/ångra visas när du formaterar en komponent i temeredigeraren.

Använda Theme Editor using-the-theme-editor

Med Theme Editor kan du redigera ett tema som du har skapat eller överfört. Navigera till Forms & Documents > Themes, och välj ett tema och öppna det. Temat öppnas i temaredigeraren.

Som nämndes ovan har temaredigeraren två paneler: Sidofältet och Canvas.

Anpassa framgångsläget för komponenten för textrutewidgeten i Theme Editor. Komponenten markeras i Canvas och dess läge markeras i sidlisten. De formateringsalternativ som finns i sidofältet används för att anpassa utseendet på en komponent.

Använda Canvas using-canvas

Temat skapas antingen i det färdiga formuläret eller med ett valfritt formulär eller interaktiv kommunikation. Arbetsytan visar förhandsgranskningen av formuläret eller den interaktiva kommunikation som används för att skapa temat med anpassningar som anges i temat. Linjalen ovanför formuläret används för att bestämma layouten baserat på visningsstorleken på enheten.

I verktygsfältet Arbetsyta ser du:

När du markerar en komponent på arbetsytan visas komponentens verktygsfält ovanpå. Med komponentverktygsfältet kan du välja komponenter eller växla till generiska komponenter. Du kan till exempel markera en numerisk textruta på en panel. Följande alternativ visas i komponentens verktygsfält:

Komponentverktygsfältet i den numeriska rutan på arbetsytan

Använda sidofält using-rail

Sidofältet i temeredigeraren innehåller alternativ för att anpassa format för komponenter i ett tema och använda väljare. Med väljarna kan du välja en grupp komponenter eller enskilda komponenter, och du kan söka efter väljare i sidofältet. Du kan skriva väljare för anpassade komponenter.

När du väljer en komponent på arbetsytan eller väljare i sidofältet visas alla alternativ som du kan använda för att anpassa dess format i sidlisten.
Nedan visas de alternativ som visas i sidofältet när du markerar en komponent:

Läge state

Ett läge är en indikator på användarinteraktion med en komponent. När en användare t.ex. anger feldata i en textruta ändras textrutans status till ett feltillstånd. Med temaredigeraren kan du ange format för ett visst läge.

Alternativen för att anpassa lägesformat varierar för olika komponenter.

Egenskapssida property-sheet

Simulera fel/lyckade simulate-error-success

Alternativen Simulera fel och Slutfört finns längst ned i sidlisten. Du kan visa dem med en Visa/dölj-pil längst ned i sidlisten. Med hjälp av temaredigeraren kan du formatera olika lägen för en komponent.

Du kan till exempel lägga till ett numeriskt fält i formuläret och ange dess format i temaredigeraren. När en användare skriver ett alfanumeriskt värde i fältet vill du att bakgrundsfärgen för textrutan ska ändras. Du markerar det numeriska fältet i temat och använder lägesalternativet i sidofältet. Du väljer felläget i sidlisten och ändrar bakgrundsfärgen till röd. Om du vill förhandsgranska beteendet kan du använda alternativet Simulera fel i sidofältet. Alternativen Simulera fel och Slutfört beskrivs i detalj nedan:

Formatera en komponent styling-a-component

I ditt formulär har du till exempel två typer av textrutor: en som bara accepterar numeriska värden och en annan som accepterar alfanumeriska värden. Du kan anpassa formateringen för textrutan som bara accepterar numeriska värden (en numerisk ruta).

Utför följande steg för att anpassa formateringen för en viss komponent (en numerisk ruta i det här exemplet):

Istället för att markera Widget för Numerisk ruta, markera Fältwidget i komponentens verktygsfält och utför stegen ovan. När du väljer dimensioner för Fältwidget har alla textrutor utom den numeriska rutan samma storlek.

Formatera fält för ett visst läge styling-fields-given-state

Med komponentverktygsfältet kan du även ange komponentformat för de olika lägena. Om en komponent till exempel är inaktiverad är den i inaktiverat läge. Vanliga lägen för en komponent som du kan formatera i temaredigeraren är: Standard, Fokus, Disabled, Error, Success och Hover. Du kan markera en komponent på arbetsytan och använda alternativet Läge i sidofältet för att anpassa dess utseende.

Följ de här stegen för att anpassa formateringen för en komponent i ett visst läge:

När du anpassar en komponents format efter att du har angett dess läge, visas anpassningen bara för komponenten för det angivna läget. Om du till exempel anpassar komponentens format när hovringsläget är markerat. Anpassningen visas för komponenten när du flyttar pekaren över komponenten i det återgivna formuläret eller den interaktiva kommunikationen som du använder temat för.

Om du vill simulera beteendet för andra lägen än fel och lyckade, använder du förhandsgranskningsläget. Om du vill använda förhandsgranskningsläget klickar du på Förhandsgranska i sidverktygsfältet.

Formatera layouter för mindre skärmar styling-layouts-for-smaller-displays

Använd linjalen på arbetsytan för att markera brytpunkter för enheter med mindre skärmar. Klicka på emulatorn på arbetsytan om du vill visa linjaler och brytpunkter. Med brytpunkterna kan du förhandsgranska ett formulär eller interaktiv kommunikation för visningsstorlekar som gäller olika enheter som telefoner och surfplattor. Det finns stöd för flera visningsstorlekar i Theme Editor.

Så här formaterar du komponenter för olika brytpunkter:

Du kan formatera formulär eller interaktiva kommunikationskomponenter för flera enheter. Formulär- och interaktiva kommunikationskomponenter för datorer och mobila enheter kan ha helt olika format.

Använda webbteckensnitt i ett tema using-web-fonts-in-a-theme

Du kan nu använda teckensnitt som finns i en webbtjänst i ett adaptivt formulär eller i en interaktiv kommunikation. Körklar, Adobe Fonts, Adobe webbteckensnittstjänst, är tillgänglig som en konfiguration. Om du vill använda Adobe Fonts skapar du ett kit, lägger till teckensnitt i det och hämtar Kit-ID:t från Adobe Fonts.

Så här konfigurerar du Adobe Fonts i AEM:

Utför följande steg för att konfigurera ett tema så att det använder Adobe Fonts-konfigurationen:

Visa och välja teckensnitt i temaredigeraren listing-and-selecting-fonts-in-theme-editor

Du kan använda tjänsten för temakonfiguration för att lägga till fler teckensnitt i temaredigeraren. Gör så här för att lägga till teckensnitt:

Välja teckensnitt i temaredigeraren selecting-fonts-in-theme-editor

Du kan använda ±knappen för att lägga till ett teckensnitt. När du lägger till ett teckensnitt visas det i sidlisten.

Förutom alternativet för temakonfiguration kan du även lägga till ditt teckensnitt från temaredigeraren. Skriv det teckensnitt du vill använda i fältet för teckensnittsfamiljen under sidofältet och tryck på returtangenten på tangentbordet.

När du väljer ett teckensnitt läggs det till i listan över teckensnittsfamiljer. Du kan använda alternativet Mask i temaredigeraren för att inaktivera eller aktivera de listade teckensnitten.

Du kan se ändringen av komponentens teckensnitt.

Fältet Teckensnittsfamilj stöder flera teckensnitt. När du skriver ett teckensnitt letar webbläsaren efter det och använder det på den markerade komponenten. Om webbläsaren inte kan hitta något teckensnitt söker den efter ett teckensnitt som finns bredvid det i familjen. Du kan börja med att skriva det teckensnitt du söker efter. Om du inte hittar det teckensnitt du vill använda kan du skriva ett generiskt teckensnitt i familjen och använda det.

Maskformat som används i temaredigeraren mask-styles-applied-in-theme-editor

Du kan maskera format som används i ett tema. I temaredigerarens sidlist kan du använda om du vill inaktivera ett använt format. Om du till exempel ändrar dimensionerna för en komponent i ett formulär eller i en interaktiv kommunikation kan du använda maskknappen till vänster om en egenskap för att inaktivera den. När du sparar ett tema behålls de valda maskningsalternativen.

I exemplet nedan visas maskerade och omaskerade format i ett tema.

Använda ett tema i ett formulär eller interaktiv kommunikation applying-a-theme-to-a-form-or-interactive-communication-br

Så här använder du ett tema i ett anpassat formulär:

Så här använder du ett tema i en interaktiv kommunikation:

Ändra tema för ett formulär vid körning change-theme-of-a-form-at-runtime

Ett tema formaterar olika komponenter i ett formulär. Du kan använda themeOverride för att dynamiskt ändra ett formulärs tema. En vanlig URL för ett formulär är:

https://<server>:<port>/content/forms/af/test.html

Du kan använda parametern themeOverride för att tillämpa ett tema på körningen.

https://<server>:<port>/content/forms/af/test.html?themeOverride=/content/dam/formsanddocuments-themes/simpleEnrollmentTheme

The themeOverride kan du ange en sökväg till ett tema. Formulärets tema ändras och formuläret uppdateras med uppdaterade format.

Hämta specifikt utseende med teman specific-af-appearance

Med AEM Forms, tillsammans med det färdiga standardtemat för arbetsytan, finns det många andra teman. Om du vill utforma formuläret eller interaktiv kommunikation med andra teman, tillsammans med ytterligare ändringar, kopierar du temat från temabiblioteksmappen. Klistra in de kopierade temana utanför temabiblioteksmappen och redigera det kopierade temat efter de ändringar du vill.

Så här kopierar du ett tema:

När du har anpassat temat kan du använda det i formuläret eller i interaktiv kommunikation.

Inverkan på andra användningsområden för anpassade formulär impact-on-other-adaptive-form-use-cases

CSS-genereringssekvens css-generation-sequence

När du väljer Visa CSS samlar temaredigeraren in all formatinformation och skapar en CSS. Den samlar in information i följande ordning:

En textrutas bakgrundsfärg är till exempel blå i basklientbiblioteket. Du ändrar den till rosa med hjälp av egenskaperna i sidlisten. När du genererar CSS ser du textrutans bakgrundsfärg som rosa. När bakgrundsfärgen har ändrats med hjälp av egenskaperna använder en annan författare alternativet CSS-åsidosättning för att ändra textrutan för bakgrundsfärgen till vit. När du genererar CSS ser du bakgrundsfärgen som vit i den genererade CSS-koden.

Felsöka format debugging-styles

När du anger format för komponenter i Theme Editor genereras en CSS. När du formaterar en allmän komponent formateras även flera komponenter som ingår i den. När du till exempel formaterar ett fält formateras även textrutan och etiketten i det. När du formaterar textrutan i fältet får den sin egen CSS. Om du vill felsöka den CSS som genererats för fältet och komponenten, innehåller Theme Editor alternativ som gör att du kan visa CSS.

Du kan se den genererade CSS-koden med följande alternativ:

Felsökning, rekommendationer och bästa praxis troubleshooting-recommendations-and-best-practices