This document will go through the database I have provided you in the downloads section of this site. Further articles will appear explaining individual design techniques soon.

Pages

The databases makes use of pages (marked as "Treat Page Contents as HTML") to store the javascript and css information. The following pages can be found:

global.css - Style Information for Menus and Test Document entitled menu1.htm

menuapi.js - API style Javascript code to create and run the menu system

mycode.js - Custom Javascript for demo application

I try to make a habit of keeping style information and javascript seperate from the forms. This way the files will be cached and reused from that cache - rather than reloading the code for each notes document requested.

For now I presume you will understand how the style sheet works and that you can go through the javascript and understand at least partly what is going on - even if you do not it doesnt matter as all parts of the database are simple enough to plug into your database and reuse. People with little web knowledge and people with advanced web knowledge will have to excuse me as I have to aim somewhere in the middle when explaining things. I will be adding articles over the next few days to explain individual parts - I will also setup a feedback system soon.

Forms

Whilst there are two forms in the design (WEB_DHTML_MENUS + NOTES_DHTML_MENUS) they are essentially one. One is used when the documents are opened via Notes and the other is used when opened via the web.

This saves a lot of hide/whens and also helps us to minimise the amount of stuff that is sent to the browser that isnt needed. In case you dont know how to do this, basically follow the naming standard I have used and then make the alias name the same - then click on the design document properties (within the form list view - not inside the actual form) so that one form is hidden for web - the other hidden for notes.

Inside the Notes version of the form you will see a title field, a menu setup table and a contents field - I think the title and contents field explain themselves.

The menu setup table consists of four columns. The first is where you enter the titles of each individual menu button, the second is where you either enter direct javascript or a javascript function call for that button (or enter 'None' if you do not need any). Just completing these two columns would give you a basic button menu.

If you also require dropdowns from these buttons, then column 3 is where you would enter the drop down list (seperating each item with a comma) and column four again is where you would put your javascript call (again seperated by comma's).

Inside the web version of the form are the four fields required to pass on the menu configuration data, together with links to bring in the two external javascript files and the stylesheet.

Questions? - steve.castledine@projectdx.org