With the data for the photograph widget retrieved, it must now be marked up with the required HTML.
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.