1. Java Code

The core class is the Table class, which implements the dynamic table without making any reference to a particular user agent (such as a web client). This way, it is possible to run and test the class on the server before deploying it to other user agents.

Next, write a facade through which the user agent interacts with the table. This facade will only contain static methods. We already learned how to register event handlers. This will happen in the onLoad() method.

    /**
     * Attach click-event handlers to buttons.
     */
    public static void onLoad() {
        
        EventListener listener = new EventListener() {
            public void handleEvent(Event evt) {
                HTMLElement target = (HTMLElement) evt.getTarget();
                String id = target.getId();
                if (id.equals("create")) create();
                else if (id.equals("addRow")) addRow();
                else if (id.equals("fetch")) fetch();
                else if (id.equals("removeSelection")) removeSelection();
                else if (id.equals("clear")) clear();
                else throw new RuntimeException("Illegal action: " + id);
            }
        };
        
        String[] ids = new String[] {"create", "fetch", "addRow", "removeSelection", "clear"};
        for (int i=0; i<ids.length; i++) {
            Element elem = Global.document.getElementById(ids[i]);
            ((EventTarget) elem).addEventListener("click", listener, false);
        }
    }

Extracted from /projects/j2js-Demos/src/java/j2js/demo/table/TableDemo.java

In the create() method, the table is instantiated.

    /**
     * Creates the table with headers.
     */
    public static void create() {
        if (table != null) {
            throw new RuntimeException("Table already created");
        }
        table = new Table(Global.document, "MyDiv");
        ArrayList<String> headers = new ArrayList<String>();
        headers.add("Name");
        headers.add("Address");
        table.setHeaders(headers);
    }

Extracted from /projects/j2js-Demos/src/java/j2js/demo/table/TableDemo.java

The table is attached at to the div-element with id MyDiv, see the Table(org.w3c.dom.Document, java.lang.String) constructor. Now implement fetching from the server using AJAX.

    /**
     * Fetches some rows from the server.
     */
    public static void fetch() {
        checkCreated();
        HttpRequest request;
        String method;
        HTMLSelectElement select =
            (HTMLSelectElement) Global.document.getElementById("HttpRequestType");
        if (select.getSelectedIndex() == 0) {
            request = XMLHttpRequest.getSingleton();
            method = "POST";
        } else if (select.getSelectedIndex() == 1) {
            request = FormHttpRequest.getSingleton();
            method = "POST";
        } else {
            request = ScriptHttpRequest.getSingleton();
            method = "GET";
        }
        
        request.open(method, "fetchTable.php", true);
        request.setReadyStateChangeListener(table);
        
        request.send(null);
    }

Extracted from /projects/j2js-Demos/src/java/j2js/demo/table/TableDemo.java

Note that the table was registered as the listener for readyState changes.

2. HTML Code

The HTML-code must contain the referenced buttons

      <button id="create" title="Create a table">Create</button>
      <button id="fetch" title="Fetch some rows from the server">Fetch</button>

Extracted from /projects/j2js-Demos/src/site/table/TableDemo.html

and the div-element:

    <div id="MyDiv"></div>

Extracted from /projects/j2js-Demos/src/site/table/TableDemo.html

3. Create assembly

Create the assembly with the TableDemo target in build.xml.