Practical Uses of AJAX in IBM Lotus Domino Web Applications

Practical Uses of AJAX in IBM Lotus Domino Web Applications Scott Good, President Teamwork Solutions www.teamsol.com Advisor.com Scott Good  President, Teamwork Solutions     Notes Developer/Designer, 12 years Extensive workflow experience    Cincinnati, Columbus 2-time Beacon Award Finalists ProcessIt! (2006 Advisor Editor’s Choice) ProcessIt Document Library WorkFinder AJAX CSS JavaScript LotusScript General web development  Have written more than 40 Lotus Advisor articles      Advisor.com Teamwork Solutions…     IBM Premier Partner 2-time Beacon Award Finalist Custom application development Notes- and web-based app development tools     Consulting     ProcessIt! Workflow ProcessIt! Document Library WorkFinder Notes, Domino and related technologies Helping set application development standards Conversions from Notes to web Etc. Advisor.com Agenda Introduction The basics of AJAX What it can do for you How to make AJAX requests How to fake AJAX requests How to recognize places you can use it Lots of demos Questions & Answers         Advisor.com What is AJAX?  Asynchronous JavaScript And XML  VERY hot right now (but not actually new) A combination of technologies Able to work independently of the UI    (Asynchronous)  Uses XML as a data format Can retrieve information for you or send information back to others Advisor.com  Why should you care?  Can make web applications much…     Breaks through a lot of traditional limitations of web applications  Faster More intuitive Easier to use  NOTE: Older browsers cannot do the mostcommon form of AJAX (IE prior to 5.5, etc.)  Creates a sometimes-link with the server without requiring the UI to refresh There are things they CAN do, though Advisor.com Demo  Google Maps  The definitive standard (not Domino, though)  http://maps.google.com Advisor.com How can it be used in Domino?  Lets users dynamically retrieve data FROM the server while doing something else    Type-ahead for name retrieval Check availability of ordered items Do semi-real-time data validation  Lets users send data TO the server without waiting to get it back before moving on    Periodic saves to keep from losing work “I’m still here” notices to control edit locking Encumber budgets or inventory  The list is limited mostly by your imagination Advisor.com Demos  Web NAB picker, AJAX vs not-AJAX   Lotus Advisor, June 2006 www.scottgood.com, November 8, 2005 Advisor.com How to make an AJAX request   The basic object, which makes the request, varies depending on browser MS Internet Explorer (until IE 7)   Firefox, Opera, etc.  ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); ajaxReq = new XMLHttpRequest();   Unless you can be absolutely sure of the browser, you must build for both Determine which by checking for window.ActiveXObject Advisor.com Building an AJAX request var ajaxReq; if (window.ActiveXObject) { // Internet Explorer ajaxReq = new ActiveXObject(“Microsoft.XMLHTTP”); } else if (window.XMLHttpRequest) { // Firefox, Mozilla, etc. ajaxReq = new XMLHttpRequest(); } if (ajaxReq != null){ ajaxReq.open(“GET”, “http://www.whereveritis.com”); ajaxReq.onreadystatechange = eval(“processTheResults”); ajaxReq.send(null); } Lotus Advisor, May 2006 Advisor.com Dealing with the result function processTheResults(){ if (ajaxReq.readyState == 4) { // 4 = complete…everything is here if (ajaxReq.status == 200) { // 200 = HTTP completed successfully var xmlOut = ajaxReq.responseXML; // do whatever you need to do… } } } Advisor.com Navigating this mess with JS     With JavaScript you can parse out anything you need from the returned XML ajaxReq.responseXML will return an XML object Objects can be manipulated with JavaScript Using code, you can climb up and down the XML DOM (Document Object Model--its hierarchy) to get what you need Advisor.com So, where do you get the XML?     ?ReadViewEntries (from a view) Build a view with XML tags in column formulas (then embed it in a Form or Page) Build a Form or Page and format its content to be presented as XML Build your own XML with an agent and return it with Print statements Any of these can return XML to an AJAX request  Advisor.com Demos  Type-ahead name field for the web  Uses ?readviewentries parsed (and enhanced) with JavaScript Advisor.com Writing your own XML   Sometimes it’s easier to format your own XML than to try to use what Domino serves up Many advantages      Can be the output of a LotusScript agent Get what you want in the format you want it Doesn’t have to be static, can search db Can be as simple or complex as needed Is easy to do http://yourServer/yourDb.nsf/agentName?open Advisor.com XML from an agent   Print statements do the output Must begin with a declaration block Print "Content-type: text/xml"  From there on out, build the XML Print Print Print Print Print “” “” + doc.FirstName(0) + “” “” + doc.MiddleInitial(0) + “” “” + doc.LastName(0) + “” “”   Everything must be properly nested The format can be your own Advisor.com XML from an agent (2)  Is extremely flexible     Is fast Is easy to modify Is something anyone who knows LotusScript can quickly build   Much more than a view or folder could be No Java No nuthin Advisor.com Demo  Hexion intranet search support  Uses LotusScript-based agent to support .NETand Java-based Intranet employee searches  Lotus Advisor, July 2006 Advisor.com “Fake” AJAX with iFrames   Asynchronous activities can be done other ways iFrames can provide a “window” through which you can asynchronously invoke other actions     Document update and save while editing Retrieve info and update current page Check availability of items Etc.  Lotus Advisor, August 2006 Advisor.com Creating iFrames    iFrames are “inline frames” Create a frame—a window to another page— within the current page Simple HTML Advisor.com Using iFrames   The iFrame does not have to start with a “src” value…it can be blank Nor does it need to be visible…  Using JavaScript, you can re-set the “src” value when needed… window.myIFrame.location=“http://whatever.com”; Advisor.com Using iFrames (2)  Values can be returned from the iFrame to the window with JavaScript, too, from Domino agents Print || Advisor.com Demo  Hexion PSSR    Allows multiple simultaneous editors of the same document Provides line-by-line document saves Eliminates replication conflicts Advisor.com So, what else can you do with it?   The limitations of AJAX in your Domino applications are mostly limitations of imagination Look for…     Places where the page has to wait for data before loading Places where you need to collect information which is load-sequence insensitive Places where you can’t collect the next information without having the last info (e.g., cascaded category lists) Places where user activities can trigger asynchronous actions Advisor.com Demo  “I’m still here” web editing security  (see September 2006 Lotus Advisor for details)  Lotus Advisor, September 2006 Advisor.com Demo  AJAX Web View  Lotus Advisor, February 2007 Advisor.com Demo  AJAX cascading categories  Lotus Advisor, November 2006 (probably) Advisor.com Demo  Racer’s Edge web navigation    XML formatted as unordered list CSS applied to build dynamic menu (see it at www.racersedge-inc.com) Advisor.com Questions & Answers Scott Good, Teamwork Solutions   sgood@teamsol.com www.scottgood.com 614-457-7100 x200 614-581-1522 (cell)   PLEASE FILL OUT YOUR EVALUATIONS Advisor.com