Contenu connexe Similaire à Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference (20) Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference1. 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
2. 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
3. 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
© 2012 IBM Corporation
3
Exceptional Web Experience Conference 2012 - Americas
4. 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
© 2012 IBM Corporation
4
Exceptional Web Experience Conference 2012 - Americas
5. Ajax / Dojo Feature Set
Enabled by default
Adds Ajax / Dojo builders and features
Enables ‘Smart Refresh’
© 2012 IBM Corporation
5
Exceptional Web Experience Conference 2012 - Americas
6. 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
© 2012 IBM Corporation
6
Exceptional Web Experience Conference 2012 - Americas
7. 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
© 2012 IBM Corporation
7
Exceptional Web Experience Conference 2012 - Americas
8. Critical HTML for Smart Refresh
Style Sheet span tag
Must have id attribute or Smart Refresh does not work correctly
in column headers
• <span id=”style_sheet”></span>
• OR
• <span name=”style_sheet” id=”style_sheet”></span>
• But NOT
• <span name=”style_sheet”></span>
Known issue with browser and <link> tag
© 2012 IBM Corporation
8
Exceptional Web Experience Conference 2012 - Americas
9. 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.
© 2012 IBM Corporation
9
Exceptional Web Experience Conference 2012 - Americas
10. 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
© 2012 IBM Corporation
10
Exceptional Web Experience Conference 2012 - Americas
11. Controlling Smart Refresh
Use Theme builder
Partial Page Refresh
Model Container Support
Dojo Progress Indicator
Custom spinner
Custom location
© 2012 IBM Corporation
11
Exceptional Web Experience Conference 2012 - Americas
12. Demo: Customer List
Smart Refresh
Enabled / Disabled
Partial Page Refresh
Smart Refresh off
Split Pager builder with PPR enabled
© 2012 IBM Corporation
12
Exceptional Web Experience Conference 2012 - Americas
13. 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
© 2012 IBM Corporation
13
Exceptional Web Experience Conference 2012 - Americas
14. 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
© 2012 IBM Corporation
14
Exceptional Web Experience Conference 2012 - Americas
15. Demo: Inline Editing/
Drag Drop
Order Detail Portlet
Inline Edit Builder
Drag and Drop Builders
© 2012 IBM Corporation
15
Exceptional Web Experience Conference 2012 - Americas
16. 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
© 2012 IBM Corporation
16
Exceptional Web Experience Conference 2012 - Americas
17. Dojo Form Dialog
with Data Page
Demo: Form Dialog in
Customer Detail Portlet
© 2012 IBM Corporation
17
Exceptional Web Experience Conference 2012 - Americas
18. 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
© 2012 IBM Corporation
18
Exceptional Web Experience Conference 2012 - Americas
19. 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
© 2012 IBM Corporation
19
Exceptional Web Experience Conference 2012 - Americas
20. 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
© 2012 IBM Corporation
20
Exceptional Web Experience Conference 2012 - Americas
21. 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
© 2012 IBM Corporation
21
Exceptional Web Experience Conference 2012 - Americas
22. 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
© 2012 IBM Corporation
22
Exceptional Web Experience Conference 2012 - Americas
23. Input Validation using Data Page
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
© 2012 IBM Corporation
o Coded to run PageName_NextAction
23
Exceptional Web Experience Conference 2012 - Americas
24. Input Validation using Data Page
Input Validation using Data Page
© 2012 IBM Corporation
24
Exceptional Web Experience Conference 2012 - Americas
25. Input Validation using Data Page
Submit button coded to
Run JavaScript method
JavaScript Method
© 2012 IBM Corporation
25
Exceptional Web Experience Conference 2012 - Americas
26. Input Validation
using Data Page
Demo: Add Customer
© 2012 IBM Corporation
26
Exceptional Web Experience Conference 2012 - Americas
28. 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
© 2012 IBM Corporation
28
Exceptional Web Experience Conference 2012 - Americas
29. 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/
© 2012 IBM Corporation
29
Exceptional Web Experience Conference 2012 - Americas
30. 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
© 2012 IBM Corporation
30
Exceptional Web Experience Conference 2012 - Americas
31. © 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.
© 2012 IBM Corporation
. 31
Exceptional Web Experience Conference 2012 - Americas
32. 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.
.
© 2012 IBM Corporation
32
Exceptional Web Experience Conference 2012 - Americas