Haupt-View default.htm anlegen (SAP-Bibliothek - Unser kleiner Online-Buchladen mit Verwendung von MVC und HTMLB)

Haupt-View default.htm anlegen

Verwendung

Dieser View beinhaltet das, was Sie im Browser sehen, wenn Sie den Buchladen mit der URL aufrufen.

Voraussetzungen

Das grundsätzliche Anlegen eines Views ist Ihnen aus vorangegangenen Beispielen vertraut (etwa View anlegen aus dem Model-View-Controller Tutorial).

Vorgehensweise

Im Layout des Views verwenden Sie nun HTMLB-Trays, die dann die Unter-Controller aufrufen.

<%@page language="abap" %>

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

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

<htmlb:content id="ComponentTest" >

<htmlb:page title="BSP with MVC: Bookshop Tutorial" >

<%@include file="head.htm" %>

<htmlb:form id = "myFormId"

method = "post" >

<htmlb:tray id = "tray1"

title = "Search"

design = "form"

width = "100%"

isCollapsed = "false" >

<bsp:call url = "search.do"

comp_id = "search" >

</bsp:call>

</htmlb:tray>

<p>

<htmlb:tray id = "tray2"

title = "Results"

design = "form"

width = "100%"

isCollapsed = "false" >

<bsp:call url = "result.do"

comp_id = "result" >

</bsp:call>

</htmlb:tray>

<p>

<htmlb:tray id = "tray3"

title = "Detail"

design = "form"

width = "100%"

isCollapsed = "false" >

<bsp:call url = "detail.do"

comp_id = "detail" >

</bsp:call>

</htmlb:tray>

<htmlb:button id = "CANCEL"

text = "CANCEL"

onClick = "CANCEL" />

</htmlb:form>

</htmlb:page>

</htmlb:content>

Zunächst benötigen Sie die folgenden BSP-Direktiven:

Die HTMLB-Extension (im Tag Browser unter BSP-Extensions ® Transportierbar) benötigen Sie, um HTMLB-Elemente zu verwenden.

Die BSP-Extension (ebenfalls unter BSP-Extensions ® Transportierbar) benötigen Sie, um innerhalb des View Unter-Controller aufzurufen.

Jede HTMLB-Seite ist in die Elemente content und page geschachtelt, wird also von

<htmlb:content id="ComponentTest" >

<htmlb:page title="BSP with MVC: Bookshop Tutorial" >

...

</htmlb:page>

</htmlb:content>

umgeben.

Nun inkludieren Sie den Seitenkopf head.htm so, wie Sie es aus dem ursprünglichen Tutorial kennen.

Wenn Formfelder übergeben werden sollen, wird zusätzlich das form-Element benötigt.

Innerhalb davon definieren Sie dann die Trays, die die einzelnen Komponenten der Seite beinhalten.

In den Trays werden die verschiedenen Controller aufgerufen, die dann die Steuerung für diese Komponenten übernehmen.

Abschließend definieren Sie noch einen Cancel-Button, mit dem Sie eventuelle Eingaben löschen können.

Hinweis

Sie können im HTMLB-Tag-Browser die einzelnen Elemente (z.B. tray) aufklappen, um zu sehen, was es für Attribute gibt. Die gewünschten können Sie dann mit drag&drop in Ihr Layout-Coding ziehen. Wenn Sie mit der rechten Maustaste ein HTMLB-Element anklicken, können Sie sich die Dokumentation anzeigen lassen.

Diese Grafik wird im zugehörigen Text erklärt

Erstellen Sie nun das Seitenfragment für den Kopf des Views:

Seitenfragment head.htm anlegen