Have your Dojo and eat it too! A Technical Presentations from the 2012 IBM Exceptional Web Experience Conference
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 1,027 views

This presentation by Davalen's IBM Web Experience Factory lead architect, Michael "Spoon" Witherspoon, focus' on how to create a great UI using Dojo while allowing page automation to perform its ...

This presentation by Davalen's IBM Web Experience Factory lead architect, Michael "Spoon" Witherspoon, focus' on how to create a great UI using Dojo while allowing page automation to perform its magic. It will also explain and demonstrate specific techniques for integrating the features of Dojo input fields with the Page Automation framework.

This year’s IBM Exceptional Web Experience Conference took place in Austin, Texas beginning Monday, May 21 and ending Thursday May 24, 2012.

Statistics

Views

Total Views
1,027
Views on SlideShare
1,027
Embed Views
0

Actions

Likes
1
Downloads
8
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

  • 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© 2012 IBM Corporation 3 Exceptional Web Experience Conference 2012 - Americas
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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 doesnt hurt and it helps in debugging and development.© 2012 IBM Corporation 9 Exceptional Web Experience Conference 2012 - Americas
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Dojo Form Dialog with Data Page Demo: Form Dialog in Customer Detail Portlet© 2012 IBM Corporation 17 Exceptional Web Experience Conference 2012 - Americas
  • 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
  • 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
  • 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
  • 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
  • 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
  • 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
  • Input Validation using Data Page  Input Validation using Data Page© 2012 IBM Corporation 24 Exceptional Web Experience Conference 2012 - Americas
  • Input Validation using Data Page  Submit button coded to  Run JavaScript method  JavaScript Method© 2012 IBM Corporation 25 Exceptional Web Experience Conference 2012 - Americas
  • Input Validation using Data Page Demo: Add Customer© 2012 IBM Corporation 26 Exceptional Web Experience Conference 2012 - Americas
  • Questions?© 2012 IBM Corporation 27 Exceptional Web Experience Conference 2012 - Americas
  • 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
  • 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
  • For More InformationIBM 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.htmlIBM 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
  • © 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
  • 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