Auf dieser Seite wird die Verwendung von Widgets innerhalb der klassischen Benutzeroberfläche beschrieben, die ab AEM 6.4 veraltet ist.
Adobe empfiehlt die Verwendung der modernen Touch-optimierten Benutzeroberfläche, die auf der Coral-Benutzeroberfläche und der Granite-Benutzeroberfläche basiert.
Die Web-basierte Oberfläche von Adobe Experience Manager (AEM) nutzt AJAX und andere moderne Browser-Technologien, um die WYSIWYG-Bearbeitung und -Formatierung von Inhalten durch Autorinnen und Autoren direkt auf der Web-Seite zu ermöglichen.
AEM verwendet die Widgets-Bibliothek ExtJS, die die hochoptimierten Elemente der Benutzeroberfläche bereitstellt, die in allen wichtigen Browsern funktionieren und die Erstellung von Benutzeroberflächen in Desktop-Qualität ermöglichen.
Diese Widgets sind in AEM enthalten und können nicht nur von AEM selbst verwendet werden, sondern auch von jeder Website, die mit AEM erstellt wurde.
Eine vollständige Übersicht aller verfügbaren Widgets in AEM finden Sie in der Widget-API-Dokumentation oder der Liste der bestehenden xtypes. 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. Anschließend werden einige Beispielkomponenten beschrieben, die erstellt wurden, um einige grundlegende Verwendungen und Erweiterungen zu veranschaulichen. 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 (for example, "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 muss, die vom CQ-Client-Bibliotheksdienst aggregiert 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 muss, die vom CQ-Client-Bibliotheksdienst aggregiert 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
) unterhalb des Ordners css
.
Die oben beschriebene Handhabung 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>, ..."/>
where <category-nameX>
ist der Name der clientseitigen Bibliothek.
um nur JavaScript-Code einzuschließen:
<ui:includeClientLib js="<category-name>"/>
Weitere Informationen finden Sie in der Beschreibung des <ui:includeclientlib> -Tag.
Manchmal sollte eine Client-Bibliothek nur im Authoring-Modus verfügbar sein und im Publishing-Modus ausgeschlossen werden. Dies lässt sich wie folgt erreichen:
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, in der die Komponenten enthalten sind. 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
wie folgt zum bestehenden <ui:includeClientLib>
-Tag 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. Wie Sie Geometrixx herunterladen und installieren können, erfahren Sie in der We.Retail-Referenzimplementierung.
Dialogfelder werden normalerweise zum Bearbeiten von Inhalten verwendet, können aber auch Informationen anzeigen. Eine einfache Möglichkeit, ein vollständiges Dialogfeld anzuzeigen, 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-Grundlagen 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
): Es zeigt ein Fenster mit drei Registerkarten an, wobei jede Registerkarte zwei Textfelder enthält.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
): 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 Allgemein der Beispielseite hinzu:
Die Komponente wird wie im Folgenden dargestellt:
Das Dialogfeld Full zeigt ein Fenster mit drei Registerkarten, wobei jede Registerkarte zwei Textfelder enthält. 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 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. 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 verfügt über eine Optionsfeldauswahl mit drei Optionen: Wenn eine Option ausgewählt ist, wird eine Registerkarte angezeigt, die sich auf die Option bezieht. Die zweite Registerkarte enthält zwei Textfelder.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 Registerkarten wechseln zeigt ein Fenster mit zwei Registerkarten. Die erste Registerkarte verfügt über eine Optionsfeldauswahl mit drei Optionen: Wenn eine Option ausgewählt ist, wird eine Registerkarte angezeigt, die sich auf die Option bezieht. Die zweite Registerkarte enthält zwei Textfelder.
Die wichtigsten Merkmale sind:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).cq:Panel
): eine Auswahlregisterkarte, die zweite Registerkarte hängt von der Auswahl der ersten Registerkarte ab (drei Optionen).cq:Panel
), jede hat zwei Textfelder (node type = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
). 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:
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 tabpanel
ab, welches das Auswahlfeld und die drei optionalen Bedienfelder enthält.Ejst.x2
wird definiert in der Datei exercises.js
unter:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.manageTabs()
werden alle optionalen Registerkarten ausgeblendet, weil der Wert von index
„-1“ ist (i umfasst den Bereich von 1 bis 3).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);}"
Ejst.x2.showTab()
,field.findParentByType('tabpanel')
tabpanel
ab, welches alle Registerkarten enthält (field
stellt das selection-Widget dar)field.getValue()
ruft den Wert der Auswahl ab, z. B. „tab2“Ejst.x2.manageTabs()
die ausgewählte Registerkarte an.render
“ ausblendet:render="function(tab){Ejst.x2.hideTab(tab);}"
Ejst.x2.hideTab()
,tabPanel
das tabpanel
, welches alle Registerkarten enthältindex
der Index der optionalen Registerkarte.tabPanel.hideTabStripItem(index)
die Registerkarte aus.Dies wird wie folgt angezeigt:
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 Beliebig zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte hat zwei Felder: eines zum Ablegen oder Hochladen eines Assets und eines, das einige Informationen über die enthaltende Seite und über das Asset anzeigt, falls ein solches referenziert wurde.
Die wichtigsten Merkmale sind:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
-Widget (node type = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) mit einem Bedienfeld (node type = cq:Panel
) ancq: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:
ownerdraw
-Widget hat einen „loadcontent
“-Listener, der Informationen über die Seite anzeigt, die die Komponente enthält. Das heißt, das Asset, auf das das Smartfile-Widget verweist, wenn der Inhalt geladen wird:loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"
field
ist mit dem Objekt ownerdraw
festgelegtpath
ist mit dem Inhaltspfad der Komponente festgelegt (zum Beispiel /content/geometrixx/en/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs
)Ejst.x2
wird definiert in der Datei exercises.js
unter:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.showInfo()
,pagePath
der Pfad der Seite, die die Komponente enthält;pageInfo
die Seiteneigenschaften im JSON-Format dar;reference
der Pfad des referenzierten Assets;metadata
die Metadaten des Assets im JSON-Format dar;ownerdraw.getEl().update(html);
die erstellte HTML im Dialogfeld an.So verwenden Sie das Dialogfeld Arbitrary:
Das Dialogfeld Felder umschalten 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)
).tabpanel
-Widget (node type = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textpanel)
) mit einem Bedienfeld (node type = cq:Panel
) an.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)
) und ein zusammenklappbares dialogfieldset-Widget (node type = cq:Widget
, xtype = [dialogfieldset](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialogfieldset)
), das standardmäßig ausgeblendet ist, sowie zwei Textfeld-Widgets (node type = cq:Widget
, xtype = [textfield](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#textfield)
).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:
loadcontent
“) und einen, der das dialogfieldset anzeigt, 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);}"
Ejst.x2
wird definiert in der Datei exercises.js
unter:/apps/extjstraining/clientlib/js/exercises.js
Ejst.x2.toggleFieldSet()
,box
das Auswahlobjekt;panel
das Bedienfeld, das das selection- und das dialogfieldset-Widget enthält;fieldSet
das dialogfieldset-Objekt;show
der Wert der Auswahl (true oder false)show
“ wird das dialogfieldset angezeigt oder nichtUm das Dialogfeld Felder umschalten zu verwenden, gehen Sie wie folgt vor:
Die im Lieferumfang von AEM enthaltenen vordefinierten 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 können durch Erweiterung vorhandener Widgets erstellt werden. Um Ihnen den Einstieg in eine solche Anpassung zu erleichtern, enthält das Paket Using ExtJS Widgets
drei Dialogfelder, die drei verschiedene benutzerdefinierte Widgets verwenden:
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. Um diese Komponente in die Beispielseite aufzunehmen:
Das Widget-basierte Dialogfeld Benutzerdefiniertes Multifield zeigt ein Fenster mit einer Registerkarte an. Die Registerkarte verfügt über ein benutzerdefiniertes multifield-Widget, das im Gegensatz zum Standard-Widget, das ein Feld hat, zwei Felder enthält: ein Dropdown-Menü mit zwei Optionen und ein Textfeld.
Das Widget-basierte Dialogfeld Benutzerdefiniertes Multifield:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
-Widget (node type = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) an, das ein Bedienfeld (node type = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
) enthält.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://developer.adobe.com/experience-manager/reference-materials/6-5/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
und gibt zwei Optionen zurück.
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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.CompositeField)
.hiddenField
(Textfeld), allowField
(ComboBox), 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 zum Setzen und Abrufen des Wertes von CustomWidget mit dem Format:<allowField value>/<otherField value>, for example: 'Bla1/hello'
.ejstcustom
“:CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);
Das Widget-basierte Dialogfeld Benutzerdefiniertes Multifield wird wie folgt angezeigt:
Treebrowse
-WidgetDas benutzerdefinierte und Widget-basierte Dialogfeld Treebrowse
zeigt ein Fenster mit einer Registerkarte, die ein benutzerdefiniertes Pfad-Browser-Widget enthält. Wenn Sie den Pfeil auswählen, öffnet sich ein Fenster, 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 Dialogfeld treebrowse
:
cq:Dialog
, xtype = [dialog](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#dialog)
).tabpanel
-Widget (node type = cq:Widget
, xtype = [tabpanel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#tabpanel)
) an, das ein Bedienfeld (node type = cq:Widget
, xtype = [panel](/docs/experience-manager-65/developing/components/classic-ui-components/xtypes.md#panel)
) enthält.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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TriggerField)
.browseWindow
. [CQ.Ext.form.TriggerField](https://developer.adobe.com/experience-manager/reference-materials/6-5/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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
):
show
-Ereignis vom Durchsuchfeld an das Fenster weitergegeben.ejstbrowse
“:CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
Um das Widget-basierte Dialogfeld Benutzerdefiniertes Treebrowse zu verwenden:
Das Rich-Text-Editor(RTE)-Plug-in basierte Dialogfeld ist ein auf dem Rich-Text-Editor basierendes Dialogfeld, das eine benutzerdefinierte Schaltfläche zum Einfügen eines benutzerdefinierten Textes in eckigen Klammern enthält. Der benutzerdefinierte Text kann durch eine serverseitige Logik analysiert werden (in diesem Beispiel nicht implementiert), z. B. um Text hinzuzufügen, der am angegebenen 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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.form.rte.plugins.Plugin)
-Objekt. [CQ.form.rte.plugins.Plugin](https://developer.adobe.com/experience-manager/reference-materials/6-5/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 Rich-Text-Editor(RTE)-Plug-in-basierte 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://developer.adobe.com/experience-manager/reference-materials/6-5/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
Im Dialogfeld können Sie die Größe des Fensters festlegen und das Fenster andocken oder abdocken (siehe 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.
Die Daten werden durch den Aufruf des Servlets abgerufen, das registriert ist unter:
/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://developer.adobe.com/experience-manager/reference-materials/6-5/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)/apps/extjstraining/components/treeoverview/dialog
https://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Ein Rasterbedienfeld stellt Daten in tabellarischer Form von Zeilen und Spalten dar. Es umfasst Folgendes:
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 vordefinierten Version der Komponente Rasterübersicht wird ein Fenster mit statischen Daten im Tabellenformat angezeigt. In diesem Beispiel wird die Logik auf zwei Arten in die Komponenten-JSP eingebettet:
Die Komponente „Grid Overview“:
/apps/extjstraining/components/gridoverview
Die Komponenten-JSP:
<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.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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.Window)
-Objekt, das auf dem vordefinierten GridPanel basiert, und wird angezeigt als: grid.show();
grid
vorhanden, wird es anhand der aus dem Repository abgerufenen Breite, Höhe und Andockungseigenschaften 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://developer.adobe.com/experience-manager/reference-materials/6-5/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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
, das store
verbraucht:
Die Spaltenbreiten werden ständig proportional angepasst:
forceFit: true
Nur eine Zeile kann jeweils ausgewählt werden:
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 zu ändern, um ein Raster mit den folgenden Eigenschaften anzuzeigen:
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://developer.adobe.com/experience-manager/reference-materials/6-5/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 verwiesen wird (referencesearch.js
), definiert die getGridPanel()
-Methode, die von der Komponenten-JSP aufgerufen wird und ein [CQ.Ext.grid.GridPanel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.GridPanel)
-Objekt zurückgibt, das auf Daten basiert, welche 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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.data.JsonReader)
-Objekt, das die Antwort des Servlets im JSON-Format für drei Spalten liest.cm
ist ein [CQ.Ext.grid.ColumnModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.ColumnModel)
-Objekt für drei Spalten.editor: new [CQ.Ext.form.TextField](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.form.TextField)({})
cm.defaultSortable = true;
store
ist [CQ.Ext.data.GroupingStore](https://developer.adobe.com/experience-manager/reference-materials/6-5/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://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.EditorGridPanel)
-Objekt, das bearbeitet werden kann:
Es basiert auf dem vordefinierten store
und auf dem Spaltenmodell cm
.
Nur eine Zeile kann jeweils ausgewählt werden:
sm: new [CQ.Ext.grid.RowSelectionModel](https://developer.adobe.com/experience-manager/reference-materials/6-5/widgets-api/index.html?class=CQ.Ext.grid.RowSelectionModel)({singleSelect:true})
Der 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.