Example: Using Extensions in BSP Pages

Use

The following example shows the realization of a simple Web user interface for a BSP application using the HTMLB library HTMLB. This library is available in each SAP Web Application Server System and can be imported within the workbench from the Tag Browser into any BSP page.

This example contains a label, input, and pushbutton element - in addition to the content, page, and form elements - for simple selection of flight data. The flight data is displayed using a TableView element.

<%@page language="abap"%>
<%@ extension name="htmlb" prefix="ui" %>
<ui:content>
  <ui:page> 
    <ui:form>
      <ui:label    
             id    = "myLabel"
            for    = "carrier"
           text    = "Airline"
         design    = "LABEL"
          width    = "65" />

      <ui:inputField
             id    = "carrier"
           type    = "String"
          value    = "<%=carrier%>"
           size    = "3"
         design    = "standard" />

      <ui:button
             id    = "myButton"
           text    = "Find Flights"
        onClick    = "FIND"
         design    = "STANDARD" />

<br><br>

      <ui:tableView
             id    = "myTable"
          table    = "<%=flights%>"
  headerVisible    = "true"
  footerVisible    = "true"
fillUpEmptyRows    = "true"
selectionMode      = "MULTISELECT"
         design    = "ALTERNATING" />

    </ui:form>
  </ui:page>
</ui:content>

Note

Note on the prefix:

The BSP extension HTMLB is imported into the BSP page through the extension directive (2nd line). A prefix serves as a unique identification of this extension within the page. This directive is automatically crated after you have inserted the first BSP element for the page. In the standard version, the default prefix is taken. However, you can rename the prefix by overwriting the corresponding value in the extension directive (in our example: ui).