Jan 21, 2015
®
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.