SlideShare a Scribd company logo

Hnd201 Building Ibm Lotus Domino Applications With Ajax Plugins

•Download as PPT, PDF•
•
dominion
dominion

The document discusses the Domino Facelift Toolkit (DFL), an AJAX and DXL framework that improves the user interface of Domino applications. It demonstrates facelifting a view and a form, which involves using wizards to generate templates that call agents and JavaScript libraries. The templates contain DIV elements and script tags that dynamically populate and style the applications. The document also covers debugging techniques and ideas for extending the framework.

Related slideshows

January OpenNTF Webinar: 4D - Domino Docker Deep Dive
January OpenNTF Webinar: 4D - Domino Docker Deep DiveJanuary OpenNTF Webinar: 4D - Domino Docker Deep Dive
January OpenNTF Webinar: 4D - Domino Docker Deep Dive
 
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
Dart Past Your Competition by Getting Your Digital Experience into Market Fas...
 
1 app 2 developers 3 servers
1 app 2 developers 3 servers1 app 2 developers 3 servers
1 app 2 developers 3 servers
 
1 of 18
HND 201: Building IBM Lotus Domino Applications with AJAX plugins Dwight Wilbanks, Lance Spellman
Domino Facelift Toolkit Using AJAX and DXL for a better web UI framework
Agenda Introduction of an AJAX/DXL framework called the Domino Facelift Demo of how Facelift works Code walk through Exercise 1: Facelift a view Exercise 2: Facelift a form Exercise 3: Change a widgit implementation Exercise 4: Build an AJAX request/response Resources and Tools Questions Agenda slide
So, who are you guys? Dwight Wilbanks Independent consultant/developer Frequent contributor on Workflow development projects Builder of apps to support very large Notes infrastructures New blogger: dwightwilbanks.org Lance Spellman President of Workflow Studios, Premier IBM Business Partner Application development Managed hosting for Notes Education Center for IBM Software in Lotus and Websphere Penumbra Partner Notes/Domino developer since 1993 Occasional blogger: workflowstudios.com/lance/blog.nsf
What is the Domino Facelift Toolkit? DFL Toolkit is AJAX and DXL techniques that improve the fidelity of Notes design elements for the Web. DFL is a concept and an approach...it could end up being a production framework DFL code can be easily integrated with any Notes database without re-engineering apps. DFL is lightweight and cross browser (IE, Mozilla, Opera) DFL does not require special security access, or program installs DFL can be implemented by an admin DFL produces some really cool UI! DFL is open source and needs widgit implementors
Demo: Domino Facelift in Action
How to Facelift a View If needed, create a new view Go to the Facelift database and use the Action... Create “View Template for...” Open in browser
Exercise 2: Facelift a View Copy and paste a view from the FLSample database Modify it (add a column) and name it MyView Save and Preview Go to Facelift database Run Action “Create View Template for” Use default db Select your MyView Refresh the view in the browser Add a simple action to the view (Modify Field) Refresh the view
How does it work? View Overview The wizard creates a $$View Template Default for XXX Form design element The form contains calls to an agent, a static JS library file and a CSS page The form also contains a special ViewPort div Can be placed anywhere in the form Additional content can be added anywhere in the form At runtime, the agent reads the DXL of the view's actions and returns JS code that builds them At runtime, the script issues AJAX calls for ReadDesign and ReadViewEntries The rest is driven by user events Basic text slide
Examine the View In the Facelift database, Use Designer and open Script Libraries Open “dfl_StaticView.js” Find the function InitFaceLiftView() Find the function ajaxGetDesign() Find the function ajaxResDesignProcessor() Start Fiddler and Open the View in IE Examine the http traffic between browser and server as AJAX calls for design, count, and data Look for a url call that ends with ?ReadDesign
Giving a Form a Facelift Open a new or existing Notes form in the Designer client Add a <script> tag to the body of the form <script language=javascript src='/facelift/facelift.nsf/dfl_StaticForm.js' /></script> Add a <style> tag to the body of the form <link rel='stylesheet' type='text/css' href='/facelift/facelift.nsf/dfl_StaticForm.css' /> Save
Exercise 2: Create a Form and facelift it In the FLSample database, create a new form Add the following field types: Text field with help description and custom size Date field with calendar picker and date only Number field View Dialog field Address Dialog field Rich Text field Add the following pass-through html <link rel='stylesheet' type='text/css' href='/facelift/facelift.nsf/dfl_StaticForm.css' /> <script language=javascript src='/facelift/facelift.nsf/dfl_StaticForm.js' /></script>
How does it work: Form Overview When the form loads, a script gathers all the field elements and submits to a Domino agent The agent examines the DXL for the form to find extra design information that Domino doesn't render The agent returns a series of javascript function calls to the browser The functions are contained in a static script library and provide default implementations for extended behavior Calendar picker Name picker Select value not in list Key Point: Implementations can be provided by anyone
Tools For inspecting the DOM Firefox: Load the web development tools and use DOM Inspector IE: Developer Toolbar For debugging Javascript Firefox: Venkman plugin for 1.5x http://getahead.ltd.uk/ajax/venkman IE: Microsoft Script Editor How to install and configure: http://www.mandala.com/javascript/debug_javascript.html For analyzing http traffic between browser and server Both: Fiddler http://www.fiddler.com
Exercise 3: Change a widgit implementation Open the Facelift database
Futures: How could this be extended? Create totally static design elements and eliminate the OpenAgent type calls Views Inline document editing Developer-specified “programming” columns Embedded views Forms Address dialog View Picker dialog Name Picker Cascaded Field dialog (Refresh fields) Client side Input translations / validations
Javascript library resources and alternatives Prototype.js http://prototype.conio.net Ruby on Rails built on it mira.culo.us extends it rico.js extends it Issues with the way the Javascript Object has been extended Mochikit http://www.mochikit.com Combines features from Python and Objective C and applies to Javascript Comprehensive JS library list http://www.quicksilverscreen.com/archive/2005/12/07/javascript_libraries_roundup
Questions Please remember to fill out your evaluation forms and thank you for coming!

More Related Content

Hnd201 Building Ibm Lotus Domino Applications With Ajax Plugins

  • 1. HND 201: Building IBM Lotus Domino Applications with AJAX plugins Dwight Wilbanks, Lance Spellman
  • 2. Domino Facelift Toolkit Using AJAX and DXL for a better web UI framework
  • 3. Agenda Introduction of an AJAX/DXL framework called the Domino Facelift Demo of how Facelift works Code walk through Exercise 1: Facelift a view Exercise 2: Facelift a form Exercise 3: Change a widgit implementation Exercise 4: Build an AJAX request/response Resources and Tools Questions Agenda slide
  • 4. So, who are you guys? Dwight Wilbanks Independent consultant/developer Frequent contributor on Workflow development projects Builder of apps to support very large Notes infrastructures New blogger: dwightwilbanks.org Lance Spellman President of Workflow Studios, Premier IBM Business Partner Application development Managed hosting for Notes Education Center for IBM Software in Lotus and Websphere Penumbra Partner Notes/Domino developer since 1993 Occasional blogger: workflowstudios.com/lance/blog.nsf
  • 5. What is the Domino Facelift Toolkit? DFL Toolkit is AJAX and DXL techniques that improve the fidelity of Notes design elements for the Web. DFL is a concept and an approach...it could end up being a production framework DFL code can be easily integrated with any Notes database without re-engineering apps. DFL is lightweight and cross browser (IE, Mozilla, Opera) DFL does not require special security access, or program installs DFL can be implemented by an admin DFL produces some really cool UI! DFL is open source and needs widgit implementors
  • 6. Demo: Domino Facelift in Action
  • 7. How to Facelift a View If needed, create a new view Go to the Facelift database and use the Action... Create “View Template for...” Open in browser
  • 8. Exercise 2: Facelift a View Copy and paste a view from the FLSample database Modify it (add a column) and name it MyView Save and Preview Go to Facelift database Run Action “Create View Template for” Use default db Select your MyView Refresh the view in the browser Add a simple action to the view (Modify Field) Refresh the view
  • 9. How does it work? View Overview The wizard creates a $$View Template Default for XXX Form design element The form contains calls to an agent, a static JS library file and a CSS page The form also contains a special ViewPort div Can be placed anywhere in the form Additional content can be added anywhere in the form At runtime, the agent reads the DXL of the view's actions and returns JS code that builds them At runtime, the script issues AJAX calls for ReadDesign and ReadViewEntries The rest is driven by user events Basic text slide
  • 10. Examine the View In the Facelift database, Use Designer and open Script Libraries Open “dfl_StaticView.js” Find the function InitFaceLiftView() Find the function ajaxGetDesign() Find the function ajaxResDesignProcessor() Start Fiddler and Open the View in IE Examine the http traffic between browser and server as AJAX calls for design, count, and data Look for a url call that ends with ?ReadDesign
  • 11. Giving a Form a Facelift Open a new or existing Notes form in the Designer client Add a <script> tag to the body of the form <script language=javascript src='/facelift/facelift.nsf/dfl_StaticForm.js' /></script> Add a <style> tag to the body of the form <link rel='stylesheet' type='text/css' href='/facelift/facelift.nsf/dfl_StaticForm.css' /> Save
  • 12. Exercise 2: Create a Form and facelift it In the FLSample database, create a new form Add the following field types: Text field with help description and custom size Date field with calendar picker and date only Number field View Dialog field Address Dialog field Rich Text field Add the following pass-through html <link rel='stylesheet' type='text/css' href='/facelift/facelift.nsf/dfl_StaticForm.css' /> <script language=javascript src='/facelift/facelift.nsf/dfl_StaticForm.js' /></script>
  • 13. How does it work: Form Overview When the form loads, a script gathers all the field elements and submits to a Domino agent The agent examines the DXL for the form to find extra design information that Domino doesn't render The agent returns a series of javascript function calls to the browser The functions are contained in a static script library and provide default implementations for extended behavior Calendar picker Name picker Select value not in list Key Point: Implementations can be provided by anyone
  • 14. Tools For inspecting the DOM Firefox: Load the web development tools and use DOM Inspector IE: Developer Toolbar For debugging Javascript Firefox: Venkman plugin for 1.5x http://getahead.ltd.uk/ajax/venkman IE: Microsoft Script Editor How to install and configure: http://www.mandala.com/javascript/debug_javascript.html For analyzing http traffic between browser and server Both: Fiddler http://www.fiddler.com
  • 15. Exercise 3: Change a widgit implementation Open the Facelift database
  • 16. Futures: How could this be extended? Create totally static design elements and eliminate the OpenAgent type calls Views Inline document editing Developer-specified “programming” columns Embedded views Forms Address dialog View Picker dialog Name Picker Cascaded Field dialog (Refresh fields) Client side Input translations / validations
  • 17. Javascript library resources and alternatives Prototype.js http://prototype.conio.net Ruby on Rails built on it mira.culo.us extends it rico.js extends it Issues with the way the Javascript Object has been extended Mochikit http://www.mochikit.com Combines features from Python and Objective C and applies to Javascript Comprehensive JS library list http://www.quicksilverscreen.com/archive/2005/12/07/javascript_libraries_roundup
  • 18. Questions Please remember to fill out your evaluation forms and thank you for coming!