Defining the HTML

As shown by the screen-shot, the photograph widget displays a link, a photograph and the person's name one under the other. It is recommended that all widgets have a single root node with a specific CSS class. This makes the "boundaries" of the widget obvious. It is also the basis of making associated CSS rules as specific as possible to this widget. The "root" class is then used when when defining CSS rules for all content within the widget. In this case, the root div element has been given the photo-container class name. There are three child div elements containing the link, the photo and the person name. Each of these has also been given a CSS class so that their contents can be individually styled. The img elements show how both a static and a dynamic image resource can be accessed. The dynamic image resource uses the Cúram FileDownload servlet. The use of this feature and the value of the img element's src attribute will be described in this chapter.

Figure 1. HTML Output of the Photo Widget

<div class="photo-container">
  <div class="details-link">
    <a href="Person_homePage.do?id=101>
      <img src="../Images/details-link-icon.png">
    </a>
  </div>
  <div class="photo">
    <img src="../servlet/FileDownload?
              pageID=Sample_photo&id=101">
  </div>
  <div class="description">
    James Smith
  </div>
</div>

The HTML above is formatted for clarity, but it will be generated without any indentation or line breaks, as these are not necessary for the browser to present the e-mail address properly and only increase the size of the page.

Based on the screen-shot, the visual requirements of the widget can be summarized as:

The widget has a border.
The link is right-aligned in the widget.
The photograph and person name are center-aligned in the widget.

The class names applied in the HTML allow these requirements to be implemented in CSS as follows:

Figure 2. Custom CSS for the Photo Widget

.photo-container {
  border: 1px solid #DADADA;
  width: 90px;
  height: 130px;
}

.photo-container .details-link {
  text-align: right;
}

.photo-container .photo {
  text-align: center;
}

.photo-container .description {
  text-align: center;
  font-weight: bold;
}

The class name of the root div element is used when defining all CSS rules to ensure they are specific to this widget. The photo-container class applies a border and fixed width to the widget. The fixed width means an image with a max size of 88 pixels can be accommodated, allowing for the border. If the image width is less than this maximum value, ensure it is an even number. Since the image is centrally aligned this ensures there is even spacing on each side of the image. The remaining CSS classes make use of the text-align CSS style to align the contents within each child div element. This is possible because the contents of each div element are "inline" elements i.e. an anchor element, an image element and plain text. Finally, there is an additional style on the description element to set it's font.