Person Context Panel Widget

The role of the "Person Context Panel Widget" is to build the component model and delegate to the "Horizontal Layout Widget" to render the HTML from the model. The component model is a collection of Field 's. As described in the previous section, the render method of the "Horizontal Layout Widget" expects a Component as it's first parameter. The out-of-the-box Cúram application provides a subclass of Component called Container, which is specifically for creating collections of Component 's or Field 's.

Figure 1. Building the component model and invoking the "Horizontal Layout Widget"

ContainerBuilder cb
      = ComponentBuilderFactory.createContainerBuilder();
    cb.setStyle(context.getStyle("horizontal-layout"));

    FieldBuilder fb
      = ComponentBuilderFactory.createFieldBuilder();
    fb.copy(component);
    fb.setDomain(context.getDomain("SAMPLE_PHOTO_XML"));
    fb.setSourcePath(
      component.getBinding().getSourcePath()
               .extendPath("person"));
    cb.add(fb.getComponent());

    fb.setDomain(context.getDomain("SAMPLE_DTLS_XML"));
    fb.setSourcePath(
      component.getBinding().getSourcePath()
               .extendPath("person"));

    cb.add(fb.getComponent());
    DocumentFragment content
      = fragment.getOwnerDocument().createDocumentFragment();
    context.render(cb.getComponent(), content,
                   contract.createSubcontract());
    fragment.appendChild(content);

The steps to build the model and invoke the "Horizontal Layout Widget" are:

Create a Container component.
A ContainerBuilder is required to create a Container. The ComponentBuilderFactory can be used to create a ContainerBuilder as shown above. See Overview of the Renderer Component Model for full details.
Set the "style" of the Container.
The "Horizontal Layout Widget" is a component renderer which is associated with a "style". The "Horizontal Layout Widget" has been associated with the horizontal-layout style. This must be set using the setStyle method as shown above. The style corresponds to a particular renderer implementation class. Configuration of this "style" is described later in this chapter and more detail on the component model and configuring renderers can be found in the appendices (note it is not a CSS style that is being referred).
Create a Field representing the photograph and add it to the container.
As shown in the previous chapter, a Field is created using a FieldBuilder. Setting the domain definition to SAMPLE_PHOTO_XML ensures the photograph widget will be invoked. The next step is to set it's source path. The photograph XML is now embedded in an XML document with a root element called person which is supplied to the "Person Context Panel Widget". A Photograph Widget showed how data for the photo widget was accessed in the XML document using paths such as photo/name. The full path to get the same data is now /person/photo/name. The photograph widget cannot be changed. Instead the source path is extended as shown above to account for the root person element. When the photograph widget executes, the paths will be combined to ensure the full path corresponding to the combined document is used. The Field is created using the getComponent method and added to the Container
Create a Field representing the person details and add it to the container.
In the same way as the previous point, a Field is created. Its domain definition is set to SAMPLE_DTLS_XML to associate it with the details widget. The source path is extended in the same to account for the root person element. The Field is created using the getComponent method and added to the Container.
Create a DocumentFragment for the widget content
As shown in previous chapters, he DOM API has been used to create HTML elements and add them to a DocumentFragment, supplied as the fragment parameter to the render method. The DocumentFragment is usually supplied by the Cúram infrastructure. In this case the fragment has to be created using the createDocumentFragment as shown above.
Invoke the horizontal layout widget
The e-mail address widget is invoked by calling context.render. The first parameter to the method is a Field. The FieldBuilder was used to set the domain and source path and the Field is retrieved by calling the getComponent method. The second parameter is the DocumentFragment created earlier. The widget will add it's HTML content to this fragment. The final parameter is reserved and should always be set to contract.createSubcontract().
Append HTML generated from horizontal layout widget
After the e-mail address widget has been invoked, the DocumentFragment will contain its HTML content. This fragment can be added to the appropriate place in the details widget. In the HTML described earlier the HTML should be added as a child of the div element with the contact-info CSS class.

The next section shows how the "Horizontal Layout Widget" renders the component model has HTML.