Inleiding tot de werkruimte AEM formulier aanpassen

LET OP

AEM 6.4 heeft het einde van de uitgebreide ondersteuning bereikt en deze documentatie wordt niet meer bijgewerkt. Raadpleeg voor meer informatie onze technische ondersteuningsperioden. Ondersteunde versies zoeken hier.

AEM formulierwerkruimte biedt mogelijkheden om de semantiek en functionaliteit van de presentatie van de interface te wijzigen. De typen aanpassingen waarmee u de stijl, lay-out, opmaak, branding en kernfunctionaliteit kunt wijzigen, worden hieronder beschreven.

cu_customized_workspace_example

Typen aanpassingen

De AEM Forms-werkruimte ondersteunt een groot aantal aanpassingen waarmee de lay-out van de gebruikersinterface, de weergave, functionaliteit en nog veel meer kunnen worden bijgewerkt. Bij de aanpassingen moet u een of meer van de volgende handelingen bijwerken:

  • Weergaven van de gebruikersinterface
  • Functionaliteit met semantische aanpassingen
  • HTML-componenten opnieuw gebruiken in andere toepassingen

Wijzigingen in gebruikersinterface

U kunt de vormgeving, lay-out en andere semantiek van de presentatie in de AEM Forms-werkruimte wijzigen. De werkruimte wijzigen door de CSS-, HTML-sjablonen en JavaScript™-bestanden aan te passen. Alle standaardbestanden worden weergegeven in de standaardinstallatie.

De meest gangbare stappen worden behandeld in Algemene stappen voor aanpassing van de AEM Forms-werkruimte. Zie de verwante artikelen aan het einde van dit artikel voor specifieke voorbeelden van dergelijke aanpassingen, waaronder de gedetailleerde stappen.

De stijlpagina begrijpen

Voordat u de werkruimte aanpast, moet u bekend zijn met het standaardstijlblad dat bij AEM Forms wordt geleverd op /libs/ws/css/style.css.

Als u de werkruimte wilt aanpassen, kunt u het beste vertrouwd raken met het bestaande stijlblad style.css in de map /libs/ws/css. Hieronder worden een aantal belangrijke componenten beschreven.

CSS-element

Gebruikersinterfacecomponent gewijzigd

#header

Koptekst van de AEM Forms-werkruimte

.categoryList

Categorie

.categoryList.header

Koptekst van categorielijst

.categorieën, .filters

Ruimte onder categorielijst

.category, .filter

Categorie

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

Geselecteerde categorie en muis over stijl van categorie

categoryListBar.tool, categoryListBar.content

Procespagina starten (lijst met gesloten rubrieken)

filterListBar.tool, filterListBar.content

De pagina Taak (gesloten filterlijst)

processNameListBar.tool, processNameListBar.content

Pagina bijhouden (gesloten lijst met procesnamen)

.startPointList, .tasklist

De lijst met startpunten of de takenlijst

.startPointList.header, .tasklist.header

De kopbal van een startpuntlijst of een taaklijst

.startpoint.selected, .task.selected

Het geselecteerde startpunt of de geselecteerde taak

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

Beschrijving van het geselecteerde startpunt of de geselecteerde taak

#taskarea

Het taakgebied

#header.dropdown

Vervolgkeuzelijst gebruiker in koptekst

.sortDrop dd ul

Vervolgkeuzelijst voor taken sorteren

CSS

De vormgeving van de AEM Forms-werkruimte leent de vormgeving ervan uit een CSS. Door de CSS aan te passen, kunt u de presentatiessemantiek van werkruimte zoals doopvonten, kleuren, branding, en lay-out veranderen.

De stappen op hoofdniveau voor CSS-aanpassing zijn:

  • Maak een CSS-bestand.
  • Stijlitems toevoegen aan deze CSS. Zie Werken met CSS-stijlen voor meer informatie.
  • Referenties bijwerken in html.jsp.

Voor de nauwkeurige stappen om deze aanpassingen te doen, zie Algemene stappen voor aanpassing van de AEM Forms-werkruimte. Het CSS-bestand dat wordt geleverd met de AEM Forms-werkruimte bevindt zich op /libs/ws/css/. Voor op CSS betrekking hebbende aanpassingen, gebruik Verzendpakket. Zie de verwante Help-onderwerpen aan het einde van dit artikel voor specifieke voorbeelden van CSS-gerelateerde aanpassingen.

Afbeelding

U kunt de AEM Forms-werkruimte aanpassen om avatars van gebruikers toe te voegen of om het logo van uw organisatie toe te voegen. Voor deze aanpassingen, gebruik Verzendpakket.

De stappen op hoofdniveau voor aanpassingen aan de afbeeldingen zijn:

  • WebDAV installeren en configureren.
  • Voeg nieuwe afbeeldingen toe.
  • Voeg nieuwe stijlen toe die overeenkomen met de toegevoegde afbeeldingen.
  • Koppeling maken naar het nieuwe CSS-bestand in html.jsp bestand.

Als u wilt beginnen met het aanpassen van de afbeeldingen in de AEM Forms-werkruimte, volgt u de opdracht Algemene stappen voor aanpassing van de AEM Forms-werkruimte. Voor specifieke voorbeelden van beeld-verwante aanpassingen, zie de verwante onderwerpen van de Hulp aan het eind van dit artikel.

HTML-sjabloon

Met sjablonen voor HTML kunt u de weergave en lay-out van de gebruikersinterface van de werkruimte definiëren. Door de standaardsjablonen voor HTML bij te werken, kunt u de standaardgebruikersinterface voor de lay-out aanpassen.

De stappen op hoofdniveau voor aanpassingen aan het sjabloon HTML zijn:

  • Maak kopieën van de vereiste standaardbestanden in een door de gebruiker gemaakte map.
  • Nieuwe sjablonen toevoegen in een door de gebruiker gedefinieerde map.
  • Maak relevante updates aan de gekopieerde dossiers als, de weg van het nieuwe malplaatje.

Voor specifieke voorbeelden van dergelijke aanpassingen, zie de onderwerpen van de Hulp die aan het eind van dit artikel worden verstrekt. Kiezen tussen de Verzendpakket of de Dev-pakket, afhankelijk van de sjabloon die moet worden aangepast.

Semantische wijzigingen

Wijzig de JavaScript-broncode om de functionaliteit van de AEM Forms-werkruimte te wijzigen. Wijzigingen in de kernfunctionaliteit worden aangeduid als Semantische wijzigingen. U wijzigt modellen, weergave en sjablonen die worden geleverd als onderdeel van de broncode van de AEM Forms-werkruimte.

De stappen op hoofdniveau voor semantische wijzigingen om de functionaliteit van de AEM Forms-werkruimte te wijzigen zijn:

  • Maak kopieën van de juiste standaardbestanden in een door de gebruiker gemaakte map.
  • Voeg nieuwe modellen en meningen in de user-defined omslag toe.
  • Breng relevante updates aan, zoals het bijwerken van paden van nieuw toegevoegde modellen en weergaven in de standaard JavaScript-bestanden.
  • Minimaal het pakket om de prestaties te optimaliseren.

Voor meer conceptuele informatie over de componenten die deel van de broncode uitmaken, zie Beschrijving van herbruikbare onderdelen. Voor deze aanpassingen, gebruik het Dev Pakket.

Herbruikbare componenten

Aangezien de werkruimte van AEM Forms op componenten-gebaseerde software is, kan het gemakkelijk worden aangepast en worden opnieuw gebruikt. U kunt de werkruimtecomponenten gemakkelijk met uw Webtoepassingen integreren.

Voor meer conceptuele informatie, zie Beschrijving van herbruikbare onderdelen en voor instructies over het gebruik van de componenten, zie AEM Forms-werkruimtecomponenten integreren in webtoepassingen.

AEM Forms-werkruimtecode samenstellen

SDK-pakket

Het pakket bevat de broncode van de AEM Forms-werkruimte. Het pakket is beschikbaar op [*LC root*]\sdk\html-workspace\adobe-lc-workspace-src.zip.

Het is hoofdzakelijk bedoeld voor aanpassingen, aangezien het de capaciteit verstrekt om te produceren:

  • CRX-pakketten voor profielen voor verzending, foutopsporing en ontwikkeling (zie hieronder CRX-pakketten).
  • Gimiteerde versie van aangepaste code (voor semantische wijzigingen).

WS-inhoud

  • client-pkg:

    • src - Bevat artefacten nodig om CRX knopen tot stand te brengen.
    • pom.xml - Script om implementatiepakketten voor verschillende profielen op te bouwen WS-Deplotion Package

  • client-html:

    • assembly - Bevat zip.xml die door script wordt gebruikt voor het maken van de SDK van de AEM Forms-werkruimte.

    • src/main/webapp -

      • css - Bevat stijlbladen voor de werkruimte van AEM Forms.

      • afbeeldingen - Bevat afbeeldingen die worden gebruikt in de AEM Forms-werkruimte.

      • js:

        • libs - Bevat alle bibliotheken van derden die in de AEM Forms-werkruimte worden gebruikt.

        • licenties - Bevat licenties voor HTML- en JS-bestanden en code voor het voorvoegsel van deze licenties voor de desbetreffende bronbestanden.

        • minifier - Wordt gebruikt voor combinatie, minificatie en verzwaring van aangepaste javascript-code.

        • resourceJs_optimizer - Gebruikt voor combinatie, minificatie, en vergroting van javascript bron.

        • resource_generator - Gebruikt voor het produceren van register.js en modelcontrollerpath.js.

        • runtime:

          • initializer - Bevat initializer.js die wordt gebruikt om backboneweergaven en modellen te initialiseren die in de werkruimte van AEM Forms worden gebruikt.
          • modellen - Bevat backbonemodellen van alle componenten in de werkruimte van AEM Forms.
          • routes - Bevat javascript- dossiers en HTML- dossiers die beginproces, te doen, het volgen, en voorkeur in de werkruimte van AEM Forms laden.
          • services - Bevat service.js die wordt gebruikt in de AEM Forms-werkruimte. Alle servervraag wordt gemaakt door service.js.
          • sjablonen - Bevat alle sjablonen, dat wil zeggen HTML-bestanden van alle weergaven in de werkruimte van AEM Forms.
          • util - Bevat alle hulpprogrammabestanden (javascript) die in de AEM Forms-werkruimte worden gebruikt.
          • weergaven - Bevat backboneweergaven van alle componenten in de AEM Forms-werkruimte.

        • main.js

        • router.js

      • libs/ws: pdf.html en pluginPing.pdf worden gebruikt voor het laden van PDF forms in de werkruimte van AEM Forms en WSNextAdapter.swf wordt gebruikt om SWF formulieren en hulplijnen in de werkruimte van AEM Forms te laden.

      • landinstellingen:

        • de-DE - Bevat vertaling.json voor het Duits.
        • en-US - Bevat translatie.json voor het Engels.
        • fr-FR - Bevat translatie.json voor het Frans.
        • ja-JP - Bevat translatie.json voor Japans.
        • html.jsp - Bevat code om de huidige browserlandinstelling te achterhalen.

      • html.jsp

      • GET.jsp

CRX-pakket

CRX-pakket kan worden geïmplementeerd in de CRX™-opslagplaats. Het is beschikbaar op [*LC root*]\crx-repository\install\adobe-lc-workspace-pkg.zip.

Dit pakket kan worden gemaakt met de drie hieronder beschreven profielen.

Profiel Beschrijving Gebruik
Verzendprofiel Met dit profiel maakt u een CRX-pakket van de kleinst mogelijke grootte met miniatuur. Dit pakket is het meest efficiënt. Alle JavaScript™-bestanden worden gecombineerd en geminiateerd in één JS-bestand. Gebruik dit profiel als er geen semantische wijzigingen meer vereist zijn in JS-bestanden.
Foutopsporingsprofiel Met dit profiel wordt een matig efficiënt CRX-pakket gemaakt. De grootte van het pakket is iets groter dan het pakket dat is gemaakt met het profiel Verzenden. Dit pakket bevat de meeste JavaScript-bestanden die in één JS-bestand worden gecombineerd. Gebruik dit profiel voor foutopsporing.
Profiel dev Met dit profiel wordt een CRX-pakket van de grootst mogelijke grootte gemaakt. Alle JavaScript-bestanden zijn afzonderlijk beschikbaar, net als in het SDK-pakket. Gebruik dit profiel wanneer u semantische wijzigingen opneemt.

Verzendprofiel

Opdracht

  • mvn clean -P Ship install on client-pkg folder of Source package sent to client.
  • De uitvoering van de opdracht Verzenden van profielen werkt alleen op een 64-bits JVM.

WS-inhoud

  • css - Bevat style.css, ie.css, en jquery-ui.css.

  • afbeeldingen - Bevat alle afbeeldingen.

  • js:

    • libs:

      • require - Bevat require.js.
      • jqueryui - Bevat jquery.ui.datepicker.ja.js.

    • runtime:

      • sjablonen - Bevat alle sjablonen, dat wil zeggen: HTML-bestanden van alle componenten in de AEM Forms-werkruimte.

    • main.js (gecombineerd, geminificeerd en aangevuld).

    • registry.js

  • libs:

    • ws - Bevat pluginPing.pdf, pdf.html, en WSNextAdapter.swf.

  • Landinstelling - Bevat .content.xml.

  • landinstellingen:

    • de-DE - Bevat vertaling.json voor het Duits.
    • en-US - Bevat translatie.json voor het Engels.
    • fr-FR - Bevat translatie.json voor het Frans.
    • ja-JP - Bevat translatie.json voor Japans.
    • html.jsp - Bevat code om de huidige browserlandinstelling te achterhalen.

  • Index - Bevat .content.xml

  • profiel - Bevat offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Foutopsporingsprofiel

Opdracht

  • mvn clean -P Debug install on client-pkg
  • De uitvoering van foutopsporingsprofielopdrachten werkt alleen op 64-bits JVM.

WS-inhoud

  • css - Bevat style.css, ie.css, en jqueri-ui.css.

  • afbeeldingen - Bevat alle afbeeldingen.

  • js:

    • libs:

      • require - Bevat require.js.
      • jqueryui - Bevat jquery.ui.datepicker.ja.js.

    • runtime:

      • sjablonen - Bevat alle sjablonen, dat wil zeggen: HTML-bestanden van alle componenten in de AEM Forms-werkruimte.

    • main.js (gecombineerd).

    • registry.js

  • libs:

    • ws - Bevat pluginPing.pdf, pdf.html, en WSNextAdapter.swf.

  • Landinstelling - Bevat .content.xml.

  • landinstellingen:

    • de-DE - Bevat vertaling.json voor het Duits.
    • en-US - Bevat translatie.json voor het Engels.
    • fr-FR - Bevat translatie.json voor het Frans.
    • ja-JP - Bevat translatie.json voor Japans.
    • html.jsp - Bevat code om de huidige browserlandinstelling te achterhalen.

  • Index - Bevat .content.xml

  • profiel - Bevat offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Dev-profiel

Opdracht

mvn clean -P Dev install on client pkg

WS-inhoud

  • css - Bevat style.css, ie.css, en jqueri-ui.css.

  • afbeeldingen - Bevat alle afbeeldingen.

  • js:

    • libs - Bevat alle bibliotheken die in de AEM Forms-werkruimte worden gebruikt.

    • require - Bevat require.js

    • jqueryui - Bevat jquery.ui.datepicker.ja.js

    • runtime:

      • initializer - Bevat initializer.js en modelcontrollerpath.js.
      • modellen - Bevat modellen van alle componenten in de werkruimte van AEM Forms.
      • routes - Bevat javascript- dossiers en HTML- dossiers die beginproces, te doen, het volgen, en voorkeur in de werkruimte van AEM Forms laden.
      • services - Bevat service.js die wordt gebruikt in de AEM Forms-werkruimte.
      • sjablonen - Bevat alle sjablonen, dat wil zeggen: HTML-bestanden van alle componenten in de AEM Forms-werkruimte.
      • util - Bevat alle hulpprogrammabestanden (JavaScript) die in de AEM Forms-werkruimte worden gebruikt.
      • weergaven - Bevat weergaven van alle componenten in de AEM Forms-werkruimte.

    • main.js

    • registry.js

    • router.js

  • libs:

    • ws - Bevat pluginPing.pdf, pdf.html, en WSNextAdapter.swf.

  • Landinstelling - Bevat .content.xml.

  • landinstellingen:

    • de-DE - Bevat vertaling.json voor het Duits.
    • en-US - Bevat translatie.json voor het Engels.
    • fr-FR - Bevat translatie.json voor het Frans.
    • ja-JP - Bevat translatie.json voor Japans.
    • html.jsp - Bevat code om de huidige browserlandinstelling te achterhalen.

  • Index - Bevat .content.xml

  • profiel - Bevat offline.jsp.

  • GET.jsp

  • html.jsp

  • content.xml

  • _rep_policy.xml

Op deze pagina