Stijl uw adaptieve formulier

Leer hoe u een aangepast thema maakt, afzonderlijke componenten opmaakt en weblettertypen in een thema gebruikt

Deze zelfstudie is een stap in de serie Uw eerste adaptieve vorm maken. U wordt aangeraden de reeks in chronologische volgorde te volgen om het volledige gebruik van de zelfstudie te begrijpen, uit te voeren en aan te tonen.

Informatie over de zelfstudie

U kunt thema's gebruiken om een adaptief formulier een unieke vormgeving en stijl te geven. U kunt thema's uit de doos toepassen die van de adaptieve redacteur van vormen worden voorzien of douanethema's van uw tot stand brengen. AEM Forms biedt een themaeditor om aangepaste thema's te maken. Met één thema kunt u hetzelfde adaptieve formulier weergeven dat u op mobiele apparaten, tablets of desktops hebt geopend. Eerdere kennis van CSS of LESS is niet vereist voor het gebruik van de themaeditor, maar is wel gewenst.

Aan het einde van de zelfstudie leert u:

• Een thema uit het vak toepassen op een adaptief formulier
• Een thema maken voor een adaptief formulier met de themaeditor
• Afzonderlijke componenten opmaken
• Bonussectie: Weblettertypen gebruiken in een aangepast thema

Het formulier ziet er ongeveer als volgt uit nadat u de zelfstudie hebt voltooid:

Voordat u begint

Download de koptekst- en logo-afbeeldingen hieronder op uw lokale computer. De koptekst van het aangepaste formulier shipping-address-add-update-form gebruikt de koptekst- en logoafbeeldingen. De koptekstafbeelding wordt rechts van de koptekst weergegeven.

Bestand ophalen

Bestand ophalen

Stap 1: Een thema toepassen op uw aangepaste formulier

De adaptieve vormenredacteur verstrekt veelvoudige uit-van-de-doos thema's. Als u geen aangepaste stijl wilt gebruiken voor het aangepaste formulier, kunt u ook uw aangepaste formulieren publiceren met een thema dat buiten de verpakking valt. Thema's zijn onafhankelijk van adaptieve vormen. U kunt hetzelfde thema toepassen op meerdere adaptieve formulieren. Een thema toepassen op een adaptief formulier:

1. Open het aangepaste formulier voor bewerking.

   http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Open eigenschappen van Aangepaste formuliercontainer. Navigeer in de eigenschappenbrowser naar Basic > Adaptief formulierthema. In het veld Adaptief formulierthema worden alle kant-en-klare en aangepaste thema's weergegeven. Standaard wordt het thema Canvas toegepast.

3. Selecteer een thema in het veld Adaptief formulierthema. Bijvoorbeeld Beoordelingsthema. Tik om het geselecteerde thema toe te passen.

Afbeelding: Adaptief formulier met standaardthema

Afbeelding: Adaptief formulier met het thema Beoordeling

Stap 2: Het aangepaste formulier bijwerken

Voor het hierboven weergegeven ontwerp zijn wijzigingen vereist in de plaatsaanduidingstekst en het logo van het bestaande adaptieve formulier. Voer de volgende stappen uit om de vereiste wijzigingen aan te brengen:

1. Wijzig het bestaande logo en de tekst van de koptekst. Het logo verwijderen:

   1. Open het formulier in de formuliereditor.

      http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

   2. Tik op de afbeelding met het logo in de koptekstcomponent en tik op -eigenschappen. Tik in de afbeeldingseigenschap op X om de bestaande logoafbeelding te verwijderen.

   3. Tik op Uploaden, selecteer het bestand logo.png en tik op om de wijzigingen op te slaan. De afbeelding is gedownload in de sectie Voordat u start.

   4. Tik op koptekst, We.Retail en tik edit. Wijzig de koptekst in we retail. Pas vette opmaak alleen toe op wein we retail.

   

2. Titel verwijderen en plaatsaanduidingstekst toevoegen:

   1. Tik op het veld Klantnummer en tik op eigenschappen.
   2. Kopieer de inhoud van het veld Title naar het veld Plaatsaanduiding tekst.
   3. Verwijder de inhoud van het veld Title en tik op .
   4. Herhaal de vorige drie stappen voor alle tekstvakken, het numerieke vak en het e-mailveld in het formulier.

   

Stap 3: Een aangepast thema maken voor uw aangepaste formulier

U kunt themaeditor gebruiken om aangepaste thema's te maken. De themaredacteur is een almachtige redacteur WYSIWYG. Het is een visuele methode om CSS op diverse componenten van een adaptieve vorm toe te passen. Het biedt fijnere besturingselementen voor stijlcomponenten en deelvensters van een adaptieve vorm.

Een thema is een afzonderlijke entiteit, zoals adaptieve formulieren. Deze bevat stijlen (CSS) voor de componenten en deelvensters van een adaptief formulier. Stijlen omvatten CSS-eigenschappen zoals achtergrondkleuren, statuskleuren, transparantie, uitlijning en grootte. Wanneer u een thema toepast, wordt de opgegeven stijl toegepast op de corresponderende componenten van een adaptief formulier.

In deze zelfstudie maakt u een stijl van de kop- en voettekst, tekst en numerieke componenten, de bijlage en knoppen. Laten we beginnen met het maken van een thema:

Een thema maken

1. Meld u aan bij de AEM auteur en navigeer naar Adobe Experience Manager > Forms > Thema's. De standaard-URL is http://localhost:4502/aem/forms.html/content/dam/formsanddocuments-themes.

2. Tik Create en selecteer Theme. De pagina Thema maken met de velden die nodig zijn om een thema te maken, wordt weergegeven. De velden Titel en Naam zijn verplicht:

   • Titel: Geef een titel van het thema op. Bijvoorbeeld Globaal thema. Met de titel kunt u het thema herkennen aan de lijst met thema's.
   • Naam: geef de naam van het thema op. Bijvoorbeeld Global-Theme. Er wordt een knooppunt met de opgegeven naam gemaakt in de repository. Wanneer u een titel begint te typen, wordt automatisch een waarde voor het naamveld gegenereerd. U kunt de voorgestelde waarde wijzigen. Het naamveld mag alleen alfanumerieke tekens, afbreekstreepjes en onderstrepingstekens bevatten. Alle ongeldige invoer wordt vervangen door een afbreekstreepje.

3. Tik Maken. Er wordt een thema gemaakt en er verschijnt een dialoogvenster waarin u het formulier kunt openen om het te bewerken. Tik Open om het zojuist gemaakte thema op een nieuw tabblad te openen. Het thema wordt geopend in de themaeditor. Voor het opmaken gebruikt de themaeditor een adaptief formulier dat niet in de doos bij AEM Forms wordt geleverd.

   Voor informatie over het gebruiken van thema redacteur UI, zie Ongeveer de themaredacteur.

4. Tik Thema-opties > Configure. Selecteer in het veld Voorvertoning van formulier het adaptieve formulier Verzendadres-add-update-form, tik op Opslaan. De themaeditor is nu geconfigureerd voor het gebruik van uw eigen adaptieve formulier in plaats van het standaard adaptieve formulier. Tik op Annuleren om terug te keren naar de themaeditor.

   

   Afbeelding: Thema-editor met het adaptieve formulier voor het verzendadres-add-update

   

   Afbeelding: Adaptief formulier met standaardformulier

Stijlkop- en voettekst

Koptekst en voettekst geven een consistent en duidelijk beeld van een adaptief formulier. Over het algemeen bevat de koptekst het logo en de naam van de organisatie, bevat de voettekst copyrightinformatie en deze blijven in meerdere vormen van een organisatie identiek. De kop- en voettekst van het adaptieve formulier voor het verzendadres-add-update-formulier opmaken:

1. Navigeer de optie Koptekst > Tekst in het deelvenster Kiezers. Het deelvenster Kiezers bevindt zich links van de themaeditor. Tik Zijpaneel in-/uitschakelen als het deelvenster niet zichtbaar is.

2. Stel de volgende eigenschappen in de accordeon Text in en tik .

   Eigenschap	Waarde
   Lettertypefamilie	Arial
   Lettertypekleur	FFFFFF
   Fontgrootte	54 px

3. Tik op de koptekstwidget en tik Koptekst. De opties voor het opmaken van de koptekstwidget worden links weergegeven. Breid Dimension & Positie accordeon uit, plaats Hoogte aan 120px, en tik .

4. Breid de achtergrondaccordeon van de kopbalwidget uit, plaats Achtergrondkleur aan F6921E.

   Houd de cursor boven Afbeelding en verloop > + Toevoegen, tik Afbeelding. Stel de volgende eigenschappen in en tik op .

   Eigenschap	Waarde
   afbeelding	Upload header-style.png. De afbeelding is gedownload in de sectie Voordat u start.
   Positie	Rechts onder
   Naast elkaar	Niet herhalen

5. Tik in de themaeditor op het logo in de koptekst en tik Koptekstlogo. Vouw de accordeon Dimension en positie uit, stel de volgende eigenschappen in en tik .

1. Tik op de voettekstwidget en tik Voettekst. Breid Achtergrond accordeon uit, plaats Achtergrondkleur aan F6921E, en tik .

Maak de component voor gegevensvastlegging op en pas een achtergrond toe op het adaptieve formulier

U kunt meerdere componenten in een adaptief formulier gebruiken om gegevens vast te leggen. Bijvoorbeeld tekstvak en numeriek vak. U kunt identieke stijl aan alle gegevens verstrekken vangt componenten of afzonderlijke stijl voor elke component. In deze zelfstudie wordt een identieke stijl toegepast op numerieke vakken (Customer ID, ZIP Code) en tekstvakken (Customer ID, Name, Shipping Address, State, Email). De componenten voor gegevensvastlegging opmaken:

1. Tik op het veld Customer ID en tik op de optie Widget veld. Stel de volgende eigenschappen in en tik op .

1. Tik op het lege gebied boven het veld Customer ID en tik op Responsive Panel Container. Stel de Achtergrond > Achtergrondkleur in op F1F2F2. Tik .

   

De knoppen opmaken

U kunt een aangepast thema gebruiken om een identieke stijl toe te passen op alle knoppen van het adaptieve formulier en inline styling om een stijl toe te passen op een specifieke knop. De knoppen opmaken:

1. Tik op de knop Verzenden en tik op de optie Knop. Stel de volgende eigenschappen in en tik op .

1. Pas het aangepaste thema Global Theme toe op het aangepaste formulier. Als de stijl niet op het adaptieve formulier wordt weerspiegeld, maakt u de cache van de browser leeg en probeert u het opnieuw.

   

Stap 4: Afzonderlijke componenten opmaken

Sommige stijlen zijn alleen van toepassing op een bepaalde component. Dergelijke componenten worden opgemaakt in de editor voor adaptieve formulieren.

1. Open het aangepaste formulier voor bewerking. http://localhost:4502/editor.html/content/forms/af/shipping-address-add-update-form.html

2. Selecteer op de bovenste balk de optie Stijl.

   

3. Tik op de knop Koppelen en tik op het pictogram . Stel de volgende eigenschappen in de accordeon Dimension en Position in:

   Eigenschap	Waarde
   Zwevend	Links
   Breedte	10%

4. Tik op de optie Door de overheid goedgekeurde adresproef en tik op het pictogram . Stel de volgende eigenschappen in:

1. Tik op de knop Verzenden en tik op het pictogram . Stel de volgende eigenschappen in:

Stap 5: Bonussectie: Weblettertypen gebruiken in een aangepast thema

U kunt verschillende lettertypen gebruiken om een adaptief formulier te ontwerpen. Op alle apparaten waarop het adaptieve formulier wordt weergegeven, worden mogelijk niet de fonts gebruikt om het adaptieve formulier te ontwerpen. U kunt een service voor weblettertypen gebruiken om de vereiste lettertypen aan het doelapparaat te leveren.

Adobe Typekit is een service voor weblettertypen. U kunt de service configureren en gebruiken met adaptieve formulieren. Adobe Typekit in een adaptieve vorm gebruiken:

1. Maak een Adobe Typekit-account, maak een kit, voeg Myriad Pro-lettertype toe aan de kit, publiceer de kit en verkrijg de kit-id. U hebt Adobe Typekit-lettertypen (weblettertypen) in een adaptieve vorm nodig.

2. Navigeer op de AEM Forms-server naar Adobe Experience Manager > Tools > Deployment > Cloud Services. Navigeer op de pagina Cloud Services naar Services van derden > Typekit en klik Configure nu onder Typekit. Als er al een configuratie beschikbaar is, klikt u op de knop + om een nieuwe instantie te maken.

   Voor de Create dialoog van de Configuratie, specificeer Titel voor de configuratie, en klik Create. U wordt opnieuw gericht aan de configuratiepagina. Geef in het dialoogvenster Component bewerken dat wordt weergegeven uw kit-id op en klik OK.

3. Vorm uw thema om de configuratie te gebruiken TypeKit. Voor de auteurinstantie, open Globaal Thema in de themaredacteur. Navigeer in de themaeditor naar Thema-opties > Configure. Selecteer de kit in het veld Typekit Configuration en klik op Save.

   De lettertypen die aan de Typekit worden toegevoegd, zijn beschikbaar voor selectie in de accordeon Text van alle componenten.