Business Server Pages - Primer
-
Upload
vallabhaneni-srinivas-srinivas -
Category
Documents
-
view
64 -
download
2
Transcript of 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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Business Server Pages Business Server Pages
User InteractionUser Interaction
Database AccessDatabase Access
BSP Extensions BSP Extensions
Model View Controller Model View Controller
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
WAS server architecture
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
WAS functionalities
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
+
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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>
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Business Server Pages Business Server Pages
User InteractionUser Interaction
Database AccessDatabase Access
BSP Extensions BSP Extensions
Model View Controller Model View Controller
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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.
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
...
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Business Server Pages Business Server Pages
User InteractionUser Interaction
Database AccessDatabase Access
BSP Extensions BSP Extensions
Model View Controller Model View Controller
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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>
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Flow within simple BSP pages
InitializationData retrieval dependingon input parameters
Layoutrendering of the page processing the scriptingcode
InitializationData retrieval dependingon input parameters
Layoutrendering of the page processing the scriptingcode
BSPRuntime
Response
HTTP POSTHTTP GET
InitializationData retrieval depending on input parameters
Layoutrendering of the page processing the scriptingcode
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Flow within BSP pages with Input Processing
InitializationData retrieval dependingon input parameters
Layoutrendering of the page
Input Processingevent handlingretrieval of user inputnavigation to next page
InitializationData retrieval dependingon input parameters
Layoutrendering of the 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
Layoutrendering of the page
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.
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
BSP Process Flow
Initialization
Layout RenderingRendering
Input Processing
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Business Server Pages Business Server Pages
User InteractionUser Interaction
Database AccessDatabase Access
BSP ExtensionsBSP Extensions
Model View Controller Model View Controller
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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" />
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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.
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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”
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Business Server Pages Business Server Pages
User InteractionUser Interaction
Database AccessDatabase Access
BSP ExtensionsBSP Extensions
Model View Controller Model View Controller
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
Web dynpro
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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
© 2004 SEAL - All rights reservedBusiness Server Pages, Anupam Jaiswal
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