Introduktion till Anpassa AEM introduction-to-customizing-aem-form-workspace

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

AEM kan ändra presentationssemantik och funktionalitet i gränssnittet. Typerna av anpassningar för att ändra format, layout, formatering, varumärke och grundfunktioner beskrivs nedan.

cu_customized_workspace_example

Ett exempel på en anpassad arbetsyta

Typer av anpassningar types-of-customizations

AEM Forms arbetsyta har stöd för en mängd anpassningar för att uppdatera användargränssnittets layout, utseende, funktioner och mycket annat. Anpassningarna innefattar att uppdatera ett eller flera av följande:

Användargränssnittets utseende
Funktioner som använder semantiska anpassningar
Återanvända HTML-komponenter i andra program

Ändringar i användargränssnittet user-interface-changes

Du kan ändra utseende, layout och andra presentationssemantik för AEM Forms-arbetsytan. Ändra arbetsyta genom att anpassa CSS-, HTML-mallar och JavaScript™-filer. Alla standardfiler finns i standardinstallationen.

De vanligaste stegen beskrivs i Allmänna steg för anpassning av AEM Forms arbetsyta. Specifika exempel på sådana anpassningar, inklusive detaljerade steg, finns i de relaterade artiklarna i slutet av den här artikeln.

Förstå formatmallen understanding-the-style-sheet

Innan du anpassar arbetsytan bör du bekanta dig med den standardformatmall som finns i AEM Forms på /libs/ws/css/style.css.

Om du vill anpassa arbetsytan bör du bekanta dig med den befintliga formatmallen, style.css, i mappen /libs/ws/css. Nedan beskrivs några viktiga komponenter.

CSS-element

Användargränssnittskomponenten har ändrats

#header

Sidhuvud på arbetsytan i AEM Forms

.categoryList

Kategorilista

.categoryList.header

Rubrik för kategorilista

.categories, .filters

Avstånd nedanför kategorilistan

.category, .filter

Kategori

.category:hover, .category.selected, .filter:hover, .filter.selected

Markerad kategori och typ av hovring över-kategori

categoryListBar.tool, categoryListBar.content

Startprocesssida (stängd kategorilista)

filterListBar.tool, filterListBar.content

Att göra-sida (sluten filterlista)

processNameListBar.tool, processNameListBar.content

Spårningssida (namnlista för stängd process)

.startPointList, .tasklist

Startpunktslistan eller uppgiftslistan

.startPointList.header, .tasklist.header

Huvudet för en startpunktslista eller en uppgiftslista

.startpoint.selected, .task.selected

Den valda startpunkten eller uppgiften

.startpoint.selected.description, .task.selected.description

Beskrivning av den valda startpunkten eller uppgiften

#taskarea

Åtgärdsområdet

#header.dropdown

Listrutan Användare i rubriken

.sortDrop dd ul

Sorteringsaktivitetslistruta

CSS css

Utseendet på arbetsytan i AEM Forms lånar utseendet från en CSS. Genom att anpassa CSS kan du ändra presentationssemantik för arbetsytan, som teckensnitt, färger, varumärke och layout.

De översta stegen för CSS-anpassning är:

Skapa en CSS-fil.
Lägg till formatobjekt i denna CSS. Mer information finns i Förstå CSS-format.
Uppdatera referenser i html.jsp.

Exakt hur du gör dessa anpassningar finns på Allmänna steg för anpassning av AEM Forms arbetsyta. CSS-filen som levereras med arbetsytan i AEM Forms finns på /libs/ws/css/. För CSS-relaterade anpassningar använder du Leveranspaket. Specifika exempel på CSS-relaterade anpassningar finns i de relaterade hjälpavsnitten i slutet av den här artikeln.

Bild image

Du kan anpassa AEM Forms-arbetsytan för att lägga till olika användare eller lägga till din organisations logotyp. Använd Leveranspaket.

De översta stegen för anpassning av bilderna är:

Installera och konfigurera WebDAV.
Lägg till nya bilder.
Lägg till nya format som motsvarar de nya bilderna.
Länka till den nya CSS-filen i html.jsp -fil.

Om du vill komma igång med att anpassa bilderna på arbetsytan i AEM Forms följer du Allmänna steg för anpassning av AEM Forms arbetsyta. Specifika exempel på bildrelaterade anpassningar finns i de relaterade hjälpavsnitten i slutet av artikeln.

HTML-mall html-template

Med HTML-mallar kan du definiera utseendet och layouten för arbetsytans användargränssnitt. Genom att uppdatera standardmallarna för HTML kan du anpassa standardanvändargränssnittet för layouten.

Stegen på den översta nivån för anpassning av mallen HTML är:

Skapa kopior av de standardfiler som behövs i en mapp som skapats av användaren.
Lägg till nya mallar i en användardefinierad mapp.
Gör relevanta uppdateringar av de kopierade filerna, som sökvägen till den nya mallen.

Specifika exempel på sådana anpassningar finns i hjälpavsnitten i slutet av artikeln. Välj mellan Leveranspaket eller Dev-paket, beroende på vilken mall som ska anpassas.

Semantiska ändringar semantic-changes

Ändra JavaScript-källkoden om du vill ändra funktionaliteten för arbetsytan i AEM Forms. Ändringarna i kärnfunktionen markeras som Semantiska ändringar. Du kan ändra modeller, vyer och mallar som ingår i källkoden för AEM Forms-arbetsytan.

De översta stegen för att göra semantiska ändringar för att ändra funktionaliteten i AEM Forms-arbetsytan är:

Skapa kopior av standardfilerna i en mapp som skapas av användaren.
Lägg till nya modeller och vyer i den användardefinierade mappen.
Gör relevanta uppdateringar, som att uppdatera sökvägar för nytillagda modeller och vyer i JavaScript-standardfilerna.
Minimera paketet för att optimera prestandan.

Mer konceptuell information om komponenterna som är en del av källkoden finns i Beskrivning av återanvändbara komponenter. Använd Dev Package för dessa anpassningar.

Återanvändbara komponenter reusable-components

Eftersom AEM Forms arbetsyta är ett komponentbaserat program kan det enkelt anpassas och återanvändas. Du kan enkelt integrera arbetsytekomponenterna med dina webbprogram.

Mer konceptuell information finns i Beskrivning av återanvändbara komponenter och instruktioner om hur du använder komponenterna finns i Integrera AEM Forms-arbetsytekomponenter i webbprogram.

Skapar AEM Forms arbetsytekod building-html-workspace-code

SDK-paket sdk-package

Paketet innehåller källkoden för AEM Forms-arbetsytan. Paketet finns på [LC root]\sdk\html-workspace\adobe-lc-workspace-src.zip.

Det är främst avsett för anpassningar, eftersom det ger möjlighet att generera:

CRX-paket för Ship-, Debug- och Dev-profiler (som nämns nedan i CRX-paket).
Minimerad version av anpassad kod (för semantiska ändringar).

WS-innehåll ws-content

client-pkg:
- src - Innehåller artefakter som behövs för att skapa CRX-noder.
- pom.xml - Skript för att skapa distributionspaket för olika profiler WS-Deploy Package
client-html:
- assembly - Innehåller zip.xml som används av skript för att skapa SDK för arbetsytan i AEM Forms.
- src/main/webapp -
  - css - Innehåller formatmallar för AEM Forms-arbetsytan.
  - bilder - Innehåller bilder som används på arbetsytan i AEM Forms.
  - js:
    - libs - Innehåller alla tredjepartsbibliotek som används i AEM Forms arbetsyta.
    - licenser - Innehåller licenser för HTML och JS-filer och kod som prefix till dessa licenser för respektive källfil.
    - minifier - Används för kombination, minifiering och uppgradering av anpassad JavaScript-kod.
    - resourcejs_optimizer - Används för kombination, minifiering och uglifiering av JavaScript-källan.
    - resource_generator - Används för att generera register.js och modelcontroller.path.js.
    - runtime:
      - initierare - Innehåller initializer.js som används för att initiera vyer och modeller för ryggrad som används på arbetsytan i AEM Forms.
      - modeller - Innehåller stammodeller av alla komponenter som finns på arbetsytan i AEM Forms.
      - vägar - Innehåller JavaScript-filer och HTML-filer som läser in startprocess, att göra-och-spåra samt inställningar på arbetsytan i AEM Forms.
      - services - Innehåller service.js som används i AEM Forms arbetsyta. Alla serveranrop görs via service.js.
      - mallar - Innehåller alla mallar, det vill säga HTML-filer för alla vyer på arbetsytan i AEM Forms.
      - util - Innehåller alla verktygsfiler (javascript) som används på arbetsytan i AEM Forms.
      - vyer - Innehåller ryggradsvyer av alla komponenter på arbetsytan i AEM Forms.
    - main.js
    - router.js
  - libs/ws: pdf.html och pluginPing.pdf används för att läsa in PDF forms i AEM Forms arbetsyta och WSNextAdapter.swf används för att läsa in SWF-formulär och stödlinjer i AEM Forms arbetsyta.
  - nationella inställningar:
    - de-DE - Innehåller translation.json för tyska.
    - en-US - Innehåller translation.json för engelska.
    - fr-FR - Innehåller translation.json för franska.
    - ja-JP - Innehåller translation.json för japanska.
    - html.jsp - Innehåller kod för att ta reda på webbläsarens aktuella språkområde.
  - html.jsp
  - GET.jsp

CRX-paket crx-package

CRX-paketet kan distribueras i CRX™-databasen. Den finns på [LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip.

Paketet kan byggas med de tre profiler som beskrivs nedan.

Profil

Beskrivning

Användning

Leveransprofil

Den här profilen skapar ett CRX-paket med minsta möjliga storlek med hjälp av miniatyrbilder. Det här paketet är mest effektivt. Alla JavaScript™-filer kombineras och minieras till en enda JS-fil.

Använd den här profilen när inga ytterligare semantiska ändringar krävs i JS-filer.

Felsökningsprofil

Den här profilen skapar ett måttligt effektivt CRX-paket. Paketets storlek är något större än det paket som skapats med Ship-profilen. Det här paketet innehåller de flesta JavaScript-filer som kombineras till en enda JS-fil.

Använd den här profilen för felsökning.

Dev-profil

Den här profilen skapar ett CRX-paket med största möjliga storlek. Alla JavaScript-filer är tillgängliga separat, som de är i SDK-paketet.

Använd den här profilen när du inkluderar semantiska ändringar.

Leveransprofil ship-profile

Kommando command

mvn clean -P Ship install on client-pkg folder of Source package shipping to client.
Kommandokörning av Ship-profil fungerar bara på en 64-bitars JVM.

WS-innehåll ws-content-1

css - Innehåller style.css, ie.css och jquery-ui.css.
bilder - Innehåller alla bilder.
js:
- libs:
  - require - Contains require.js.
  - jqueryui - Innehåller jquery.ui.datepicker.ja.js.
- runtime:
  - mallar - Innehåller alla mallar, det vill säga HTML-filer för alla komponenter i AEM Forms arbetsyta.
- main.js (kombinerat, minifierat och uppgraderat).
- registry.js
libs:
- ws - Innehåller pluginPing.pdf, pdf.html och WSNextAdapter.swf.
Språk - innehåller .content.xml.
nationella inställningar:
- de-DE - Innehåller translation.json för tyska.
- en-US - Innehåller translation.json för engelska.
- fr-FR - Innehåller translation.json för franska.
- ja-JP - Innehåller translation.json för japanska.
- html.jsp - Innehåller kod för att ta reda på webbläsarens aktuella språkområde.
Index - innehåller .content.xml
profile - Innehåller offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml

Felsökningsprofil debug-profile

Kommando command-1

mvn ren -P Felsökningsinstallation på klient-pkg
Kommandokörning av felsökningsprofiler fungerar bara på 64-bitars JVM.

WS-innehåll ws-content-2

css - Innehåller style.css, ie.css och jqueri-ui.css.
bilder - Innehåller alla bilder.
js:
- libs:
  - require - Contains require.js.
  - jqueryui - Innehåller jquery.ui.datepicker.ja.js.
- runtime:
  - mallar - Innehåller alla mallar, det vill säga HTML-filer för alla komponenter i AEM Forms arbetsyta.
- main.js (kombinerat).
- registry.js
libs:
- ws - Innehåller pluginPing.pdf, pdf.html och WSNextAdapter.swf.
Språk - innehåller .content.xml.
nationella inställningar:
- de-DE - Innehåller translation.json för tyska.
- en-US - Innehåller translation.json för engelska.
- fr-FR - Innehåller translation.json för franska.
- ja-JP - Innehåller translation.json för japanska.
- html.jsp - Innehåller kod för att ta reda på webbläsarens aktuella språkområde.
Index - innehåller .content.xml
profile - Innehåller offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml

Dev-profil dev-profile

Kommando command-2

mvn clean -P Dev install on client-pkg

WS-innehåll ws-content-3

css - Innehåller style.css, ie.css och jqueri-ui.css.
bilder - Innehåller alla bilder.
js:
- libs - Innehåller alla bibliotek som används i AEM Forms arbetsyta.
- require - Contains require.js
- jqueryui - innehåller jquery.ui.datepicker.ja.js
- runtime:
  - initializer - Innehåller initializer.js och modelcontroller.path.js.
  - modeller - Innehåller modeller av alla komponenter på arbetsytan i AEM Forms.
  - vägar - Innehåller JavaScript-filer och HTML-filer som läser in startprocess, att göra-och-spåra samt inställningar på arbetsytan i AEM Forms.
  - services - Innehåller service.js som används i AEM Forms arbetsyta.
  - mallar - Innehåller alla mallar, det vill säga HTML-filer för alla komponenter i AEM Forms arbetsyta.
  - util - Innehåller alla verktygsfiler (JavaScript) som används på arbetsytan i AEM Forms.
  - vyer - Innehåller vyer över alla komponenter på arbetsytan i AEM Forms.
- main.js
- registry.js
- router.js
libs:
- ws - Innehåller pluginPing.pdf, pdf.html och WSNextAdapter.swf.
Språk - innehåller .content.xml.
nationella inställningar:
- de-DE - Innehåller translation.json för tyska.
- en-US - Innehåller translation.json för engelska.
- fr-FR - Innehåller translation.json för franska.
- ja-JP - Innehåller translation.json för japanska.
- html.jsp - Innehåller kod för att ta reda på webbläsarens aktuella språkområde.
Index - innehåller .content.xml
profile - Innehåller offline.jsp.
GET.jsp
html.jsp
content.xml
_rep_policy.xml

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2