The Sample Widgets

The first sample widget is a context panel providing details about a person shown in The Sample Widgets. The widget has two parts: the first part presents a photograph of the person above their name, an icon provides a hyperlink from the photograph to the home page of that person; the second part displays details about that person using text with elaborate styling and icons. This development of this context panel will show how these two parts can be created and used independently and how they can also be combined together into a single widget. In the cases of both of these parts, the content and layout requirements cannot be met using ordinary UIM pages.

1. Photograph
2. Icon Links to Person's Home Page
3. Name
4. Name
5. ID
6. Address
7. Gender
8. Date Of Birth
9. Telephone Number
10. Email

The photograph widget will introduce XML-based data sources and the use of the FileDownload servlet to deliver images to the web browser. The details widget will, at first, demonstrate a more complex example of a widget backed by XML data. Later, the details widget will be used to show how the e-mail address widget developed in An E-Mail Address Widget can be reused through delegation to present the e-mail address value, how text can be localized and how locale-specific formatting can be applied to the date of birth value.

The second sample widget, a person list widget shown in The Sample Widgets, is another context panel widget. This widget displays a list of people using their photographs and, when each photograph is clicked, some details about that person are shown in a pop-up box. The photograph widget and details widget developed for the first sample are reused to create this new context panel widget. This time, however, the person's name is presented in a different way in the details panel and their ID number is omitted. This kind of reuse is more complex than the reuse of a simple e-mail address renderer.

1. Photograph
2. Icon Links to Person's Home Page
3. Name
4. Name
5. Address
6. Gender
7. Date Of Birth
8. Telephone Number
9. Email

There are two fundamentally different ways to access data: as single values and as lists of values. The person list widget must handle a list of values that stored in an XML document. Widgets that are developed to handle a single value can, with a little care, be reused in the context of widgets that present lists of values. The reuse of the photograph and details widgets in a list context will demonstrate further complex rendering techniques.