L’interfaccia classica utilizza ExtJS per creare widget che forniscono l’aspetto dei componenti. A causa della natura di questi widget, vi sono alcune differenze tra il modo in cui i componenti interagiscono con l'interfaccia classica e l' interfaccia touch.
Molti aspetti dello sviluppo di componenti sono comuni sia all'interfaccia classica che all'interfaccia touch, pertanto è necessario leggere Componenti AEM - Le nozioni di base prima di utilizzando questa pagina, che tratta delle specifiche dell'interfaccia classica.
Sebbene sia il linguaggio HTL (HTML Template Language) che il linguaggio JSP possano essere utilizzati per lo sviluppo di componenti per l’interfaccia classica, questa pagina illustra lo sviluppo con JSP. Ciò è dovuto esclusivamente alla cronologia dell’utilizzo di JSP nell’interfaccia classica.
HTL è ora il linguaggio di script consigliato per AEM. Per confrontare i metodi, vedere HTL e Sviluppo di componenti AEM.
La struttura di base di un componente è coperta dalla pagina Componenti AEM - The Basics, che applica sia l'interfaccia touch sia l'interfaccia classica. Anche se non è necessario utilizzare le impostazioni per l’interfaccia touch nel nuovo componente, può essere utile essere consapevoli di tali impostazioni quando si eredita da componenti esistenti.
Gli script JSP o i servlet possono essere utilizzati per il rendering dei componenti. Secondo le regole di elaborazione della richiesta di Sling il nome per lo script predefinito è:
<*componentname*>.jsp
Il file di script JSP global.jsp
è utilizzato per fornire accesso rapido a oggetti specifici (ad esempio per accedere al contenuto) a qualsiasi file di script JSP utilizzato per il rendering di un componente.
Di conseguenza, global.jsp
deve essere incluso in ogni script JSP di rendering dei componenti in cui viene utilizzato uno o più oggetti forniti in global.jsp
.
Il percorso predefinito global.jsp
è:
/libs/foundation/global.jsp
Il percorso /libs/wcm/global.jsp
, utilizzato dalle versioni CQ 5.3 e precedenti, è ora obsoleto.
Di seguito sono elencati gli oggetti più importanti forniti dal valore predefinito global.jsp
:
Riepilogo:
<cq:defineObjects />
slingRequest
- L'oggetto di richiesta racchiusa ( SlingHttpServletRequest
).slingResponse
- L'oggetto di risposta racchiuso ( SlingHttpServletResponse
).resource
- L'Oggetto Sling Resource ( slingRequest.getResource();
).resourceResolver
- L'Oggetto Sling Resource Resolver ( slingRequest.getResoucreResolver();
).currentNode
- Il nodo JCR risolto per la richiesta.log
- Il logger Predefinito ().sling
- L'helper di script Sling.properties
- Le proprietà della risorsa indirizzata ( resource.adaptTo(ValueMap.class);
).pageProperties
- Proprietà della pagina della risorsa indirizzata.pageManager
- Gestione pagine per l'accesso AEM pagine di contenuto ( resourceResolver.adaptTo(PageManager.class);
).component
- L'oggetto componente del componente AEM corrente.designer
- L'oggetto designer per il recupero delle informazioni di progettazione ( resourceResolver.adaptTo(Designer.class);
).currentDesign
- La progettazione della risorsa indirizzata.currentStyle
- Lo stile della risorsa indirizzata.Esistono tre metodi per accedere al contenuto in AEM WCM:
Tramite l'oggetto properties introdotto in global.jsp
:
L'oggetto properties è un'istanza di ValueMap (vedere Sling API) e contiene tutte le proprietà della risorsa corrente.
Esempio: String pageTitle = properties.get("jcr:title", "no title");
utilizzato nello script di rendering di un componente di pagina.
Esempio: String paragraphTitle = properties.get("jcr:title", "no title");
utilizzato nello script di rendering di un componente paragrafo standard.
Tramite l'oggetto currentPage
introdotto in global.jsp
:
L'oggetto currentPage
è un'istanza di una pagina (vedere AEM API). La classe page fornisce alcuni metodi per accedere al contenuto.
Esempio: String pageTitle = currentPage.getTitle();
Mediante l'oggetto currentNode
introdotto in global.jsp
:
L'oggetto currentNode
è un'istanza di un nodo (vedere API JCR). È possibile accedere alle proprietà di un nodo tramite il metodo getProperty()
.
Esempio: String pageTitle = currentNode.getProperty("jcr:title");
Le librerie di tag CQ e Sling consentono di accedere a funzioni specifiche da utilizzare nello script JSP dei modelli e dei componenti.
Per ulteriori informazioni, vedere il documento Tag Libraries.
I siti Web moderni si affidano in larga misura all'elaborazione sul lato client basata su codice JavaScript e CSS complessi. L'organizzazione e l'ottimizzazione della gestione di questo codice può essere un problema complicato.
Per risolvere il problema, AEM fornisce Cartelle libreria lato client che consentono di memorizzare il codice lato client nell'archivio, organizzarlo in categorie e definire quando e come ciascuna categoria di codice deve essere distribuita al client. Il sistema di libreria lato client si occupa quindi di generare i collegamenti corretti nella pagina Web finale per caricare il codice corretto.
Per ulteriori informazioni, vedere il documento Utilizzo di librerie HTML lato client.
Per aggiungere e configurare il contenuto, sarà necessaria una finestra di dialogo per gli autori.
Per ulteriori informazioni, vedere AEM Componenti - The Basics.
È possibile configurare il comportamento di modifica di un componente. Questo include attributi quali le azioni disponibili per il componente, le caratteristiche dell’editor locale e i listener relativi agli eventi sul componente. La configurazione è comune a entrambe le interfacce touch e classica, anche se con alcune specifiche differenze.
Il comportamento di modifica di un componente è configurato aggiungendo un nodo cq:editConfig
di tipo cq:EditConfig
sotto il nodo del componente (di tipo cq:Component
) e aggiungendo proprietà e nodi secondari specifici.
Per ulteriori informazioni, vedere Utilizzo ed estensione dei widget ExtJS.
Per ulteriori informazioni, vedere Utilizzo di xtype.
Questa sezione descrive come creare componenti personalizzati e aggiungerli al sistema di paragrafi.
Un modo rapido per iniziare consiste nel copiare un componente esistente e quindi apportare le modifiche desiderate.
Un esempio di come sviluppare un componente è descritto in dettaglio in Estensione del componente Testo e immagine - Un esempio.
Per sviluppare nuovi componenti per AEM basati sul componente esistente, potete copiare il componente, creare un file javascript per il nuovo componente e memorizzarlo in una posizione accessibile a AEM (vedere anche Personalizzazione di componenti e altri elementi):
Con CRXDE Lite , create una nuova cartella di componenti in:
/ apps/<myProject>/components/<myComponent>
Ricreare la struttura del nodo come in libs, quindi copiare la definizione di un componente esistente, ad esempio il componente Testo. Ad esempio, per personalizzare la copia del componente Testo:
/libs/foundation/components/text
/apps/myProject/components/text
Modificate il jcr:title
in modo che rifletta il nuovo nome.
Apri la nuova cartella dei componenti e apporta le modifiche necessarie. Inoltre, eliminate eventuali informazioni estranee presenti nella cartella.
È possibile apportare modifiche quali:
aggiunta di un nuovo campo nella finestra di dialogo
cq:dialog
- finestra di dialogo per l’interfaccia touchdialog
- finestra di dialogo per l’interfaccia classicasostituzione del file .jsp
(denominarlo dopo il nuovo componente)
oppure rielaborare completamente l’intero componente, se lo si desidera
Ad esempio, se si prende una copia del componente Testo standard, è possibile aggiungere un campo aggiuntivo alla finestra di dialogo, quindi aggiornare il simbolo .jsp
per elaborare l'input immesso.
Un componente per:
All’interno dell’interfaccia touch viene visualizzata una finestra di dialogo definita per l’interfaccia classica.
Una finestra di dialogo definita per l’interfaccia touch non funziona nell’interfaccia classica.
A seconda dell’istanza e dell’ambiente di authoring, è possibile definire entrambi i tipi di dialogo per il componente.
Uno dei seguenti nodi deve essere presente e inizializzato correttamente affinché venga visualizzato il nuovo componente:
cq:dialog
- finestra di dialogo per l’interfaccia touchdialog
- finestra di dialogo per l’interfaccia classicacq:editConfig
- funzionamento dei componenti nell’ambiente di modifica (ad esempio trascinamento)design_dialog
- finestra di dialogo per la modalità di progettazione (solo interfaccia classica)Attivate il nuovo componente nel sistema paragrafo:
<path-to-component>
(ad esempio, /apps/geometrixx/components/myComponent
) ai componenti delle proprietà del nodo /etc/designs/geometrixx/jcr:content/contentpage/par
In AEM WCM, aprite una pagina nel sito Web e inserite un nuovo paragrafo del tipo appena creato per essere certi che il componente funzioni correttamente.
Per visualizzare le statistiche sui tempi di caricamento della pagina, potete utilizzare Ctrl+Maiusc+U - con ?debugClientLibs=true
impostato nell'URL.
Dopo che il componente è stato sviluppato, è possibile aggiungerlo al sistema di paragrafi, che consente agli autori di selezionare e utilizzare il componente durante la modifica di una pagina.
Accedere a una pagina all’interno dell’ambiente di authoring che utilizza il sistema paragrafo, ad esempio <contentPath>/Test.html
.
Passate alla modalità Progettazione:
aggiunta di ?wcmmode=design
alla fine dell'URL e successivo accesso, ad esempio:
<contextPath>/ Test.html?wcmmode=design
clic su Progettazione nella barra laterale
Ora è attiva la modalità di progettazione e può modificare il sistema di paragrafi.
Fai clic su Modifica.
Viene visualizzato un elenco dei componenti appartenenti al sistema paragrafo. È elencato anche il nuovo componente.
I componenti possono essere attivati (o disattivati) per determinare quali vengono offerti all’autore durante la modifica di una pagina.
Attivate il componente, quindi tornate alla modalità di modifica normale per verificare che sia disponibile per l’uso.
In questa sezione viene fornito un esempio su come estendere il componente standard per testo e immagini, ampiamente utilizzato, con una funzione di posizionamento delle immagini configurabile.
L’estensione al componente testo e immagine consente agli editor di utilizzare tutte le funzionalità esistenti del componente, più un’opzione aggiuntiva per specificare la posizione dell’immagine:
Dopo aver esteso questo componente, potete configurare la posizione dell’immagine mediante la finestra di dialogo del componente.
In questo esercizio sono descritte le seguenti tecniche:
Questo esempio è indirizzato all’interfaccia classica.
Questo esempio si basa sul contenuto di Geometrixx, che non viene più fornito con AEM, essendo stato sostituito da We.Retail. Per informazioni su come scaricare e installare Geometrixx, consultate il documento We.Retail Reference Implementation.
Per creare il nuovo componente, utilizzeremo il componente di textimage standard come base e lo modificheremo. Il nuovo componente viene memorizzato nell’applicazione di esempio di Geometrixx AEM WCM.
Copiate il componente di testo standard da /libs/foundation/components/textimage
nella cartella del componente di Geometrixx, /apps/geometrixx/components
, utilizzando il testo come nome del nodo di destinazione. (Copiate il componente spostandovi sul componente, facendo clic con il pulsante destro del mouse e selezionando Copia e accedendo alla directory di destinazione.)
Per semplificare questo esempio, andate al componente che avete copiato ed eliminate tutti i nodi secondari del nuovo nodo del testo, ad eccezione dei seguenti:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
La definizione della finestra di dialogo dipende dall’interfaccia:
textimage/cq:dialog
textimage/dialog
Modificate i metadati del componente:
Nome componente
jcr:description
su Text Image Component (Extended)
jcr:title
su Text Image (Extended)
Gruppo, dove il componente è elencato nella barra laterale (lasciare invariato)
componentGroup
impostato su General
Componente principale per il nuovo componente (il componente textimage standard)
sling:resourceSuperType
su foundation/components/textimage
Dopo questo passaggio, il nodo del componente si presenta come segue:
Modificare la proprietà sling:resourceType
del nodo di configurazione di modifica dell'immagine (proprietà: textimage/cq:editConfig/cq:dropTargets/image/parameters/sling:resourceType
) a geometrixx/components/textimage.
In questo modo, quando un'immagine viene rilasciata al componente sulla pagina, la proprietà sling:resourceType
del componente di testo esteso viene impostata su: geometrixx/components/textimage.
Modificare la finestra di dialogo del componente in modo da includere la nuova opzione. Il nuovo componente eredita le parti della finestra di dialogo che sono le stesse dell’originale. L'unica aggiunta che facciamo è estendere la scheda Avanzate, aggiungendo un elenco a discesa Posizione immagine, con le opzioni Left e Right:
textimage/dialog
.Tenere presente che textimage/dialog/items
ha quattro nodi secondari, da tab1 a tab4, che rappresentano le quattro schede della finestra di dialogo del testo.
Per le prime due schede (tab1 e tab2):
/libs/foundation/components/textimage/dialog/items/tab1.infinity.json
e /libs/foundation/components/textimage/dialog/items/tab2.infinity.json
rispettivamente.Per tab3:
Lasciare le proprietà e i nodi secondari senza modifiche
Aggiungere una nuova definizione di campo a tab3/items
, posizione del nodo di tipo cq:Widget
Impostare le seguenti proprietà (di tipo String) per il nuovo nodo tab3/items/position
:
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
Aggiungete il nodo secondario position/options
di tipo cq:WidgetCollection
per rappresentare le due scelte per la posizione dell'immagine, e al suo interno create due nodi, o1 e o2 di tipo nt:unstructured
.
Per il nodo position/options/o1
impostare le proprietà: text
a Left
e value
a left.
Per il nodo position/options/o2
impostare le proprietà: text
a Right
e value
a right
.
Elimina, scheda4.
La posizione dell'immagine è persistente nel contenuto come proprietà imagePosition
del nodo che rappresenta textimage
il paragrafo. Dopo questa procedura, la finestra di dialogo del componente si presenta come segue:
Estende lo script del componente, textimage.jsp
, con una gestione aggiuntiva del nuovo parametro:
Image image = new Image(resource, "image");
if (image.hasContent() || WCMMode.fromRequest(request) == WCMMode.EDIT) {
image.loadStyleData(currentStyle);
Sostituiremo il frammento di codice evidenziato %><div class="image"><% con un nuovo codice che genererà uno stile personalizzato per questo tag.
// 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"><%
Salvare il componente nell’archivio. Il componente è pronto per essere testato.
Una volta sviluppato il componente, è possibile aggiungerlo al sistema paragrafo, che consente agli autori di selezionare e utilizzare il componente durante la modifica di una pagina. Questi passaggi consentono di verificare il componente.
Il componente memorizza il contenuto in un paragrafo nella pagina Società.
Per disattivare questa funzionalità, utilizzeremo il componente immagine standard come base e lo modificheremo. Il nuovo componente viene memorizzato nell’applicazione di Geometrixx.
Copiate il componente immagine standard da /libs/foundation/components/image
nella cartella del componente Geometrixx, /apps/geometrixx/components
, utilizzando l'immagine come nome del nodo di destinazione.
Modificate i metadati del componente:
Image (Extended)
Accedi a /apps/geometrixx/components/image/dialog/items/image
.
Aggiungi una nuova proprietà:
allowUpload
String
false
Fare clic su Salva tutto. Il componente è pronto per essere testato.
Aprite una pagina in Geometrixx quali Inglese/Società.
Passate alla modalità di progettazione e attivate Immagine (estesa).
Tornate alla modalità di modifica e aggiungetela al sistema di paragrafi. Nelle immagini successive, potete vedere le differenze tra il componente immagine originale e quello appena creato.
Componente immagine originale:
Il nuovo componente immagine:
Il componente è ora pronto per l’uso.