Entering content frameProcedure documentation Creating Page before.htm Locate the document in its SAP Library structure

Use

On this page, implement the output using HTMBL.

Prerequisites

You have created a BSP application (see also Structure linkCreating BSP Applications). In our example, this has the name BSP_TUT_COMPLEX.

Procedure

  1. In your BSP application, create page before.htm as a page with flow logic
    (see also     Structure linkCreating Pages).
  2. Define three page attributes for the three input fields:
    3.

    Attribute

    Auto

    Typing Type

    Reference Type

    name

    x

    TYPE

    STRING

    password

    x

    TYPE

    STRING

    email

    x

    TYPE

    STRING

  3. Create the page layout with HTMBL elements:

    4. <%@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>

  4. 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 to code the simple three input fields. Also, because of the <htmlb:gridLayout> element, you cannot always immediately recognize at a glance the coding structure. 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 counters for rows and columns. 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.

It is therefore recommended that you design a BSP extension library that also contains inherent information (that is, hard-coded elements) for the layout of a specific BSP application or a group of BSP applications. Ideally, the individual BSP extensions in this library will be "slim" 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.

 

 

Leaving content frame