Business Server Pages ... The Next Generation of Apps UI For SAP

Business Server Pages
... The next generation of apps UI for

SAP
So what is NetWeaver?
An integrated “stack” for People, Process, Information, & Application Integration
Mobile • Access via voice, mobile, or radio-

Infrastructure frequency technology
• Personalized, and role-based access;
Enterprise Portal
Knowledge management services
Business • Robust suite of business intelligence
Warehouse/
Strategic
tools for interactive reports & analytics
Enterprise
Management
• Ensures data integrity and consistency
Master Data • Enables sharing of harmonized master
Management
data
Exchange • XML-based integration between
Infrastructure applications & partners
(XI)
Web Application • Web services development (J2EE and
Server ABAP flavor)
(WAS) • Replaces “Basis” technology.
© 2004 SEAL - All rights reserved

Business Server Pages, Anupam Jaiswal
NetWeaver’s value proposition depends on what is
being leveraged (and in what combination)
Element Value Areas

Enterprise Portal • Job simplification
• Increased Efficiency & Effectiveness
• Collaboration
BW/Analytics/ KM • Effectiveness of decisions
• Ability to react/predict trends and events
Master Data • Higher quality data

Management • Less time required for cleansing/maintenance
Process • Reduced integration costs

Integration/XI • Speed to integration
WAS • Simplified development environment
Infrastructure • Reduced license fees & integration costs

• IT skills consolidation
Top-line Growth • Tied directly to business initiatives

BSP Goals
 A RAD (Rapid Application Development) tool

 Bring SAP Business Applications and Web together
 Allow ABAP Programmers to build new Web applications as well as Web front-
ends for existing SAP components
 Reduce cost of building web applications
 Manage all aspects of your application in on single system
 Support web standards
 Provide high scalability based on proven SAP Application Server technology

Database Access
User Interaction
BSP Extensions
Model View Controller

WAS server architecture

WAS functionalities

What is a BSP?
A simple BSPage is a document that..

 Resides on the server
 Contains static HTML (or XML, WML,
or..) parts mixed with serverside scripting
 Has ABAP as scripting language
 Has predefined events to allow for
 Processing of input data
 Data retrieval
 Input validation
 Error handling
 Navigation
 Is accessible via a URL
 Has client side scripting for layout
rendering
 Supports server scripting using ABAP &
Java
BSP Application
 BSP = business server pages

BSP Application
 BSP page
BSP Page
BSP Page
 Layout (HTML and BSP tags)
BSP Page
BSP Page  Parameters
 Event Handler (ABAP)
 Initialization
 Layout
 Manipulation
 Input Processing
 Runtime: Generated ABAP class
Application Class
Attributes
Methods
Events

BSP Application
Designtime: BSP Application Runtime: generated ABAP Class
BSP Page Application

Class
Layout Method
Layout Event Methods
Page Attributes Method Parameters
Events Standard Parameters

Business Server Pages - Hello World
a simple BSP page that ... <%@page language="abap"%>

• shows serverside scripting with <html>
<body>
ABAP or JavaScript <center>
<% do 5 times. %>
<font size=<%=sy-index%>>
Hello World! <br>
• contains static HTML (or XML, </font>
<% enddo. %>
or...) parts mixed with serverside </center>
</body>
scripting </html>
<%@page language="javascript"%>
• is similar to Active Server Pages <html>
<body>
(Microsoft) or Java Server Pages <center>
<% for(i=0;i<5;i++) { %>
<font size=<%=i%>>
• is accessible via URL like common Hello World! <br>
</font>
pages of a web server <% } %>
</center>
</body>
</html>

Database Access
User Interaction
BSP Extensions

BSP – Initialization and Layout
Business Server Page
Attribute Typ. Ass.Type Page Attributes

FLIGHTS TYPE FLIGHTTAB
Every page has a defined
select * from sflight into table flights. Initialization step for data retrieval that
is used in the Layout
step.
<%@page language="abap"%> Layou

<html>
t
<body>
<table border=1>
<tr> The Layout part contains
<th>Carrier</th> script code mixed with
<th>Connection</th> static formatting
<th>Date</th> directives (e.g. HTML).
</tr> The data sources
<% data: wa like line of flights. declared as page
loop at flights into wa. %> attributes are directly
<tr> accessible in the
<td> <%= wa-carrid %> </td> Initialization and Layout
<td> <%= wa-connid %> </td> step.
<td> <%= wa-fldate %> </td>
</tr>
<% endloop. %>
</table>
</body>
</html>

Event Handler
Events that are called
during the processing of
the request of the page
OnInitialization
• called before the
page is rendered
• for data retrievel
OnInputProcessing
• handling of the
user input
OnCreate
• at first creation of
the page
...

Page Attributes
Objects that are accessible

in all page events and the
Layout section
example: tables that are
filled in the Initialization
step and used in the Layout
step

Application Class
BSP Application
BSP Page BSP

<html> BSP Page
...
BSP
<% application->...
%>
Application Class
Attributes
Methods
An Instance of the Application Class is
created at every Request to the page
(stateless) and is available in all events
and in the Layout

MIME Repository
contains arbitrary Files
that are used by BSP
Apps.
• Images
• Backgrounds
• Static HTMLs
• Style Sheets
• ...
is part of the
infrastructure
• translation
• transport
is accessible via HTTP

Database Access
User Interaction
BSP Extensions

HTML Forms
<form action="/cgi-bin/proc.pl" method=get>
Used for user Input your Nickname:
<input type=text name="nickname">
• texts <input type=submit name="Submit">
</form>
• list boxes
<form method=get>
• checkboxes <input type=checkbox name="sel"
value="apple"> Apple
• file upload ... <input type=checkbox name="sel"
value="orange"> Orange
Input is transferred via GET or <input type=checkbox name="sel"
value="cherry"> Cherry
POST request to the server <input type=submit name="Submit">
</form>
• as part of the URL
<form action="/cgi-bin/procxls.pl" method=post>
• as part of the request body Upload Text File:
<input type=file name="data" accept="*/text">
<input type=submit value="Upload">
</form>
<form action="output.htm" method="post" >

<select name="sel_category">
<option value="apple"> Apples
<option value="orange"> Oranges
</select>
<input type="text" name="search" value="">
<input type="submit" value="Select">
</form>

Flow within simpleThat
BSP pages
POST
requests e.g.
User enters another page
a URL
SecondPage.htm
FirstPage.htm
select * from ...
User enters into table it.
data and clicks Initialization call function ...
a button Data retrieval depending

on input parameters
<HTML><BODY>
HTTP
HTTPPOST
GET
BSP <% loop
do ...
<tr>
at it %>
end do. %>
<td><%=it-a%></td>
<bsp:button ...>
Runtime <td><%=it-b%></td>
<form >
Response Layout </tr>
<% endloop. %>
rendering of the page <form
processing the scripting method=“secd.htm“>
<input type=submit
code value=“OnHugo“>
</form>
Runtime
determines
BSP App
and Page
Where to do the Input Processing?
Adress.htm Order.htm
Problem with such direct navigation:
• User input from page X must be ... ...
processed by the Initial-isation of the <form ...> <form ...>

next page Y <input <input
type=text type=text
• But in most cases the next page Y name=“state“ name=“number“
depends on the input of page X. ...>
</form>
...>
</form>
(„You´re wrong here!“ code)
It would be much better to process the

input coming from page X „at the end“
of page X and then to determine the PriceInfo.htm NotAvail.htm
next page if state ...

select * ...
itStreets
<html>
if number ...
SORRY!
endif.
Your selected
product...
<html> </html>
price:...

Business Server Pages - Input Processing
...
Initialization
Layout
...
<form method="post">
<input type=text name= "carrier" value="">
<input type=submit name="OnInputProcessing" value="Search">
</form>
...
data: carr TYPE string. Input Processing

InputProcessing
carr = request->get_form_field( 'carrier' ). depending on the user’s
navigation->set_parameter( name = ‘sel_carr' input (input fields,
value = carr ). pressed buttons, links)
navigation->goto_page('flights.htm' ). the Input Processing
allows database updates
and the dynamic
navigation to the next
page

BSPs - Input Processing Event ID
...
Initialization
Layout
...
<form method="post">
<input type=text name= "carrier" value="">
<input type=submit name="OnInputProcessing(select)" value="Search">
<input type=submit name="OnInputProcessing(exit)" value="Exit">
</form> more then one submit
... button can be
distinguished by an
arbitrary event name that
case event_id. Input Processing
InputProcessing is available as EVENT_ID
in the Input Processing
when 'select'.
data: carr TYPE string.
carr = request->get_form_field( 'carrier' ).
navigation->set_parameter( name = ‘sel_carr'
value = carr ).
navigation->goto_page('flights.htm' ).
when 'exit'.
navigation->exit( exit_url='http://www.sap.com' ).
endcase.

Flow within BSP pages with Input Processing
User enters
data and clicks SecondPage.htm
FirstPage.htm
a button
User enters select * from ...
That GET Initialization call function ...
a URL
requests a
Runtime Data retrieval depending
new page
determines on input parameters
BSP App
and Page <HTML><BODY>
<% loop at it %>
<tr>
<td><%=it-a%></td>
Layout
Layout <td><%=it-b%></td>
</tr>
rendering of the page
HTTP
HTTPPOST
GET
BSP rendering of the page <% endloop. %>
<form>
<input type=submit
Runtime value=“OnHugo“>
REDIRECT
Response </form>
Case event_id.
Input Processing When ‘submit‘.
...
event handling When ‚‘exit‘.
retrieval of user input Navigation->...
navigation to next page Endcase.

BSP Process Flow
Initialization
Layout Rendering
Input Processing

Database Access
User Interaction
BSP Extensions

BSP Extensions
 Uniform look&feel
 Built-in functionality
 Scrolling
 Sort
 ...
 Reusable rendering
 Browser-independent
<table> <htmlb:tableView
id ="table"
...75 lines of HTML table ="<%=FLIGHTS%>"
...tons of javaScript rowCount ="15"
headerVisible="true"
...some scripting design
</table> ="ALTERNATING" />
BSP Extension
HTML
Element
BSP Extensions – Tag Libraries
Tag Libraries
• well known from JSP
• user definded Tags linked
with Program coding that
generates at runtime the
HTTP response
• predefined UI elements
(TableView, TreeView,
InputFields,...)
• browser independent

HTML-Business Extension - UI-Elements for BSP
BSP Extension Description
<textView> This BSP element is used to represent different styles of a text block. It is a fundamental module of almost all
Web pages.

<textEdit> This BSP element provides a multiline input field that can be edited. The textEdit element is intended for
handling multiline text input.
<button> This BSP element implements the classical GUI element of a pushbutton. When a user clicks on a
pushbutton, a predefined action is triggered.
<inputField> This BSP element implements the concept of a generic, single-cell input field. The content type of this field is
completely determined by the corresponding data object type, which ensures extensive flexibility.
<tabStrip> You can use this BSP element to switch between different views that use the same screen area.
<checkBox> You can use this BSP element to implement an on/off switch.
<listBox> This BSP element is similar to the classical GUI concept of a selection list with multiple selection (list box).
<tableView> This BSP element is used to display mass data in a layout similar to a table (table view).
<dateNavigator> This BSP element provides a calendar view.
<fileUpload> This BSP element is used for uploading a file to the server.
<image> This BSP element is used as a view element and contains a MIME object, such as an image or a symbol.
<form> This BSP element is used for rendering a form, whereby the functionality rests on the HTML tag form.

Displaying the internal table using
BSP tag
•The data is displayed as declared in the ABAP dictionary

•The labels are pulled from the ABAP dictionary texts
•To add scrolling, add the tag “visibleRowCount”

Database Access
User Interaction
BSP Extensions

Model-View-Controller (MVC)
 Layout rendering and event handling is done by the

pages
 Business logic included via Application Class
 Flow between pages defined in event handler
BSP page
Request
events
<form ...>
<input
application->
...>
</form>
Response
Application Class
Attributes
Methods

Model-View-Controller (MVC)

Design Pattern for decoupling presentation and logic of an application
 HandleEvents
Handle Events
 Updateapplication
Update applicationdata
data
Request  Define
Definecontrol
controlflow
flow
Controller
Model
 Defines
Definesapplication
applicationdata
data
 Usually
Usuallyconnected
connectedtoto
business
businessfunctionality
functionality
Response
View
 Visualization
Visualizationof
ofthe
the
application
applicationdata
data

Model-View-Controller in BSPs
 Extend the BSP programming model with the MVC paradigm

 Enable programming model similar to Java world
 Simplify BSP pages in order to support further customizing options
BSP Controller
Request
METHOD
DO_REQUEST
...
CALL_VIEW
Application Class
Attributes
Methods
BSP View
Response <form ...>
<input
...>
</form>

Web dynpro

Appendix 1: List of tags
Tag Name Description
breadCrumb Navigation Using Path History
breadCrumbItem Entry in Path History
button Pushbutton
chart Diagram
checkbox Checkbox
checkboxGroup Checkbox Grouping
content Content
dataContainer Data Container for
<htmlb:dropdownListBox>
dateNavigator Calendar View
days Days
document Document
documentBody Document Body
documentHead Document Head
dropdownListBox Dropdown Listbox
fileUpload Upload file
form Form
Tags (contd..)
gridLayoutCell Grid Layout Cell
group Group
groupBody Group Body
groupHeader Group Header
headInclude Head Include
image Screen
inputField Input Field
itemList List Entry
label Interval/date
link Hyperlink
listBox List Box
listBoxItem Listbox Entry
listItem List Entry
month Month
page Page
radioButton Radio Button
gridLayout Grid Layout

Tags (contd)
radioButtonGroup Radio Button Group
tabStrip Tabstrip Control
tabStripItem Tabstrip Entry
tabStripItemBody Body of a Tabstrip Entry
tabStripItemHeader Header of a Tabstrip Entry
tableView Table View

tableViewColumn Table View Column
tableViewColumns Table View Columns
textEdit Text Edit
textView Text View
tray Tray
trayBody Deprecated: Not Used Anymore

tree Tree
treeNode Tree Node
week Week

Business Server Pages ... The Next Generation of Apps UI For SAP

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Business Server Pages ... The Next Generation of Apps UI For SAP

Hochgeladen von

Copyright:

Verfügbare Formate

Business Server Pages

... The next generation of apps UI for

Mobile • Access via voice, mobile, or radio-

© 2004 SEAL - All rights reserved

Element Value Areas

Master Data • Higher quality data

Process • Reduced integration costs

WAS • Simplified development environment

Infrastructure • Reduced license fees & integration costs

© 2004 SEAL - All rights reserved

 A RAD (Rapid Application Development) tool

© 2004 SEAL - All rights reserved

Model View Controller

© 2004 SEAL - All rights reserved

© 2004 SEAL - All rights reserved

© 2004 SEAL - All rights reserved

A simple BSPage is a document that..

 BSP = business server pages

© 2004 SEAL - All rights reserved

BSP Page Application

Layout Event Methods

Page Attributes Method Parameters

Events Standard Parameters

© 2004 SEAL - All rights reserved

a simple BSP page that ... <%@page language="abap"%>

© 2004 SEAL - All rights reserved

Model View Controller

© 2004 SEAL - All rights reserved