Sie können einen neuen Widgettyp mithilfe von EGL erstellen oder Sie können JavaScript verwenden.
Wenn Sie sowohl tagName als auch targetWidget angeben, gilt die letztere Angabe.
Handler H3 type RUIWidget{tagName = "h3", onConstructionFunction = start,
@VEWidget{
category = "New Widgets",
template = "my.package.H3{ text=\"The Heading Text\" }",
smallIcon = "icons/h3small.gif",
largeIcon = "icons/h3large.gif" }}
text String { @EGLProperty { getMethod=getText, setMethod=setText },
@VEProperty{}};
function start()
class = "EglRuiH3";
end
function setText(textIn String in)
text = textIn;
this.innerText = textIn;
end
function getText() returns (String)
return (text);
end
end
ui Box { children = [
new H3 { text = "Summary" }
]};
Sie können ein Widget mit einem externen Typ erstellen, indem Sie einen angepassten JavaScript-Code schreiben oder auf spezialisierte JavaScript-Bibliotheken zugreifen.
Fügen Sie Punkte anstelle von Schrägstrichen für jeden Unterordner unter dem ersten ein. Beispiel: Wenn sich Ihr JavaScript-Code im Ordner WebContent/myPkg/test befindet, muss packageName den Wert myPkg.test haben.
egl.defineWidget( 'egl.rui.widgets', 'Button',
'egl.rui.widgets', 'Widget',
'button', { } );
"functionName" : function(/*Parameter*/)
{ //JavaScript-Quelle }
"getSelected" : function() {
return this.check.checked;
},
"setSelected" : function(value) {
this.check.checked = value;
},
"toString" : function() {
return "[CheckBox, text=\""+this.egl$$DOMElement.innerHTML+"\"]";
}
Jedes Widget besitzt außerdem ein Feld mit dem Namen this.egl$$DOMElement, das das HTML-Element (bzw. das HTML-Element der höchsten Ebene) darstellt, das für das Widget erstellt wird.
Geben Sie beim Erstellen des externen Typs einige oder alle der Eigenschaften an, die im nächsten Abschnitt aufgeführt werden.
Die Eigenschaft @EGLProperty ist nur für Rich-UI-Widgets vorgesehen. Die äquivalente Eigenschaft für Widgets eines externen Typs ist @JavaScriptProperty, wie im Abschnitt “Externer Typ für JavaScript-Code” beschrieben wird.