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

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 Corporation

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 session
explains 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 a
Dojo user interface to make exceptional Web 2.0 Web
Experience Factory Portlets.

© 2012 IBM Corporation
2

Exceptional Web Experience Conference 2012 - Americas

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
3


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

4


Ajax / Dojo Feature Set

 Enabled by default

 Adds Ajax / Dojo builders and features

 Enables ‘Smart Refresh’

5


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

6


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

7


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

8

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.

9


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

10


Controlling Smart Refresh

 Use Theme builder

 Partial Page Refresh

 Model Container Support

 Dojo Progress Indicator

 Custom spinner

 Custom location

11


Demo: Customer List
 Smart Refresh
 Enabled / Disabled
 Partial Page Refresh

 Smart Refresh off
 Split Pager builder with PPR enabled

12


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

13


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

14


Demo: Inline Editing/
Drag Drop
 Order Detail Portlet

 Inline Edit Builder

 Drag and Drop Builders

15


Dojo Form Dialog with Data Page

 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

16


Dojo Form Dialog
with Data Page

Demo: Form Dialog in
Customer Detail Portlet

17


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

18


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

19


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
20


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

21


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

22


 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
23

 Input Validation using Data Page

24


 Submit button coded to
 Run JavaScript method

 JavaScript Method

25


Input Validation
using Data Page

Demo: Add Customer

26


Questions?

27


Contact Information:
Expo Booth #100 – Davalen

Michael “Spoon” Witherspoon
spoon@davalen.com
(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

28


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/

29


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

30


© 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.
. 31


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.
.

32


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

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (19)

Destaque

Destaque (8)

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

Semelhante a Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference (20)

Mais de Davalen LLC

Mais de Davalen LLC (12)

Último

Último (20)

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