Transcript Slide 1

®
IBM Software Group
The EGL Workbench (Eclipse)
This section introduces you to the Eclipse IDE (integrated development environment).
Eclipse is the EGL workbench and project organizer. Learning how to use it, navigate,
and develop within it is a key to success, with EGL.
© 2006 IBM Corporation
UNIT
RBD Workbench
Topics:
 EGL and the Workbench – terms and concepts
 A Workbench Walk-Through
 Creating an EGL “HelloWorld” Application
Last update: 12/04/2007
2
What is the RBD Workbench?
The RBD
Workbench is
the software that
enables you to
create, test,
modify, run and
deploy your EGL
applications
It organizes and
maintains your
software
development
resources
Tools
Edit and design facility
It provides
access to tools
like editors,
design tools,
compilers and
folders for
managing your
application’s
contents
Organizer
NOTE – Several of the screen captures taken of the Workbench used WebSphere
Application Server. If you are using Tomcat, the Project Explorer will look different.
We will explain all relevant differences at the appropriate time during the course.
Last update: 12/04/2007
3
How do I develop with the RBD Workbench?
 You will work with a variety of resources: EGL code, Web pages, Graphic images,
Data files. The Workbench allows most of the resources associated with a project to be
stored in a workspace – which is the highest-level folder that contains everything you
can access during a development session.
 Your Workbench session begins with the opening of a Workspace. Everything you
have access to is inside this Workspace.
Project
 Workspace resources are organized into
- Project(s)
- Folders
- Files
Workspace
Folders
Files
Last update: 12/04/2007
4
What is in a Project?
 Workspace projects organize and manage related
application resources. They can be designed along lines of:
 Batch – or – Online applications
 Different business applications (Accounts Payable, Inventory,
Claims, Part Assembly, etc.)
 Common (shared) projects consisting of data and record
definitions that can be reused
 Projects also contain configuration data, such as build
files** and generation options for EGL Java and/or COBOL
generation
EGL
Source
Files
Java
Source
Files
 Projects may be further divided into folders
 EGL “Web” projects contain the following high-level folders:
\EGLSource\
\Java Resources: src\
\WebContent\
 - See slide NOTES and the Help topic: Contents of an EGL
Application
Last update: 12/04/2007
5
Web
Pages
and
Web App
Resource
Folders
What is in \EGLSource\
\EGLSource\ is the default folder that is the highest level
folder under which all of your EGL resources are organized.
 These EGL resources include EGL:
 Packages
 Files






Programs
Libraries
Services
JSFHandlers
EGL build-files
…
 Typically you will create sub-folders under \EGLSource\ to
manage your EGL resources
 We will define what is in all these EGL resources a bit later in
this course
 For now, it is enough to know that all EGL files end with the
extension: .egl
 - See the Help topic: EGL Projects, Packages and Files
Last update: 12/04/2007
6
What is in Java Resources: src
\src\ is the default highest level folder that contains all of the generated Java,
for each and every successfully compiled (or in EGL terms, “generated”) EGL
resource
 You will rarely if ever need to actually open or even view the contents of
\src\
 But the folder structure of \src\ will match \EGLSource\ one-for-one
 Your generated java files will end with a .java extension
Last update: 12/04/2007
7
What is in \WebContent\
\WebContent\ is the default highest-level folder under
which all of your web resources will be organized,
including:
 Application Server reserved folders:
 META-INF
 WEB-INF
 Web Pages (*.jsp) and web page resources:
\theme\ - Graphics (*.gif, *.jpg)
\theme\ - Template pages (*.htpl)
\theme\ - Cascading Style Sheets (*.css)
 Note that your installed EGLWeb project might have a
few additional folders and files – such as an \images\
directory, that we’ve supplied, containing graphics files you’ll
use throughout the course
 And if you’re not familiar with the above types of web files
don’t worry. We’ll be covering them later on in the course
Content
Last update: 12/04/2007
8
Terms and Concepts – .EAR File – Simplified J2EE Deployment – for WAS Users
EGLWebEAR
Deployment
Descriptor
EGLWeb
.WAR file
(Modules)
other
.WAR files
 An EAR (Enterprise ARchive) file contains a
J2EE application, which is a collection of J2EE
modules. The modules contain Java generated
from EGL. Because individual J2EE modules are
contained within the EAR, they can easily be
managed and deployed as a whole to
WebSphere.
 An EAR also has a Deployment Descriptor file
which describes how it should be deployed to
WebSphere. In addition, each module within the
EAR has its own Deployment Descriptor.
 An EAR file is similar to an iSeries “savefile for i”
Utility Java Classes
.JAR files
Last update: 12/04/2007
– or to a System z “load library” – which are files
deployed on mainframes that also contain
individual “modules”
9
Paper/Pencil Review Questions
Where (under what folder and/or sub-folder) in your project would you look for
the following files?
allcustomers.jsp
_______________
allcustomers.java
_______________
allcustomers.egl
_______________
ibm.gif
_______________
stylesheet.css
_______________
True/False – all EGL source files (each and every one) will:
a. End with an extension of .egl
b. Be organized and exist under the \EGLSource\ folder – or a sub-folder in your project
 Note – if you do not know what these file types are do not worry, we will
be covering them and their use a bit later in the course.
Last update: 12/04/2007
10
Workbench Views
Workbench tools with
visual content are
portrayed in “views”
 Views are windows
which show relevant
information about
whatever you are
currently looking at or
working on.
Project
Explorer
View
Content Area
View
Palette
View
 Development tasks
usually require many
different views.
 Programming:
 Code editing,
navigators, testing
environment,
debugging,…
 Page design:
 Page layout graphic
editing, specifying
page control
properties site
navigation/design
Last update: 12/04/2007
Console
View
Page Data
View
NOTE – Several of the screen captures taken of the Workbench used WebSphere
Application Server. If you are using Tomcat, the Project Explorer will look different. We
will explain all relevant differences at the appropriate time during the course.
11
Important Views
Out of the dozens of Workbench views available to assist you with your
development, there are an essential nine:
1. Project Explorer
2. Content Area
3. Page Data
4. Palette
5. Properties
6. Console
7. Servers
8. Problems
9. Outline
Last update: 12/04/2007
12
Project Explorer – or Project Explorer View
Organizes your project…and…allows you
to:
 Create new resources:
 EGL programs, services, etc.
 Web pages and other files
 Open files into the Content Area
 Manipulate files:
 Delete, Move and Rename
 Run pages
 Debug EGL programs
 Generate (compile)
 Refactor

Right-click
Context
Menu
When “A” is changed change related
“B” resources
 Set project-level properties
 By Right-clicking over a resource in the
Project Explorer you access a “Context
Menu” that provides options 
 By double-clicking over a resource in the
Project Explorer you open that resource in
the Content Area view
Last update: 12/04/2007
13
Content Area
Double-clicking a file in Project Explorer opens it in
the Content Area
The appropriate editor for that file-type will also
open
Here’s Page Designer

 Page Designer is an RBD editor that is used
for laying out and creating your pages from JSF
(graphical) components.
Here’s the EGL editor.
You might not be able to tell in black & white but the
source is “colorized”:
• Keywords in maroon/bold
• Identifiers (variables/function names) in black
• Literals (within in “double-quotes”) in blue
• Comments in green (not shown)
Last update: 12/04/2007
14
Page Data View




Page Data is one of the views you get
if you click on a .JSP file. It is a view
of the JSF Handler (EGL) resources
that you can drag and drop onto your
web page
Data – which become labels and
input/output controls
Actions – which become Submit
Buttons
JSF
Handler
Services
EGL Function
Services – which become entire
forms, based on their parameters and
functions
Last update: 12/04/2007
Drag ‘n Drop
from Page Data
onto your Web Page
15
EGL Variables
Palette View
 Provides a drag &
drop way to add
controls to your U.I.
(Web page or Rich
Client or Text User
Interface form)
Drag & Drop functionality of Page Designer
If the Palette View is not available by default, open it from the menu:
Window  Show View  Other… General (expand) Palette
Last update: 12/04/2007
16
Properties View
 Allows you to specify the behavior and characteristics of a U.I. control
declaratively (without having to code at the source API level). One of the
primary development constructs is that you:
1. Drag and drop a resource
2. Customize its properties
Properties (View) of the Postalcode Input Text Field’s JSF attributes
Last update: 12/04/2007
17
Servers View – WebSphere Application Server
 Allows you to start and stop the application server in which you run and
debug your application. And to publish (re-deploy) your application.

Context Menu for the Servers view
Last update: 12/04/2007
18
Console View
 Allows you to see a trace of the run-time events and messages to “system
out” that happen as your application executes on the server.
Running
Web
Page
Application
Server
Messages
Last update: 12/04/2007
19
Problems View

Allows you to see syntax or structural problems in your application.

Note, by double-clicking on a problem the file in question is opened in the Content
Area, and your mouse is positioned to the line (and even characters) in question.
Source file
containing
the problem
Hyper-linked
Problem Description
in the Problems view
Last update: 12/04/2007
20
Outline View
 Provides a consolidated,
click-able list of your
programs:





Imports
Functions
Variables
Other EGL resources
Especially useful for:
 Navigating throughout large
source files
 Large, complex web pages
 Top-Down code analysis

Learning – or getting the
giste of some code quickly
Last update: 12/04/2007
21
Working With Views


You can maximize a view by
double-clicking in the middle of the
View Tab (and re-size the view back,
by doing the same)

You can Close a view (inadvertently
or on purpose) – by clicking the X
 You can Re-open a view by pulling down the
Window menu, and selecting: Show View >
Last update: 12/04/2007
22
Workbench Perspectives
 Perspectives organize
views and other tools into
groupings designed for
particular roles, oriented to
specific tasks
 There are only a few
perspectives you will use:
 Web Perspective
 Used for creating
and testing Web
applications
 EGL Perspective
 Used for creating
and testing batch
and Text User
Interface
applications
 Debug Perspective
 Used to debug
applications
 Data Perspective
 Used to view
relational data and
run SQL interactively
Last update: 12/04/2007
Workbench in the Web Perspective
*** Different Perspectives offer different Views of your development resources ***
That is, the views available will change, and even change position in the IDE depending on
your current Perspective.
23
Working With Perspectives
There are only a few things you will do with Perspectives (besides use
them)

Open Perspective
 From your current workbench perspective, open a new perspective with its
default views and tools

Reset Perspective
 Return to the RBD installation defaults, for a perspective

Close Perspective
 Close a perspective if no longer needed for your work at the moment

Customize and save a perspective
 When you have used the Workbench a lot, you may want to create your
own custom perspectives, with customized views and tools, etc.

All in-use perspectives can be switched back and forth from an icon
at the top-right corner of your Workbench which shows the
perspectives
Last update: 12/04/2007
24
 Workspace Preferences – Customizing the Workbench
The Preferences dialog (under the
Windows menu) allows you to
customize your workspace
development environment.
From the main Preferences dialog
you should check:
 EGL with BIRT report support
 EGL support with JSF
Component Interfaces
Other preferences you can
customize:
 Editor
 You can change the editor’s
appearance

Page Designer
 Specify whether to delete
associated files

SQL Database Connections
 Specify a connection to an
external database (DB2, IDS,
etc.) for SQLRetrieve
 Click Apply
Last update: 12/04/2007
25
 Workspace Preferences – Customizing the Workbench – Modify SQL Preferences
The SQL Preferences
allow you to
customize how the
RBD tooling
generates SQL
resources
 From the SQL
Preferences dialog
check:
 Change to lower case
and capitalize first letter
after underscore
 Remove underscores
 Click Apply
Last update: 12/04/2007
26
 Workspace Preferences Lab – EGL Editor
Editor Preferences
 You can change the editor’s appearance,
and how it treats and displays your source
statements
 UN-check: Annotate errors as you type
Optionally – feel free to try out other editor
preferences
 Click Apply
Last update: 12/04/2007
27
 OPTIONAL Workspace Preferences Lab – EGL Editor Templates
 Statement templates allow
you to customize the default
Intelli-sense (accessed via
Ctrl/Spacebar - Content
Assist) development. From
EGL Template preferences
you can:
 Add new statement/
templates
 Edit existing templates
 Remove un-wanted
templates
 Export all of your templates
for sharing with a group 
 Import a set of templates
 Optional Workshop
 Using the slide and
Preference, create a new
template as shown here
(you can copy/paste the
pattern code from the Notes
section of this slide).
 To use the new template,
from inside an EGL source
file (within a function)

Type if

Press Ctrl/Spacebar
Last update: 12/04/2007
28
 OPTIONAL Workspace Preferences Lab – EGL Editor Templates/Modify Defaults
 Besides adding new statements, you
may want to modify the existing Editor
Templates:
 Change the defaults
 Add new Properties
 Optional Workshop
 Select the handler egl-jsf
PageDesigner Page Code
generation template
 Click Edit…
 Add the EGL handler property shown 
cancelOnPageTransition=yes,
 Click OK

To save your edits
 Click OK

Last update: 12/04/2007
To save your Template preferences
29
 Really Optional Workspace Preferences Lab – EGL Editor
 Optional/Challenge Workshop. You
can add a new editor to work with
your EGL source files by doing the
following:
1. From Preferences > General >
Editors, click File Associations
2. From the File types: list, select *.egl
3. From Associated editors:
1. Click Add…
2. From External Programs – select
from the list …or…
3. Browse to your own custom
editor and select it (example
shown is WordPad)
4. Click OK
5. Click OK
To use the new editor, from Project
Explorer,
 Right-Click
 Select Open With
Last update: 12/04/2007
30
Help
There is a robust help
system with
documentation and
examples available in
many categories:

Keyword search

Category search

Web Resources
 Points you to the EGL
forum and home page on
DeveloperWorks

Tutorials Gallery
 Contains additional in-thebox education samples

Samples Gallery
 Contains working, sample
applications

Cheat Sheets
 Contains step-by-step
“how-to” instructions
Last update: 12/04/2007
31
PC Graphical/Mouse-Driven Development Skills
You will do two things with Workbench:
1.  Type EGL statements (business logic) using the EGL Editor, and
sometimes type other short properties in Workbench dialogs and fields. This is no
different from programming in any other toolset or language
2.  Navigate through the Workbench, and do “drag & drop” development (with
your mouse). If you’re new to drag & drop development here’s a quick lesson.
Left-mouse button
Select something
- Click a field
- Click a drawer in the Palette
- Select a file in the Content Area

Right-mouse button
Open a “context menu”
- From a Page in the Content Area
- Edit Page Code – bring up the EGL for the page
- Run a page
Scroll up and down/Right and left
- Project Explorer – the context menu allows you to
- Create a new resource
- Delete/move
- Generate (compile) a resource
- Run a page on the Server
Double-click a resource in Project Explorer to open it in
the Content Area
Open an RBD menu (at the top)
By selecting (Left-mouse) and holding, you drag and
drop a resource:
- Drag an EGL variable onto a page
- Drag JSF Component onto a page
Last update: 12/04/2007
32
 Review
 Match the Following Terms and RBD Vocabulary
1. Content Area
___ The highest level folder that contains all of project folders you can work
with. You choose this right after launching RBD
2. Page Data
___ Where you customize a web page Control’s appearance and behavior
3. Project Explorer
___ The area in which you edit files and use Page Designer to layout and
create web pages.
4. Perspective
___ A perspective that displays and organizes views that are optimal for doing
web application development with EGL
5. Servers View
___ A View that allows you to select and open files, delete them, create new
files, generate (“compile”) and run web pages
6. Console View
___ The View that shows your JSF Handler’s declared variables, functions
and services (available for direct drag & drop operations on a page)
7. Preferences
___ The View that contains drawers of visual components to work with in
Page Designer (like HTML, EGL and JSF Components)
8. Problems View
___ An organized collection of Views
9. Properties View
___ The area of the Workbench where you customize the workspace’s
behavior, setup
10. Palette
___ The View that allows you to stop and start your Application Server
11. Web Perspective
___ The view that contains all of the syntactical errors in your EGL source,
and configuration errors for your project
12. Workspace
___ The view that shows application server run-time messages
Last update: 12/04/2007
33
 Review
 Answer the following questions:
1. Under what menu option, can you access windows to change perspectives and open Views,
modify your Workspace preferences?
2. From the product help, search on: mathlib sqrt
Check out both the mathlib and the function
3. Questions on the Palette View
- What are the two options in the EGL drawer in the Palette?
- Under what Palette drawer can you find a Horizontal Rule?
- Under what Palette drawer can you find a Command – Button?
4. From the Properties view, what is the Id: property associated with this field?
5. From what View (and how) do you open a file (i.e. how do you load a file into) the Content Area
for editing or browsing?
6. List the steps to Run a .JSP page, on the server?
7. What View exposes (shows) EGL variables and functions from a JSFHandler, and allows you to
drag them onto the Content Area to create JSF controls and fields?
8. By the way, what is an EGL JSFHandler? (Search the help on: JSFHandler Part – and select,
Elements of a Web Application)
Last update: 12/04/2007
34
 Lab Assignment – Workbench “Test Drive” – 1 of 2
 Do the following:
1. Launch RBD and select your workspace (the one you set up and configured in
Chapter 0)
2. Find (by opening folders in Project Explorer and opening files in the Content Area)
the following resources (files):





allcustomers.java – the Java generated by RBD for the allcustomers page
allcustomers.egl – the EGL JSF Handler for the allcustomers web page
allcustomers.jsp – the allcustomers web page
stylesheet.css – the default cascading style sheet for this project – See Notes
EGLWeb.eglbld – the default “build file” for this project – See Notes
 Make the files in the Content Area full-screen, then size them back down
 Close all of the files in the Content Area
•
Find and close the Console view then re-open the Console view
•
From Project Explorer – explore your project (Open and close several of
the folders under: EGLSource and WebContent)
Last update: 12/04/2007
35
 Lab Assignment – Workbench “Test Drive” – 2 of 2
Do a bit more test driving:
5. From the Palette view – find (locate) the following (Note – you’ll need open a .JSP
page in the Content Area, in order to see the Palette view)
•
Enhanced Faces Components:
•
•
•
Command Button, Input text, Image,
An HTML: Horizontal Rule, Table, Image
An EGL variable
6. From the Window menu, open the Debug Perspective
•
•
Using the icons (top right hand corner of Workbench) switch from the Debug to the Web
Perspective
Close the Debug perspective
7. Reset your “current” (should be Web) Perspective
8. From the Servers view, start your application server
9. From Project Explorer, Run allcustomers.jsp on the server
10. From Help:
1. Search on the EGL topic: DataItem
2. From Tutorials Gallery/Tours run the Enterprise Generation Language tour
3. Find and open the EGL Cheat Sheets category. View one or more (time permitting)
Lab
Last update: 12/04/2007
36
UNIT
RBD Workbench
Topics:
 EGL and the Workbench terms and concepts
 A Workbench Walk-Through
 Creating an EGL “HelloWorld” Application
Last update: 12/04/2007
37
The Pages (you will create)
 Following the detailed steps in this lab, you will build these two simple Web
pages with EGL and the RBD tools.
Last update: 12/04/2007
38
The Workflow Process – From 10,000 Feet
 The steps you will follow to create these pages consist of:
1.
2.
3.
4.
5.
6.
Launch RBD and select your Workspace
Create a new web page from a pre-built template
Customize the page’s default layout
Edit the EGL code that enables the business logic for the page
Drag & drop EGL variables on the page to create new JSF Components
Run (test) the page on the server
 Now begin the lab from the detailed instructions starting on the next
slide…
Last update: 12/04/2007
39
 Lab – Launch RBD and select your Workspace
(If RBD is not
already up and
running)

From the
Windows start
menu launch
RBD

From the initial
prompt, specify
or browse to
and select your
Workspace

Your EGLWeb
project should
open
Last update: 12/04/2007
40
 Create a new Web Page Using a Page Template


From Project Explorer Right click
over \WebContent\ and select:
 New

Web Page
 Name the page: hello1.jsp
 From: Sample Templates
 Family A (no navigation)
Select A_gray.htpl
 Click Finish
Last update: 12/04/2007
41
 Customize the hello1.jsp Web Page

In the Content Area: Modify the default page header text and add a few
line breaks (using the  Enter key)
After you’ve completed the above,
 Right-click over the Web Page,
…and select Edit Page Code
Last update: 12/04/2007
42
 Add EGL Statements to the JSFHandler
 When you create a new .JSP page with RBD, it automatically creates a JSFHandler for the page to allow you
to call services and code your business logic.

Using the EGL Editor, code the following:
Don’t change this
(even if it doesn’t match)
 A string variable named field1
 A statement that assigns a “literal” to field1
 A new EGL function that forwards the field1 value
to a new page
(you will create the hello2.jsp page in the next step of this lab)
 Press: Ctrl+Shift+F
( simultaneously )
 This will format your source as shown in the screen capture
Note the semi-colons ;
that end your new
EGL statements;
 To save your EGL statements, either:
 Click the Save file icon  in the top left section of the menu
 Click your mouse inside the JSFHandler code, and press: Ctrl+S
Last update: 12/04/2007
43
 Add an EGL Field to the hello1.jsp Page – 1 of 3
Return to Page Designer for: hello1.jsp
(hint: Click the hello1.jsp tab in the Content Area)
(From the Page Data view)
Expand the Data folder
Select: field1 - string
Left-click and hold (the mouse button down)
Drag and Drop it
…onto the page next to a line break
 Note: When you drag and drop Page Data variables onto hello1.jsp, the RBD tooling
automatically generates all of the Java/J2EE APIs needed to render Server-Side EGL data
in the browser as HTML labels and values in the browser.
Last update: 12/04/2007
44
 Add an EGL Field to the hello1.jsp Page – 2 of 3
(From Insert Control) create
input/output fields by specifying:
 Updating an existing record
 Click the Options… button,
(From Options) un-check the
Delete button
Click OK
…then click Finish
Last update: 12/04/2007
45
 Bind an EGL Function to the Submit Button on the .JSP Page – 3 of 3
(From Page Data) 
Expand the  Actions folder
Select (Left-click, hold) and drag and drop the fwd()
function on top of the Submit Button
Last update: 12/04/2007
46
 Run the .JSP Page
1. Right-click over the page and select Run on Server…
2. Save any un-saved resources
3. If you are using Tomcat
3a. Make sure that:  Update context root… is checked –
and…Click: Finish
Note – if your page does not display, please go to the
next slide to diagnose
Last update: 12/04/2007
47
 What if I Get a Server Error When I Run My Page?
If your page does not display and you are not using
Tomcat, or if you get other Exception errors
when trying to run: hello1.jsp, please:
 Double-check to ensure there are no syntax
errors in hello1.egl ( no X’s
)

If there are syntax errors, correct them and try
again (mouse-over the X’s to see what’s wrong)
 If there are no syntax errors, and you’re using
WebSphere, and your page doesn’t display,
please ask your instructor for assistance
If you are using Tomcat, as your Application Server,
And if, after trying to Run on server – you get
an error like the following 
Restart the Tomcat server:
(From the Servers tab)
 Click the Restart the server icon

Then try running the: hello1.jsp page
on the server again.
Last update: 12/04/2007
48
 Lab – Part 2 – Create hello2.jsp Page and the hello2.egl Code

(From Project Explorer) Right-click over \WebContent\
and create a new web page – named: hello2.jsp
•
Select the same template for the new page (A_gray)

(Working with hello2.jsp in the Content Area)
Customize the page’s default text

Right-click over the page and select: Edit Page Code
From the EGL editor, add the following:
A string variable named: field2
Add a parameter to: onConstruction(field1 string)
Add this assignment statement
Add this new Function 
- Press Ctrl+Shift+F to format your code
- Save your work (press Ctrl/S – or click the Save icon)
Last update: 12/04/2007
49
 Add an EGL Field and Function to the .JSP Page
1. (From Page Data) Select (left-click, hold),
Drag & Drop the field2 - string variable on
the page
• Configure the controls produced – and
create an output (read-only) field:
2. (From Page Data)


Expand the  Actions folder
Select (left-click, hold), Drag & Drop the
returnToHello1() EGL function on the
page.
 This will create a Submit Button which fires off a call
to your EGL business logic inside the returnToHello1
function, when the user clicks it at run-time
Last update: 12/04/2007
50
Page Data View
A graphical window into the
variables and functions inside
the EGL JSF Handler for this
.JSP page
 Run hello1.jsp – Test Your Work
(From Project Explorer) Right-click over, and select run hello1.jsp on the server
 If you are using Tomcat make sure that:  Update context root… is checked – and…
Click: Finish (at Select Tasks)
 Note that you will do this every time you run a page using Tomcat
Last update: 12/04/2007
51
(OPTIONAL) Lab3
Create an EGL Batch Program
(From Project Explorer)
Right-click over EGLSource, and select:
New > Program

From the New EGL Program part wizard,
specify:
 Package:
 kbprograms
 EGL source file name:
 kbprogram
 Click Finish
Last update: 12/04/2007
52
 Lab3 – continued – Code the Batch EGL Program
The tooling will create a skeleton EGL batch program.
Edit the program, and add the following statements:

Four variable declarations 

Assignment statements 


Invoke a function 
Add a function that adds that calculates
simple interest 
// Comments are optional
(FYI) The slide ***Notes contain
finished code for the above.
Last update: 12/04/2007
53
 Lab3 – continued – Save and Debug the Batch Program
1. Save your edits by clicking the Save icon on the toolbar
2. Add a breakpoint to your EGL program, by double-clicking in the
Editor’s gray left-hand border


3. (from Project Explorer) Right-click over kbprogram.egl
Select: Debug EGL Program
Click Yes – at Confirm Perspective Switch
*** See Notes, if you’re using the Vista O.S.
Last update: 12/04/2007
54
 Lab3 – continued – Modify the Values and Step (F5) Through the Code

Double-click the
values in the
Variables View to
over-ride your
assignment
statements (note –
click right on top of
the variable Values)

Press F5 to step
through your EGL
statements – one
line at a time.
Note that as the
values change the
Variables view
updates.

When you are
finished, from the
top right corner
Close the Debug
Perspective
Last update: 12/04/2007
55
*** See
Slide Notes
 Extend This Batch Program Workshop
(More Optional Lab Work)
Time permitting: Return to the Web Perspective:
1. Add the new EGL functions shown in this
screen capture
2. From inside the main() function invoke the
new functions
3. Save your edits – and clean up any EGL
syntax errors - which will appear as a red
4. Debug (step through) your new code.
Between function invocations, consider
zeroing out (resetting) the result variable
values for each computation:
- principal
- interest
- nbrYears
5. Close the Debug Perspective, and return to
the Web Perspective
Last update: 12/04/2007
56
*** See Slide Notes for
the finished code
 Optional Lab4 – Working With EGL Code Formatter – 1 of 2
You have already seen that Ctrl+Shift+F will format your
code, when you are editing inside a file. But there are
several other things you should know about this
tooling feature:
1. You can format code for:
 Files
 All of the EGL files in a Package

Right-click over the file or package, and
selecting Format


This allows you to apply the source code
formatting rules to more than one file, in one
operation
Feel free to try this on


kbprogram.egl
All of the files in the jsfhandlers folder
Last update: 12/04/2007
57
 Optional Lab4 – Working With EGL Code Formatter – 2 of 2
To see or change the
Formatter Rules
From:
Preferences
EGL
Editor
Formatter
Click:
Show…
To view the current rules
New…
To define custom
EGL code formatting rules
Note that you could (when
finished with new
rules)
Export them to your fellow
project team members
Last update: 12/04/2007
58
 Optional Lab5 - Create an Online Calculator
If time permits, create the following new, EGL web page 

Using this EGL JSFHandler logic
And these controls – dragged
from Page Data:
 Challenge Lab
- Create the rest of the basic functions (and web page buttons) for your calculator: Subtract/Multiply/Divide
Last update: 12/04/2007
59
 Optional Lab6 – Create a Typical Login Page
 Create the following new web page 
hello3.jsp
 Name:
 Layout
 EGL Code
 Notes:
 Don’t worry about comments
//I am an EGL comment
 Don’t worry about blank lines
 If you get syntax errors
 (Red X’s appear)
 Mouse-over them to read what’s wrong
Last update: 12/04/2007
60
Unit Summary
 Now that you have completed this unit, you should have:
 Navigated the eclipse IDE,
 Opened project folders and files
 Set project properties
 Defined and used the following eclipse views and perspectives:
 Views
–
–
–
–
–
–
–
Content Area
Project Explorer
Page Data
Palette
Console
Servers
Capabilities
 Perspectives
– Web
– Debug
Last update: 12/04/2007
61