XMLCチュートリアル: フォーム(Form)の扱い

内容

<FORM> 要素とXMLCの利用法
サンプルHTMLページ
構成されたDocument Object Model (DOM)
生成されるJavaクラス
マニピュレーション(Manipulation)Javaクラスからの利用法
生成されるHTML

<FORM> 要素とXMLCの利用法

XMLCで<FORM>要素を含む複雑なHTMLページを扱うのは簡単です。この章では、その方法を説明します。一般的に、FORM要素は他のHTMLタグと同様に扱われます。(id属性が加えられてgetElement*メソッドが生成され、Javaマニピュレーションクラスはそれらのメソッドをタグまたは属性の変更の為に呼び出す事が出来ます。) この事の全体については、最終章で説明しています。

この章では、フォーム(form)の例を示して、生成(generate)されたgetElement*メソッドから返されるHTMLElementオブジェクトから、どの様にして目的のオブジェクトを取り出し利用するのかを説明します。

最初に、XMLCが使うSwing HTMLパーサーには、バグがある事に注意しておいてください。
いくつかのケースにおいて、<FORM>の内部でのHTMLパラグラフ(paragraph;<P>)タグの使用は、ページを不適切に解析(parse)する場合があるというバグレポートが提出されましたが、<FORM>タグの中のパラグラフ(paragraph;<P>)タグを次の様なHTMLを使って置き換える事により、暫定的な回避をする事が出来ます。： <BR>&nbsp<BR>

サンプルHTMLページ

単純なフォーム(form)を持ったHTMLページを以下に示します。そのページは、ヘッダーと、テキスト領域、そしてラジオ(radio)ボタンを持っています。 id属性は、変更を行える様にしたい部分に割り当てる事を注意してください。例えば、<FORM>タグの中のテキスト領域とラジオボタンです。これらの追加は、赤色で示します。

ラジオボタンを使用する時は、難解です。普通は、id属性とname属性に同じ値を割り当てます。（訳注：異なっていても構わないが便宜上同じ値を割り当てるという事）
XMLCは、個々のラジオボタンを操作可能にするそれぞれのJavaコードを生成しますが、それらのid属性はユニークに名前付けされていなければなりません。従って、ラジオボタンは全て"radio1"と名づけられていますが、id属性は、"radio1", "radio2" と "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>

構成されたDocument Object Model (DOM)

上記HTMLの為のDOMは、前の例の中にあった様にコマンド'$ENHYDRA/output/bin/xmlc -dump form.html'の実行によって生成(generate)されます。
生成結果は、次の様になります。：

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'

生成された Java クラス

以前行ったように、このHTMLページの為のJavaソースコードを生成できます。そのコマンドは、'$ENHYDRA/output/bin/xmlc -keep form.html' です。今回は少しだけ気楽に見えることが出来ると思います（前に戻ることなく;^)

/*
 ************************************
 * XMLC GENERATED CODE, DO NOT EDIT *
 ************************************
 */
import org.w3c.dom.*;
import com.lutris.xml.xmlc.XMLCUtil;
public class form extends com.lutris.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;
    }
    

}

マニピュレーションJavaクラスの使い方

オリジナルのHTMLページの中の<FORM>タグを注意深く見ると、適切にACTION属性を定義しなかった事に気が付くと思います。実行時に属性の値を変更する事が出来るメソッドが上記のクラスの中にあります。

では、（オリジナルのHTMLでは30文字に設定されている）テキストフィールドのサイズを４０文字に変更し、青色を初期値とする為にラジオボタンを設定して見ましょう。

それを行うJavaマニピュレーションクラスは次の様になります：

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() );

    }

}

生成されるHTML

部分動的に生成された部分は赤色になっています。

次のコマンドで以前も同様にHTMLを発生させました:

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