Generating the HTML Content

With the e-mail address retrieved, it must now be marked up with the required HTML. The DOM API, while a little verbose, makes this process easy and reduces the chances of producing invalid output. The use of the DOM API means that opening and closing tags for the elements will be created as needed and the attribute values and body content will be escaped automatically.

All content created using the DOM API must be created in the context of the owning DOM Document. Each node has a property that identifies this Document object, so it can be retrieved from the document fragment. Elements and other nodes can be created using the factory methods of the Document object. The nodes can be appended to each other, and ultimately to the provided document fragment, to create the correct HTML structure. This is shown below (see Source Code for the E-Mail Address Widget for the complete source code of this renderer).

Document doc = fragment.getOwnerDocument();

    Element span = doc.createElement("span");
    span.setAttribute("class", "email-container");
    fragment.appendChild(span);

    Element anchor = doc.createElement("a");
    anchor.setAttribute("href", "mailto:" + emailAddress);
    span.appendChild(anchor);

    Element img = doc.createElement("img");
    img.setAttribute("src", "../Images/email_icon.png");
    anchor.appendChild(img);

    anchor.appendChild(doc.createTextNode(emailAddress));

The first line gets the owner document that is used throughout the rest of the method to create new nodes. The span element is then created and added to the document fragment. The other elements and nodes are created and added in turn. When the render method returns, the system takes the newly populated document fragment and incorporates its contents into the HTML page in the appropriate location.

The URI of Cúram application pages includes the locale code as the first part of the resource path, for example, en/Person_homePage.do. This path is relative to the application's context root, which corresponds to the WebContent folder in the development environment. When icons or other resources are referenced, the ../ path prefix is needed for relative URIs so move from the locale-specific folder in the page's URI, back to the context root folder. More details about the inclusion of custom image resources can be found in the Cúram Web Client Reference Manual.