Generating the HTML Content

With the data for the photograph widget retrieved, it must now be marked up with the required HTML.

Figure 1. Marking Up the Photograph Data

Document doc = fragment.getOwnerDocument();

    Element rootDiv = doc.createElement("div");
    rootDiv.setAttribute("class", "photo-container");
    fragment.appendChild(rootDiv);

    Element linkDiv = doc.createElement("div");
    linkDiv.setAttribute("class", "details-link");
    rootDiv.appendChild(linkDiv);

    Element anchor = doc.createElement("a");
    anchor.setAttribute("href", "Person_homePage.do?"
                                + "id=" + personID);
    linkDiv.appendChild(anchor);

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

    Element photoDiv = doc.createElement("div");
    photoDiv.setAttribute("class", "photo");
    rootDiv.appendChild(photoDiv);

    Element photo = doc.createElement("img");
    photo.setAttribute("src",
      "../servlet/FileDownload?"
      + "pageID=Sample_photo"
      + "&id=" + personID);
    photoDiv.appendChild(photo);

    Element descDiv = doc.createElement("div");
    descDiv.setAttribute("class", "description");
    descDiv.appendChild(doc.createTextNode(personName));
    rootDiv.appendChild(descDiv);

The same techniques used to construct the e-mail address widget using the DOM API in the previous chapter, also apply here. The URI used to link to the details page, a static image and the FileDownload servlet are described below.