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 annotation is only for Rich UI widgets. The equivalent annotation for external-type widgets is described here: Property annotation