Creating before.htm Pages

Prerequisites

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

Context

On this page, you implement the output using HTMLB.

Procedure

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

Define three page attributes for the three input fields:

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

Create the page layout with HTMLB 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>

Save and activate your page and the BSP application. Result

Results

Example

The generated output is as follows:

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.