|
|
(32 intermediate revisions by the same user not shown) |
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.
| |
| | | |
− | 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 =
| |
− |
| |
− | Consider a grid layout on the design surface:
| |
− |
| |
− | [[Image:Gridlayout initial design.jpg]]
| |
− |
| |
− | Here is the code:
| |
− |
| |
− | <source lang="java">
| |
− | 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
| |
− | </source>
| |
− |
| |
− | When you request a Rich UI handler, the Rich UI editor includes a grid layout of 3 columns and 4 rows.
| |
− |
| |
− | = Declare and display a set of widgets =
| |
− |
| |
− | The grid layout now has four widgets in the first two columns:
| |
− |
| |
− | [[Image:Gridlayout without spanning design.jpg]]
| |
− |
| |
− | The third column is present, but empty. <br>
| |
− |
| |
− | Here is the preview and the code that created it:
| |
− |
| |
− | [[Image:Gridlayout without spanning.jpg]]
| |
− |
| |
− | <source lang="java">
| |
− | 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
| |
− | </source>
| |
− |
| |
− | = Customize the display =
| |
− |
| |
− |
| |
− |
| |
− |
| |
− |
| |
− | [[Image:Gridlayout spanning design.jpg]]
| |
− |
| |
− | <br>
| |
− |
| |
− | Now the text field spans columns 2 and 3, and the checkbox spans rows 2 and 3.
| |
− |
| |
− | <source lang="java">
| |
− | 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
| |
− |
| |
− | </source>
| |
− |
| |
− | <br>
| |
− |
| |
− | <br>
| |
− |
| |
− | <br>
| |
− |
| |
− | = Assign and code event handlers =
| |
− |
| |
− | <source lang="java">
| |
− |
| |
− | </source>
| |
− |
| |
− | = Write the on-construction function =
| |
− |
| |
− | <source lang="java">
| |
− |
| |
− | </source>
| |
− |
| |
− | <br> <br> <br><br> ♦ [[EDT:Code snippets|Code snippets main page]] <br>
| |
− |
| |
− | [[Category:EDT]]
| |