XMLC Tutorial: Dealing with Forms

Contents

  1. Using XMLC with <FORM> elements
  2. A Sample HTML Page
  3. The Associated Document Object Model (DOM)
  4. Resulting Java Class
  5. Usage from a Manipulation Java Class
  6. Resulting HTML

Using XMLC with <FORM> elements

It is easy to use XMLC with complex HTML pages, even those containing <FORM> elements. This chapter will show how it is done.

Generally, <FORM> elements are handled exactly as any other HTML tag: id attributes are added, getElement* methods are generated and a Java manipulation class can call these methods to change the tags or attributes. All of this was shown in the last chapter.

Here, we will show a form example and further the discussion of how one finds and uses HTMLElement objects that are returned from the generated getElement* methods.

Note that there is a bug in the Swing HTML parser that XMLC uses. In some cases, the use of HTML paragraph tags (<P>) inside <FORM> tags can cause the page to be parsed improperly. A bug report has been submitted, but in the interim a good workaround is to replacing paragraph tags inside <FORM> tags by using HTML like this: <BR>&nbsp<BR>

A Sample HTML Page

Below is an HTML page that includes a simple form. It has a header, a textfield and a group of radio buttons. You should note that we have assigned id attributes to the parts that we may wish to change: The <FORM> tag, the textfield and the radio buttons. These additions are shown in red.

There is a subtlety when using radio buttons. Generally, we have been assigning id attributes the same value as the name attribute for a given tag. Radio buttons, however, need to exist within a group; that is, they all have the same name. In order for XMLC to generate Java code that allows us to manipulate each individual radio button, however, they must have uniquely named id attributes. Hence, the radio buttons are all named "radio1", but the three have different id attributes: "radio1", "radio2" and "radio3".


<HTML>
<HEAD>
    <TITLE>An HTML Page with a Form</TITLE>
</HEAD>

<BODY BGCOLOR="#FFFFFF" TEXT="#000000">

<H1>An HTML Page with a Form</H1>

This page has a FORM on it:
<P>
<FORM METHOD=GET ACTION="some_bogus_PO" ID="form1">
    What is your name?  
    <INPUT TYPE=TEXT NAME="textfield1" ID="textfield1" SIZE=30 VALUE="Enter your name here">
    <BR>
    What is your favorite color?  
    <INPUT TYPE=RADIO NAME="radio1" ID="radio1" VALUE="red"> Red
    <INPUT TYPE=RADIO NAME="radio1" ID="radio2" VALUE="green"> Green
    <INPUT TYPE=RADIO NAME="radio1" ID="radio3" VALUE="blue"> Blue
    <BR>
    <INPUT TYPE=SUBMIT>
</FORM>

</BODY>
</HTML>

The Associated Document Object Model (DOM)

The DOM for the above HTML page was generated by issuing the command '$ENHYDRA/output/bin/xmlc -dump form.html', exactly as in the previous example. It looks like this:


DOM hierarchy:
    BasicHTMLDocument
        BasicHTMLHtmlElement: html
            BasicHTMLHeadElement: head
                BasicHTMLTitleElement: title
                    BasicText: text=An HTML Page with a Form
            BasicHTMLBodyElement: body: bgcolor='#FFFFFF' text='#000000'
                BasicHTMLHeadingElement: h1
                    BasicText: text=An HTML Page with a Form
                BasicText: text=This page has a FORM on it:
                BasicHTMLParagraphElement: p
                    BasicHTMLFormElement: form: action='some_bogus_PO' 
                                          id='form1' method='get'
                        BasicText: text=What is your name? 
                        BasicHTMLInputElement: input: id='textfield1' 
                                          name='textfield1' size='30' 
                                          type='text' 
                                          value='Enter your name here'
                        BasicHTMLBRElement: br
                        BasicText: text=What is your favorite color? 
                        BasicHTMLInputElement: input: id='radio1' 
                                          name='radio1' type='radio' 
                                          value='red'
                        BasicText: text= Red 
                        BasicHTMLInputElement: input: id='radio2' 
                                          name='radio1' type='radio' 
                                          value='green'
                        BasicText: text= Green 
                        BasicHTMLInputElement: input: id='radio3' 
                                          name='radio1' type='radio' 
                                          value='blue'
                        BasicText: text= Blue
                        BasicHTMLBRElement: br
                        BasicHTMLInputElement: input: type='submit'

Resulting Java Class

We can generate the Java source code for this HTML page, again exactly as we did before. The command would be '$ENHYDRA/output/bin/xmlc -keep form.html', and should look pretty familiar by now (unless you skipped ahead ;^)


/*
 ************************************
 * XMLC GENERATED CODE, DO NOT EDIT *
 ************************************
 */
import org.w3c.dom.*;
import org.enhydra.xml.xmlc.XMLCUtil;
public class form extends org.enhydra.xml.xmlc.html.HTMLObject {
    private static Document protoDocument;
    org.w3c.dom.html.HTMLFormElement $elementform1;
    org.w3c.dom.html.HTMLInputElement $elementtextfield1;
    org.w3c.dom.html.HTMLInputElement $elementradio1;
    org.w3c.dom.html.HTMLInputElement $elementradio2;
    org.w3c.dom.html.HTMLInputElement $elementradio3;
    static private void initProtoDom() {
        Node $node0, $node1, $node2, $node3, $node4;
        Element $elem0, $elem1, $elem2, $elem3, $elem4;
        Attr $attr0, $attr1, $attr2, $attr3, $attr4;

        com.docuverse.dom.DOM $$dom = new com.docuverse.dom.DOM();
        com.docuverse.dom.html.HTMLFactory $$factory = new com.docuverse.dom.html.HTMLFactory();
        $$dom.setFactory($$factory);
        protoDocument = (Document)$$factory.createDocument($$dom, "HTML");
        
        $elem0 = protoDocument.createElement("html");
        protoDocument.appendChild($elem0);
        
        $elem1 = protoDocument.createElement("head");
        $elem0.appendChild($elem1);
        
        $elem2 = protoDocument.createElement("title");
        $elem1.appendChild($elem2);
        
        $node3 = protoDocument.createTextNode("An HTML Page with a Form");
        $elem2.appendChild($node3);
        
        $elem1 = protoDocument.createElement("body");
        $elem0.appendChild($elem1);
        
        $attr1 = protoDocument.createAttribute("text");
        $attr1.setValue("#000000");
        $elem1.setAttributeNode($attr1);
        
        $attr1 = protoDocument.createAttribute("bgcolor");
        $attr1.setValue("#FFFFFF");
        $elem1.setAttributeNode($attr1);
        
        $elem2 = protoDocument.createElement("h1");
        $elem1.appendChild($elem2);
        
        $node3 = protoDocument.createTextNode("An HTML Page with a Form");
        $elem2.appendChild($node3);
        
        $node2 = protoDocument.createTextNode("This page has a FORM on it:");
        $elem1.appendChild($node2);
        
        $elem2 = protoDocument.createElement("p");
        $elem1.appendChild($elem2);
        
        $elem3 = protoDocument.createElement("form");
        $elem2.appendChild($elem3);
        
        $attr3 = protoDocument.createAttribute("method");
        $attr3.setValue("get");
        $elem3.setAttributeNode($attr3);
        
        $attr3 = protoDocument.createAttribute("id");
        $attr3.setValue("form1");
        $elem3.setAttributeNode($attr3);
        
        $attr3 = protoDocument.createAttribute("action");
        $attr3.setValue("some_bogus_PO");
        $elem3.setAttributeNode($attr3);
        
        $node4 = protoDocument.createTextNode("What is your name? ");
        $elem3.appendChild($node4);
        
        $elem4 = protoDocument.createElement("input");
        $elem3.appendChild($elem4);
        
        $attr4 = protoDocument.createAttribute("name");
        $attr4.setValue("textfield1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("size");
        $attr4.setValue("30");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("id");
        $attr4.setValue("textfield1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("type");
        $attr4.setValue("text");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("value");
        $attr4.setValue("Enter your name here");
        $elem4.setAttributeNode($attr4);
        
        $elem4 = protoDocument.createElement("br");
        $elem3.appendChild($elem4);
        
        $node4 = protoDocument.createTextNode("What is your favorite color? ");
        $elem3.appendChild($node4);
        
        $elem4 = protoDocument.createElement("input");
        $elem3.appendChild($elem4);
        
        $attr4 = protoDocument.createAttribute("name");
        $attr4.setValue("radio1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("id");
        $attr4.setValue("radio1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("type");
        $attr4.setValue("radio");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("value");
        $attr4.setValue("red");
        $elem4.setAttributeNode($attr4);
        
        $node4 = protoDocument.createTextNode(" Red ");
        $elem3.appendChild($node4);
        
        $elem4 = protoDocument.createElement("input");
        $elem3.appendChild($elem4);
        
        $attr4 = protoDocument.createAttribute("name");
        $attr4.setValue("radio1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("id");
        $attr4.setValue("radio2");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("type");
        $attr4.setValue("radio");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("value");
        $attr4.setValue("green");
        $elem4.setAttributeNode($attr4);
        
        $node4 = protoDocument.createTextNode(" Green ");
        $elem3.appendChild($node4);
        
        $elem4 = protoDocument.createElement("input");
        $elem3.appendChild($elem4);
        
        $attr4 = protoDocument.createAttribute("name");
        $attr4.setValue("radio1");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("id");
        $attr4.setValue("radio3");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("type");
        $attr4.setValue("radio");
        $elem4.setAttributeNode($attr4);
        
        $attr4 = protoDocument.createAttribute("value");
        $attr4.setValue("blue");
        $elem4.setAttributeNode($attr4);
        
        $node4 = protoDocument.createTextNode(" Blue");
        $elem3.appendChild($node4);
        
        $elem4 = protoDocument.createElement("br");
        $elem3.appendChild($elem4);
        
        $elem4 = protoDocument.createElement("input");
        $elem3.appendChild($elem4);
        
        $attr4 = protoDocument.createAttribute("type");
        $attr4.setValue("submit");
        $elem4.setAttributeNode($attr4);
        
    }

    static {
        initProtoDom();
    }

    public form() {
        super(protoDocument);
        $elementform1 = (org.w3c.dom.html.HTMLFormElement)this.getElementById("form1");
        $elementtextfield1 = (org.w3c.dom.html.HTMLInputElement)this.getElementById("textfield1");
        $elementradio1 = (org.w3c.dom.html.HTMLInputElement)this.getElementById("radio1");
        $elementradio2 = (org.w3c.dom.html.HTMLInputElement)this.getElementById("radio2");
        $elementradio3 = (org.w3c.dom.html.HTMLInputElement)this.getElementById("radio3");
    }

    /**
     * Get the value of element form1.
     * @see org.w3c.dom.html.HTMLFormElement
     */
    public org.w3c.dom.html.HTMLFormElement getElementForm1() {
        return $elementform1;
    }
    
    /**
     * Get the value of element textfield1.
     * @see org.w3c.dom.html.HTMLInputElement
     */
    public org.w3c.dom.html.HTMLInputElement getElementTextfield1() {
        return $elementtextfield1;
    }
    
    /**
     * Get the value of element radio1.
     * @see org.w3c.dom.html.HTMLInputElement
     */
    public org.w3c.dom.html.HTMLInputElement getElementRadio1() {
        return $elementradio1;
    }
    
    /**
     * Get the value of element radio2.
     * @see org.w3c.dom.html.HTMLInputElement
     */
    public org.w3c.dom.html.HTMLInputElement getElementRadio2() {
        return $elementradio2;
    }
    
    /**
     * Get the value of element radio3.
     * @see org.w3c.dom.html.HTMLInputElement
     */
    public org.w3c.dom.html.HTMLInputElement getElementRadio3() {
        return $elementradio3;
    }
    

}

Usage from a Manipulation Java Class

As you can see, we have been given getElement* methods for the <FORM>, the textfield and the three radio buttons. The getElement* methods for the input elements (such as the textfield and the radio buttons) return an HTMLInputElement object. The getElement* method for the <FORM> returns an HTMLFormElement object. Now we can go look in the W3C DOM Javadoc to find out what methods we have that allow us to operate on these elements!

If you look closely at the <FORM> tag in the original HTML page, you will notice that we did not properly define an ACTION attribute for it. One of the things that we can do is to use the generated Java class above to change the value of that attribute at runtime.

We will also change the size of the textfield to 40 characters (it was set to 30 in the original HTML) and set the radio button for the Blue color to be checked by default.

The Java manipulation class that does these things looks like this:


import org.w3c.dom.html.*;
public class form_creator {

    public static void main (String[] args) {

        // Create an instance of the HTML page object.
        form form = new form();

        // Get a reference to the form and change the ACTION.
        HTMLFormElement ourForm = form.getElementForm1();
        ourForm.setAction("http://cgi.plugged.net.au/servlets/script.po");

        // Change the textfield size.
        HTMLInputElement ourTextfield = form.getElementTextfield1();
        ourTextfield.setSize("40");

        // Set the color Blue as the default color.
        HTMLInputElement ourBlueRadio = form.getElementRadio3();
        ourBlueRadio.setDefaultChecked(true);

        // Print out the results.
        System.out.print( form.toString() );

    }

}

Resulting HTML

The HTML page that results from our changes is shown below. The parts that we dynamically generated are shown in red.

As before, we generated the HTML like this:


$ javac form_creator.java
$ java form_creator


<html>
<head>
    <title>An HTML Page with a Form</title>
</head>

<body text='#000000' bgcolor='#FFFFFF'>

<h1>An HTML Page with a Form</h1>

This page has a FORM on it:

<p>

<form method='get' id='form1' action='http://cgi.plugged.net.au/servlets/script.po'>
    What is your name? 
    <input name='textfield1' size='40' id='textfield1' type='text' value='Enter your name here'></input>

    <br>

    What is your favorite color? 

    <input name='radio1' id='radio1' type='radio' value='red'></input> Red 
    <input name='radio1' id='radio2' type='radio' value='green'></input> Green 
    <input name='radio1' id='radio3' type='radio' value='blue' checked='checked'></input> Blue
    <br>
    <input type='submit'></input>
</form>

</p>
</body>
</html>