Domino Blog dot com - Free Blog Toolkit for Domino

 web design framework for Lotus Domino  
 
Navigation
 
Site:
 ›home
 ›about
 ›news
 ›the author
 ›hire the author
 ›donate to site
 ›live! project cam
 ›projects
 
Issue Archive:
 ›may 2003
 ›april 2003
 ›march 2003
 ›february 2003
 ›january 2003
 ›december 2002
 ›november 2002
 ›october 2002
 
Technical:
 ›articles
 ›downloads
 ›links
 
DXFramework:
 ›about
 ›articles
 ›screenshots
 ›demos
 ›licencing
 ›take part
 ›documentation
 

 
Introduction Comment:  Add | View 

As mentioned in part one, I have chosen to do my comment/feedback form using standard HTML - eg not a Domino one. In a Domino Development environment this generally wouldn't be done, however i'm keen to demonstrate different techniques.

 

I also feel it important to sometimes understand the nitty gritty of basic HTML and how things are put together - and so improving your knowledge of exactly how Domino does certain things.

 

Before the HTML form is opened

The comment form is launched form the add Comment Link on the articles and blogs.

 

 

The html of this link is: <a href="javascript:dxC('a23')">Add</a>

 

By putting 'javascript:' at the start of the href attribute of the <a> tag (anchor tag), this tells the browser to run the javascript code that follows it.

 

In this case, the function: dxC() is called and the parameter 'a23' is sent to it.

 

What? - ok 'dxC' stands for DX Comment - whilst it doesn't make good reading when you are trying to debug code, I've become very 'tight' with my coding - ie I make my code as small as possible - no function names like createDXCommentForFunFunction() for the simple reason to make my code download as quick as possible.

 

Whilst it is not that important in this example because of the size/type of pages being downloaded, with larger applications it is crucial - for example the Javascript file which is the api used for the DXFramework is 90k in size - and I can assure you there is a lot of functions etc in there - if I didn't take care to keep this file size down it could quite easily be at least double that size.

 

Another point to make is - do you really need all those comments? - comments are useful for debugging and for future developers who may want to update the code - but it comes at a premium - bigger files!

 

One of the bits of work i'm doing at the moment is upgrading the Javascript editing part of DX. I want the program to automatically remove the comments out of the code when delivering to the browser. Then for all your code, you can have as many comments as you like without slowing the download. For me - a much better solution.

 

Ok back to the article! The 'a23' is an id I use and is passed to the dxC() function. In this example it means this comment is for Article 23. This id is passed to the comments form, which in turn passes this to the receiving Java Servlet which then looks up the ID in a Link Manager Database I have (is part of some Content Management software I am developing for Domino) and then populates the final Notes Document that is created with the full name of the article.

 

The actual function (dxC()) is in the js.js file that is used to contain all the javascript code for the ProjectDX.org website. This function looks like this:

 

function dxC(id){

 if(id==null||id==""){id="0"}

 var com=window.open("comment.htm?open&"+id,"DX","height=480,width=440,left=200,top=100")
}

 

You can see the article id being received into the 'id' variable. You will also note then on the next line a check to make sure this is not 'null' or an empty string. If it is id is set to '0'.

 

The second line creates a new browser window and opens the comment.htm page within it. You will notice the "?open&"+id after the comment.htm. This is how you can pass parameters to other HTML pages. I will show you how to then retrieve these values in the next section.

 

The HTML

If you wish to view the HTML for my comment/feedback form (comment.htm), simply view the source of the web page when you have it opened in your browser. I will be making the .htm file available together with the Java code etc.

 

For this article I am just going to concentrate on the parts that I feel are important. The most important part of the HTML is the use of the <form> tag. Basically every field that you want to send to the Servlet must be contained within this.

 

The <form> tag is structured:

<form action="http://edia.dominodeveloper.net/servlet/DXReceive" method="post">

and after your field HTML you would close it using:

</form>.

 

<form> has one required attribute, ACTION, specifying the URL of a CGI script/Servlet etc which processes the form and sends back feedback. There are two methods to send form data to a server. GET, the default, will send the form input in an URL, whereas POST sends it in the body of the submission. The latter method means you can send larger amounts of data, and that the URL of the form results doesn't show the encoded form.

 

In this example, the action is set to the URL of my Servlet class which resides at dominodeveloper.net. The actual Servlet class is cunningly entitled DXReceive. I have also chosen to use the POST method.

 

The id that is passed to this web page, is stored in the hidden field ID (again cunning stuff):

<input type="hidden" name="id" value="none">.

 

This value is retrieved from the URL using the following javascript method which is called from the onLoad event of the web page:

 

function loader(){

 f=document.forms[0]

 id=window.location.href.split("&")[1]

 f.subject.focus()

}

 

Submitting the Form

The final things that need to be done is to populate the hidden field ID with the Article ID (although you cannot do this until the end in case the user presses the 'Clear Form' button and also to 'Submit' the form to the Servlet.

 

To do this we have a button entitled 'Send'. This calls the following function from its 'onClick' event

<input type="button" value="Send" onClick="sendForm()">.

 

function sendForm(){

 f.id.value=id

 var name=f.name.value

 f.submit()

 document.body.innerHTML="<br><br><br><br><br><center>Thankyou "+name+"</center><br><br><br><Center>Please Wait...</center>"

}

 

There are three parts to the above function. The first is populating the ID field with the Article ID (Line 1), the second is submitting the form using the forms submit() method (Line 3) and the third is a DHMTL trick to make a better end user experience - it puts a message on the screen immediately telling the user what it is doing (Lines 2 & 4) - this way there is no waiting for the servlets response and no looking at the browser and not being sure whether you clicked that 'Send' button or not! - plus removes the possibity of it being pressed twice.

 

Ok thats the HTML form covered. The next article will be about the meat of the project - the Java Servlet that has to receive the data.

 
 
copyright 2002-2003 - Steve Castledine - ProjectDX.org