L’interfaccia classica utilizza ExtJS per creare widget che forniscono l’aspetto dei componenti. A causa della natura di questi widget, ci sono alcune differenze tra il modo in cui i componenti interagiscono con l’interfaccia classica e il interfaccia touch.
Molti aspetti dello sviluppo di componenti sono comuni sia all’interfaccia utente classica che a quella touch, pertanto devi leggere Componenti AEM - Nozioni di base prima di utilizzando questa pagina, che tratta le specifiche dell’interfaccia classica.
Anche se sia HTL (HTML Template Language) che JSP possono essere utilizzati per lo sviluppo di componenti per l’interfaccia utente 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 l’AEM. Consulta HTL e Sviluppo di componenti AEM per confrontare i metodi.
La struttura di base di un componente è illustrata nella pagina Componenti AEM - Nozioni di base, che applica sia l’interfaccia utente touch-screen che quella classica. Anche se non devi utilizzare le impostazioni per l’interfaccia utente touch nel nuovo componente, può essere utile conoscerle quando si ereditano i componenti esistenti.
Gli script JSP o i servlet possono essere utilizzati per eseguire il rendering dei componenti. In base alle regole di elaborazione delle richieste di Sling, il nome dello script predefinito è:
<*componentname*>.jsp
Il file di script JSP global.jsp
viene utilizzato per fornire accesso rapido a oggetti specifici (ovvero, per accedere al contenuto) a qualsiasi file di script JSP utilizzato per il rendering di un componente.
Pertanto global.jsp
deve essere incluso in ogni componente che esegue il rendering dello script JSP in cui uno o più oggetti forniti in global.jsp
vengono utilizzati.
Posizione del valore predefinito global.jsp
è:
/libs/foundation/global.jsp
Il percorso /libs/wcm/global.jsp
, utilizzato nelle 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 richiesta racchiuso ( SlingHttpServletRequest
).slingResponse
- L'oggetto Risposta racchiuso ( SlingHttpServletResponse
).resource
- Oggetto Risorsa Sling ( slingRequest.getResource();
).resourceResolver
- Oggetto Resource Resolver Sling ( slingRequest.getResoucreResolver();
).currentNode
: nodo JCR risolto per la richiesta.log
- Il logger predefinito ().sling
: helper per script Sling.properties
- Proprietà della risorsa indirizzata ( resource.adaptTo(ValueMap.class);
).pageProperties
: proprietà della pagina della risorsa indirizzata.pageManager
- Il gestore delle pagine per l’accesso alle pagine di contenuti AEM ( resourceResolver.adaptTo(PageManager.class);
).component
- L'oggetto componente dell'attuale componente AEM.designer
- L'oggetto Designer per il recupero delle informazioni di progettazione ( resourceResolver.adaptTo(Designer.class);
).currentDesign
- La progettazione della risorsa indirizzata.currentStyle
- Stile della risorsa indirizzata.Esistono tre metodi per accedere al contenuto in WCM AEM:
Tramite l’oggetto proprietà introdotto in global.jsp
:
L'oggetto properties è un'istanza di ValueMap (vedere API Sling) 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 pagina.
Esempio: String paragraphTitle = properties.get("jcr:title", "no title");
utilizzato nello script di rendering di un componente paragrafo standard.
Attraverso il currentPage
oggetto introdotto in global.jsp
:
Il currentPage
L'oggetto è un'istanza di una pagina (vedere API AEM). La classe page fornisce alcuni metodi per accedere al contenuto.
Esempio: String pageTitle = currentPage.getTitle();
Via currentNode
oggetto introdotto in global.jsp
:
Il currentNode
l'oggetto è un'istanza di un nodo (vedere API JCR). Le proprietà di un nodo sono accessibili da getProperty()
metodo.
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, consulta il documento Librerie di tag.
I siti web moderni si basano fortemente sull’elaborazione lato client guidata da codice JavaScript e CSS complesso. L’organizzazione e l’ottimizzazione della trasmissione di questo codice possono essere un problema complesso.
Per risolvere questo problema, l’AEM fornisce Cartelle libreria lato client, che consente di memorizzare il codice lato client nell’archivio, organizzarlo in categorie e definire quando e come ogni categoria di codice deve essere trasmessa al client. Il sistema di librerie lato client si occupa quindi di generare i collegamenti corretti nella pagina web finale per caricare il codice corretto.
Consulta il documento Utilizzo delle librerie HTML lato client per ulteriori informazioni.
Il componente richiede una finestra di dialogo per consentire agli autori di aggiungere e configurare il contenuto.
Consulta Componenti AEM - Nozioni di base per ulteriori dettagli.
Puoi configurare il comportamento di modifica di un componente. Ciò 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 sia alle interfacce touch che a quelle classiche, anche se con alcune differenze specifiche.
Il il comportamento di modifica di un componente è configurato aggiungendo un cq:editConfig
nodo di tipo cq:EditConfig
sotto il nodo del componente (di tipo cq:Component
) e aggiungendo proprietà e nodi secondari specifici.
Consulta Utilizzo ed estensione dei widget ExtJS per ulteriori dettagli.
Consulta Utilizzo di xtypes per ulteriori dettagli.
Questa sezione descrive come creare componenti personalizzati e aggiungerli al sistema paragrafo.
Un modo rapido per iniziare è 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 l’AEM basati su componenti esistenti, è possibile copiare il componente, creare un file JavaScript per il nuovo componente e memorizzarlo in una posizione accessibile all’AEM (vedere anche Personalizzazione di componenti e altri elementi):
Utilizzando CRXDE Liti, crea una cartella di componenti in:
/ apps/<myProject>/components/<myComponent>
Ricrea la struttura del nodo come in libs, quindi copia 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
Modifica il jcr:title
per riflettere il nuovo nome.
Apri la nuova cartella dei componenti e apporta le modifiche necessarie. Elimina inoltre eventuali informazioni estranee nella cartella.
Puoi apportare modifiche quali:
aggiunta di un campo nella finestra di dialogo
cq:dialog
- finestra di dialogo per l’interfaccia touchdialog
- finestra di dialogo per l’interfaccia classicasostituzione del .jsp
file (assegna un nome al nuovo componente)
o rielaborazione completa dell'intero componente, se si desidera
Ad esempio, se acquisisci una copia del componente Testo standard, puoi aggiungere un campo aggiuntivo alla finestra di dialogo, quindi aggiornare .jsp
per elaborare l'input fornito.
Un componente per:
Una finestra di dialogo definita per l’interfaccia classica funziona all’interno dell’interfaccia touch.
Una finestra di dialogo definita per l’interfaccia touch non funziona nell’interfaccia classica.
A seconda dell’istanza e dell’ambiente di authoring in uso, potrebbe essere utile definire entrambi i tipi di finestra di dialogo per il componente.
Affinché il nuovo componente venga visualizzato, è necessario che sia presente e inizializzato correttamente uno dei seguenti nodi:
cq:dialog
- finestra di dialogo per l’interfaccia touchdialog
- finestra di dialogo per l’interfaccia classicacq:editConfig
- comportamento dei componenti nell'ambiente di modifica (ad esempio, trascinamento della selezione)design_dialog
- finestra di dialogo per la modalità progettazione (solo interfaccia classica)Attiva il nuovo componente nel sistema paragrafo:
<path-to-component>
(ad esempio, /apps/geometrixx/components/myComponent
) ai componenti proprietà del nodo /etc/designs/geometrixx/jcr:content/contentpage/par
In WCM per AEM, apri una pagina del sito web e inserisci un paragrafo del tipo appena creato per assicurarti che il componente funzioni correttamente.
Per visualizzare le statistiche sui tempi di caricamento delle pagine, puoi utilizzare Ctrl-Maiusc-U con ?debugClientLibs=true
impostato nell’URL.
Una volta sviluppato il componente, questo viene aggiunto al sistema paragrafo, che consente agli autori di selezionare e utilizzare il componente durante la modifica di una pagina.
Accedi a una pagina nell’ambiente di authoring che utilizza il sistema paragrafo, ad esempio <contentPath>/Test.html
.
Passa alla modalità Progettazione in uno dei modi seguenti:
aggiunta ?wcmmode=design
alla fine dell’URL e accedendo di nuovo, ad esempio:
<contextPath>/ Test.html?wcmmode=design
clic su Progettazione nel Sidekick
Ora sei in modalità progettazione e puoi modificare il sistema paragrafo.
Fai clic su Modifica.
Viene visualizzato un elenco di componenti appartenenti al sistema paragrafo. Viene elencato anche il nuovo componente.
I componenti possono essere attivati (o disattivati) per determinare quali sono offerti all’autore durante la modifica di una pagina.
Attiva il componente, quindi torna alla modalità di modifica normale per verificare che sia disponibile per l’uso.
Questa sezione fornisce un esempio di come estendere il componente standard per testo e immagini ampiamente utilizzato con una funzione di posizionamento dell’immagine configurabile.
L’estensione del componente testo e immagine consente agli editor di utilizzare tutte le funzionalità esistenti del componente e di avere un’opzione aggiuntiva per specificare il posizionamento dell’immagine:
Dopo aver esteso questo componente, puoi configurare il posizionamento dell’immagine tramite la finestra di dialogo del componente.
In questo esercizio sono descritte le tecniche riportate di seguito.
Questo esempio è destinato all’interfaccia classica.
Questo esempio si basa sul contenuto del Geometrixx, che non viene più fornito con AEM ed è stato sostituito da We.Retail. Consulta il documento Implementazione di riferimento We.Retail per informazioni su come scaricare e installare Geometrixx.
Per creare il componente, utilizzate il componente textimage standard come base e modificatelo. Il nuovo componente viene memorizzato nell'applicazione di esempio WCM per AEM Geometrixx.
Copia il componente textimage standard da /libs/foundation/components/textimage
nella cartella dei componenti di Geometrixx, /apps/geometrixx/components
, utilizzando textimage come nome del nodo di destinazione. Per copiare il componente, fai clic con il pulsante destro del mouse sul componente e seleziona Copia, quindi individua la directory di destinazione.
Per mantenere semplice questo esempio, passa al componente copiato ed elimina tutti i sottonodi del nuovo nodo textimage ad eccezione dei seguenti:
textimage/dialog
textimage/textimage.jsp
textimage/cq:editConfig
La definizione della finestra di dialogo dipende dall’interfaccia utente:
textimage/cq:dialog
textimage/dialog
Modifica i metadati del componente:
Nome componente
jcr:description
a Text Image Component (Extended)
jcr:title
a Text Image (Extended)
Gruppo, in cui il componente è elencato nella barra laterale (lascia invariato)
componentGroup
imposta su General
Componente padre del nuovo componente (il componente textimage standard)
sling:resourceSuperType
a foundation/components/textimage
Dopo questo passaggio, il nodo del componente si presenta così:
Modificare il sling:resourceType
proprietà del nodo di configurazione per la 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 nella pagina, il sling:resourceType
proprietà del componente textimage esteso impostata su: geometrixx/components/textimage.
Modificate la finestra di dialogo del componente per includere la nuova opzione. Il nuovo componente eredita le parti della finestra di dialogo che sono identiche a quelle dell'originale. L’unica aggiunta che effettui è quella di estendere Avanzate , aggiunta di un Posizione immagine elenco a discesa, con opzioni Sinistra e Destra:
textimage/dialog
proprietà invariate.Nota come textimage/dialog/items
dispone di quattro sottonodi, da tab1 a tab4, che rappresentano le quattro schede della finestra di dialogo textimage.
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:
Lascia le proprietà e i sottonodi senza modifiche
Aggiungere una definizione di campo a tab3/items
, posizione del nodo di tipo cq:Widget
Imposta le seguenti proprietà (di tipo String) per il nuovo tab3/items/position
nodo:
name
: ./imagePosition
xtype
: selection
fieldLabel
: Image Position
type
: select
Aggiungi sottonodo position/options
di tipo cq:WidgetCollection
per rappresentare le due scelte per il posizionamento dell'immagine e sotto di essa creare due nodi, o1 e o2 di tipo nt:unstructured
.
Per nodo position/options/o1
impostare le proprietà: text
a Left
e value
a left.
Per nodo position/options/o2
impostare le proprietà: text
a Right
e value
a right
.
Elimina scheda4.
La posizione dell'immagine viene mantenuta nel contenuto come imagePosition
proprietà del nodo che rappresenta textimage
paragrafo. Dopo questi passaggi, la finestra di dialogo del componente si presenta così:
Estendere 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);
Stai per sostituire il frammento di codice evidenziato %><div class="image"><% con un nuovo codice che genera 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"><%
Salva il componente nel repository. Il componente è pronto per il test.
Una volta sviluppato il componente, è possibile aggiungerlo al sistema paragrafo, consentendo agli autori di selezionare e utilizzare il componente durante la modifica di una pagina. Questi passaggi ti consentono di testare il componente.
Il componente memorizza il proprio contenuto in un paragrafo della pagina Azienda.
Per disabilitare questa funzionalità, utilizza il componente immagine standard come base e modificalo. Il nuovo componente viene memorizzato nell'applicazione di Geometrixx.
Copia il componente immagine standard da /libs/foundation/components/image
nella cartella dei componenti di Geometrixx, /apps/geometrixx/components
, utilizzando l’immagine come nome del nodo di destinazione.
Modifica i metadati del componente:
Image (Extended)
Accedi a /apps/geometrixx/components/image/dialog/items/image
.
Aggiungi una proprietà:
allowUpload
String
false
Clic Salva tutto. Il componente è pronto per il test.
Apri una pagina in Geometrixx, ad esempio Inglese/Azienda.
Passa alla modalità progettazione e attiva Immagine (estesa).
Tornate alla modalità di modifica e aggiungetela al sistema paragrafo. Nelle immagini successive puoi vedere le differenze tra il componente immagine originale e quello creato.
Componente immagine originale:
Nuovo componente immagine:
Il componente è ora pronto per l’uso.