BP308: IBM Lotus Domino Web Facelift Using AJAX and DXL <ul><ul><li>Dwight Wilbanks, Lance Spellman </li></ul></ul>
Domino Facelift Toolkit Using AJAX and DXL for a better web UI framework
Agenda <ul><li>Who wants a shirt? </li></ul><ul><li>Who are you guys? </li></ul><ul><li>What is the Domino Facelift Toolki...
So, who are you guys? <ul><li>Dwight Wilbanks </li></ul><ul><ul><li>Independent consultant/developer </li></ul></ul><ul><u...
Introduction:  Leveraging AJAX and DXL for Domino <ul><li>Interesting technologies that have a lot of buzz </li></ul><ul><...
I want to see... <ul><ul><li>Show me your facelift! </li></ul></ul>
What is the Domino Facelift Toolkit? <ul><li>DFL Toolkit is AJAX and DXL techniques that improve the fidelity of Notes des...
DFL Form Capabilities <ul><li>Text popup hotspots </li></ul><ul><li>Observe minimum row heights in tables </li></ul><ul><l...
Giving a Form a Facelift <ul><li>Open a new or existing Notes form in the Designer client </li></ul><ul><li>Add a <script>...
Demo: <ul><ul><li>How to Facelift a Form </li></ul></ul>
How does it work:  Form Overview <ul><li>When the form loads, a script gathers all the field elements and submits to a Dom...
DFL View Capabilities <ul><li>Scroll view data instead of paging </li></ul><ul><li>Type in view entry and jump to it </li>...
Giving a View a Facelift <ul><li>Open the Facelift database </li></ul><ul><li>Click the View Action “Facelift a View” </li...
Demo: How to Facelift a View
How does it work?  View Overview <ul><li>The wizard creates a $$View Template Default for XXX Form design element </li></u...
How does a UI work with and without AJAX? Movies
Tools <ul><li>For inspecting the DOM </li></ul><ul><ul><li>Firefox:  Load the web development tools and use DOM Inspector ...
Futures:  How could this be extended? <ul><li>Create totally static design elements and eliminate the OpenAgent type calls...
Javascript library resources and alternatives <ul><li>Prototype.js </li></ul><ul><ul><li>http://prototype.conio.net </li><...
Hands-on Lab with the Facelift Toolkit <ul><li>HND 201 Building IBM Lotus Domino Apps with AJAX/DXL </li></ul><ul><ul><li>...
Other AJAX/DXL sessions at Sphere <ul><li>AD 216 AJAX and Lotus Domino – The cleanest, slickest sites in town </li></ul><u...
Other AJAX/DXL sessions at Sphere <ul><li>BP 305 Combine XSL and DXL for Rich Web Apps </li></ul><ul><ul><li>Mac Guidera <...
Questions <ul><li>Please!  Fill out your evals before you leave.  And of course, give us good grades if you want us to com...
Upcoming SlideShare
Loading in …5
×

Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl

1,927 views
1,847 views

Published on

Published in: Technology, Business
1 Comment
1 Like
Statistics
Notes
No Downloads
Views
Total views
1,927
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
47
Comments
1
Likes
1
Embeds 0
No embeds

No notes for slide

Bp308 Ibm Lotus Domino Web Facelift Using Ajax And Dxl

  1. 1. BP308: IBM Lotus Domino Web Facelift Using AJAX and DXL <ul><ul><li>Dwight Wilbanks, Lance Spellman </li></ul></ul>
  2. 2. Domino Facelift Toolkit Using AJAX and DXL for a better web UI framework
  3. 3. Agenda <ul><li>Who wants a shirt? </li></ul><ul><li>Who are you guys? </li></ul><ul><li>What is the Domino Facelift Toolkit? </li></ul><ul><li>How do I Facelift a form </li></ul><ul><li>How do I Facelift a view </li></ul><ul><li>How it works (high level process) </li></ul><ul><li>How it works (AJAX/DXL highlights) </li></ul><ul><li>Where can I learn more? </li></ul><ul><li>How do I get it and use it? </li></ul><ul><li>Questions </li></ul>Agenda slide
  4. 4. So, who are you guys? <ul><li>Dwight Wilbanks </li></ul><ul><ul><li>Independent consultant/developer </li></ul></ul><ul><ul><li>Frequent contributor on Workflow development projects </li></ul></ul><ul><ul><li>Builder of apps to support very large Notes infrastructures </li></ul></ul><ul><ul><li>New blogger: dwightwilbanks.org </li></ul></ul><ul><li>Lance Spellman </li></ul><ul><ul><li>President of Workflow Studios, Premier IBM Business Partner </li></ul></ul><ul><ul><ul><li>Application development </li></ul></ul></ul><ul><ul><ul><li>Managed hosting for Notes </li></ul></ul></ul><ul><ul><ul><li>Education Center for IBM Software in Lotus and Websphere </li></ul></ul></ul><ul><ul><li>Penumbra Partner </li></ul></ul><ul><ul><li>Notes/Domino developer since 1993 </li></ul></ul><ul><ul><li>Occasional blogger: workflowstudios.com/lance/blog.nsf </li></ul></ul>
  5. 5. Introduction: Leveraging AJAX and DXL for Domino <ul><li>Interesting technologies that have a lot of buzz </li></ul><ul><li>Others have implemented some interesting things </li></ul><ul><ul><li>Name picker </li></ul></ul><ul><ul><li>Calendar picker </li></ul></ul><ul><ul><li>View navigation </li></ul></ul><ul><li>How could we apply these techniques in a more structured way so that developers don't have to waste so much time in one-offs </li></ul><ul><li>How best to explain these concepts? </li></ul><ul><li>Easy, build it and show it </li></ul><ul><li>Want to see? </li></ul>
  6. 6. I want to see... <ul><ul><li>Show me your facelift! </li></ul></ul>
  7. 7. What is the Domino Facelift Toolkit? <ul><li>DFL Toolkit is AJAX and DXL techniques that improve the fidelity of Notes design elements for the Web. </li></ul><ul><li>DFL is a concept and an approach...it could end up being a production framework </li></ul><ul><li>DFL code can be easily integrated with any Notes database without re-engineering apps. </li></ul><ul><li>DFL is lightweight and cross browser (IE, Mozilla, Opera) </li></ul><ul><li>DFL does not require special security access, or program installs </li></ul><ul><li>DFL can be implemented by an admin </li></ul><ul><li>DFL produces some really cool UI! </li></ul><ul><li>DFL is open source and needs widgit implementors </li></ul>
  8. 8. DFL Form Capabilities <ul><li>Text popup hotspots </li></ul><ul><li>Observe minimum row heights in tables </li></ul><ul><li>Observe native OS field height/width properties </li></ul><ul><li>Implement help descriptions </li></ul><ul><li>Observe and implement calendar picker for date fields </li></ul><ul><li>Implement client-side validation of date only/date and time/time only </li></ul><ul><li>Dialog list implementations </li></ul><ul><ul><li>ACL </li></ul></ul><ul><ul><li>Allow values not in list </li></ul></ul><ul><li>Listbox height and width </li></ul>Contents can be interactive: highlight on mouse over and hyperlink to section on mouse click.
  9. 9. Giving a Form a Facelift <ul><li>Open a new or existing Notes form in the Designer client </li></ul><ul><li>Add a <script> tag to the body of the form </li></ul><ul><ul><li><script language=javascript src='/facelift/facelift.nsf/dfl_StaticForm.js' /></script> </li></ul></ul><ul><li>Add a <style> tag to the body of the form </li></ul><ul><ul><li><link rel='stylesheet' type='text/css' href='/facelift/facelift.nsf/dfl_StaticForm.css' /> </li></ul></ul><ul><li>Save </li></ul>
  10. 10. Demo: <ul><ul><li>How to Facelift a Form </li></ul></ul>
  11. 11. How does it work: Form Overview <ul><li>When the form loads, a script gathers all the field elements and submits to a Domino agent </li></ul><ul><li>The agent examines the DXL for the form to find extra design information that Domino doesn't render </li></ul><ul><li>The agent returns a series of javascript function calls to the browser </li></ul><ul><li>The functions are contained in a static script library and provide default implementations for extended behavior </li></ul><ul><ul><li>Calendar picker </li></ul></ul><ul><ul><li>Name picker </li></ul></ul><ul><ul><li>Select value not in list </li></ul></ul><ul><li>Key Point: Implementations can be provided by anyone </li></ul>
  12. 12. DFL View Capabilities <ul><li>Scroll view data instead of paging </li></ul><ul><li>Type in view entry and jump to it </li></ul><ul><li>Display categories in separate scrolling pane </li></ul><ul><li>Mouseover category information </li></ul><ul><ul><li>Displays # of children entries </li></ul></ul><ul><ul><li>Displays # of total descendants </li></ul></ul><ul><li>Click icon for document preview </li></ul><ul><ul><li>Document opened for read mode </li></ul></ul><ul><li>Selectable documents </li></ul><ul><li>View Actions </li></ul>
  13. 13. Giving a View a Facelift <ul><li>Open the Facelift database </li></ul><ul><li>Click the View Action “Facelift a View” </li></ul><ul><li>Select the database that contains your existing view </li></ul><ul><li>Select the view to be facelifted </li></ul><ul><li>Open the view in the browser </li></ul>
  14. 14. Demo: How to Facelift a View
  15. 15. How does it work? View Overview <ul><li>The wizard creates a $$View Template Default for XXX Form design element </li></ul><ul><li>The form contains calls to an agent, a static JS library file and a CSS page </li></ul><ul><li>The form also contains a special ViewPort div </li></ul><ul><ul><li>Can be placed anywhere in the form </li></ul></ul><ul><ul><li>Additional content can be added anywhere in the form </li></ul></ul><ul><li>At runtime, the agent reads the DXL of the view's actions and returns JS code that builds them </li></ul><ul><li>At runtime, the script issues AJAX calls for ReadDesign and ReadViewEntries </li></ul><ul><li>The rest is driven by user events </li></ul>Basic text slide
  16. 16. How does a UI work with and without AJAX? Movies
  17. 17. Tools <ul><li>For inspecting the DOM </li></ul><ul><ul><li>Firefox: Load the web development tools and use DOM Inspector </li></ul></ul><ul><ul><li>IE: Developer Toolbar </li></ul></ul><ul><li>For debugging Javascript </li></ul><ul><ul><li>Firefox: Venkman plugin for 1.5x </li></ul></ul><ul><ul><ul><li>http://getahead.ltd.uk/ajax/venkman </li></ul></ul></ul><ul><ul><li>IE: Microsoft Script Editor </li></ul></ul><ul><ul><ul><li>How to install and configure: </li></ul></ul></ul><ul><ul><ul><li>http://www.mandala.com/javascript/debug_javascript.html </li></ul></ul></ul><ul><li>For analyzing http traffic between browser and server </li></ul><ul><ul><li>Both: Fiddler </li></ul></ul><ul><ul><ul><li>http://www.fiddler.com </li></ul></ul></ul>
  18. 18. Futures: How could this be extended? <ul><li>Create totally static design elements and eliminate the OpenAgent type calls </li></ul><ul><li>Views </li></ul><ul><ul><li>Inline document editing </li></ul></ul><ul><ul><li>Developer-specified “programming” columns </li></ul></ul><ul><ul><li>Embedded views </li></ul></ul><ul><li>Forms </li></ul><ul><ul><li>Address dialog </li></ul></ul><ul><ul><li>View Picker dialog </li></ul></ul><ul><ul><li>Name Picker </li></ul></ul><ul><ul><li>Cascaded Field dialog (Refresh fields) </li></ul></ul><ul><ul><li>Client side Input translations / validations </li></ul></ul>
  19. 19. Javascript library resources and alternatives <ul><li>Prototype.js </li></ul><ul><ul><li>http://prototype.conio.net </li></ul></ul><ul><ul><li>Ruby on Rails built on it </li></ul></ul><ul><ul><li>mira.culo.us extends it </li></ul></ul><ul><ul><li>rico.js extends it </li></ul></ul><ul><ul><li>Issues with the way the Javascript Object has been extended </li></ul></ul><ul><li>Mochikit </li></ul><ul><ul><li>http://www.mochikit.com </li></ul></ul><ul><ul><li>Combines features from Python and Objective C and applies to Javascript </li></ul></ul><ul><li>Comprehensive JS library list </li></ul><ul><ul><li>http://www.quicksilverscreen.com/archive/2005/12/07/javascript_libraries_roundup </li></ul></ul>
  20. 20. Hands-on Lab with the Facelift Toolkit <ul><li>HND 201 Building IBM Lotus Domino Apps with AJAX/DXL </li></ul><ul><ul><li>Tue, 8:30 – 10:15, SW Osprey </li></ul></ul><ul><ul><li>Thur, 8:30 – 10:15, SW Mockingbird 1-2 </li></ul></ul><ul><li>Use the DFL toolkit to facelift a Notes form </li></ul><ul><li>Use the DFL toolkit to facelift a Notes view </li></ul><ul><li>Write your own AJAX request/response using prototype.js library </li></ul><ul><li>Run the DXL form parser agent to interrogate design elements and create JS function calls </li></ul><ul><li>Build HTML output by reading XML via JS DOM and creating new HTML elements </li></ul>
  21. 21. Other AJAX/DXL sessions at Sphere <ul><li>AD 216 AJAX and Lotus Domino – The cleanest, slickest sites in town </li></ul><ul><ul><li>Scott Wenzel (aka The Turtle) </li></ul></ul><ul><ul><li>Mon, 2:15-3:15, DL S Hemisphere 4-5 </li></ul></ul><ul><li>BP 310 How to make IBM Lotus Domino sites that don't look or act like Lotus Domino </li></ul><ul><ul><li>Henry Newberry, Scott Good </li></ul></ul><ul><ul><li>Mon, 5-6, SW 5-6 </li></ul></ul><ul><li>BP 306 Creating Compelling Apps with QP 7 using JS, AJAX... </li></ul><ul><ul><li>Viktor Krantz, Troy Reimer </li></ul></ul><ul><ul><li>Tue, 11:15-12:15, SW 3-4 </li></ul></ul><ul><li>BP 303 Big-Time Tips and Tricks for your Web apps </li></ul><ul><ul><li>Viktor Krantz, Rob Novak </li></ul></ul><ul><ul><li>Tue, 3-4, SW 5-6 </li></ul></ul><ul><ul><li>Wed, 4:15-5:15, SW 3-4 (repeat) </li></ul></ul>
  22. 22. Other AJAX/DXL sessions at Sphere <ul><li>BP 305 Combine XSL and DXL for Rich Web Apps </li></ul><ul><ul><li>Mac Guidera </li></ul></ul><ul><ul><li>Wed, 1:30-2:30, SW 3-4 </li></ul></ul><ul><li>BP 313 Practical DXL for LotusScript... </li></ul><ul><ul><li>Rocky Oliver </li></ul></ul><ul><ul><li>Wed, 4:15-5:15, SW 5-6 </li></ul></ul>
  23. 23. Questions <ul><li>Please! Fill out your evals before you leave. And of course, give us good grades if you want us to come back and give away more free code and shirts next year! </li></ul><ul><li>Free facelifts at Workflow Studios ped #618 in the showcase </li></ul><ul><li>Where do I get the code and updated slides/demos? </li></ul><ul><ul><li>faceliftfordomino.com </li></ul></ul>

×