® IBM Software Group © 2006 IBM Corporation The EGL Workbench (Eclipse) This section introduces...
-
Upload
jean-parsons -
Category
Documents
-
view
214 -
download
0
Transcript of ® IBM Software Group © 2006 IBM Corporation The EGL Workbench (Eclipse) This section introduces...
®
IBM Software Group
© 2006 IBM Corporation
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.
2Last update: 12/04/2007
UNIT
EGL and the Workbench – terms and concepts
A Workbench Walk-Through
Creating an EGL “HelloWorld” Application
Topics:
RBD WorkbenchRBD Workbench
3Last update: 12/04/2007
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
It provides access to tools like editors, design tools, compilers and folders for managing your application’s contents
OrganizerOrganizer
ToolsTools
Edit and design facilityEdit and design facility
NOTENOTE – 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.
4Last update: 12/04/2007
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.
Workspace resources are organized into - Project(s)
- Folders
- Files
Project
Folders
Files
Workspace
5Last update: 12/04/2007
What is in a Project?
Workspace projectsWorkspace 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 dataconfiguration data, such as build files** and generation optionsgeneration options for EGL Java and/or COBOL generation
Projects may be further divided into foldersfolders
EGL “Web” projects contain the following high-level folders:\EGLSource\\Java Resources: src\\WebContent\
- See slide NOTESNOTES and the Help topic: Contents of an EGL Application
EGLSource
Files
WebPages
andWeb AppResource
Folders
JavaSource
Files
6Last update: 12/04/2007
What is in \EGLSource\
\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.egl
- See the Help topic: EGL Projects, Packages and Files
7Last update: 12/04/2007
What is in Java Resources: src
\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\src\
But the folder structure of \src\ will match \EGLSource\ one-for-one
Your generated java files will end with a .java.java extension
8Last update: 12/04/2007
What is in \WebContent\
\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
9Last update: 12/04/2007
Terms and Concepts – .EAR File – Simplified J2EE Deployment – for WASWAS Users
An EAR (EEnterprise ARARchive) 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” – or to a System z “load library” – which are files deployed on mainframes that also contain individual “modules”
EGLWebEAREGLWebEAR
otherother.WAR files.WAR files
DeploymentDeploymentDescriptorDescriptor
Utility Java ClassesUtility Java Classes.JAR files.JAR files
EGLWebEGLWeb.WAR file.WAR file(Modules)(Modules)
10Last update: 12/04/2007
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.
Paper/Pencil Review Questions
11Last update: 12/04/2007
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.
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
Page DataView
Content AreaView
PaletteView
ConsoleView
ProjectExplorer
View
NOTENOTE – 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.
12Last update: 12/04/2007
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
13Last update: 12/04/2007
Project Explorer – or Project Explorer ViewOrganizes 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
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
Right-clickContextMenu
14Last update: 12/04/2007
Content Area
Double-clicking a file in Project Explorer opens it in the Content Area 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)
15Last update: 12/04/2007
JSFHandler
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 JSF Handler (EGL)(EGL) resources that you can drag and drop onto your web page
DataData – which become labels and input/output controls
ActionsActions – which become Submit Buttons
ServicesServices – which become entire forms, based on their parameters and functions
Services
EGL FunctionEGL Variables
Drag ‘n Drop from Page Data
onto your Web Page
16Last update: 12/04/2007
Palette View
Provides a drag & drag & dropdrop 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 If the PalettePalette View is not available by default, open it from the View is not available by default, open it from the menu:menu: Window Show View Other… General (expand) Palette
If the If the PalettePalette View is not available by default, open it from the View is not available by default, open it from the menu:menu: Window Show View Other… General (expand) Palette
17Last update: 12/04/2007
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 resource2. Customize its properties
Properties (View) of the Postalcode Input Text Field’s JSF attributes
18Last update: 12/04/2007
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
19Last update: 12/04/2007
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.
ApplicationServer
Messages
RunningWebPage
20Last update: 12/04/2007
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.
Hyper-linkedProblem Description
in the Problems view
Source filecontaining
the problem
21Last update: 12/04/2007
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
22Last update: 12/04/2007
Working With Views You can maximizemaximize a view by
double-clicking in the middle of the View Tab (and re-size the view back, by doing the same)
You can CloseClose a view (inadvertently or on purpose) – by clicking the X
You can Re-open a viewRe-open a view by pulling down the Window menu, and selecting: Show Show View >View >
23Last update: 12/04/2007
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 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.
24Last update: 12/04/2007
Working With Perspectives
There are only a few things you will do with Perspectives (besides use them)
OpenOpen Perspective From your current workbench perspective, open a new perspective with its
default views and tools
ResetReset Perspective Return to the RBD installation defaults, for a perspective
CloseClose Perspective Close a perspective if no longer needed for your work at the moment
CustomizeCustomize and savesave 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
25Last update: 12/04/2007
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:
EditorEditor You can change the editor’s
appearance Page DesignerPage Designer
Specify whether to delete associated files
SQL Database ConnectionsSQL Database Connections Specify a connection to an
external database (DB2, IDS, etc.) for SQLRetrieve
Click ApplyClick Apply
26Last update: 12/04/2007
Workspace Preferences – Customizing the Workbench – Modify SQL Preferences
The SQL Preferences allow you to customize how the RBD tooling generates SQL resources
From the SQLSQL Preferences dialog check:
Change to lower case and capitalize first letter after underscore
Remove underscores
Click ApplyClick Apply
27Last update: 12/04/2007
Workspace Preferences Lab – EGL Editor
Editor PreferencesEditor Preferences You can change the editor’s appearance,
and how it treats and displays your source statements
UNUN-check:-check: Annotate errors as you type
Optionally – feel free to try out other editor preferences
Click ApplyClick Apply
28Last update: 12/04/2007
OPTIONALOPTIONAL 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
29Last update: 12/04/2007
OPTIONALOPTIONAL 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 handler egl-jsf
PageDesigner Page Code PageDesigner Page Code generationgeneration template
Click Edit… Add the EGL handler property shown
Click OK To save your edits
Click OK To save your Template preferences
cancelOnPageTransition=yes,cancelOnPageTransition=yes,
30Last update: 12/04/2007
Really OptionalReally 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 AssociationsFile 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 OK5. Click OK
To use the new editor, from Project Explorer, Right-Click Select Open With
31Last update: 12/04/2007
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-the-box
education samples
Samples Gallery Contains working, sample
applications
Cheat Sheets Contains step-by-step “how-
to” instructions
32Last update: 12/04/2007
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 buttonSelect something - Click a field - Click a drawer in the Palette - Select a file in the Content Area
Scroll up and down/Right and left
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
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
- Project Explorer – the context menu allows you to - Create a new resource - Delete/move - Generate (compile) a resource - Run a page on the Server
33Last update: 12/04/2007
Review
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
Match the Following Terms and RBD Vocabulary
34Last update: 12/04/2007
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 sqrtmathlib 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 isis an EGL JSFHandler? (Search the help on: JSFHandler Part – and select, Elements of a Web Application)
35Last update: 12/04/2007
Lab Assignment – Workbench “Test Drive” – 1 of 2
Do the following:
1.1. Launch RBDLaunch RBD and select your workspace (the one you set up and configured in Chapter 0)
2.2. FindFind (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 AreaContent Area full-screen, then size them back down
Close all of the files in the Content AreaContent Area
• Find and close the ConsoleConsole view then re-open the Console view
• From Project ExplorerProject Explorer – explore your project (Open and close several of the folders under: EGLSource and WebContent)
36Last update: 12/04/2007
Lab Assignment – Workbench “Test Drive” – 2 of 2Do 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: Enhanced Faces Components: • Command Button, Input text, Image,
• An HTMLHTML: Horizontal Rule, Table, Image
• An EGLEGL variable
6. From the WindowWindow menu, open the DebugDebug 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 ExplorerProject Explorer, Run allcustomers.jspRun allcustomers.jsp on the server
10.From HelpHelp: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
37Last update: 12/04/2007
UNIT
EGL and the Workbench terms and concepts
A Workbench Walk-Through
Creating an EGL “HelloWorld” ApplicationCreating an EGL “HelloWorld” Application
Topics:
RBD WorkbenchRBD Workbench
38Last update: 12/04/2007
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.
39Last update: 12/04/2007
The Workflow Process – From 10,000 Feet The steps you will follow to create these pages consist of:
1. Launch RBD and select your Workspace2. Create a new web page from a pre-built template3. Customize the page’s default layout4. Edit the EGL code that enables the business logic for the page5. Drag & drop EGL variables on the page to create new JSF Components6. Run (test) the page on the server
Now begin the lab from the detailed instructions starting on the next slide…
40Last update: 12/04/2007
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
41Last update: 12/04/2007
Create a new Web Page Using a Page Template From Project Explorer Right clickRight click
over \WebContent\ and select: New
Web Page
Name the page: hello1hello1.jsp.jsp From: Sample TemplatesSample Templates Family A (no navigation)Family A (no navigation)
Select A_gray.htplA_gray.htpl
Click Finish Finish
42Last update: 12/04/2007
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 CodeEdit Page Code
Customize the hello1.jsp Web Page
43Last update: 12/04/2007
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:code the following:
A stringstring variable named field1field1
A statement that assigns a “literal” literal” to field1field1
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:Press: Ctrl+Shift+F Ctrl+Shift+F ( simultaneously )
This will format your source as shown in the screen capture
To save your EGL statements, To save your EGL statements, eithereither:: Click the Save fileSave file icon in the top left section of the menu Click your mouse inside the JSFHandler code, and press: Ctrl+SCtrl+S
Add EGL Statements to the JSFHandler
Don’tDon’t change this(even if it doesn’t match)
Note the semi-colons ; that end your new EGL statements;
Note the semi-colons ; that end your new EGL statements;
44Last update: 12/04/2007
Return to Page Designer for: hello1.jsphello1.jsp(hint: Click the hello1.jsphello1.jsp tab in the Content Area)
(From the Page Data view)
Expand the Data folderSelect: field1 - string
Left-click and hold (the mouse button down)Drag and Drop it
…onto the page next to a line break
Add an EGL Field to the hello1.jsp Page – 1 of 3
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.
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.
45Last update: 12/04/2007
(From Insert Control) create input/output fields by specifying:
Updating an existing recordUpdating an existing record
Click the Options…Options… button, (From Options) unun-check the Delete
button
Click OKOK
…then click FinishFinish
Add an EGL Field to the hello1.jsp Page – 2 of 3
46Last update: 12/04/2007
(From Page Data)
Expand the Actions folderSelect (Left-click, hold) and drag and drop the fwd()
function on top ofon top of the Submit Button
Bind an EGL Function to the Submit Button on the .JSP Page – 3 of 3
47Last update: 12/04/2007
1. Right-click1. Right-click over the page and select Run on Server…Run on Server…
2. Save2. Save any un-saved resources3. If you are using Tomcat
3a. Make sure that: Update context rootUpdate context root… is checked – and…Click: FinishFinish
Run the .JSP Page
Note – if your page does Note – if your page does notnot display, please go to the display, please go to the next slide to diagnosenext slide to diagnose
48Last update: 12/04/2007
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:Restart the Tomcat server:(From the ServersServers tab) Click the Restart the server icon
Then try running the: hello1.jsphello1.jsp page on the server again.
What if I Get a Server Error When I Run My Page?
49Last update: 12/04/2007
Lab – Part 2 – Create hello2.jsp Page and the hello2.egl Code
From the EGL editor, add the following:
A stringstring variable named: field2field2Add a parameter to: onConstruction(field1 stringstring)
Add this assignment statement
Add this new Function
- Press Ctrl+Shift+FCtrl+Shift+F to format your code
- Save your work (press Ctrl/SCtrl/S – or click the Save icon)
(From Project Explorer) Right-click over \WebContent\ \WebContent\ and create a new web page – named: hello2.jsphello2.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 CodeEdit Page Code
50Last update: 12/04/2007
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
Page Data ViewA graphical window into
the variables and functions inside the EGL JSF Handler
for this .JSP page
51Last update: 12/04/2007
Run hello1.jsp – Test Your Work
(From Project Explorer) Right-click over, and select run run hello1.jsphello1.jsp on the server If you are using Tomcat make sure that: Update context rootUpdate context root… is checked – and…
Click: Finish Finish (at Select Tasks) Note that you will do this every timeevery time you run a page using Tomcat
52Last update: 12/04/2007
(OPTIONALOPTIONAL) 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:
kbprogramskbprograms EGL source file name:
kbprogramkbprogram
Click Click FFinishinish
53Last update: 12/04/2007
Lab3 – continued – Code the Batch EGL ProgramThe 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.
54Last update: 12/04/2007
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 theEditor’s gray left-hand border
3. (from Project Explorer) Right-click over kbprogram.egl Select: Debug EGL ProgramDebug EGL Program
Click YesYes – at Confirm Perspective Switch
*** See Notes*** See Notes, if you’re using the Vista O.S.
55Last update: 12/04/2007
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 F5F5 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
*** See *** See Slide NotesSlide Notes
*** See *** See Slide NotesSlide Notes
56Last update: 12/04/2007
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()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- principal
- interest- interest
- nbrYears- nbrYears
5. Close the Debug Perspective, and return to the Web Perspective
*** See Slide Notes for *** See Slide Notes for the finished codethe finished code
*** See Slide Notes for *** See Slide Notes for the finished codethe finished code
57Last update: 12/04/2007
Optional Lab4 – Working With EGL Code Formatter – 1 of 2You have already seen that Ctrl+Shift+FCtrl+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 Right-click over the file or package, and selecting FormatFormat 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 jsfhandlersjsfhandlers folder
58Last update: 12/04/2007
Optional Lab4 – Working With EGL Code Formatter – 2 of 2To see or change the Formatter Rules
From: PreferencesPreferences
EGL EGL
EditorEditor
FormatterFormatter
Click: Show…Show…To view the current rules
New…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
59Last update: 12/04/2007
Optional 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 LabChallenge Lab - Create the rest of the basic functions (and web page buttons) for your calculator: Subtract/Multiply/Divide
60Last update: 12/04/2007
OptionalOptional Lab6 – Create a Typical Login Page
Create the following new web page Name: hello3.jsphello3.jsp
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
61Last update: 12/04/2007
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
Unit Summary