15_Business Server Page - Basics v1.3

deeper

Business Consulting Services

© Copyright IBM Corporation 2004

Business Server Pages – Basics

March 2004

ABAP | Confidential | 15_Business Server Page - Basics v1.2 .ppt | 5/17/20042



BSP Basics – Topics, Part 1

BSP Features

HTML Primer

Creating a simple BSP Application – Pages with Flow Logic, using inline scripting code

Runtime environment: From the browser and back

– Interaction of the browser, the ICM, the ICF, the HTTP request handler, and the BSP application

– Service Maintenance (Transaction SICF)

HTML Debugging




BSP Basics – Topics, Part 2

Pages with Flow Logic – Advanced Topics

– Presentation: Stylesheets

– Business and Flow Logic: Event Handlers/Data Attributes/Type Definitions

– Flow Logic: Processing User Input with Flow Logic and Navigation

– Business Logic: the Application Class

Stateless and Stateful Applications




Part I: BSP Features (1)

Compare and contrast creating a Web application:

Without SAP

With SAP before the SAP Web Application Server (i.e., with ITS)

With Business Server Pages in the SAP Web AS

1. The SAP Web AS IS the Web server, directly addressed by the URL and directly handling the HTTP communication

2. The SAP Object Navigator (SE80) IS the development environment*

3. The SAP CTS system IS the means of promoting the application, with ALL its components, to QA and Production environments

*SAP also supports the use of WebDAV-enabled tools. WebDAV stands for Web-based Distributed Authoring and Versioning. See the link above.

SAP Web AS supports

open standards

http://www.ics.uci.edu/~ejw/authoring/




BSP Features (2)

The SAP Web AS supports all aspects of designing, building, testing, and deploying Web applications:

1. Application Design. Web applications consist ofPresentation components – Content and style of the pages

Flow control components – Sequencing and linkage between pages

Business logic components – Declaration of data types and objects, reading/writing/storing data, transactional integrity, etc.

2. Runtime Environment. Deploying a production-ready web application involves consideration of, for example,

Architecting the control and data flow from the client (usually a browser) to the Web server to the application

Efficient use of resources (memory, logon sessions, …)

Security

Our coverage concentrates on 1 but also touches on 2




BSP Features (3)

Application Design. Business Server Pages offer two approaches, differing in how they approach the separate tasks of presentation, flow logic, and business logic:

1. Pages with Flow Logic (with the optional use of Page Fragments)– This design approach doesn’t formally separate the presentation, flow logic, and

business logic components, but in fact gives you many options for handling presentation, flow logic, and business logic

2. The Model-View-Controller (MVC)– This approach formally and strictly separates the presentation, flow logic, and

business logic components

We will begin with the simplest form of Pages with Flow Logic, namely, using inline scripting code, and then progress to more sophisticated approaches. We cover MVC in our BSP – Advanced topic.

But first, a quick HTML primer




HTML Primer – The Page

Frame an HTML page as follows:<html>

<head>

<title>Simon’s ABAP Lore</title>

</head>

<body>

… Page Content …

</body>

</html>

SAP Web AS supports

open standards

http://www.w3.org/TR/html401

For example,

<img src=“Portrait.gif" align=middle><i>Hi, I'm Nick Simon</i>.




HTML Primer – Hyperlinks

Create a hyperlink using the <a> tag with an href attribute containing the URL of the link

<body>

…

Check out <a href=NickBook.htm">my exciting new book</a> about SAP's Business Server Pages.

…

</body>

SAP Web AS supports

open standards





HTML Primer – Forms

Pass data to an application using the <form> tag

SAP Web AS supports

open standards


<form method=GETaction=“http://www.nick.com/abap/custdata”>

Name:<input type=text name=name size=32><p>Sex:

<input type=radio name=sex value="M"> Male<input type=radio name=sex value="F"> Female

<p>Annual Income:<select name=income size=1>

<option>Golddigger<option>Under $100,000<option>Over $100,000

</select><p><input type=submit>

</form>




HTML Primer – The Rest

Buy a book!

Recommended:

– HTML & XHTML – The Definitive Guide (Fifth Edition). Chuck Musciano & Bill Kennedy. O’Reilly & Associates, Inc., 2002.

And/or search the Web for tutorials, tag indexes, etc.

– for example, http://www.w3schools.com/html/html_reference.asp

SAP Web AS supports

open standards





Creating a BSP Application

Follow the steps in the Speaker Notes to create and activate a BSP application.

The name of the application should be ≤ 15 characters




Creating a BSP Page with Flow Logic

Follow the steps in the Speaker Notes to create and activate a BSP Page.




Server-Side Scripting with Inline Scripting Code

The essence of server-page technology is to combine scripting code with static HTML. The application server responds to an HTTP request by executing the scripting code in order to dynamically create the content and appearance of the returned HTML page

For SAP’s Business Server Pages, the scripting code is ABAP!– Within the HTML layout, ABAP code is enclosed in the tags <% and %>; the editor

uses blue font to distinguish the scripting code from the HTML

– Variants of these tags contain BSP directives, for example,<%@page language = “abap”%> tells the BSP runtime that the scripting language is ABAP

<%= sy-datum %> is a BSP print directive that outputs to the page the value of the variable sy-datum

To get started, copy the code in the Speaker Notes into your HTML layout




Round out the page – MIME objects

To complete the page, let’s– Add a MIME graphic

– Utilize a Page Fragment

– Display a list of flights

Instructions for adding a MIME object:

1. Place a .gif or .jpeg graphic in C:\<Your Windows Logon Name>\SapWorkDir

2. In SE80, switch to the MIME Repository. You should find a directory with the same name as your BSP application

3. Select that directory and choose ‘Import MIME Objects’ and import a graphic file from SapWorkDir

4. Back in the Repository Browser, you’ll see a new MIMEs sub-folder for your BSP application. Drag the imported MIME object into your <body>

5. Embed the src=“<name of MIME>”in an <img src=“…” /> tag




Round out the page – Page Fragments

Use page fragments to store frequently repeated components of your layouts

Try this out by creating a Page Fragment top.htm and moving the personalized greeting and MIME object to the fragment

Instructions for creating a Page Fragment

1. Select the BSP application in the object list. From the context menu (right mouse click), select Create > Page

2. Give it a name and description, and change the Page type to Page Fragment

3. Cut the contents from the <body> of your first page and paste them into the Page Fragment

4. Activate the Page Fragment

5. From the object list, drag the new Page Fragment into the <body> of your first page, which creates the required BSP include directive (then Reactivate)

same result, but a more modular program




Round out the page – Business Logic

Now let’s add a display of available flights. In essence, this involves the same steps as adding the personalized greeting

1. In the default.htm Layout, create an HTML table with two rows (<tr>), one for the header and one for the details, four cells (<td>) per row. Type in the header titles.

2. Markup the header cells with width, align, and bold attributes

3. Insert a print directive (e.g., <%= flight-carrid %>) within each cell of each detail row

4. Add BSP tags before and after the detail row, for loop control

5. Within the BSP tag before the detail row, code the basic business logic as inline code (i.e., within a <% … %> tag): define your data, select from table sflight, perform calculations, loop through the results to display detail




Notes only




Runtime Environment: From the browser and back

The following slides examine the interaction of

1. the browser

2. the Internet Communication Manager (ICM)

3. the Internet Communication Framework (ICF)

4. the HTTP request handler

5. the BSP application

and the role of the Service maintenance transaction, SICF




Internet Communication Manager (ICM)(From SAP Web AS Overview – Day 1)

BSPs as ABAP requests routing through the ICM

ConnectionInformation

Thread Control

Web Browser

Watchdog SignalHandler

I/OHandler

Encryption/Decryption

WatchdogWatchdogPlug-In

Thread Pool

Worker ThreadState

ConnectionHandler

MPIHandler

Plug-InData

ICM

Data Flow

Control Flow

RequestPipe

Out-of-BandPipe

ResponsePipe

Out-of-BandPipe

MPI (Memory Pipes)

WorkProcess

DispatcherQueue

DispatcherABAP Requests

http://<server>:<port>/path/page.htm

BSP Application

1

2

3

Internet Communication Framework (ICF)(From SAP Web AS Overview – Day 1)

The ICF handles the HTTP request/response in the SAP work process

The ICF provides the developer an ABAP Objects framework for dealing with HTTP requests/responses in the ABAP personality

SA

P W

eb A

S (C

lient

)

ABAP

Web Server (Server)

ICM

Taskhandler

Memory Pipes Dispatcher

ResponseRequestS

AP

Web

AS

(Ser

ver)

ABAP

Web Browser (Client)

ICM

Taskhandler

ICF

Memory Pipes Dispatcher

Application (e.g., BSP)

RequestResponse

ICF Controller

ICF Manager (CL_HTTP_SERVER)

HTTP Request Handler

ICF

Application

ICF Manager (CL_HTTP_CLIENT)

for BSP Application


3

4

5




Maintain Service with Transaction SICF (1)The ICF Controller parses the URL to find the associated virtual host and HTTP request handler maintained in transaction SICF (this slide and next).

Applications (services)

Double click on an application (service) to get service details

5




Maintain Service with Transaction SICF (2)The service details include the HTTP request handler (CL_HTTP_EXT_BSP by default for BSP applications) as well as logon and security data.

4




Maintain Service with Transaction SICF (3)Any HTTP request handler must implement the IF_HTTP_EXTENSION interface and its HANDLE_REQUEST method, which the ICF Controller calls.

CL_HTTP_EXT_BSP’simplementation of HANDLE_REQUEST interacts with the BSP runtime to execute the BSP application.

This method imports a reference to the runtime instance of the implementing class of IF_HTTP_SERVER, which models both the HTTP request and the HTTP response. The entity-body of the HTTP response contains the HTML page generated by the BSP application.

4




HTML Debugging

Use the normal ABAP syntax check to check all inline code (and Event Handler code, to be studied next) – HTML tags themselves are not checked

Activate HTML Debugging for yourself or other users:

– In SE80, Utilities > Settings > ABAP Editor tab > Debugging tab

– In SE80, Utilities > Breakpoints > Activate/Deactivate for HTTP Users

– In the Web Application Builder, setting a breakpoint will prompt you to activate HTTP Debugging

– In SICF, Edit > Debugging > Activate Debugging

This approach also allows you to insert a breakpoint in the HTTP request handler




Part II: Pages with Flow Logic – Advanced Topics

HTML Hyperlinks/URL ParametersHTML Form ControlExplicit specification of initial pageEvent HandlersNavigation StructureNavigation and other runtime objects

Flow Logic

Event HandlersApplication Class

Business Logic –Programming

Page Attributes tabApplication Class

Business Logic –Declaration of data objects

Type Definitions tabApplication Class

Business Logic –Declaration of data types

Cascading Stylesheets (CSS)BSP Extensions (covered in BSP – Advanced)

Presentation

program-controlled navigation

user-controlled navigation

We now advance to the features in the right-hand column. The mapping of presentation, business logic, and flow logic tasks to these features are not formal or mutually exclusive.




Cascading Style Sheets (CSS)

CSS is a style sheet language. A CSS file contains specifications for character, paragraph and page formatting

Style sheets separate the organization and presentation of content from style of content, which are otherwise indiscriminately mixed in HTML tags. Style sheets

– Simplify Web application maintenance because one CSS file can be applied to multiple HTML documents – you can in fact change the look of an entire web site by changing attributes in a single CSS file

– Allow a corporate identity and uniformity across multiple sites and applications

– Improve performance, through caching of the CSS file

Styles are organized into classes, which can be invoked with the “class” attribute of most HTML tags (each class name begins with a period)

SAP provides style sheets in the repository, and developers can create and upload their own

SAP Web AS supports

open standards

http://www.w3.org/Style/CSS/




Linking to and using a Style Sheet

Follow the instructions to the right to improve the appearance of the flight listings

1. Drag a <link> tag into the <head>section. Then drag in the rel attribute, set to “stylesheet,” the type attribute, set to “text/css,” and the href attribute

2. Switch to the MIME Repository and navigate to the PUBLIC/BC/BSP/Styles folder. Drag the sapbsp.css style sheet into the href attribute (you may have to delete a redundant pair of quotation marks)

3. Double click on the CSS file to get a list of its styles (organized into classes)

4. Apply. For example, add class="bspTbvHdrStd“ to the <tr> tag of the header row and class="bspTbvCellStd“ to the <tr> tag of the detail row




Introduction to Event Handler/Page Attributes/Type Definitions (1)

Until now, we have defined all our data types and objects and coded all our application logic using inline code on the page Layout. And we did not have to navigate through multiple pages, since our application only had one page

In practice, except for extremely simple applications, overreliance on inline code is a bad practice:

– The Layout gets plain messy and hard to read and maintain

– No separation of duties is possible, for example, between a webmaster/page design expert and a business logic/application expert

– Small changes to the presentation or business logic can lead to a disproportionately great amount of recoding

– As the application expands to multiple pages, navigation is practically impossible

In short, limit the Layout as much as possible to just that, namely, presentation of output. Use the other Page with Flow Logic devices offered, such as Event Handlers, Page Attributes, and Type Definitions, to isolate business and flow logic





Page Attributes and Type DefinitionsThese BSP Page tabs allow you to define data types and objects that are global to the entire page, that is, to the Layout (including the Page Fragments) and the Event Handlers

– The ‘Auto’ flag for a Page Attribute, when checked, parameterizes the page by allowing a value for the Attribute to be passed and automatically set

Event HandlersBSP Pages pass through a specified sequence of predefined events. You are given the option of writing handler code for any of these eventsThe most common events to get custom coding are OnInitialization and OnInputProcessing

In your handler code, you can use a number of global runtime objects that significantly expand the possibilities of what you can do. While in the editor for a specific event, use the Signature button to see which runtime objects are available for handling that event





Rewrite the personalized greeting as follows:

1. Define ‘name’ as a Page Attribute of default.htm with type string. Page Attributes and Type Definitions are global to the page, that is, to the Layout, to all included Page Fragments, and to all event handlers. ‘name’ will get its value in the handler code and be displayed in the top.htm Page Fragment

2. Move the logic for getting the user name from the layout of the top.htm fragment to the OnInitialization event of the default.htm page. You can define the variables l_persnumber, l_name_first, and l_name_last as local to the event handler, as they will not be needed elsewhere

Result:

Data definitions are removed from top.htm’s Layout

The logic for getting ‘name’ is removed from top.htm’s Layout

top.htm is limited to presentation, outputting ‘name’ plus the graphic





Rewrite the flight listing as follows:

1. Create a new Page with Flow Logic, name it “flights.htm,” activate it, and first follow the instructions in the Speaker Notes

2. Then in flights.htm, define ‘availableseats,’ ‘flight,’ and ‘planeflights’ as Page Attributes. They should have the same types as when they were defined inline in the layout. Now remove the DATA: definitions from the Layout

3. Move the select statement from the Layout to the OnInitialization event

Result:

Data definitions are removed from the Layout

The selection of flights is removed from the Layout

The only inline code that remains in the Layout is the LOOPing through the detail rows




Transferring Data Between Pages Using URL Parameters

We haven’t yet given the user a way to go from default.htm to the flight listings in flights.htm. There are multiple ways to do this. One is a hyperlink. We will create the hyperlink and also show how it can be used to pass parameters to the target page

1. In flights.htm, create two Automated (with the Auto flag checked) Page Attributes, ‘srcpage’and ‘uname’ (both STRING)

2. In the Layout of flights.htm, add the following output just after the open <body> tag:<p>You are logged on as: <%= uname %> <br/>Source page: <%= srcpage %>

</p><hr/>

3. In the Layout of default.htm, add the hyperlink just after the include directive:<--- Go to a page using an HTML hyperlink ---><p>Use<ahref="flights.htm?srcpage=default.htm&uname=<%= name %>">this link </a>to get a flight listing.</p>




Transferring Data Between Pages Using HTML Form Control

A more or less equivalent way to link to flights.htm and pass it parameters is to use HTML Form Control (using Forms with the action and method attributes)

1. Add the following code In the default.htm Layout, below the code added in step 3 on the previous slide:<%-- Go to a page using HTML Form Control --%>

<form name="navform"action="flights.htm"method="GET">

<p>Alternatively, use this form to get a flight listing:<input type="hidden" name="srcpage" value="default.htm"/><input type="hidden" name="uname" value="<%= name %>"/><input type="submit" value="Proceed to flight listing"/></p>

</form>

2. Follow the directions in the Speaker Notes to add a hyperlink from flights.htmback to default.htm




Transferring Data Between Pages Using URL Parameters and HTML Form ControlThe result:




Processing User Input with Flow Logic and Navigation (1)

We have linked two pages using URL parameters and HTML Form Control (and passed data between them using Automated Page Attributes). But these methods of linkage do not separate flow control from presentation and do not have the flexibility of BSP Flow Control and Navigation. We will now expand the application to fully demonstrate BSP Flow Logic and Navigation

1. Copy the BSP application to a new one, copying both Pages and MIME Objects

2. Activate the new application

3. In the new application, delete the hyperlink and Form from the default.htm Layout, which we will replace with a different Form

4. Create three more Pages with Flow Logic, named ‘history,’ ‘events,’ and ‘sales’

5. In the Properties tab of the new BSP application, make default.htm the initial page (this allows the user to enter the URL without having to specify the page)





Create a new Form in default.htm:

<form name=”usrsel”>

<input type=”submit”

name=”OnInputProcessing”value=”Flight List”>

</form>

The BSP runtime will see that the name of the submit button is “OnInputProcessing” and therefore execute the current page’s OnInputProcessing event handler

In OnInputProcessing, use the runtime object navigation to navigate to flights.htm

Variant 1

navigation->goto_page( ‘flights.htm’).

Variant 2

navigation->next_page( ‘to_flights_page’).

where the ‘to_flights_page’ linkage from default.htm to flights.htm is maintained in the Navigation Structure of the BSP application





The BSP runtime will also need to support HTML’s ability within one Form to have multiple Input submit buttons*:<form name=”usrsel”>

<input type=”submit”name=”onInputProcessing(home)”

value=”Home”><input type=”submit”

name=”onInputProcessing(flightlist)”value=”Flight List”>

<input type=”submit”name=”onInputProcessing(history)”

value=”History of Flight”><input type=”submit”

name=”onInputProcessing(events)”value=”Destination Events”>

<input type=”submit”name=”onInputProcessing(ordering)”

value=”Order”></form>

To handle multiple Input buttons, use the global runtime object event_id to determine which button was selected and branch accordingly:

CASE event_id.

WHEN ‘home’.

* nothing required

WHEN ‘flightlist’.

navigation->next_page(…

WHEN ‘history’.

navigation->next_page(…

…

ENDCASE.

*Hint: To preserve the single-buttom form for now, copy default.htm to default1.htm





Previously, we used Automatic Page Attributes in conjunction with URL parameters and HTML Form Control (Forms using the action and method attributes) to transfer data between pages. Now let’s see how the same thing can be done in your OnInputProcessing event handler (shown here as generic code):

Field 1 <input type=”text”name=”field_1”><br>

Field 2 <input type=”text”name=”field_2”><br>

See the Speaker Notes for what the Layout of default.htm now looks like

Use navigation’s set_parameter method:

Variant 1navigation->set_parameter(‘field_1’).navigation->set_parameter(‘field_2’).navigation->goto_page(…).

Variant 2 DATA: tmp TYPE string.…tmp =

request->get_form_field(‘field_1’).navigation->set_parameter(

name = ‘field_1’ value = tmp).tmp =

request->get_form_field(‘field_2’).navigation->set_parameter(

name = ‘field_2’ value = tmp).

Variant 1 assumes the names of the form field and the Page Attribute are identical




Notes only




Processing User Input with Flow Logic and Navigation (5)The results:




Business Logic: The Application Class

We originally created the business logic for personalized greeting and flight lists as inline code in the Layout

Then we separated out this logic into the Page Attributes and OnInitialization event handlers

In many cases, however, it is preferable to go one step further and put business logic (along with type definitions and data attributes) into an Application Class

The Application Class is a global class you create in the global Class Builder

– Use of an Application Class is optional. Each BSP application can have at most one Application Class. Assign an Application Class to the BSP application in the Properties tab of the BSP application

– The BSP runtime instantiates the Application Class. In your event handlers, address this instance using the name APPLICATION (Click the Signature button while in the event handler: You will see APPLICATION as one of the global runtime objects available to you)




Business Logic: The Application Class (continued)

When creating an Application Class, consider having your class inherit from CL_BSP_APPLICATION and/or implementing the IF_BSP_APPLICATION_EVENTS Interface

– CL_BSP_APPLICATION has methods for accessing the BSP RUNTIME, REQUEST, and RESPONSE objects, just as you could access these from your event handlers

– IF_BSP_APPLICATION_EVENTS has methods which, when implemented, will be called by the BSP runtime at the appropriate times (see further, the SAP Library “Application Class of a BSP Application” document)

In a new copy of our sample application, we have removed the personal greeting and flight listing logic into an Application Class named Z_DELTA_BSP

We will study Stateful and Stateless applications next– In a Stateful application, the Application Class instance is generated at the first request and

then held throughout the application context. Hence it is very useful for selecting data once and then buffering the data for use across the multiple pages of the application

– In a Stateless application, the Application Class is more useful for just storing business logic in methods, since it is regenerated and released at the end of each request




Stateless and Stateful Applications (1)

BSP Applications are Stateless by default but can be made either Stateless or Stateful – See the Properties tab of the BSP Application

– StatelessThe application context (roll area) is lost at the end of each request, consistent with the statelessness of the HTTP protocol

Advantage: Memory is preserved, as user sessions are not retained for long. This is an important consideration if the application is expected to have many concurrent users

Disadvantage: Data is lost at the end of each request. However, there are several ways around this:

- Using HTML hidden fields (<input type=“hidden” name=“customerID”value=“5643”>. We used these earlier to transfer the user name and source page to a target page

- Using application-specific database tables

- Storing data in temporary or persistent client-side cookies. These cookies are constrained in size and format by the commonly applied internet usage for client-side cookies

- Storing data in server-side cookies. These cookies are stored as clusters in the SAP database and are unconstrained in terms of format and size





– Stateful

Like a normal transaction with the SAP GUI, the application context (roll area) is retained across all user interactions (for Web applications these consist of HTTP request/response cycles) until the application ends or the browser is closed

- To get around the statelessness of HTTP, a client-side session cookie (that is, temporary cookie stored in the browser’s memory) named sap-contextid is created. The cookie is mapped to the URL of the BSP application, so that a particular BSP application can be executed within a browser session only once at a time. However, multiple distinct BSP applications can run within a browser session at the same time

Advantage: Data is retained throughout the course of the application. The Application Class can be used to get data once, at the appropriate moment, and provide this data to subsequent page requests as needed

Disadvantage: Needing to retain many user contexts will strain memory and may even fill memory to the point where no more logons will be allowed. This is further aggravated by the fact that the application cannot know if the user has drifted to other sites on the Web or closed her/his browser





There are several ways to determine the statelessness or statefulness of the BSP Application:

– Determine it statically, using the ‘Stateful’ field on the BSP Application Properties tab

– Determine it dynamically, using the global runtime objectruntime->keep_context = 0 “ stateless

runtime->keep_context = 1 “ stateful

An individual BSP Page can be made stateful or stateless (the default). See the ‘Status’ and ‘Lifetime’ attributes on the BSP Page Properties tab




Goodbye!

It’s a good practice to give the user a “clean” way to close the application. You can do this using URL parameters or the navigation->exit method

15_Business Server Page - Basics v1.3

Documents