Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference

©2012 IBM Corporation

IBM Exceptional Web Experience Conference 2012 - Americas

May 21 – 24, 2012 Austin, Texas

TECH-D22 Have Your Dojo and Eat It Too!

Michael “Spoon” Witherspoon, Lead Architect – Web Experience Factory, Davalen

Monday, May 21 01:45 PM - 02:45 PM

Join the Twitter convo by following @PortletFactory and using #ibmexperience

© 2012 IBM Corporation2

Exceptional Web Experience Conference 2012 - Americas

Session Overview

Have Your Dojo and Eat It Too! (TECH-D272)

Attention all Web Experience Factory developers! Michael "Spoon" Witherspoon is here to show that it is possible to create a great UI using Dojo while allowing page automation to perform its magic! This sessionexplains and demonstrates specific techniques for integrating the features of Dojo input fields with the Page Automation framework. Learn the right combination of a reliable data entry framework with the beauty of aDojo user interface to make exceptional Web 2.0 Web Experience Factory Portlets.



Agenda

Meet Davalen and Spoon

Smart Refresh

Inline Editing

Drag and Drop between portlets

Dojo Form Dialog with Data Page

Dojo Input Fields with Rich Data Definition

Input Validation with Data Page and Dojo Fields



Meet Davalen and Spoon

Davalen: An IBM Premier Business Partner since 1993

Specializing blend of system architecture, mentoring, and agile implementation assistance for WebSphere Portal, Lotus Domino, Retail and Enterprise Search, and Web Content Management.

Creator of IBM Licensed WebSphere Portlet Factory Application Development Course: WPC52.

Presenter: Michael “Spoon” Witherspoon, Lead Architect – Portlet Factory

Career instructor, application developer, course writer

Former Lead Technical Instructor at Bowstreet

4th time presenting at this event

Writes the Davalen’s IBM Licensed Portlet Factory curriculum



Ajax / Dojo Feature Set

Enabled by default

Adds Ajax / Dojo builders and features

Enables ‘Smart Refresh’



Understanding Smart Refresh

Enabled by default

Enable / Disable via Theme builder

Can change theme file in properties file

Features

Global Partial Page Refresh control

Floating Progress Indicator (spinner)

Requirements / Limitations

HTML must follow certain patterns – DIV wrappers

Action vs. Link in Wires



Critical HTML for Smart Refresh

Wrapper DIV

Wraps Data Page DIV and Paging Buttons DIV

If wrapper DIV is not used

Smart Refresh does not work; Many links put results in separate window; or they do nothing



Critical HTML for Smart Refresh

Style Sheet span tag

Must have id attribute or Smart Refresh does not work correctly in column headers

• 

• OR

• 

• But NOT

• 

Known issue with browser and <link> tag



Good Practices for HTML for Smart Refresh

Wrap the following Page Location DIVs with wrapper DIVs

Inserted Page location

Data Page location

Model Container location

Add DIV wrapper inside BODY

Always ensures there is an outermost wrapper inside the BODY

Not really required but it doesn't hurt and it helps in debugging and development.



Other Smart Refresh Issues

Sometimes Smart Refresh cannot be used

Links in a Data Page table that fire wires via Action

• Property Broker Actions do not fire wire events

• FYI - Property Broker Link works fine

Sometimes Partial Page Refresh is the only answer

Dojo Drag and Drop, Inline Edit,

Delete in DCM – has been trouble in the past

Choose the right HTML pattern for the WEF programming pattern being used.

Caution: It is common to think Smart Refresh cannot do something if the HTML is not right



Controlling Smart Refresh

Use Theme builder

Partial Page Refresh

Model Container Support

Dojo Progress Indicator

Custom spinner

Custom location



Demo: Customer List Smart Refresh

Enabled / Disabled

Partial Page Refresh

Smart Refresh off

Split Pager builder with PPR enabled



Dojo Inline Editing

Inline Editing

Edits Data Page variable without opening a complete edit page

Common in Data Page tables

Inline Edit Builder

Updates Data Page variable automatically

Partial Page Refresh needs attention

Programmer must complete the task

Assuming the edit needs to update back-end data store

Run Action List / Method to complete task



Drag and Drop

Drag and Drop builders

Source – the drag start point

Target – the drag end point

Automatically updates the Data Page variable

Programmer must complete the task

Similar in concept to Inline Edit

Partial Page Refresh needs attention



Demo: Inline Editing/Drag Drop Order Detail Portlet

Inline Edit Builder

Drag and Drop Builders




Dojo Form Dialog Builder

Makes a pop-up window

Can contain Data Page

• Read Only

• Data Entry

Better than a separate browser window

When displaying data / gathering data in same application

Use separate browser window when opening other websites in pop-up window




Demo: Form Dialog in Customer Detail Portlet



Understanding Dojo Fields

Builders

Dojo Select

Dojo Radio Button Group

Dojo Page Element

Prompts / Requirements

Empty Field Hint – ToolTip

Regular Expression failure – background color and symbol

Invalid Data Error

Message - ToolTip



Applying Dojo Field Builders

Individually

Dojo Field Builders

Attribute Setters

Globally via Rich Data Definition (RDD)

RDD Builder – quick, easy but limited in features

RDD File – more technical but more flexible

RDD Builder can generate an RDD file as a starting point



Critical Modifications to Rich Data Definition

Base Data Definition File

base_datadef

dojo_base_datadef

States / Countries list

Needs Dojo Select instead of Select

Every Field needs a base definition

Any field NOT assigned a base definition will revert to HTML field instead of remaining a Dojo field

Prompts for Dojo Fields

Hint message and error message



Demo: Customer Insert Model

Default Data Page

No Dojo Builders / No RDD

Add one Dojo field builder

Add RDD file with critical modifications already made



Input Validation using Data Page

Data Page without Dojo Fields

Schema-level validation

Optional Post-Save Method

Invoked via PageName_NextAction method

Submit button coded to

Submit Form and invoke PageName_NextAction




Data Page with Dojo Fields

Individual requirements in the Dojo fields

• Java Regular Expression

• Field required or not

Hint and error messages pop up in ToolTips

Two-phase submit

Call validate() method of dijit.form.Form

• Causes each field to perform its validation task

If validate() is true (all fields have passed)

• Perform submit action of <form> object

o Coded to run PageName_NextAction








Submit button coded to

Run JavaScript method

JavaScript Method




Demo: Add Customer



Questions?



Contact Information:Expo Booth #100 – Davalen

Michael “Spoon” [email protected](800)827-8451 ext 112

Second Presentation:TECH-D27: Tips from the Top Chefs: Proven Recipes for Successful Web Experience Factory Design

Tuesday, May 22, 8:30 AM – 9:30 AM Meeting Room 406



For More Information

Portlet Factory 'Top Gun' Application Development Courses

IBM Training course #WPC52 (for WPF v7.0)

http://www-304.ibm.com/jct03001c/services/learning/ites.wss/us/en?pageType=course_description&courseCode=WPC52

IBM Training course #WPC42 (for WPF v6.1.5)

http://www-304.ibm.com/jct03001c/services/learning/ites.wss/us/en?pageType=course_description&courseCode=WPC42

Coming later this year – Portlet Factory App Dev Advanced Course

Dojo Information Web Sites

Dojo Documentation at Dojo Campus

http://docs.dojocampus.org/

Dojo Toolkit Documentation

http://dojotoolkit.org/documentation/



For More Information

IBM Customer Experience Suite, WebSphere Portal and Web Content Manager Software and Solutions

http://www-01.ibm.com/software/info/customerexperience/

http://www-3.ibm.com/software/genservers/portal/

WebSphere Portal and IBM Web Content Manager Information Center

http://www.ibm.com/developerworks/websphere/zones/portal/proddoc.html

IBM Web Experience Fast Track Offerings

http://www-01.ibm.com/software/genservers/portal/fasttrack/

WebSphere Portal Business Solutions Catalog

https://greenhouse.lotus.com/catalog/home_full.xsp?fProduct=WebSphere%20Portape your text here



© IBM Corporation 2012. 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.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Quickr, Sametime, WebSphere, UC2, PartnerWorld and Lotusphere 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.

Adobe, the Adobe logo, PostScript, and the PostScript logo are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States, and/or other countries.

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. Intel, Intel Centrino, Celeron, Intel Xeon, Intel SpeedStep, Itanium, and Pentium are trademarks or registered

trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

UNIX is a registered trademark of The Open Group in the United States and other countries.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.

.



IBM’s statements regarding its plans, directions, and intent are subject to change or withdrawal without notice at IBM’s sole discretion.

Information regarding potential future products is intended to outline our general product direction and it should not be relied on in making a purchasing decision.

The information mentioned regarding potential future products is not a commitment, promise, or legal obligation to deliver any material, code or functionality. Information about potential future products may not be incorporated into any contract. The development, release, and timing of any future features or functionality described for our products remains at our sole discretion.

.

Technology

Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference