Cette page décrit l’utilisation des widgets dans l’IU classique, qui était obsolète dans AEM 6.4.
Adobe vous recommande d’utiliser l’IU tactile moderne basée sur l’IU Coral et l’IU Granite.
L’interface web d’Adobe Experience Manager utilise AJAX et d’autres technologies modernes intégrées dans les navigateurs pour activer l’édition tel écran tel écrit (WYSIWYG) et permettre aux auteurs de mettre en forme le contenu directement sur la page web.
Adobe Experience Manager (AEM) utilise la bibliothèque de widgets ExtJS, laquelle fournit des éléments d’interface utilisateur particulièrement soignés compatibles avec les principaux navigateurs du marché et permettent de créer des interfaces utilisateur dignes des ordinateurs de bureau.
Ces widgets sont inclus dans AEM et, en plus d’être utilisés par AEM, ils peuvent l’être par tout site web créé à l’aide de cette solution.
Pour consulter la liste complète de tous les widgets disponibles dans AEM, vous pouvez vous reporter à la documentation API des widgets ou à la liste des xtypes existants. En outre, de nombreux exemples montrant comment utiliser la structure ExtJS sont disponibles sur le site de Sencha, le propriétaire de la structure.
Cette page vous livre quelques pistes concernant l’utilisation et l’extension des widgets. Elle vous explique, tout d’abord, comment inclure du code côté client dans une page. Elle présente ensuite quelques exemples de composants qui ont été créés pour illustrer des scénarios d’utilisation et d’extension de base. Ces composants sont disponibles dans le module Utilisation de widgets ExtJS sur Package Share.
Ce module contient des exemples des éléments suivants :
L’IU classique d’Adobe Experience Manager repose sur ExtJS 3.4.0.
Le code JavaScript côté client et le code de feuille de style doivent être placés dans une bibliothèque cliente.
Pour créer une bibliothèque cliente, procédez comme suit :
Créez un noeud sous /apps/<project>
avec les propriétés suivantes :
Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
Sous clientlib
, créez les dossiers css
et js
(nt:folder).
Sous clientlib
, créez les fichiers css.txt
et js.txt
(nt:files). Ces fichiers .txt répertorient les fichiers qui sont inclus dans la bibliothèque.
Modifier js.txt
: il doit commencer par ' #base=js
' suivi de la liste des fichiers qui seront agrégés par le service de bibliothèque cliente CQ, par exemple :
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
Modifier css.txt
: il doit commencer par ' #base=css
' suivi de la liste des fichiers qui seront agrégés par le service de bibliothèque cliente CQ, par exemple :
#base=css
components.css
Sous le dossier js
, placez les fichiers JavaScript appartenant à la bibliothèque.
Sous le dossier css
, placez les fichiers .css
et les ressources utilisées par les fichiers CSS (par exemple, my_icon.png
).
La gestion des feuilles de style décrites précédemment est facultative.
Pour inclure la bibliothèque cliente dans le fichier jsp du composant de page :
pour inclure le code JavaScript et les feuilles de style :
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
où
<category-nameX>
est le nom de la bibliothèque côté client.
pour inclure uniquement le code JavaScript :
<ui:includeClientLib js="<category-name>"/>
Pour plus d’informations, consultez la description de la balise <ui:includeClientLib>.
Dans certains cas, une bibliothèque cliente ne doit être disponible que dans le mode de création et doit être exclue du mode de publication. Vous pouvez y parvenir comme suit :
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Pour suivre les tutoriels de cette page, installez le package appelé Utilisation des widgets ExtJS dans une instance d’AEM locale et créez un exemple de page dans lequel les composants seront inclus. Pour ce faire :
extjstraining
sous /apps
dans le référentiel./apps/geometrixx/components/page/headlibs.jsp
et ajoutez la catégorie cq.extjstraining
à la balise <ui:includeClientLib>
existante comme suit :%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
et appelez-la à l’aide des widgets ExtJS.Les exemples de cette page sont basés sur l’échantillon de contenu Geometrixx. Celui-ci n’est plus fourni avec AEM et a été remplacé par We.Retail. Consultez le document Implémentation de référence We.Retail pour savoir comment télécharger et installer Geometrixx.
Les boîtes de dialogue sont généralement utilisées pour modifier du contenu. Cependant, elles peuvent également afficher simplement des informations. Pour afficher une boîte de dialogue complète, une méthode simple consiste à accéder à sa représentation au format json. Pour ce faire, faites pointer le navigateur vers :
https://localhost:4502/<path-to-dialog>.-1.json
Le premier composant du groupe Utilisation des widgets ExtJS dans le sidekick se nomme 1. Éléments de base de boîte de dialogue. Il comprend quatre boîtes de dialogue de base qui sont constituées de widgets prêts à l’emploi, sans logique JavaScript personnalisée. Les boîtes de dialogue sont stockées sous /apps/extjstraining/components/dialogbasics
. Les boîtes de dialogue de base sont les suivantes :
full
) : elle affiche une fenêtre avec 3 onglets ayant chacun 2 champs de texte.singlepanel
) : elle affiche une fenêtre avec 1 seul onglet comprenant 2 champs de texte.multipanel
) : l’affichage est identique à celui de la boîte de dialogue complète, mais la construction est différente.design
) : elle affiche une fenêtre avec 2 onglets. Le premier onglet contient un champ de texte, un menu déroulant et une zone de texte réductible. Le deuxième onglet comprend un jeu de champs avec 4 champs de texte et un jeu de champs réductible avec 2 champs de texte.Insérez le composant 1. Éléments de base de boîte de dialogue dans l’exemple de page :
Le composant se présente sous la forme suivante :
La boîte de dialogue Complète affiche une fenêtre avec trois onglets ayant chacun deux champs de texte. Il s’agit de la boîte de dialogue par défaut du composant Éléments de base de boîte de dialogue. Ses caractéristiques sont les suivantes :
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 boîte de dialogue se présente comme suit :
La boîte de dialogue à un seul panneau affiche une fenêtre avec un seul onglet comprenant deux champs de texte. Ses caractéristiques sont les suivantes :
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
Pour utiliser la boîte de dialogue à un seul panneau, procédez comme suit :
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
et renommez-la dialog
.Dans le cas de la boîte de dialogue à plusieurs panneaux, l’affichage est identique à celui de la boîte de dialogue complète, mais la construction est différente. Ses caractéristiques sont les suivantes :
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
Pour utiliser la boîte de dialogue à plusieurs panneaux :
La boîte de dialogue Riche affiche une fenêtre avec deux onglets. Le premier onglet contient un champ de texte, un menu déroulant et une zone de texte réductible. Le deuxième onglet comprend un jeu de champs avec quatre champs de texte et un jeu de champs réductible avec deux champs de texte. Ses caractéristiques sont les suivantes :
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)
avec un widget [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
et un widget [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
avec 3 options, et un widget [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
réductible avec 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)
avec 4 widgets [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
et un dialogfieldset
réductible avec 2 widgets [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
./apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
Pour utiliser la boîte de dialogue Riche, procédez comme suit :
Le deuxième composant du groupe Utilisation des widgets ExtJS dans le sidekick se nomme 2. Boîtes de dialogue dynamiques. Il comprend trois boîtes de dialogue dynamiques qui sont constituées de widgets prêts à l’emploi, avec une logique JavaScript personnalisée. Les boîtes de dialogue sont stockées sous /apps/extjstraining/components/dynamicdialogs
. Les boîtes de dialogue dynamiques sont les suivantes :
switchtabs
) : elle affiche une fenêtre avec deux onglets. Le premier onglet comprend trois cases d’option : lorsqu’une option est sélectionnée, l’onglet correspondant est affiché. Le deuxième onglet comprend deux champs de texte.arbitrary
arbitrary) : elle affiche une fenêtre avec un seul onglet. Cet onglet se compose d’une zone permettant de déposer ou de télécharger une ressource, ainsi que d’une section affichant des informations sur la page et sur la ressource, le cas échéant.togglefield
) : il affiche une fenêtre avec un seul onglet. Cet onglet comprend une case à cocher : lorsque cette case est cochée, un jeu de champs composé de deux champs de texte est affiché.Pour inclure la balise 2. Boîtes de dialogue dynamiques dans l’exemple de page :
Le composant se présente sous la forme suivante :
La boîte de dialogue Switch Tabs affiche une fenêtre avec deux onglets. Le premier onglet comprend trois cases d’option : lorsqu’une option est sélectionnée, l’onglet correspondant est affiché. Le deuxième onglet comprend deux champs de texte.
Ses caractéristiques principales sont les suivantes :
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
) : 1 onglet de sélection, le deuxième onglet dépend de la sélection effectuée dans le premier onglet (3 options).cq:Panel
), chacun a 2 champs de texte (type de noeud = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
). Un seul onglet facultatif est affiché à la fois.switchtabs
à l’emplacement suivant :/apps/extjstraining/components/dynamicdialogs/switchtabs
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
Cette logique est implémentée par le biais d’écouteurs d’événements et de code JavaScript comme suit :
Le noeud dialog comporte un écouteur “beforeshow
” qui masque tous les onglets facultatifs avant l’affichage de la boîte de dialogue :
beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"
dialog.items.get(0)
récupère le panneau d’onglets qui contient le panneau de sélection et les trois panneaux facultatifs.
L’objet Ejst.x2
est défini dans le fichier exercises.js
à l’emplacement suivant :
/apps/extjstraining/clientlib/js/exercises.js
Dans la méthode Ejst.x2.manageTabs()
, comme la valeur de index
est -1, tous les onglets facultatifs sont masqués (i passe de 1 à 3).
L’onglet de sélection comporte deux écouteurs : un qui affiche l’onglet sélectionné lors du chargement de la boîte de dialogue (" loadcontent
") et un qui affiche l’onglet sélectionné lors de la modification de la sélection (" selectionchanged
" événement) :
loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
Dans la méthode Ejst.x2.showTab()
:
field.findParentByType('tabpanel')
obtient le panneau d’onglets qui contient tous les onglets ( field
représente le widget de sélection).
field.getValue()
obtient la valeur de la sélection, par exemple : tab2
Ejst.x2.manageTabs()
affiche l’onglet sélectionné.
Chaque onglet facultatif comporte un écouteur qui masque l’onglet sur l’événement " render
" :
render="function(tab){Ejst.x2.hideTab(tab);}"
Dans la méthode Ejst.x2.hideTab()
:
tabPanel
est le panneau d’onglets qui contient tous les onglets.
index
est l’index de l’onglet facultatif.
tabPanel.hideTabStripItem(index)
masque l’onglet
Elle se présente comme suit :
Très souvent, une boîte de dialogue affiche du contenu provenant d’un composant sous-jacent. La boîte de dialogue décrite ici, baptisée Arbitrary, extrait le contenu d’un autre composant.
La boîte de dialogue Arbitrary affiche une fenêtre avec un seul onglet. Cet onglet comprend deux zones : l’une permettant de déposer ou de télécharger une ressource, et une autre affichant des informations sur la page et sur la ressource, le cas échéant.
Ses caractéristiques principales sont les suivantes :
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)
) avec 1 panneau (type de noeud = cq:Panel
).cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
) et un widget ownerdraw (type de noeud = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
).arbitrary
à l’emplacement suivant :/apps/extjstraining/components/dynamicdialogs/arbitrary
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
Cette logique est implémentée par le biais d’écouteurs d’événements et de code JavaScript comme suit :
Le widget ownerdraw comporte un écouteur “loadcontent
” qui affiche des informations sur la page contenant le composant et la ressource référencée par le widget smartfile lors du chargement du contenu :
loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
est défini avec l’objet ownerdraw
path
est défini avec le chemin d’accès au contenu du composant (par exemple : /content/geometrixx/fr/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)
L’objet Ejst.x2
est défini dans le fichier exercises.js
à l’emplacement suivant :
/apps/extjstraining/clientlib/js/exercises.js
Dans la méthode Ejst.x2.showInfo()
:
pagePath
est le chemin d’accès de la page contenant le composant.
pageInfo
représente les propriétés de page au format json ;
reference
est le chemin d’accès de la ressource référencée.
metadata
représente les métadonnées de la ressource au format json ;
ownerdraw.getEl().update(html);
affiche le code HTML créé dans la boîte de dialogue
Pour utiliser la boîte de dialogue Arbitrary, procédez comme suit :
La boîte de dialogue Toggle Fields) affiche une fenêtre avec un seul onglet. Cet onglet comprend une case à cocher : lorsque cette case est cochée, un jeu de champs composé de deux champs de texte est affiché.
Ses caractéristiques principales sont les suivantes :
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)
) avec 1 panneau (type de noeud = 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)
) et un widget dialogfieldset réductible (type de noeud = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) qui est masqué par défaut, avec 2 widgets textfield (type de noeud = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
).togglefields
à l’emplacement suivant :/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
Cette logique est implémentée par le biais d’écouteurs d’événements et de code JavaScript comme suit :
l’onglet de sélection comporte deux écouteurs : un qui affiche le dialogfieldset lors du chargement du contenu (" loadcontent
") et un qui affiche le dialogfieldset lors de la modification de la sélection (" selectionchanged
") :
loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
L’objet Ejst.x2
est défini dans le fichier exercises.js
à l’emplacement suivant :
/apps/extjstraining/clientlib/js/exercises.js
Dans la méthode Ejst.x2.toggleFieldSet()
:
box
est l’objet de sélection
panel
est le panneau contenant la sélection et les widgets dialogfieldset
fieldSet
est l’objet dialogfieldset
show
est la valeur de la sélection (true ou false) basée sur " show
", le champ dialogfieldset est affiché ou non.
Pour utiliser la boîte de dialogue Toggle Fields :
Les widgets prêts à l’emploi fournis avec AEM couvrent normalement la plupart des scénarios d’utilisation. Cependant, il peut parfois être nécessaire de créer un widget personnalisé pour couvrir une exigence spécifique au projet. Des widgets personnalisés peuvent être créés en étendant des widgets existants. Pour vous aider à débuter avec ce type de personnalisation, le module Utilisation des widgets ExtJS comprend trois boîtes de dialogue qui utilisent trois widgets personnalisés différents :
multifield
) affiche une fenêtre avec un seul onglet. Cet onglet comprend un widget multifield personnalisé qui comporte deux zones : un menu déroulant avec deux options et un champ de texte. Comme il est basé sur le widget multifield
prêt à l’emploi (qui ne comporte qu’un champ de texte), il possède toutes les fonctionnalités du widget multifield
.treebrowse
) affiche une fenêtre avec un seul onglet contenant un widget d’exploration du chemin : lorsque vous cliquez sur la flèche, une fenêtre s’ouvre dans laquelle vous pouvez parcourir une hiérarchie et sélectionner un élément. Le chemin d’accès de l’élément est ensuite ajouté au champ du chemin et conservé lorsque la boîte de dialogue est fermée.rteplugin
) qui ajoute un bouton personnalisé à l’Éditeur de texte enrichi pour insérer du texte personnalisé dans le texte principal. Elle comprend un widget richtext
(RTE) et une fonctionnalité personnalisée qui est ajoutée par le biais du module externe RTE.Les widgets personnalisés et le module externe sont inclus dans le composant appelé 3. Widgets personnalisés du module Utilisation des widgets ExtJS. Pour inclure ce composant dans l’exemple de page, procédez comme suit :
La boîte de dialogue basée sur le widget Custom Multifield affiche une fenêtre avec un seul onglet. Cet onglet comprend un widget à plusieurs champs (multi-field) personnalisé qui, contrairement à l’onglet standard avec son champ unique, comporte deux zones : un menu déroulant avec deux options et un champ de texte.
Boîte de dialogue basée sur le widget Custom Multifield :
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)
) contenant un panneau (type de noeud = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).multifield
(type de noeud = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
).multifield
possède un champ config (type de noeud = nt:unstructured
, xtype = ejstcustom
, optionsProvider = Ejst.x3.provideOptions
) basé sur le xtype personnalisé ' ejstcustom
' :
" fieldconfig
" est une option de configuration de l’objet [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
' est une configuration du widget ejstcustom
. Elle est définie avec la méthode Ejst.x3.provideOptions
définie dans exercises.js
à l’emplacement suivant :
/apps/extjstraining/clientlib/js/exercises.js
et renvoie 2 options.
multifield
à l’emplacement suivant :/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
Widget à plusieurs champs (multifield) personnalisé (xtype = ejstcustom
) :
Ejst.CustomWidget
.CustomWidget.js
à l’adresse :/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
(Champ de texte), allowField
(ComboBox) et otherField
(Champ de texte)CQ.Ext.Component#initComponent
pour ajouter les 3 champs :
allowField
est un objet CQ.form.Selection de type « select ». optionsProvider est une configuration de l’objet Selection qui est instanciée avec la configuration optionsProvider du CustomWidget défini dans la boîte de dialogue.otherField
est un objet CQ.Ext.form.TextField.setValue
, getValue
et getRawValue
de CQ.form.CompositeField afin de définir et récupérer la valeur de CustomWidget au format suivant :<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
.ejstcustom
’ :CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
La boîte de dialogue basée sur le widget Custom Multifield se présente comme suit :
La boîte de dialogue basée sur le widget Treebrowse personnalisé affiche une fenêtre avec un seul onglet contenant un widget d’exploration de chemin personnalisé : lorsque vous cliquez sur la flèche, une fenêtre s’ouvre dans laquelle vous pouvez parcourir une hiérarchie et sélectionner un élément. Le chemin d’accès de l’élément est ensuite ajouté au champ du chemin et conservé lorsque la boîte de dialogue est fermée.
Boîte de dialogue treebrowse personnalisée :
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)
) contenant un panneau (type de noeud = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = ejstbrowse
)treebrowse
à l’emplacement suivant :/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
Widget treebrowse personnalisé (xtype = ejstbrowse
) :
Ejst.CustomWidget
.CustomBrowseField.js
à l’adresse :/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
pour afficher la fenêtre de navigation lorsque l’utilisateur clique sur la flèche./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
se produit.ejstbrowse
’ :CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Pour utiliser la boîte de dialogue basée sur le widget Custom Treebrowse :
La boîte de dialogue basée sur le module externe Éditeur de Texte Enrichi (RTE) comprend un bouton personnalisé pour insérer du texte personnalisé entre crochets. Le texte personnalisé peut être analysé par une logique côté serveur (non implémentée dans cet exemple), par exemple pour ajouter du texte défini à l’emplacement donné :
Boîte de dialogue basée sur le module externe RTE :
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
a un noeud enfant inserttext
(type de noeud = nt:unstructured
) nommé d’après le module externe. Elle possède une propriété appelée features
, qui définit les fonctionnalités du module externe disponibles pour l’éditeur de texte enrichi.Module externe RTE :
Ejst.InsertTextPlugin
.InsertTextPlugin.js
à l’adresse :/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)
et sont remplacées dans le module externe d’implémentation :
getFeatures()
renvoie un tableau de toutes les fonctionnalités rendues disponibles par le module externe.initializeUI()
ajoute le nouveau bouton à la barre d’outils de l’Éditeur de texte enrichi.notifyPluginConfig()
affiche le titre et le texte lorsque le bouton est survolé.execute()
est appelé lorsque l’utilisateur clique sur le bouton et exécute l’action du module externe : il affiche une fenêtre qui est utilisée pour définir le texte à inclure.insertText()
insère un texte à l’aide de l’objet de boîte de dialogue correspondant Ejst.InsertTextPlugin.Dialog
(voir plus loin).executeInsertText()
est appelé par la apply()
méthode de la boîte de dialogue, qui est déclenchée lorsque l’utilisateur clique sur le bouton OK.inserttext
’ :CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
définit la boîte de dialogue qui s’ouvre lorsque l’utilisateur clique sur le bouton du module externe. La boîte de dialogue se compose d’un panneau, d’un formulaire, d’un champ de texte et de 2 boutons (OK et Annuler).Pour utiliser la boîte de dialogue basée sur le module externe Éditeur de Texte Enrichi (RTE), procédez comme suit :
La boîte de dialogue basée sur le module externe Éditeur de Texte Enrichi (RTE) se présente sous la forme suivante :
Cet exemple montre uniquement comment implémenter la partie client de la logique : les espaces réservés ([text]) doivent ensuite être analysés explicitement côté serveur (par exemple dans le JSP du composant).
L’objet [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)
prêt à l’emploi représente les données d’interface utilisateur sous la forme d’une arborescence. Le composant Tree Overview inclus dans le module Utilisation des widgets ExtJS montre comment utiliser l’objet TreePanel
pour afficher une arborescence JCR sous un chemin d’accès donné. La fenêtre proprement dite peut être ancrée/détachée. Dans cet exemple, la logique de fenêtre est incorporée dans le fichier JSP du composant entre les balises <script></script>.
Pour inclure le composant Tree Overview dans l’exemple de page :
Le composant se présente sous la forme suivante :
Composant Tree Overview :
Elle est définie à l’emplacement suivant :
/apps/extjstraining/components/treeoverview
Sa boîte de dialogue permet de définir la taille de la fenêtre et d’ancrer/de détacher cette dernière (voir les détails ci-dessous).
Le jsp du composant :
apps/extjstraining/components/treeoverview/content.jsp
Le code JavaScript incorporé dans le jsp du composant :
tree
en essayant de récupérer une fenêtre arborescente de la page.treePanel
(CQ.Ext.tree.TreePanel) est créé :
treePanel
contient les données utilisées pour créer la fenêtre.
Les données sont récupérées en appelant le servlet enregistré à l’adresse :
/bin/wcm/siteadmin/tree.json
beforeload
s’assure que le noeud sur lequel l’utilisateur a cliqué est chargé.root
définit le chemin apps/extjstraining
comme racine de l’arborescence.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)
) est défini en fonction de la treePanel
prédéfinie et s’affiche avec :tree.show();
Boîte de dialogue du composant :
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)
) et un widget de sélection (type de noeud = cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = radio
) avec 2 options (true/false)./apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Un panneau Grille représente les données sous la forme d’un tableau de lignes et de colonnes. Il se compose des éléments suivants :
Le composant Grid Overview inclus dans le package Utilisation des widgets ExtJS indique comment afficher les données dans un format tabulaire :
Pour inclure le composant Grid Overview à l’exemple de page :
Le composant se présente sous la forme suivante :
Dans sa version prête à l’emploi, le composant Grid Overview affiche une fenêtre avec des données statiques sous forme de tableau. Dans cet exemple, la logique est incorporée dans le fichier JSP du composant de deux manières différentes :
Composant Grid Overview :
/apps/extjstraining/components/gridoverview
Le jsp du composant :
récupère la largeur, la hauteur et les propriétés d’ancrage à partir du référentiel ;
affiche du texte en guise d’introduction pour le format de données d’aperçu de grille ;
Fait référence au code JavaScript qui définit l’objet GridPanel :
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
définit certaines données statiques comme base de l’objet GridPanel.
incorpore, entre des balises JavaScript, du code JavaScript qui définit l’objet Window utilisant l’objet GridPanel ;
Elle est définie à l’emplacement suivant :
apps/extjstraining/components/gridoverview/content.jsp
Le code JavaScript incorporé dans le jsp du composant :
grid
en essayant de récupérer le composant de fenêtre à partir de la page :var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
n’existe pas, un objet CQ.Ext.grid.GridPanel ( gridPanel
) est défini en appelant la méthode getGridPanel()
(voir ci-dessous). Cette méthode est définie dans defaultgrid.js
.grid
est 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)
objet, basé sur le GridPanel prédéfini, qui s’affiche : grid.show();
grid
existe déjà, il est affiché en fonction de la largeur, de la hauteur et des propriétés d’ancrage extraites du référentiel.Le fichier JavaScript ( defaultgrid.js
) référencé dans le jsp du composant définit la méthode getGridPanel()
qui est appelée par le script incorporé dans le JSP et renvoie un objet [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)
, basé sur des données statiques. La logique est la suivante :
myData
est un tableau de données statiques, composé de 5 colonnes et de 4 lignes.store
est un CQ.Ext.data.Store
objet qui consomme myData
.store
est chargé en mémoire :store.load();
gridPanel
est 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)
objet qui consomme store
:
les largeurs de colonne sont redimensionnées à tout moment :
forceFit: true
seule une ligne à la fois peut être sélectionnée :
singleSelect:true
Lorsque vous installez le module, la balise content.jsp
du composant Grid Overview affiche une grille basée sur des données statiques. Il est possible de modifier le composant pour afficher une grille présentant les caractéristiques suivantes :
test
sous le nœud défini par le chemin d’accès qui est affiché dans la première colonne.Comme expliqué dans la section précédente, l’objet window obtient son objet [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)
en appelant la méthode getGridPanel()
définie dans le fichier defaultgrid.js
à l’adresse /apps/extjstraining/components/gridoverview/defaultgrid.js
. Le composant Grid Overview fournit une mise en oeuvre différente de la méthode getGridPanel()
, définie dans le fichier referencesearch.js
à l’emplacement /apps/extjstraining/components/gridoverview/referencesearch.js
. En changeant le fichier .js qui est référencé dans le jsp du composant, la grille sera basée sur les données extraites du référentiel.
Changez le fichier .js qui est référencé dans le jsp du composant :
content.jsp
du composant, commentez la ligne qui contient le fichier defaultgrid.js
, afin qu’elle se présente comme suit :<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
afin qu’il se présente comme suit :<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
Le composant se présente sous la forme suivante :
Le code JavaScript référencé dans le jsp du composant ( referencesearch.js
) définit la méthode getGridPanel()
appelée à partir du jsp du composant et renvoie un objet [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)
, en fonction des données récupérées dynamiquement à partir du référentiel. La logique contenue dans le fichier referencesearch.js
définit des données dynamiques comme base de l’objet GridPanel :
reader
est un objet [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)
qui lit la réponse du servlet au format JSON pour 3 colonnes.cm
est 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)
objet de 3 colonnes.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
est 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)
objet :
/bin/querybuilder.json
" avec quelques paramètres utilisés pour filtrer la requête.reader
défini précédemment.gridPanel
est 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)
objet qui peut être modifié :
Il repose sur l’objet store
prédéfini et sur le modèle de colonne cm
.
seule une ligne à la fois peut être sélectionnée :
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})
L’écouteur afteredit
vérifie les éléments suivants après la modification d’une cellule de la colonne « Test » :
test
" du noeud au chemin défini par la colonne "jcr:path" est définie dans le référentiel avec la valeur de la cellule.store
; dans le cas contraire, elle est rejetée.