Whilst browsing the blogsphere recently there has been much chat about the wonderfullness of all things V8. In amongst all these posts i have come across some quiet voices saying "yes yes we know but we are still on V6 and it will be a while before we can get upgraded to V7 let alone V8.... WHAT ABOUT US?"
OK point taken. I work at the top end of V7 and we are about to plunge head-long into the V8world. However I have been following the developements of AJAXy stuff and done some fairly extensive fiddling. This fiddling has been mainly V6/V7 oriented but most of what can be done in V6 or V7 can be done in V5 too... and it is not that hard to get a whizzy AJAX script talking to your domino server domino in your own applications. So if you want a step by step guide and are not too worried about the detail of what goes on behind the scenes. I am your man, so to speak :)
Part 1 - Getting your framework code
They are all good ... I choose to use YAHOO a long time ago and it is the one I am most familiar with ... but feel free to choose whichever one you want once you have dipped you toe in the water.
The Yahoo UI web site can be found here http://developer.yahoo.com/yui/ and the most recent version can be downloaded from the link on the home page or from here
The code arrives as a ZIP file... simily unzip it onto your hard drive, when complete you will have directory which contains the full YAHOO UI source code.
Part 2 - Getting the code into your App
Having downloaded and unZipped the YahooUI files you will need to get some of them into your application so you can use them. If you have a friendly ADMIN you can load them in the /domino/html/ directory on the server and access them directly. I prefer to keep the code in the NSF file so that if the files is distributed over many servers, each with their own admin it is easier to deploy updates to the code across these replicas.
Since we are looking only at the AJAX connection we dont need all the files you downloaded there are only 3 you definitly need.
So do the following :-
01. Open your NSF file in Designer
02. Open the Shared Code Section
03. Open the Script Libraries Section
05. Select FILE
06. Select IMPORT
07. Open the YAHOO UI top level folder
08. Open the BUILD subdirectory
09. Open the CONNECTION subdiretory
10. Open the CONNECTION.JS file
11. Save the library as CONNECTION.JS
13. Select FILE then IMPORT as before
14. Open the YUI./BUILD/EVENT directory
15. Import the EVENT.JS file into your libray
16. Save the library as EVENT.JS
18. Select FILE then IMPORT as before
19. Open the YUI./BUILD/YAHOO directory
20. Import the YAHOO.JS file into your libray
21. Save the library as YAHOO.JS
You should now have the following in your NSF's Script Libraries section
These are all the files you require for AJAX communication with the server
You may have noticed there were other files in the directories you loaded the scripts from .. i would avoid the *-debug.js ones unless you want to get down and dirty with the source code ... the other file *-min.js is optimised for size and has all the comments and line feed removed. If bandwidth is an issue for your network.. simply import the *-min.js into your application.
Once you have these files loaded into your app you need to embedd them in the pages and forms that you want to build some AJAX functionality into.
Again there are several ways of doing this, the easiest I find is to Insert the file as a resource like this
01. Open your page or form
02, Goto the JS HEADER Section
03. Click somewhere in the content panel
04. Go to CREATE
05. Go to INSERT RESOURCE
06. When the JS libraries appear select YAHOO.js
07. Repeat (04) and (05) for EVENT.js
08. Repeat (04) and (05) for CONNECTION.js
You should load the files in the order above so that the DOM get loaded in the correct order otherwise strange things may happen!
OK you are ready to start coding which I will cover in the next post.