BP308: IBM Lotus Domino Web Facelift Using AJAX and DXL Dwight Wilbanks, Lance Spellman

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 Agenda slide

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

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?

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!

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 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 Contents can be interactive: highlight on mouse over and hyperlink to section on mouse click.

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

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 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

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

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

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 Basic text slide

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

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

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

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

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)

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

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

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