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 clientseitiger 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 Using 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.
Diese Seite beschreibt die Verwendung von Widgets in der klassischen Benutzeroberfläche. Adobe empfiehlt, die moderne Touch-optimierte Benutzeroberfläche zu verwenden, die auf Coral-Benutzeroberfläche und Granite-Benutzeroberfläche basiert.
Clientseitiger JavaScript- und Stylesheet-Code sollte in einer Client-Bibliothek platziert werden.
Erstellen Sie eine Client-Bibliothek wie folgt:
Erstellen Sie einen Knoten unter /apps/<project>
mit den folgenden Eigenschaften:
name="clientlib"
jcr:mixinTypes="[mix:lockable]"
jcr:primaryType="cq:ClientLibraryFolder"
sling:resourceType="widgets/clientlib"
categories="[<category-name>]"
dependencies="[cq.widgets]"
Hinweis: <category-name>
ist der Name der benutzerdefinierten Bibliothek (z.B. "cq.extjstraining") und wird verwendet, um die Bibliothek auf der Seite einzuschließen.
Erstellen Sie unter clientlib
die Ordner css
und js
(nt:folder).
Erstellen Sie unter clientlib
die Dateien css.txt
und js.txt
(nt:files). Diese TXT-Dateien listen die Dateien auf, die in der Bibliothek enthalten sind.
js.txt
bearbeiten: Es muss mit "#base=js
"gefolgt von der Liste der Dateien, die vom CQ-Client-Bibliotheksdienst aggregiert werden, wie z. B.:
#base=js
components.js
exercises.js
CustomWidget.js
CustomBrowseField.js
InsertTextPlugin.js
css.txt
bearbeiten: Es muss mit "#base=css
"gefolgt von der Liste der Dateien, die vom CQ-Client-Bibliotheksdienst aggregiert werden, wie z. B.:
#base=css
components.css
Platzieren Sie die JavaScript-Dateien, die der Bibliothek angehören, unterhalb des Ordners js
.
Platzieren Sie unter dem Ordner css
die .css
-Dateien und die von den CSS-Dateien verwendeten Ressourcen (z. B. my_icon.png
).
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>, ..."/>
wobei <category-nameX>
der Name der clientseitigen Bibliothek ist.
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"/><%
}
Um den Übungen auf dieser Seite zu folgen, installieren Sie das Paket Verwenden von ExtJS Widgets in einer lokalen AEM-Instanz und erstellen Sie eine Beispielseite, auf der die Komponenten enthalten sein werden. Gehen Sie dazu wie folgt vor:
Laden Sie in Ihrer AEM das Paket mit dem Namen Verwenden von ExtJS Widgets (v01) von Package Share herunter und installieren Sie das Paket. Es wird das Projekt extjstraining
unter /apps
im Repository erstellt.
Schließen Sie die Client-Bibliothek mit den Skripten (js) und dem Stylesheet (css) im head-Tag der geometrixx page jsp ein, da Sie die Beispielkomponenten in eine neue Seite der Verzweigung Geometrixx einschließen:
Öffnen Sie in CRXDE Lite die Datei /apps/geometrixx/components/page/headlibs.jsp
und fügen Sie die cq.extjstraining
-Kategorie wie folgt zum vorhandenen <ui:includeClientLib>
-Tag hinzu:
%><ui:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
Erstellen Sie eine neue Seite in der Verzweigung Geometrixx unter /content/geometrixx/en/products
und rufen Sie sie Verwenden von ExtJS Widgets auf.
Wechseln Sie in den Designmodus und fügen Sie alle Komponenten der Gruppe Using ExtJS Widgets dem Design von Geometrixx hinzu.
Zurück im Bearbeitungsmodus: Die Komponenten der Gruppe Verwenden von ExtJS Widgets sind im Sidekick verfügbar.
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. Informationen zum Herunterladen und Installieren von Geometrixx finden Sie im Dokument We.Retail Reference Implementation.
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:
http://localhost:4502/<path-to-dialog>.-1.json
Die erste Komponente der Gruppe Using ExtJS Widgets im Sidekick wird mit 1. Dialog Basics bezeichnet und umfasst vier grundlegende Dialogfelder, die mit standardmäßigen Widgets und ohne modifizierte JavaScript-Logik erstellt wurden. Die Dialogfelder werden unterhalb von /apps/extjstraining/components/dialogbasics
gespeichert. Die grundlegenden Dialogfelder sind:
das Dialogfeld „“ (Knoten full
full): Es zeigt ein Fenster mit drei Registerkarten mit jeweils zwei Textfeldern an.
das Dialogfeld „Single Panel“ (Knoten singlepanel
): Es zeigt ein Fenster mit einer Registerkarte mit zwei Textfeldern an.
das Dialogfeld „Multi Panel“ (Knoten multipanel
): Es zeigt dasselbe an wie das Dialogfeld „Full“, ist aber anders aufgebaut.
das Dialogfeld „“ (Knoten design
design): Es 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.
Fügen Sie die Komponente 1. Dialog Basics der Beispielseite hinzu:
hinzufügen Sie 1. Dialogfeldgrundlagen auf der Beispielseite von der Registerkarte Verwenden von ExtJS Widgets im Register Sidekick.
Die Komponente zeigt einen Titel, etwas Text und einen Link EIGENSCHAFTEN: Klicken Sie auf den Link, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut auf den Link, um die Eigenschaften zu verbergen.
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 Basics. Die Eigenschaften sind:
Wird durch einen Knoten definiert: node type = cq:Dialog
, xtype = dialog
.
Zeigt 3 Registerkarten an (Knotentyp = cq:Panel
).
Jede Registerkarte hat 2 Textfelder (Knotentyp = cq:Widget
, xtype = textfield
).
Wird durch den Knoten definiert:
/apps/extjstraining/components/dialogbasics/full
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://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:
Zeigt 1 Registerkarte an (Knotentyp = cq:Dialog
, xtype = panel
)
Die Registerkarte hat 2 Textfelder (Knotentyp = cq:Widget
, xtype = textfield
)
Wird durch den Knoten definiert:
/apps/extjstraining/components/dialogbasics/singlepanel
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json
Ein Vorteil gegenüber dem Dialogfeld Full besteht darin, dass weniger Konfiguration erforderlich ist.
Empfohlene Verwendung: für einfache Dialogfelder, die Informationen anzeigen oder nur wenige Felder aufweisen.
So verwenden Sie das Dialogfeld „Single Panel“:
Ersetzen Sie das Dialogfeld der Komponente Dialog Basics durch 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
und benennen Sie dialog
um.Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
Das Dialogfeld Multi Panel zeigt dasselbe wie das Dialogfeld Full, ist aber anders aufgebaut. Die Eigenschaften sind:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = tabpanel
).
Zeigt 3 Registerkarten an (Knotentyp = cq:Panel
).
Jede Registerkarte hat 2 Textfelder (Knotentyp = cq:Widget
, xtype = textfield
).
Wird durch den Knoten definiert:
/apps/extjstraining/components/dialogbasics/multipanel
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dialogbasics/multipanel.-1.json
Ein Vorteil gegenüber dem Dialogfeld Full besteht in der vereinfachten Struktur.
Empfohlene Verwendung: für Dialogfelder mit mehreren Registerkarten.
So verwenden Sie das Dialogfeld "Multi-Panel":
Ersetzen Sie das Dialogfeld der Komponente Dialoggrundlagen durch das Dialogfeld Multipanel:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
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:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt 2 Registerkarten an (Knotentyp = cq:Panel
).
Die erste Registerkarte hat ein Widget dialogfieldset
mit einem Widget textfield
und einem Widget selection
mit 3 Optionen und ein ausblendbares dialogfieldset
Widget mit einem Widget textarea
.
Die zweite Registerkarte hat ein Widget dialogfieldset
mit 4 textfield
Widgets und ein ausblendbares dialogfieldset
Widget mit 2 textfield
Widgets.
Wird durch den Knoten definiert:
/apps/extjstraining/components/dialogbasics/rich
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json
So verwenden Sie das Dialogfeld Rich:
Ersetzen Sie das Dialogfeld der Komponente Dialoggrundlagen durch das Dialogfeld Rich:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
Die zweite Komponente der Gruppe Using ExtJS Widgets im Sidekick heißt 2. Dynamic Dialogs und umfasst drei dynamische Dialogfelder, die mit standardmäßigen Widgets und modifizierter JavaScript-Logik erstellt wurden. Die Dialogfelder werden unterhalb von /apps/extjstraining/components/dynamicdialogs
gespeichert. Die dynamischen Dialoge 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
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
-Knoten): Es wird ein Fenster mit einer Registerkarte angezeigt. Die Registerkarte verfügt über ein Kontrollkästchen: Ist es aktiviert, wird ein Feldsatz mit zwei Textfeldern angezeigt.So schließen Sie 2 ein. Komponente "Dynamische Dialoge"auf der Beispielseite:
hinzufügen Sie 2. Dynamische Dialoge auf der Beispielseite über die Registerkarte Verwenden von ExtJS Widgets in Sidekick.
Die Komponente zeigt einen Titel, etwas Text und einen Link EIGENSCHAFTEN: Klicken Sie, um die Eigenschaften des im Repository gespeicherten Absatzes anzuzeigen. Klicken Sie erneut, um die Eigenschaften zu verbergen.
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 Eigenschaften sind:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt zwei Registerkarten (node type = cq:Panel
): eine Auswahlregisterkarte und eine zweite Registerkarte, die von der Auswahl auf der ersten Registerkarte abhängt (drei Optionen).
Hat 3 optionale Registerkarten (Knotentyp = cq:Panel
), jede hat 2 Textfelder (Knotentyp = cq:Widget
, xtype = textfield
). Es wird jeweils nur eine optionale Registerkarte angezeigt.
Wird durch den Knoten switchtabs
unter:
/apps/extjstraining/components/dynamicdialogs/switchtabs
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Der Knoten "dialog"hat einen Listener "beforeshow
", 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 das Tabulatorbedienfeld mit dem Auswahlbedienfeld und den 3 optionalen Bereichen ab.
Das Ejst.x2
-Objekt wird in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
In der Ejst.x2.manageTabs()
-Methode sind alle optionalen Registerkarten ausgeblendet, da der Wert von index
-1 ist (i wechselt von 1 zu 3).
Die Registerkarte "Auswahl"verfügt über zwei Listener: eine, die beim Laden des Dialogfelds die ausgewählte Registerkarte anzeigt (" loadcontent
"-Ereignis), und eine, die die ausgewählte Registerkarte anzeigt, wenn die Auswahl geändert wird (" selectionchanged
"-Ereignis):
loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"
selectionchanged="function(field,value){Ejst.x2.showTab(field);}"
Bei der Ejst.x2.showTab()
-Methode:
field.findParentByType('tabpanel')
Ruft das Tabulatorbedienfeld ab, das alle Registerkarten enthält ( field
repräsentiert das Auswahl-Widget)
field.getValue()
ruft den Wert der Auswahl ab, z. B.: tab2
Ejst.x2.manageTabs()
zeigt die ausgewählte Registerkarte an.
Jede optionale Registerkarte verfügt über einen Listener, der die Registerkarte im Ereignis "render
"ausblendet:
render="function(tab){Ejst.x2.hideTab(tab);}"
Bei der Ejst.x2.hideTab()
-Methode:
ist tabPanel
das Registerkartenbedienfeld, das alle Registerkarten enthält.
ist index
der Index der optionalen Registerkarte.
tabPanel.hideTabStripItem(index)
Blendet 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 Eigenschaften sind:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt 1 tabpanel-Widget (node type = cq:Widget
, xtype = tabpanel
) mit 1 panel (node type = cq:Panel
) an
Das Bedienfeld hat ein Smarttfile-Widget (Knotentyp = cq:Widget
, xtype = smartfile
) und ein Eigenschafts-Widget (Knotentyp = cq:Widget
, xtype = ownerdraw
)
Wird durch den Knoten arbitrary
unter:
/apps/extjstraining/components/dynamicdialogs/arbitrary
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Das Widget für die eigene Zeichnung verfügt über einen Listener "loadcontent
", der Informationen über die Seite anzeigt, die die Komponente und das Asset enthält, auf das das Widget "smartfile"beim Laden des Inhalts verweist:
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 Ejst.x2
-Objekt wird in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
Bei der Ejst.x2.showInfo()
-Methode:
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.
ownerdraw.getEl().update(html);
zeigt den erstellten HTML-Code im Dialogfeld
So verwenden Sie das Dialogfeld Arbitrary:
Ersetzen Sie das Dialogfeld der Komponente Dynamischer Dialog durch das Dialogfeld Beliebige:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
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 Eigenschaften sind:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt 1 tabpanel-Widget (node type = cq:Widget
, xtype = tabpanel
) mit 1 panel (node type = cq:Panel
) an.
Das Bedienfeld verfügt über ein Auswahl-/Kontrollkästchen-Widget (Knotentyp = cq:Widget
, xtype = selection
, type = checkbox
) und ein ausblendbares Widget für Dialogfelder (Knotentyp = cq:Widget
, xtype = dialogfieldset
), das standardmäßig ausgeblendet wird, mit 2 textfield-Widgets (Knotentyp = cq:Widget
, xtype = textfield
).
Wird durch den Knoten togglefields
unter:
/apps/extjstraining/components/dynamicdialogs/togglefields
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json
Die Logik wird wie folgt durch Ereignis-Listener und JavaScript-Code implementiert:
Die Auswahlregisterkarte enthält 2 Listener: eines, das beim Laden des Inhalts den Dialogfeldsatz anzeigt (" loadcontent
"-Ereignis), und eines, das den Dialogfeldsatz anzeigt, wenn die Auswahl geändert wird (" selectionchanged
"-Ereignis):
loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"
selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"
Das Ejst.x2
-Objekt wird in der Datei exercises.js
unter:
/apps/extjstraining/clientlib/js/exercises.js
Bei der Ejst.x2.toggleFieldSet()
-Methode:
box
ist das Auswahlobjektpanel
das Bedienfeld, das das selection- und das dialogfieldset-Widget enthält.fieldSet
ist das dialogFieldSet-Objektshow
der Wert der Auswahl („true“ oder „false“).show
“ angezeigt oder nicht.So verwenden Sie das Dialogfeld Felder ein/aus:
Ersetzen Sie das Dialogfeld der Komponente Dynamischer Dialog durch das Dialogfeld Felder ein/ein/ein/ein/ein/ein:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
Die direkt einsatzbereiten und im Lieferumfang von AEM enthaltenen Widgets sollten die meisten Anwendungsfälle abdecken. Manchmal kann es jedoch erforderlich sein, ein benutzerdefiniertes Widget zu erstellen, um eine projektspezifische Anforderung abzudecken. Benutzerdefinierte Widgets werden erstellt, indem vorhandene erweitert werden. Das Paket Using ExtJS Widgets enthält drei Dialogfelder, die drei verschiedene benutzerdefinierte Widgets verwenden, um die ersten Schritte mit der Anpassung zu vereinfachen:
Das Dialogfeld „Multi Field“ (Knoten 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.
Das Dialogfeld „Tree Browse“ (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.
Ein Dialogfeld, das auf dem Rich-Text-Editor-Plug-in basiert (Knoten 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. Custom Widgets des Pakets Using ExtJS Widgets enthalten. Fügen Sie diese Komponente wie folgt der Beispielseite hinzu:
hinzufügen Sie 3. Benutzerdefinierte Widgets auf der Beispielseite aus der Registerkarte Verwenden von ExtJS Widgets im Register Sidekick.
Die Komponente zeigt einen Titel, etwas Text und, wenn Sie auf den Link EIGENSCHAFTEN klicken, die Eigenschaften des im Repository gespeicherten Absatzes an. Durch erneutes Klicken werden die Eigenschaften verborgen.
Die Komponente wird wie im Folgenden dargestellt:
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:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt 1 tabpanel-Widget (Knotentyp = cq:Widget
, xtype = tabpanel
) mit einem Bereich (Knotentyp = cq:Widget
, xtype = panel
) an.
Das Bedienfeld hat ein Widget multifield
(Knotentyp = cq:Widget
, xtype = multifield
).
Das Widget multifield
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 Objekts CQ.form.MultiField
.
' optionsProvider
' ist eine Konfiguration des Widgets ejstcustom
. Er wird mit der Ejst.x3.provideOptions
-Methode eingestellt, die in exercises.js
bei:
/apps/extjstraining/clientlib/js/exercises.js
und gibt 2 Optionen zurück.
Wird durch den Knoten multifield
unter:
/apps/extjstraining/components/customwidgets/multifield
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json
Das benutzerdefinierte Multifield-Widget (xtype = ejstcustom
):
Ist ein JavaScript-Objekt namens Ejst.CustomWidget
.
Ist in der JavaScript-Datei CustomWidget.js
definiert unter:
/apps/extjstraining/clientlib/js/CustomWidget.js
Erweitert das Widget CQ.form.CompositeField
.
Enthält 3 Felder: hiddenField
(Textfeld), allowField
(ComboBox) und otherField
(Textfeld)
Überschreibt CQ.Ext.Component#initComponent
, um die 3 Felder hinzuzufügen:
allowField
ist ein CQ.form.Selection-Objekt vom Typ „select“. optionsProvider ist eine Konfiguration des Selection-Objekts, das mit der optionsProvider-Konfiguration des CustomWidget instanziiert wird, die im DialogfeldotherField
ist ein CQ.Ext.form.TextField-Objekt.Überschreibt die Methoden setValue
, getValue
und getRawValue
von CQ.form.CompositeField, um den Wert von CustomWidget mit folgendem Format festzulegen und abzurufen:
<allowField value>/<otherField value>, e.g.: 'Bla1/hello'
.
Registriert sich als " ejstcustom
" xtype:
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:
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = dialog
).
Zeigt 1 tabpanel-Widget (Knotentyp = cq:Widget
, xtype = tabpanel
) mit einem Bereich (Knotentyp = cq:Widget
, xtype = panel
) an.
Das Bedienfeld verfügt über ein benutzerdefiniertes Widget (Knotentyp = cq:Widget
, xtype = ejstbrowse
)
Wird durch den Knoten treebrowse
unter:
/apps/extjstraining/components/customwidgets/treebrowse
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json
Das benutzerdefinierte treebrowse-Widgets (xtype = ejstbrowse
):
Ist ein JavaScript-Objekt namens Ejst.CustomWidget
.
Ist in der JavaScript-Datei CustomBrowseField.js
definiert unter:
/apps/extjstraining/clientlib/js/CustomBrowseField.js
Erweitert CQ.Ext.form.TriggerField
.
Definiert ein Fenster zum Durchsuchen namens browseWindow
.
Überschreibt CQ.Ext.form.TriggerField
, um das Fenster "Durchsuchen"anzuzeigen, wenn auf den Pfeil geklickt wird.
Definiert ein CQ.Ext.tree.TreePanel
-Objekt:
/bin/wcm/siteadmin/tree.json
registriert wird.apps/extjstraining
".Definiert ein window
-Objekt (CQ.Ext.Window
):
Das Fenster wird unterhalb des Feldes Pfad verankert.
Der ausgewählte Pfad wird bei einem show
-Ereignis vom Durchsuchfeld an das Fenster weitergegeben.
Registriert sich als " ejstbrowse
" xtype:
CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);
So verwenden Sie das Widget-basierte Dialogfeld Benutzerdefinierte Treebrowse:
Ersetzen Sie das Dialogfeld der Komponente Benutzerspezifische Widgets durch das Dialogfeld Benutzerdefinierte Treebrowse:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente: Das Dialogfeld wird wie im Folgenden dargestellt:
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 serverseitigen 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:
Wird durch den Knoten rteplugin definiert unter:
/apps/extjstraining/components/customwidgets/rteplugin
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json
Der Knoten rtePlugins
hat einen untergeordneten Knoten inserttext
(Knotentyp = nt:unstructured
), der nach dem Plugin 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:
Ist ein JavaScript-Objekt namens Ejst.InsertTextPlugin
.
Ist in der JavaScript-Datei InsertTextPlugin.js
definiert unter:
/apps/extjstraining/clientlib/js/InsertTextPlugin.js
Erweitert das CQ.form.rte.plugins.Plugin
-Objekt.
Die folgenden Methoden definieren das 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 apply()
Methode des Dialogfelds aufgerufen, die ausgelöst wird, wenn auf die Schaltfläche OK geklickt wird.
Registriert sich als ' inserttext
' Plugin:
CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);
Das 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:
Ersetzen Sie das Dialogfeld der Komponente Benutzerspezifische Widgets durch das Dialogfeld Rich Text Editor (RTE) Plug-in:
Führen Sie die für Beispiel 2 beschriebenen Schritte aus: Dialogfeld für einzelne Bereiche
Bearbeiten Sie die Komponente.
Klicken Sie auf das letzte Symbol auf der rechten Seite (das Symbol mit vier Pfeilen). Geben Sie einen Pfad ein und klicken Sie auf OK:
Der Pfad wird in Klammern ([]
) angezeigt.
Klicken Sie auf OK, um den Rich-Text-Editor zu schließen.
Das auf dem Rich-Text-Editor (RTE)-Plug-in basierende Dialogfeld wird wie folgt angezeigt:
Dieses Beispiel zeigt nur, wie der clientseitige Teil der Logik implementiert wird: Die Platzhalter ([text]) müssen dann explizit auf der Serverseite analysiert werden (z. B. in der Komponente JSP).
Das im Lieferumfang enthaltene CQ.Ext.tree.TreePanel
-Objekt bietet eine baumstrukturierte Benutzeroberflächendarstellung baumstrukturierter Daten. Die im Paket Using ExtJS Widgets enthaltene Komponente „Tree Overview“ 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:
hinzufügen Sie 4. Baum-Übersicht auf der Beispielseite von der Registerkarte Verwenden von ExtJS Widgets in Sidekick.
Die Komponente zeigt:
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:
Ruft die Breite, Höhe und angedockten Eigenschaften aus dem Repository ab.
Zeigt Text zum Datenformat des Baumstrukturüberblicks an.
Bettet die Fensterlogik zwischen JavaScript-Tags in die Komponenten-JSP ein.
Wird definiert unter:
apps/extjstraining/components/treeoverview/content.jsp
Der in die Komponenten-JSP eingebettete JavaScript-Code:
Definiert ein tree
-Objekt, indem versucht wird, ein Baumstrukturfenster von der Seite abzurufen.
Wenn das Fenster mit der Struktur nicht vorhanden ist, wird treePanel
(CQ.Ext.tree.TreePanel) erstellt:
treePanel
enthält die Daten, anhand derer das Fenster erstellt wird.
Die Daten werden abgerufen, indem das Servlet aufgerufen wird, registriert unter:
/bin/wcm/siteadmin/tree.json
Der Listener beforeload
stellt sicher, dass der angeklickte Knoten geladen wird.
Das root
-Objekt legt den Pfad apps/extjstraining
als Baumstamm fest.
tree
(CQ.Ext.Window
) auf der Grundlage der vordefinierten treePanel
und wird angezeigt mit:
tree.show();
Wenn das Fenster bereits vorhanden ist, wird es anhand der aus dem Repository abgerufenen Breite, Höhe und angedockten Eigenschaften angezeigt.
Das Komponentendialogfeld:
Zeigt eine Registerkarte mit zwei Feldern zum Festlegen der Größe (Breite und Höhe) des Fensters des Baumstrukturüberblicks und ein Feld zum An-/Abdocken des Fensters.
Ist durch einen Knoten definiert (Knotentyp = cq:Dialog
, xtype = panel
).
Das Bedienfeld verfügt über ein Widget für Größe (Knotentyp = cq:Widget
, xtype = sizefield
) und ein Auswahl-Widget (Knotentyp = cq:Widget
, xtype = selection
, type = radio
) mit 2 Optionen (true/false)
Wird durch den Knoten dialog unter:
/apps/extjstraining/components/treeoverview/dialog
Wird im JSON-Format wiedergegeben, indem Sie Folgendes anfordern:
http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json
Wird wie folgt angezeigt:
Ein „Grid Panel“ stellt Daten in tabellarischer Form als Zeilen und Spalten dar. Es setzt sich aus Folgendem zusammen:
Die Komponente "Rasterübersicht"im Paket Verwenden von ExtJS Widgets zeigt, wie Daten in einem Tabellenformat angezeigt werden:
So fügen Sie die Komponente "Rasterübersicht"zur Beispielseite hinzu:
hinzufügen Sie 5. Rasterübersicht auf der Beispielseite über die Registerkarte Verwenden von ExtJS Widgets im Register Sidekick.
Die Komponente zeigt:
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“:
Wird definiert unter:
/apps/extjstraining/components/gridoverview
Ihr Dialogfeld ermöglicht das Festlegen der Fenstergröße und das An- bzw.- Abdocken des Fensters.
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:
Definiert das grid
-Objekt, indem versucht wird, die Fensterkomponente von der Seite abzurufen:
var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");
Wenn grid
nicht vorhanden ist, wird ein CQ.Ext.grid.GridPanel-Objekt ( gridPanel
) durch Aufruf der getGridPanel()
-Methode definiert (siehe unten). Diese Methode wird in defaultgrid.js
definiert.
grid
ist ein CQ.Ext.Window
Objekt, das auf dem vordefinierten GridPanel basiert und angezeigt wird: grid.show();
Wenn grid
bereits vorhanden ist, wird es basierend auf den vom Repository abgerufenen Eigenschaften width, height und docked angezeigt.
Die JavaScript-Datei ( defaultgrid.js
), auf die in der Komponenten-JSP verwiesen wird, definiert die Methode getGridPanel()
, die durch das im JSP eingebettete Skript aufgerufen wird, und gibt ein 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 konsumiert myData
.
store
im Arbeitsspeicher geladen wird:
store.load();
gridPanel
ist ein CQ.Ext.grid.GridPanel
Objekt, das Folgendes konsumiert store
:
Die Spaltenbreiten werden jederzeit neu proportional angepasst:
forceFit: true
Es kann jeweils nur eine Zeile ausgewählt werden:
singleSelect:true
Wenn Sie das Paket installieren, zeigt 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 im vorherigen Abschnitt erläutert, ruft das window-Objekt das CQ.Ext.grid.GridPanel
-Objekt ab, indem die getGridPanel()
-Methode aufgerufen wird, die in der defaultgrid.js
-Datei unter /apps/extjstraining/components/gridoverview/defaultgrid.js
definiert ist. Die Komponente Rasterübersicht bietet eine andere Implementierung für die Methode getGridPanel()
, die in der Datei referencesearch.js
unter /apps/extjstraining/components/gridoverview/referencesearch.js
definiert ist. 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:
Komprimieren Sie in CRXDE Lite in der content.jsp
-Komponentendatei die Zeile, die die defaultgrid.js
-Datei enthält, sodass sie wie folgt aussieht:
<!-- script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script-->
Entfernen Sie den Kommentar aus der Zeile mit der Datei referencesearch.js
, sodass er wie folgt aussieht:
<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/referencesearch.js"></script>
Speichern Sie die Änderungen.
Aktualisieren Sie die Beispielseite.
Die Komponente wird wie im Folgenden dargestellt:
Der in der Komponente jsp (referencesearch.js
) referenzierte JavaScript-Code definiert die getGridPanel()
-Methode, die von der Komponente jsp aufgerufen wird, und gibt ein CQ.Ext.grid.GridPanel
-Objekt zurück, basierend auf Daten, 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
-Objekt, das die Servlet-Antwort im JSON-Format für drei Spalten liest.
cm
ist ein CQ.Ext.grid.ColumnModel
Objekt für 3 Spalten.
Die Zellen der Spalte "Test"können bearbeitet werden, da sie mit einem Editor definiert wurden:
editor: new
CQ.Ext.form.TextField
({})
Die Spalten sind sortierbar:
cm.defaultSortable = true;
store
ist ein CQ.Ext.data.GroupingStore
Objekt:
/bin/querybuilder.json
"registriert ist, mit einigen Parametern, die zum Filtern der Abfrage verwendet werdenreader
.gridPanel
ist ein CQ.Ext.grid.EditorGridPanel
Objekt, das bearbeitet werden kann:
Es basiert auf dem vordefinierten store
und auf dem Spaltenmodell cm
.
Es kann jeweils nur eine Zeile ausgewählt werden:
sm: new
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 im Pfad, der durch die Spalte "jcr:path"definiert wird, wird im Repository mit dem Wert der Zelle festgelegtstore
-Objekt hinzugefügt, andernfalls wird er abgelehnt.