Auf dieser Seite wird die Verwendung von Widgets innerhalb der klassischen Benutzeroberfläche beschrieben, die ab AEM 6.4 veraltet ist.
Adobe empfiehlt, die moderne Touch-optimierte Benutzeroberfläche zu verwenden, die auf Coral-Benutzeroberfläche und Granite-Benutzeroberfläche basiert.
Die webbasierte Oberfläche von Adobe Experience Manager nutzt AJAX und andere moderne Browsertechnologien, um WYSIWYG-Bearbeitung und -Formatierung von Inhalten durch Autoren direkt auf der Webseite zu ermöglichen.
Adobe Experience Manager (AEM) verwendet die ExtJS-Widgetbibliothek, die die besonders ausgereiften Benutzeroberflächenelemente bereitstellt, die in allen wichtigen Browsern funktionieren und die Erstellung von Benutzeroberflächen in Desktopqualität ermöglichen.
Diese Widgets sind in AEM enthalten und können nicht nur von AEM, sondern auch von jeder mit AEM erstellten Website verwendet werden.
Eine vollständige Übersicht aller verfügbaren Widgets in AEM finden Sie in der Widget-API-Dokumentation oder der Liste der bestehenden X-Typen. Darüber hinaus zeigen zahlreiche Beispiele auf der Website von Sencha, dem Eigentümer des Frameworks, wie das ExtJS-Framework zu verwenden ist.
Auf dieser Seite erhalten Sie einige Einblicke in die Verwendung und Erweiterung von Widgets. Zuerst wird beschrieben, wie Client-seitiger Code in eine Seite eingefügt wird. Dann werden einige Beispielkomponenten beschrieben, die erstellt wurden, um einige grundlegende Anwendungs- und Erweiterungsfälle zu illustrieren. Diese Komponenten stehen als das Paket Verwenden von ExtJS Widgets auf Package Share zur Verfügung.
Das Paket enthält Beispiele für:
Die klassische Benutzeroberfläche von Adobe Experience Manager baut auf ExtJS 3.4.0 auf.
Client-seitiger JavaScript- und Stylesheet-Code sollte in einer Client-Bibliothek platziert werden.
Erstellen Sie eine Client-Bibliothek wie folgt:
Erstellen Sie einen Knoten unterhalb von /apps/<project>
mit den folgenden Eigenschaften:
Note: <category-name> is the name of the custom library (e.g. "cq.extjstraining") and is used to include the library on the page.
Erstellen Sie unterhalb von clientlib
die Ordner css
und js
(nt:folder).
Erstellen Sie unterhalb von clientlib
die Dateien css.txt
und js.txt
(nt:files). Diese TXT-Dateien listen die Dateien auf, die in der Bibliothek enthalten sind.
Bearbeiten Sie die Datei js.txt
: Sie muss mit „#base=js
“ beginnen, worauf eine Liste der Dateien folgen soll, die vom CQ-Client-Bibliotheksdienst zusammengefasst werden sollen, z. B.:
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
Bearbeiten Sie die Datei css.txt
: Sie muss mit „#base=css
“ beginnen, worauf eine Liste der Dateien folgen soll, die vom CQ-Client-Bibliotheksdienst zusammengefasst werden sollen, z. B.:
#base=css
components.css
Platzieren Sie die JavaScript-Dateien, die der Bibliothek angehören, unterhalb des Ordners js
.
Platzieren Sie die Dateien .css
und die von den css-Dateien verwendeten Ressourcen (z. B. my_icon.png
) unter dem Ordner css
.
Die oben beschriebene Verarbeitung von Stylesheets ist optional.
Fügen Sie die Client-Bibliothek wie folgt in die Seitenkomponenten-JSP ein:
um sowohl JavaScript-Code als auch Stylesheets einzuschließen:
<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>
Hierbei gilt:
<category-nameX>
ist der Name der Client-seitigen Bibliothek.
um nur JavaScript-Code einschließen:
<ui:includeClientLib js="<category-name>"/>
Weitere Informationen finden Sie in der Beschreibung des Tags <ui:includeClientLib>.
In manchen Fällen darf eine Client-Bibliothek nur im Autorenmodus verfügbar sein und muss im Veröffentlichungsmodus ausgeschlossen werden. Dies erreichen Sie wie folgt:
if (WCMMode.fromRequest(request) != WCMMode.DISABLED) {
%><ui:includeClientLib categories="cq.collab.blog"/><%
}
Zum Durchführen der Übungen auf dieser Seite installieren Sie das Paket Verwenden von ExtJS Widgets auf einer lokalen AEM-Instanz und erstellen eine Beispielseite, auf der auch Komponenten eingefügt werden. Gehen Sie dazu wie folgt vor:
extjstraining
das Projekt /apps
erstellt./apps/geometrixx/components/page/headlibs.jsp
und fügen Sie die Kategorie cq.extjstraining
dem bestehenden Tag <ui:includeClientLib>
wie folgt hinzu:%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
/content/geometrixx/en/products
und nennen Sie sie Verwenden von ExtJS Widgets.Die Beispiele auf dieser Seite basieren auf dem Geometrixx-Beispielinhalt, der nicht mehr im Lieferumfang von AEM enthalten ist, da er durch We.Retail ersetzt wurde. Im Dokument We.Retail-Referenzimplementierung finden Sie Informationen zum Herunterladen und Installieren von Geometrixx.
Dialogfelder werden in der Regel verwendet, um Inhalte zu bearbeiten, aber auch nur zum Anzeigen von Informationen. Eine einfache Möglichkeit zum Anzeigen eines vollständigen Dialogfelds besteht darin, auf seine Darstellung im JSON-Format zuzugreifen. Verweisen Sie dazu Ihren Browser auf:
https://localhost:4502/<path-to-dialog>.-1.json
Die erste Komponente der Gruppe Verwenden von ExtJS Widgets im Sidekick wird mit 1. Dialog Allgemein bezeichnet und umfasst vier grundlegende Dialogfelder, die mit standardmäßigen Widgets und ohne modifizierte JavaScript-Logik erstellt wurden. Die Dialogfelder werden unter /apps/extjstraining/components/dialogbasics
gespeichert. Die grundlegenden Dialogfelder sind:
full
full): Es zeigt ein Fenster mit drei Registerkarten mit jeweils zwei Textfeldern an.singlepanel
): Es zeigt ein Fenster mit einer Registerkarte mit zwei Textfeldern an.multipanel
): Es zeigt dasselbe an wie das Dialogfeld „Full“, ist aber anders aufgebaut.design
design): Es zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte besitzt ein Textfeld, ein Dropdown-Menü und einen ausblendbaren Textbereich. Die zweite Registerkarte verfügt über einen Feldsatz mit vier Textfeldern und einen ausblendbaren Feldsatz mit zwei Textfeldern.Fügen Sie die Komponente 1. Dialog Basics der Beispielseite hinzu:
Die Komponente wird wie im Folgenden dargestellt:
Das Dialogfeld Full zeigt ein Fenster mit drei Registerkarten mit jeweils zwei Textfeldern. Es ist das Standarddialogfeld der Komponente Dialog Allgemein. Die Eigenschaften sind:
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
Das Dialogfeld wird wie im Folgenden dargestellt:
Das Dialogfeld Single Panel zeigt ein Fenster mit einer Registerkarte und zwei Textfeldern an. Die Eigenschaften sind:
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
So verwenden Sie das Dialogfeld „Single Panel“:
/apps/extjstraining/components/dialogbasics/dialog
/apps/extjstraining/components/dialogbasics/singlepanel
/apps/extjstraining/components/dialogbasics
/apps/extjstraining/components/dialogbasics/Copy of singlepanel
aus und benennen Sie ihn um zu dialog
.Das Dialogfeld Multi-Panel zeigt dasselbe wie das Dialogfeld Full, ist aber anders aufgebaut. Die Eigenschaften sind:
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
Das Dialogfeld „Multi-Panel“ verwenden Sie wie folgt:
Das Dialogfeld Rich zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte weist ein Textfeld auf, ein Dropdown-Menü und einen ausblendbaren Textbereich. Die zweite Registerkarte verfügt über einen Feldsatz mit vier Textfeldern und einen ausblendbaren Feldsatz mit zwei Textfeldern. Die Eigenschaften sind:
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)
-Widget mit einem [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
- und einem [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
-Widget mit drei Optionen sowie ein ausblendbares [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
mit einem [textarea](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textarea)
-Widget. [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
-Widget mit vier [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
-Widgets und ein ausblendbares dialogfieldset
mit zwei [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
-Widgets./apps/extjstraining/components/dialogbasics/rich
https://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
So verwenden Sie das Dialogfeld Rich:
Die zweite Komponente der Gruppe Verwenden von ExtJS Widgets im Sidekick heißt 2. Dynamische Dialogfelder und umfasst drei dynamische Dialogfelder, die mit standardmäßigen Widgets und modifizierter JavaScript-Logik erstellt wurden. Die Dialogfelder werden unter /apps/extjstraining/components/dynamicdialogs
gespeichert. Die dynamischen Dialogfelder sind:
switchtabs
): Es zeigt ein Fenster mit zwei Registerkarten. Die erste Registerkarte weist eine Navigationsauswahl mit drei Optionen auf: Wenn eine Option ausgewählt ist, wird eine Registerkarte zu der Option angezeigt. Die zweite Registerkarte weist zwei Textfelder auf.arbitrary
): Es zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein Feld, in das Sie Assets ziehen oder hochladen können, und ein Feld, das Informationen über die Seite, die es umfasst, und das Asset (falls auf eines verwiesen wird) anzeigt.togglefield
): Es zeigt ein Fenster mit einer Registerkarte. Die Registerkarte verfügt über ein Kontrollkästchen: Ist es aktiviert, wird ein Feldsatz mit zwei Textfeldern angezeigt.Fügen Sie die Komponente 2. Dynamische Dialogfelder wie folgt der Beispielseite hinzu:
Die Komponente wird wie im Folgenden dargestellt:
Das Dialogfeld Switch Tabs zeigt ein Fenster mit zwei Registerkarten an. Die erste Registerkarte weist eine Navigationsauswahl mit drei Optionen auf: Wenn eine Option ausgewählt ist, wird eine Registerkarte zu der Option angezeigt. Die zweite Registerkarte weist zwei Textfelder auf.
Die wichtigsten Merkmale sind:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): eine Auswahlregisterkarte und eine zweite Registerkarte, die von der Auswahl auf der ersten Registerkarte abhängt (drei Optionen).cq:Panel
) mit jeweils zwei Textfeldern (node type = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
) auf. Es wird jeweils nur eine optionale Registerkarte angezeigt.switchtabs
unter:/apps/extjstraining/components/dynamicdialogs/switchtabs
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Der Dialogfeldknoten hat einen „beforeshow
“-Listener, der alle optionalen Registerkarten ausblendet, bevor das Dialogfeld angezeigt wird:
beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"
dialog.items.get(0)
ruft die Registerkarte ab, die das Auswahlfeld und die 3 optionalen Bedienfelder enthält.
Das Objekt Ejst.x2
wird definiert in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
In der Methode Ejst.x2.manageTabs()
werden alle optionalen Registerkarten ausgeblendet, weil der Wert von index
„-1“ ist (i umfasst den Bereich von 1 bis 3).
Die Auswahlregisterkarte weist zwei Listener auf: Einer zeigt die ausgewählte Registerkarte, wenn das ausgewählte Dialogfeld geladen wird (Ereignis „loadcontent
“), und einer zeigt die ausgewählte Registerkarte, wenn die Auswahl geändert wird (Ereignis „selectionchanged
“):
loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
In der Methode Ejst.x2.showTab()
:
ruft field.findParentByType('tabpanel')
das Registerkartenbedienfeld ab, das alle Registerkarten enthält (field
stellt das Auswahl-Widget dar).
ruft field.getValue()
den Wert der Auswahl ab, z. B. tab2.
zeigt Ejst.x2.manageTabs()
die ausgewählte Registerkarte an.
Jede optionale Registerkarte verfügt über einen Listener, der die Registerkarte beim Ereignis „render
“ ausblendet:
render="function(tab){Ejst.x2.hideTab(tab);}"
In der Methode Ejst.x2.hideTab()
:
ist tabPanel
das Registerkartenbedienfeld, das alle Registerkarten enthält.
ist index
der Index der optionalen Registerkarte.
blendet tabPanel.hideTabStripItem(index)
die Registerkarte aus.
Dies wird wie folgt angezeigt:
Sehr oft zeigt ein Dialogfeld Inhalte aus der zugrunde liegenden Komponente an. Das hier beschriebene Dialogfeld Arbitrary zeigt Inhalte aus einer anderen Komponente an.
Das Dialogfeld Arbitrary zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über zwei Felder: eines, in das Sie Assets ziehen oder hochladen können, und eines, das Informationen über die Seite, die es umfasst, und das Asset (falls auf eines verwiesen wird) anzeigt.
Die wichtigsten Merkmale sind:
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)
) mit einem Bedienfeld (node type = cq:Panel
)cq:Widget
, xtype = [smartfile](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#smartfile)
) und ein ownerdraw-Widget (Knotentyp = cq:Widget
, xtype = [ownerdraw](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#ownerdraw)
)arbitrary
unter:/apps/extjstraining/components/dynamicdialogs/arbitrary
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Das ownerdraw-Widget verfügt über einen „loadcontent
“-Listener, der Informationen über die Seite zeigt, die die Komponente und das Asset enthält, auf die vom smartfile-Widget verwiesen wird, wenn der Inhalt geladen wird:
loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
wird mit dem ownerdraw-Objekt festgelegt
path
wird mit dem Inhalts-Pfad der Komponente festgelegt (z. B.: /content/geometrixx/de/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)
Das Objekt Ejst.x2
wird definiert in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
In der Methode Ejst.x2.showInfo()
:
ist pagePath
der Pfad der Seite, die die Komponente enthält.
stellt pageInfo
die Seiteneigenschaften im JSON-Format dar.
ist reference
der Pfad des referenzierten Assets.
stellt metadata
die Metadaten des Assets im JSON-Format dar.
zeigt ownerdraw.getEl().update(html);
die erstellte HTML im Dialogfeld an.
So verwenden Sie das Dialogfeld Arbitrary:
Das Dialogfeld Toggle Fields zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein Kontrollkästchen: Ist es aktiviert, wird ein Feldsatz mit zwei Textfeldern angezeigt.
Die wichtigsten Merkmale sind:
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)
) mit einem Bedienfeld (node type = cq:Panel
).cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
selection, type = [checkbox](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#checkbox)
) und ein ausblendbares (und standardmäßig ausgeblendetes) dialogfieldset-Widget (node type = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
) mit zwei textfield-Widgets (node type = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
) auf.togglefields
unter:/apps/extjstraining/components/dynamicdialogs/togglefields
https://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Die Auswahlregisterkarte weist zwei Listener auf: Einer zeigt die Dialogfeldgruppe, wenn das ausgewählte Dialogfeld geladen wird (Ereignis „loadcontent
“), und einer zeigt das die Dialogfeldgruppe, wenn die Auswahl geändert wird (Ereignis „selectionchanged
“):
loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
Das Objekt Ejst.x2
wird definiert in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
In der Methode Ejst.x2.toggleFieldSet()
:
ist box
das Auswahlobjekt.
ist panel
das Bedienfeld, das das selection- und das dialogfieldset-Widget enthält.
ist fieldSet
das dialogfieldset-Objekt.
show
ist der Wert der Auswahl (true oder false)
basierend auf „show
“ wird die Dialogfeldgruppe angezeigt oder nicht
So verwenden Sie das Dialogfeld Felder umschalten:
Die direkt einsatzbereiten und im Lieferumfang von AEM enthaltenen Widgets sollten die meisten Anwendungsfälle abdecken. Trotzdem kann es passieren, dass ein benutzerdefiniertes Widget erstellt werden muss, um eine projektspezifische Anforderung zu erfüllen. Benutzerdefinierte Widgets werden erstellt, indem vorhandene erweitert werden. Das Paket Verwenden von ExtJS Widgets enthält drei Dialogfelder, die drei verschiedene benutzerdefinierte Widgets verwenden, um die ersten Schritte mit der Anpassung zu vereinfachen:
multifield
) zeigt ein Fenster mit einer Registerkarte. Die Registerkarte verfügt über ein benutzerdefiniertes multifield-Widget mit zwei Feldern: Ein Dropdown-Menü mit zwei Optionen und ein Textfeld. Da es auf dem im Lieferumfang enthaltenen multifield
-Widget (mit nur einem Textfeld) basiert, verfügt es über alle Funktionen des multifield
-Widgets.treebrowse
-Knoten) zeigt ein Fenster mit einer Registerkarte, die ein Pfadbrowser-Widget enthält: Wenn Sie auf den Pfeil klicken, wird ein Fenster geöffnet, in dem Sie eine Hierarchie durchsuchen und ein Element auswählen können. Der Pfad des Elements wird dann dem Pfadfeld hinzugefügt und wird beibehalten, wenn das Dialogfeld geschlossen wird.rteplugin
) und dem Rich-Text-Editor eine benutzerdefinierte Schaltfläche hinzufügt, mit der benutzerdefinierter Text in den Haupttext eingefügt werden kann. Es besteht aus einem richtext
-Widget (RTE) und einer benutzerdefinierten Funktion, die durch den RTE-Plug-in-Mechanismus hinzugefügt wird.Die benutzerdefinierten Widgets und das Plug-in sind in der Komponente 3. Benutzerdefinierte Widgets des Pakets Verwenden von ExtJS Widgets enthalten. Fügen Sie diese Komponente wie folgt der Beispielseite hinzu:
Das auf dem Custom Multifield-Widget basierende Dialogfeld zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein benutzerdefiniertes multifield-Widget mit zwei Feldern (im Gegensatz zur Standardversion mit einem Feld): Ein Dropdown-Menü mit zwei Optionen und ein Textfeld.
Das auf dem Custom Multifield-Widget basierende Dialogfeld:
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)
) mit einem Bedienfeld (node type = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).multifield
-Widget (node type = cq:Widget
, xtype = [multifield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#multifield)
) auf.multifield
-Widget verfügt über eine fieldconfig (Knotentyp = nt:unstructured
, xtype = ejstcustom
, optionsProvider = Ejst.x3.provideOptions
), die auf dem benutzerdefinierten xtype „ejstcustom
“ basiert:
fieldconfig
“ ist eine Konfigurationsoption des [CQ.form.MultiField](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.form.MultiField)
-Objekts.optionsProvider
“ ist eine Konfiguration des ejstcustom
-Widgets. Sie wird mit der Ejst.x3.provideOptions
-Methode festgelegt, die definiert ist in exercises.js
unter:/apps/extjstraining/clientlib/js/exercises.js
multifield
unter:/apps/extjstraining/components/customwidgets/multifield
https://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
Das benutzerdefinierte Multifield-Widget (xtype = ejstcustom
):
Ejst.CustomWidget
.CustomWidget.js
unter:/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
(Textfeld), allowField
(Kombinationsfeld) und otherField
(Textfeld)CQ.Ext.Component#initComponent
, um die drei Felder hinzuzufügen:
allowField
ist ein CQ.form.Selection-Objekt vom Typ „select“. „optionsProvider“ ist eine Konfiguration des Auswahl-Objekts, das mit der optionsProvider-Konfiguration des im Dialogfeld definierten CustomWidget instanziert wird.otherField
ist ein CQ.Ext.form.TextField-Objekt.setValue
, getValue
und getRawValue
von CQ.form.CompositeField, um den Wert von CustomWidget festzulegen und mit dem folgenden Format abzurufen:<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
.ejstcustom
“:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
Das auf dem Custom Multifield-Widget basierende Dialogfeld wird wie folgt angezeigt:
Das auf dem Treebrowse-Widget basierende benutzerdefinierte Dialogfeld zeigt ein Fenster mit einer Registerkarte, die ein benutzerdefiniertes Pfadbrowser-Widget enthält: Wenn Sie auf den Pfeil klicken, wird ein Fenster geöffnet, in dem Sie eine Hierarchie durchsuchen und ein Element auswählen können. Der Pfad des Elements wird dann dem Pfadfeld hinzugefügt und wird beibehalten, wenn das Dialogfeld geschlossen wird.
Das benutzerdefinierte treebrowse-Dialogfeld:
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)
) mit einem Bedienfeld (node type = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
).cq:Widget
, xtype = ejstbrowse
) auf.treebrowse
unter:/apps/extjstraining/components/customwidgets/treebrowse
https://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
Das benutzerdefinierte treebrowse-Widgets (xtype = ejstbrowse
):
Ejst.CustomWidget
.CustomBrowseField.js
unter:/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
, um das Fenster zum Durchsuchen anzuzeigen, wenn auf den Pfeil geklickt wird./bin/wcm/siteadmin/tree.json
registriert ist.apps/extjstraining
“.window
-Objekt ( [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
-Ereignis vom Durchsuchfeld an das Fenster weitergegeben.ejstbrowse
“:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
So verwenden Sie das auf dem Wideget Benutzerdefiniertes Durchsuchen der Baumstruktur basierende Dialogfeld:
Das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld ist ein auf dem Rich-Text-Editor basierendes Dialogfeld, das eine benutzerdefinierte Schaltfläche aufweist, mit der benutzerdefinierter Text in eckigen Klammern eingefügt wird. Der benutzerdefinierte Text kann auch anhand einer Server-seitigen Logik geparst werden (in diesem Beispiel nicht implementiert), um beispielsweise Text hinzuzufügen, der am jeweiligen Pfad definiert ist:
Das auf dem RTE-Plug-in basierende Dialogfeld:
/apps/extjstraining/components/customwidgets/rteplugin
https://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
rtePlugins
verfügt über einen untergeordneten Knoten inserttext
(node type = nt:unstructured
) der nach dem Plug-in benannt ist. Er weist eine Eigenschaft mit der Bezeichnung features
auf, die definiert, welche der Plug-in-Funktionen für den RTE verfügbar sind.Das RTE-Plug-in:
Ejst.InsertTextPlugin
.InsertTextPlugin.js
unter:/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)
-Objekt. [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)
-Objekt und werden im implementierenden Plug-in überschrieben:
getFeatures()
gibt ein Array aller Funktionen zurück, die vom Plug-in bereitgestellt werden.initializeUI()
fügt die neue Schaltfläche der RTE-Symbolleiste hinzu.notifyPluginConfig()
zeigt Titel und Text an, wenn auf die Schaltfläche gezeigt wird.execute()
wird aufgerufen, wenn auf die Schaltfläche geklickt wird, und führt die Plug-in-Aktion durch: Sie zeigt ein Fenster an, in dem Text definiert wird, der eingeschlossen werden soll.insertText()
fügt einen Text anhand des entsprechenden Dialogfeldobjekts Ejst.InsertTextPlugin.Dialog
ein (siehe unten).executeInsertText()
wird von der Methode apply()
des Dialogfelds aufgerufen, die ausgelöst wird, wenn auf die Schaltfläche OK geklickt wird.inserttext
“-Plug-in:CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Ejst.InsertTextPlugin.Dialog
-Objekt definiert das Dialogfeld, das geöffnet wird, wenn auf die Plug-in-Schaltfläche geklickt wird. Das Dialogfeld besteht aus einem Bedienfeld, einem Formular, einem Textfeld und zwei Schaltflächen (OK und Abbrechen).So verwenden Sie das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld:
Das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld wird wie folgt angezeigt:
Dieses Beispiel zeigt nur die Implementierung des Client-seitigen Teils der Logik: Die Platzhalter ([Text]) müssen dann explizit Server-seitig geparst werden (z. B. in der Komponenten-JSP).
Das im Lieferumfang enthaltene [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)
-Objekt bietet eine baumstrukturierte Benutzeroberflächendarstellung baumstrukturierter Daten. Die im Paket Verwenden von ExtJS Widgets enthaltene Komponente „Übersicht über die Baumstruktur“ zeigt die Verwendung des Objekts TreePanel
zur Anzeige einer JCR-Baumstruktur unterhalb eines gegebenen Pfads. Das Fenster selbst kann an- bzw. abgedockt werden. In diesem Beispiel wird die Fensterlogik in die Komponenten-JSP zwischen <script></script>-Tags eingebunden.
Fügen Sie die Komponente Tree Overview wie folgt der Beispielseite hinzu:
Die Komponente wird wie im Folgenden dargestellt:
Die Komponente „Tree Overview“:
Wird definiert unter:
/apps/extjstraining/components/treeoverview
Ihr Dialogfeld ermöglicht das Festlegen der Fenstergröße und das An- bzw.- Abdocken des Fensters (weitere Details unten).
Die Komponenten-JSP:
apps/extjstraining/components/treeoverview/content.jsp
Der in die Komponenten-JSP eingebettete JavaScript-Code:
tree
-Objekt, indem versucht wird, ein Baumstrukturfenster von der Seite abzurufen.treePanel
(CQ.Ext.tree.TreePanel) erstellt:
treePanel
enthält die Daten, anhand derer das Fenster erstellt wird./bin/wcm/siteadmin/tree.json
beforeload
-Listener stellt sicher, dass der gewählte Knoten geladen wird.root
-Objekt legt den Pfad apps/extjstraining
als Stamm der Baumstruktur fest.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)
) wird anhand des vordefinierten treePanel
festgelegt und angezeigt mit:tree.show();
Das Komponentendialogfeld:
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)
) und ein selection-Widget (node type = cq:Widget
, xtype = [selection](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#selection)
, type = radio
) mit zwei Optionen (true/false) auf./apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Ein „Grid Panel“ stellt Daten in tabellarischer Form als Zeilen und Spalten dar. Es setzt sich aus Folgendem zusammen:
Die im Paket Verwenden von ExtJS Widgets enthaltene Komponente „Raster-Übersicht“ zeigt, wie Daten in einem tabellarischen Format angezeigt werden:
Fügen Sie die Komponente „Raster-Übersicht“ wie folgt der Beispielseite hinzu:
Die Komponente wird wie im Folgenden dargestellt:
In der von Adobe ausgelieferten Version zeigt die Komponente Grid Overview ein Fenster mit statischen Daten in tabellarischer Form. In diesem Beispiel wird die Logik auf zwei Arten in die Komponenten-JSP eingebunden:
Die Komponente „Grid Overview“:
/apps/extjstraining/components/gridoverview
Die Komponenten-JSP:
Ruft die Breite, Höhe und angedockten Eigenschaften aus dem Repository ab.
Zeigt Text als Einführung zum Datenformat des Rasterüberblicks an.
Verweist auf JavaScript-Code, der das GridPanel-Objekt definiert:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>
defaultgrid.js
definiert einige statische Daten als Grundlage für das GridPanel-Objekt.
Bettet zwischen JavaScript-Tags JavaScript-Code ein, der das Window-Objekt definiert, das das GridPanel-Objekt verbraucht.
Wird definiert unter:
apps/extjstraining/components/gridoverview/content.jsp
Der in die Komponenten-JSP eingebettete JavaScript-Code:
grid
-Objekt, indem versucht wird, die Fensterkomponente von folgender Seite abzurufen:var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
grid
nicht vorhanden ist, wird ein CQ.Ext.grid.GridPanel-Objekt (gridPanel
) definiert, indem die Methode getGridPanel()
aufgerufen wird (siehe unten). Diese Methode wird in defaultgrid.js
definiert.grid
ist ein [CQ.Ext.Window](https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/reference-materials/widgets-api/index.html?class=CQ.Ext.Window)
-Objekt, das auf dem vordefinierten GridPanel basiert, und wird angezeigt als: grid.show();
grid
bereits vorhanden, wird es anhand der aus dem Repository abgerufenen Breite, Höhe und angedockten Eigenschaften angezeigt.Die JavaScript-Datei (defaultgrid.js
), auf die in der Komponenten-JSP verwiesen wird, definiert die getGridPanel()
-Methode, die von dem Skript aufgerufen wird, das in der JSP eingebettet ist, und gibt ein [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)
-Objekt zurück, das auf statischen Daten basiert. Die Logik lautet wie folgt:
myData
ist ein Array statischer Daten, formatiert als Tabelle mit fünf Spalten und vier Zeilen.store
ist ein CQ.Ext.data.Store
-Objekt, das myData
verbraucht.store
wird in den Speicher geladen:store.load();
gridPanel
ist ein [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)
, das store
verbraucht:
forceFit: true
singleSelect:true
Bei der Installation des Pakets zeigt die Datei content.jsp
der Komponente Raster-Übersicht ein Raster an, das auf statischen Daten basiert. Es ist möglich, die Komponente so zu ändern, dass ein Raster mit den folgenden Eigenschaften angezeigt wird:
test
-Eigenschaft unterhalb des Knotens gespeichert, der anhand des in der ersten Spalte angezeigten Pfades definiert wird.Wie bereits weiter oben beschrieben ruft das Fensterobjekt sein [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)
-Objekt ab, indem die unter /apps/extjstraining/components/gridoverview/defaultgrid.js
in der Datei defaultgrid.js
definierte Methode getGridPanel()
aufgerufen wird. Die Komponente Raster-Übersicht bietet eine andere Implementierung für die getGridPanel()
-Methode, definiert in der Datei referencesearch.js
unter /apps/extjstraining/components/gridoverview/referencesearch.js
. Durch Wechseln der JS-Datei, auf die in der Komponenten-JSP verwiesen wird, basiert das Raster auf aus dem Repository abgerufenen Daten.
Wechseln Sie die JS-Datei, auf die in der Komponenten-JSP verwiesen wird:
content.jsp
der Komponente die Zeile, die die Datei defaultgrid.js
enthält, sodass sie wie folgt aussieht:<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
referencesearch.js
enthält, sodass sie wie folgt aussieht:<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
Die Komponente wird wie im Folgenden dargestellt:
Der JavaScript-Code, auf den in der Komponenten-JSP (referencesearch.js
) verwiesen wird, definiert die Methode getGridPanel()
, die von der Komponenten-JSP aufgerufen werden, und gibt ein [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)
-Objekt zurück, das auf Daten basiert, die dynamisch aus dem Repository abgerufen werden. Die Logik in referencesearch.js
definiert dynamische Daten als Basis für das GridPanel:
reader
ist ein [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)
-Objekt, das die Servlet-Antwort im JSON-Format für drei Spalten liest.cm
ist ein [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)
-Objekt für drei Spalten.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
ist [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)
-Objekt:
/bin/querybuilder.json
“ registrierte Servlet mit einigen Parametern zum Filtern der Abfrage aufruft.reader
.gridPanel
ist ein [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)
-Objekt, das bearbeitet werden kann:
store
und auf dem Spaltenmodell cm
.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})
afteredit
-Listener stellt sicher, dass nach der Bearbeitung einer Zelle in der „Test“-Spalte Folgendes passiert:
test
“ des Knotens an dem durch die Spalte „jcr:path“ definierten Pfad wird im Repository mit dem Wert der Zelle festgelegt.store
-Objekt hinzugefügt, andernfalls wird er abgelehnt.