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.

Procedure

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

Define the layout:

<%@ page language="abap" %>

<html>

  <body BGCOLOR="#B5E1D2" >

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

    <p>

    This bookshop offers a small selection of interesting books.

    <p>

    To display all the books written by an author,
    enter the name of the author in the field below.

    <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.

    <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>

    <form method="post">

      last name

      <input type=text    name="authorlname"    value="" >

      first name

      <input type=text    name="authorfname"    value="" >

      <p>

      <input type=submit name="onInputProcessing(select)"
        value="books by this author">

      <p>

      <input type=submit name="onInputProcessing(authors)"
        value="to list of authors">

    </form>

  </body>

</html>

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

Code	Meaning
<%@ page language="abap" %>	ABAP is the page language.
<body BGCOLOR="#B5E1D2" >	Background color
<h2> Welcome to our Online Book Catalog! </h2> <p> This bookshop offers a small selection of interesting books. <p> To display all the books written by an author, enter the name of the author in the field below. <p> To display all the authors whose books we offer, choose <i>list of authors</i>. <p> To display all books we offer, just choose <i>books by this author</i> without entering a name.	Title and explanatory text output on the first page.
<img src="../PUBLIC/Tutorial/book2.jpg "> <img src="../PUBLIC/Tutorial/book2.jpg "> <img src="../PUBLIC/Tutorial/book2.jpg ">	Picture that is displayed three times on the first page. This picture is already available, or you have previously imported it into the MIME repository.
<form method="post"> last name <input type=text name="authorlname" value="" > first name <input type=text name="authorfname" value="" > <p> <input type=submit name="onInputProcessing(select)" value="books by this author"> <p> <input type=submit name="onInputProcessing(authors)" value="to list of authors">	Creates a form with two input fields and two buttons. The buttons trigger SAP events. The first input field is for the author’s surname, the second for the author’s first name. When the user clicks on the buttons, this triggers the OnInputProcessing event select or authors.

Save your entries.

Events and Navigation

User action, such as clicking the mouse or pressing a button, triggers events. Event handlers define what happens when an event is triggered, such as what page should open next.

For example, the statement below creates a button:

If the user clicks on this button, the page results.htm opens.

However, in our example, this purely HTML-based form of navigation is not possible, as two separate events are triggered within the form. Each event opens a different page. For this reason navigation is carried out together with event handling using BSP scripting.

Note

For more information on event handlers, see the reference documentation under Event Handlers.

The onInputProcessing events select and authors are explained in more detail later. First you need to specify the page attributes required for this page.

Page Attributes for the First Page