Getting the Most out of Data Page and Rich Data Definition in Portlet Factory

© 2010 IBM Corporation

2010Exceptional Web Experience

IBM Portal Excellence Conference July 19 – 22, 2010 Chicago, Illinois

Getting the Most out of Data Page and Rich Data Getting the Most out of Data Page and Rich Data Definition in Portlet FactoryDefinition in Portlet Factory

Session Code: TECH-D04Presented By: Michael “Spoon” Witherspoon Lead Architect – Portlet Factory

Davalen, [email protected]

* Join the Twitter convo by following @PortletFactory and using hashtag #PortalExConf

2010 Exceptional Web Experience Conference

IBM Portal Excellence Conference July 2010

2

AgendaAgenda

• 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?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 AutomationBusiness 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 DevelopmentProgression 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 DevelopmentProgression 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?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?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 DisplayHow 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 EntryHow 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 EntryHow 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 DisplayExpanding 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


• 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


• Custom HTML

– Layout page – the space around the Data Page

• tags for buttons, links, other controls

– Custom, field-by-field control over placement, properties, HTML, etc.

• - field placement

• - label placement

• Demo: Fine-tuned Control

– CRUD F



15

Expanding Control over Data EntryExpanding 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 ProgressionRich 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 ApplicationRDD 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 - DemosAdvanced 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 - DemosAdvanced 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 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 DataDefinition in Portlet Factory

Session Code: TECH-D04

Presented By: Michael “Spoon” Witherspoon Lead Architect – Portlet Factory

Davalen, LLC

We Value Your Feedback! We Value Your Feedback!

THANK YOU! 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.

Getting the Most out of Data Page and Rich Data Definition in Portlet Factory

Technology

Transcript of Getting the Most out of Data Page and Rich Data Definition in Portlet Factory