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:RUI (Rich UIs)"
| Line 71: | Line 71: | ||
|- | |- | ||
| − | | Create a dialog box to display the results. | + | | Create a dialog box to display the results. |
| − | | Use the EGL editor to instantiate a Dialog whose children include a Box named "content". | + | | Use the EGL editor to instantiate a Dialog whose children include a Box named "content". |
| | | | ||
| − | *EGL Editor | + | *EGL Editor |
| − | *Organize Imports | + | *Organize Imports |
*Code completion | *Code completion | ||
| Line 113: | Line 113: | ||
| User switches to the "Preview" pane to exercise a running instance of their UI. <br> | | User switches to the "Preview" pane to exercise a running instance of their UI. <br> | ||
| | | | ||
| − | *Preview | + | *Preview |
*VE server<br> | *VE server<br> | ||
|- | |- | ||
| − | | Debug the application by setting breakpoints in both | + | | Debug the application by setting breakpoints in both the UI and the service<br> |
| | | | ||
| − | In the EGL Editor, the User sets breakpoints on both the service invocation as well as the function that implements the service. | + | In the EGL Editor, the User sets breakpoints on both the service invocation as well as the function that implements the service. |
| − | + | ||
| + | <br> | ||
| − | From the preview pane, the user hits the Debug button to launch an external instance of | + | From the preview pane, the user hits the Debug button to launch the UI in an external instance of their system browser.<br> |
| | | | ||
| Line 131: | Line 131: | ||
|- | |- | ||
| Deploy the application.<br> | | Deploy the application.<br> | ||
| − | | | + | | |
| + | User right clicks on their project and chooses "Deploy EGL Project". | ||
| + | |||
| + | System responds that there is no target (project), and prompts user to create one. From the deployment descriptor, the user specifices the target project by creating a new Dynamic Web Project and chooses Tomcat 6.0 as their target runtime. | ||
| + | |||
| + | User clicks on the Deploy button in the descriptor to deploy the project to the target Dynamic Web Project. | ||
| + | |||
| <br> | | <br> | ||
|- | |- | ||
| Run the deployed app.<br> | | Run the deployed app.<br> | ||
| − | | | + | | |
| + | User right-clicks on the UI HTML file that was generated in the target project, and chooses Run as... Run on Server. | ||
| + | |||
| + | System gives the user a choice of web servers on which to run, and then publishes to that server and launches the HTML in a browser. | ||
| + | |||
| <br> | | <br> | ||
|} | |} | ||
Revision as of 19:31, 20 July 2011
This is a draft document and is a work-in-progress.
Contents
Overview
EGL RUI (Rich UIs) allows you to build modern Rich Internet Applications that are written entirely in EGL (rather than having to learn and keep up with HTML, CSS, and JavaScript).
The Visual Editor (VE) provides a what-you-see-is-what-you-get experience in composing and laying out RUIs.
Requirements
This section is to document stories & scenarios that are essentially in-plan.
Story: Hello, World
As an EGL developer, I can build a "Hello, World" web application in which a user inputs their name, and I can implement a service that responds with the user's input prepended with "Hello, ".
(This video for EGL Community Edition 1.0 provides a good illustration of this scenario, although there will be some changes and some improvements.)
Scenario: Hello, world
| Step |
Description |
Features |
| Create a project |
User enters a project name, and a base package name. System creates a new EGL project
|
|
| Create a new view |
User enters name and package for a new RUIHandler. System creates the EGL part and opens it in the Rich UI Editor (i.e., Visual Editor in the Design tab) |
|
| Create the UI consisting of a textfield and a button |
User drags a textfield from the VE Palette and drops it on the grid layout for their Handler;
Use Properties to edit the label of the button to be "Go" and then create a new handler for the button's onClick event. |
|
| Create a dialog box to display the results. | Use the EGL editor to instantiate a Dialog whose children include a Box named "content". |
|
| Create a simple service |
User creates a new service, specifying package and part name. Use the EGL editor to implement a function that returns a string by concatenating "Hello, " to whatever is passed in. |
|
| Add logic to invoke the service when the button is clicked. |
In the event handler function (created above), use code completion to instantiate the service.
Use EGL's call statement to invoke the service, specifying that it returns to a callback function that does not yet exist.
Use the EGL Editor's Quick Fix to automatically define the callback function.
Implement the callback function to instantiate a textfield containing the service result and programmatically add it to the children of the dialog's UI (which again is a Box named "content").
|
|
| Preview the application to ensure that it works. |
User switches to the "Preview" pane to exercise a running instance of their UI. |
|
| Debug the application by setting breakpoints in both the UI and the service |
In the EGL Editor, the User sets breakpoints on both the service invocation as well as the function that implements the service.
From the preview pane, the user hits the Debug button to launch the UI in an external instance of their system browser. |
|
| Deploy the application. |
User right clicks on their project and chooses "Deploy EGL Project". System responds that there is no target (project), and prompts user to create one. From the deployment descriptor, the user specifices the target project by creating a new Dynamic Web Project and chooses Tomcat 6.0 as their target runtime. User clicks on the Deploy button in the descriptor to deploy the project to the target Dynamic Web Project. |
|
| Run the deployed app. |
User right-clicks on the UI HTML file that was generated in the target project, and chooses Run as... Run on Server. System gives the user a choice of web servers on which to run, and then publishes to that server and launches the HTML in a browser. |
|
Future Epics
User stories which are not in-plan at this time.
Additional Features
Below is a hierarchy of miscellaneous features that are not Future Epics and which are not identified in any of the user stories in Requirements (above).