Adobe Experience Manager-componenten (AEM) ontwikkelen (klassieke gebruikersinterface) developing-aem-components-classic-ui

Maak met CRXDE Lite een 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

Wijzig jcr:title om op zijn nieuwe naam te wijzen.

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 veld toevoegen in het dialoogvenster

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

• het vervangen van het .jsp dossier (noem het na uw nieuwe component)

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

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

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 - dialoogvenster voor de klassieke gebruikersinterface
• cq:editConfig - hoe componenten zich gedragen in de bewerkingsomgeving (bijvoorbeeld 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 <path-to-component> (bijvoorbeeld /apps/geometrixx/components/myComponent ) toe te voegen aan de eigenschapcomponenten van het knooppunt /etc/designs/geometrixx/jcr:content/contentpage/par
• na de instructies in Toevoegend nieuwe componenten aan paragraafsystemen

Open in AEM WCM een pagina op uw website en voeg een alinea in van het type dat u 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:

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

  <contextPath>/ Test.html?wcmmode=design

• klikken op Ontwerpen in Sidekick

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.

Kopieer de standaard textielcomponent van /libs/foundation/components/textimage in de de componentenomslag van de Geometrixx, /apps/geometrixx/components, gebruikend texbeeld als naam van de doelknoop. (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:

• dialoogdefinitie: textimage/dialog
• componentscript: textimage/textimage.jsp
• configuratieknooppunt bewerken (slepen en neerzetten van elementen toestaan): textimage/cq:editConfig

Bewerk de metagegevens van de component:

• Componentnaam

  • jcr:description instellen op Text Image Component (Extended)
  • jcr:title instellen op Text Image (Extended)

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

  • componentGroup blijft ingesteld op General

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

  • sling:resourceSuperType instellen op foundation/components/textimage

Na deze stap ziet het componentknooppunt er als volgt uit:

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

Op deze manier wordt, wanneer een afbeelding naar de component op de pagina wordt neergezet, de eigenschap sling:resourceType van de uitgebreide component textielafbeelding 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 u maakt is het Geavanceerde lusje uit te breiden, toevoegend een drop-down lijst van de Positie van het Beeld, met opties links en juist:

• Laat de textimage/dialog eigenschappen onveranderd.

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).
  • Voeg een padeigenschap toe met respectievelijk waarden /libs/foundation/components/textimage/dialog/items/tab1.infinity.json en /libs/foundation/components/textimage/dialog/items/tab2.infinity.json .
  • Alle andere eigenschappen of subknooppunten verwijderen.

• Voor tab3:

  • Eigenschappen en subknooppunten ongewijzigd laten

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

  • Plaats de volgende eigenschappen (van typeKoord) voor de nieuwe tab3/items/position knoop:

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

  • Voeg een subknooppunt position/options van het type cq:WidgetCollection toe dat de twee opties voor plaatsing van de afbeelding vertegenwoordigt. Onder dit knooppunt worden twee knooppunten gemaakt, o1 en o2 van het type nt:unstructured .

  • Voor node position/options/o1 stelt u de eigenschappen in: text to Left en value to left.

  • Voor node position/options/o2 stelt u de eigenschappen text to Right en value to right in.

• Tabblad4 verwijderen.

De beeldpositie wordt voortgeduurd in inhoud als imagePosition bezit van de knoop die textimage paragraaf vertegenwoordigt. Na deze stappen ziet het dialoogvenster van de component er als volgt uit:

Breid het componentenmanuscript, textimage.jsp, met extra behandeling van de nieuwe parameter uit:

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

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

U gaat het benadrukte codefragment %><div class="image"><% met nieuwe code vervangen die een douanestijl voor deze markering produceert.

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

Kopieer de standaardafbeeldingscomponent van /libs/foundation/components/image naar de map met Geometrixx-componenten, /apps/geometrixx/components , waarbij de afbeelding als de naam van het doelknooppunt wordt gebruikt.

Bewerk de metagegevens van de component:

• Plaats jcr:titel aan Image (Extended)

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

Een eigenschap toevoegen:

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

Klik sparen allen. 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 hebt gemaakt.

Originele afbeeldingscomponent:

Uw nieuwe afbeeldingscomponent:

De component is nu gebruiksklaar.