DocumentatieAEM 6.5Handboek

Een adaptief formulierthema maken of aanpassen introduction-to-theme

Last update: Sun Jul 14 2024 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Onderwerpen:

Gemaakt voor:

  • Beheerder
  • Ontwikkelaar
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 toegewijde map voor een component bevat een .scss -bestand waarmee die component in een adaptief formulier wordt geformatteerd. Het bestand /src/components/button/_button.scss bevat bijvoorbeeld stijlinformatie voor de component Adaptive Forms Button.

    Structuur van het Thema van Canvas

  • 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 om het even welk van deze thema's aanpassen om een thematot stand te brengen.

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 instanties van de Auteur en van Publish op te stellen.
  • Net als elk ander pakket wordt via Package Manager een themacliotheek geïmporteerd of geëxporteerd.

Vereisten om een thema aan te passen prerequisites

  • laat de Aangepaste Componenten van de Kern van Formsvoor uw milieu toe.

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

  • Leer hoe te om a cliëntbibliotheek in Adobe Experience Managertot stand te brengen. 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 gebruikt Archetype om de Aangepaste Componenten van de Kern van Formsop uw milieu toe te laten om uw thema's aan te passen.

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

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

  1. Een thema klonen
  2. pas de verschijning van het themaaan
  3. Klaar het thema voor lokale plaatsing
  4. stel het thema op een lokaal milieuop
  5. Het thema inzetten in de productieomgeving

De voorbeelden die in het document worden verstrekt zijn gebaseerd op het ​ ​thema van het Canvas, maar u kunt om het even welk thema klonen en het aanpassen gebruikend de zelfde 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 opdracht git clone uit om een thema te klonen.

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

    Vervang het [ Weg van de Bewaarplaats van het Git van het thema ] met daadwerkelijke URL van de overeenkomstige Bewaarplaats van het Git 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. Selecteer Vertrouwen de auteurs van alle dossiers in de ouderomslag en klik ja, ik vertrouw de auteurs.

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

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

Het bestand 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 het <your-theme-sources>/src/site/_variables.scss -bestand om het te bewerken.

  2. Wijzig de waarde van een willekeurige eigenschap. De standaardfoutkleur is bijvoorbeeld rood. Om de foutenkleur van rood in blauw te veranderen, verander de code van de kleurenhexuitdraai van de $error variabele. Bijvoorbeeld $error: #196ee5 .

    Voorbeeld: De kleur van de fout die aan blauw wordt geplaatst

  3. Sla het bestand op en sluit het.

Op dezelfde manier kunt u het bestand variable.scss gebruiken om lettertypefamilie en -type, thema- en lettertypekleuren, lettergrootte, themaspatiëring, foutpictogram, themarand en meer variabele in te stellen 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. Open het bestand <your-theme-sources>/src/components/<component>/<component.scss> voor bewerking. Als u bijvoorbeeld de lettertypekleur van de knopcomponent wilt wijzigen, opent u het bestand <your-theme-sources>/src/components/button/button.scss .

  2. Wijzig desgewenst de waarde van een object. Als u bijvoorbeeld de kleur van de knopcomponent bij de muisaanwijzer wilt wijzigen in Groen, wijzigt u de waarde van de eigenschap color: $white in de klasse cmp-adaptiveform-button__widget:hover in 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. Navigeer naar de map <your-theme-sources> . Bijvoorbeeld: C:\aem-forms-theme-canvas

  3. Voer de volgende opdracht uit:

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

    Vervang [yourtheme] door de naam van het aangepaste thema. Als het aangepaste thema bijvoorbeeld customcanvastheme heet, 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] .

    De Generatie van de Bibliotheek van de Cliënt

    plaats van de Bibliotheek van de Cliënt

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

    Bibliotheek van de Cliënt bouwt

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 van Auteur en Publish. 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. Klik uploaden Pakket en klik doorbladeren.
  4. Navigeer naar en selecteer [AEM Archetype Project Folder]\all\target[appid].all-[version].zip . Klik Open.
  5. Klik op Installeren. Herhaal deze stap in alle productieomgevingen.

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

de Bibliotheek van de Cliënt van het Thema

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 . Hierdoor hebt u toegang tot aanmelding bij een Publish-instantie, zodat u verder kunt gaan met het installatieproces.

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. Selecteer Adobe Experience Manager > Forms > Forms & Documenten.

  3. Klik creëren > Aanpassings Forms.

  4. Selecteer een Adaptief malplaatje van de Componenten van de Kern van Forms en klik daarna. voegt Eigenschappen toe verschijnt

  5. Specificeer de Naam voor uw AanpassingsVorm.

    note note
    NOTE
    • Standaard is het thema adaptiveform.theme.canvas3 geselecteerd.
    • U kunt een verschillend thema van het drop-down menu van de Bibliotheek van de Cliënt van het Thema kiezen.

  6. Klik creëren.

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. Navigeer naar apps/[AEM Archetype Project Folder]/clientlibs/[yourtheme] .
  4. Verwijder de themamap en sla de wijzigingen op.

Veelgestelde vraag faq

Q: 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 componentenniveaus wordt bepaald, neemt de stijl die op het componentenniveau wordt bepaald belangrijkheid.

Q: Welke stappen zouden moeten worden genomen als het douanethema niet zichtbaar in Theme Client Library is?

Ans: als uw douanethema niet in Theme Client Library drop-down verschijnt, volg deze stappen:

  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 het .content.xml -bestand en neem 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