Menu

Features and capabilities

Below are just a few of the many great features of the EGL tools.

 

Show the full tutorial >>>

1. Setting up your environment
2. Creating the example project
3. Examining the code
4. Debugging the application
5. Deploying the application

Setting up your environment

Follow the instructions on the Download page to install the EGL Web Developer Tools. You can either install into an existing Eclipse installation or download an all-in-one IDE which includes EDT and Eclipse.

Creating the example project

1. Open the EGL perspective by clicking Window > Open Perspective > Other > EGL.
   
   
2. Click the New EGL project wizard action on the toolbar to launch the New EGL Project wizard.
   
3. In the Project name field, enter "myfirstproject".
4. Select the "Hello world (example)" template from the project template list. Note there are other projects templates you can apply to a new project, including the Web 2.0 client application with services template that supports development of end-to-end, JavaScript and Java based applications.
   
   
5. Click Finish to create the new project. Note the new project, as well as supporting projects that contain basic HTML widgets and Dojo widgets, are now shown in the Project Explorer view:
   
6. From the Project Explorer view, select myfirstproject, right-click, and select Properties > EGL Compiler. Note the project is configured to support both generation to JavaScript and generation to Java:
   
7. Expand the myfirstproject node in the Project Explorer view tree to see the contents of the new project. Then expand the EGLSource folder to see the 3 package that were created:
   

Examining the code

1. Expand the samples.client package and double-click HelloWorldView.egl to open this file in the EGL Rich UI visual editor:
   
2. The Design tab provides a true WYSIWYG editor for visually constructing an EGL Rich UI handler part. From this tab, you can drag-and-drop widgets from the Palette view, change widget settings from the Properties view, and see a logical outline of the handler from the Outline view. Click on a few widgets in the design canvas and note how the Properties and Outline views change.
3. Click the Source tab at the bottom of the visual editor to switch to the EGL source code editor for the HelloWorldView:
   
4. In the source, notice the package statement (which matches the package where the EGL source file is located), the import statements (which indicate parts in other packages that are needed by this part), the declaration for the RUIHandler part (HelloWorldView), which specifies the UI component (configPanel) to show initially, the function to call on construction of the handler (start), and the title, which will appear in the browser title bar.
5. Notice the various widgets declared in this handler, including nameField which defines a text box that a user can supply their name into and goButton which defines a clickable button, which is configured to call the goButton_onClick function when clicked:
   
6. Find the goButton_onClick function. This function is called when the Go button is clicked and is responsible for calling the sayHello function of the HelloWorldService (in this example application, the service takes the user-supplied name and returns a "Hello" string back - we will look at the code for this service later):
   
7. Click the Preview tab to switch to a live, running version of the handler (the EGL code is automatically generated into JavaScript and shown in the Preview browser):
   
8. Because this is a running application, type a name into the Name field (for example, "John Smith") and press enter. Note the name appears in a dialog after a few seconds:
   
9. Click the Preview in External Browser button on the Preview tab toolbar to launch the handler in your system's default external browser:
   
10. Close this browser window, switch back to the development worbench window and from the Project Explorer view, expand the samples.server package and double-click HelloWorldService.egl file to open it in the EGL source editor:
    
11. HelloWorldService is an EGL service that has a single function, sayHello. This function takes a supplied string parameter and returns a string with "Hello, " prepended and "!" appended (this was the function called earlier in the Go button onClick event handler function):
    

Debugging the application

The EGL tools support debugging both client-side (browser) and server-side code using the Eclipse debugger. Note that you will be stepping through EGL code and not generated code.

1. Click the HelloWorldView.egl editor tab in the workbench window to show this editor (if this file is not already open, open it via the Project Explorer view).
2. Switch to the Source tab, scroll down to the goButton_onClick function, and double-click the left side margin of the editor to the left (and parallel) to the line that contains the call statement to add a breakpoint:
   
   Notice that a blue circle (color may vary by platform) appears indicating a breakpoint has been set on this line of code.
3. Click the HelloWorldService.egl editor tab in the workbench window to show this editor (if this file is not already open, open it via the Project Explorer view).
4. Add a breakpoint (by double-clicking the left side margin of the editor) to the line that has the return statement:
   

You now have a breakpoint set in both your UI code and your service code. Let's now debug the application.

6. From the Project Explorer view, select HelloWorldView.egl, right-click and click Debug As > EGL Rich UI Application to launch this handler in an external browser:
   
7. Enter a name into the Enter your name field and click the Go button.
8. Because a breakpoint was set on the line that contained the call statement in the goButton_onClick function, you should be prompted to switch into the Eclipse Debug perspctive (note also that the browser window is paused waiting for the application to resume):
   
9. Notice the Debug view which shows HelloWorldView is suspended on the goButton_onClick line. Also notice that the line containing the breakpoint is highlighted in the source editor:
   
10. Although there are tools to step into or over functions, examine variable values, and more, click the Resume button on the Debug view toolbar to continue running the code (which will call the HelloWorldService service):
    
11. Because a breakpoint was set in the HelloWorldService sayHello function, the debugger will almost immediately indiciate another breakpoint has been reached, but this time in the service code:
    
12. Notice the Variables view which shows variables currently in scope. Expand the sayHello node to show the variables scoped to this function.
13. Select the name variable in the list (this is the single parameter defined on this function), note the view shows whatever name you supplied in the Enter your name field earlier.
    
14. Click the Resume button again to continue executing the service code.
15. Switch back to your browser window and note the results dialog is showing whatever name you supplied.

Deploying the application

Once you have confirmed your application works properly (and have removed the breakpoints you set during debugging), you can run it on a local Java application server, like Apache Tomcat, and then export it as a standard Java Web Archive (WAR) file and deploy a remote application server.

Before you configure a Tomcat server for your workspace, you must have downloaded and installed (or unzipped) Tomcat onto your machine. Visit the Apache Tomcat 7.0 download page for download links and instructions.

To configure a local Tomcat server runtime environment:

1. Click Window > Preferences > Server > Runtime Environment. If you have not already configured a runtime environment, this list will be empty:
   
2. Click the Add button to open the New Server Runtime Environment wizard.
3. Select Apache > Apache Tomcat v7.0 from the list:
   
4. Click Next to show the Tomcat Server configuration panel:
   
5. Click the Browse button and browse to the directory where you installed (or unzipped) Apache Tomcat 7:
   
6. Click OK.
7. Click Finish to add the new runtime environment. It will now appear in the list of configured runtime environments for your workspace:
   
8. Click OK to close the Preferences dialog.

You now have a Tomcat runtime environment configured for your workspace. The next step is to deploy the example project into a standard, dynamic web project. Once you have this project, you can export as a WAR or run on a local Tomcat server.

To deploy the Hello World application into a web project:

1. From the Project Explorer view, open myfirstproject.egldd in the EGLSource folder. A deployment descriptor controls various aspects of deployment, including which Rich UI handler parts to generate as HTML files, the web project to deploy into, and more.
   
2. Click the New... button in the Deployment Target section of the Overview tab to create a new web project.
3. In the Project name field, enter "helloworld", select Apache Tomcat v7.0 from the Target runtime list (if necessary), and select 2.5 from the Dynamic web module version (3.0 is currently not supported):
   
4. Click Finish to create the new project.
5. The new helloworld web project should now be selected in the Target project field:
   
6. Click File > Save to save the deployment descriptor file.
7. From the Project Explorer view, right-click the deployment descriptor file (the file you just saved), and click Deploy EGL Descriptor:
   
8. The deploy operation generates and copies files into the target web project (this process may take a few minutes):
   
9. After the deployment process completes, expand the helloworld project in the Project Explorer view to see the deployed artifacts:
   
10. To deploy and run this application on the local Apache Tomcat 7, select HelloWorldView.html (this is the HTML file generated from the HelloWorldView handler part), right-click and click Run As > Run on Server:
    
11. Although a Tomcat 7 runtime environment was configured, a server instance needs to be created. Select Tomcat v7.0 Server from the list:
    
12. Click Next to configure which web applications will be deployed to this server instance. Confirm helloworld is listed in the Configured list:
    
13. Click Finish to create the server instance and begin publishing the helloworld web application to it.
14. The new server instance will appear in the Servers view, and you should also notice the status of the publish operation:
    
15. After the web application is finished publishing to the server, a new browser window will appear, opened to the HelloWorldView.html file deployed on the server:
    
16. The application should work exactly as it did during development.

To export the application as a WAR file, which can then be installed into a standalone application server:

1. From the Project Explorer view, select the helloworld project, right-click and select Export > WAR file:
   
2. helloworld should be selected in the Web project field. Enter a path and name for the WAR file that will be created. For example: c:\temp\helloworld.war:
   
3. Click Finish to have the WAR file created. You can now take this file and deploy into a remote application server.

This package includes Eclipse and the EGL tools. Use this approach if you do not already have an Eclipse IDE installed or you want to evaluate EGL in its own, self-contained sandbox.

To install the Eclipse IDE for EGL Web Developers:

1. Download the appropriate all-in-one package for your environment:
   • Windows (32 bit)
   • Windows (64 bit)
   • Linux (32 bit)
   • Linux (64 bit)
2. Unzip to a directory on your machine, for example: c:\edt (on Windows) or ~/edt (on Linux)
3. Start the IDE by launching eclipse.exe (on Windows) or eclipse (on Linux):
   
4. The EGL perspective will appear once the workbench starts.

Use this approach if you already have an Eclipse 3.7 or Eclipse 3.6 IDE with Java EE tools installed. If not, download and install the Eclipse IDE for Java EE Developers package Version 3.7 (Indigo) or Version 3.6 (Helios) from Eclipse.org. Note: It is not recommended to install into IBM Rational Business Developer.

To install the EGL Web Developer Tools:

1. Start your Eclipse IDE
2. From the Help menu, select Install New Software.
3. In the Work With field, enter the following update site URL and press enter:
   http://download.eclipse.org/edt/updates/1.0
4. Check the box next to the EGL Web Developer Tools feature under the EDT 0.8.2 feature group and click Next.
   
   
5. When prompted, read and accept the license agreement, and click Finish.
6. If prompted with the following security warning, click OK.
   
   
7. When prompted to restart the workbench, click Restart Now.