JQueryWidget2
Your trail: 

This page (revision-7) was last changed on 16-Aug-2019 11:55 by Dieter Käppel

This page was created on 16-Aug-2019 08:38 by Dieter Käppel

Only authorized users are allowed to rename pages.

Only authorized users are allowed to delete pages.

Page revision history

Version Date Modified Size Author Changes ... Change note
7 16-Aug-2019 11:55 14 KB Dieter Käppel to previous
6 16-Aug-2019 11:55 14 KB Dieter Käppel to previous | to last
5 16-Aug-2019 11:54 12 KB Dieter Käppel to previous | to last
4 16-Aug-2019 11:35 12 KB Dieter Käppel to previous | to last
3 16-Aug-2019 11:30 9 KB Dieter Käppel to previous | to last
2 16-Aug-2019 09:43 1 KB Dieter Käppel to previous | to last
1 16-Aug-2019 08:38 1 KB Dieter Käppel to last

Page References

Incoming links Outgoing links
JQueryWidget2
JQueryWidget2

Version management

Difference between version and

At line 12 changed one line
* __JSF-Lifecycle:__ [AJAX]-Request mit voller Unterstützung des JSF-Lifecycles
* __JSF-Lifecycle:__ [AJAX|https://de.wikipedia.org/wiki/Ajax_(Programmierung)]-Request mit voller Unterstützung des JSF-Lifecycles
At line 14 changed one line
* __AJAX-Update:__ Die Tags unterstützen den vollen [AJAX]-Update mit JSF. Je nach Anforderung werden Daten auf unterschiedliche Weise persistiert
* __AJAX-Update:__ Die Tags unterstützen den vollen [AJAX|https://de.wikipedia.org/wiki/Ajax_(Programmierung)]-Update mit JSF. Je nach Anforderung werden Daten auf unterschiedliche Weise persistiert
At line 17 changed 4 lines
!!!Documentation
Im Folgenden wird die API von [JQueryWidget2] dokumentiert.
!!Events
!!!Events
At line 49 changed one line
!!Elements
!!!Widget Elements
At line 160 added 107 lines
!!Method Expression Behavior
Die Klasse MethodExpressionBehavior ist ein WidgetBehavior, das das direkt mit einer EL-Method Expression verknüpft ist. Das Binding erfolgt an das Attribut mit dem Namen dieses MethodExpressionBehavior.
!!Value Expression Behavior
Wie MethodExpressionBehavior, allerdings wird hier eine EL-Value Expression gebunden.
!!Widget Input
Dieses Widget Element rendert einen HTML Tag <input> mit dem entsprechenden Attribut value="{<JSON>}" das aus dem Property "value" der Klasse gewonnen wird. Die Methode getValue ist abstrakt und wird bei der Implementierung überschrieben. Beim Abschicken des Input-Field durch einen Form- oder AJAX-Submit wird das Objekt mit einen JSON-Update aktualisiert (siehe [Jackson Update|https://www.logicbig.com/tutorials/misc/jackson/reader-for-updating.html]).
!!Widget Stylesheet
Mit dem Element WidgetStylesheet kann ein Stylesheet dynamisch gerendert werden. Das stellt die Methode encodeStyles(StylesheetWriter writer) zur Verfügung, mit der Bequem CSS-Styles generiert werden können. Bei Komponenten mit viel HTML-Code kann so HTML-Code reduziert werden, indem wiederholte Attribute "style" vermieden werden.
!!Eigene Widget Elements
WidgetElement, WidgetBehavior oder die anderen Ableitungen davon können weiter abgeleitet werden um eigene Elemente für das Widget zu generieren.
{{{
public class ScrollableElement extends WidgetBehavior<String> {
public ScrollableElement(String id) {
super(id);
}
@Override
public void encodeContent(FacesContext context) throws IOException {
ResponseWriter writer = context.getResponseWriter();
String prefix = getClientId() + UINamingContainer.getSeparatorChar(context);
writer.startElement("div", null);
writer.writeAttribute("id", prefix + "cells", null);
writer.writeAttribute("class", getParent().getWidgetStyleClass() + "-cells", prefix);
writer.endElement("div");
}
}
}}}
__Erklärung:__ Hier wurde WidgetBehavior abgeleitet um ein scrollbares <div>-Tag innerhalb des default-mäßigen <span>-Tags zu erzeugen. Eine entsprechende Client-Id und Style Klassen werden gesetzt.
!!!Options
[JQuery] UI bietet die möglichkeit von Options, die innnerhalb der [JQuery] Komponente mit this.options abgerufen werden. Wie genau die Options von [JQuery] gehandhabt werden, welche Möglichkeiten es gibt, kann auf deren [Web-Seite|https://jqueryui.com/] recherchiert werden.
Von unserer Seite her, also vom [JQueryWidget2] gibt es eine Reihe von Möglichkeiten zum Übertragen von Options:
!!Property Options
Options werden durch Java-Properties in der Java-Komponente übertragen. Da nicht jedes Property der Komponente per Default übertragen werden kann, werden die gewünschten Properties durch Überschreiben der Methode getOptions angegeben:
{{{
@Override
public String getOptions(Object... properties) {
return super.getOptions(properties, "value", "scroll");
}
}}}
__Hinweis:__ Um ein kaskadiertes Überschreiben der Methode zu ermöglichen, werden die der Methode selbst übergebenen Properties auch wieder an den Super-Aufruf übergeben.
!!Behavior Options
Unter-Tags die dem aktuellen neue Client-Behaviors (von ClientBehavior abgeleiteten Klassen) hinzufügen, erzeugen Javascript-Funktionen. Beispiele sind der <f:ajax>, <p:ajax> oder <j:behavior>. Diese [Javascript] Funktionen werden als Option an die [JQuery] UI Komponente übergeben.
{{{
<app:customTable id="table" value="#{customTableController.model}">
<p:ajax listener="#{customTableController.select}"/>
</app:customTable>
}}}
!!Parameter Options
Options können durch UIParameter-Komponenten, also <f:param>, <j:function>, <j:json> oder selbst davon abgeleiteten Tags hinzugefügt werden.
{{{
<j:matrix id="matrix" value="#{matrixController.model}">
<j:function name="format" arguments="cell, data">
cell.text(data.v)
.css({backgroundColor: data.c});
</j:function>
</j:matrix>
}}}
!!Element Options
Die durch addElements hinzugefügten Elemente von einer Ableitung der Klasse WidgetElement haben eine Methode addOptions. Diese Methode kann überschrieben werden, um mit dem WidgetElement assoziierte Options zu übertragen. Diese Optionen sind dann über this.elements.<name>.options abrufbar.
{{{
@Override
public void addElements(List<UIComponent> elements) {
elements.add(new WidgetBehavior<Drop>("drop") {
@Override
public void addOptions(Map<String, Object> options) {
if (getUpdate() != null && !"".equals(getUpdate()))
options.put("update", BuildingBlockDragDrop.this.findComponent(getUpdate()).getClientId());
}
@Override
public void decodeData(Drop data) {
if (action != null)
action.invoke(getFacesContext().getELContext(), new Object[] {data});
}
});
}
}}}
!!Widget Options
Zuletzt gibt es noch die Möglichkeit zum manuellen hinzufügen von Options. Dazu wird die Methode addWidgetOptions überschrieben. Damit erhält man Zugriff auf die Map mit den Options und kann entsprechenden Code einfügen:
{{{
@Override
public void addWidgetOptions(Map<String, Object> options) {
options.put("tree", findComponent(getTree()).getClientId());
}
}}}
__Hinweis:__ In der Regel wird die Anwendung einfacher konfigurierbar und modularer, wenn man zunächst die anderen Optionen ausschöpft. Diese Art zum Hinzufügen von Parametern kann für sehr spezifische Optionen verwendet werden, von der kein allgemeiner Gebrauch abgeleitet wird.
This page (revision-7) was last changed on 16-Aug-2019 11:55 by Dieter Käppel Top
Übersicht
Startseite
Das Unternehmen
Produkte
Consulting
Referenzen

Jobmarkt
Jobangebote
Profile

Hilfe
Suche
Seitenindex
Letzte Änderungen
Sichere Verbindung

Systeme
Tickets
Jenkins
Nexus
SVN
Email Client
1314 Aufrufe

referenziert von
Intersult Produkte
JQueryWidget2
JSF-JQuery 2

© 2022 Intersult GmbH | Jobs | Kontakt | Presse | AGB | Impressum | Cookies | Datenschutz | Serverzeit 2024.11.21 18:30:02 GMT