Session: TECH-D12 Practical Field Experience – Using Ajax / Dojo with WebSphere Portlet Factory  © IBM Corporation 2011 Sm...
Agenda <ul><li>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 </li></ul>
Meet Davalen and Spoon <ul><li>Davalen: An IBM Premier Business Partner since 1993 </li></ul><ul><ul><li>Specializing blen...
Creator of IBM Licensed WebSphere Portlet Factory Application Development Course: WPC52. </li></ul></ul><ul><li>Presenter:...
Former Lead Technical Instructor at Bowstreet
4 th  time presenting at this event
Writes the Davalen’s IBM Licensed Portlet Factory curriculum </li></ul></ul>Official Davalen Logo_plain.jpg DJacob.gif IBM...
Ajax / Dojo Feature Set <ul><li>Enabled by default
Adds Ajax / Dojo builders and features
Enables ‘Smart Refresh’ </li></ul>
Understanding Smart Refresh <ul><li>Enabled by default </li></ul><ul><ul><li>Enable / Disable via Theme builder </li></ul>...
Floating Progress Indicator (spinner) </li></ul></ul><ul><li>Requirements / Limitations </li></ul><ul><ul><li>DIV wrapper ...
Does not work with Wires in Portal </li></ul></ul>
Critical HTML for Smart Refresh <ul><li>Wrapper DIV </li></ul><ul><ul><li>Wraps Data Page DIV and Paging Buttons DIV </li>...
Demo: Customer List <ul><li>Smart Refresh </li></ul><ul><ul><li>Enabled / Disabled
Partial Page Refresh </li></ul></ul><ul><li>Smart Refresh off </li></ul><ul><ul><li>Split Pager builder with PPR enabled <...
Controlling Smart Refresh <ul><li>Use Theme builder </li></ul><ul><ul><li>Partial Page Refresh </li></ul></ul><ul><li>Dojo...
Custom location </li></ul></ul><ul><li>Demo: these builders </li></ul>
Partial Page Refresh option <ul><li>Sometimes Smart Refresh cannot be used </li></ul><ul><ul><li>Links in a Data Page tabl...
Property Broker Links disappear
Property Broker Actions do not fire wire events </li></ul></ul></ul><ul><li>Partial Page Refresh instead </li></ul><ul><ul...
Upcoming SlideShare
Loading in …5
×

Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory

2,221 views

Published on

Session: TECH-D12
Practical Field Experience – Using Ajax / Dojo with WebSphere Portlet Factory
IBM Exceptional Web Experience Conference 2011 - May 16-19, 2011
Michael "Spoon" Witherspoon

Learn to use Ajax / Dojo features by leveraging the experience of Davalen’s Portlet Factory experts. Through lecture and demonstration you will learn to use Dojo builders with Portlet Factory Page Automation, apply Rich Data Definitions, and use advanced techniques for drag / drop and inline editing. Many valuable hints, tips, tricks, and best practices derived from real-world situations will be explained to help you get the most out of using Dojo in Portlet Factory.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,221
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Practical Field Experience: Using Ajax / Dojo with WebSphere Portlet Factory

  1. 1. Session: TECH-D12 Practical Field Experience – Using Ajax / Dojo with WebSphere Portlet Factory © IBM Corporation 2011 Smarter software for a Smarter Planet . Michael 'Spoon' Witherspoon | Lead Architect – Portlet Factory | Davalen * Join the Twitter convo by following @PortletFactory and using #ibmexperience
  2. 2. Agenda <ul><li>Meet Davalen and Spoon
  3. 3. Smart Refresh
  4. 4. Inline Editing
  5. 5. Drag and Drop between portlets
  6. 6. Dojo Form Dialog with Data Page
  7. 7. Dojo Input Fields with Rich Data Definition
  8. 8. Input Validation with Data Page and Dojo Fields </li></ul>
  9. 9. Meet Davalen and Spoon <ul><li>Davalen: An IBM Premier Business Partner since 1993 </li></ul><ul><ul><li>Specializing blend of system architecture, mentoring, and agile implementation assistance for WebSphere Portal, Lotus Domino, Retail and Enterprise Search, and Web Content Management.
  10. 10. Creator of IBM Licensed WebSphere Portlet Factory Application Development Course: WPC52. </li></ul></ul><ul><li>Presenter: Michael “Spoon” Witherspoon, Lead Architect – Portlet Factory </li></ul><ul><ul><li>Career instructor, application developer, course writer
  11. 11. Former Lead Technical Instructor at Bowstreet
  12. 12. 4 th time presenting at this event
  13. 13. Writes the Davalen’s IBM Licensed Portlet Factory curriculum </li></ul></ul>Official Davalen Logo_plain.jpg DJacob.gif IBM Exceptional Web Experience Conference 2011 - Americas
  14. 14. Ajax / Dojo Feature Set <ul><li>Enabled by default
  15. 15. Adds Ajax / Dojo builders and features
  16. 16. Enables ‘Smart Refresh’ </li></ul>
  17. 17. Understanding Smart Refresh <ul><li>Enabled by default </li></ul><ul><ul><li>Enable / Disable via Theme builder </li></ul></ul><ul><li>Features </li></ul><ul><ul><li>Partial Page Refresh
  18. 18. Floating Progress Indicator (spinner) </li></ul></ul><ul><li>Requirements / Limitations </li></ul><ul><ul><li>DIV wrapper for Data Page is required
  19. 19. Does not work with Wires in Portal </li></ul></ul>
  20. 20. Critical HTML for Smart Refresh <ul><li>Wrapper DIV </li></ul><ul><ul><li>Wraps Data Page DIV and Paging Buttons DIV </li></ul></ul><ul><li>If wrapper DIV is not used </li></ul><ul><ul><li>Clicking links in Paging Buttons puts results in separate window – very bad </li></ul></ul>
  21. 21. Demo: Customer List <ul><li>Smart Refresh </li></ul><ul><ul><li>Enabled / Disabled
  22. 22. Partial Page Refresh </li></ul></ul><ul><li>Smart Refresh off </li></ul><ul><ul><li>Split Pager builder with PPR enabled </li></ul></ul>
  23. 23. Controlling Smart Refresh <ul><li>Use Theme builder </li></ul><ul><ul><li>Partial Page Refresh </li></ul></ul><ul><li>Dojo Progress Indicator </li></ul><ul><ul><li>Custom spinner
  24. 24. Custom location </li></ul></ul><ul><li>Demo: these builders </li></ul>
  25. 25. Partial Page Refresh option <ul><li>Sometimes Smart Refresh cannot be used </li></ul><ul><ul><li>Links in a Data Page table that fire wires </li></ul></ul><ul><ul><ul><li>Wires do not work in this case
  26. 26. Property Broker Links disappear
  27. 27. Property Broker Actions do not fire wire events </li></ul></ul></ul><ul><li>Partial Page Refresh instead </li></ul><ul><ul><li>Most UI controls have this option </li></ul></ul><ul><li>Demo: PPR in Split Pager builder </li></ul>
  28. 28. Dojo Inline Editing <ul><li>Inline Editing </li></ul><ul><ul><li>Edits Data Page variable without opening a complete edit page
  29. 29. Common in Data Page tables </li></ul></ul><ul><li>Inline Edit Builder </li></ul><ul><ul><li>Updates Data Page variable automatically
  30. 30. Supports Partial Page Refresh </li></ul></ul><ul><li>Programmer must complete the task </li></ul><ul><ul><li>Assuming the edit needs to update back-end data store
  31. 31. Run Action List / Method to complete task </li></ul></ul>
  32. 32. Demo: Inline Editing <ul><li>Order Detail Portlet
  33. 33. Inline Edit Builder </li></ul>
  34. 34. Drag and Drop <ul><li>Drag and Drop builders </li></ul><ul><ul><li>Source – the drag start point
  35. 35. Target – the drag end point </li></ul></ul><ul><li>Automatically updates the Data Page variable </li></ul><ul><li>Programmer must complete the task </li></ul><ul><ul><li>Similar in concept to Inline Edit </li></ul></ul>
  36. 36. Dojo Form Dialog with Data Page <ul><li>Dojo Form Dialog Builder </li></ul><ul><ul><li>Makes a pop-up window
  37. 37. Can contain Data Page </li></ul></ul><ul><ul><ul><li>Read Only
  38. 38. Data Entry </li></ul></ul></ul><ul><li>Better than a separate browser window </li></ul><ul><ul><li>When displaying data / gathering data in same application </li></ul></ul><ul><li>Use separate browser window when opening other websites in pop-up window </li></ul>
  39. 39. Dojo Form Dialog with Data Page <ul><li>Demo: Form Dialog in Customer Detail Portlet </li></ul>
  40. 40. Understanding Dojo Field <ul><li>Builders </li></ul><ul><ul><li>Dojo Select
  41. 41. Dojo Radio Button Group
  42. 42. Dojo Field Element </li></ul></ul><ul><li>Prompts / Requirements </li></ul><ul><ul><li>Empty Field Hint – ToolTip
  43. 43. Regular Expression failure – background color and symbol
  44. 44. Invalid Data Error </li></ul></ul>Message - ToolTip
  45. 45. Applying Dojo Field Builders <ul><li>Individually </li></ul><ul><ul><li>Dojo Field Builders
  46. 46. Attribute Setters </li></ul></ul><ul><li>Via Rich Data Definition (RDD) </li></ul><ul><ul><li>RDD Builder – quick, easy but limited in features
  47. 47. RDD File – more technical but more flexible </li></ul></ul><ul><ul><ul><li>RDD Builder can generate an RDD file as a starting point </li></ul></ul></ul>
  48. 48. Critical Modifications to Rich Data Definition <ul><li>Base Data Definition File </li></ul><ul><ul><li>base_datadef
  49. 49. dojo_base_datadef </li></ul></ul><ul><li>States / Countries list </li></ul><ul><ul><li>Needs Dojo Select instead of Select </li></ul></ul><ul><li>Every Field needs a base definition </li></ul><ul><ul><li>Any field NOT assigned a base definition will revert to HTML field instead of remaining a Dojo field </li></ul></ul><ul><li>Prompts for Dojo Fields </li></ul><ul><ul><li>Hint message and error message </li></ul></ul>
  50. 50. Demo: Customer Insert Model <ul><li>Default Data Page </li></ul><ul><ul><li>No Dojo Builders / No RDD </li></ul></ul><ul><li>Add one Dojo field builder
  51. 51. Add RDD file with critical modifications already made </li></ul>
  52. 52. Input Validation using Data Page <ul><li>Data Page without Dojo Fields </li></ul><ul><ul><li>Schema-level validation
  53. 53. Optional Post-Save Method
  54. 54. Invoked via PageName _NextAction method </li></ul></ul><ul><li>Submit button coded to </li></ul><ul><ul><li>Submit Form and invoke PageName _NextAction </li></ul></ul>
  55. 55. Input Validation using Data Page <ul><li>Data Page with Dojo Fields </li></ul><ul><ul><li>Individual requirements in the Dojo fields </li></ul></ul><ul><ul><ul><li>Java Regular Expression
  56. 56. Field required or not </li></ul></ul></ul><ul><ul><li>Hint and error messages pop up in ToolTips </li></ul></ul><ul><li>Two-phase submit </li></ul><ul><ul><li>Call validate() method of dijit.form.Form </li></ul></ul><ul><ul><ul><li>Causes each field to perform its validation task </li></ul></ul></ul><ul><ul><li>If validate() is true (all fields have passed) </li></ul></ul><ul><ul><ul><li>Perform submit action of <form> object </li></ul></ul></ul><ul><ul><ul><ul><li>Coded to run PageName _NextAction </li></ul></ul></ul></ul>
  57. 57. Input Validation using Data Page <ul><li>Attribute Setter on <form> tag is the key </li></ul>
  58. 58. Input Validation using Data Page <ul><li>Submit button coded to </li></ul><ul><ul><li>Run JavaScript method </li></ul></ul><ul><li>JavaScript Method </li></ul>
  59. 59. Input Validation using Data Page <ul><li>Demo: Add Customer </li></ul>
  60. 60. Questions and Answers IBM Exceptional Web Experience Conference 2011 - Americas
  61. 61. For More Information about this Project <ul><li>At Event: Davalen, Booth #112 </li></ul><ul><li>Contact Information </li></ul><ul><ul><li>Michael “Spoon” Witherspoon
  62. 62. Email: spoon@davalen.com </li></ul></ul><ul><li>Website </li></ul><ul><ul><li>www.Davalen.com </li></ul></ul>davalen-ad.pdf IBM Exceptional Web Experience Conference 2011 - Americas Follow @PortletFactory and use #ibmexperience on Twitter
  63. 63. For more Information <ul><li>Portlet Factory 'Top Gun' Application Development Courses </li></ul><ul><ul><li>IBM Training course #WPC52 (for WPF v7.0) </li></ul></ul><ul><ul><ul><li>http://www-304.ibm.com/jct03001c/services/learning/ites.wss/us/en?pageType=course_description&courseCode=WPC52 </li></ul></ul></ul><ul><ul><li>IBM Training course #WPC42 (for WPF v6.1.5) </li></ul></ul><ul><ul><ul><li>http://www-304.ibm.com/jct03001c/services/learning/ites.wss/us/en?pageType=course_description&courseCode=WPC42 </li></ul></ul></ul><ul><ul><li>Coming later this year – Portlet Factory App Dev Advanced Course </li></ul></ul><ul><li>Dojo Information Web Sites </li></ul><ul><ul><li>Dojo Documentation at Dojo Campus </li></ul></ul><ul><ul><ul><li>http://docs.dojocampus.org/ </li></ul></ul></ul><ul><ul><li>Dojo Toolkit Documentation </li></ul></ul><ul><ul><ul><li>http://dojotoolkit.org/documentation/ </li></ul></ul></ul>
  64. 64. © IBM Corporation 2011. 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.

×