business server pages - primer

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

SAP

© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal

So what is NetWeaver?

Mobile Infrastructure

• Access via voice, mobile, or radio-frequency technology

Enterprise Portal• Personalized, and role-based access; Knowledge management services

Business Warehouse/

Strategic Enterprise

Management

• Robust suite of business intelligence tools for interactive reports & analytics

Master Data Management

• Ensures data integrity and consistency• Enables sharing of harmonized master data

Exchange Infrastructure

(XI)

• XML-based integration between applications & partners

Web ApplicationServer(WAS)

• Web services development (J2EE and ABAP flavor)

• Replaces “Basis” technology.

An integrated “stack” for People, Process, Information, & Application Integration


NetWeaver’s value proposition depends on what is being leveraged (and in what combination)

Enterprise Portal • Job simplification• Increased Efficiency & Effectiveness• Collaboration

BW/Analytics/ KM • Effectiveness of decisions• Ability to react/predict trends and events

Master Data Management

• Higher quality data• Less time required for cleansing/maintenance

Process Integration/XI

• Reduced integration costs• Speed to integration

WAS • Simplified development environment

Top-line Growth • Tied directly to business initiatives

Infrastructure • Reduced license fees & integration costs• IT skills consolidation

Element Value Areas


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

BSP Goals


Business Server Pages Business Server Pages

User InteractionUser Interaction

Database AccessDatabase Access

BSP Extensions BSP Extensions

Model View Controller 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

Attributes

Application Class

Methods

BSP Application

Events

BSP PageBSP Page

BSP Page

BSP Page

BSP = business server pages BSP page

Layout (HTML and BSP tags) Parameters Event Handler (ABAP)

Initialization Layout Manipulation Input Processing

Runtime: Generated ABAP class


BSP Application

Designtime: BSP Application

BSP Page

Page Attributes

Events

Layout

Runtime: generated ABAP Class

Application

Class

Layout Method

Event Methods

Method Parameters

Standard Parameters

+


Business Server Pages - Hello World

a simple BSP page that ...• shows serverside scripting with ABAP or JavaScript

• contains static HTML (or XML, or...) parts mixed with serverside scripting

• is similar to Active Server Pages (Microsoft) or Java Server Pages

• is accessible via URL like common pages of a web server

<%@page language="abap"%><html><body><center><% do 5 times. %> <font size=<%=sy-index%>> Hello World! <br> </font><% enddo. %></center></body></html>

<%@page language="javascript"%><html><body><center><% for(i=0;i<5;i++) { %> <font size=<%=i%>> Hello World! <br> </font><% } %></center></body></html>


BSP – Initialization and Layout

select * from sflight into table flights. Initialization

Layout

The Layout part contains script code mixed with

static formatting directives (e.g. HTML).

The data sources declared as page

attributes are directly accessible in the

Initialization and Layout step.

Business Server Page

Attribute Typ. Ass.TypeFLIGHTS TYPE FLIGHTTAB

Page Attributes

<%@page language="abap"%><html><body><table border=1> <tr> <th>Carrier</th> <th>Connection</th> <th>Date</th> </tr><% data: wa like line of flights. loop at flights into wa. %> <tr> <td> <%= wa-carrid %> </td> <td> <%= wa-connid %> </td> <td> <%= wa-fldate %> </td> </tr><% endloop. %></table></body></html>

Every page has a defined step for data retrieval that

is used in the Layout step.


Event Handler

Events that are called during the processing of the request of the pageOnInitialization

• 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 sectionexample: tables that are filled in the Initialization step and used in the Layout step


Application Class

Attributes

Application Class

Methods

BSP Application

BSP PageBSP

BSP

BSP Page<html>...<% application->... %>

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


HTML Forms

Used for user Input• texts• list boxes• checkboxes• file upload ...

Input is transferred via GET or POST request to the server

• as part of the URL• as part of the request body

<form action="/cgi-bin/proc.pl" method=get> your Nickname: <input type=text name="nickname"> <input type=submit name="Submit"></form>

<form method=get> <input type=checkbox name="sel" value="apple"> Apple <input type=checkbox name="sel" value="orange"> Orange <input type=checkbox name="sel" value="cherry"> Cherry <input type=submit name="Submit"></form>

<form action="/cgi-bin/procxls.pl" method=post> 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 simple BSP pages

InitializationData retrieval dependingon input parameters

Layoutrendering of the page processing the scriptingcode



BSPRuntime

Response

HTTP POSTHTTP GET

InitializationData retrieval depending on input parameters


User enters data and clicks

a button

select * from ... into table it.call function ...

<HTML><BODY><% do ... end do. %> <bsp:button ...><form >

Response

FirstPage.htmSecondPage.htm

User enters a URL

<HTML><BODY><% loop at it %><tr><td><%=it-a%></td><td><%=it-b%></td></tr><% endloop. %> <formmethod=“secd.htm“><input type=submitvalue=“OnHugo“></form>

Runtime determinesBSP App and Page

That POSTrequests e.g.another page


Where to do the Input Processing?

Problem with such direct navigation:• User input from page X must be processed by the Initial-isation of the next page Y• But in most cases the next page Y depends on the input of page X. („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 next page

...

<form ...><input type=text name=“state“...></form>

if state ... select * ... itStreetsif number ...endif.

<html>price:...

Adress.htm

...

<form ...><input type=text name=“number“...></form>

Order.htm

PriceInfo.htm

<html>SORRY!Your selected product...</html>

NotAvail.htm


Business Server Pages - Input Processing

...<form method="post"> <input type=text name= "carrier" value=""> <input type=submit name="OnInputProcessing" value="Search"></form>...

Layout

depending on the user’s input (input fields,

pressed buttons, links) the Input Processing

allows database updates and the dynamic

navigation to the next page

Input Processing

Business Server Page... Initialization

data: carr TYPE string. carr = request->get_form_field( 'carrier' ). navigation->set_parameter( name = ‘sel_carr' value = carr ). navigation->goto_page('flights.htm' ).

InputProcessing


BSPs - Input Processing Event ID

...<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>...

Layout

more then one submit button can be

distinguished by an arbitrary event name that is available as EVENT_ID in the Input Processing

Input Processing

Business Server Page... Initialization

case event_id.

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.

InputProcessing


Flow within BSP pages with Input Processing


Layoutrendering of the page

Input Processingevent handlingretrieval of user inputnavigation to next page



Input Processingevent handlingretrieval of user inputnavigation to next page

BSPRuntime

HTTP GET

Response

HTTP POST

REDIRECT

HTTP GET

InitializationData retrieval depending on input parameters


Response

Runtime determinesBSP App and Page

That GETrequests anew page

FirstPage.htmSecondPage.htmUser enters

data and clicks a button

User enters a URL

select * from ...call function ...

<HTML><BODY><% loop at it %><tr><td><%=it-a%></td><td><%=it-b%></td></tr><% endloop. %> <form><input type=submitvalue=“OnHugo“></form>

Case event_id.When ‘submit‘. ...

When ‚‘exit‘. Navigation->...

Endcase.


BSP Process Flow

Initialization

Layout RenderingRendering

Input Processing





BSP ExtensionsBSP Extensions



BSP Extensions

Uniform look&feel Built-in functionality

Scrolling Sort ...

Reusable rendering Browser-independent

<table>

...75 lines of HTML

...tons of javaScript

...some scripting

</table>

HTMLBSP Extension

Element

<htmlb:tableView id ="table"table ="<%=FLIGHTS%>"rowCount ="15"headerVisible="true"design

="ALTERNATING" />


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”





BSP ExtensionsBSP Extensions



Model-View-Controller (MVC)

Request

Response

Attributes

Application Class

Methods

events

<form ...><input application->...></form>

BSP page

Layout rendering and event handling is done by the pages

Business logic included via Application Class Flow between pages defined in event handler


Model-View-Controller (MVC)

Design Pattern for decoupling presentation and logic of an application

ControllerRequest

ViewResponse

Model

Handle Events Update application data Define control flow

Handle Events Update application data Define control flow

Defines application data Usually connected to

business functionality

Defines application data Usually connected to

business functionality

Visualization of the application data

Visualization of the application data


Model-View-Controller in BSPs

Request

Response <form ...><input ...></form>

BSP View

METHODDO_REQUEST ... CALL_VIEW

BSP Controller

Attributes

Application Class

Methods

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


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 - primer

Documents