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
There are several AJAX-enabled Javascript frameworks out there on the web, Dojo, Prototype and the one I will be talking about ...the YAHOO UI. These frameworks are opensource so theyare FREE!
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
04. Create a new JAVASCRIPT library
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
12. Create another Javascript Library
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
17. Create another Javascript Library
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
CONNECTION.js
EVENT.js
YAHOO.js
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.
Steve
2 comments:
One of the great advantages of the YUI framework is that Yahoo will host the JS pages for you. Instead of actually embedding them into your db, just add a script tag to your HTML Head and point the src attribute to the Yahoo servers.
Hiya Sean :)
I believe we shared a pint or two at ILUG last year .. good to hear from you and thanks for the heads up!
Indeed yes you can access their code directly by embedding links to the yahoo servers :) I really should have mentioned that but it slipped my mind. Mainly due to the fact that in my org most of the users do not have access to the internet and as a result I always have to embed the code into the NSFs.
A bad case of the path most trodden on being the easiest to go down.
Steve
Post a Comment