Anfang des InhaltsbereichsVorgehensweisen Seite before.htm erstellen Dokument im Navigationsbaum lokalisieren

Verwendung

Auf dieser Seite realisieren Sie die Ausgabe mit HTMLB-Mitteln.

Voraussetzungen

Sie haben eine BSP-Applikation angelegt (siehe auch StrukturlinkBSP-Applikationen anlegen). In unserem Beispiel hat sie den Namen BSP_TUT_COMPLEX.

Vorgehensweise

  1. Legen Sie in Ihrer BSP-Applikation die Seite before.htm als Seite mit Ablauflogik an
    (siehe auch     StrukturlinkSeiten anlegen).
  2. Definieren Sie drei Seitenattribute für die drei Eingabefelder:
    3.

    Attribut

    Auto

    Typisierungsart

    Bezugstyp

    name

    x

    TYPE

    STRING

    password

    x

    TYPE

    STRING

    email

    x

    TYPE

    STRING

  3. Erstellen Sie das Layout der Seite mit HTMLB-Elementen:

    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. Sichern und aktivieren Sie Ihre Seite und die BSP-Applikation.

Ergebnis

Die generierte Ausgabe sieht aus wie folgt:

Diese Grafik wird im zugehörigen Text erklärt

Analyse

Allein das Coding für die einfachen drei Eingabefelder erfordert mehr als 40 Zeilen Coding. Außerdem erkennt man aufgrund des <htmlb:gridLayout>-Elements auf den ersten Blick auch nicht sofort die Struktur des Codings. Dieses Element ist für das vorliegende einfache Beispiel zwar nicht zwingend notwendig, aber bei komplexeren Layouts ist sein Einsatz sinnvoll.

Nun können jedoch für diese Flow-artigen Layouts die meisten Attribute automatisch berechnet werden, insbesondere Zähler für Zeilen und Spalten. Genauso ist es mit der Anbindung von <htmlb:label> an <htmlb:inputField>. Auch können viele der Attribute hart in eine Menge von Verschalungselementen kodiert werden.

Daher empfiehlt es sich, eine BSP-Extensions-Bibliothek zu designen, die auch inhärente Informationen (d.h. hart kodierte Elemente) für das Layout einer spezifischen BSP-Applikation oder einer Gruppe von BSP-Applikationen enthält. Idealerweise sind die einzelnen BSP-Extensions in dieser Bibliothek „schlank" und einfach zu erstellen. Mit ihnen sollen rasch „Werkzeugkästen" erstellt werden können, die das Aussehen und das gesamte Layout an einer zentralen Stelle kapseln. Dadurch können auch bei Bedarf sehr rasch Änderungen an der gesamten Applikation vorgenommen werden.

All dies kann über die Design-Lösung realisiert werden.

Ende des Inhaltsbereichs