The document details a session on utilizing data pages and rich data definitions within Portlet Factory, highlighting key concepts, business value, and a structured approach to application development. It covers functionalities like data display, data entry, and advanced techniques for customizing user interfaces. Emphasis is placed on the modular development process, automation benefits, and potential use cases for enhancing user experience in J2EE web applications.

1. Getting the Most out of Data Page and Rich Data Definition in Portlet Factory Session Code: TECH-D04 Presented By: Michael “Spoon” Witherspoon Lead Architect – Portlet Factory Davalen, LLC [email_address] * Join the Twitter convo by following @PortletFactory and using hashtag #PortalExConf

2. Agenda Introduction of Concepts What is Data Page? Business Value of Page Automation Portlet Factory application development cycle How does Data Page work? Data Display / Data Entry Control over generated User Interfaces Modifier Builders, HTML Templates, Stylesheets Custom HTML pages Control over Data Entry fields Builders, Rich Data Definition Rich Data Definition Files Advanced uses of Data Page - Demos

3. What is Data Page? Cornerstone of Page Automation Core builder for View & Form, Data View, Input Form builders Basis for generated User Interfaces in Portlet Factory Encapsulates common data presentation and data entry patterns Generates User Interfaces Presents schema-typed variables Service results for display Service input variables for data entry Supports input validation in several ways Schema-based data type and field requirement Custom Java methods for business rules Simplifies submitting form data i.e., fields on a web page

4. Business Value of Page Automation Focus on solving business problems Automated common patterns reduce mundane, low-level workload Less testing required as the builders have already been tested Less time on frameworks; more time on business value Shorter Prototype to Final Version cycle Can build applications in stages without throwing away prototype work Workload can be divided easily among group of programmers Modular nature of Portlet Factory development permits easy rip/replace Make J2EE Web Applications less technical Much work can be done without any Java Common patterns in WPF much easier to understand than in J2EE More time left for making good looking User Interfaces

5. Progression of Application Development Prototype Best guess of XML schemas Fake data in XML variables Data Page to display fake data Rough layouts using Data Page, HTML layouts, and modifier builders Develop specs more thoroughly Freeze Scope / Finish Specs Make final decisions about what is “in” and what is “out” Begin promoting prototypes to real components Service Development Finalize schemas Gradually replace fake data in variables with data in database

6. Progression of Application Development Full Features with rough UI Get all buttons, links, UI controls working Get all workflow, security, profiled behaviors working Full Features with custom UI Replace modifiers as needed with manual controls If the builders do exactly what you want, keep them otherwise replace them with fine-tuning controls Fine tune HTML, Style Sheets, Rich Data Definitions Continue with Deployment, Testing, Verification

7. What’s in a Name? Builder is called “Data Page” but…. It is a table placed on a page It is not a page all by itself In practical, daily use it is a Data Display Table Data Entry Table Demo: Data Page / Page pairs CRUD A

8. How Does it Work? Primary Behavior is… Surface the contents of a schema-typed variable An XML variable that conforms to a pre-defined schema Usually service results variable or service input variable Facilitate Data Display and Data Entry Two flavors of Data Page Data Display Show service results for a single record or many records Data Entry Generate a page of field inputs Support input validation / input business rules Pass inputs to service operation

9. How Does it Work? – Data Display Data Page for Displaying Data Usually Read-Only Usually Service Results Many Records Display as a table of records Labels for column headers - Data in rows Single Record Display as a table One column for labels - One column for data Demo: Data Display Data Page CRUD A

10. How Does it Work? – Data Entry Data Page for Data Entry Usually Service Input Variable Can be any Schema-Typed variable Default UI Display as a table One column for labels - One column for data Text input fields Override with field builders, modifier builders, Rich Data Definition Input Validation Schema-based for type and field requirement Post-Save Method for adding business rules Demo CRUD A

11. How Does it Work? – Data Entry Some work left for the programmer Buttons – placement and function Success Action – what to do when validation passes Failure Action – (optional) – Default action reloads entry page with errors Post-Save Action How to make “submit” work Define and declare Success Action Action List (usually) - Known as “ PageName _NextAction” Must invoke the service (Insert / Update record) Add submit control – button, link, etc. Must “Submit Form and Invoke Action” Action must be PageName _NextAction Success Action Demo: Data Entry Data Page – CRUD A – Update Page

12. Expanding Control over Data Display Modifier Builders Data Column Modifier (DCM) Field labels, field order, show/hide fields, column header sorting Data Field Modifier (DFM) Formatting dates and numbers Applying Lookup Tables label / value pairs for Select, Radio Button, Checkbox fields Data Hierarchy Modifier (DHM) Group fields into sections Form Layout Group fields into columns (like a newspaper) Demo: Modifier Progression CRUD B – E

13. Expanding Control over Data Display HTML Template Structured HTML file that drives placement of field labels and field values Usually a table Portlet Factory ships with several Cascading Style Sheets Class definitions for referenced classes in HTML Template Demo: Contents of HTML Template and CSS Use gridtable.html / gridtable.css

14. Expanding Control over Data Display Custom HTML Layout page – the space around the Data Page <span> tags for buttons, links, other controls Custom, field-by-field control over placement, properties, HTML, etc. <span name=“FIELDNAME”></span> - field placement <span name=“FIELDNAMElabel”></span> - label placement Demo: Fine-tuned Control CRUD F

15. Expanding Control over Data Entry UI Structure Controlled the same as Data Display Modifier builders, HTML Template, CSS, HTML Field Definitions Individual builders Select, Checkbox Group, Radio Button Group, Text Area, etc. Rich Data Definition (RDD) RDD Builder or RDD File Tied to the schema of the Data Page Input Variable Single source to represent a set of individual field builders Base definitions – extend base definitions

16. Rich Data Definition (RDD) – A Logical Progression Many UI Control Builders – No RDD Select List, Checkbox Group, Radio Button Group, Text Area, etc. One set for each Data Entry Page – Insert / Update Rich Data Definition Builder One builder call for each schema – Insert / Update Fairly rich but have limited capabilities Existing base definitions – but you can make your own No Lookup Tables – label / value pairs for list fields like Select Rich Data Definition File One file for all schemas in a single Service Consumer Centralized definitions for all base definitions Centralized / hierarchical control for all data entry fields Demo: Field Builders vs. RDD – CRUD G - I

17. RDD File Hierarchy in an Application Base Definitions Field types with attributes WPF builders associated with definitions Builder call inputs HTML attributes Stock definitions that ship with WPF Custom definitions defined by WPF application developers Base Application Field Definitions Reusable definitions for individual fields – FIRST_NAME, EMAIL, DOB Field defined once, used in multiple schemas Single RDD file with Several Schemas Applied to a Service Consumer builder Centralized definition of all fields represented by all schemas

18. Advanced Data Page Techniques - Demos Multiple Data Pages on a Single Page Pattern: Data Page / Page pairs inserted into master page Put multiple Inserted Page builders on a single page Do NOT put multiple Data Page builders on a single Page Tabbed Pages Pattern: One Data Page / Page pair per tab Model Container Pattern: simple model with Data Page used as a pluggable component in larger application Container model passes key data into contained model using ModelInitializationData variable Data Transformation Cross-Tabulation

19. Advanced Data Page Techniques - Demos Customize HTML Templates – presentation By HTML field type - select, radio button, etc. By Field Name By field value data type – string, integer, date, decimal, etc. Customize HTML Templates – structure Change placement of Field labels Field values Required Prompt Error Messages Insert DIV tags for greater control via style sheets

20. For More Information WebSphere Portal Information Center http://www.ibm.com/developerworks/websphere/zones/portal/proddoc.html WebSphere Forums (scroll down for Portlet Factory forums) http://www.ibm.com/developerworks/forums/wsdd_forums.jspa WebSphere Portlet Factory Wiki http://www-10.lotus.com/ldd/pfwiki.nsf/ IBM Training Course – Top Gun for App Development – Course WPC42 http://www-304.ibm.com/jct03001c/services/learning/ites.wss/us/en ?pageType=course_description&courseCode=WPC42

21. Please complete the session survey for this session: Session Title: Getting the Most out of Data Page and Rich Data Definition in Portlet Factory Session Code: TECH-D04 Presented By: Michael “Spoon” Witherspoon Lead Architect – Portlet Factory Davalen, LLC We Value Your Feedback! THANK YOU!

22. © IBM Corporation 2010. All Rights Reserved. The information contained in this publication is provided for informational purposes only. While efforts were made to verify the completeness and accuracy of the information contained in this publication, it is provided AS IS without warranty of any kind, express or implied. In addition, this information is based on IBM’s current product plans and strategy, which are subject to change by IBM without notice. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this publication or any other materials. Nothing contained in this publication is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results. All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer. IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld are trademarks of International Business Machines Corporation in the United States, other countries, or both. Unyte is a trademark of WebDialogs, Inc., in the United States, other countries, or both. Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both. Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both. UNIX is a registered trademark of The Open Group in the United States and other countries. If you reference Linux® in your presentation, please mark the first use and include the following; otherwise delete: Linux is a registered trademark of Linus Torvalds in the United States, other countries, or both. Other company, product, or service names may be trademarks or service marks of others. All references to “Open Financial”, “Open Insurance”, “Juke Box”. refer to a fictitious company and are used for illustration purposes only.