Utilizzo ed estensione dei widget (interfaccia classica) using-and-extending-widgets-classic-ui

per includere sia il codice javascript che i fogli di stile:

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

dove <category-nameX> è il nome della libreria lato client.

per includere solo il codice javascript:

<ui:includeClientLib js="<category-name>"/>

la finestra di dialogo Completa ( full nodo): visualizza una finestra con 3 schede, ciascuna con 2 campi di testo.

la finestra di dialogo Pannello singolo( singlepanel nodo): visualizza una finestra con 1 scheda con 2 campi di testo.

finestra di dialogo Pannello multiplo( multipanel nodo): la visualizzazione è la stessa della finestra di dialogo Completa, ma viene creata in modo diverso.

finestra di dialogo Progettazione( design nodo): visualizza una finestra con 2 schede. La prima scheda contiene un campo di testo, un menu a discesa e un’area di testo comprimibile. La seconda scheda presenta un campo impostato con 4 campi di testo e un campo comprimibile impostato con 2 campi di testo.

È definito da un nodo: tipo di nodo = cq:Dialog, xtype = dialog.

Visualizza 3 schede (tipo di nodo = cq:Panel).

Ogni scheda ha 2 campi di testo (tipo di nodo = cq:Widget, xtype = textfield).

È definito dal nodo:

/apps/extjstraining/components/dialogbasics/full

Viene eseguito il rendering in formato JSON richiedendo:

http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

Visualizza una scheda (tipo di nodo = cq:Dialog, xtype = panel)

La scheda ha 2 campi di testo (tipo di nodo = cq:Widget, xtype = textfield)

È definito dal nodo:

/apps/extjstraining/components/dialogbasics/singlepanel

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

Un vantaggio rispetto al Finestra di dialogo completa è necessario ridurre la configurazione.

Utilizzo consigliato: per finestre di dialogo semplici che visualizzano informazioni o che contengono solo alcuni campi.

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = tabpanel).

Visualizza 3 schede (tipo di nodo = cq:Panel).

Ogni scheda ha 2 campi di testo (tipo di nodo = cq:Widget, xtype = textfield).

È definito dal nodo:

/apps/extjstraining/components/dialogbasics/multipanel

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json

Un vantaggio rispetto al Finestra di dialogo completa è che ha una struttura semplificata.

Utilizzo consigliato: per finestre di dialogo con più schede.

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 2 schede (tipo di nodo = cq:Panel).

La prima scheda ha un dialogfieldset widget con un textfield e selection widget con 3 opzioni e un comprimibile dialogfieldset con textarea widget.

La seconda scheda ha un dialogfieldset widget con 4 textfield widget e un dialogfieldset con 2 textfield widget.

È definito dal nodo:

/apps/extjstraining/components/dialogbasics/rich

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 2 schede (tipo di nodo = cq:Panel): 1 scheda di selezione, la seconda scheda dipende dalla selezione nella prima scheda (3 opzioni).

Ha 3 schede facoltative (tipo di nodo = cq:Panel), ciascuno ha 2 campi di testo (tipo di nodo = cq:Widget, xtype = textfield). Viene visualizzata una sola scheda opzionale alla volta.

È definito dal switchtabs nodo in:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

Il nodo di dialogo ha un " beforeshow" listener che nasconde tutte le schede facoltative prima che venga visualizzata la finestra di dialogo:

beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

dialog.items.get(0) ottiene il pannello a schede contenente il pannello di selezione e i 3 pannelli facoltativi.

La Ejst.x2 è definito nella exercises.js file in:

/apps/extjstraining/clientlib/js/exercises.js

In Ejst.x2.manageTabs() come valore di index è -1, tutte le schede facoltative sono nascoste (da 1 a 3).

La scheda Selezione dispone di 2 ascoltatori: che mostra la scheda selezionata quando la finestra di dialogo viene caricata (" loadcontent" event) e uno che mostra la scheda selezionata quando la selezione viene modificata (" selectionchanged" evento):

loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

In Ejst.x2.showTab() metodo:

field.findParentByType('tabpanel') ottiene la scheda che contiene tutte le schede ( field rappresenta il widget di selezione)

field.getValue() ottiene il valore della selezione, ad esempio: scheda2

Ejst.x2.manageTabs() visualizza la scheda selezionata.

Ogni scheda opzionale ha un listener che nasconde la scheda su " render" evento:

render="function(tab){Ejst.x2.hideTab(tab);}"

In Ejst.x2.hideTab() metodo:

tabPanel è la scheda che contiene tutte le schede

index è l'indice della scheda opzionale

tabPanel.hideTabStripItem(index) nasconde la scheda

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 1 widget per pannello a schede (tipo di nodo = cq:Widget, xtype = tabpanel) con 1 pannello (tipo di nodo = cq:Panel)

Il pannello ha un widget di smartfile (tipo di nodo = cq:Widget, xtype = smartfile) e un widget di disegno di proprietà (tipo di nodo = cq:Widget, xtype = ownerdraw)

È definito dal arbitrary nodo in:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

Il widget di disegno proprietario ha un " loadcontent" listener che mostra informazioni sulla pagina contenente il componente e la risorsa a cui fa riferimento il widget smartfile al caricamento del contenuto:

loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"

field è impostato con l'oggetto ownerdraw

path è impostato con il percorso del contenuto del componente (ad esempio: /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamic dialogs)

La Ejst.x2 è definito nella exercises.js file in:

/apps/extjstraining/clientlib/js/exercises.js

In Ejst.x2.showInfo() metodo:

pagePath è il percorso della pagina contenente il componente

pageInfo rappresenta le proprietà della pagina in formato json

reference è il percorso della risorsa di riferimento

metadata rappresenta i metadati della risorsa in formato json

ownerdraw.getEl().update(html); visualizza l’html creato nella finestra di dialogo

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 1 widget per pannello a schede (tipo di nodo = cq:Widget, xtype = tabpanel) con 1 pannello (tipo di nodo = cq:Panel).

Il pannello dispone di un widget di selezione/casella di controllo (tipo di nodo = cq:Widget, xtype = selection, tipo = checkbox) e un widget di forma comprimibile di tipo dialogfieldacquisto (tipo di nodo = cq:Widget, xtype = dialogfieldset) nascosta per impostazione predefinita, con 2 widget campo di testo (tipo di nodo = cq:Widget, xtype = textfield).

È definito dal togglefields nodo in:

/apps/extjstraining/components/dynamicdialogs/togglefields

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

la scheda di selezione include 2 ascoltatori: che mostra la forma dialogfield, quando il contenuto viene caricato (" loadcontent" event) e uno che mostra la forma dialogfiel, quando la selezione viene modificata (" selectionchanged" evento):

loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

La Ejst.x2 è definito nella exercises.js file in:

/apps/extjstraining/clientlib/js/exercises.js

In Ejst.x2.toggleFieldSet() metodo:

• box è l'oggetto selezionato
• panel è il pannello contenente la selezione e i widget di dialogfieldità
• fieldSet è l'oggetto dialogfielddell
• show è il valore della selezione (true o false)
• basato su ' show" viene visualizzato o meno il dialogfielddell

Finestra di dialogo Campo multiplo ( multifield node) visualizza una finestra con una scheda. La scheda dispone di un widget multicampo personalizzato con due campi: un menu a discesa con due opzioni e un campo di testo. Poiché si basa sul multifield widget (che ha solo un campo di testo), ha tutte le caratteristiche di multifield widget.

Finestra di dialogo Sfoglia struttura ( treebrowse node) visualizza una finestra con una scheda contenente un widget di navigazione del percorso: quando si fa clic sulla freccia, viene visualizzata una finestra in cui è possibile sfogliare una gerarchia e selezionare un elemento. Il percorso dell’elemento viene quindi aggiunto al campo percorso e viene mantenuto quando la finestra di dialogo viene chiusa.

una finestra di dialogo basata su plug-in per editor Rich Text ( rteplugin node) che aggiunge un pulsante personalizzato all’Editor Rich Text per inserire del testo personalizzato nel testo principale. È costituito da un richtext widget (RTE) e di una funzione personalizzata che viene aggiunta tramite il meccanismo plug-in RTE.

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 1 widget per pannello a schede (tipo di nodo = cq:Widget, xtype = tabpanel) contenente un pannello (tipo di nodo = cq:Widget, xtype = panel).

Il pannello ha un multifield widget (tipo di nodo = cq:Widget, xtype = multifield).

La multifield widget ha un file config (tipo di nodo = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) basata sull'xtype personalizzato ' ejstcustom':

• ' fieldconfig' è un'opzione di configurazione del CQ.form.MultiField oggetto.

• ' optionsProvider' è una configurazione del ejstcustom widget. È impostato con Ejst.x3.provideOptions metodo definito in exercises.js a:

  /apps/extjstraining/clientlib/js/exercises.js

  e restituisce 2 opzioni.

È definito dal multifield nodo in:

/apps/extjstraining/components/customwidgets/multifield

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

È un oggetto JavaScript denominato Ejst.CustomWidget.

È definito in CustomWidget.js file javascript in:

/apps/extjstraining/clientlib/js/CustomWidget.js

Estende il CQ.form.CompositeField widget.

Dispone di 3 campi: hiddenField (campo tessile), allowField (ComboBox) e otherField (Campo di testo)

Sostituzioni CQ.Ext.Component#initComponent per aggiungere i 3 campi:

• allowField è un CQ.form.Selection oggetto di tipo "select". optionsProvider è una configurazione dell'oggetto Selection creata con la configurazione optionsProvider del Widget personalizzato definito nella finestra di dialogo
• otherField è un CQ.Ext.form.TextField oggetto

Sostituisce i metodi setValue, getValue e getRawValue di CQ.form.CompositeField per impostare e recuperare il valore di CustomWidget con il formato:

<allowField value>/<otherField value>, e.g.: 'Bla1/hello'.

Si registra come ' ejstcustomxtype:

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = dialog).

Visualizza 1 widget per pannello a schede (tipo di nodo = cq:Widget, xtype = tabpanel) contenente un pannello (tipo di nodo = cq:Widget, xtype = panel).

Il pannello ha un widget personalizzato (tipo di nodo = cq:Widget, xtype = ejstbrowse)

È definito dal treebrowse nodo in:

/apps/extjstraining/components/customwidgets/treebrowse

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

È un oggetto JavaScript denominato Ejst.CustomWidget.

È definito in CustomBrowseField.js file javascript in:

/apps/extjstraining/clientlib/js/CustomBrowseField.js

Estensioni CQ.Ext.form.TriggerField.

Definisce una finestra di ricerca denominata browseWindow.

Sostituzioni CQ.Ext.form.TriggerField per visualizzare la finestra Sfoglia quando si fa clic sulla freccia.

Definisce un CQ.Ext.tree.TreePanel oggetto:

• Ottiene i suoi dati chiamando il servlet registrato in /bin/wcm/siteadmin/tree.json.
• La sua radice è " apps/extjstraining".

Definisce un window oggetto (CQ.Ext.Window):

• Basato sul pannello predefinito.
• Ha OK che imposta il valore del percorso selezionato e nasconde il pannello.

La finestra è ancorata sotto la Percorso campo .

Il percorso selezionato viene passato dal campo Sfoglia alla finestra in show evento.

Si registra come ' ejstbrowsextype:

CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

È definito dal nodo rteplugin in:

/apps/extjstraining/components/customwidgets/rteplugin

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

La rtePlugins nodo figlio inserttext (tipo di nodo = nt:unstructured) che prende il nome dal plug-in. Ha una proprietà denominata features, che definisce quali delle funzioni plug-in sono disponibili per l’editor Rich Text.

È un oggetto JavaScript denominato Ejst.InsertTextPlugin.

È definito in InsertTextPlugin.js file javascript in:

/apps/extjstraining/clientlib/js/InsertTextPlugin.js

Estende il CQ.form.rte.plugins.Plugin oggetto.

I seguenti metodi definiscono le CQ.form.rte.plugins.Plugin e sono ignorati nel plug-in di implementazione:

• getFeatures() restituisce un array di tutte le funzionalità rese disponibili dal plug-in.
• initializeUI() aggiunge il nuovo pulsante alla barra degli strumenti dell’editor Rich Text.
• notifyPluginConfig() visualizza il titolo e il testo quando si passa il mouse sul pulsante.
• execute() viene chiamato quando si fa clic sul pulsante ed esegue l’azione plug-in: visualizza una finestra utilizzata per definire il testo da includere.

insertText() inserisce un testo utilizzando l’oggetto finestra di dialogo corrispondente Ejst.InsertTextPlugin.Dialog (vedere in seguito).

executeInsertText() viene chiamato da apply() del metodo della finestra di dialogo, che viene attivato quando il OK fai clic su .

Si registra come ' inserttextplugin:

CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

la Ejst.InsertTextPlugin.Dialog l’oggetto definisce la finestra di dialogo che viene aperta quando si fa clic sul pulsante del plug-in. La finestra di dialogo è costituita da un pannello, un modulo, un campo di testo e due pulsanti (OK e Annulla).

È definito in:

/apps/extjstraining/components/treeoverview

La finestra di dialogo consente di impostare le dimensioni della finestra e di agganciare/sganciare la finestra (vedere i dettagli di seguito).

Recupera la larghezza, l’altezza e le proprietà ancorate dall’archivio.

Visualizza del testo sul formato dei dati della panoramica della struttura.

Incorpora la logica della finestra nel componente jsp tra i tag javascript.

È definito in:

apps/extjstraining/components/treeoverview/content.jsp

Definisce un tree cercando di recuperare una finestra ad albero dalla pagina.

Se la finestra che mostra la struttura non esiste, treePanel (CQ.Ext.tree.TreePanel) viene creato:

• treePanel contiene i dati utilizzati per creare la finestra.

• I dati vengono recuperati chiamando il servlet registrato in:

  /bin/wcm/siteadmin/tree.json

La beforeload listener si assicura che il nodo selezionato sia caricato.

La root l'oggetto imposta il percorso apps/extjstraining come radice dell'albero.

tree (CQ.Ext.Window) è impostata in base alla treePanele viene visualizzato con:

tree.show();

Se la finestra esiste già, viene visualizzata in base alla larghezza, all’altezza e alle proprietà ancorate recuperate dall’archivio.

Visualizza 1 scheda con 2 campi per impostare le dimensioni (larghezza e altezza) della finestra della panoramica della struttura e 1 campo per agganciare/sganciare la finestra

È definito da un nodo (tipo di nodo = cq:Dialog, xtype = panel).

Il pannello ha un widget di campo di dimensione (tipo di nodo = cq:Widget, xtype = sizefield) e un widget di selezione (tipo di nodo = cq:Widget, xtype = selection, tipo = radio) con 2 opzioni (true/false)

È definito dal nodo di dialogo in:

/apps/extjstraining/components/treeoverview/dialog

Viene eseguito il rendering in formato json richiedendo:

http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

Visualizza come segue:

È definito in:

/apps/extjstraining/components/gridoverview

La finestra di dialogo consente di impostare le dimensioni della finestra e di agganciare/sganciare la finestra.

Recupera la larghezza, l’altezza e le proprietà ancorate dall’archivio.

Visualizza parte di testo come introduzione al formato dati della panoramica della griglia.

References javascript code that defines the GridPanel object:

<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

defaultgrid.js definisce alcuni dati statici come base per l'oggetto GridPanel.

Incorpora il codice javascript tra i tag javascript che definisce l'oggetto Window che consuma l'oggetto GridPanel.

È definito in:

apps/extjstraining/components/gridoverview/content.jsp

Definisce la grid tentando di recuperare il componente finestra dalla pagina:

var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

Se grid non esiste, un CQ.Ext.grid.GridPanel oggetto ( gridPanel) viene definita chiamando la variabile getGridPanel() metodo (vedi di seguito). Questo metodo è definito in defaultgrid.js.

grid è un CQ.Ext.Windowin base al GridPanel predefinito e viene visualizzato: grid.show();

Se grid esiste già, viene visualizzato in base alla larghezza, all’altezza e alle proprietà ancorate recuperate dall’archivio.

myData è una matrice di dati statici formattata come una tabella di 5 colonne e 4 righe.

store è un CQ.Ext.data.Store oggetto che consuma myData.

store viene caricato in memoria:

store.load();

gridPanel è un CQ.Ext.grid.GridPanel oggetto che consuma store:

• le larghezze delle colonne vengono sempre riproporzioni:

  forceFit: true

• è possibile selezionare una sola riga alla volta:

  singleSelect:true

reader è un CQ.Ext.data.JsonReader oggetto che legge la risposta del servlet in formato json per 3 colonne.

cm è un CQ.Ext.grid.ColumnModel oggetto per 3 colonne.

Le celle della colonna "Test" possono essere modificate in quanto sono definite con un editor:

editor: new CQ.Ext.form.TextField({})

le colonne sono ordinabili:

cm.defaultSortable = true;

store è un CQ.Ext.data.GroupingStore oggetto:

• ottiene i suoi dati chiamando il servlet registrato in " /bin/querybuilder.json" con alcuni parametri utilizzati per filtrare la query
• si basa su reader, precedentemente definito
• la tabella viene ordinata in base al jcr:path colonna in ordine crescente

gridPanel è un CQ.Ext.grid.EditorGridPanel oggetto modificabile:

• si basa sul store e sul modello a colonne cm

• è possibile selezionare una sola riga alla volta:

  sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

• la afteredit il listener si accerta che dopo una cella in "Test" la colonna è stata modificata:

  • la proprietà ' test' del nodo nel percorso definito dal "jcr:path" colonna impostata nel repository con il valore della cella
  • se POST ha esito positivo, il valore viene aggiunto al store oggetto, altrimenti viene rifiutato