Defining the Layout for the First Page (SAP Library

Defining the Layout for the First Page

Use

The layout for your first page should contain the following:

Background color, title and a few pictures.
A description of this example application including information about what users can do in this BSP application.
Input fields in which users can enter the first and last names of authors.
A button that leads to the book list of the author entered by the user.
A button that leads to the list of all the authors.

You can realize (almost) all of these layout components using BSP extension HTMLB.

Note

You can find detailed information about BSP extensions in the reference documentation in BSP Extensions. The individual elements of BSP extension HTMLB are defined in the development system with detailed Online help.

Procedure

Select the Layout tab page for your default.htm first page.

Define the layout:

<%@page language="abap" %>

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

<htmlb:content>

  <htmlb:page title="my Title" >

    <table width="100%" height="100%" cellspacing="1" cellpadding="2" border="0">

                <tr class="sapTbvCellStd"> <td bgcolor="Whitesmoke" valign="top">

         <h2> Welcome to our Online Book Catalog! </h2>

    <p>

    This bookshop offers a small selection of interesting books.

    <p>

        <img height="130" src="../PUBLIC/Tutorial/book2.jpg ">

        <img height="130" src="../PUBLIC/Tutorial/book2.jpg ">

        <img height="130" src="../PUBLIC/Tutorial/book2.jpg ">

    <p>

    <htmlb:form id           = "myFormId"

                method       = "post"

                encodingType = "multipart/form-data" >

      <htmlb:group id        = "group1"

                   bodyColor = "whitesmoke"

                   design    = "SAPCOLOR"

                   width     = "500" >

        <htmlb:groupBody>

          To display all the books written by an author, enter the name of the author in the fields below and

          choose <i>books by this author</i>.

           <br>

          <htmlb:label id      = "authorlname_Label"

                       for     = "authorlname"

                       text    = "last name"

                       tooltip = "author's last name" />

          <htmlb:inputField id    = "authorlname"

                            value = "<%= authorlname %>" />

          <img width="30"  src="../PUBLIC/Tutorial/blind.gif">

          <htmlb:label id      = "authorfname_Label"

                       for     = "authorfname"

                       text    = "first name"

                       tooltip = "author's first name" />

          <htmlb:inputField id    = "authorfname"

                            value = "<%= authorfname %>" />

          <p>

          To display all the authors whose books we offer, choose <i>to list of authors</i>.

          <p>

          To display all books we offer, just choose

          <i>books by this author</i> without entering a name.

          <br>

          <htmlb:button id      = "search"

                        text    = "books by this author"

                        onClick = "onInputProcessing(select)" />

          <img width="30"  src="../PUBLIC/Tutorial/blind.gif">

          <htmlb:button id      = "authorlist"

                        text    = "to list of authors"

                        onClick = "onInputProcessing(authors)" />

        </htmlb:groupBody>

      </htmlb:group>

    </htmlb:form>

    </td> </tr> </table>

  </htmlb:page>

</htmlb:content>

The following table explains the most important parts of this code:

Code

Meaning

<%@ page language="abap" %>

ABAP is the page language.

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

Extension Directive: HTMLB should have prefix htmlb.

<htmlb:content>…</htmlb:content>

Content element that provides the rendering context

<htmlb:page …> … </htmlb:page>

Page element for defining the document structure

<table width … > …

Invisible table, explanatory text and images

<htmlb:form …> … </htmlb:form>

form element for a page with active content (processing user input), so that communication between the representation of an element in the browser and the code running on the server can be ensured.

<htmlb:group …> </htmlb:group>

Group element for defining a group framework around embedded inner elements. The inner elements can therefore be clearly arranged, or logically separated from each other.

In this example, the default design SAPCOLOR is used.

<htmlb:groupBody> … </htmlb:groupBody>

Element for determining the group body.

This contains explanatory text as well as further inner elements: two input fields with affiliated labels, and two buttons underneath.

<htmlb:label …/> … <htmlb:inputField …/>

Label element for labeling an input field and an input field element. the input fields are for entering the author’s first or last name, which you can use to search by.

<htmlb:button …/>

Pushbutton element. Clicking on the pushbutton triggers a predefined action. In this case, this displays either a list of all authors, or a results list corresponding to user input.

Save your entries.

Continue with the page attributes as in the Second Tutorial and then go to the Event Handler for the Entry Page.

Code	Meaning
<%@ page language="abap" %>	ABAP is the page language.
<%@ extension name="htmlb" prefix="htmlb"%>	Extension Directive: HTMLB should have prefix htmlb.
<htmlb:content>…</htmlb:content>	Content element that provides the rendering context
<htmlb:page …> … </htmlb:page>	Page element for defining the document structure
<table width … > …	Invisible table, explanatory text and images
<htmlb:form …> … </htmlb:form>	form element for a page with active content (processing user input), so that communication between the representation of an element in the browser and the code running on the server can be ensured.
<htmlb:group …> </htmlb:group>	Group element for defining a group framework around embedded inner elements. The inner elements can therefore be clearly arranged, or logically separated from each other. In this example, the default design SAPCOLOR is used.
<htmlb:groupBody> … </htmlb:groupBody>	Element for determining the group body. This contains explanatory text as well as further inner elements: two input fields with affiliated labels, and two buttons underneath.
<htmlb:label …/> … <htmlb:inputField …/>	Label element for labeling an input field and an input field element. the input fields are for entering the author’s first or last name, which you can use to search by.
<htmlb:button …/>	Pushbutton element. Clicking on the pushbutton triggers a predefined action. In this case, this displays either a list of all authors, or a results list corresponding to user input.