Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Difference between revisions of "EDT:Declaring widgets"
| Line 1: | Line 1: | ||
| − | The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly. | + | The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly. |
| − | For background information, see [http://www.eclipse.org/edt/papers/topics/egl_web_technology.html Web technology for EGL Rich UI]. | + | For background information, see [http://www.eclipse.org/edt/papers/topics/egl_web_technology.html Web technology for EGL Rich UI]. |
| − | = Create a Handler type of stereotype RUIHandler = | + | = Create a Handler type of stereotype RUIHandler = |
| − | Consider this design surface and the code that created it: | + | Consider this design surface and the code that created it: |
| − | [[Image: | + | [[Image:Gridlayout initial design.jpg]] |
<source lang="java"> | <source lang="java"> | ||
| Line 33: | Line 33: | ||
end | end | ||
end | end | ||
| − | </source> | + | </source> |
| − | When you request a Rich UI handler, the Rich UI editor includes a grid layout of 3 columns and 4 rows. | + | When you request a Rich UI handler, the Rich UI editor includes a grid layout of 3 columns and 4 rows. |
| − | = Declare and display widgets = | + | = Declare and display widgets = |
| − | Consider this design surface and the code that created it: | + | Consider this design surface and the code that created it: |
| − | [[Image: | + | [[Image:Gridlayout without spanning.jpg]] |
| − | In particular, note that every cell in the the third column is empty. | + | In particular, note that every cell in the the third column is empty. |
<source lang="java"> | <source lang="java"> | ||
| Line 79: | Line 79: | ||
end | end | ||
end | end | ||
| − | </source | + | </source> |
| Line 125: | Line 125: | ||
end | end | ||
| − | </source> | + | </source> |
| + | <br> | ||
| + | <br> | ||
| + | <br> | ||
| − | + | = Assign and code event handlers = | |
| − | + | ||
| − | + | ||
| − | = Assign and code event handlers = | + | |
<source lang="java"> | <source lang="java"> | ||
| − | </source> | + | </source> |
| − | = Write the on-construction function = | + | = Write the on-construction function = |
<source lang="java"> | <source lang="java"> | ||
| − | </source> | + | </source> |
| − | + | ||
| − | <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br> | + | <br> <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br> |
[[Category:EDT]] | [[Category:EDT]] | ||
Revision as of 17:39, 15 February 2012
The next sections outline a way to develop a Rich UI application. The IDE helps you to do the tasks quickly.
For background information, see Web technology for EGL Rich UI.
Contents
Create a Handler type of stereotype RUIHandler
Consider this design surface and the code that created it:
package client; import org.eclipse.edt.rui.widgets.GridLayout; handler MyHandler type RUIhandler{ // sets one or more widgets at the root of the widget tree. initialUI =[ui], // specifies the function that runs initially and without user interaction. onConstructionFunction = start, // identifies the CSS file that helps you to design the page. cssFile = "css/MyProject.css", // sets the title that is displayed at the top of your browser or browser tab. title = "MyHandler"} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]}; function start() end end
When you request a Rich UI handler, the Rich UI editor includes a grid layout of 3 columns and 4 rows.
Declare and display widgets
Consider this design surface and the code that created it:
In particular, note that every cell in the the third column is empty.
package client; import org.eclipse.edt.rui.widgets.Button; import org.eclipse.edt.rui.widgets.CheckBox; import org.eclipse.edt.rui.widgets.GridLayout; import org.eclipse.edt.rui.widgets.GridLayoutData; import org.eclipse.edt.rui.widgets.GridLayoutLib; import org.eclipse.edt.rui.widgets.TextField; import org.eclipse.edt.rui.widgets.TextLabel; import eglx.ui.rui.RUIHandler; handler MySecondHandler type RUIhandler{ initialUI =[ui], onConstructionFunction = start, cssFile = "css/MyProject.css", title = "MyHandler"} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel, myTextField, myCheckBox, myButton]}; myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1}, text = "a label: " }; myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2}, text = "a text field"}; myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2 }, text="a check box" }; myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1 }, text="a button" }; function start() end end
Customize the display
package client; import org.eclipse.edt.rui.widgets.Button; import org.eclipse.edt.rui.widgets.CheckBox; import org.eclipse.edt.rui.widgets.GridLayout; import org.eclipse.edt.rui.widgets.GridLayoutData; import org.eclipse.edt.rui.widgets.GridLayoutLib; import org.eclipse.edt.rui.widgets.TextField; import org.eclipse.edt.rui.widgets.TextLabel; import eglx.ui.rui.RUIHandler; handler MyHandler type RUIhandler{ initialUI =[ui], onConstructionFunction = start, cssFile = "css/MyProject.css", title = "MyHandler"} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[myLabel, myTextField, myCheckBox, myButton]}; myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1}, text = "a label: " }; myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2, horizontalSpan = 2 }, text = "a text field"}; myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, verticalSpan = 2 }, text="a check box" }; myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1, horizontalSpan = 2, horizontalAlignment = GridLayoutLib.Align_Center }, text="a button" }; function start() end end