Notice: This Wiki is now read only and edits are no longer 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 order of the steps can vary, and the IDE helps you to do the tasks quickly. | The next sections outline a way to develop a Rich UI application. The order of the steps can vary, and 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]; in particular, the | + | For background information, see [http://www.eclipse.org/edt/papers/topics/egl_web_technology.html Web technology for EGL Rich UI]; in particular, the sections on the DOM tree. |
= Create a Handler type of stereotype RUIHandler = | = Create a Handler type of stereotype RUIHandler = | ||
<source lang="java"> | <source lang="java"> | ||
| + | package client; | ||
| − | + | import org.eclipse.edt.rui.widgets.GridLayout; | |
| − | = | + | handler MyHandler type RUIhandler{initialUI =[ui |
| + | ], onConstructionFunction = start, cssFile = "css/MyProject.css", title = "MyHandler"} | ||
| − | + | ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]}; | |
| + | function start() | ||
| + | end | ||
| + | end | ||
| + | |||
| + | An IDE wizard initially creates a grid layout of 3 columns and 4 rows, as shown. | ||
</source> | </source> | ||
| − | = | + | = Declare, customize, and display more widgets = |
<source lang="java"> | <source lang="java"> | ||
| + | |||
| + | handler MyHandler type RUIhandler {initialUI = [ myGridLayout ]} | ||
| + | |||
| + | myGridLayout GridLayout{ | ||
| + | rows = 4, columns = 3, cellPadding = 4, | ||
| + | children = [ myLabel, myTextField, myCheckBox, myButton ]}; | ||
| + | |||
| + | myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1}, | ||
| + | text = "Label: " }; | ||
| + | |||
| + | myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2, | ||
| + | horizontalSpan = 2 }, text = "Text field"}; | ||
| + | |||
| + | myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, | ||
| + | verticalSpan = 2 }, text="Check box" }; | ||
| + | |||
| + | myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1, | ||
| + | horizontalSpan = 2, | ||
| + | horizontalAlignment = GridLayoutLib.Align_Center }, | ||
| + | text="Button" }; | ||
| + | end | ||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
| + | |||
</source> | </source> | ||
Revision as of 16:15, 15 February 2012
The next sections outline a way to develop a Rich UI application. The order of the steps can vary, and the IDE helps you to do the tasks quickly.
For background information, see Web technology for EGL Rich UI; in particular, the sections on the DOM tree.
Contents
Create a Handler type of stereotype RUIHandler
package client; import org.eclipse.edt.rui.widgets.GridLayout; handler MyHandler type RUIhandler{initialUI =[ui ], onConstructionFunction = start, cssFile = "css/MyProject.css", title = "MyHandler"} ui GridLayout{columns = 3, rows = 4, cellPadding = 4, children =[]}; function start() end end An IDE wizard initially creates a grid layout of 3 columns and 4 rows, as shown.
Declare, customize, and display more widgets
handler MyHandler type RUIhandler {initialUI = [ myGridLayout ]} myGridLayout GridLayout{ rows = 4, columns = 3, cellPadding = 4, children = [ myLabel, myTextField, myCheckBox, myButton ]}; myLabel TextLabel{ layoutData = new GridLayoutData{ row = 1, column=1}, text = "Label: " }; myTextField TextField{ layoutData = new GridLayoutData{ row = 1, column = 2, horizontalSpan = 2 }, text = "Text field"}; myCheckBox CheckBox{ layoutData = new GridLayoutData{ row = 2, column = 2, verticalSpan = 2 }, text="Check box" }; myButton Button{ layoutData = new GridLayoutData{ row = 4, column = 1, horizontalSpan = 2, horizontalAlignment = GridLayoutLib.Align_Center }, text="Button" }; end