Developing Web Applications With ABAP: 6$3 6$3 7HFKQ 7hfkqllfdo (G Fdo (GXXFDWLR FDWLRQQ &RQ &rqiihu Huhhqfh QFH

6$3 6.
,//6 &21)(5(1&( 1)(5(1&( 6$3 81,9(56,7< 9(56

:25.6 +23 :25.6+
Oct. 28 Oct. 30, 02 St.Leon-Rot
Developing Web Applications with ABAP

Ulrich Klingels, SAP AG
Learning Objectives
$V D U HVX OW RI WKLV Z RUNVKRS \RX ZLOO UHVXO ZR
T T T T
Understand the Serverside Scripting model BSP Know how to use the BSP Extensions... ...and the Model View Controller concept See the way to Web Dynpro development in ABAP
SAP AG 2002, SAPSkills Conference, Klingels / 2
Agenda
T T T T T
Business Server Pages BSP Extensions Model View Controller Outlook Web Dynpro for ABAP Summary
%DVLFVRI%XVLQHVV 6HUYHU3DJHV
Business Server Pages - Hello World

D VLPSOH %63 SDJH WKDW
ABAP
<%@page language="abap"%> <html> <body> <center> <% do 5 times. %> <font size=<%=sy-index%>> Hello World! <br> </font> <% enddo. %> </center> </body> </html> Layout
T Shows serverside scripting with T Contains static HTML (or XML,

or...) parts mixed with serverside scripting (Microsoft) or Java Server Pages common pages of a web server
T Is similar to Active Server Pages T Is accessible via URL like
BSP Application Structure

%63 $SSOLFDWLRQ
BSP Application
BSP Page <html> ... BSP <% loop at itab.... %> BSP BSP Page
T Business Server Pages
T Arbitrary additional files T Application class, that T Accesses backend

functionality
which define the Web UI and contain serverside scripting (Images, background pics, button GIFs,...), Style-Sheets, etc.
Application Class
Attributes Methods
contains the application logic
6HSDUDWLRQ RI SUHVHQWDWLRQ DQG EXVLQHVV ORJLF
Business Object Class Attributes Attributes Methods Attributes Methods Methods
Business Object Class Business Object Class
Demo
'HPR
'DWDEDVH$FFHVVLQ %63$SSOLFDWLRQV
BSP Initialization and Layout

Business Server Page Attribute Typ. FLIGHTS TYPE Ass.Type FLIGHTTAB Page Attributes
select * from sflight into table flights.
Initialization
Every page has a defined step for data retrieval that is used in the layout step.
<%@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>
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.
Event Handler
(YHQWV WKDW DUH FDOOHG GXULQJ WKH SURFHVVLQJ RI WKH UHTXHVW RI WKH SDJH 2Q,QLWLDOL]DWLRQ
T called before the T for data retrievel
page is rendered
2Q,QSXW3URFHVVLQJ
input
T handling of the user T at first creation of

the page
2Q&UHDWH

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 Page BSP <html> ... 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
&RQWDLQV DUELWUDU\ ILOHV WKDW DUH XVHG E\ %63 $SSV
T Images T Backgrounds T Static HTMLs T Style sheets T ... T Translation T Transport
,V SDUW RI WKH LQIUDVWUXFWXUH
,V DFFHVVLEOH YLD +773

+DQGOLQJ8VHU ,QWHUDFWLRQ
HTML Forms
8VHG IRU XVHU LQSXW
T texts T list boxes T checkboxes T file upload ...
<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>
,QSXW LV WUDQVIHUUHG YLD *(7 RU 3267 UHTXHVW WR WKH VHUYHU
T as part of the URL T as part of the request body
Demo
'HPR
Where to do the Input Processing?

3UREOHP ZLWK VXFK GLUHFW QDYLJDWLRQ
Adress.htm
... <form ...> <input type=text name=state ...> </form>
Order.htm
... <form ...> <input type=text name=number ...> </form>
T User input from page X T complex initialization
must be processed by the initialization of the next page Y coding for events coming from an arbitrary number of other pages
T In most cases the next
PriceInfo.htm
if state ... select * ... itStreets if number ... endif. <html> price:...
NotAvail.htm
page Y depends on the input of page X. (Youre wrong here! code)
<html> SORRY! Your selected product... </html>
Event after the Input

6ROXWLRQ IRU WKH QDYLJDWLRQ SUREOHP
Adress.htm
... <form ...> <input type=text name=state ...> </form> if state... navigation->
Order.htm
... <form ...> <input type=text name=number ...> </form> if number... navigation->
T It would be much better to
T New user input handling
process the input coming from page X at the end of page X and then to determine the next page event OnInputProcessing that belongs to the page which contains the HTML form dynamically, depending on the users input
PriceInfo.htm
if state ... select * ... itStreets if number ... endif. <html> price:...
NotAvail.htm
T Navigation to next pages
<html> SORRY! Your selected product... </html>
Business Server Pages - Input Processing

Business Server Page ... Initialization Layout ... <form method="post"> <input type=text name= "carrier" value=""> <input type=submit name="OnInputProcessing" value="Search"> </form> ...
data: carr TYPE string. carr = request->get_form_field( 'carrier' ). navigation->set_parameter( name = sel_carr' value = carr ). navigation->goto_page('flights.htm' ).
Input Processing InputProcessing
depending on the users input (input fields, pressed buttons, links) the Input Processing allows database updates and the dynamic navigation to the next page
BSPs - Input Processing Event ID

Business Server Page ... 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> ...
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.
Input Processing InputProcessing
more then one submit button can be distinguished by an arbitrary event name that is available as EVENT_ID in the Input Processing
%63([WHQVLRQV
BSP Extensions
T T T T
Uniform look&feel Built-in functionality
Scrolling Sort ...
Reusable rendering Browser-independent
<table> ...75 lines of HTML ...tons of javaScript ...some scripting </table>
<htmlb:tableView id ="table" table ="<%=FLIGHTS%>" rowCount ="15" headerVisible="true" design ="ALTERNATING" />
HTML
BSP Extension element
BSP Extensions Tag Libraries

7DJ /LEUDULHV
T Well known from JSP T User defined tags linked T Program coding that
with generates at runtime the HTTP response (TableView, TreeView, InputFields,...)
T Predefined UI elements T Flicker free (delta T Browser independent

handling)
Demo
'HPR
HTML-Business Extension - UI-Elements for BSP
T<textView> T<textEdit> T<button> T<inputField> T<tabStrip> T<itemList> T<breadCrumb> T<comboBox> T<listBox> T<radioButtonGroup> T<checkBoxGroup> T<checkBox> T<tree> T<treeNode> T<form> T<link> T<gridLayout> T<gridLayoutCell> T<image>
T<group> T<groupBody> T<tray> T<trayBody>
T<fileUpload> T<chart> T<tableView> T<dateNavigator>
Composite BSP Extensions
7KH JRDO
T Unified UI for the T Identify typical

patterns
whole application
T Build special
composite Extensions
T List Detail T Search T Form
BSP Extension Framework - Concept

BSP page
<%@ extension name="MyExtension" prefix="ext" %> <ext:doSomething />
BSP Extension Definition

Extension ... Element Element-Handler ... doSomething CL_MYCLASS MyExtension
Class CL_MYCLASS method DO_AT_BEGINNING out->print_string('<tr><td>').
0RGHO9LHZ&RQWUROOHU
Model-View-Controller (MVC)
Design pattern for decoupling presentation and logic of an application
Request
Controller
T Handle events T Handle events T Update application data T Update application data T Define control flow T Define control flow
Model
T Defines application data T Defines application data T Usually connected to T Usually connected to
business functionality business functionality
Response
View
T Visualization of the T Visualization of the

application data application data
BSP page
T T T
Layout rendering and event handling is done by the pages Business logic included via application class Flow between pages defined in event handler
Request
BSP page
events <form ...> <input application-> ...> </form>
Response
Application Class
Attributes Methods
Model-View-Controller in BSPs
T T T
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
Request
BSP Controller
METHOD DO_REQUEST ... CALL_VIEW
Application Class
Attributes Methods
BSP View
Response
<form ...> <input ...> </form>
Demo
'HPR
Complex MVC Scenarios
T T
Complex call sequence during one HTTP request Parts of a page aggregated during runtime
BSP Controller
BSP View
BSP View
BSP View
BSP Controller
Request Response
BSP Controller
METHOD DO_REQUEST CALL_VIEW CALL_CONTR
BSP View
controller and views combined into components
BSP Controller
BSP View
Demo
'HPR
:HE '\QSUR IRU$%$3
Web Dynpro as a Unification Platform

'HOLYHU DQ (QWHUSULVH 4XDOLW\ :HE 'HYHORSPHQW (QYLURQPHQW
T Minimize coding, maximize design T Support reuse of components T Support web services and data-binding T Separate layout and programming logic T From platform T From UI technology
Web Dynpro Tools
Web Dynpro Meta-Data
Web Dynpro Runtime

.NET J2EE ABAP
$FKLHYH ,QGHSHQGHQFH
,PSURYH 8VHU ([SHULHQFH WKURXJK D +LJK )LGHOLW\ :HE 8,
T Browser based front-end, zero footprint T Flicker-free screen, minimal refreshes T Client-side dynamics T Minimal response times T Personalization of the user interface T 508 accessibility compliance
0XOWL 'HYLFH ,QWHUQHW 0XOW ,QWHUQHW
Web Dynpro Landscape

Web Dynpro Meta-Data
Platform-independent C# Java ABAP
Web Dynpro Tools
Dynpro Converter
C# Generator C# / .NET .NET Runtime
Java Generator Java / J2EE Java Runtime
ABAP Generator
Dynpros
ABAP ABAP Runtime
WD WD Services Controls .NET .NET
WD WD Services Controls J2EE J2EE
WD WD Services Controls ABAP ABAP
Web Dynpro Unified UI Elements

Web Dynpro Unified Rendering
Web Dynpro Common Runtime Services
Portal Services Native Web AS Services
Web Dynpro Architecture ABAP
Designtime
WD Tools (SE80)
Project Browser View Designer Application Modeler Model Editor
Runtime
WD Runtime for ABAP
Generator
Controller /Context Editor
Metadata API
Runtime Metadata API
Design time Objects
Gen. Runtime Objects
Database
Tools ABAP Workbench (SE80) Integration
T T T T
New object list for Web Dynpro Component Tool navigation Active/InactiveManagement Integrated in the Transport Organizer
Tools Application Modeller

)XQFWLRQDOLW\
T Hierarchical editing of Viewset hierarchy T Hierarchical/table editing of navigational links T Wizards for optimizing complex operations T Property box T No graphical support
Tools - View Designer
Trigger events
Construction / manipulation of UI Tree using Metadata API
Render (UR)
Controller Editor
)XQFWLRQDOLW\
T Tabstrip for entities (e.g. events, validators, eventhandlers, ) T Wizards for frequently used tasks T Integrated method editor (syntax check, ) T Automatic code generation T Synchronization of T Separation of generated
declarative and coded parts and manually implemented parts
Context Editor
)XQFWLRQDOLW\
T Hierarchical editing of context T Data binding T Drag and drop support T Property box T Context view for View
Designer nodes/attributes
Pattern-based UI Design
&RQVLVWHQW 8VHU ,QWHUIDFHV

T faster learning, less training T less user specialization T Business Processes T T
7KUHH OHYHOV RI 8, SDWWHUQV

screen layout, interaction and semantics for a generic application Components reusable, task-oriented building blocks Controls atomic elements in the layout, constitute the look & feel
Business Processes
Components
$VVHPEO\OLQH 'HYHORSPHQW RI 8,V
T Developing a User Interface = T less development, less

maintenance
parameterize a Business Process
Controls
Do's and Don'ts Writing BSP Applications

,VVXH
T You want to develop a web application based on Web AS 6.20. This is why you T You want to stay consistent with SAP's strategic Web Dynpro approach, and
have chosen Business Server Pages as the means to create your application. you expect that you can extend and modify your application in later releases via Web Dynpro tools. You are aware that BSP is one of the runtimes of Web Dynpro.
'R
V
T Use only BSP HTMLB Extensions (tags) T Use the Model-View-Controller (MVC) programming model offered by BSP T Clearly separate business from visualization logic T Do not use Web AS 6.10 T Do not use native HTML T Do not use scripting - neither client-side, nor server-side T Do not use "old" BSP Page based approach T Do not mix business with visualization logic
'RQW
V
Further Advice
T T T T T T T
Use the CL_BSP_MODEL base class for your models Do not use view attributes (except model references) Bind your tag attributes to the model only Use the <bsp:viewArea> tag to embed views in pages Make sure that your view layouts do not contain <htmlb:content>, <htmlb:form>, <htmlb:page> or <htmlb:document * > tags Do not use the BSP NAVIGATION object Make your application stateful
Summary
T T T T T
BSP: Serverside Scripting Model Free HTML: max flexibility BSP Extensions: predefined UI elements Model View Controller: mighty framework for structuring Web Dynpro: Tools, generators for max. productivity
"
Copyright 2002 SAP AG. All Rights Reserved

T T T T T T T T T T T T
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 Markets and Commerce One. SAP, SAP Logo, R/2, R/3, mySAP, mySAP.com 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 trademarks of their respective companies.

Developing Web Applications With ABAP: 6$3 6$3 7HFKQ 7hfkqllfdo (G Fdo (GXXFDWLR FDWLRQQ &RQ &rqiihu Huhhqfh QFH

Încărcat de

Informații document

Descriere originală:

Titlu original

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Developing Web Applications With ABAP: 6$3 6$3 7HFKQ 7hfkqllfdo (G Fdo (GXXFDWLR FDWLRQQ &RQ &rqiihu Huhhqfh QFH

Încărcat de

Drepturi de autor:

Formate disponibile

6$3 6.

,//6 &21)(5(1&( 1)(5(1&( 6$3 81,9(56,7< 9(56

Oct. 28 Oct. 30, 02 St.Leon-Rot

Developing Web Applications with ABAP

SAP AG 2002, SAPSkills Conference, Klingels / 2

SAP AG 2002, SAPSkills Conference, Klingels / 3

SAP AG 2002, SAPSkills Conference, Klingels / 4

Business Server Pages - Hello World

T Shows serverside scripting with T Contains static HTML (or XML,

T Is similar to Active Server Pages T Is accessible via URL like

SAP AG 2002, SAPSkills Conference, Klingels / 5

BSP Application Structure

T Business Server Pages

T Arbitrary additional files T Application class, that T Accesses backend

contains the application logic

6HSDUDWLRQ RI SUHVHQWDWLRQ DQG EXVLQHVV ORJLF

Business Object Class Attributes Attributes Methods Attributes Methods Methods

Business Object Class Business Object Class

SAP AG 2002, SAPSkills Conference, Klingels / 6

SAP AG 2002, SAPSkills Conference, Klingels / 7

SAP AG 2002, SAPSkills Conference, Klingels / 8

BSP Initialization and Layout

select * from sflight into table flights.

SAP AG 2002, SAPSkills Conference, Klingels / 9

T called before the T for data retrievel

T handling of the user T at first creation of

SAP AG 2002, SAPSkills Conference, Klingels / 10

SAP AG 2002, SAPSkills Conference, Klingels / 11

SAP AG 2002, SAPSkills Conference, Klingels / 12

T Images T Backgrounds T Static HTMLs T Style sheets T ... T Translation T Transport

,V SDUW RI WKH LQIUDVWUXFWXUH

,V DFFHVVLEOH YLD +773

SAP AG 2002, SAPSkills Conference, Klingels / 14

T texts T list boxes T checkboxes T file upload ...

,QSXW LV WUDQVIHUUHG YLD *(7 RU 3267 UHTXHVW WR WKH VHUYHU

T as part of the URL T as part of the request body

SAP AG 2002, SAPSkills Conference, Klingels / 15

SAP AG 2002, SAPSkills Conference, Klingels / 16

Where to do the Input Processing?

T User input from page X T complex initialization

T In most cases the next

page Y depends on the input of page X. (Youre wrong here! code)

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

SAP AG 2002, SAPSkills Conference, Klingels / 17

Event after the Input

T It would be much better to

T New user input handling

T Navigation to next pages

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

SAP AG 2002, SAPSkills Conference, Klingels / 18

Business Server Pages - Input Processing

Input Processing InputProcessing

SAP AG 2002, SAPSkills Conference, Klingels / 19

BSPs - Input Processing Event ID

Input Processing InputProcessing

SAP AG 2002, SAPSkills Conference, Klingels / 20

SAP AG 2002, SAPSkills Conference, Klingels / 21

Uniform look&feel Built-in functionality

Scrolling Sort ...

Reusable rendering Browser-independent

<table> ...75 lines of HTML ...tons of javaScript ...some scripting </table>

BSP Extension element

,//6 &21)(5(1&( 1)(5(1&( 6$3 81,9(56,7< 9(56

,PSURYH 8VHU ([SHULHQFH WKURXJK D +LJK )LGHOLW\ :HE 8,

$VVHPEO\OLQH 'HYHORSPHQW RI 8,V