Web Development With The ABAP Workbench

SAP TechEd ‘03 Basel
Web Development
with the ABAP
Workbench
Rüdiger Kretschmer Thomas Fiedler

Development Manager, SAP AG Developer, SAP AG
Learning Objectives
As a result of this workshop, you will

be able to:
understand the BSP programming model
understand the Web Dynpro programming model in ABAP
differentiate between these two paradigms
start your own development with either method
 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler
© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

Agenda
Business Server Pages

Programming Model
Event Handlers
BSP Extensions
Demo/Exercise
Web Dynpro ABAP

Motivation
Programming Model
Runtime
Demo/Exercise
Summary
BSP - Goals
Bring SAP Business

applications and the Web
together
Allow ABAP programmers to
build new Web applications as
well as Web front-ends for
existing SAP components
Reduce costs of building Web
applications
Manage all aspects of your
Web application in one single
system
Support Web standards
Provide high scalability based
on proven SAP Application
Server technology

What is it, a BSP?
A simple BSPage is a document that ... <%@page language="abap"%> Layout

resides on the server <html><body>
<table border=1>
contains static HTML (or XML, <tr>
<th>Carrier</th>
WML, or...) parts mixed with <th>Connection</th>
<th>Date</th>
serverside scripting <th>Price</th>
<th>Currency</th>
has ABAP as scripting language </tr>
<% data: wa type sflight.
loop at flights into wa. %>
has predefined events to allow for <tr>
<td> <%= wa-carrid %> </td>
processing of input data <td> <%= wa-connid %> </td>
<td> <%= wa-fldate %> </td>
<td> <%= wa-price %> </td>
data retrieval <td> <%= wa-curreny %> </td>
</tr>
input validation <% endloop. %>
</table>
</body></html>
error handling
navigation

is accessible via a URL
Layout with ABAP Scripting
Business Server Page
Attribute Typ. Ass.Type Page Attributes

FLIGHTS TYPE FLIGHTTAB
select * from sflight into table flights. Initialization
The Layout part contains

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

BSP Process Flow
Initialization
Layout Rendering
Input Processing
BSP Extensions
Uniform look&feel
Built-in functionality
Scrolling, Sorting
Meta data
...
Unified rendering
Browser-independent
<table> HTML
Tag library concept
...75 lines of HTML
...tons of javaScript
<htmlb:tableView BSP Extension
...some scripting
id ="table"
</table> table ="<%=FLIGHTS%>"
rowCount ="15"
headerVisible="true"
design ="ALTERNATING"
/>

Standard Extension Library Elements for BSP
<textView> <group> <fileUpload>

<textEdit> <groupBody> <chart>
<button> <tray> <tableView>
<inputField> <trayBody> <dateNavigator>
<tabStrip>
<itemList>
<breadCrumb>
<comboBox>
<listBox>
<radioButtonGroup>
<checkBoxGroup>
<checkBox>
<tree>
<treeNode>
<form>
<link>
<gridLayout>
<gridLayoutCell>
<image>
Tag Browser
Browse available BSP Extensions and tags

Insert tags using drag&drop

BSP Extension Framework
BSP page
<%@ extension name="MyExtension" prefix="test" %>
<test:doSomething />
BSP Extension Definition Class CL_MYCLASS

Extension MyExtension method DO_AT_BEGINNING
... …
Element doSomething out->print_string('<tr><td>..').
Element-Handler CL_MYCLASS
...
Composite BSP Extensions
The Goal
unified UI for the whole application
identify typical patterns
List – Detail
Search
Form
build special Composite Extensions
only use these elements for a set of applications (e.g. CRM )
UI Basis for CRM

CRM Example Layout
Unified Rendering Benefits
Single common source base for Rendering and Style of UI

Elements defined by Product Design Center (PDC)
Guarantee of
Platform independence
Common look and feel
Common branding
Multibrowser support
Accessibility
Automated generation of rendering code
Same look and feel for BSP, Web Dynpro, EP6
All new UI Elements are approved by SAP Control Governance

Demo
Demo
Business Server Pages: Exercise
Now it‘s time for the first exercise:
Please log onto the training system

with the following user ID
ABAP258_##
where ## is your group ID
Password
init

Motivation Web Dynpro for ABAP
Features of BSP
freestyle HTML based UIs
possible
reusable tag libraries allow
also faster and consistent UI Web
development Browser
MVC paradigm supported
but
strictly based on web
technologies (http, HTML,
browser,...) http://......
only part of Web AS ABAP

server
Motivation Web Dynpro for ABAP
Web Dynpro
Web Fat other?
UI definition
Browser Client
independent of display
technology
as much abstract
declaration and as few http://...... TCP/IP ???
coding as possible
Rendering Rendering Rendering
supported on different
Engine Engine Engine
server platforms and
languages
(Java AND ABAP)
Meta Data
Web Dynpro

Concepts: View, View Controller, View Context
Window
View View Controller

Context
Root Node
Node 1
Attribut1
Attribut2
Node 2
Concepts: Component Controller and Context
Component Component Controller
Window Mapping of
View Controller
context data
View
Context
Root Node
Node 1 Context Component
Controller
Root Node
Node 2
Node 1
View Controller
View
View View Controller Node 2
Label
Context
Label Context
Root Node
Node 1 Root Node
Press
Attribut1 Node 1
Attribut2 Attribut1
Attribut2
Node 2
Node 2

Concepts: Plugs, Navigation
Outbound Plug
Window
...fire_out_plg...
Inbound Plug
Click
Event Handler
View Controller View
Concepts: Component, Application, Rendering
Application Component Component Controller

Window
Context
Context
Root Node
Root Node Node 1
Node 1
Node 2
Context
Root Node
Node 1
Rendering Engines
CSF SSR XML

Concepts: Unified Rendering
JAVA ABAP
Java
Component Component Java
Component Component
Window Controller Window Controller
View View Context View View Context

Controller Root Controller Root
Node Node
Context Context
Root Root
Node 1 Node 1
Node Node
Unified Rendering Generation
Rendering Engines Rendering Engines

XML SSR CSF CSF SSR XML
Exercise Web Dynpro for ABAP
Window Component
Controller
View Search View Controller
Context
Context
Root Node
Node 1 Root Node
Node 1
Node 2
View Display View Controller
Context
Root Node
Node 1

Summary

Freestyle web design possible
BSP Extensions
MVC model supported
Web Dynpro ABAP

UI definition independent of web technology
Abstract UI declaration
Graphical Web Dynpro design tool in SE80
Identical concept to Web Dynpro Java
Demo
Demo

Business Server Pages: Exercise
Now it‘s time for the second exercise:
Please log onto the training system

with the following user ID
ABAP258_##
where ## is your group ID
Further Information
Î Public Web:
www.sap.com Î Solutions Î SAP Netweaver
SAP Customer Services Network: www.sap.com/services/
Î Consulting Contact
Roy Wood, VP SAP Consulting
Î Related SAP Education Training Opportunities

http://www.sap.com/education
NET200, Develop Web Apps for the Internet
Î Related Workshops/Lectures at SAP TechEd 2003

ABAP259 How to Convert Your ABAP Dynpro into Web Dynpro Metadata
10/02/2003, 2:00 PM , Room 12

Questions?
Q&A
Feedback
Please complete your session evaluation and

drop it in the box on your way out.
Thank You !
The SAP TechEd ’03 Basel Team

Copyright 2003 SAP AG. All Rights Reserved
No part of this publication may be reproduced or transmitted in any form or for any purpose without the express
permission of SAP AG. The information contained herein may be changed without prior notice.
Some software products marketed by SAP AG and its distributors contain proprietary software components of other
software vendors.
Microsoft®, WINDOWS®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® are registered trademarks of
Microsoft Corporation.
IBM®, DB2®, DB2 Universal Database, OS/2®, Parallel Sysplex®, MVS/ESA, AIX®, S/390®, AS/400®, OS/390®,
OS/400®, iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere®, Netfinity®, Tivoli®, Informix
and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries.
ORACLE® is a registered trademark of ORACLE Corporation.
UNIX®, X/Open®, OSF/1®, and Motif® are registered trademarks of the Open Group.
Citrix®, the Citrix logo, ICA®, Program Neighborhood®, MetaFrame®, WinFrame®, VideoFrame®, MultiWin® and
other Citrix product names referenced herein are trademarks of Citrix Systems, Inc.
HTML, DHTML, XML, XHTML are trademarks or registered trademarks of W3C®, World Wide Web Consortium,
Massachusetts Institute of Technology.
JAVA® is a registered trademark of Sun Microsystems, Inc.
JAVASCRIPT® is a registered trademark of Sun Microsystems, Inc., used under license for technology invented
and implemented by Netscape.
MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One.
SAP, R/3, mySAP, mySAP.com, xApps, xApp and other SAP products and services mentioned herein as well as
their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other
countries all over the world. All other product and service names mentioned are the trademarks of their respective
companies.

Web Development With The ABAP Workbench

Uploaded by

Document Information

Original Description:

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

Web Development With The ABAP Workbench

Uploaded by

Copyright:

Available Formats

SAP TechEd ‘03 Basel

Rüdiger Kretschmer Thomas Fiedler

As a result of this workshop, you will

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

Business Server Pages

Web Dynpro ABAP

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

 Bring SAP Business

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

What is it, a BSP?

A simple BSPage is a document that ... <%@page language="abap"%> Layout

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

Layout with ABAP Scripting

Business Server Page

Attribute Typ. Ass.Type Page Attributes

select * from sflight into table flights. Initialization

The Layout part contains

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

BSP Process Flow

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

Standard Extension Library Elements for BSP

<textView> <group> <fileUpload>

 Browse available BSP Extensions and tags

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

BSP Extension Framework

<%@ extension name="MyExtension" prefix="test" %>

BSP Extension Definition Class CL_MYCLASS

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

Composite BSP Extensions

UI Basis for CRM

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

CRM Example Layout

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

Unified Rendering Benefits

 Single common source base for Rendering and Style of UI

 Automated generation of rendering code

 Same look and feel for BSP, Web Dynpro, EP6

 All new UI Elements are approved by SAP Control Governance

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

Business Server Pages: Exercise

Now it‘s time for the first exercise:

Please log onto the training system

where ## is your group ID

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

Motivation Web Dynpro for ABAP

 only part of Web AS ABAP

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

Motivation Web Dynpro for ABAP

 SAP AG 2003, ABAP 258, Rüdiger Kretschmer, Thomas Fiedler

© 2003 SAP AG ABAP258, Rüdiger Kretschmer, Thomas Fiedler

Concepts: View, View Controller, View Context

View View Controller

Bring SAP Business

<textView> <group> <fileUpload>

Browse available BSP Extensions and tags

Single common source base for Rendering and Style of UI

Automated generation of rendering code

Same look and feel for BSP, Web Dynpro, EP6

All new UI Elements are approved by SAP Control Governance

only part of Web AS ABAP