XHTMLB Specification

HTMLB Components Declaration

Every node in XHTMLB is equivalent to an HTMLB component. Every attribute of an XHTMLB element is equivalent to a call of a set method, where the name of the attribute is the name of the method and the attribute value is the method parameter.

The text in the XML node is added to the component by using the method setText() or setValue() . If the current component is an HTMLB container, the method addText will be called. The last text node is used as the value.

Example of an XHTMLB node:

The following statement will create an HTMLB button component with the text My button and with the value MyEventValue that will be sent when clicking on the button (OnClick event).

<Button id="testButton" OnClick="MyEventValue">My button</Button>

Example for multiple text nodes:

               <TextView Wrapping="true">  
 This text will be overwritten 
    <parameter 
        name="Design" 
        value="LABEL" 
        class="enum.TextViewDesign" /> 
     This text will appear in the TextView component 
</TextView>

Parameters Declaration

Declaring parameters has the following reasons:

Calling a method on the current component that has a static input field value.
Adding key/value pair to the current component (when needed).

To call a method that requests a static value from a class (like enumerated values), add the element named parameter with the following attributes:

Name

The name of the method without the "set" or "add" prefix.
class

The name of the class.
package

The name of the package (default package name is com.sapportals.htmlb )
value

The name of the static member that will be inserted to the method.

Example for calling a method with a static field of a class as a value:

The following example generates an HTMLB TextView component. The method setDesign() will be called with com.sapportals.htmlb.enumTextViewDesign.LABEL class as parameter. The method setLayout() will be called with com.sapportals.htmlb.enumTextViewLayout.BLOCK class as parameter.

               <TextView 
    Wrapping="true">
    <parameter 
        name="Design" 
        value="LABEL" 
        class="enum.TextViewDesign" />
    <parameter 
        name="Layout" 
        value="BLOCK" 
        class="enum.TextViewLayout" /> 
     Some text with label design and block layout 
</TextView>

Example for calling a method with a key/value parameter:

The key/value pair parameter is used for HTMLB components that have a slection list, like ListBox, DropDownListBox, ToolbarDropDownListBox and BreadCrumb.

               <DropdownListBox id="Dropdown1" 
    width="120" text="Dropdown">
    <parameter 
        key="Item1" 
        value="Value one"/>
    <parameter 
        key="Item2" 
        value="Value two"/>
</DropdownListBox>

HTML Tags

HTML tags will be added to the current HTMLB container. HTMLB components cannot be placed in HTML tags; once an HTML tag is defined all its children will be HTML elements as well.

Example:

In this example the HTML span tag and its children will be added to the HTMLB Group container.

               <Group>
    <ButtonRow>
        <Button 
            id="tst7" 
            width="100">Test1</Button>
        <Button 
            id="tst8" 
            width="100">Test2</Button>
    </ButtonRow>
    <span>
        <a 
            href="http://www.cnn.com">HTML Link</a>
    </span>
</Group>

Creating XHTMLB Tables

XHTMLB table are created by using a TableView element with a JCOTableViewModel or DefaultTableViewModel. The models can have TableColumn elements and TableRow elements. TableRow elements are no HTMLB components and can have TableCell elements which are also no HTMLB components.

Example:

               TableView ...> 
 <JCOTableViewModel ...> 
  <TableColumn index="0" name="FirstRow" ...> 
  </TableColumn> 
  <TableColumn index="1" name="SecondRow" ...> 
  </TableColumn>     
  <TableRow ...>      
   <TableCell>Row one col one</TableCell> 
   <TableCell>Row one col two</TableCell> 
  </TableRow> 
  <TableRow> 
   <TableCell>Row two col ones</TableCell> 
   <TableCell>Row two col two</TableCell>  
  </TableRow>     
  <TableRow> 
  </TableRow> 
  ... 
 </JCOTableViewModel> 
</TableView>

TableView Element

The TableView element can have all the set methods (XHTMLB attributes and parameter elements) like any other HTMLB element except the following:

setModel

It is used to insert the TableViewModel by parameter. When the model attribute is set for a TableView element, the value must point to a parameter inserted to the XHTMLB transformer with an object inherited from TableViewModel.
CellRenderer

XHTMLB supports self defined cell renderers. The cell render object must inherit from com.sap.portal.transformationservice.xhtmlb.IXHTMLBCellRenderer . If no cell renderer is defined, the data will be treated as raw data. The definition can be done by adding a parameter element to the TableView element with the class definition in the class and package attribute or with the name of the external property in the value attribute. Only one cell renderer can be defined for a table, the last one specified will be used. To use a self defined renderer the cell must have the attribute useRenderer="true" .

Example:
```
                     <TableView id="TestTable" width="400"> 
 <parameter name="CellRenderer"  
    package="com.sap.portal.httpconnectivity.transformationservice"
    class="xhtmlb.DefaultXHTMLBCellRenderer" /> 
 … 
 <TableRow selectRow="true"> 
  <TableCell>http://www.cnn.com</TableCell> 
  <TableCell useRenderer="true"> 
    <![CDATA[<div style="font-size:x-small"> 
        <a href="http://www.google.com">google</a> 
        </div>]]> 
     </TableCell> 
   </TableRow> 
</TableView> 

                  
```
Row specific methods must be defined in the TableRow element.
Cell specified methods must be defined in the TableCell element. The cell methods get the row index, cell index and a value to set.

JCOTableViewModer/DefaultTableViewModel Elements

A model can have no attributes and parameters.

TableColumn Element

Supports all the set methods of the HTMLB TableColumn component. Every table column must have an index (starting from 0) and a name. A TableColumn element has no child elements.

TableRow Element

The TableRow element has no corresponding HTMLB component. It is used to wrap the content of a table row. It can receive all the methods related to rows. Row methods are:

selectRow
setOnRowSelection
setRowSelectable
setRowVAlignment.

TableCell Element

The TableCell element has no corresponding HTMLB component. It holds the actual data of the cell and has all "set" methods attributes of the TableView component that refers to cells. These methods take row index, column index and value to set. Cell methods are:

setCellDisabled
setCellHAlignment
setCellInvalid
setCellType
setCellVAlignment
setColspanForCell
setRowspanForCell
setStyleForCell.

Table Toolbar

The Table Toolbar element must be declared before the starting the declaration of the TableView. The connection is done by assigning the Id to the toolbar element and adding the attribute toolbar="<toolbar element ID>" to the TableView element.

TableView Limitations:

Following limitations apply to the TableView:

Cells cannot have child elements. As a result, no HTMLB component can be a child of a table cell.
All the table columns must be defined before the table rows.
Sorting of columns is not supported by default.

Examples

XHTMLB GridLayout Example .

XHTMLB TableView Example .

XHTMLB Differences to HTMLB Components

Following components have a different behaviour:

GridLayoutCell

All elements must have row and column attribute with an integer value starting at 1. See the XHTMLB GridLayout Example for more details.
Group

To define a group child element as header component, add the attribute isHeaderComponent = "true" to the child element.
ItemList

Each component in the list can set its bullet image URL by adding the attribute bulletURI="<bullet URL>" and set the bullet style by adding the attribute style="<style parameters" .
TableView

TableView and its related components are defined completely different than in HTMLB. Refer to the XHTMLB TableView Example for more details.
TabStripItem

To set a TabStripItem child element as header component, add the attribute isHeader="true" to the child element. Other child elements will be inserted to the body of the TabStripItem by the order they are specified.

Not Supported HTMLB Components

Following HTMLB components are not supported:

MenuBar
MenuItem
Chart
FormLayout
DragSource
DropTarget
EventValidationComponent
EventValidationContainer
JavaScriptFragment
PopupTrigger
RoadMap
RoadMapItem