JSF/EGL Advanced Topics

1. JSF/EGL Advanced Topics Jon Sayles, EGL Application Developer: jsayles@us.ibm.com

2. Agenda - Topics • Web Design Considerations • EGL/JSF Productivity Considerations • Specific JSF Intermediate – Advanced Development Techniques • EGL/JSF Performance Topics About this session: • Not being recorded • Informal – “for what it’s worth” – and also a “work-in-progress” • Primarily lessons learned, and keys to success • Many “things you have to consider” – Questions that have to be asked, as well as answers • More about production page issues – less about prototypes and pilot project work • Web-orientation, not Text UI – or COBOL Generation • Roll-up of last year’s JSF/EGL Web and Enterprise Modernization experience • You will probably know some – perhaps a lot of what’s covered • Hopefully you pick up a few new things that save you time & money • The Project Interchange File used in the demo are on the EGL Café

3. JSF and EGL Development Productivity and Design Considerations

4. EGL/JSF Productivity As a “declarative development paradigm”, becoming productive with EGL is a combination of two things: • How to do, what you want to do • Doing that enough times that you become facile • Where things are • Development steps • Drag & Drop • Eclipse orientation Consider it like playing a musical instrument • What are the notes in an “A major” scale? • What are the fingerings? • Okay – I got it. Now I have to apply it to this Beethoven sonata If you are like me (an ex-mainframe developer – aka “dinosaur”) there is a lot to learn. But if you’ve learned through hands-on tutorials, and get the opportunity to use EGL full-time, you will get there – and become productive. Extremely productive. But only if you both know how to do what you want to do – and practice, will you learn to “think in EGL” (Jake Berberich, Xavier Consulting Group) – and learn to “see in JSF”

5. Complex (Production) Applications and Productivity Three categories: • “Green field” (new) applications • Enterprise Modernization – of character-based applications • Enterprise Modernization of GUI (PowerBuilder, VB, SQL*Forms, etc.) applications All three • Represent significantly different problem-domains • Have different keys to success • Require different skills and backgrounds But all three have in common a solid grasp of: • EGL – language and tools • JSF – tools and development techniques …and an understanding of (“about” knowledge): • Web – Design and development • U.I. design principles for the web • HTML – concepts (you will use the RBD tools in practice) • JavaScript – how to find and use JavaScript (not write)

6. Obtaining a “Solid Grasp” on the EGL, JSF and Development Domain – 1 of 2 Tools: • EGL: • Tutorials: http://www-949.ibm.com/software/rational/cafe/docs/DOC-2412 • EGL Programmer’s Guide– Help System and: http://www-949.ibm.com/software/rational/cafe/community/egl/documentation • EGL Language Reference – Help System and: http://www-949.ibm.com/software/rational/cafe/community/egl/documentation • EGL Forum: http://www-949.ibm.com/software/rational/cafe/community/egl?view=discussions • JSF: • Tutorials:http://www-949.ibm.com/software/rational/cafe/docs/DOC-2412 • JSF Forum: http://www.ibm.com/developerworks/forums/forum.jspa?forumID=378 Web Application “Development Domain”: Recommendation to bring in web-design/graphics specialists. If not, consider the following sites: • Links to design pattern examples: • http://www.welie.com/patterns/ - really excellent, detailed pattern site  • http://en.wikipedia.org/wiki/User_interface - no list is complete without a wikipedia entry • http://en.wikipedia.org/wiki/User_interface_design - or two • And of course this, for color-coordination • http://www.wellstyled.com/tools/colorscheme2/index-en.html Many excellent HTML, .CSS and JavaScript tutorials free on the web (just GOOGLE “Learn HTML”) – you’ll get more hits than you can shake a stick at Attend conferences: http://www-949.ibm.com/software/rational/cafe/docs/DOC-2452 And of course, when all else fails eMail the EGL ECO-system team: • Sanjay Chandru, Mark Evans, Vijay Katoch, Jon Sayles, etc.

7. Mastering the Tools and Development Domain – 2 of 2 Also check out other resources on the EGL Café. Especially the EGL Forum. Also use the Café to make connections with Business Partners and experts in EGL

8. Green Field – New Applications  Considerations • Use the out-of-the-box tooling and techniques: • You can – spend endless hours and days trying to make JSF do things that are only possible with gobs of customized, hand-written JavaScript and HTML • Conversely you can design and develop your application using the JSF components as they exist in the tooling: • Benefits: • Productivity – by at least one magnitude of order • (far) fewer errors • Easier to maintain and enhance • Increased learning on your part – more scales, more practice! • Recommendation: • Introduce the JSF components to: • Users • Web designers and graphic artists • Explain benefits and R.O.I. of designers doing initial work on .JTPLs and page prototypes using JSF and EGL JSFHandlers (see upcoming topic) • Some of those who’ve gone this route: • http://www-01.ibm.com/software/success/cssdb.nsf/CS/WJBN-7DPR5T?OpenDocument&Site=rational&cty=en_us • http://www-01.ibm.com/software/success/cssdb.nsf/CS/WJBN-73UQN7?OpenDocument&Site=rational&cty=en_us

9. Enterprise Modernization – Character-Based Applications  • Considerations: • U.I. bar is set fairly low (relative to GUI apps) • Small # of fields per/screen – consistent with mainframe high-transaction systems • Small amount of data sent/received • Same stateless model as the web • Simple controls and page design starting point (literals/input/output fields) • Other U.I. concerns • Need for user re-training (if deep U.I. re-design) • Need for hot-key and PF-Key emulation • Often large # of screens • Make every attempt to cookie-cut: • Template pages – for U.I. and consistency • DataItems – for centralized and non-duplicate effort • EGL statement templates, macros and Snippets – for business logic/JSFHandler development • Must decide on overall application U.I. page pattern and design approach. Current (du jour) model: • Tab page – used to roll up 1 – n (we’ve seen as many as 19) character-based screens into one web page view • Different tab protocols though – we discuss this later in the slides • Menu screens – become inline JSF menus • Performance • Character-based apps typically delivered sub-second response time • This can be difficult to achieve with Java/JSP technology  • We discuss performance later in the slides • Reuse of production RPG/COBOL business logic very attractive • But consider need for – and cost of mainframe refactor/reengineer of code and processes (see next slide)

10. Three Ways of Modernizing Applications Wrapping Re-engineering Redeveloping Use of screen-scraping to package "pseudo-services" Business logic is modularized and separated from presentation Business logic of services is redesigned from scratch DataModel DataModel DataModel Business Logic Business Logic Mixed Business Logic and Presentation Logic Wrapper Wrapper Orchestration Orchestration Orchestration Orchestration PresentationLogic Interface Interface Interface Interface Interface Interface Source: Gartner

11. Enterprise Modernization – GUI (client/server) Applications  • Considerations: • U.I. bar often set fairly high: • Large # of fields/screen • Complex layout – we will be covering this later in the session • Complex controls: • Tree controls • Complex user-event model • Large amount of data • Stateful …vs… Stateless model – often transaction management becomes an issue • Often requirement to realize the existing production U.I. VERY CLOSELY • This can be difficult or even impossible some times, with any Web/HTML-based technology • Often small # of custom (and complex) screens • Not necessarily a “good” thing, as the reuse factor for templates, etc. is diminished • And the complex screens can be VERY complex: • Layout • User/event handling • Performance • While GUIs typically were not sub-second response time, the “fat client” application model allowed for enormous #s of rows: • 20,000  90,000 rows per/database access not atypical • This is not a good model for the web (ya think?) • Reuse of production SQL business logic very attractive • Harvest using techniques in Foundation Tutorials

12. Keys to Success  Two perspectives: • Overall • Across disciplines • U.I. • Specific to EGL/JSF development Overall Keys to Success • Develop with “scaffolding” approach: • Build from the bottom up • Start with Business object and Data Access Layer • Test library/service functions with EGL programs • Then interface to client (“handler”) resources • Test at each level: • Cause …and… Effect • Simplifies problem determination • Scaffolding approach allows/encourages: • Functional decomposition (aka “Divide and Conquer”) • Reuse – of all project elements • Most importantly –Development using the scaffolding approach gives you control over a complex process • Use the tools you’ve bought – and don’t be afraid to nose around: • Many useful features of EGL/JSF – not even covered in the classroom training • Use the techniques in the EGL Best Practices PowerPoint: • http://www-949.ibm.com/software/rational/cafe/docs/DOC-2482

13. Web Site Navigator – U.I. Key to Success  Web Site Navigator

14. Design first, then develop – U.I. Key to Success  Considerations: • Page Designer is an excellent development/construction tool • But, obtain better productivity when working from a visual model With apologies to Gary Larsen

15. .JTPL Pages – U.I. Key to Success  Considerations: • Create and design your .JTPL(s): • Based on in-house .CSS • Especially be cognizant of font-sizes for “busy” Client/Server app re-writes • If necessary – start with an IBM-supplied .JTPL • .JTPL (page) should contain/consist of: • Static layout – for common page patterns • DIV/Tables - Note: Be sure to account for target browser screen resolutions • Text, Graphics, buttons, breadcrumbs, banners • “Common-elements” JSF layout (that is – dynamic content used on all pages that “inherit” from the .JTPL): • JSF menus, Date, Page identifier, Read/only server-side data, User info, etc • If wanting to use hx:form properties (set focus to field, map Enter to click, etc.) remove the <hx:form> and </hx:form> tags from the .JTPL • JSFHandler (EGL) for .JTPL should contain: • Authorization • FORWARD TO URL http://www.stopTryingToHackIn.jsp - in onConstruction, etc. • Role-based business logic • Attributes set in the .JTPL areas • Data access routines common to page startup • Dynamic properties set – hide/show menu entries, for given user views, etc. • Create .JTPL “test page”– with prototyped data (see next slide) • Run on server, and Obtain sign-off on the .JTPL

16. Prototype .JSP Pages – U.I. Key to Success  Considerations: • Create your pages based on the templates • Use the “Explicit Design”– development approach to laying out pages: • In the JSFHandlers: • Add EGL basicRecords (for U.I. binding) • Create functions (routines) to value the basicRecords • This is assuming the data access layer is not complete – or that you can’t use something like Derby to prototype • Run on the server • Validate the U.I. – layout, dimensions, etc.

17. Effective Use of the JSF/EGL Tooling  Macro Templates

18. Example – Use of the JSF/EGL Tooling – Macros and Templates 

19. Example – Use of the JSF/EGL Tooling – Macros and Templates 

20. JSF and EGL Intermediate – to – Advanced Development Techniques

21. Use Case Patterns • Page Patterns • Organization Patterns • Tab page - advanced intermediate to advanced techniques • Frameset style Tab page • Read/Update Pages • Master Detail Options • Multiple pages • Inline Frames • Menu and page real estate options • Tree Control • Accordion Palette • Section • Popup options • JSF Tab Panel • JavaScript Popup • AJAX and JavaScript • Complex AJAX page • Firing JavaScript from EGL (server-side) logic • Laying out complex pages • JSP Page Performance topics • Programmatic Paging • JSF Performance (General)

22. Tab Pages Very popular and prevalent page pattern and U.I. model • Ubiquitous for GUI-Client/Server re-development to EGL • And attractive first phase in modernizing E.M. / green screen applications • And for Green Field (brand new) designs Common model for: • Master/Detail – U.I. requirements • Framework-emulation Many options for Tab pages: • Tabs on top/Tabs on left • Icons in tab panels • Tab control’s U.I. completely customizable, via: tabpanel.css + stylesheet.css • AJAX support can be embedded into tabs (see example later in this slide deck) • Can use JavaScript to “click”– jump to a particular bfpanel • Tab height can be programmatically specified from EGL • Can embed tabs within tabs • Can use tabs –“creatively” (see scrollingDT.jsp Many bfpanel options: • JavaScript events: • onenter/onexit • Allows you to fire any server-side event (EGL function) when user’s click a panel • Can hide/show a bfpanel • From EGL JSFHandler – can detect which bfpanel has been clicked • Can embed icons in bfpanels • And programmatically change the icons

23. Tab Pages tabPage.jsp

24. Simulated Tab Pages – Buttons on Inline Frame When you need to render fixed information inside a “tabbed” metaphor, consider using the following design: • Header • Buttons (and Command Buttons with images) – that open a JSP page inside of an in-Line frame • Fixed information • Inline frame • Footer Allows you to: • Modularize application design • Simplify development (parallel) • Make individual JSP pages and JSFHandlers smaller If update, must consider commit

25. Simulated Tab Pages – Buttons on Inline Frame frameworkpage.jsp

26. Ways to Manage Page Real Estate – JSF Panel Sections panelSection.jsp Can collapse/expand entire areas of screen real estate Very simple tooling Browser-invoked

27. Page Pattern – Pages That Are Either Read …or… Update General PrinciplesIt is a common page pattern to allow (certain) users to see read/only controls on pages (i.e. disabled/read only input controls, or just plain output controls), and other users to either see update-able controls (i.e. enabled input controls). The design and development question becomes – what is the best method of providing this functionality? The standard options are: • Create multiple pages: • Pros – Have complete control over each page • Cons – The server will have to load a new page/URL. Maintenance and development costs are duplicated • Use JavaScript to do disable/enable controls: • Pros – One page. Performance – as all of the run-time functionality occurs in the browser • Cons – Maintenance and development costs are very high. Need to learn, write, test, maintain custom JavaScript – need JavaScript code for every control to be disabled/enabled • Use JSF tooling – Separate output/input controls. Hide as appropriate with JSF rendered property • Pros – One page. Easy development/Enabling using JSF rendered/EGL boolean variables. • Cons – Server-side performance. Design-time view can be cumbersome, with duplicated individual controls, or a completely duplicated HTML table-full of controls inside a JSF Group Box/JSP. Basically, you will have two separate controls for each field on the screen. • Use JSF tooling – Single controls. Disable/Enable with JSF properties • Pros – One page. Easy development/Enabling using JSF disabled/read-only and styleClass properties • Cons – Server-side performance (slight). Will need to code EGL JSFHandler logic to enable/disable all controls. Also, the look and feel of disabled controls is not the same as output fields.

28. Master Detail – Multiple Pages Typical “drill-down” pattern. Similar work-flow to mainframe applications

29. Master Detail – Inline Frame Consolidate information in one browser

30. Master Detail – dataTable With Details – inLine Form Consolidate information in one browser Simple approach (all in the tooling) Not much in the way of U.I./Layout options for form allcustomersEditPanel.jsp DataTable Properties Also – probably select Row Action to update individual row

31. Master Detail – dataTable With Details – Row Select Collapse/Expand Combine dataTable (list) with detail information - inLine More complex development But total control over layout/U.I. options for form allcustomers6.jsp

32. Menu Controls – Tree Controls Tree Control very popular menu-type control • Especially for Client/Server redevelopment efforts Can: • Populate Tree control with dynamic Contents – using EGL dynamic arrays • Have up to seven “LEVELS” of nesting • Respond to user click – and fire off JavaScript for browser-events • Customize icons • Programmatically

33. Tree Controls treePage.jsp Note – Tree controls depend on EGL “nested arrays” for their hierarchical content. See the section later on this slide-deck on that topic.

34. Menu Controls – Accordion Menu (“Palette”) Control Accordion Menu (“Palette”) another very popular approach to preserving real-estate on a page Requires custom: • .CSS • HTML • JavaScript Can embed EGL server-side values inside individual palette “drawers” Not available from the JSF tooling!

35. Accordion Menu (“Palette”) Control Not yet documented. In the project: accordianPalette.jsp

36. Complex Page Design – HTML Tables/Div tags – 7 Tips and Techniques *** Bill Andreas This section on is presented courtesy Bill Andreas – a world-class thought leader on the topic of JSF and U.I. page design 1) Always set cell-padding, cell spacing and cell margins to zero on all tables and generally on most divs used in conjunction with tables 2) Make sure all tables always have a width. Use percentage widths sparingly. If you use heights (e.g., 100%) you may need to add JavaScript that is triggered on page resizes to force some things to be the right size. • I have only find you need to do this for Firefox and only when you have a table cell that has a height that's a percentage AND where that table cell contains a div (or rarely a table) that has a height of 100% (i.e., it should be the height of the containing cell). Firefox screws this up. The JavaScript needed to correct this is simply to look up the container cell's actual height and set the contained things height to that explicit height. • E.g., say "div1" with a height of 100% is inside a cell that has a percentage height. • Then code of this sort (in the onload and onsize events of the body tag) can be used to tidy up the page: var obj = document.getElementbyId("div1"); if (obj && obj.parentNode.tagName.toUpperCase()=="TD") { var ht = obj.parentNode.offsetHeight; obj.style.height = ht + "px"; } • Make sure as many columns as possible have an explicitly-specified width. • To ensure columns (particularly big "wide" columns used to do general page layout) have a minimum width that works, tuck an invisible gif 1 pixel high and nnn pixels wide (where nnn is the minimum width) in the top of the column. Why? • Because in HTML when you set a width on a column, this is not actually an explicit width (e.g., td width="200") does not mean the column is 200 pixels wide. • If, however, there is a non-breaking entity in the column (such as an img tag), then the column will always be AT LEAST as wide as that entity (no matter what). • So if you are making a table that's to be used for "layout", you may want to put a placeholder image in a cell to ensure the cell is always at least that wide.

37. Complex Page Design – HTML Tables/Div tags – 7 Tips and Techniques – continued 5) Use a mix of tables and absolutely positioned divs that in turn contain tables (to layout our "form-like things"). • Use a 1-3 level set of nested HTML tables to break the page up into sections (e.g., header, footer, left-nav column, main body, ...) • Inside each of the main areas, use absolutely positioned div tags to contain the content. • In those divs, if need be, use additional (nested) tables that contain detailed content. 6) Try to keep the nesting of any set of tables to three or less… primarily for efficiency, as nested HTML tables notoriously slow down a page -- the deeper the nesting the slower the page. But also, avoiding this (4 or more level HTML table nesting) does minimize browser differences in rendering. 7) Don't use table columns (td's) to do line breaking in data tables with "lengthy data". Put a fixed-width div in the column and have the div contain the data (so the div does the line breaking instead of the td). Note that I do not use the line wrap cell contents" checkbox in the JSF tooling, but instead hand code: <td><div style="width:200px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacus urna, ornare nec, adipiscing sit amet, tempus ut, risus. Vestibulum aliquam lectus sed libero.</div></td> …instead of… <td width="200”>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas lacus urna, ornare nec, adipiscing sit amet, tempus ut, risus. Vestibulum aliquam lectus sed libero</td> • You'll get better quality line breaks and the table will hold it's column widths better. Note that this "div wrapping" of content in a cell, is often used throughout tables instead of using explicit widths on columns. • For example, compare: <table><tr><td><div style="width:50px">data column 1</div></td><td><div style="width:150px">data column 2</div></td></tr></table> <table><tr><td width="50">data column 1</td><td width="150">data column 2</td></tr></table> • The first (using divs) will give you more accurate column widths than the second. It will, however require more markup (each row has to include the divs), so might be marginally slower. Note that when you turn on "vertical scrolling" in an hx;dataTableEx, the JSF tooling does the above for you automatically (render div-based widths instead of td-based widths)

38. AJAX and JavaScript Thanks to Muneer Sai’d

39. AJAX – Advanced Usage – Search onKeyUp Typical “drill-down” pattern. Similar work-flow to mainframe applications Note – this technique and how to build the page is covered in the EGL-JSF-v71.ppt

40. JavaScript – Firing off JavaScript From EGL Typical “drill-down” pattern. Similar work-flow to mainframe applications

41. JavaScript – Right-click over a Page, and How to Programmatically Respond to any Key in the Browser You may need to support page right-clicking, trapping the event either to fire something off, or disable it. Here’s one way to do this, using JavaScript. Also – you might need to trap for anytime the user presses ANY given key – example: a number, or a character, or something like PgUp/PgDn, etc.

42. JavaScript to Trap For User Right-Click At the end of the .JSP page’s source file, copy and paste the statements in the Notes section of this slide. • Note (from the screen capture) that the onmousedown event for a Link on a field in a JSF dataTable calls a click(); function • The click(e) function checks to see if it’s a right-click, and if so, opens a modal dialog window (which was another workshop in this course). • You could do anything there, instead, including pass parameters from the clicked row to the modal window, supplying context. • The Notes section also contains a link to a web article on trapping for clicked events

43. JavaScript to Trap For PgUp/PgDn You can employ the same kind of JavaScript coding technique to trap for any keyboard/ASCII character. Here’s an example of someone that wanted to fire off call when the user pressed PgUp or PgDn The project shows this, with pageDown.jsp • The Notes section also contains this source

44. Filling Nested Arrays With Values From Tables This Learning Module describes the use of EGL and data access operations to fill nested arrays. It coincidentally shows how to turn a nested array data structure into a nested JSF dataTable.

45.  Another OPTIONAL Workshop – Filling a Nested Array of Records From the Database Problem - Need to fill a nested array of records. Example “Detail report of a customers orders” Customer > Orders > OrderItems > Item Development choices: • Table join - to do the database access. With an additional iteration (for loop) over the join record, to parse out individual array records in the hierarchy • Multiple cursor operation: 1. get customers ... for each customer 2. get orders ... for each order 3. get OrderItems, etc. • Be suspicious of dichotomous thinking, (making things black & white) there's probably not a one-size-fits-all answer. • Setting aside development time, performance trade offs include: • Table join - would be better DBMS performance - but could lead to worse Server Performance • Multiple cursors - would be better server performance But if DB2 is remote, what’s the penalty for all those cursor set opens/loops/closes) • Let’s try this out, and see how it would be to develop

46.  OPTIONAL Workshop – Filling a Nested Array of Records From the Database – 1 of 5 Steps: • Open Customer.egl (it’s under: \EGLSource\eglderbyr7.data\ • Scroll to the end of the file • From the Notes section of this slide, copy and paste the three new record declarations found into Customer.egl – as new basicRecords • Save and close Customer.egl In preparation for the next slide – do the following: • Open CustomerLib.egl\EGLSource\eglderbyr7.access\ • Scroll to the end of the file • From the Notes section in the next slide, copy and paste the function which is shown on the next slide somewhere inside the Library part of the file • Save, Generate (Ctrl/G) and Close CustomerLib.egl

47.  OPTIONAL Workshop – Filling a Nested Array of Records From the Database – 2 of 5 • Open CustomerLib.egl\EGLSource\eglderbyr7.access\ • Scroll to the end of the file • From the Notes section, copy and paste the function  inside the Library part of the file – as a new call-able function • Save and… • Generate (Ctrl/G) Read the comments carefully, to understand the various elements of this nested array population logic 

48.  OPTIONAL Workshop – Filling a Nested Array of Records From the Database – 3 of 5 From Project Explorer: Create a new .JSP page under \WebContent\, named: customerPurchaseOrderPage.jsp • From Page Designer, “Edit Page Code” • From the Notes section, copy and paste the replacement code for the boiler-plate handler  • Read the new code to understand its functionality • Save • Return to the .JSP in the Content Area

49.  OPTIONAL Workshop – Filling a Nested Array of Records From the Database – 4 of 5 From Page Designer/Page Data: • Drag & Drop custSearchID onto the page Make it an input field • Drag & Drop the customerPurchaseOrderSearch() function on top of the Submit button • Optionally add an HTML Horizontal Rule • Drag & Drop the cust record onto the page, below the submit button • Optionally make all of the fields Read-only (output)

50.  OPTIONAL Workshop – Filling a Nested Array of Records From the Database – 5 of 5 Run the page on the server  Try different customer IDs Note: If time permits, work with your instructor to add some pizz-azz to the output: