You can use EGL to create a new widget type or can use JavaScript.
If you specify both tagName and targetWidget, the latter applies.
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" }
]};
You can create an external type widget by writing custom JavaScript or by accessing specialized JavaScript libraries.
Include dots in place of a forward slash for every subfolder under the first. For example, if your JavaScript is in folder WebContent/myPkg/test, the packageName value is myPkg.test.
egl.defineWidget( 'egl.rui.widgets', 'Button',
'egl.rui.widgets', 'Widget',
'button', { } );
"functionName" : function(/*parameters*/)
{ //JavaScript Source }
"getSelected" : function() {
return this.check.checked;
},
"setSelected" : function(value) {
this.check.checked = value;
},
"toString" : function() {
return "[CheckBox, text=\""+this.egl$$DOMElement.innerHTML+"\"]";
}
Each widget also has a field called this.egl$$DOMElement, which represents the HTML element (or top-level HTML element) created for the widget.
When you create the external type, specify some or all of the properties that are listed in the next section.
The @EGLProperty property is only for Rich UI widgets. The equivalent property for external-type widgets is @JavaScriptProperty, as described in “External type for JavaScript code.”