!--a11y-->
Layout für die Einstiegsseite
festlegen 
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
1. Wählen Sie für Ihre Einstiegsseite default.htmdie Registerkarte Layout.
2. Spezifizieren Sie das 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, <p>
To display all the authors whose books we offer, <p>
To display all books we offer, just choose <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)" <p>
<input type=submit
name="onInputProcessing(authors)" </form>
</body> </html> |
Die wichtigsten Bestandteile dieses Codings werden in der folgenden Tabelle kurz erläutert.
|
Coding |
Bedeutung |
|
<%@ page language="abap" %> |
Die Seitensprache ist ABAP. |
|
<body BGCOLOR="#B5E1D2" > |
Hintergrundfarbe |
|
<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. |
Überschrift und erklärender Text, der auf der ersten Seite ausgegeben wird. |
|
<img src="../PUBLIC/Tutorial/book2.jpg "> <img src="../PUBLIC/Tutorial/book2.jpg "> <img src="../PUBLIC/Tutorial/book2.jpg "> |
Bild, das auf der ersten Seite drei mal ausgegeben wird. Dieses Bild ist vorhanden, bzw. Sie haben es zuvor in das MIME-Repository importiert. |
|
<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"> |
Es wird ein Formular erzeugt mit zwei Eingabefeldern und zwei Buttons, die SAP-Events auslösen. Das erste Eingabefeld ist für die Angabe des Nachnamens des Autors, das zweite für den Vornamen. Bei Mausklick auf die Buttons werden die OnInputProcessing-Events select bzw. authors ausgelöst. |
3. Sichern Sie Ihre Eingaben.
Durch Aktionen des Benutzers, z.B. Mausklicks oder Tastendrucke, werden Events oder Ereignisse ausgelöst. Eventhandler legen fest, was geschehen soll, wenn ein solches Ereignis eintritt, z.B. auf welche Folgeseite navigiert werden soll.
So kann z.B. durch die folgende Anweisung ein Button erzeugt werden:
<form
method="post" action = "results.htm">
<input type=submit>
</form>
Wird dieser Button angeklickt, wird auf die Seite results.htm verzweigt.
In unserem Beispiel ist diese rein HTML-basierte Art der Navigation jedoch nicht möglich, weil innerhalb der Form zwei verschiedene Ereignisse ausgelöst werden. Je nach Ereignis wird auf eine andere Seite verzweigt. Daher wird die Navigation zusammen mit der Eventbehandlung mittels BSP-Scripting durchgeführt.

Weitere Informationen zu
Eventhandlern finden Sie in der Referenzdokumentation unter
Eventhandler.
Die OnInputProcessing-Events select und authors werden im Folgenden weiter spezifiziert. Zuerst spezifizieren Sie jedoch die Seitenattribute, die Sie für diese Seite benötigen.
Seitenattribute für die Einstiegsseite
