Questa pagina descrive l’utilizzo dei widget nell’interfaccia classica, obsoleto in AEM 6.4.
Adobe consiglia di utilizzare la moderna interfaccia touch basata sull’interfaccia utente Coral e l’interfaccia utente Granite 🔗.
L'interfaccia basata su Web di Adobe Experience Manager utilizza AJAX e altre moderne tecnologie di browser per consentire la modifica e la formattazione WYSIWYG dei contenuti da parte degli autori direttamente sulla pagina Web.
Adobe Experience Manager (AEM) utilizza la libreria di widget ExtJS, che fornisce gli elementi dell'interfaccia utente altamente lucidi che funzionano su tutti i browser più importanti e consentono la creazione di esperienze dell'interfaccia utente di livello desktop.
Questi widget sono inclusi in AEM e, oltre ad essere utilizzati da AEM, possono essere utilizzati da qualsiasi sito Web creato utilizzando AEM.
Per un riferimento completo a tutti i widget disponibili in AEM è possibile fare riferimento alla documentazione API widget o all' elenco di xtype esistenti. Inoltre, molti esempi che mostrano come utilizzare il framework ExtJS sono disponibili sul sito Sencha, il proprietario del framework.
Questa pagina fornisce alcune informazioni su come utilizzare ed estendere i widget. La prima descrive come includere il codice lato client in una pagina. Vengono quindi descritti alcuni componenti di esempio creati per illustrare l’uso e l’estensione di base. Tali componenti sono disponibili nel pacchetto Using ExtJS Widgets su Package Share.
Il pacchetto include esempi di:
L'interfaccia classica di Adobe Experience Manager è basata su ExtJS 3.4.0.
Il codice javascript e del foglio di stile lato client deve essere inserito in una libreria client.
Per creare una libreria client:
Create un nodo sotto /apps/<project>
con le seguenti proprietà:
Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
Sotto clientlib
creare le cartelle css
e js
(nt:folder).
Sotto clientlib
creare i file css.txt
e js.txt
(nt:files). Tali file .txt elencano i file inclusi nella libreria.
Modifica js.txt
: deve iniziare con ' #base=js
' seguito dall'elenco dei file che saranno aggregati dal servizio di libreria client CQ, ad esempio:
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
Modifica css.txt
: deve iniziare con ' #base=css
' seguito dall'elenco dei file che saranno aggregati dal servizio di libreria client CQ, ad esempio:
#base=css
components.css
Sotto la cartella js
, inserite i file javascript che appartengono alla libreria.
Sotto la cartella css
, inserite i file .css
e le risorse utilizzate dai file css (ad esempio my_icon.png
).
La gestione dei fogli di stile descritti in precedenza è facoltativa.
Per includere la libreria client nell’jsp del componente pagina:
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 sul lato client.
per includere solo il codice JavaScript:
<ui:includeClientLib js="<category-name>"/>
Per ulteriori dettagli, fare riferimento alla descrizione del tag <ui:includeClientLib>.
In alcuni casi, una libreria client dovrebbe essere disponibile solo in modalità di creazione e dovrebbe essere esclusa in modalità di pubblicazione. Può essere realizzato come segue:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Per seguire le esercitazioni riportate in questa pagina, installate il pacchetto denominato Using ExtJS Widgets in un’istanza AEM locale e create una pagina di esempio in cui i componenti saranno inclusi. A questo scopo:
extjstraining
sotto /apps
nella directory archivio./apps/geometrixx/components/page/headlibs.jsp
e aggiungere la categoria cq.extjstraining
al tag <ui:includeClientLib>
esistente come segue:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
e chiamatela Utilizzo dei widget ExtJS.Gli esempi in questa pagina si basano 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.
Le finestre di dialogo vengono in genere utilizzate per modificare il contenuto, ma possono anche visualizzare solo informazioni. Un modo semplice per visualizzare una finestra di dialogo completa è accedere alla relativa rappresentazione in formato json. A tale scopo, indicate il browser in uso per:
https://localhost:4502/<path-to-dialog>.-1.json
Il primo componente del gruppo Using ExtJS Widgets nella barra laterale è denominato 1. Nozioni di base sulle finestre di dialogo e comprende quattro finestre di dialogo di base, integrate con widget predefiniti e senza logica JavaScript personalizzata. Le finestre di dialogo sono memorizzate sotto /apps/extjstraining/components/dialogbasics
. Le finestre di dialogo di base sono:
full
nodo): viene visualizzata una finestra con 3 schede, ciascuna con 2 campi di testo.singlepanel
nodo): viene visualizzata una finestra con 1 scheda con 2 campi di testo.multipanel
nodo): la visualizzazione è la stessa della finestra di dialogo Completa, ma viene creata in modo diverso.design
nodo): viene visualizzata una finestra con 2 schede. La prima scheda include un campo di testo, un menu a discesa e un'area di testo comprimibile. La seconda scheda dispone di un campo con 4 campi di testo e un campo comprimibile con 2 campi di testo.Includere il 1. Finestra di dialogo Nozioni di base nella pagina di esempio:
Il componente viene visualizzato come segue:
La finestra di dialogo Completa visualizza una finestra con tre schede, ciascuna con due campi di testo. Si tratta della finestra di dialogo predefinita del componente Dialog Basics. Le sue caratteristiche sono:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
.cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/full
https://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json
La finestra di dialogo viene visualizzata come segue:
Nella finestra di dialogo Pannello singolo viene visualizzata una finestra con una scheda contenente due campi di testo. Le sue caratteristiche sono:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
)cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)/apps/extjstraining/components/dialogbasics/singlepanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
Per utilizzare la finestra di dialogo Pannello singolo:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
e rinominarlo dialog
.La finestra di dialogo Pannello multiplo ha lo stesso display della finestra di dialogo Completa, ma è costruita in modo diverso. Le sue caratteristiche sono:
cq:Dialog
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
).cq:Panel
).cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
)./apps/extjstraining/components/dialogbasics/multipanel
https://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
Per utilizzare la finestra di dialogo Pannello multiplo:
La finestra di dialogo Rich presenta due schede. La prima scheda include un campo di testo, un menu a discesa e un'area di testo comprimibile. La seconda scheda presenta un campo con quattro campi di testo e un campo comprimibile con due campi di testo. Le sue caratteristiche sono:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
). [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
con [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
e un widget [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
con 3 opzioni, e di un [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
comprimibile con un widget [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
. [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
con 4 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widget e un dialogfieldset
comprimibile con 2 [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
widget./apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Per utilizzare la finestra di dialogo Rich:
Il secondo componente del gruppo Using ExtJS Widgets nella barra laterale è denominato 2. Dialoghi dinamici e comprende tre finestre di dialogo dinamiche costruite con widget predefiniti e con logica javascript personalizzata. Le finestre di dialogo sono memorizzate sotto /apps/extjstraining/components/dynamicdialogs
. Le finestre di dialogo dinamiche sono:
switchtabs
nodo): viene visualizzata una finestra con due schede. La prima scheda dispone di una selezione di pulsanti di scelta con tre opzioni: quando è selezionata un'opzione, viene visualizzata una scheda relativa all'opzione. La seconda scheda contiene due campi di testo.arbitrary
nodo): viene visualizzata una finestra con una scheda. Nella scheda è presente un campo da cui rilasciare o caricare una risorsa e un campo in cui sono visualizzate informazioni sulla pagina contenitore e sulla risorsa, se vi si fa riferimento.togglefield
nodo): viene visualizzata una finestra con una scheda. La scheda dispone di una casella di controllo: quando viene selezionato, viene visualizzato un set di campi con due campi di testo.Per includere il 2. Finestra di dialogo dinamica nella pagina di esempio:
Il componente viene visualizzato come segue:
Nella finestra di dialogo Switch Tabs viene visualizzata una finestra con due schede. La prima scheda dispone di una selezione di pulsanti di scelta con tre opzioni: quando è selezionata un'opzione, viene visualizzata una scheda relativa all'opzione. La seconda scheda contiene due campi di testo.
Le sue caratteristiche principali sono:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): 1 scheda di selezione, la seconda scheda dipende dalla selezione nella prima scheda (3 opzioni).cq:Panel
), ognuna con 2 campi di testo (tipo di nodo = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
). Viene visualizzata una sola scheda opzionale alla volta.switchtabs
in:/apps/extjstraining/components/dynamicdialogs/switchtabs
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
La logica è implementata tramite i listener di eventi e il codice javascript come segue:
Il nodo di dialogo ha un listener " beforeshow
" che nasconde tutte le schede facoltative prima della visualizzazione della finestra di dialogo:
beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"
dialog.items.get(0)
ottiene la scheda contenente il pannello di selezione e i 3 pannelli opzionali.
L'oggetto Ejst.x2
è definito nel file exercises.js
in:
/apps/extjstraining/clientlib/js/exercises.js
Nel metodo Ejst.x2.manageTabs()
, poiché il valore di index
è -1, tutte le schede opzionali sono nascoste (i va da 1 a 3).
Nella scheda di selezione sono presenti due listener: una che mostra la scheda selezionata quando la finestra di dialogo viene caricata (" loadcontent
" event) e una che mostra la scheda selezionata quando la selezione viene modificata (" selectionchanged
" event):
loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
Nel metodo Ejst.x2.showTab()
:
field.findParentByType('tabpanel')
ottiene la scheda contenente tutte le schede ( field
rappresenta il widget di selezione)
field.getValue()
ottiene il valore della selezione, ad esempio: tab2
Ejst.x2.manageTabs()
visualizza la scheda selezionata.
Ogni scheda opzionale ha un listener che nasconde la scheda sull’evento " render
":
render="function(tab){Ejst.x2.hideTab(tab);}"
Nel metodo Ejst.x2.hideTab()
:
tabPanel
è la scheda che contiene tutte le schede
index
è l'indice della scheda opzionale
tabPanel.hideTabStripItem(index)
nasconde la scheda
Viene visualizzato come segue:
Molto spesso viene visualizzata una finestra di dialogo con il contenuto del componente sottostante. La finestra di dialogo descritta qui, denominata finestra di dialogo Arbitrario, estrae il contenuto da un componente diverso.
La finestra di dialogo Arbitrario visualizza una finestra con una scheda. La scheda presenta due campi: uno per rilasciare o caricare una risorsa e uno per visualizzare informazioni sulla pagina contenitore e sulla risorsa, se vi è stato riferimento.
Le sue caratteristiche principali sono:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) con 1 pannello (tipo di nodo = cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
) e di un widget di disegno proprietario (tipo di nodo = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
in:/apps/extjstraining/components/dynamicdialogs/arbitrary
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
La logica è implementata tramite i listener di eventi e il codice javascript come segue:
Il widget di proprietà dispone di un listener " loadcontent
" che mostra informazioni sulla pagina contenente il componente e la risorsa a cui fa riferimento il widget smartfile quando il contenuto viene caricato:
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 es.: /content/geometrixx/it/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)
L'oggetto Ejst.x2
è definito nel file exercises.js
in:
/apps/extjstraining/clientlib/js/exercises.js
Nel metodo Ejst.x2.showInfo()
:
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 il codice HTML creato nella finestra di dialogo
Per utilizzare la finestra di dialogo Arbitrario:
La finestra di dialogo Attiva/Disattiva campi visualizza una finestra con una scheda. La scheda dispone di una casella di controllo: quando viene selezionato, viene visualizzato un set di campi con due campi di testo.
Le sue caratteristiche principali sono:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
) con 1 pannello (tipo di nodo = cq:Panel
).cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = [checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
) e di un widget di tipo di campo di dialogo comprimibile (tipo di nodo = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) nascosto per impostazione predefinita, con 2 widget di campo di testo (tipo di nodo = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
).togglefields
in:/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
La logica è implementata tramite i listener di eventi e il codice javascript come segue:
nella scheda di selezione sono presenti due listener: uno che mostra l’argomento di dialogo quando il contenuto viene caricato (" loadcontent
" event) e uno che mostra l’argomento di dialogo quando la selezione viene modificata (" selectionchanged
" event):
loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
L'oggetto Ejst.x2
è definito nel file exercises.js
in:
/apps/extjstraining/clientlib/js/exercises.js
Nel metodo Ejst.x2.toggleFieldSet()
:
box
è l'oggetto selezione
panel
è il pannello che contiene la selezione e i widget di dialogfieldset
fieldSet
è l'oggetto dialogfieldset
show
è il valore della selezione (true o false) in base a ' show
' viene visualizzato o meno il valore dialogfielddell
Per utilizzare la finestra di dialogo Attiva/disattiva campi:
I widget forniti con AEM dovrebbero includere la maggior parte dei casi di utilizzo. Tuttavia, a volte potrebbe essere necessario creare un widget personalizzato per soddisfare un requisito specifico del progetto. È possibile creare widget personalizzati estendendone quelli esistenti. Per iniziare a utilizzare questa personalizzazione, il pacchetto Using ExtJS Widgets include tre finestre di dialogo che utilizzano tre diversi widget personalizzati:
multifield
nodo) 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 widget multifield
fornito con un solo campo di testo, esso presenta tutte le caratteristiche del widget multifield
.treebrowse
nodo) visualizza una finestra con una scheda contenente un widget di ricerca percorso: quando si fa clic sulla freccia, si apre una finestra in cui è possibile esplorare una gerarchia e selezionare un elemento. Il percorso dell’elemento viene quindi aggiunto al campo percorso e viene mantenuto alla chiusura della finestra di dialogo.rteplugin
) che aggiunge un pulsante personalizzato all'Editor Rich Text per inserire del testo personalizzato nel testo principale. È costituito da un richtext
widget (RTE) e da una funzione personalizzata che viene aggiunta tramite il meccanismo plug-in RTE.I widget personalizzati e il plug-in sono inclusi nel componente denominato 3. Widget personalizzati del pacchetto Using ExtJS Widgets. Per includere questo componente nella pagina di esempio:
La finestra di dialogo Custom Multifield basata su widget visualizza una finestra con una scheda. La scheda dispone di un widget multicampo personalizzato che, a differenza di quello standard con un campo, ha due campi: un menu a discesa con due opzioni e un campo di testo.
Finestra di dialogo Custom Multifield basata sui widget:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contenente un pannello (tipo di nodo = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).multifield
(tipo di nodo = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
).multifield
dispone di un file config (tipo di nodo = nt:unstructured
, xtype = ejstcustom
, optionsProvider = Ejst.x3.provideOptions
) basato sul xtype personalizzato ' ejstcustom
':
' fieldconfig
' è un'opzione di configurazione dell'oggetto [CQ.form.MultiField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
.
' optionsProvider
' è una configurazione del widget ejstcustom
. Viene impostato con il metodo Ejst.x3.provideOptions
definito in exercises.js
in:
/apps/extjstraining/clientlib/js/exercises.js
e restituisce 2 opzioni.
multifield
in:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
Il widget multicampo personalizzato (xtype = ejstcustom
):
Ejst.CustomWidget
.CustomWidget.js
javascript in:/apps/extjstraining/clientlib/js/CustomWidget.js
[CQ.form.CompositeField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.CompositeField)
.hiddenField
(Campo di testo), allowField
(Casella combinata) e otherField
(Campo di testo)CQ.Ext.Component#initComponent
per aggiungere i 3 campi:
allowField
è un oggetto CQ.form. Selectiondi tipo 'select'. optionsProvider è una configurazione dell'oggetto Selection creata con la configurazione optionsProvider del CustomWidget definito nella finestra di dialogootherField
è un oggetto CQ.Ext.form. TextFieldsetValue
, 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'
.ejstcustom
’:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
La finestra di dialogo Custom Multifield basata su widget viene visualizzata come segue:
La finestra di dialogo personalizzata basata su widget Treebrowse visualizza una finestra con una scheda contenente un widget di ricerca del percorso personalizzato: quando si fa clic sulla freccia, si apre una finestra in cui è possibile esplorare una gerarchia e selezionare un elemento. Il percorso dell’elemento viene quindi aggiunto al campo percorso e viene mantenuto alla chiusura della finestra di dialogo.
Finestra di dialogo delle righe di testo personalizzata:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) contenente un pannello (tipo di nodo = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = ejstbrowse
)treebrowse
in:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
Il widget personalizzato della barra degli strumenti (xtype = ejstbrowse
):
Ejst.CustomWidget
.CustomBrowseField.js
javascript in:/apps/extjstraining/clientlib/js/CustomBrowseField.js
[CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [CQ.Ext.form.TriggerField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TriggerField)#onTriggerClick
per mostrare la finestra di ricerca quando si fa clic sulla freccia./bin/wcm/siteadmin/tree.json
.apps/extjstraining
".window
( [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
):
show
.ejstbrowse
’:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Per utilizzare la finestra di dialogo basata su widget Custom Treebrowse:
La finestra di dialogo basata sul plug-in Editor Rich Text (RTE) è una finestra di dialogo basata su Editor Rich Text con un pulsante personalizzato per inserire del testo personalizzato tra parentesi quadre. Il testo personalizzato può essere analizzato da una logica lato server (non implementata in questo esempio), ad esempio per aggiungere del testo definito nel percorso specificato:
Finestra di dialogo basata sul plug-in RTE:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
ha un nodo secondario inserttext
(tipo di nodo = nt:unstructured
) a cui viene assegnato il nome in base al plug-in. Ha una proprietà denominata features
, che definisce quale delle funzioni plug-in è disponibile per l'editor Rich Text.Il plug-in RTE:
Ejst.InsertTextPlugin
.InsertTextPlugin.js
javascript in:/apps/extjstraining/clientlib/js/InsertTextPlugin.js
[CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
. [CQ.form.rte.plugins.Plugin](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
e vengono sostituiti nel plug-in di implementazione:
getFeatures()
restituisce un array di tutte le funzioni che il plug-in rende disponibili.initializeUI()
aggiunge il nuovo pulsante alla barra degli strumenti dell’editor Rich Text.notifyPluginConfig()
visualizza titolo e testo quando il pulsante è tenuto premuto.execute()
viene chiamato quando si fa clic sul pulsante ed esegue l'azione del plug-in: viene visualizzata una finestra che consente di definire il testo da includere.insertText()
inserisce un testo utilizzando l'oggetto finestra di dialogo corrispondente Ejst.InsertTextPlugin.Dialog
(vedere dopo).executeInsertText()
viene chiamato dal apply()
metodo della finestra di dialogo, che viene attivato quando si fa clic sul pulsante OK.inserttext
’:CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
definisce la finestra di dialogo che viene aperta quando si fa clic sul pulsante del plug-in. La finestra di dialogo è composta da un pannello, un modulo, un campo di testo e due pulsanti (OK e Annulla).Per utilizzare la finestra di dialogo basata su Editor Rich Text (RTE) Plug-in:
La finestra di dialogo basata su Editor Rich Text (RTE) Plug-in viene visualizzata come segue:
Questo esempio mostra solo come implementare la parte client della logica: i segnaposto ([text]) devono quindi essere analizzati esplicitamente sul lato server (ad esempio nel JSP componente).
L'oggetto out-of-the-box [CQ.Ext.tree.TreePanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.tree.TreePanel)
fornisce una rappresentazione dell'interfaccia utente strutturata ad albero di dati strutturati. Il componente Panoramica struttura incluso nel pacchetto Using ExtJS Widgets mostra come utilizzare l'oggetto TreePanel
per visualizzare una struttura JCR sotto un determinato percorso. La finestra stessa può essere agganciata/sganciata. In questo esempio, la logica della finestra è incorporata nel jsp del componente tra i tag <script></script>.
Per includere il componente Panoramica albero nella pagina di esempio:
Il componente viene visualizzato come segue:
Il componente Panoramica struttura:
È definito in:
/apps/extjstraining/components/treeoverview
La finestra di dialogo consente di impostare le dimensioni della finestra e di agganciare o sganciare la finestra (vedere i dettagli di seguito).
Il componente jsp:
apps/extjstraining/components/treeoverview/content.jsp
Il codice javascript incorporato nel componente jsp:
tree
cercando di recuperare una finestra ad albero dalla pagina.treePanel
(CQ.Ext.tree.TreePanel):
treePanel
contiene i dati utilizzati per creare la finestra.
I dati vengono recuperati chiamando il servlet registrato in:
/bin/wcm/siteadmin/tree.json
beforeload
verifica che il nodo selezionato sia caricato.root
imposta il percorso apps/extjstraining
come radice della struttura.tree
( [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
) è impostato in base alla definizione predefinita treePanel
, ed è visualizzato con:tree.show();
Finestra di dialogo del componente:
cq:Dialog
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = [sizefield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#sizefield)
) e un widget di selezione (tipo di nodo = cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = radio
) con 2 opzioni (true/false)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Un pannello Griglia rappresenta i dati in un formato tabulare di righe e colonne. È composto dai seguenti elementi:
Il componente Panoramica griglia incluso nel pacchetto Using ExtJS Widgets mostra come visualizzare i dati in formato tabulare:
Per includere il componente Panoramica griglia nella pagina di esempio:
Il componente viene visualizzato come segue:
Nella versione standard, il componente Panoramica griglia visualizza una finestra con dati statici in formato tabulare. In questo esempio, la logica è incorporata nel jsp componente in due modi:
Il componente Panoramica sulla griglia:
/apps/extjstraining/components/gridoverview
Il componente jsp:
Recupera la larghezza, l'altezza e le proprietà agganciate dalla directory archivio.
Visualizza parte del testo come introduzione al formato dati della panoramica della griglia.
Fa riferimento al codice JavaScript che definisce l’oggetto GridPanel:
<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 utilizza l'oggetto GridPanel.
È definito in:
apps/extjstraining/components/gridoverview/content.jsp
Il codice javascript incorporato nel componente jsp:
grid
cercando di recuperare il componente finestra dalla pagina:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
non esiste, un oggetto CQ.Ext.grid.GridPanel ( gridPanel
) è definito chiamando il metodo getGridPanel()
(vedere di seguito). Questo metodo è definito in defaultgrid.js
.grid
è un [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
oggetto, basato sul GridPanel predefinito, ed è visualizzato: grid.show();
grid
esiste già, viene visualizzato in base alle proprietà larghezza, altezza e agganciato recuperate dall'archivio.Il file javascript ( defaultgrid.js
) a cui si fa riferimento nel componente jsp definisce il metodo getGridPanel()
che viene chiamato dallo script incorporato nel JSP e restituisce un oggetto [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
, basato su dati statici. La logica è la seguente:
myData
è un array di dati statici formattati come tabella di 5 colonne e 4 righe.store
è un CQ.Ext.data.Store
oggetto che consuma myData
.store
è caricato in memoria:store.load();
gridPanel
è un [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=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
Quando installate il pacchetto, il componente content.jsp
del componente Panoramica griglia visualizza una griglia basata su dati statici. È possibile modificare il componente per visualizzare una griglia con le seguenti caratteristiche:
test
sotto il nodo definito dal percorso visualizzato nella prima colonna.Come spiegato nella sezione precedente, l'oggetto window ottiene l'oggetto [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
chiamando il metodo getGridPanel()
definito nel file defaultgrid.js
in /apps/extjstraining/components/gridoverview/defaultgrid.js
. Il componente Grid Overview fornisce un'implementazione diversa per il metodo getGridPanel()
, definito nel file referencesearch.js
in /apps/extjstraining/components/gridoverview/referencesearch.js
. Cambiando il file .js a cui si fa riferimento nel jsp componente, la griglia sarà basata sui dati recuperati dal repository.
Cambiate il file .js a cui viene fatto riferimento nel componente jsp:
content.jsp
del componente, commentare la riga che include il file defaultgrid.js
, in modo che abbia il seguente aspetto:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
, in modo che abbia l’aspetto seguente:<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
Il componente viene visualizzato come segue:
Il codice javascript a cui si fa riferimento nel componente jsp ( referencesearch.js
) definisce il metodo getGridPanel()
chiamato dal componente jsp e restituisce un oggetto [CQ.Ext.grid.GridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
, basato sui dati recuperati dinamicamente dall'archivio. La logica in referencesearch.js
definisce alcuni dati dinamici come base per il GridPanel:
reader
è un [CQ.Ext.data.JsonReader](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
oggetto che legge la risposta del servlet in formato json per 3 colonne.cm
è un [CQ.Ext.grid.ColumnModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
oggetto per 3 colonne.editor: new [CQ.Ext.form.TextField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
è un [CQ.Ext.data.GroupingStore](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.data.GroupingStore)
oggetto:
/bin/querybuilder.json
" con alcuni parametri utilizzati per filtrare la queryreader
, definito in precedenzagridPanel
è un [CQ.Ext.grid.EditorGridPanel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
oggetto che può essere modificato:
si basa sul store
predefinito e sul modello di colonna cm
è possibile selezionare una sola riga alla volta:
sm: new [CQ.Ext.grid.RowSelectionModel](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
il listener afteredit
verifica che dopo la modifica di una cella nella colonna "Test":
test
' del nodo nel percorso definito dalla colonna "jcr:path" è impostata nella directory archivio con il valore della cellastore
, altrimenti viene rifiutato