|
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.
|