View source for Scenario: Hello, world with a Database

This is a draft and is a work-in-progress.<br>

This variant of the [[Scenario: Hello, world]] augments the service results with information retrieved from database. 

This is a draft and is a work-in-progress. 

<br> 

{| cellspacing="1" cellpadding="1" border="1" width="100%"
|+ Scenario: Hello, world 
|-
| Step<br> 
| Description<br> 
| Features<br>
|-
| Create a project<br> 
| 
User enters a project name, and a base package name. 

System creates a new EGL project<br> 

*associated with Java &amp; JavaScript Generators 
*and a directory structure as follows<br> 
**[base package name].client&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (configured for JavaScript gen)<br> 
**[base package name].server&nbsp;&nbsp;&nbsp;&nbsp; (configured for Java gen)<br> 
**[base package name].common (configured for both JavaScript and Java gen)<br>

| 
*Create EGL Project wizard<br> 
*import widget libraries<br> 
*Runtimes?

|-
| Create a new view<br> 
| User enters name and package for a new RUIHandler.<br><br>System creates the EGL part and opens it in the Rich UI Editor (i.e., Visual Editor in the Design tab)<br> 
| 
*Create RUIHandler wizard<br> 
*VE 
**IDE prefs for VE rendering (XULRunner, IE)

|-
| Create the UI consisting of a <br>textfield and a button<br> 
| 
User drags a textfield from the VE Palette and drops it on the grid layout for their Handler;<br>repeat for the button. 

<br> 

Use Properties to edit the label of the button to be "Go" and then create a new handler for the button's onClick event. 

| 
*Widget Libraries 
*VE 
**Palette 
*EGL Data View 
*Property View

|-
| Create a dialog box to display the results. 
| Use the EGL editor to instantiate a Dialog whose children include a Box named "content". 
| 
*EGL Editor 
**Organize Imports 
**Code completion

|-
| Create a simple service<br> 
| User creates a new service, specifying package and part name.<br>Use the EGL editor to implement a function that returns a string by concatenating "Hello, " to whatever is passed in.<br> <br> 
| 
*Create Service wizard<br> 
*EGL Editor<br>

|-
| Add logic to invoke the service when the button is clicked.<br> 
| 
In the event handler function (created above), use code completion to instantiate the service. 

<br> 

Use EGL's call statement to invoke the service, specifying that it returns to a callback function that does not yet exist. 

<br> 

Use the EGL Editor's Quick Fix to automatically define the callback function.&nbsp; 

<br> 

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"). 

<br> 

| 
*EGL Editor 
**Code completion / Quick Fix<br> 
*Call statement

|-
| Preview the application to ensure that it works.<br> 
| User switches to the "Preview" pane to exercise a running instance of their UI.&nbsp; <br> 
| 
*Preview 
*VE server<br>

|-
| 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. 

<br> 

From the preview pane, the user hits the Debug button to launch the UI in an external instance of their system browser.<br> 

| 
*EGL Editor<br> 
*Breakpoints

|-
| 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.&nbsp; 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>
|-
| 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.&nbsp; 

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>