bp308 ibm lotus domino web facelift using ajax and dxl
Post on 13-Sep-2014
3.018 views
DESCRIPTION
TRANSCRIPT
BP308: IBM Lotus Domino Web Facelift Using AJAX and DXL
Dwight Wilbanks, Lance Spellman
Domino Facelift Toolkit
Using AJAX and DXL for a better web UI framework
Agenda
Who wants a shirt?
Who are you guys?
What is the Domino Facelift Toolkit?
How do I Facelift a form
How do I Facelift a view
How it works (high level process)
How it works (AJAX/DXL highlights)
Where can I learn more?
How do I get it and use it?
Questions
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
Introduction: Leveraging AJAX and DXL for Domino
Interesting technologies that have a lot of buzz
Others have implemented some interesting things Name picker
Calendar picker
View navigation
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
How best to explain these concepts?
Easy, build it and show it
Want to see?
I want to see...
Show me your facelift!
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
DFL Form Capabilities
Text popup hotspots
Observe minimum row heights in tables
Observe native OS field height/width properties
Implement help descriptions
Observe and implement calendar picker for date fields
Implement client-side validation of date only/date and time/time only
Dialog list implementations ACL
Allow values not in list
Listbox height and width
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
Demo:
How to Facelift a Form
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
DFL View Capabilities
Scroll view data instead of paging
Type in view entry and jump to it
Display categories in separate scrolling pane
Mouseover category information Displays # of children entries
Displays # of total descendants
Click icon for document preview Document opened for read mode
Selectable documents
View Actions
Giving a View a Facelift
Open the Facelift database
Click the View Action “Facelift a View”
Select the database that contains your existing view
Select the view to be facelifted
Open the view in the browser
Demo:
How to Facelift a 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
How does a UI work with and without AJAX?
Movies
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
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
Hands-on Lab with the Facelift Toolkit
HND 201 Building IBM Lotus Domino Apps with AJAX/DXL Tue, 8:30 – 10:15, SW Osprey
Thur, 8:30 – 10:15, SW Mockingbird 1-2
Use the DFL toolkit to facelift a Notes form
Use the DFL toolkit to facelift a Notes view
Write your own AJAX request/response using prototype.js library
Run the DXL form parser agent to interrogate design elements and create JS function calls
Build HTML output by reading XML via JS DOM and creating new HTML elements
Other AJAX/DXL sessions at Sphere AD 216 AJAX and Lotus Domino – The cleanest, slickest sites in
town Scott Wenzel (aka The Turtle)
Mon, 2:15-3:15, DL S Hemisphere 4-5
BP 310 How to make IBM Lotus Domino sites that don't look or act like Lotus Domino
Henry Newberry, Scott Good
Mon, 5-6, SW 5-6
BP 306 Creating Compelling Apps with QP 7 using JS, AJAX... Viktor Krantz, Troy Reimer
Tue, 11:15-12:15, SW 3-4
BP 303 Big-Time Tips and Tricks for your Web apps Viktor Krantz, Rob Novak
Tue, 3-4, SW 5-6
Wed, 4:15-5:15, SW 3-4 (repeat)
Other AJAX/DXL sessions at Sphere
BP 305 Combine XSL and DXL for Rich Web Apps Mac Guidera
Wed, 1:30-2:30, SW 3-4
BP 313 Practical DXL for LotusScript... Rocky Oliver
Wed, 4:15-5:15, SW 5-6
Questions
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!
Free facelifts at Workflow Studios ped #618 in the showcase
Where do I get the code and updated slides/demos? faceliftfordomino.com