®

AD401 - LEVERAGING AJAX FRAMEWORKS TO BUILD IBM LOTUS DOMINO WEB APPLICATIONS

Vinod Seraphin | IBM

Akira Sudoh | IBM

Agenda

Why Ajax Web Applications?

JSON and Domino

Ajax Frameworks

Dojo

Using Dojo within Domino Web Applications

Summary

Q&A

Why Ajax Web Applications?

What is Ajax?Asynchronous JavaScript and XMLTerm coined by Jesse James Garrett in Feb. 2005Previously known as DHTML (and XMLHttpRequest)Technique using XHTML (or HTML), CSS, DOM, JavaScript, XMLHttpRequestData interchanged via XMLHttpRequest

XML, JavaScript Object Notation (JSON), HTML fragments

Why Ajax?Improved user experience

Each interaction with page doesn't result in full new page being loadedMore performant

Less bytes sent on networkLess CPU consumed on server

Examples: Domino Web Access, Outlook Web Access, Google Maps

Domino Views, Ajax and JSON

Rather than reloading entire page when navigating through a viewuse ?ReadDesign to read View design informationuse ?ReadViewEntries to retrieve View data

In this manner, column information can be setup on initial page load

Only data portion needs updating when user navigates in view

New with Domino 8?ReadDesign and ?ReadViewEntries now supports returning JSON

What is JSON?

JavaScript Object Notation

A lightweight data interchange specification (defined at http://www.json.org and RFC 4627)

Works well with all browsers

Why JSON?

Dealing with XML at the browser has some challengesMust be parsed and translated to a DOM tree or complex object that can be readily manipulated by JavaScriptRequires additional JavaScript DOM objects (e.g., XpathEvaluator or selectNodes) to be present and often additional JavaScript to hide the browser specific complexity.Impacts client side performance

XML handling in Firefox is much slower than in IE (unless using E4X)

JavaScript has very powerful “eval” statementMost efficient way to create a JavaScript object from texteval( ‘(‘ + retrieved JSON data + ‘)’ );

Consumes a little less bandwidth than XML

JSON has gained much popularity within Ajax applications

E4X (EcmaScript for XML)

EcmaScript == JavaScript

Solves difficulties with dealing with XML from browser

Adds an xml datatype for JavaScriptvar foo=<root>

<element attribute=”value”>elValue</element></root>;

Now can accessElement values:foo.element OR foo[“element”]

Attribute values:foo.element.@attribute OR foo.element[“@attribute”]

Supported by Firefox 1.5+, but not IEPossible future technology, but can't be relied on today

Domino 8.0 Support for JSON

Existing Domino commands that return XML will now alternatively return JSON

Triggered by &OutputFormat=JSON

?ReadViewEntries, ?ReadDesign and ?ReadEntries

Approach to map XML to JSON representation in a way to come up with an E4X compatible access mechanism with caveats

JavaScript (without E4X) doesn't allow “@” character as first char of an identifieroXml.@toplevelentries doesn’t work.

However, can access via array notationoXml[“@toplevelentries”] works!

Rules for mapping XML to JSON

Top level element name omitted (root element)

Attribute names are represented as double quoted property name prefaced with ‘@’

All attribute values are represented as a double quoted JavaScript stringNo attempt to map numeric values to JavaScript numbers or boolean values as JavaScript booleans

A list of elements are represented as a JavaScript arrayAny element that might have a list is represented as an array

Element values (text nodes) are represented as a value to a “0” attributeNecessary to accommodate cases where a node might have an attribute as well as a value

<datetime dst=“true”>20070123T07000,00-04</datetime> “datetime”:{“@dst”:”true”, “0”:” 0070123T07000,00-04” }

What does application/json response look like?

Add &OutputFormat=JSON

Normal ?ReadViewEntries

®

DemoDomino 8 JSON Support

Ajax Frameworks

Toolkits to more quickly build Ajax applications

Address costly development issues:Cross browser compatibilityUseful utility routines/Common APIs across projectsBack button support

CapabilitiesSome just include low level JavaScript helper routines to handle things like communications, DOM manipulations, event handling (e.g., prototype)Some include drag and drop, and visual effects (e.g., script.aculo.us)Others include support for some set of rich UI widgets (e.g., Dojo)

Some include server-side components as well (often relying on specific server side technologies such as Java or .NET) (e.g., Atlas)

Dojo

“Unified” open source DHTML toolkit written in JavaScript, HTML and CSS

Builds on several earlier contributed code bases (e.g., nWidgets, Burstlib, f(m))Lots of industry participation (including, IBM, SitePen, Sun, AOL)Newer contributions as well

Works well across all modern browsers and gracefully degrades

Widgets written in an extensible, customizable manner

Rich, growing feature set (v. 0.4.1)Utility routinesEvent handling systemAjax supportLanguage utilities and support for localizationAccessibility (in progress)Client side storageDrag and DropExtensive layout capabilitiesLarge widget set

Dojo (cont.)

No server-side technology dependency (ie, Java or .NET or PHP), so can work well on Domino

Easy enough for a designer to use (DojoML)Add dojoType=“…” attribute and value to existing HTML elements (e.g., dojoType=“DropDownDatePicker”Alternatively, can specify class=“dojo-…” (e.g., class=“dojo-DropDrownDatePicker”)

Supported Browsers:IE 5.5+, Firefox 1.0+Latest versions of: Safari 2.0.x, Opera 8.5, Konquerer 3.5

Dojo Architecture/Highlights

Set of layered libraries

Bulk of code in Application Support Libraries and Widget Toolkit

io.* -- XMLHttpRequest and more

lfx.* -- lightweight effects

Widget Toolkit – biggest perceived strength of Dojo

courtesy of dojotoolkit.org

Using Dojo

Must build a dojo package with desired pieces or retrieve one of the common bundles

MinimalAjaxBrowserIOKitchen Sink

Compression tool allows building compressed source files

dojo.js contains compressed version of desired starting librariesdojo.provide statements describe what libraries have been bundled together

dojo.require method allows for loading additional needed libraries laterbut these sources will not be compressed

Reference dojo.js via a script tag on main pageOther sources expected in a particular subdirectory structure

An outline and a view before doing any UI work

We usually add styles, etc. to make it look nicer

An outline and a view refurbished with Dojo

Dojo TreeV3 widgetData retrieved in JSON

Dojo FilteringTable widgetColumn widths and data retrieved in JSON

Dojo MenuBar2 widget

Dojo SplitContainer widget(The left and right regions are

Dojo ContentPane widgets)

Using Dojo in Domino web application

Extract Dojo package somewhere under domino\html directory under Domino data directory

Add <script> tag for dojo.js by adding following formula as HTML Head Content, etc. (In below example, dojo.js is in domino\html\domjs\dojo directory under Domino data directory)

For scripts that are not in dojo.js, add dojo.require() code to JS Header, etc.

View template form with passthru HTML

Dojo MenuBar2/MenuBarItem2 widgetsDojo SplitContainer widget

Dojo FilteringTable widget

function createTree(){var oDate = new Date(1900, 0, 1, 0, 0, 0, 0);var sUrl = gsDbName+ '/MainOutline/?ReadEntries&OutputFormat=JSON‘;var oHeaders = {"If-Modified-Since": getRFC1123Date(oDate)};

goBindDataTree = new dojo.io.Request({url: sUrl,load: onTreeDataComplete,mimetype: 'application/json',headers: oHeaders

});

dojo.io.bind(goBindDataTree);}

Fetching JSON dataRequest format is JSON

HTTP header to avoid stale cache

Callback

Invoke the request

goBindDataTreekeeps track of the

latest request

function onTreeDataComplete(type, data, req, binddata){if (goBindDataTree != binddata)

return;

// (Code to create Dojo TreeV3 widget, append it to DOM, etc.)

var aoChildren = [], oRegExp = new RegExp('.*/(.+)/?\\?OpenView$');

for (var aoEntries = data.outlineentry || [],fnCreateSimple = dojo.widget.TreeNodeV3.prototype.createSimple, i = 0;i < aoEntries.length; i++) {

dojo.lang.mixin(aoEntries[i], {title: aoEntries[i]['@title'], url: aoEntries[i]['@url'],tree: oTree, contentClass: 'dojo-outline-text',selected:aoEntries[i]['@url'].oRegExp)[1] == gsCurrentView

});aoChildren.push(fnCreateSimple(aoEntries[i]));

}

oTree.setChildren(aoChildren);}

Using JSON data from Domino server

Bail if there is a newer request

Root node in JSON response

Create a tree node

A form before doing any UI work

A form refurbished with Dojo

Dojo MenuBar2 widget

Dojo Editor2 widget

Dojo DropDownDatePicker

widget

Dojo ComboBox widget

Dojo Button widget

Making Domino form elements Dojo widgetsJust adding “DropDownDatePicker”makes a date/time field DropDownDatePicker Dojo widget (Adding dojo-DropDownDatePickerclass does the same effect)

Same thing applies to dialog list field and ComboBox Dojo widget

Add dojoType=“Button” as well as caption=“(The caption)” to make a button Dojo version

Add dojoType=“Editor2” to make a rich text field Dojo editor (Need to run dojo.byId('Body').value = dojo.widget.byId('Body').getEditorContent(); when submitting. Need some other works to make the field compatible with Notes client)

Using Dojo dialog on web form

No page navigation, no popup window

Add passthru HTML for Dojo Dialog widget, for example:

<div dojoType="dialog" id="e-categorize" bgColor="black" style="display:none;">(The dialog contents here)</div>

Set dojo.widget.byId('e-categorize').show(); to button action, etc.

®

DemoSupport Call Tracking Application Example

Summary

Ajax is a “brilliant” way to modernize your Domino Web applications

Dojo easy to use with Domino

Dojo still evolving (not yet at 1.0 release)

Potential for future easier integration with Domino Designer

Related Sessions, Resources and Q&A

AD302: What's New in the IBM Lotus Domino Web ServerAD402: @Formulas Meet AjaxBP311: The Great Code Giveaway – Web 2.0 Edition

Information about JSONhttp://www.json.org

Dojo site:http://dojotoolkit.org/FAQ:

http://dojo.jot.com/WikiHome/FAQDojo API Reference:

http://dojotoolkit.org/api

© IBM Corporation 2007. All Rights Reserved.

The workshops, sessions and materials have been prepared by IBM or the session speakers and reflect their own views. They are provided for informational purposes only, and are neither intended to, nor shall have the effect of being, legal or other guidance or advice to any participant. While efforts were made to verify the completeness and accuracy of the information contained in this presentation, it is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, this presentation or any other materials. Nothing contained in this presentation is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software.

References in this presentation to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in this presentation may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. Nothing contained in these materials is intended to, nor shall have the effect of, stating or implying that any activities undertaken by you will result in any specific sales, revenue growth or other results.

Performance is based on measurements and projections using standard IBM benchmarks in a controlled environment. The actual throughput or performance that any user will experience will vary depending upon many factors, including considerations such as the amount of multiprogramming in the user's job stream, the I/O configuration, the storage configuration, and the workload processed. Therefore, no assurance can be given that an individual user will achieve results similar to those stated here.

All customer examples described are presented as illustrations of how those customers have used IBM products and the results they may have achieved. Actual environmental costs and performance characteristics may vary by customer.

IBM, the IBM logo, Lotus, Lotus Notes, Notes, Domino, Domino.Doc, Domino Designer, Lotus Enterprise Integrator, Lotus Workflow, Lotusphere, QuickPlace, Sametime, WebSphere, Workplace, Workplace Forms, Workplace Managed Client, Workplace Web Content Management, AIX, AS/400, DB2, DB2 Universal Database, developerWorks, eServer, EasySync, i5/OS, IBM Virtual Innovation Center, iSeries, OS/400, Passport Advantage, PartnerWorld, Rational, Redbooks, Software as Services, System z, Tivoli, xSeries, z/OS and zSeries are trademarks of International Business Machines Corporation in the United States, other countries, or both.

Java and all Java-based trademarks are trademarks of Sun Microsystems, Inc. in the United States, other countries, or both.

Microsoft and Windows are trademarks of Microsoft Corporation in the United States, other countries, or both.

Intel and Pentium are trademarks or registered trademarks of Intel Corporation or its subsidiaries in the United States and other countries.

UNIX is a registered trademark of The Open Group in the United States and other countries.

Linux is a registered trademark of Linus Torbvalds in the United States, other countries, or both.

Other company, product, or service names may be trademarks or service marks of others.

All references to Acme, Renovations and Zeta Bank refer to a fictitious company and are used for illustration purposes only.