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/2004 2
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 of
Presentation 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 doesnt 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:
<ht ml >
<head>
<t i t l e>Si mon s ABAP Lor e</ t i t l e>
</ head>
<body>
Page Cont ent
</ body>
</ ht ml >
SAP Web AS supports
open standards
http://www.w3.org/TR/html401
For example,

Hi , I ' mNi ck Si mon.
HTML Primer Hyperlinks
Create a hyperlink using the <a>tag
with an hr ef attribute containing the
URL of the link
<body>
Check out <a hr ef =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
<f or m>tag
SAP Web AS supports
open standards
<f or mmet hod=GET
act i on=
ht t p: / / www. ni ck. com/ abap/ cust dat a>
Name:


Sex:
 Mal e
 Femal e

Annual I ncome:
<sel ect name=i ncome si ze=1>
<opt i on>Gol ddi gger
<opt i on>Under $100, 000
<opt i on>Over $100, 000
</ sel ect >


</ f or m>
HTML Primer The Rest
Buy a book!
Recommended:
HTML & XHTML The Definitive Guide (Fifth Edition). Chuck Musciano & Bill
Kennedy. OReilly & 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 SAPs 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 l anguage = abap%>tells the BSP runtime that the scripting language is
ABAP
<%= sy- dat um%>is a BSP print directive that outputs to the page the value of the
variable sy- dat um
To get started, copy the code in the Speaker Notes into your HTML layout
Round out the page MIME objects
To complete the page, lets
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, youll
see a new MIMEs sub-folder for your
BSP application. Drag the imported
MIME object into your <body>
5. Embed the sr c=<name of MI ME>
in an 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 lets 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 (<t r >), one for the header
and one for the details, four cells (<t d>) 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., <%= f l i ght -
car r i d %>) 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
Connection
Information
Thread Control
Web Browser
Watchdog
Signal
Handler
I/O
Handler
Encryption/
Decryption
Watchdog
Watchdog
Plug-In
Thread Pool
Worker Thread
State
Connection
Handler
MPI
Handler
Plug-In
Data
ICM
Data Flow
Control Flow
Request
Pipe
Out-of-Band
Pipe
Response
Pipe
Out-of-Band
Pipe
MPI (Memory Pipes)
Work
Process
Dispatcher
Queue
Dispatcher
ABAP 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
S
A
P

W
e
b

A
S

(
C
l
i
e
n
t
)
ABAP
Web Server (Server)
ICM
Taskhandler
Memory Pipes Dispatcher
Response Request
S
A
P

W
e
b

A
S

(
S
e
r
v
e
r
)
ABAP
Web Browser (Client)
ICM
Taskhandler
ICF
Memory Pipes Dispatcher
Application (e.g., BSP)
Request Response
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
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
Any HTTP request handler must implement the IF_HTTP_EXTENSION
interface and its HANDLE_REQUEST method, which the ICF Controller calls.
CL_HTTP_EXT_BSPs
implementation 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 Parameters
HTML Form Control
Explicit specification of initial page
Event Handlers
Navigation Structure
Navigation and other runtime objects
Flow Logic
Event Handlers
Application Class
Business Logic
Programming
Page Attributes tab
Application Class
Business Logic
Declaration of data
objects
Type Definitions tab
Application 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 <l i nk>tag into the <head>
section. Then drag in the r el attribute,
set to stylesheet, the t ype attribute,
set to text/css, and the hr ef attribute
2. Switch to the MIME Repository and
navigate to the PUBLIC/BC/BSP/Styles
folder. Drag the sapbsp.css style sheet
into the hr ef 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 <t r >tag
of the header row and
class="bspTbvCellStd to the <t r >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
Definitions (2)
Page Attributes and Type Definitions
These 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 Handlers
BSP Pages pass through a specified sequence of predefined events. You are given the
option of writing handler code for any of these events
The most common events to get custom coding are OnI ni t i al i zat i on and
OnI nput Pr ocessi ng
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
Definitions (3)
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 OnI ni t i al i zat i on event of the default.htm page. You can define the
variables l _per snumber , l _name_f i r st , and l_name_l ast as local to the
event handler, as they will not be needed elsewhere
Result:
Data definitions are removed from top.htms Layout
The logic for getting name is removed from top.htms Layout
top.htm is limited to presentation, outputting name plus the graphic
Definitions (4)
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 OnI ni t i al i zat i on 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 havent 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:

You ar e l ogged on as: <%= uname %> 
Sour ce page: <%= sr cpage %>
<hr / >
3. In the Layout of default.htm, add the hyperlink just after the include directive:
<- - - Go t o a page usi ng an HTML hyper l i nk - - - >
Use
<a
hr ef =" f l i ght s. ht m?sr cpage=def aul t . ht m&uname=<%= name %>" >t hi s l i nk </ a>
t o get a f l i ght l i st i ng. 
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 t o a page usi ng HTML For mCont r ol - - %>
<f or mname=" navf or m"
act i on=" f l i ght s. ht m"
met hod=" GET" >
Al t er nat i vel y, use t hi s f or mt o get a f l i ght l i st i ng:

" / >


</ f or m>
2. Follow the directions in the Speaker Notes to add a hyperlink from flights.htm
back to default.htm
Transferring Data Between Pages Using URL Parameters and
HTML Form Control
The 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:
<f or mname=usr sel >

</ f or m>
The BSP runtime will see that the
name of the submit button is
OnInputProcessing and therefore
execute the current pages
OnInputProcessing event handler
In OnInputProcessing, use the runtime
object navi gat i on to navigate to
flights.htm
Variant 1
navi gat i on- >got o_page(
f l i ght s. ht m ) .
Variant 2
navi gat i on- >next _page(
t o_f l i ght s_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 HTMLs
ability within one Form to have multiple Input
submit buttons*:
<f or mname=usr sel >
name=onI nput Pr ocessi ng( home)
val ue=Home>
name=onI nput Pr ocessi ng( flightlist)
val ue=Fl i ght Li st >
name=onI nput Pr ocessi ng( history)
val ue=Hi st or y of Fl i ght >
name=onI nput Pr ocessi ng( events)
val ue=Dest i nat i on Event s>
name=onI nput Pr ocessi ng( ordering)
val ue=Or der >
</ f or m>
To handle multiple Input buttons, use the global
runtime object event _i d to determine which
button was selected and branch accordingly:
CASE event _i d.
WHEN home .
* not hi ng r equi r ed
WHEN flightlist .
WHEN history .
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 lets see
how the same thing can be done in your
OnInputProcessing event handler (shown
here as generic code):
Fi el d 1 
Fi el d 2 
See the Speaker Notes for what the Layout
of default.htm now looks like
Use navi gat i ons set _par amet er method:
Variant 1
navi gat i on- >set _par amet er ( field_1 ) .
navi gat i on- >set _par amet er ( field_2 ) .
navi gat i on- >got o_page( ) .
Variant 2
DATA: t mp TYPE st r i ng.
t mp =
r equest - >get _f or m_f i el d( field_1 ) .
navi gat i on- >set _par amet er (
name = field_1 val ue = t mp) .
t mp =
r equest - >get _f or m_f i el d( field_2 ) .
navi gat i on- >set _par amet er (
name = field_2 val ue = t mp) .
Variant 1 assumes the names of the form field and
the Page Attribute are identical
Notes only
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 APPLI CATI ON(Click the Signature button while in the event handler:
You will see APPLI CATI ONas 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
Stateless
The 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 (. 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 browsers 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 object
r unt i me- >keep_cont ext = 0 stateless
r unt i me- >keep_cont ext = 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!
Its a good practice to give the user a clean way to close the application. You can do this
using URL parameters or the navi gat i on- >exi t method

15 - Business Server Page - Basics v1.3

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

15 - Business Server Page - Basics v1.3

Uploaded by

Copyright:

Available Formats

deeper

Business Consulting Services

Check out <a hr ef =NickBook.htm">my

You might also like