Ontwikkeling AEM componenten (klassieke gebruikersinterface) developing-aem-components-classic-ui

Maak met CRXDE Lite een nieuwe componentmap in:

/ apps/<myProject>/components/<myComponent>

Maak de knoopstructuur opnieuw zoals in bibliotheken, kopieer dan de definitie van een bestaande component, zoals de component van de Tekst. Bijvoorbeeld om het de componentenexemplaar van de Tekst aan te passen:

• Van /libs/foundation/components/text
• tot /apps/myProject/components/text

De jcr:title om de nieuwe naam weer te geven.

Open de nieuwe componentenomslag en breng de veranderingen aan u vereist. Verwijder ook alle andere gegevens in de map.

U kunt wijzigingen aanbrengen zoals:

• een nieuw veld toevoegen in het dialoogvenster

  • cq:dialog - dialoogvenster voor de interface met aanraakbediening
  • dialog - dialoog voor de klassieke gebruikersinterface

• ter vervanging van .jsp bestand (naam na nieuwe component)

• of de volledige component volledig opnieuw te bewerken als u wilt

Als u bijvoorbeeld een kopie van de standaardtekstcomponent maakt, kunt u een extra veld aan het dialoogvenster toevoegen en vervolgens de .jsp om de input te verwerken die daar is gemaakt.

Een van de volgende knooppunten moet aanwezig zijn en moet correct zijn geïnitialiseerd om de nieuwe component weer te geven:

• cq:dialog - dialoogvenster voor de interface met aanraakbediening
• dialog - dialoog voor de klassieke gebruikersinterface
• cq:editConfig - hoe componenten zich gedragen in de bewerkingsomgeving (bijv. slepen en neerzetten)
• design_dialog - dialoogvenster voor ontwerpmodus (alleen klassieke gebruikersinterface)

Activeer de nieuwe component in uw alineasysteem door:

• CRXDE Lite gebruiken om de waarde toe te voegen <path-to-component> (bijvoorbeeld /apps/geometrixx/components/myComponent) aan de eigenschapcomponenten van het knooppunt /etc/designs/geometrixx/jcr:content/contentpage/par
• Volg de instructies in Nieuwe componenten toevoegen aan alineasystemen

Open in AEM WCM een pagina op uw website en voeg een nieuwe alinea in van het type dat u net hebt gemaakt om ervoor te zorgen dat de component goed werkt.

Open bijvoorbeeld een pagina in de ontwerpomgeving waarin het alineasysteem wordt gebruikt <contentPath>/Test.html.

Schakel over naar de ontwerpmodus door:

• toevoegen ?wcmmode=design aan het einde van de URL en de toegang tot de URL, bijvoorbeeld:

  <contextPath>/ Test.html?wcmmode=design

• klikken op Ontwerpen in Sidetrap

U bevindt zich nu in de ontwerpmodus en kunt het alineasysteem bewerken.

Klik op Bewerken.

Een lijst met onderdelen die tot het alineasysteem behoren, wordt weergegeven. Uw nieuwe component wordt ook vermeld.

De componenten kunnen worden geactiveerd (of gedeactiveerd) om te bepalen welke componenten aan de auteur worden aangeboden wanneer het uitgeven van een pagina.

Activeer de component en ga terug naar de normale bewerkingsmodus om te bevestigen dat deze beschikbaar is voor gebruik.

De standaardtextielcomponent kopiëren uit /libs/foundation/components/textimage in de map Geometrixx, /apps/geometrixx/components, met gebruik van textiel als de naam van het doelknooppunt. (Kopieer de component door naar de component te navigeren, met de rechtermuisknop te klikken en Kopiëren te selecteren en naar de doelmap te bladeren.)

Als u dit voorbeeld eenvoudig wilt houden, navigeert u naar de component die u hebt gekopieerd en verwijdert u alle subknooppunten van het nieuwe knooppunt naast de volgende:

• definitie van dialoogvenster: textimage/dialog
• componentscript: textimage/textimage.jsp
• configuratieknooppunt bewerken (voor slepen en neerzetten van elementen): textimage/cq:editConfig

Bewerk de metagegevens van de component:

• Componentnaam

  • Set jcr:description tot Text Image Component (Extended)
  • Set jcr:title tot Text Image (Extended)

• Groep, waar de component in sidekick (verlaat zoals is) wordt vermeld

  • Verlaten componentGroup instellen op General

• Bovenliggende component voor de nieuwe component (de standaard textielcomponent)

  • Set sling:resourceSuperType tot foundation/components/textimage

Na deze stap ziet het componentknooppunt er als volgt uit:

Wijzig de sling:resourceType eigenschap van het bewerkingsconfiguratieknooppunt van de afbeelding (eigenschap: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType) naar geometrixx/components/textimage.

Op deze manier geldt dat wanneer een afbeelding naar de component op de pagina wordt neergezet, de sling:resourceType eigenschap van de uitgebreide textielcomponent wordt ingesteld op: geometrixx/components/textimage.

Wijzig de de dialoogdoos van de component om de nieuwe optie te omvatten. De nieuwe component neemt de delen van het dialoogvenster over die hetzelfde zijn als in het origineel. De enige toevoeging die wij maken, is de uitbreiding van de Geavanceerd tabblad, toevoegen Positie afbeelding vervolgkeuzelijst, met opties Links en Rechts:

• Laat de textimage/dialogeigenschappen ongewijzigd.

Let op: textimage/dialog/items heeft vier subknooppunten, tab1 tot tab4, die de vier tabbladen van het dialoogvenster textiel vertegenwoordigen.

• Voor de eerste twee tabbladen (tab1 en tab2):

  • Xtype wijzigen in cqinclude (om over te nemen van de standaardcomponent).
  • Een padeigenschap met waarden toevoegen /libs/foundation/components/textimage/dialog/items/tab1.infinity.jsonen /libs/foundation/components/textimage/dialog/items/tab2.infinity.json, respectievelijk.
  • Alle andere eigenschappen of subknooppunten verwijderen.

• Voor tab3:

  • Eigenschappen en subknooppunten ongewijzigd laten

  • Een nieuwe velddefinitie toevoegen aan tab3/items, knooppuntpositie van type cq:Widget

  • Stel de volgende eigenschappen (van het type String) in voor de nieuwe tab3/items/positionknooppunt:

    • name: ./imagePosition
    • xtype: selection
    • fieldLabel: Image Position
    • type: select

  • Subknooppunt toevoegen position/options van het type cq:WidgetCollection om de twee keuzen voor beeldplaatsing te vertegenwoordigen, en onder het creeert twee knopen, o1 en o2 van type nt:unstructured.

  • Voor knooppunt position/options/o1 stel de eigenschappen in: text tot Left en value tot left.

  • Voor knooppunt position/options/o2 stel de eigenschappen in: text tot Right en value tot right.

• Tabblad4 verwijderen.

Afbeeldingspositie wordt in de inhoud aangehouden als de imagePositioneigenschap of the node representing textimage alinea. Na deze stappen ziet het dialoogvenster van de component er als volgt uit:

Het componentscript uitbreiden, textimage.jsp, met extra verwerking van de nieuwe parameter:

Image image = new Image(resource, "image");

if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
     image.loadStyleData(currentStyle);

Het gemarkeerde codefragment wordt vervangen %><div class="image"><% met nieuwe code die een aangepaste stijl voor deze tag genereert.

// todo: add new CSS class for the 'right image' instead of using
// the style attribute
String style="";
     if (properties.get("imagePosition", "left").equals("right")) {
          style = "style=\"float:right\"";
     }
     %><div <%= style %> class="image"><%

Sla de component op in de opslagplaats. De component kan worden getest.

De standaardafbeeldingscomponent kopiëren uit /libs/foundation/components/image in de map Geometrixx, /apps/geometrixx/components, waarbij afbeelding wordt gebruikt als de naam van het doelknooppunt.

Bewerk de metagegevens van de component:

• Set jcr:titel tot Image (Extended)

Ga naar /apps/geometrixx/components/image/dialog/items/image.

Nieuwe eigenschap toevoegen:

• Naam: allowUpload
• Type: String
• Waarde: false

Klikken Alles opslaan. De component kan worden getest.

Open een pagina in Geometrixx zoals Engels / Bedrijf.

Schakel over naar de ontwerpmodus en activeer Afbeelding (Extended).

Ga terug naar de bewerkingsmodus en voeg deze toe aan het alineasysteem. Op de volgende afbeeldingen ziet u de verschillen tussen de originele afbeeldingscomponent en de afbeelding die u zojuist hebt gemaakt.

Originele afbeeldingscomponent:

Uw nieuwe afbeeldingscomponent:

De component is nu gebruiksklaar.