Showing content in a view

The WRTKit has two controls for showing content inside a view. The first of the controls is called Label and is useful for simple and short information to be displayed, coupled with the control caption that describes the information.

Figure 1. Label control

The second control is called ContentPanel and is more sophisticated than the Label control. ContentPanel controls can be created as foldable, which means that they can expand and collapse their content areas. Users can toggle the expanded and collapsed state by clicking on the caption area of the ContentPanel.

Figure 2. Foldable content panel

The code below creates a Label control and a foldable ContentPanel control and adds them to a view. The code assumes that a view has already been created and that a variable called exampleView refers to it.


// create label
var nameLabel = new Label("label1", "Name");
exampleView.addControl(nameLabel);

// create foldable content panel
var infoPanel = new ContentPanel("info1", "Information", null, true);
exampleView.addControl(infoPanel);

The first and second arguments are the same in the constructors for both controls. The first is a unique identifier for the control and the second is the control caption. The third argument is also the same but is omitted for the label and null for the content panel since in both cases we don't specify any content at this point. The fourth argument for the content panel is a boolean that specifies whether the control should be foldable or not.

The value for a label can be set and retrieved using the getText() and setText() methods. For content panels the content in the content area can be set and retrieved using getContent() and setContent(). The content is defined as an XHTML fragment and can contain arbitrarily complex XHTML, including images or even JavaScript.


// set the text for the label
nameLabel.setText("John Smith");

// set content for the content panel
infoPanel.setContent("<b>This is bolded!</b><br/>This is plain text on the second line.");

Foldable ContentPanel controls can be programmatically collapsed or expanded using the setExpanded() method. The expanded state can be retrieved using the isExpanded() method.


// retrieve the expanded state
var expanded = infoPanel.isExpanded();

// collapse the content panel
infoPanel.setExpanded(false);