Upload
ashlee-baldwin
View
224
Download
4
Tags:
Embed Size (px)
Citation preview
®
IBM Software Group
© 2006 IBM Corporation
JSF/EGL Advanced Topics
Jon Sayles, EGL Application Developer: [email protected]
2Last update: 12/04/2007
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 InInformal – “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é
®
IBM Software Group
© 2006 IBM Corporation
JSF and EGL Development Productivity and Design Considerations
4Last update: 12/04/2007
As a “declarative development paradigm”, becoming productive with EGL is a combination of two things:1. How to do, what you want to do
2. 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.
ButBut 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”
EGL/JSF Productivity
5Last update: 12/04/2007
Complex (Production) Applications and Productivity
Three categories:1. “Green field” (new) applications2. Enterprise Modernization – of character-based applications3. 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)
6Last update: 12/04/2007
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.
7Last update: 12/04/2007
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
8Last update: 12/04/2007
Green Field – New Applications
ConsiderationsConsiderations Use the out-of-the-box tooling and techniques: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 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 HTMLpossible with gobs of customized, hand-written JavaScript and HTML
Conversely you can design and develop your application using the JSF components as Conversely you can design and develop your application using the JSF components as they exist in the tooling:they exist in the tooling: Benefits:Benefits:
– Productivity – by at least one magnitude of orderProductivity – by at least one magnitude of order– (far) fewer errors(far) fewer errors– Easier to maintain and enhanceEasier to maintain and enhance– Increased learning on your part – more scales, more practice!Increased learning on your part – more scales, more practice!
Recommendation:Recommendation: Introduce the JSF components to:Introduce the JSF components to:
– UsersUsers– Web designers and graphic artistsWeb designers and graphic artists
Explain benefits and R.O.I. of designers doing initial work on .JTPLs and page Explain benefits and R.O.I. of designers doing initial work on .JTPLs and page prototypes using JSF and EGL JSFHandlers (see upcoming topic) prototypes using JSF and EGL JSFHandlers (see upcoming topic)
Some of those who’ve gone this route: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_ushttp://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
9Last update: 12/04/2007
Enterprise Modernization – Character-Based Applications
Considerations: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)
10Last update: 12/04/2007
Three Ways of Modernizing Applications
Wrapper Wrapper
Mixed Business Logic
andPresentation Logic
Wrapping Use of screen-scraping to
package "pseudo-services"
Re-engineeringBusiness logic is modularized
and separated from presentation
Orchestration
Interface
Orchestration
Interface
RedevelopingBusiness logic of services is
redesigned from scratch
Source: Gartner
PresentationLogic
DataModel
DataModel
DataModel
Business Logic
Orchestration
Interface
Orchestration
InterfaceInterface Interface
Business Logic
11Last update: 12/04/2007
Enterprise Modernization – GUI (client/server) Applications
Considerations: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
12Last update: 12/04/2007
Keys to Success
Two perspectives:Two perspectives: OverallOverall
Across disciplinesAcross disciplines U.I.U.I.
Specific to EGL/JSF developmentSpecific to EGL/JSF development
Overall Keys to SuccessOverall 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 youyou 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
13Last update: 12/04/2007
Web Site Navigator – U.I. Key to Success
Web Site Navigator
14Last update: 12/04/2007
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
15Last update: 12/04/2007
.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
16Last update: 12/04/2007
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.
Prototype .JSP Pages – U.I. Key to Success
17Last update: 12/04/2007
Effective Use of the JSF/EGL Tooling
Macro Templates
18Last update: 12/04/2007
Example – Use of the JSF/EGL Tooling – Macros and Templates
19Last update: 12/04/2007
Example – Use of the JSF/EGL Tooling – Macros and Templates
®
IBM Software Group
© 2006 IBM Corporation
JSF and EGL Intermediate – to – Advanced Development Techniques
21Last update: 12/04/2007
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)
22Last update: 12/04/2007
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
23Last update: 12/04/2007
Tab PagestabPage.jsp
24Last update: 12/04/2007
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
25Last update: 12/04/2007
Simulated Tab Pages – Buttons on Inline Frame
frameworkpage.jsp
26Last update: 12/04/2007
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
27Last update: 12/04/2007
Page Pattern – Pages That Are Either Read …or… Update
General Principles It 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:1. 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
2. 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
3. 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.
4. 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.
28Last update: 12/04/2007
Master Detail – Multiple Pages
Typical “drill-down” pattern. Similar work-flow to mainframe applications
29Last update: 12/04/2007
Master Detail – Inline Frame
Consolidate information in one browser
30Last update: 12/04/2007
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 PropertiesDataTable Properties
Also – probably select Row ActionAlso – probably select Row Actionto update individual rowto update individual row
DataTable PropertiesDataTable Properties
Also – probably select Row ActionAlso – probably select Row Actionto update individual rowto update individual row
31Last update: 12/04/2007
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
32Last update: 12/04/2007
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
33Last update: 12/04/2007
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.
34Last update: 12/04/2007
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!
35Last update: 12/04/2007
Accordion Menu (“Palette”) Control
Not yet documented. In the project: accordianPalette.jsp
36Last update: 12/04/2007
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";
}
3) Make sure as many columns as possible have an explicitly-specified width.
4) 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.
37Last update: 12/04/2007
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)
®
IBM Software Group
© 2006 IBM Corporation
AJAX and JavaScript
Thanks to Muneer Sai’d
39Last update: 12/04/2007
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
40Last update: 12/04/2007
JavaScript – Firing off JavaScript From EGL
Typical “drill-down” pattern. Similar work-flow to mainframe
applications
®
IBM Software Group
© 2006 IBM Corporation
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.
42Last update: 12/04/2007
JavaScript to Trap For User Right-ClickAt the end of the .JSP
page’s source file, copy and paste the statements in the NotesNotes 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 NotesNotes section also contains a link to a web article on trapping for clicked events
43Last update: 12/04/2007
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 NotesNotes section also contains this source
®
IBM Software Group
© 2006 IBM Corporation
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.
45Last update: 12/04/2007
Another OPTIONAL WorkshopOPTIONAL 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
46Last update: 12/04/2007
OPTIONAL WorkshopOPTIONAL Workshop – Filling a Nested Array of Records From the Database – 1 of 5
Steps:1. Open Customer.egl (it’s (it’s
under: \EGLSource\eglderbyr7.data\under: \EGLSource\eglderbyr7.data\
2. Scroll to the end of the file3. From the Notes section of this slide, copy and paste the
three new record declarations found into Customer.egl – as new basicRecords
4. Save and close Customer.egl
In preparation for the nextnext slide – do the following:
4. Open CustomerLib.egl \EGLSource\eglderbyr7.access\
5. Scroll to the end of the file
6. 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
7.7. Save, Generate (Ctrl/G) and Close CustomerLib.eglSave, Generate (Ctrl/G) and Close CustomerLib.egl
47Last update: 12/04/2007
OPTIONAL WorkshopOPTIONAL Workshop – Filling a Nested Array of Records From the Database – 2 of 5
4. Open CustomerLib.egl \EGLSource\eglderbyr7.access\
5. Scroll to the end of the file6. From the Notes section, copy
and paste the function inside the Library part of the file – as a new call-able function
7.7. Save and…Save and…
8.8. Generate (Ctrl/G)Generate (Ctrl/G)
Read the comments carefully, to understand the various elements of this nested array population logic
48Last update: 12/04/2007
OPTIONAL WorkshopOPTIONAL 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
1. From Page Designer, “Edit Page Code”
2. From the Notes section, copy and paste the replacement code for the boiler-plate handler
3. Read the new code to understand its functionality
4.4. Save Save
5. Return to the .JSP in the Content Area
49Last update: 12/04/2007
OPTIONAL WorkshopOPTIONAL Workshop – Filling a Nested Array of Records From the Database – 4 of 5
From Page Designer/Page Data:
Drag & Drop custSearchIDcustSearchID onto the page
Make it an input field
Drag & Drop the customerPurchaseOrderSearch()customerPurchaseOrderSearch() function on top of the Submit button
Optionally add an HTML Horizontal Rule
Drag & Drop the custcust record onto the page, below the submit button
Optionally make all of the fields Read-only (output)
50Last update: 12/04/2007
OPTIONAL WorkshopOPTIONAL 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:
®
IBM Software Group
© 2006 IBM Corporation
JSF and EGL Page Performance Best Practices – Java Generation
This topic presents a number of ways to make your web pages faster, more efficient and more usable.
Thanks to Yury Kats, Steve Dearth and Mark Evans for their input and assistance.
52Last update: 12/04/2007
Programmatic Paging
For the following types of applications:• High volume transaction systems• High database access applications – especially where users can execute potentially
run-away queries
Considerations:• No JSF pager controls • Requires RBDMS/Table unique key (column(s) that guarantee unique row access)• Intermediate-level complexity procedural logic
Two parts:1. JSFHandler:
• Get next N rows• Get prev N rows• Track previous “starting position” in an array
2. Optional JSF controls:• dataTable displaying N rows• Fetch “more” rows
Many “variations on this theme” available:• Start with Select Count(*) for total # of rows. Display total count, and allow users
to specify: Continue, Bail, etc.• May want to position to 1st set of rows, last set of rows, etc.• Integrate with AJAX
53Last update: 12/04/2007
Programmatic Paging
For the following types of applications:• High volume transaction systems• High database access applications – especially where users can execute potentially
run-away queries
54Last update: 12/04/2007
Overview
Performance is a broad subject, especially in a context of a complex framework such as EGL/JSF applications running under WAS. Note that – every application server will pose its own unique idiosyncratic
challenges to performance
There are a lot of variables and a lot of points to look at.
In general, one could split any EGL/JSF based application into four layers in terms of addressing performance: 1.Session Management
2.JSF and Application Design
3.WAS Tuning
4.EGL tuning
55Last update: 12/04/2007
1. Session Management
Especially for high-volume applications, limit the use of:Pages in session scopeLarge amounts of discrete session data – especially objects such as EGL
arrays and records, etc.)
It is understood that this will increase the complexity of the JSFHandler business logic. Increasing costs associated with development, testing and maintenance,
and increasing the risk of
… And that there is often a trade-off in request-scope pages, where the system must re-load them from the server, and they must re-read the database, etc.
So an accurate "Transaction/Page Throughput or Usage Model" is necessary to: Identify candidates for tuningJustify increased development/testing and maintenance cost/benefits
56Last update: 12/04/2007
2. JSF and Application Design – 1 of 4 (General Principles)
This is a very big topic - and unfortunately, full of caveats – and is invariably related to understanding page/transaction throughput, etc. However, in general: Limit the number of displayeddisplayed cells/per dataTable whenever possible ***Notes***Notes
A cell is a row/column intersection of a dataTable. There are many reasons for this:
– JSF saves and restores the entire dataTable state, throughout the lifecycle– There is a relatively high cost to create the individual dataTable cells (each cell becomes its own Java object
new instance).
If your pages run the risk of emitting hundreds or thousands of cells, due to runaway user queries consider:
– JSF paging …or… EGL or SQL programmatic paging
Use AJAX to improve performance - so processing is done in small chunks For large result sets (where you’re displaying over 100 rows) use JSF features - especially especially
every-row-dataTable-features such as InputRowSelect, calendar pickers, Spinners, every-row-dataTable-features such as InputRowSelect, calendar pickers, Spinners, Inline formsInline forms, etc. only when necessary - as they tend to be (very) expensive
Consider breaking very large page designs up into several smaller pages with links between Especially important in designing large tab-layout pages, with lots of data (and JSF
components) on each tab. For requirements like this, consider using HTML inline frames and doing any/all data access "on
panel-enter" Use HTML <DIV> tags whenever possible for page layout
Reserve HTML tables for tabular data display
57Last update: 12/04/2007
2. JSF and Application Design – 2 of 4 (Benchmark Design)
Disclaimer:Disclaimer: What follows on the next slide are NOT empirical umbers, obtained in an “Underwriter’s Laboratory” setting. They should be viewed as relative metrics – to learn about the costs associated with different JSF controls and dataTable row volume
Configuration – UDB 9.1 (running locally) SQL Table join was used to produce server-side result set (see slide ***Notes for code)
Implicit EGL / SQL query executed:– 20 columns of data per row– 588 rows per result set
Two additional EGL for loops iterated over the result set to produce a much larger array – and to provide some additional EGL / Java processing for benchmarking (see next slide for row set breakdown)
– Individual tests focused on JSF dataTable population - between 200 and 5,588 rows in the JSF dataTable– Did not test all permutations of JSF options against largest dataTable row-size
– You will be able to extrapolate from other results The results of the EGL/JSF server-side processing (SQL query and for/loops) to produce the EGL dynamic array
was always less than 1 second Version 7.1 RDB All tests measured to the second, run twice, and averaged – if any difference (rarely happened) Tomcat v5.5 with EGL Debugging
The server was restarted between each run to ensure no page caching All runs from same (local) machine – so no “network” performance contributing factors Benchmark data should be interpreted “relative” to JSF design options
T61 ThinkPad 2.16 GHZ 2 Gigabytes memory Windows XP Tomcat, DB2 and RDB v7.1 were the only applications open and running throughout the benchmark
Information Explorer 6.0.29Information Explorer 6.0.29 was used – as (Mozilla’s) Firefox browser returns interim row results – making it almost impossible to detect task completion (although it was more user-friendly for large dataTables)
58Last update: 12/04/2007
2. JSF and Application Design – 3 of 4 (dataTable and .JSP)
The page design included various permutations of a JSF dataTable and controls (see next slide for performance details)
Output fields Input fields Row categorization Input row selection (checkbox) Row click Paging JSF Widgets (calendar controls, etc.) dataTable border Alternate row colors
59Last update: 12/04/2007
2. JSF and Application Design – 4 of 4 (Benchmark Conclusions)
Large #s of rows can be displayed all at once in the browser giving reasonable (or at least linear) response time – if you are using default JSF input or output fields without additional JSF functionality
5,588 rows/10 columns of output fields: 8 seconds8 seconds 2,588 rows/10 columns of output fields: 4 seconds4 seconds
Large #s of columns can also be displayed in reasonable response time 200 columns/Input fields in a dataTable: 7 seconds7 seconds
Large #s of rows X Large #s of columns displayed all at once in the browser (> 2,000 rows): Caused slow response time Non-linear response time …vs… # of cells (delay goes up geometrically past certain internal threshold) Take care when mixing with dataTable-level components:
Row Categorization Row Selection (clicked-event on a row)
Be especially careful when adding JSF field-level components to large dataTables: Calendar widgets Spinners for numeric data Input Selection (row checkboxes) Inline forms
Input fields are more expensive than output fields JSF component-costs are cumulative – adding more JSF functionality (more widgets, etc.) increases
response time (Best Practice) Alleviate of the above with JSF Paging or with EGL/SQL Programmatic Paging
20 rows/per page offered excellent response time even thousands of rows to display, and multiple JSF widgetst/per row Initial page rendering was less than 3 seconds – unless adding multiple JSF field-level components (and even then ~5 second response time) Most subsequent U.I. actions were sub-second
EGL/SQL server-side processing a non-factor (at least in this benchmark) – up to thousands of rows If user queries could return tens or hundreds of thousands of rows recommend EGL/SQL programmatic paging Otherwise, JSF Paging yielded very acceptable results
60Last update: 12/04/2007
3. Application Server Tuning
Application Server tuning is a critical component of any system performance effort.
There are numerous IBM Redbooks (some free, some for-pay) and Developer Works articles (free) on WebSphere and application server tuning.
But suffice it to say that, your WAS system administrator should not be the lowest-paid team member on-staff.
Obviously don't forget to turn off such development niceties, as: vgj.trace options WriteStdOut(XXX) for debugging Etc.
61Last update: 12/04/2007
4. EGL Tuning – 1 of 2
EGL tuning falls into two sub-topics: SQL performance tuning EGL language coding best practices
SQL performanceSQL performance The current RBD-EGL.ppt contains a number of specific tips and techniques for improving
individual SQL statement efficiency. In general, these all require an in-depth understanding of the physical database design
(indexes, clustering, cardinality, etc.), coupled with DBMS-optimizer knowledge, the ability to read EXPLAIN outputs, as well as having an accurate transaction/usage model – calibrated to relational structures Not cheap information to come by.
In general - the major use of SQL performance tuning efforts is in limiting the # of rows returned to arrays bound to dataTables by utilizing Programmatic Paging.
Note also the following hierarchy of most – to least efficient application/SQL access: Stored Procedures Static SQL Dynamic SQL
… Not surprisingly – this hierarchy could also represent a most-to-least work model
62Last update: 12/04/2007
4. EGL Tuning – 2 of 2
EGL performance is typically "micro-tuning" compared to the previous topics Some things to consider include:
Whenever logically-feasible, put long running data and host-access logic in preRenderpreRender (not onConstruction) functions onConstruction has hooks into the JSF emit/render cycle – making preRender a better option
There are some numeric handling and conversion best practices: Use SMALLINT/INT/BIGINT if you can. Variables without decimals are faster than variables with decimals. In COBOL, a calculation that uses NUMs is faster than one that uses NUMCs, and a calculation that
uses DECIMALs is faster than one that uses PACFs.
If a piece of code is inside a loop and it always results in the same value, pull it out of the loop and put the result in a local variable. - For example, change:
for (i int from 1 to size(<array>) by 1)…for (i int from 1 to size(<array>) by 1)… to:
sz int = size(<array>);
for (i int from i to sz by 1)…
®
IBM Software Group
© 2006 IBM Corporation
Just For Fun
Things we’re working on – (limited business application)
64Last update: 12/04/2007
Using JSF to Scroll Through Pictures
Simple to program (just update an array or set of images server-side)
Example invokes AJAX for smoother page transition
Run-Time (HTML) Image Scrolling – picScroller.jsp
65Last update: 12/04/2007
Using JSF for HTML Drag ‘n Drop
Sometimes found in Client/Server applications Better supported through Rich UI Run-Time (HTML) Drag and Drop – testDND.jsp