Layout für die Einstiegsseite festlegen (SAP-Bibliothek - Eine kleine BSP-Applikation mit HTMLB)

Layout für die Einstiegsseite festlegen

Verwendung

Das Layout für Ihre Einstiegsseite soll Folgendes beinhalten:

eine Hintergrundfarbe, einen Titel und einige Bilder
einige Erläuterungen dieser Beispiel-Anwendung mit Informationen, was der Benutzer in dieser BSP-Applikation alles machen kann
Eingabefelder, in die der Benutzer den Vor- bzw. Nachnamen eines Autoren eingeben kann
einen Button, der zur Buchliste des vom Benutzer spezifizierten Autoren führt
einen Button, der zur gesamten Autorenliste führt

Diese Bestandteile des Layouts sollen (fast) alle über die BSP-Extension HTMLB realisiert werden.

Hinweis

Detaillierte Informationen über BSP-Extensions erhalten Sie in der Referenzdokumentation unter BSP-Extensions. Die einzelnen Elemente von der BSP-Extension HTMLB sind im Entwicklungssystem mit einer ausführlichen Online-Hilfe hinterlegt.

Vorgehensweise

Wählen Sie für Ihre Einstiegsseite default.htm die Registerkarte Layout.

Spezifizieren Sie das Layout:

<%@page language="abap" %>

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

<htmlb:content>

<htmlb:page title="my Title" >

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

<p>

This bookshop offers a small selection of interesting books.

<p>

<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 %>" />

<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)" />

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

Die wichtigsten Bestandteile dieses Codings werden in der folgenden Tabelle kurz erläutert.

Coding	Bedeutung
<%@ page language="abap" %>	Die Seitensprache ist ABAP.
<%@ extension name="htmlb" prefix="htmlb"%>	Extension-Direktive: HTMLB soll mit dem Präfix htmlb eingesetzt werden.
<htmlb:content>…</htmlb:content>	Content-Element, das den Rendering-Kontext bereitstellt
<htmlb:page …> … </htmlb:page>	Seiten-Element für die Definition der Dokumentstruktur
<table width … > …	Unsichtbare Tabelle, erläuternder Text und Bilder
<htmlb:form …> … </htmlb:form>	Formular-Element für eine Seite mit aktivem Inhalt (Verarbeitung von Benuzterzeingaben), so dass die Kommunikation zwischen der Repräsentation eines Elements im Browser und dem auf dem Server laufenden Code gewährleistet ist.
<htmlb:group …> </htmlb:group>	Gruppen-Element für die Definition eines Gruppenrahmens um eingebettete innere Elemente. Die inneren Elemente können dadurch übersichtlich angeordnet bzw. logisch voneinander abgetrennt werden. Im vorliegenden Beispiel wird das Standarddesign SAPCOLOR verwendet.
<htmlb:groupBody> … </htmlb:groupBody>	Element für die Festlegung des Gruppen-Bodys. Hier ist erläuternder Text enthalten sowie weitere innere Elemente: zwei Eingabefelder mit dazugehörigen Labels und weiter unten noch zwei Buttons.
<htmlb:label …/> … <htmlb:inputField …/>	Label-Element für die Beschriftung eines Eingabefeldes und Eingabefeld-Element. Die Eingabefelder sind für die Eingabe des Vor- bzw. Nachnamens der Autoren, nach denen gesucht werden kann.
<htmlb:button …/>	Drucktasten-Element. Durch Anklicken der Drucktaste wird eine vordefinierte Aktion ausgelöst. Im vorliegenden Fall wird entweder eine Liste aller Autoren angezeigt oder eine Ergebnisliste entsprechend der Benutzereingaben.

Sichen Sie Ihre Eingaben.

Diese Grafik wird im zugehörigen Text erklärt Machen Sie weiter mit den Seitenattributen, genauso wie im zweiten Tutorial und gehen Sie dann an die Eventhandler für die Einstiegsseite.