Creating Main View default.htm (SAP Library

Creating Main View default.htm

Use

This view contains what you see in the browser when you call the bookshop with the URL.

Prerequisites

You know how to create a view from the previous examples (such as Creating Views from the Model View Controller Tutorial).

Procedure

In the view layout, use HTMLB trays that then call the sub-controllers.

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

First of all you need the following page directives.

You need HTMLB extension (in the Tag browser under BSP Extensions ® Transportable) in order to use HTMLB elements.

You need the BSP extension (also under BSP Extensions ® Transportable) in order to call the sub-controllers within the view.

Each HTMLB page is nested in the elements content and page.

<htmlb:content id="ComponentTest" >

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

...

</htmlb:page>

</htmlb:content>

It is surrounded by the coding above.

Now include page header head.htm as it was in the original tutorial.

If you want to transfer form fields, you also need the form element.

Within this you then define the trays that contain the individual page components.

The trays contain different controllers, which then take over the control of these components.

Then define another Cancel button that you can use to delete any input.

Note

In the HTMLB tag browser you can expand the individual elements (such as a tray) to see the attributes that are available. You can drag and drop the attributes you require into your layout coding. If you select an HTMLB element by clicking on the right mouse button, you can display the documentation.

Now create the page fragment for the view header:

Creating Page Fragment head.htm