The EGL Workbench (Eclipse)

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

2. RBD Workbench UNIT Topics: • EGL and the Workbench – terms and concepts • A Workbench Walk-Through • Creating an EGL “HelloWorld” Application

3. 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 Tools Edit and design facility 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.

4. 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 Workspace Files

5. 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 • Projects may be further divided into folders • EGL “Web” projects contain the following high-level folders: \EGLSource\ \Java Resources: src\ \WebContent\  - See slide NOTESand the Help topic: Contents of an EGL Application EGL Source Files Java Source Files Web Pages and Web App Resource Folders

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

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

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

9. Terms and Concepts – .EAR File – Simplified J2EE Deployment – for WAS Users • 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” – or to a System z “load library” – which are files deployed on mainframes that also contain individual “modules” EGLWebEAR Deployment Descriptor EGLWeb .WAR file (Modules) other .WAR files Utility Java Classes .JAR files

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

11. 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 Project Explorer View Content Area View Palette View 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.

12. Important Views Out of the dozens of Workbench views available to assist you with your development, there are an essential nine: • Project Explorer • Content Area • Page Data • Palette • Properties • Console • Servers • Problems • Outline

13. 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 • 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-click Context Menu

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

15. 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 • Services – which become entire forms, based on their parameters and functions Drag ‘n Drop from Page Data onto your Web Page JSF Handler Services EGL Variables EGL Function

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

17. 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: • Drag and drop a resource • Customize its properties Properties (View) of the Postalcode Input Text Field’s JSF attributes

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

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

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

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

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

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

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

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

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

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

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

29. 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 generationtemplate • ClickEdit… • Add the EGL handler property shown  • Click OK • To save your edits • Click OK • To save your Template preferences cancelOnPageTransition=yes,

30. 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: • From Preferences > General > Editors, click File Associations • From the File types: list, select *.egl • From Associated editors: • Click Add… • From External Programs – select from the list …or… • Browse to your own custom editor and select it (example shown is WordPad) • Click OK • Click OK To use the new editor, from Project Explorer, • Right-Click • Select Open With

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

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

33.  Review Match the Following Terms and RBD Vocabulary

34.  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 loada 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)

35. Lab Assignment – Workbench “Test Drive” – 1 of 2  Do the following: • Launch RBD and select your workspace (the one you set up and configured in Chapter 0) • 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)

36. Lab Assignment – Workbench “Test Drive” – 2 of 2 Do a bit more test driving: • 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 • 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 • Reset your “current” (should be Web) Perspective • From the Servers view, start your application server • From Project Explorer, Run allcustomers.jsp on the server • From Help: • Search on the EGL topic: DataItem • From Tutorials Gallery/Tours run the Enterprise Generation Language tour • Find and open the EGL Cheat Sheets category. View one or more (time permitting) Lab

37. RBD Workbench UNIT Topics: • EGL and the Workbench terms and concepts • A Workbench Walk-Through • Creating an EGL “HelloWorld” Application

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

39. The Workflow Process – From 10,000 Feet • The steps you will follow to create these pages consist of: • 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…

40.  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

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

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

43.  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: • 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 • 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 Don’t change this (even if it doesn’t match) Note the semi-colons ; that end your new EGL statements;

44.  Add an EGL Field to the hello1.jsp Page – 1 of 3 Return to Page Designer for: hello1.jsp (hint: Click the hello1.jsptab 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.

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

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

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

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

49.  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(field1string) 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)

50.  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 View A graphical window into the variables and functions inside the EGL JSF Handler for this .JSP page