Een adaptief formulierthema maken of aanpassen introduction-to-theme

Versie
Artikelkoppeling
AEM as a Cloud Service
Klik hier
AEM 6,5
Dit artikel

In AEM Forms 6.5 is een thema een AEM clientbibliotheek waarmee u de stijlen (look and feel) voor een adaptief formulier kunt definiëren. 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. Een thema wordt onafhankelijk beheerd zonder verwijzing naar een adaptief formulier en kan opnieuw worden gebruikt in meerdere Adaptieve Forms.

Beschikbare thema's available-theme

AEM 6.5-omgeving biedt de onderstaande thema's voor op Core Components gebaseerde Adaptive Forms:

Werken met de structuur van de thema's understanding-structure-of-theme

Een thema is een pakket dat het CSS-bestand, JavaScript-bestanden en bronnen (zoals pictogrammen) omvat die de stijl van uw Adaptieve Forms definiëren. Het thema Adaptief formulier volgt op een specifieke organisatie, die bestaat uit de volgende onderdelen:

  • src/theme.scss: Deze map bevat het CSS-bestand dat een grote invloed heeft op het hele thema. Het fungeert als een gecentraliseerde locatie voor het definiëren en beheren van de opmaak en het gedrag van uw thema. Door dit bestand te bewerken, kunt u wijzigingen aanbrengen die overal in het thema worden toegepast. Zo kunt u de vormgeving en functionaliteit van zowel de adaptieve Forms- als AEM Sites-pagina's wijzigen.

  • src/site: Deze map bevat CSS-bestanden die worden toegepast op de gehele pagina van AEM site. Deze bestanden bestaan uit code en stijlen die van invloed zijn op de algemene functionaliteit en lay-out van de pagina van de AEM. Alle wijzigingen die u hier aanbrengt, worden doorgevoerd op alle pagina's van uw site.

  • src/components: De CSS-bestanden in deze map zijn ontworpen voor afzonderlijke AEM kerncomponenten. Elke specifieke map voor een component bevat een .scss bestand dat die component in een adaptief formulier opmaakt. Bijvoorbeeld de /src/components/button/_button.scss Dit bestand bevat stijlinformatie voor de adaptieve Forms Button-component.

    Structuur van canvasthema

  • src/resources: Deze map bevat statische bestanden, zoals pictogrammen, logo's en lettertypen. Deze bronnen worden gebruikt om de visuele elementen en het algehele ontwerp van uw thema te verbeteren.

Een thema maken

AEM Forms 6.5 biedt de onderstaande thema's voor Core Components based Adaptive Forms.

U kunt al deze thema's aanpassen om een thema te maken.

Een thema aanpassen customize-a-theme-core-components-based-adaptive-forms

Wanneer u een thema aanpast, wordt hiermee verwezen naar het wijzigen en aanpassen van de weergave van een thema. Wanneer u een thema aanpast, wijzigt u de ontwerpelementen, lay-out, kleuren, typografie en soms de onderliggende code. Zo kunt u een unieke en op maat gemaakte vormgeving voor uw website of toepassing maken met behoud van de basisstructuur en -functionaliteit die door het thema worden geboden.

NOTE
  • Gebruik de Manager van het Pakket om een thema op alle Auteur op te stellen en instanties te publiceren.
  • Net als elk ander pakket wordt via Package Manager een themacliotheek geïmporteerd of geëxporteerd.

Vereisten om een thema aan te passen prerequisites

  • Adaptieve Forms Core-componenten inschakelen voor uw omgeving.

  • Installeer de nieuwste versie van Apache Maven. Apache Maven is een tool voor automatisering van build die veel wordt gebruikt voor Java™-projecten. De installatie van de recentste versie verzekert u de noodzakelijke gebiedsdelen voor themaaanpassing.

  • Leer hoe u een clientbibliotheek in Adobe Experience Manager. AEM biedt clientbibliotheken, waarmee u uw code aan de clientzijde in de opslagplaats kunt opslaan, in categorieën kunt indelen en kunt bepalen wanneer en hoe elke categorie code aan de client moet worden aangeboden.

  • Installeer een teksteditor zonder opmaak. Bijvoorbeeld Microsoft® Visual Studio Code. Het gebruiken van een gewone tekstredacteur zoals de Code van Microsoft® Visual Studio verstrekt een gebruikersvriendelijk milieu voor het uitgeven en het wijzigen van themadossiers.

  • Zorg ervoor dat de AEM Forms-omgeving in gebruik is.

Overwegingen om een thema aan te passen consideration

  • Zorg ervoor dat u het project Archetype dat wordt gebruikt om Adaptive Forms Core Components in te schakelen in uw omgeving om uw thema's aan te passen.

  • Wanneer u een adaptief formulier publiceert, worden de clientbibliotheken niet automatisch gepubliceerd in de instantie Publiceren. Zorg ervoor dat u de clientbibliotheek waarnaar wordt verwezen in een adaptief formulier, handmatig publiceert naar uw publicatieomgeving.

  • Adobe raadt aan de klassenamen van clientbibliotheken niet te wijzigen.

Een thema aanpassen customize-a-theme-core-components

Het maken of aanpassen van een thema is een proces met meerdere stappen. Voer de stappen in de lijst uit om het thema te maken/aan te passen:

De voorbeelden in het document zijn gebaseerd op de Canvas thema, maar u kunt elk thema klonen en dit aanpassen aan de hand van dezelfde instructies. Deze instructies zijn van toepassing op elk thema, zodat u thema's kunt aanpassen aan uw specifieke behoeften.

1. Kloont de Git-gegevensopslagruimte van het thema clone-git-repo-of-theme

Kies een van de volgende thema's om een thema voor op Core Components gebaseerde Adaptieve Forms te klonen:

Voer de volgende instructies uit om een thema te klonen:

  1. Open de opdrachtprompt of het terminalvenster in uw lokale ontwikkelomgeving.

  2. Voer de git clone om een thema te klonen.

    code language-none
       git clone [Path of Git Repository of the theme]
    

    Vervang de [Pad van Git Repository van het thema] met de werkelijke URL van de overeenkomstige Git Repository van het thema

    Als u bijvoorbeeld het thema Canvas wilt klonen, voert u de volgende opdracht uit:

    code language-none
       git clone https://github.com/adobe/aem-forms-theme-canvas
    
  3. Selecteren De auteurs van alle bestanden in de bovenliggende map vertrouwen en klik op Ja, ik vertrouw de auteurs.

Nadat de opdracht is uitgevoerd, beschikt u over een lokale kopie van het thema op uw computer in het dialoogvenster aem-forms-theme-canvas map.

2. Het thema aanpassen customize-the-theme

U hebt de flexibiliteit om individuele componenten aan te passen of thema-vlakke veranderingen aan te brengen gebruikend de globale variabelen van een thema. Het wijzigen van algemene variabelen heeft een trapsgewijs effect op alle afzonderlijke componenten. U kunt bijvoorbeeld algemene variabelen gebruiken om de randkleur van alle componenten in een adaptief formulier te wijzigen of een levendige vulkleur toe te passen op de knop Oproepen naar handeling (CTA). U kunt:

Stijlen voor themaniveau instellen theme-customization-global-level

De variable.scss bevat de algemene variabelen van het thema. Door deze variabelen bij te werken, kunt u op themaniveau op stijl betrekking hebbende veranderingen aanbrengen. Voer de volgende stappen uit om stijlen op themaniveau toe te passen:

  1. Open de <your-theme-sources>/src/site/_variables.scss bestand voor bewerking.

  2. Wijzig de waarde van een willekeurige eigenschap. De standaardfoutkleur is bijvoorbeeld rood. Als u de kleur van de fout wilt wijzigen van rood in blauw, wijzigt u de hexadecimale kleurcode van het dialoogvenster $errorvariabele. Bijvoorbeeld: $error: #196ee5.

    Voorbeeld: Foutkleur ingesteld op blauw

  3. Sla het bestand op en sluit het.

U kunt ook de opdracht variable.scss bestand voor het instellen van lettertypefamilie en -type, thema- en lettertypekleuren, lettergrootte, themaspatiëring, foutpictogram, themarand en meer variabele die van invloed zijn op meerdere componenten van het adaptieve formulier.

Stijlen op componentniveau instellen component-based-customization

U kunt ook het lettertype, de kleur, de grootte en andere CSS-eigenschappen aanpassen van specifieke kerncomponenten van Adaptief formulier, zoals knoppen, selectievakjes, containers, voetteksten en nog veel meer. Door het CSS-bestand te bewerken dat aan de specifieke component is gekoppeld, kunt u de stijl ervan uitlijnen met de branding van uw organisatie. Ga als volgt te werk om de stijl van een component aan te passen:

  1. Het bestand openen <your-theme-sources>/src/components/<component>/<component.scss> voor bewerken. Als u bijvoorbeeld de lettertypekleur van de knopcomponent wilt wijzigen, opent u de knop <your-theme-sources>/src/components/button/button.scss, bestand.

  2. Wijzig desgewenst de waarde van een object. Als u bijvoorbeeld de kleur van de knopcomponent wilt wijzigen als u de muisaanwijzer op groen plaatst, wijzigt u de waarde van de optie color: $white eigenschap in de cmp-adaptiveform-button__widget:hover -klasse aan hexadecimale code #12b453 of een andere groene tint. De uiteindelijke code ziet er als volgt uit:

    code language-none
     .cmp-adaptiveform-button__widget:hover {
     background: $dark-gray;
     color: #12b453;
     }
    
  3. Sla het bestand op en sluit het.

NOTE
Wanneer een stijl zowel op thema als componentenniveau wordt bepaald, krijgt de stijl die op het componentenniveau wordt bepaald prioriteit.

3. Bereid het thema voor plaatsing generate-the-clientlib

Om een thema in een AEM instantie op te stellen, moet het in een Bibliotheek van de Cliënt worden omgezet. Ga als volgt te werk om het thema om te zetten in een clientbibliotheek:

  1. Open de opdrachtprompt of het terminalvenster.

  2. Ga naar de <your-theme-sources> map. Bijvoorbeeld: C:\aem-forms-theme-canvas

  3. Voer de volgende opdracht uit:

    code language-none
       npm run create-clientlib --category=adaptiveform.theme.[yourtheme]
    

    Vervangen [yourtheme] met de naam van uw aangepaste thema. Als het aangepaste thema bijvoorbeeld een naam heeft customcanvastheme, voert u de volgende opdracht uit

    code language-none
        npm run create-clientlib --category=adaptiveform.theme.customcanvastheme
    

    Wanneer de opdracht met succes is uitgevoerd, wordt een clientbibliotheekmap gemaakt op themerepo\theme-clientlibs\[yourtheme].

    Client Library Generation

    Locatie van clientbibliotheek

4. Gebruik het thema in een lokale omgeving deploy-the-theme-on-a-local-environment

Voer de volgende stappen uit om het thema in te zetten in uw lokale ontwikkelings- of testomgeving:

  1. Kopieer de clientbibliotheek die u in de vorige sectie hebt gemaakt naar het project Archetype op het volgende pad:

    /ui.apps/src/main/content/jcr_root/apps/[AEM Archetype Project Folder]/clientlibs/<yourtheme>

  2. Open de Herinnering van het Bevel of Terminal.

  3. Navigeer aan de wortelfolder van uw project van Archetype van de AEM, het project dat wordt gebruikt om de Aangepaste Componenten van de Kern van de Vorm toe te laten.

  4. Voer de volgende opdracht uit om het aangepaste thema in uw omgeving in te stellen:

    mvn clean install

    Client Library Build

5. Een thema distribueren in uw productieomgeving deploy-theme

Nadat u het thema hebt getest in uw lokale ontwikkelomgeving, kunt u doorgaan met de implementatie van het thema in uw productieomgeving, inclusief de instanties Auteur en Publiceren. Voer de volgende stappen uit om het thema in uw productieomgevingen te implementeren:

  1. Meld u aan bij uw AEM.
  2. Open Pakketbeheer. De standaard-URL is https://localhost:4502/crx/packmgr/index.jsp.
  3. Klikken Pakket uploaden en klik op Bladeren.
  4. Navigeren naar en selecteren [AEM Archetype Project Folder]\all\target[appid].all-[version].zip. Klikken Openen.
  5. Klik op Installeren. Herhaal deze stap in alle productieomgevingen.

Nadat het pakket is geïnstalleerd, is het thema beschikbaar voor selectie.

Thema-clientbibliotheek

NOTE
Als u problemen ondervindt bij het openen van het aanmeldingsvenster op een publicatieexemplaar om het pakket te installeren via Package Manager, kunt u zich aanmelden via de volgende URL: http://[Publish Server URL]:[PORT]/system/console. Dit verleent toegang tot login aan Publish instantie, toestaand u om met het installatieproces te werk te gaan.

Een thema toepassen op een adaptief formulier using-theme-in-adaptive-form

De stappen voor het toepassen van een thema op een adaptief formulier zijn:

  1. Meld u aan bij de lokale AEM auteur.

  2. Ga uw geloofsbrieven op de Experience Manager login pagina in. Selecteren Adobe Experience Manager > Forms > Forms & Documenten.

  3. Klikken Maken > Adaptieve Forms.

  4. Selecteer een adaptieve Forms Core Components-sjabloon en klik op Volgende. De Eigenschappen toevoegen lijkt

  5. Geef de Naam voor uw adaptieve formulier.

    note note
    NOTE
    • Standaard worden de adaptiveform.theme.canvas3 thema is geselecteerd.
    • U kunt een ander thema kiezen in het menu Thema-clientbibliotheek vervolgkeuzelijst.
  6. Klikken Maken.

De thema's Adaptief formulier worden gebruikt als onderdeel van een adaptieve formuliersjabloon om opmaak te definiëren terwijl u een adaptief formulier maakt.

Een thema verwijderen delete-a-theme

Ongebruikte of ongewenste thema's verwijderen:

  1. Meld u aan bij de instantie Auteur.
  2. Openen http://[Publish Server URL]:[PORT]/crx/de/index.jsp
  3. Navigeren naar apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme].
  4. Verwijder de themamap en sla de wijzigingen op.

Veelgestelde vraag faq

V: Welke aanpassing neemt prioriteit wanneer het maken van aanpassingen in een themamap op zowel het globale niveau als componentenniveau?

Ans: Wanneer een stijl op zowel het thema- als componentenniveau wordt bepaald, neemt de stijl die op het componentenniveau wordt bepaald belangrijkheid.

V: Welke stappen moeten worden ondernomen als het aangepaste thema niet zichtbaar is in het dialoogvenster Theme Client Library?

Ans: Als uw aangepaste thema niet wordt weergegeven in het dialoogvenster Theme Client Library vervolgkeuzelijst, voer de volgende stappen uit:

  1. Navigeer naar de locatie waar u de aangepaste thematclient-bibliotheek hebt toegevoegd. Het aanbevolen pad is /ui.apps/src/main/content/jcr_root/apps[AEM Archetype Project Folder]/clientlibs/<yourtheme>.

  2. Open de .content.xml en neemt de volgende metagegevens op:

    code language-none
        formstheme:true
        allowproxy:true
    
  3. Sla het bestand op en wijzig het thema.

Zie ook

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2