Widgets gebruiken en uitbreiden (klassieke UI) using-and-extending-widgets-classic-ui

om zowel javascript-code als stijlpagina's op te nemen:

<ui:includeClientLib categories="<category-name1>, <category-name2>, ..."/>

waar <category-nameX> is de naam van de bibliotheek aan de clientzijde.

alleen javascript-code opnemen:

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

het volledige dialoogvenster ( full knooppunt): er wordt een venster weergegeven met drie tabbladen, die elk twee tekstvelden hebben.

Het dialoogvenster Eén deelvenster ( singlepanel knooppunt): er wordt een venster weergegeven met 1 tab die 2 tekstvelden heeft.

Het dialoogvenster Meerdere deelvensters ( multipanel knooppunt): de weergave is hetzelfde als het dialoogvenster Volledig, maar het is anders opgebouwd.

het dialoogvenster Ontwerpen( design knooppunt): er wordt een venster weergegeven met twee tabbladen. De eerste tab heeft een tekstveld, een vervolgkeuzemenu en een inklapbaar tekstgebied. Het tweede tabblad bevat een veldset met 4 tekstvelden en een inklapbaar veld met 2 tekstvelden.

Wordt gedefinieerd door een knooppunt: knooppunttype = cq:Dialog, xtype = dialog.

Geeft 3 tabbladen weer (knooppunttype = cq:Panel).

Elke tab heeft twee tekstvelden (knooppunttype = cq:Widget, xtype = textfield).

Wordt gedefinieerd door het knooppunt:

/apps/extjstraining/components/dialogbasics/full

Wordt in JSON-indeling weergegeven door het volgende aan te vragen:

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

Geeft 1 tab weer (knooppunttype = cq:Dialog, xtype = panel)

De tab heeft twee tekstvelden (knooppunttype = cq:Widget, xtype = textfield)

Wordt gedefinieerd door het knooppunt:

/apps/extjstraining/components/dialogbasics/singlepanel

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Eén voordeel ten opzichte van Volledig dialoogvenster is dat er minder configuratie nodig is.

Aanbevolen gebruik: voor eenvoudige dialoogvensters die informatie weergeven of slechts een paar velden bevatten.

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = tabpanel).

Geeft 3 tabbladen weer (knooppunttype = cq:Panel).

Elke tab heeft twee tekstvelden (knooppunttype = cq:Widget, xtype = textfield).

Wordt gedefinieerd door het knooppunt:

/apps/extjstraining/components/dialogbasics/multipanel

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Eén voordeel ten opzichte van Volledig dialoogvenster is dat het een vereenvoudigde structuur heeft.

Aanbevolen gebruik: voor dialoogvensters met meerdere tabbladen.

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 2 tabbladen weer (knooppunttype = cq:Panel).

Het eerste tabblad bevat een dialogfieldset widget met een textfield en selection widget met 3 opties en een inklapbaar object dialogfieldset met een textarea widget.

Het tweede tabblad bevat een dialogfieldset widget met 4 textfield widgets en een inklapbaar dialogfieldset met 2 textfield widgets.

Wordt gedefinieerd door het knooppunt:

/apps/extjstraining/components/dialogbasics/rich

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 2 tabbladen weer (knooppunttype = cq:Panel): 1 selectietab. is het tweede tabblad afhankelijk van de selectie op het eerste tabblad (3 opties).

Bevat 3 optionele tabbladen (knooppunttype = cq:Panel), heeft elk twee tekstvelden (knooppunttype = cq:Widget, xtype = textfield). Er wordt slechts één optioneel tabblad tegelijk weergegeven.

Wordt gedefinieerd door de switchtabs knooppunt bij:

/apps/extjstraining/components/dynamicdialogs/switchtabs

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Het knooppunt Dialoogvenster heeft een " beforeshow" listener die alle optionele tabbladen verbergt voordat het dialoogvenster wordt weergegeven:

beforeshow="function(dialog){Ejst.x2.manageTabs(dialog.items.get(0));}"

dialog.items.get(0) Hiermee krijgt u het deelvenster met tabbladen dat het selectievenster en de drie optionele deelvensters bevat.

De Ejst.x2 object wordt gedefinieerd in het dialoogvenster exercises.js bestand op:

/apps/extjstraining/clientlib/js/exercises.js

In de Ejst.x2.manageTabs() als de waarde van index is -1, zijn alle optionele tabbladen verborgen (ik ga van 1 naar 3).

Het selectietabblad heeft twee listeners: een tab die het geselecteerde tabblad weergeeft wanneer het dialoogvenster wordt geladen (" loadcontent" (gebeurtenis) en een item dat het geselecteerde tabblad weergeeft wanneer de selectie wordt gewijzigd (" selectionchanged" (gebeurtenis):

loadcontent="function(field,rec,path){Ejst.x2.showTab(field);}"

selectionchanged="function(field,value){Ejst.x2.showTab(field);}"

In de Ejst.x2.showTab() methode:

field.findParentByType('tabpanel') Hiermee wordt het deelvenster met tabbladen opgehaald dat alle tabbladen bevat ( field staat voor de selectiewidget)

field.getValue() Hiermee wordt de waarde van de selectie opgehaald, bijvoorbeeld: tab2

Ejst.x2.manageTabs() geeft het geselecteerde tabblad weer.

Elk optioneel tabblad bevat een listener die het tabblad " render" gebeurtenis:

render="function(tab){Ejst.x2.hideTab(tab);}"

In de Ejst.x2.hideTab() methode:

tabPanel is het deelvenster met tabbladen dat alle tabbladen bevat

index is de index van het optionele tabblad

tabPanel.hideTabStripItem(index) verbergt de tab

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 1 widget van tabbladen weer (knooppunttype = cq:Widget, xtype = tabpanel) met 1 paneel (knooppunttype = cq:Panel)

Het deelvenster heeft een widget voor een slim bestand (knooppunttype = cq:Widget, xtype = smartfile) en een ownerdraw-widget (knooppunttype = cq:Widget, xtype = ownerdraw)

Wordt gedefinieerd door de arbitrary knooppunt bij:

/apps/extjstraining/components/dynamicdialogs/arbitrary

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

De ownerdraw-widget heeft een " loadcontent" listener die informatie weergeeft over de pagina die de component bevat en het element waarnaar wordt verwezen door de widget voor het slimme bestand wanneer de inhoud wordt geladen:

loadcontent="function(field,rec,path){Ejst.x2.showInfo(field,rec,path);}"

field wordt ingesteld met het eigentekenobject

path wordt ingesteld met het inhoudspad van de component (bijvoorbeeld: /content/geometrixx/nl/products/triangle/ui-tutorial/jcr:content/par/dynamicdialogs)

De Ejst.x2 object wordt gedefinieerd in het dialoogvenster exercises.js bestand op:

/apps/extjstraining/clientlib/js/exercises.js

In de Ejst.x2.showInfo() methode:

pagePath is het pad van de pagina die de component bevat

pageInfo geeft de pagina-eigenschappen in de json-indeling aan

reference is het pad van het element waarnaar wordt verwezen

metadata vertegenwoordigt de metagegevens van het element in json-indeling

ownerdraw.getEl().update(html); Hiermee wordt de gemaakte HTML weergegeven in het dialoogvenster

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 1 widget van tabbladen weer (knooppunttype = cq:Widget, xtype = tabpanel) met 1 paneel (knooppunttype = cq:Panel).

Het deelvenster heeft een widget selectie/selectievakje (knooppunttype = cq:Widget, xtype = selection, type = checkbox) en een inklapbaar dialogfieldset-widget (knooppunttype = cq:Widget, xtype = dialogfieldset) die standaard verborgen is, met 2 tekstveldobjecten (knooppunttype = cq:Widget, xtype = textfield).

Wordt gedefinieerd door de togglefields knooppunt bij:

/apps/extjstraining/components/dynamicdialogs/togglefields

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

het selectietabblad heeft twee listeners: die de dialogfieldset weergeeft wanneer de inhoud wordt geladen (" loadcontent" (gebeurtenis) en een gebeurtenis die de dialogfieldset weergeeft wanneer de selectie wordt gewijzigd (" selectionchanged" (gebeurtenis):

loadcontent="function(field,rec,path){Ejst.x2.toggleFieldSet(field);}"

selectionchanged="function(field,value){Ejst.x2.toggleFieldSet(field);}"

De Ejst.x2 object wordt gedefinieerd in het dialoogvenster exercises.js bestand op:

/apps/extjstraining/clientlib/js/exercises.js

In de Ejst.x2.toggleFieldSet() methode:

• box is het selectieobject
• panel Dit is het deelvenster met de selectie en de widgets voor de dialogfieldset
• fieldSet is het dialogfieldset-object
• show is de waarde van de selectie (waar of onwaar)
• gebaseerd op ' show' De dialogfieldset wordt al dan niet weergegeven

Het dialoogvenster Meerdere velden ( multifield node) geeft een venster weer met één tab. De tab heeft een aangepaste widget met meerdere velden die twee velden heeft: een vervolgkeuzemenu met twee opties en een tekstveld. Omdat het gebaseerd is op het uit-van-de-doos multifield widget (die alleen een tekstveld heeft), heeft deze alle functies van de multifield widget.

Het dialoogvenster Bladeren in structuur ( treebrowse knooppunt) geeft een venster weer met één tabblad dat een widget voor padbrowsers bevat: wanneer u op de pijl klikt, wordt een venster geopend waarin u door een hiërarchie kunt bladeren en een item kunt selecteren. Het pad van het item wordt vervolgens toegevoegd aan het padveld en wordt voortgezet wanneer het dialoogvenster wordt gesloten.

een op plug-in gebaseerd dialoogvenster van de teksteditor ( rteplugin node) die een aangepaste knop toevoegt aan de Rich Text Editor om aangepaste tekst in te voegen in de hoofdtekst. Het bestaat uit een richtext widget (RTE) en van een douaneeigenschap die door het mechanisme van de stop van RTE wordt toegevoegd.

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 1 widget van tabbladen weer (knooppunttype = cq:Widget, xtype = tabpanel) met een deelvenster (knooppunttype = cq:Widget, xtype = panel).

Het deelvenster bevat een multifield widget (knooppunttype = cq:Widget, xtype = multifield).

De multifield widget heeft een fieldconfig (knooppunttype = nt:unstructured, xtype = ejstcustom, optionsProvider = Ejst.x3.provideOptions) die is gebaseerd op het aangepaste xtype ' ejstcustom":

• ' fieldconfig' is een configuratieoptie van de CQ.form.MultiField object.

• ' optionsProvider' is een configuratie van de ejstcustom widget. Deze is ingesteld met de Ejst.x3.provideOptions methode die wordt gedefinieerd in exercises.js om:

  /apps/extjstraining/clientlib/js/exercises.js

  en retourneert twee opties.

Wordt gedefinieerd door de multifield knooppunt bij:

/apps/extjstraining/components/customwidgets/multifield

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Is een JavaScript-object dat wordt aangeroepen Ejst.CustomWidget.

Is gedefinieerd in de CustomWidget.js javascript-bestand op:

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

Hiermee breidt u de CQ.form.CompositeField widget.

Bevat 3 velden: hiddenField (TextField), allowField (ComboBox) en otherField (TextField)

Overschrijvingen CQ.Ext.Component#initComponent om de drie velden toe te voegen:

• allowField is een CQ.form.Selection object van het type 'select'. optionsProvider is een configuratie van het Selection-object die wordt geïnstantieerd met de optionsProvider-configuratie van de CustomWidget die is gedefinieerd in het dialoogvenster
• otherField is een CQ.Ext.form.TextField object

Hiermee overschrijft u de methoden setValue, getValue en getRawValue van CQ.form.CompositeField om de waarde van CustomWidget met de indeling in te stellen en op te halen:

<allowField value>/<otherField value>, e.g.: 'Bla1/hello'.

Registreert zichzelf als ' ejstcustom' xtype:

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

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = dialog).

Geeft 1 widget van tabbladen weer (knooppunttype = cq:Widget, xtype = tabpanel) met een deelvenster (knooppunttype = cq:Widget, xtype = panel).

Het deelvenster heeft een aangepaste widget (knooppunttype = cq:Widget, xtype = ejstbrowse)

Wordt gedefinieerd door de treebrowse knooppunt bij:

/apps/extjstraining/components/customwidgets/treebrowse

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Is een JavaScript-object dat wordt aangeroepen Ejst.CustomWidget.

Is gedefinieerd in de CustomBrowseField.js javascript-bestand op:

/apps/extjstraining/clientlib/js/CustomBrowseField.js

Uitbreidingen CQ.Ext.form.TriggerField.

Hiermee definieert u een bladervenster met de naam browseWindow.

Overschrijvingen CQ.Ext.form.TriggerField om het bladervenster te tonen wanneer de pijl wordt geklikt.

Definieert een CQ.Ext.tree.TreePanel object:

• Het krijgt zijn gegevens door servlet te roepen die bij wordt geregistreerd /bin/wcm/siteadmin/tree.json.
• De basis is " apps/extjstraining".

Definieert een window object (CQ.Ext.Window):

• Gebaseerd op het vooraf gedefinieerde deelvenster.
• Heeft een OK die de waarde van het geselecteerde pad instelt en het deelvenster verbergt.

Het venster is verankerd onder de Pad veld.

Het geselecteerde pad wordt van het bladerveld naar het venster doorgegeven show gebeurtenis.

Registreert zichzelf als ' ejstbrowse' xtype:

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

Wordt gedefinieerd door het knooppunt rteplugin op:

/apps/extjstraining/components/customwidgets/rteplugin

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

De rtePlugins node heeft een onderliggende node inserttext (knooppunttype = nt:unstructured) genoemd naar de plug-in. Het heeft een eigenschap genaamd features, die bepaalt welke van de plugin eigenschappen beschikbaar aan RTE zijn.

Is een JavaScript-object dat wordt aangeroepen Ejst.InsertTextPlugin.

Is gedefinieerd in de InsertTextPlugin.js javascript-bestand op:

/apps/extjstraining/clientlib/js/InsertTextPlugin.js

Hiermee breidt u de CQ.form.rte.plugins.Plugin object.

De volgende methoden definiëren de CQ.form.rte.plugins.Plugin -object en worden overschreven in de implementerende plug-in:

• getFeatures() retourneert een array met alle functies die de plug-in beschikbaar stelt.
• initializeUI() voegt de nieuwe knoop aan de toolbar van RTE toe.
• notifyPluginConfig() geeft de titel en de tekst weer wanneer de knop wordt aangeroepen.
• execute() wordt aangeroepen wanneer op de knop wordt geklikt en de insteekactie wordt uitgevoerd: er wordt een venster weergegeven waarin de tekst wordt gedefinieerd die moet worden opgenomen.

insertText() voegt tekst in met behulp van het bijbehorende dialoogobject Ejst.InsertTextPlugin.Dialog (zie hierna).

executeInsertText() wordt opgeroepen door apply() methode van de dialoog, die wordt teweeggebracht wanneer OK wordt geklikt.

Registreert zichzelf als ' inserttext'plug-in:

CQ.form.rte.plugins.PluginRegistry.register("inserttext", Ejst.InsertTextPlugin);

de Ejst.InsertTextPlugin.Dialog wordt het dialoogvenster gedefinieerd dat wordt geopend wanneer op de insteekmodule wordt geklikt. Het dialoogvenster bestaat uit een deelvenster, een formulier, een tekstveld en 2 knoppen (OK en Annuleren).

Wordt gedefinieerd bij:

/apps/extjstraining/components/treeoverview

In het dialoogvenster kunt u de grootte van het venster instellen en het venster koppelen/ontkoppelen (zie de details hieronder).

Haalt de breedte, hoogte en gedokte eigenschappen op van de repository.

Geeft enige tekst weer over de gegevensindeling van het boomoverzicht.

Hiermee sluit u de vensterlogica in de jsp van de component tussen javascript-tags in.

Wordt gedefinieerd bij:

apps/extjstraining/components/treeoverview/content.jsp

Definieert een tree door te proberen een structuurvenster van de pagina op te halen.

Als het venster met de boomstructuur niet bestaat, treePanel (CQ.Ext.tree.TreePanel) is gemaakt:

• treePanel bevat de gegevens die worden gebruikt om het venster te maken.

• De gegevens worden teruggewonnen door servlet te roepen die bij wordt geregistreerd:

  /bin/wcm/siteadmin/tree.json

De beforeload listener zorgt ervoor dat het aangeklikte knooppunt wordt geladen.

De root object stelt het pad in apps/extjstraining als de hoofdstructuur van de boom.

tree (CQ.Ext.Window) wordt ingesteld op basis van de vooraf gedefinieerde treePanelen wordt weergegeven met:

tree.show();

Als het venster al bestaat, wordt het weergegeven op basis van de breedte, hoogte en gedokte eigenschappen die zijn opgehaald uit de opslagplaats.

Geeft 1 tab met 2 velden weer om de grootte (breedte en hoogte) van het venster met het overzicht van de structuur in te stellen en 1 veld om het venster te koppelen/ontkoppelen

Wordt gedefinieerd door een knooppunt (knooppunttype = cq:Dialog, xtype = panel).

Het deelvenster heeft een widget Deelveld sizefield (knooppunttype = cq:Widget, xtype = sizefield) en een selectiewidget (knooppunttype = cq:Widget, xtype = selection, type = radio) met 2 opties (true/false)

Wordt gedefinieerd door het dialoogknooppunt op:

/apps/extjstraining/components/treeoverview/dialog

Wordt in json-indeling weergegeven door het volgende aan te vragen:

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

Hieronder wordt weergegeven:

Wordt gedefinieerd bij:

/apps/extjstraining/components/gridoverview

In dit dialoogvenster kunt u de grootte van het venster instellen en het venster koppelen/ontkoppelen.

Haalt de breedte, hoogte en gedokte eigenschappen op van de repository.

Geeft wat tekst weer als inleiding op de gegevensindeling van het rasteroverzicht.

Verwijst naar javascript-code die het GridPanel-object definieert:

<script type="text/javascript" src="/apps/extjstraining/components/gridoverview/defaultgrid.js"></script>

defaultgrid.js definieert enkele statische gegevens als basis voor het GridPanel-object.

Hiermee wordt javascript-code ingesloten tussen javascript-tags die het Window-object definiëren dat het GridPanel-object gebruikt.

Wordt gedefinieerd bij:

apps/extjstraining/components/gridoverview/content.jsp

Definieert de grid -object door te proberen de venstercomponent van de pagina op te halen:

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

Indien grid bestaat niet, a CQ.Ext.grid.GridPanel object ( gridPanel) wordt gedefinieerd door het aanroepen van de getGridPanel() methode (zie hieronder). Deze methode is gedefinieerd in defaultgrid.js.

grid is een CQ.Ext.Windowobject, gebaseerd op het vooraf gedefinieerde GridPanel, en wordt weergegeven: grid.show();

Indien grid al bestaat, wordt deze weergegeven op basis van de breedte, hoogte en gedokte eigenschappen die zijn opgehaald uit de opslagplaats.

myData is een array van statische gegevens die zijn opgemaakt als een tabel van 5 kolommen en 4 rijen.

store is een CQ.Ext.data.Store object dat verbruikt myData.

store wordt geladen in het geheugen:

store.load();

gridPanel is een CQ.Ext.grid.GridPanel object dat verbruikt store:

• de kolombreedten worden altijd opnieuw proportioneel:

  forceFit: true

• u kunt slechts één rij tegelijk selecteren:

  singleSelect:true

reader is een CQ.Ext.data.JsonReader -object dat de servlet-reactie in json-indeling voor 3 kolommen leest.

cm is een CQ.Ext.grid.ColumnModel object voor 3 kolommen.

De kolomcellen van de "Test"kunnen worden uitgegeven aangezien zij met een redacteur worden bepaald:

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

de kolommen kunnen worden gesorteerd:

cm.defaultSortable = true;

store is een CQ.Ext.data.GroupingStore object:

• het krijgt zijn gegevens door servlet te roepen die bij " wordt geregistreerd /bin/querybuilder.json" met een paar parameters die worden gebruikt om de query te filteren
• zij is gebaseerd op reader, vooraf gedefinieerd
• de tabel wordt gesorteerd volgens de "jcr:pad' kolom in oplopende volgorde

gridPanel is een CQ.Ext.grid.EditorGridPanel object dat kan worden bewerkt:

• het is gebaseerd op de vooraf gedefinieerde store en op het kolommodel cm

• u kunt slechts één rij tegelijk selecteren:

  sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true})

• de afteredit listener zorgt ervoor dat na een cel in de map "Testen" kolom is bewerkt:

  • de eigenschap ' test' van het knooppunt op het pad dat wordt gedefinieerd door "jcr:pad" column wordt ingesteld in de repository met de waarde van de cel
  • als de POST is gelukt, wordt de waarde toegevoegd aan de store object, anders wordt het geweigerd