Verwenden und Erweitern von Widgets (klassische Benutzeroberfläche) using-and-extending-widgets-classic-ui

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 einschließen:

<ui:includeClientLib js="<category-name>"/>

das Dialogfeld „“ (Knoten fullfull): 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 designdesign): 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.

Wird von einem Knoten definiert: node type = cq:Dialog, xtype = dialog.

Zeigt drei Registerkarten (node type = cq:Panel).

Jede Registerkarte weist zwei Textfelder auf (node type = cq:Widget, xtype = textfield).

Wird durch den Knoten definiert:

/apps/extjstraining/components/dialogbasics/full

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dialogbasics/full.-1.json

Zeigt eine Registerkarte (node type = cq:Dialog, xtype = panel)

Die Registerkarte weist zwei Textfelder auf (node type = cq:Widget, xtype = textfield)

Wird durch den Knoten definiert:

/apps/extjstraining/components/dialogbasics/singlepanel

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dialogbasics/singlepanel.-1.json

Ein Vorteil gegenüber dem Vollständiger Dialog ist, dass weniger Konfiguration erforderlich ist.

Empfohlene Verwendung: für einfache Dialogfelder, die Informationen anzeigen oder nur wenige Felder haben.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = tabpanel).

Zeigt drei Registerkarten (node type = cq:Panel).

Jede Registerkarte weist zwei Textfelder auf (node type = cq:Widget, xtype = textfield).

Wird durch den Knoten definiert:

/apps/extjstraining/components/dialogbasics/multipanel

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

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.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = dialog).

Zeigt zwei Registerkarten (node type = cq:Panel).

Die erste Registerkarte verfügt über ein dialogfieldset-Widget mit einem textfield- und einem selection-Widget mit drei Optionen sowie ein ausblendbares dialogfieldset mit einem textarea-Widget.

Die zweite Registerkarte verfügt über ein dialogfieldset-Widget mit vier textfield-Widgets und ein ausblendbares dialogfieldset mit zwei textfield-Widgets.

Wird durch den Knoten definiert:

/apps/extjstraining/components/dialogbasics/rich

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dialogbasics/rich.-1.json

Wird von einem Knoten definiert (node type = 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).

Weist drei optionale Registerkarten (node type = cq:Panel) mit jeweils zwei Textfeldern (node type = cq:Widget, xtype = textfield) auf. Es wird jeweils nur eine optionale Registerkarte angezeigt.

Wird definiert durch den Knoten switchtabs unter:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/switchtabs.-1.json

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.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = dialog).

Zeigt ein tabpanel-Widget (node type = cq:Widget, xtype = tabpanel) mit einem Bedienfeld (node type = cq:Panel)

Das Bedienfeld verfügt über ein smartfile-Widget (Knotentyp = cq:Widget, xtype = smartfile) und ein ownerdraw-Widget (Knotentyp = cq:Widget, xtype = ownerdraw)

Wird definiert durch den Knoten arbitrary unter:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/arbitrary.-1.json

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.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = dialog).

Zeigt ein tabpanel-Widget (node type = cq:Widget, xtype = tabpanel) mit einem Bedienfeld (node type = cq:Panel).

Das Bedienfeld weist ein -/checkbox-Widget (node type = cq:Widget, xtype = selectionselection, type = checkbox) und ein ausblendbares (und standardmäßig ausgeblendetes) dialogfieldset-Widget (node type = cq:Widget, xtype = dialogfieldset) mit zwei textfield-Widgets (node type = cq:Widget, xtype = textfield) auf.

Wird definiert durch den Knoten togglefields unter:

/apps/extjstraining/components/dynamicdialogs/togglefields

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/dynamicdialogs/togglefields.-1.json

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" das dialogfieldset angezeigt wird oder nicht

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.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = dialog).

Zeigt ein tabpanel-Widget (node type = cq:Widget, xtype = tabpanel) mit einem Bedienfeld (node type = cq:Widget, xtype = panel).

Das Bedienfeld weist ein multifield-Widget (node type = cq:Widget, xtype = multifield) auf.

Das 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-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 2 Optionen zurück.

Wird definiert durch den Knoten multifield unter:

/apps/extjstraining/components/customwidgets/multifield

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/customwidgets/multifield.-1.json

Ist ein JavaScript-Objekt namens Ejst.CustomWidget.

Wird definiert in der JavaScript-Datei CustomWidget.js unter:

/apps/extjstraining/clientlib/js/CustomWidget.js

Erweitert das Widget CQ.form.CompositeField.

Weist drei Felder auf: hiddenField (Textfeld), allowField (Kombinationsfeld) und otherField (Textfeld)

Überschreibt 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.

Überschreibt die Methoden 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'.

Registriert sich selbst als xtype „ejstcustom“:

CQ.Ext.reg('ejstcustom', Ejst.CustomWidget);

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = dialog).

Zeigt ein tabpanel-Widget (node type = cq:Widget, xtype = tabpanel) mit einem Bedienfeld (node type = cq:Widget, xtype = panel).

Das Bedienfeld weist ein benutzerdefiniertes Widget (node type = cq:Widget, xtype = ejstbrowse) auf.

Wird definiert durch den Knoten treebrowse unter:

/apps/extjstraining/components/customwidgets/treebrowse

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/customwidgets/treebrowse.-1.json

Ist ein JavaScript-Objekt namens Ejst.CustomWidget.

Wird definiert in der JavaScript-Datei CustomBrowseField.js 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 zum Durchsuchen anzuzeigen, wenn auf den Pfeil geklickt wird.

Definiert ein CQ.Ext.tree.TreePanel-Objekt:

• Es ruft Daten ab, indem es das Servlet aufruft, das unter /bin/wcm/siteadmin/tree.json registriert ist.
• Sein Stamm ist „apps/extjstraining“.

Definiert ein window-Objekt (CQ.Ext.Window):

• Basierend auf dem vordefinierten Bedienfeld.
• Weist eine OK-Schaltfläche auf, die den Wert des ausgewählten Pfads festlegt und das Bedienfeld ausblendet.

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 selbst als xtype „ejstbrowse“:

CQ.Ext.reg('ejstbrowse', Ejst.CustomBrowseField);

Wird definiert durch den Knoten „rteplugin“ unter:

/apps/extjstraining/components/customwidgets/rteplugin

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/customwidgets/rteplugin.-1.json

Der Knoten 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.

Ist ein JavaScript-Objekt namens Ejst.InsertTextPlugin.

Wird definiert in der JavaScript-Datei InsertTextPlugin.js 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 Methode apply() des Dialogfelds aufgerufen, die ausgelöst wird, wenn auf die Schaltfläche OK geklickt wird.

Registriert sich selbst als „inserttext“-Plug-in:

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).

Wird definiert unter:

/apps/extjstraining/components/treeoverview

Sein Dialogfeld ermöglicht es, die Größe des Fensters festzulegen und das Fenster anzudocken/zu lösen (siehe Details unten).

Ruft die Breite, Höhe und angedockten Eigenschaften aus dem Repository ab.

Zeigt Text zum Datenformat der Baumübersicht an.

Bettet die Fensterlogik zwischen JavaScript-Tags in die Komponenten-JSP ein.

Wird definiert unter:

apps/extjstraining/components/treeoverview/content.jsp

Definiert ein tree-Objekt, indem versucht wird, ein Baumstrukturfenster von der Seite abzurufen.

Wenn das Fenster, das die Baumstruktur anzeigt, nicht vorhanden ist, wird 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

Der beforeload-Listener stellt sicher, dass der gewählte Knoten geladen wird.

Das root-Objekt legt den Pfad apps/extjstraining als Stamm der Baumstruktur fest.

tree (CQ.Ext.Window) wird basierend auf der vordefinierten treePanelund 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.

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.

Wird von einem Knoten definiert (node type = cq:Dialog, xtype = panel).

Das Bedienfeld weist ein sizefield-Widget (node type = cq:Widget, xtype = sizefield) und ein selection-Widget (node type = cq:Widget, xtype = selection, type = radio) mit zwei Optionen (true/false) auf.

Wird definiert durch den dialog-Knoten unter:

/apps/extjstraining/components/treeoverview/dialog

Wird im JSON-Format gerendert, indem Folgendes angefragt wird:

http://localhost:4502/apps/extjstraining/components/treeoverview/dialog.-1.json

Wird wie folgt angezeigt:

Wird definiert unter:

/apps/extjstraining/components/gridoverview

Sein Dialogfeld ermöglicht es, die Größe des Fensters festzulegen und das Fenster anzudocken/zu lösen.

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

Definiert das grid-Objekt, indem versucht wird, die Fensterkomponente von folgender Seite abzurufen:

var grid = CQ.Ext.getCmp("<%= node.getName() %>-grid");

Wenn 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-Objekt, das auf dem vordefinierten GridPanel basiert, und wird angezeigt als: grid.show();

Wenn grid bereits vorhanden ist, wird sie basierend auf den vom Repository abgerufenen Eigenschaften für Breite, Höhe und angedockte Elemente angezeigt.

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, das store verbraucht:

• Die Spaltenbreiten werden ständig neu proportioniert:

  forceFit: true

• Nur eine Zeile kann jeweils ausgewählt werden:

  singleSelect:true

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 drei Spalten.

Die „Test“-Spaltenzellen können bearbeitet werden, da sie mit einem Editor definiert werden:

editor: new CQ.Ext.form.TextField({})

die Spalten sind sortierbar:

cm.defaultSortable = true;

store ist CQ.Ext.data.GroupingStore-Objekt:

• Es ruft seine Daten ab, indem es das unter „/bin/querybuilder.json“ registrierte Servlet mit einigen Parametern zum Filtern der Abfrage aufruft.
• Es basiert auf dem vorher definierten reader.
• Die Tabelle wird anhand der Spalte „jcr:path“ in aufsteigender Reihenfolge definiert.

gridPanel ist ein 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({singleSelect:true})

• Der afteredit-Listener stellt sicher, dass nach der Bearbeitung einer Zelle in der „Test“-Spalte Folgendes passiert:

  • Die Eigenschaft „test“ des Knotens an dem durch die Spalte „jcr:path“ definierten Pfad wird im Repository mit dem Wert der Zelle festgelegt.
  • Wenn der POST erfolgreich ist, wird der Wert dem store-Objekt hinzugefügt, andernfalls wird er abgelehnt.