Creating before.htm Pages (SAP Library

Creating before.htm Pages

Use

On this page, you implement the output using HTMBL.

Prerequisites

You have created a BSP application (see Creating BSP Applications). In our example, this is called BSP_TUT_COMPLEX.

Procedure

In your BSP application, create the before.htm page as a page with flow logic
(see Creating Pages).

...

1. Define three page attributes for the three input fields:

Attribute	Auto	Typing Type	Reference Type
name	x	TYPE	STRING
password	x	TYPE	STRING
email	x	TYPE	STRING

2. Create the page layout with HTMBL elements:

<%@page language="abap"%>

<%@extension name = "HTMLB" prefix = "htmlb" %>

<htmlb:content>
  <htmlb:page>
    <htmlb:form>
        <htmlb:gridLayout cellSpacing = "2"
                          cellPadding = "0"
                          width       = "100%"
                          rowSize     = "3"
                          columnSize  = "2">
          <%-- name --%>
          <htmlb:gridLayoutCell columnIndex     = "1"
                          rowIndex        = "1" >
            <htmlb:label        id              = "name_label"
                          text            = "Name:"
                          for             = "name" />
          </htmlb:gridLayoutCell>
          <htmlb:gridLayoutCell columnIndex     = "2"
                          rowIndex        = "1">
            <htmlb:inputField   id              = "name"
                          value           = "<%=name%>"/>
          </htmlb:gridLayoutCell>
          <%-- password --%>
          <htmlb:gridLayoutCell columnIndex     = "1"
                          rowIndex        = "2" >
            <htmlb:label        id              = "password_label"
                          text            = "Password:"
                          for             = "password" />
          </htmlb:gridLayoutCell>
          <htmlb:gridLayoutCell columnIndex     = "2"
                          rowIndex        = "2">
            <htmlb:inputField   id              = "password"
                          value           = "<%=password%>"
                          password        = "TRUE" />
          </htmlb:gridLayoutCell>
          <%-- email --%>
            <htmlb:gridLayoutCell columnIndex     = "1"
                          rowIndex        = "3" >
              <htmlb:label        id              = "email_label"
                          text            = "Email:"
                          for             = "email" />
            </htmlb:gridLayoutCell>
            <htmlb:gridLayoutCell columnIndex     = "2"
                          rowIndex        = "3">
              <htmlb:inputField   id              = "email"
                          value           = "<%=email%>" />
            </htmlb:gridLayoutCell>
          </htmlb:gridLayout>
    </htmlb:form>
  </htmlb:page>
</htmlb:content>

3. Save and activate your page and the BSP application.

Result

The generated output is as follows:

This graphic is explained in the accompanying text

Analysis

You need more than 40 lines coding just to code these basic input fields. Also, because of the <htmlb:gridLayout> element, you cannot always recognize the coding structure immediately. This element is not absolutely necessary for our example, although it makes sense to use it with more complex layouts.

For these flow-type layouts, most attributes can now be calculated automatically, especially row and column counters. It is exactly the same when you connect <htmlb:label> to <htmlb:inputField>. Many of the attributes can also be hard-coded in a set of wrapper elements.

You are therefore advised to design a BSP extension library that also contains inherent information (that is, hard-coded elements) for the layout of a specific BSP application or group of BSP applications. Ideally, the individual BSP extensions in this library will be “slim-line” and easy to create. These can be used to create “toolboxes” that encapsulate the appearance and the whole layout centrally. As a result, you can also make changes to the whole application very quickly.

You can do all this using the Design Solution.