新規ウィジェット・タイプの作成には、EGL あるいは、JavaScript を使用できます。
tagName と targetWidget の両方を指定すると、後者が適用されます。
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" }
]};
外部型ウィジェットを作成するには、カスタム JavaScript を作成するか、または特殊な JavaScript ライブラリーにアクセスします。
最初のサブフォルダーの下のすべてのサブフォルダーについて、スラッシュの代わりにドットを使用します。例えば、JavaScript がフォルダー WebContent/myPkg/test にある場合、packageName 値は 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+"¥"]";
}
各ウィジェットには this.egl$$DOMElement と呼ばれるフィールドもあります。このフィールドは、ウィジェット用に作成された HTML エレメント (または最上位 HTML エレメント) を表します。
外部型を作成する場合、次のセクションでリストされている一部またはすべてのプロパティーを指定します。
@EGLProperty プロパティーは、Rich UI ウィジェット専用です。 外部型ウィジェットの同等のプロパティーは @JavaScriptProperty です。これについては『JavaScript コードの外部型』で説明しています。