Inleiding tot de werkruimte AEM formulier aanpassen

Laatst bijgewerkt: 14 juli 2024
  • Van toepassing op:
  • Experience Manager 6.5
  • Onderwerpen:

Gemaakt voor:

  • Beheerder
  • Gebruiker
  • Ontwikkelaar

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

Een voorbeeld van een aangepaste werkruimte

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:

  • Vormgeving 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 semantische functies van 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 algemeen toepasselijke stappen worden behandeld in Algemene stappen voor de de werkruimteaanpassing van AEM Forms. 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-elementGebruikersinterfacecomponent gewijzigd
#headerKoptekst van de AEM Forms-werkruimte
.categoryListCategorie
.categoryList.headerKoptekst van categorielijst
.categorieën, .filtersRuimte onder categorielijst
.category, .filterCategorie
.category:hover, .category.selected, .filter:hover, .filter.selectedGeselecteerde categorie en muis over stijl van categorie
categoryListBar.tool, categoryListBar.contentProcespagina starten (lijst met gesloten rubrieken)
filterListBar.tool, filterListBar.contentDe pagina Taak (gesloten filterlijst)
processNameListBar.tool, processNameListBar.contentPagina bijhouden (gesloten lijst met procesnamen)
.startPointList, .tasklistDe lijst met startpunten of de takenlijst
.startPointList.header, .tasklist.headerDe kopbal van een startpuntlijst of een taaklijst
.startpoint.selected, .task.selectedHet geselecteerde startpunt of de geselecteerde taak
.startpoint.selected.description, .task.selected.descriptionBeschrijving van het geselecteerde startpunt of de geselecteerde taak
#taskareaHet taakgebied
#header.dropdownVervolgkeuzelijst gebruiker in koptekst
.sortDrop dd ulVervolgkeuzelijst 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.
  • Werk de verwijzingen bij in html.jsp .

Voor de nauwkeurige stappen om deze aanpassingen te doen, zie Algemene stappen voor de werkruimteaanpassing van AEM Forms. Het CSS-bestand dat wordt geleverd met de AEM Forms-werkruimte bevindt zich op /libs/ws/css/. Voor op CSS betrekking hebbende aanpassingen, gebruik het Pakket van het Schip. 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 het Pakket van het Schip.

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 het html.jsp -bestand.

Om met het aanpassen van de beelden in de werkruimte van AEM Forms te beginnen, volg de Algemene stappen voor de werkruimteaanpassing van AEM Forms. 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. Kies tussen het Pakket van het Schipof het Dev Pakket, afhankelijk van het malplaatje dat moet worden aangepast.

Semantische wijzigingen

Wijzig de JavaScript-broncode als u de functionaliteit van de AEM Forms-werkruimte wilt 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 meningen in de standaard JavaScript dossiers.
  • Minimaal het pakket om de prestaties te optimaliseren.

Voor meer conceptuele informatie over de componenten die deel van de broncode uitmaken, zie de Beschrijving van herbruikbare componenten. 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 de Beschrijving van herbruikbare componentenen voor instructie over het gebruiken van de componenten, zie Integrerend de werkruimtecomponenten van AEM Forms in Webtoepassingen.

AEM Forms-werkruimtecode samenstellen

SDK-pakket

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

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

  • De pakketten van CRX voor Schip, zuiveren, en Dev profielen (die hieronder in pakketten van CRXworden vermeld).
  • Gimiteerde versie van aangepaste code (voor semantische wijzigingen).

WS-inhoud

  • client-pkg:

    • src - Bevat artefacten die nodig zijn om CRX-knooppunten te maken.
    • 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 AEM Forms-werkruimte SDK.

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

        • resource_optimizer - Gebruikt voor combinatie, minificatie, en vergroting van een bron JavaScript.

        • 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-bestanden en HTML-bestanden waarmee het proces, taken, bijhouden en voorkeuren in de AEM Forms-werkruimte worden geladen.
          • 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. Deze is beschikbaar via [LC root]\crx-repository\install\adobe-lc-workspace-pkg.zip .

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

ProfielBeschrijvingGebruik
VerzendprofielMet 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 tot één JS-bestand.Gebruik dit profiel als er geen semantische wijzigingen meer vereist zijn in JS-bestanden.
FoutopsporingsprofielMet 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 devMet 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