Web Development with the ABAP Workbench

Rüdiger Kretschmer
Development Manager, SAP AG

Thomas Fiedler
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

Agenda Business Server Pages Programming Model Event Handlers BSP Extensions Demo/Exercise Web Dynpro ABAP Motivation Programming Model Runtime Demo/Exercise Summary  SAP AG 2003. ABAP 258. Thomas Fiedler BSP . ABAP 258. Rüdiger Kretschmer.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  SAP AG 2003. Rüdiger Kretschmer. Thomas Fiedler .

%> <tr> <td> <%= wa-carrid %> </td> <td> <%= wa-connid %> </td> <td> <%= wa-fldate %> </td> <td> <%= wa-price %> </td> <td> <%= wa-curreny %> </td> </tr> <% endloop. loop at flights into wa. %> <tr> <td> <%= wa-carrid %> </td> <td> <%= wa-connid %> </td> <td> <%= wa-fldate %> </td> </tr> <% endloop.g.. Thomas Fiedler . FLIGHTS TYPE Ass. The data sources declared as page attributes are directly accessible in the Initialization and Layout step. resides on the server contains static HTML (or XML.) 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 <%@page language="abap"%> <html><body> <table border=1> <tr> <th>Carrier</th> <th>Connection</th> <th>Date</th> <th>Price</th> <th>Currency</th> </tr> <% data: wa type sflight... loop at flights into wa. <%@page language="abap"%> <html> <body> <table border=1> <tr> <th>Carrier</th> <th>Connection</th> <th>Date</th> </tr> <% data: wa type sflight. Rüdiger Kretschmer. WML. Initialization The Layout part contains script code mixed with static formatting directives (e.Type FLIGHTTAB Page Attributes select * from sflight into table flights. HTML). ABAP 258.What is it. ABAP 258. or.. Rüdiger Kretschmer. a BSP? A simple BSPage is a document that . Thomas Fiedler Layout with ABAP Scripting Business Server Page Attribute Typ. %> </table> </body> </html> Layout  SAP AG 2003. %> </table> </body></html> Layout  SAP AG 2003.

Thomas Fiedler BSP Extensions Uniform look&feel Built-in functionality Scrolling. ABAP 258. Rüdiger Kretschmer. ABAP 258.tons of javaScript . Sorting Meta data .....some scripting </table> BSP Extension <htmlb:tableView id ="table" table ="<%=FLIGHTS%>" rowCount ="15" headerVisible="true" design ="ALTERNATING" /> HTML Browser-independent Tag library concept  SAP AG 2003.. Unified rendering <table> . Rüdiger Kretschmer.. Thomas Fiedler .BSP Process Flow Initialization Layout Rendering Input Processing  SAP AG 2003.75 lines of HTML ...

Rüdiger Kretschmer. Thomas Fiedler . Rüdiger Kretschmer. Thomas Fiedler <group> <groupBody> <tray> <trayBody> <fileUpload> <chart> <tableView> <dateNavigator> Tag Browser Browse available BSP Extensions and tags Insert tags using drag&drop  SAP AG 2003. ABAP 258.Standard Extension Library Elements for BSP <textView> <textEdit> <button> <inputField> <tabStrip> <itemList> <breadCrumb> <comboBox> <listBox> <radioButtonGroup> <checkBoxGroup> <checkBox> <tree> <treeNode> <form> <link> <gridLayout> <gridLayoutCell> <image>  SAP AG 2003. ABAP 258.

Element Element-Handler . doSomething CL_MYCLASS MyExtension Class CL_MYCLASS method DO_AT_BEGINNING … out->print_string('<tr><td>.  SAP AG 2003... ABAP 258... ABAP 258. CRM ) UI Basis for CRM  SAP AG 2003. Rüdiger Kretschmer. Rüdiger Kretschmer.. Thomas Fiedler .'). Thomas Fiedler 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.BSP Extension Framework BSP page <%@ extension name="MyExtension" prefix="test" %> <test:doSomething /> BSP Extension Definition Extension .g.

Thomas Fiedler . Web Dynpro. Thomas Fiedler 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. ABAP 258. Rüdiger Kretschmer. ABAP 258.CRM Example Layout  SAP AG 2003. EP6 All new UI Elements are approved by SAP Control Governance  SAP AG 2003. Rüdiger Kretschmer.

ABAP 258. ABAP 258.Demo Demo  SAP AG 2003. Thomas Fiedler . Rüdiger Kretschmer. Rüdiger Kretschmer. Thomas Fiedler 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  SAP AG 2003.

...) only part of Web AS ABAP server http://. Business Server Pages  SAP AG 2003. Rüdiger Kretschmer.. Rendering Engine TCP/IP Rendering Engine ??? Rendering Engine Meta Data Web Dynpro  SAP AG 2003.Motivation Web Dynpro for ABAP Features of BSP freestyle HTML based UIs possible reusable tag libraries allow also faster and consistent UI development MVC paradigm supported Web Browser but strictly based on web technologies (http. Rüdiger Kretschmer.... ABAP 258.. ABAP 258. browser.. HTML.... Thomas Fiedler .. Thomas Fiedler Motivation Web Dynpro for ABAP Web Dynpro UI definition independent of display technology as much abstract declaration and as few coding as possible supported on different server platforms and languages (Java AND ABAP) Web Browser Fat Client other? http://.

ABAP 258. Rüdiger Kretschmer. ABAP 258. Thomas Fiedler Concepts: Component Controller and Context Component Window View View Controller Context Root Node Node 1 Component Controller Mapping of context data Context Component Controller Root Node Node 1 Node 2 View Controller View View View Controller Context Root Node Node 1 Attribut1 Attribut2 Node 2 Label Context Label Root Node Node 1 Press Attribut1 Attribut2 Node 2 Node 2  SAP AG 2003. View Controller. View Context Window View View Controller Context Root Node Node 1 Attribut1 Attribut2 Node 2  SAP AG 2003. Thomas Fiedler .Concepts: View. Rüdiger Kretschmer.

Click Event Handler View Controller Inbound Plug View  SAP AG 2003. Application. Rüdiger Kretschmer. ABAP 258. Thomas Fiedler . Rendering Application Component Window View View Controller Context Root Node Node 1 Component Controller Context Root Node Node 1 Node 2 View View Controller Context Root Node Node 1 Rendering Engines CSF SSR XML  SAP AG 2003. Navigation Outbound Plug Window View View Controller . Rüdiger Kretschmer..Concepts: Plugs.fire_out_plg. ABAP 258.. Thomas Fiedler Concepts: Component...

Concepts: Unified Rendering JAVA Componen Java t Window Component Controller View Controller Context Root Node 1 ABAP Componen Java t Window Component Controller View Controller Context Root Node 1 View Context Root Node Node View Context Root Node Node Unified Rendering Generation Rendering Engines Rendering Engines XML SSR CSF CSF SSR XML  SAP AG 2003. ABAP 258. Rüdiger Kretschmer. Thomas Fiedler . ABAP 258. Thomas Fiedler Exercise Web Dynpro for ABAP Window View Search View Controller Context Root Node Node 1 Component Controller Context Root Node Node 1 Node 2 View Display View Controller Context Root Node Node 1  SAP AG 2003. Rüdiger Kretschmer.

Thomas Fiedler Demo Demo  SAP AG 2003. Thomas Fiedler . ABAP 258. ABAP 258. Rüdiger Kretschmer.Summary Business Server Pages 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  SAP AG 2003. Rüdiger Kretschmer.

Room 12  SAP AG 2003. ABAP 258.sap. Rüdiger Kretschmer. 2:00 PM . Rüdiger Kretschmer. 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.sap.sap.com/services/ Consulting Contact Roy Wood. VP SAP Consulting Related SAP Education Training Opportunities http://www. Thomas Fiedler .com/education NET200.com Solutions SAP Netweaver SAP Customer Services Network: www. Thomas Fiedler Further Information Public Web: www. ABAP 258.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  SAP AG 2003.

Questions? Q&A  SAP AG 2003. Rüdiger Kretschmer. ABAP 258. Thomas Fiedler . Thomas Fiedler Feedback Please complete your session evaluation and drop it in the box on your way out. Thank You ! The SAP TechEd ’03 Basel Team  SAP AG 2003. Rüdiger Kretschmer. ABAP 258.

DHTML. SAP. HTML. R/3. Inc. pSeries. VideoFrame®. WINDOWS®. Rüdiger Kretschmer. iSeries. and Motif® are registered trademarks of the Open Group. Word®. zSeries. Parallel Sysplex®.Copyright 2003 SAP AG. Tivoli®. Intelligent Miner. ORACLE® is a registered trademark of ORACLE Corporation. OSF/1®. XML. Citrix®. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. ICA®. xSeries. MetaFrame®. MVS/ESA. 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.. OS/390®.com. MarketSet and Enterprise Buyer are jointly owned trademarks of SAP AG and Commerce One. IBM®. AFP. WebSphere®. ABAP 258. xApps. MultiWin® and other Citrix product names referenced herein are trademarks of Citrix Systems. EXCEL®. AS/400®. DB2®. OS/2®. Inc. NT®. Microsoft®. S/390®. DB2 Universal Database. z/OS. JAVASCRIPT® is a registered trademark of Sun Microsystems. WinFrame®. 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. Informix and Informix® Dynamic ServerTM are trademarks of IBM Corporation in USA and/or other countries. AIX®. PowerPoint® and SQL Server® are registered trademarks of Microsoft Corporation. Inc. OS/400®. the Citrix logo. mySAP. All other product and service names mentioned are the trademarks of their respective companies. Thomas Fiedler . XHTML are trademarks or registered trademarks of W3C®. The information contained herein may be changed without prior notice. UNIX®.  SAP AG 2003. World Wide Web Consortium. JAVA® is a registered trademark of Sun Microsystems. mySAP. Massachusetts Institute of Technology. X/Open®. Netfinity®. Program Neighborhood®. used under license for technology invented and implemented by Netscape.