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

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

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!