EP120 SAP NetWeaver Portal Development

EP120SAP NetWeaver Portal

DevelopmentSAP NetWeaver

Date

Training Center

Instructors

Education Website

Participant HandbookCourse Version: 2006 Q2Course Duration: 5 Day(s)Material Number: 50081779

An SAP course - use it to learn, reference it for work

Copyright

Copyright © 2006 SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purposewithout the express permission of SAP AG. The information contained herein may be changedwithout prior notice.

Some software products marketed by SAP AG and its distributors contain proprietary softwarecomponents of other software vendors.

Trademarks

� Microsoft®, WINDOWS®, NT®, EXCEL®, Word®, PowerPoint® and SQL Server® areregistered trademarks of Microsoft Corporation.

� IBM®, DB2®, OS/2®, DB2/6000®, Parallel Sysplex®, MVS/ESA®, RS/6000®, AIX®,S/390®, AS/400®, OS/390®, and OS/400® are registered trademarks of IBM Corporation.

� ORACLE® is a registered trademark of ORACLE Corporation.� INFORMIX®-OnLine for SAP and INFORMIX® Dynamic ServerTM are registered

trademarks of Informix Software Incorporated.� 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 trademarksof Citrix Systems, Inc.

� HTML, DHTML, XML, XHTML are trademarks or registered trademarks of W3C®, WorldWide 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.� SAP, SAP Logo, R/2, RIVA, R/3, SAP ArchiveLink, SAP Business Workflow, WebFlow, SAP

EarlyWatch, BAPI, SAPPHIRE, Management Cockpit, mySAP.com Logo and mySAP.comare trademarks or registered trademarks of SAP AG in Germany and in several other countriesall over the world. All other products mentioned are trademarks or registered trademarks oftheir respective companies.

Disclaimer

THESE MATERIALS ARE PROVIDED BY SAP ON AN "AS IS" BASIS, AND SAP EXPRESSLYDISCLAIMS ANY AND ALL WARRANTIES, EXPRESS OR APPLIED, INCLUDINGWITHOUT LIMITATION WARRANTIES OF MERCHANTABILITY AND FITNESS FOR APARTICULAR PURPOSE, WITH RESPECT TO THESE MATERIALS AND THE SERVICE,INFORMATION, TEXT, GRAPHICS, LINKS, OR ANY OTHER MATERIALS AND PRODUCTSCONTAINED HEREIN. IN NO EVENT SHALL SAP BE LIABLE FOR ANY DIRECT,INDIRECT, SPECIAL, INCIDENTAL, CONSEQUENTIAL, OR PUNITIVE DAMAGES OF ANYKIND WHATSOEVER, INCLUDING WITHOUT LIMITATION LOST REVENUES OR LOSTPROFITS, WHICH MAY RESULT FROM THE USE OF THESE MATERIALS OR INCLUDEDSOFTWARE COMPONENTS.

g2006112212631

About This HandbookThis handbook is intended to complement the instructor-led presentation of thiscourse, and serve as a source of reference. It is not suitable for self-study.

Typographic ConventionsAmerican English is the standard used in this handbook. The followingtypographic conventions are also used.

Type Style Description

Example text Words or characters that appear on the screen. Theseinclude field names, screen titles, pushbuttons as wellas menu names, paths, and options.

Also used for cross-references to other documentationboth internal (in this documentation) and external (inother locations, such as SAPNet).

Example text Emphasized words or phrases in body text, titles ofgraphics, and tables

EXAMPLE TEXT Names of elements in the system. These includereport names, program names, transaction codes, tablenames, and individual key words of a programminglanguage, when surrounded by body text, for exampleSELECT and INCLUDE.

Example text Screen output. This includes file and directory namesand their paths, messages, names of variables andparameters, and passages of the source text of aprogram.

Example text Exact user entry. These are words and characters thatyou enter in the system exactly as they appear in thedocumentation.

<Example text> Variable user entry. Pointed brackets indicate that youreplace these words and characters with appropriateentries.

62 © 2006 SAP AG. All rights reserved. iii

About This Handbook EP120

Icons in Body TextThe following icons are used in this handbook.

Icon Meaning

For more information, tips, or background

Note or further explanation of previous point

Exception or caution

Procedures

Indicates that the item is displayed in the instructor'spresentation.

iv © 2006 SAP AG. All rights reserved. 62

ContentsCourse Overview ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . vii

Course Goals .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .viiCourse Objectives ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .vii

Unit 1: Overview and positioning of development tools..... . . . . . 1Overview and positioning of development tools .. . . . . . . . . . . . . . . . . . .2

Unit 2: Visual Composer ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 19Visual Composer ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Unit 3: Using SAP NetWeaver Developer Studio ..... . . . . . . . . . . . . 39Create a portal application... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40Debugging .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53

Unit 4: Portal Applications and the Portal Runtime..... . . . . . . . . . 75Portal Applications and the Portal Runtime .... . . . . . . . . . . . . . . . . . . . 76

Unit 5: Portal Components ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93Abstract Portal Components... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Security Zones .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100Personalization .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 115Internationalization... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139HTMLB ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155MVC ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173

Unit 6: Portal Services and Web Services ..... . . . . . . . . . . . . . . . . . . . 199Portal Services .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200Web Services.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222

Unit 7: Standard Portal Services ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237User Management ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238Connector Framework.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266

Unit 8: Enterprise Portal Client Framework..... . . . . . . . . . . . . . . . . . . 301Enterprise Portal Client Framework .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

Unit 9: Introduction to Web Dynpro ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . 325Introduction to Web Dynpro ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326

62 © 2006 SAP AG. All rights reserved. v

Contents EP120

Web Dynpro Context and Navigation ... . . . . . . . . . . . . . . . . . . . . . . . . . .332Web Dynpro Architecture ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338

Unit 10: Web Dynpro Controllers..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 361Model, View Controller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .362Web Dynpro Controllers.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398

Unit 11: The Adaptive RFC Layer ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 433Remote Invocation of ABAP Functionality .. . . . . . . . . . . . . . . . . . . . . .435The Adaptive RFC (aRFC) Model Object. . . . . . . . . . . . . . . . . . . . . . . . .441Configuring SLD and JCo Connections ... . . . . . . . . . . . . . . . . . . . . . . . .486

Unit 12: Visualising the Java Web Dynpro through the SAPPortal.... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 521

Introduction ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522Creating a Web Dynpro iView .... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525Portal Eventing, Navigation and WorkProtect .. . . . . . . . . . . . . . . . . . .531

Unit 13: ABAP Web Dynpro ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 561Introduction to ABAP Web Dynpro ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . .562Creating an ABAP Web Dynpro.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .569Integrating an ABAP Web Dynpro into the Portal. . . . . . . . . . . . . . . .575Portal Eventing, Navigation and WorkProtect with ABAP WebDynpro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .578

Glossary..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 613

Index ..... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 615

vi © 2006 SAP AG. All rights reserved. 62

Course OverviewUnderstand the SAP tools for content development for the NetWeaver Portal

Target AudienceThis course is intended for the following audiences:

� NetWeaver Portal Java Developers� Development Consultants

Course PrerequisitesRequired Knowledge

� J2EE Development� Java WebDynpro Development

Recommended Knowledge

� NetWeaver Portal Content Administration

Course GoalsThis course will prepare you to:

� Use Visual Composer� Use SAP NetWeaver Development Studio� Develop NetWeaver Portal components and services� Use and Understand NetWeaver Portal APIs and services

Course ObjectivesAfter completing this course, you will be able to:


SAP Software Component InformationThe information in this course pertains to the following SAP Software Componentsand releases:

62 © 2006 SAP AG. All rights reserved. vii

Course Overview EP120

viii © 2006 SAP AG. All rights reserved. 62

Unit 1Overview and positioning of

development tools

Unit OverviewDescribe and differentiate approaches of content development on the SAPNetWeaver platform.

Unit ObjectivesAfter completing this unit, you will be able to:

� Describe and differentiate the different approaches of content developmenton the SAP NetWeaver platform:

� SAP NetWeaver Visual Composer� SAP NetWeaver Developer Studio� The Portal Developer Kit for Java and .Net� Know the main resources for developing EP applications:� The Portal Content Studio� The SAP Developer Network (SDN)� The SAP Help Portal

Unit ContentsLesson: Overview and positioning of development tools ... . . . . . . . . . . . . . . . . . .2

Exercise 1: Citrix Login .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .9Exercise 2: System Setup.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

62 © 2006 SAP AG. All rights reserved. 1

Unit 1: Overview and positioning of development tools EP120

Lesson: Overview and positioning of development tools

Lesson OverviewSAP provides a number of tools and resources to assist you in developingapplications on the SAP NetWeaver platform.

This track focuses on the tools and resources required to build NetWeaver PortalContent on the Java platform.

Some of the tools and resources available to you as a developer are:

� SAP NetWeaver Visual Composer� SAP NetWeaver Developer Studio� SAP Enterprise Portal Developer Kit (PDK)� SAP Developer Network (SDN) � http://sdn.sap.com� SAP Help Portal - http://help.sap.com/nw04s

Lesson ObjectivesAfter completing this lesson, you will be able to:

� Describe and differentiate the different approaches of content developmenton the SAP NetWeaver platform:

� SAP NetWeaver Visual Composer� SAP NetWeaver Developer Studio� The Portal Developer Kit for Java and .Net� Know the main resources for developing EP applications:� The Portal Content Studio� The SAP Developer Network (SDN)� The SAP Help Portal

Business ExampleChoose the appropriate technology to develop portal applications.


http://sdn.sap.com

http://help.sap.com/nw04

EP120 Lesson: Overview and positioning of development tools

Overview and positioning of development tools

Figure 1: Positioning of content approaches

For consultants, developers, and business process designers�

�in organizations using the SAP NetWeaver portal ...

�who need to develop, deploy, and maintain business content (iViews) for theirportal�

�SAP NetWeaver (though a component code-named �Visual Composer�) ...

�reduces the TCO through model driven development of portal content ...

� by eliminating the need to program which improves stability, maintainabilityand accelerates the time-to-value.

Unlike integration platforms or portal solutions of other vendors�� whichrequire massive, error-prone custom coding to bring business content into theirportal...

�SAP NetWeaver has a solution for the complete life-cycle of portal content thatdoes not require programming.

So what's the difference between Visual Composer and Web Dynpro? �NetWeaver provides the ability to develop portal content without programmingthrough Visual Composer (Outside-in approach).

� NetWeaver provides the user interface technology for individual applicationsthrough Web Dynpro (Inside-out approach).

� Both Visual Composer and Web Dynpro are being developed as complementarytechnologies.



Figure 2: The SAP Portal Content Studio

Former SAP iViewStudio

More than 6000 iViews in about 160 Business Packages categorized in 24industries!

The SAP NetWeaver Visual Composer (NW VC)

� Visual Composer is a visual modeling tool that enables sophisticatedcontent development for the SAP NW Portal merely by dragging anddropping appropriate objects and establishing relationships between them.No programming required.

� Visual Composer is completely Web based. Business experts can sit next tothe business users and access Visual Composer from any machine to build orcustomize to reflect the business needs on demand

� The purpose of Visual Composer is to provide a visual tool that enablecustomers quick and easy content development thereby

� Minimize the time and effort to create content� Lead to quicker go live decision� Reduce Total Cost of Ownership (TCO)� Increase ROI

The word Portal has been widely abused lately. Over 100 companies now say theyprovide a portal of some sorts, from IBM and Microsoft down. What is clear isthat there is no absolute definition, but most people agree that it is a �webtop� ofinformation targeted at audiences both within and external to a company. What is



important is to consider all kinds of information to be made available in the portal,and to extend the idea to actually make the portal a work-place where all functionsand applications are unified together.

Figure 3: The SAP NetWeaver Developer Studio

Eclipse provides an open architecture platform for developing and integratingyour own tools. That is why much of the Eclipse function set is generic in nature.The main priority for Eclipse is to provide a robust and (as far as possible)universal infrastructure for developing highly integrated tools.



The Portal Development Kit (PDK)

� The Portal Development Kit (PDK) is an extension of the SAP NetWeaverDevelopment Studio and represents a collection of:

� Development documentation� Sample applications providing reference coding� Tools for use by developers

� It�s shipped as Business Package available in the Portal Content Studio andrequires a full installation of a SAP NetWeaver Portal

� Use the Software Delivery Manager (SDM) in order to install the PDK� After installation assign the predefined role com.sap.pct.pdk.JavaDeveloper

to your user.

� Contains a huge bundle of documentation and howtos� All available coding samples you find here� Sample Applications include:

� OBN - Object Based Navigation� Navigation Connector �� Application Integrator � Work with various web applications� Webdynpro � Integrate WebDynpro applications into the portal� HTML Business for Java (HTMLB) - Browser-independent HTML

based on the SAP style sheet that maintain the corporate identitythroughout the application.

� Internationalization - Access the required language resource files formultilingual applications.

� Portal Data Viewer (PDV) - Present data from different sources (XML,JDBC query, etc.) in tabular form.

� JCo - to connect to SAP systems.� User Management � User Mapping examples� Enterprise Portal Client Framework (EPCF) � Eventing framework

examples



Figure 4: The Portal Development Kit (PDK)

Once you have been assigned the Java Developers Role, you will be able tonavigate to different SAP Portal development menu options. These include Tools,Getting Started, User Interface Development, Portal Development, Portal RuntimeTechnology, Knowledge Management and Javadocs.

Figure 5: The SAP Developer Network (SDN)

Access further information via the website can be located at http://sdn.sap.com.


http://sdn.sap.com


Figure 6: The SAP Help Portal

The Netweaver Documentation can be downloaded via the Software DisitrbutionCenter � material number 500 712 86.



Exercise 1: Citrix Login

Exercise ObjectivesAfter completing this exercise, you will be able to:� Login to the Training Environment Using Citrix

Business Example

Task:Login to the Training Environment using Citrix.

1. Follow the solution to login to the training environment using citrix.



Solution 1: Citrix LoginTask:Login to the Training Environment using Citrix.

1. Follow the solution to login to the training environment using citrix.

a)

Figure 7:

Figure 8:

Continued on next page



Figure 9:

Figure 10:





Exercise 2: System Setup

Exercise ObjectivesAfter completing this exercise, you will be able to:� Create Portal users and System Setup

Business Example

Task:Create Portal Users and setup system.

1. Follow the solution to create

User: EP120.E-XX Password: welcome

User:EP120.D-XX Password:welcome

where XX is your group number as assigned by the instructor. TheEP120.E-XX user is an end user and EP120.D-XX is a content developer.Create a System to connect to the backend ABAP system.



Solution 2: System SetupTask:Create Portal Users and setup system.

1. Follow the solution to create

User: EP120.E-XX Password: welcome

User:EP120.D-XX Password:welcome

where XX is your group number as assigned by the instructor. TheEP120.E-XX user is an end user and EP120.D-XX is a content developer.Create a System to connect to the backend ABAP system.

a)

Figure 11:




Figure 12:

Figure 13:




Figure 14:

Figure 15:

Logoff the portal and the windows desktop session. You will use thecitrix common training environment for all exercises. Follow pathStart→ Favorites→ Template URL Portal Training. Change the URLaddress replacing twdfxxx with your portal server. Login with userEP120.D-xx password welcome where xx is your group number.



Lesson Summary

You should now be able to:� Describe and differentiate the different approaches of content development

on the SAP NetWeaver platform:� SAP NetWeaver Visual Composer� SAP NetWeaver Developer Studio� The Portal Developer Kit for Java and .Net� Know the main resources for developing EP applications:� The Portal Content Studio� The SAP Developer Network (SDN)� The SAP Help Portal


Unit Summary EP120

Unit SummaryYou should now be able to:� Describe and differentiate the different approaches of content development

on the SAP NetWeaver platform:� SAP NetWeaver Visual Composer� SAP NetWeaver Developer Studio� The Portal Developer Kit for Java and .Net� Know the main resources for developing EP applications:� The Portal Content Studio� The SAP Developer Network (SDN)� The SAP Help Portal


Unit 2Visual Composer

Unit OverviewLeverage Visual Composer to easily create reports.


� Understand and build a Visual Composer application.

Unit ContentsLesson: Visual Composer ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20

Exercise 3: The SAP NetWeaver Visual Composer .. . . . . . . . . . . . . . . . . . . 25


Unit 2: Visual Composer EP120

Lesson: Visual Composer

Lesson Overview


� Understand and build a Visual Composer application.

Business ExampleCreate reports from back end services.

Visual Composer

Figure 16: Visual Composer on SAP Enterprise Portal 6.0

To login to Visual composer user URL:

http://<machine name>:<portnumber>/VC/default.jsp


EP120 Lesson: Visual Composer

Figure 17: Storyboard Desktop

Figure 18: Model Creation Steps (1)

Drag a Page from Compose Model to Design tab of workspace. Double click toenlarge to entire design area.

Drag an IView from Compose Model to Design tab of workspace. Double click toenlarge to entire design area.

Add a data Service by selecting Find Data. Choose System and enter searchcriteria. Select a Service and drag to Design tab of workspace. Right mouse clickand select execute to test Service.



Figure 19: Model Creation Steps (2)

Drag input from Service and Add Input Form

Drag output structure from Service and Add either a table view, chart view, filteror sort the data.

Click Run to test

Figure 20: Example: Using dynamic expressions



Figure 21: Visual Composer as a Modeling Tool

Models designed in Visual Composer can be deployed to run in one or moretechnology engines, including SAP HTML/B and Flex. The same model canbe deployed to more than one environment, although not all components andcontrols are fully supported in each. Visual Composer implements a proprietaryXML-based Visual Composer Language as its source code for creating themodels. Only at deployment is the model actually compiled into the executablecode required by the selected UI technology. The result is a model once runanywhere capability.

The models that you build in Visual Composer are generated in Generic ModelingLanguage (GML) code. To deploy your application to a portal, the GML codemust be compiled into a language supported by the portal. During compilation,warnings and possible errors may be discovered, enabling you to check the modelvalidity. The compiled content is deployed directly to the portal, in the runtimeenvironment that you select.

In runtime, transactional content can run through HTML/B and Flex, whileanalytic content which may require a more animated environment may run throughFlex. The models deployed by Visual Composer to the portal include runtimemetadata, which is stored with the model in the PCD and exported in the businesspackage, for delivery to customers.





Exercise 3: The SAP NetWeaver VisualComposer

Exercise ObjectivesAfter completing this exercise, you will be able to:� Work with the SAP NW Visual Composer� Develop applications using the features of the SAP NW Visual Composer

Business Example

Task:SAP NetWeaver Visual Composer

1. Create a page with an iView to enable a portal user to view a list offlights for a specified airline, departure city, departure country, arrivalcity and arrival country. Please install the Visual composer. Use serviceBAPI_SFLIGHT_GETLIST. Sort the list by departure date and flight time.Generate an input form with the following.

AirlineidArrdateArrtimeCityfrom

CitytoConnectidDeptimeFlightdate



Solution 3: The SAP NetWeaver VisualComposerTask:SAP NetWeaver Visual Composer

1. Create a page with an iView to enable a portal user to view a list offlights for a specified airline, departure city, departure country, arrivalcity and arrival country. Please install the Visual composer. Use serviceBAPI_SFLIGHT_GETLIST. Sort the list by departure date and flight time.Generate an input form with the following.

AirlineidArrdateArrtimeCityfrom

CitytoConnectidDeptimeFlightdate

a)




Figure 22:

Figure 23:




Figure 24:

Figure 25:

Figure 26:




Figure 27:

Figure 28:




Figure 29:

Figure 30:




Figure 31:

Figure 32:

Figure 33:




Figure 34:

Figure 35:




Figure 36:

Figure 37:

Figure 38:




Figure 39:

Figure 40:




Figure 41:



Lesson Summary

You should now be able to:� Understand and build a Visual Composer application.


EP120 Unit Summary

Unit SummaryYou should now be able to:� Understand and build a Visual Composer application.


Unit Summary EP120


Unit 3Using SAP NetWeaver Developer

Studio

Unit OverviewGetting started with SAP NWDS.

Creating a Portal Application Project.

Creating a Portal Application Component.

Upload and test the component.


� Getting started with SAP NWDS� Create a portal application project� Create a simple portal application component� Upload the component to the portal� Test the component� Debug a portal application

Unit ContentsLesson: Create a portal application ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

Exercise 4: First Portal Component .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45Lesson: Debugging .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 53


Unit 3: Using SAP NetWeaver Developer Studio EP120

Lesson: Create a portal application

Lesson Overview


� Getting started with SAP NWDS� Create a portal application project� Create a simple portal application component� Upload the component to the portal� Test the component

Business ExampleBuild a simple portal application.

Create a portal application

Figure 42: Starting Developer Studio


EP120 Lesson: Create a portal application

Figure 43: Create new Portal Project

If the buttons do not display on the toolbar, you may need to add them to yourperspective. Choose Window→ Customize Perspective→ Other→ EnterprisePortal Project Actions

Figure 44: Create New Portal Component

A Portal project usually consists of one or more components.

Create a new component (application object) and specify the type of componentyou wish to create. You can use File→ New→ Other→ Portal Application→ Portal Application Object



There are currently 4 templates that you can choose from: AbstractPortalCom-ponent, AbstractTestComponent, JSPDynPage, and DynPage. The templatesare stored in the directory <IDE_Install_Dir>\eclipse\plugins\com.sap.ep.appli-cationDevelopment\templates

The location refers to where the generated Java class will be located. If youselect �Core�, then the class is located in the private space and is not accessibleby other components. If you select �API�, then the class is located in the publicspace and other components may access objects and methods defined in the class.This PRT functionality simplifies sharing of components in a large, complexportal installation.

Figure 45: Create New Portal Component Example

See the �Tips and Tricks� and �What's New� from the Help Menu for informationabout how to use Eclipse.

Code Assist and other features are configurable via the Window→ Preferencesmenu



Figure 46: Uploading the Portal Application - Configuration

After your project has been created, you can upload it to the portal.

For convenience, the portal landscape servers should be entered in the preferencesdialog so that it will be easier to upload on subsequent development sessions. Youneed to perform this process only once.

Figure 47: Uploading the Portal Application

The Uploader defaults to the project selected in the Navigator window



The name of your project should contain a namespace that is not reserved by SAP.Although you are not technically prevented from doing so, do not use �com.sap.*�for the name of the PAR file.

Once you have uploaded your project one time, you can use the key combinationCtrl-Alt-U to quickly upload it again.

This shortcut is configurable via theWindow→ Preferences→ Keys→ EnterprisePortal→ PAR Upload option.

Figure 48: Testing Your Application

Testing the application can be done within NWDS or the portal.

It is often convenient to unit test the component before you create an iView outof it.

NWDS will remember your ID/password for the duration of your session so youdon't have to type it in each time you want to test. If you exit NWDS, then youwill have to enter your credentials again.



Exercise 4: First Portal Component

Exercise ObjectivesAfter completing this exercise, you will be able to:� Leverage the wizards and tools available in the SAP NWDS� Realize easy Portal Applications

Business Example

Task:First Portal Component

Write your first Portal Component which presents a simple output like �HelloWorld� to the portal user. Use the integrated wizards to fulfill this task.

1. Start the SAP NWDS and create a new Portal Application Project named03-FirstPortalProjectXX where XX is your student number.

2. Click on the icon of the Portal Application Object wizard. SelectPortal Component→ Abstract Portal Component as template. EnterHelloWorldComponent into the name field. Enter com.sap.training.portalinto the package name field. Click finish.

3. Implement the doContent method and so that some simple HTML outputlike �Hello World!� is written to the response. Use the code assistant to findthe right method of the response object.

4. Create a PAR file named 03-FirstPortalProjectXX.par where XX is yourstudent number and deploy this using the Create/Export PAR File wizard.XX is your group number

5. Test the application by executing it from within NWDS.



Solution 4: First Portal ComponentTask:First Portal Component

Write your first Portal Component which presents a simple output like �HelloWorld� to the portal user. Use the integrated wizards to fulfill this task.

1. Start the SAP NWDS and create a new Portal Application Project named03-FirstPortalProjectXX where XX is your student number.

a) (Detailed Solution below)

Start the SAP NWDS and create a new Portal Application Projectnamed 03-FirstPortalProjectXX.

2. Click on the icon of the Portal Application Object wizard. SelectPortal Component→ Abstract Portal Component as template. EnterHelloWorldComponent into the name field. Enter com.sap.training.portalinto the package name field. Click finish.

a) Create a new AbstractPortalComponent subclass namedcom.sap.training.portal.HelloWorldComponent by means of the PortalApplication Objects wizard.

3. Implement the doContent method and so that some simple HTML outputlike �Hello World!� is written to the response. Use the code assistant to findthe right method of the response object.

a) The class HelloWorldComponent is opened automatically by thewizard. You also find it in 03-FirstPortalProjectXX→ src.core→ com→ sap→ training→ portal. Enter �response� Into the doContent{}function. The code completion wizard offers all available methods andfields. Select write(String arg 0) � void and enter �Hello World!� asargument.

4. Create a PAR file named 03-FirstPortalProjectXX.par where XX is yourstudent number and deploy this using the Create/Export PAR File wizard.XX is your group number

a) Click on the Icon Create/Export PAR File. Verify the name of the PARand mark �Deploy PAR�. In the section Servers verify the connectivityand enter the valid password. Click on Finish.

5. Test the application by executing it from within NWDS.

a) Double click on 03-FirstPortalProjectXX→ dist→ PORTAL-INF→portalapp.xml. The portalapp.xml editor opens. Click on the buttonRun next to the link HelloWorldComponent. The Application isexecuted in a new browser window.




b)

Figure 49:

Figure 50:




Figure 51:

Figure 52:




Figure 53:

Figure 54:




Figure 55:

Figure 56:

Figure 57:




Figure 58:

Figure 59:



Lesson Summary

You should now be able to:� Getting started with SAP NWDS� Create a portal application project� Create a simple portal application component� Upload the component to the portal� Test the component


EP120 Lesson: Debugging

Lesson: Debugging

Lesson Overview


� Debug a portal application

Business Example

DebuggingPreparation for Debugging

� Stop the Portal if running� Launch the Config tool of J2EE engine� Start SAP NetWeaver Developer Studio and open your project for debugging� Make sure that the latest version of the debuggable code is deployed in

the debug portal

You can make your programs easier to debug by following these guidelines:

� Where possible, do not put multiple statements on a single line, becausesome debugger features operate on a line basis. For example, you cannot stepover or set line breakpoints on more than one statement on the same line.

� Attach source code to JAR / PAR files if you have the source code.



Figure 60: Debugging

First step of the debugging setup is to start the config tool of the J2EE engine. Thetool is located in the directory <J2EE_Install_Dir>\JC00\j2ee\configtool\config-tool.bat

Switch to the current instance and goto the debug tab.

Set Enable debug mode checked, starts the VM of J2EE in debug mode.

Set a valid debug port, default port is 50021.

Save the settings and restart the J2EE Engine



Figure 61: Connect to Portal

Go to Window→ Open Perspective→ Enterprise Portal.

This enables you to develop and deploy EP components to your developmentPortal.




Add the host name, port, and alias of each EP6 instance in which you wish toconnect to NetWeaver Developer Stuido.

A valid user ID and password must also be supplied!




Goto Debug→ Remote Java Application and create a new setting for your currentPortal Application project

Insert the portals DNS or IP Address and the debug port specified in the configtool, default port is 50021.

If the portal runs on the local machine you can enter localhost instead of IP adressor DNS name.

Important: Make sure that your portal application is already deployed in the portal




The export function allows an option to include the source code of the projectin the PAR file (located in: /PORTAL-INF/srclib.api/parname.src.jar and/PORTAL-INF/srclib.core/parname.src.jar) and to deploy your application toyour local Portal.



Figure 65: Debugging

If the connection is attached to the J2EE engines VM session, the SAP NetWeaverDeveloper Studio is ready to debug!



Figure 66: Breakpoints

The Breakpoints view lists all the breakpoints you have set in the workbenchprojects. You can double-click a breakpoint to display its location in the editor. Inthis view, you can also enable or disable breakpoints, delete them, or add new ones.

This view also lists Java exception breakpoints, which suspend execution at thepoint where the exception is thrown. You can add or remove exceptions.




Set a breakpoint in your custom coding. The debugger will stop if the VM reachesthis marked code line.




To enable the breakpoint using the Breakpoints View

� Locate the breakpoint in the marker bar of an editor� Open the breakpoint's context menu and select Enable Breakpoint.� The breakpoint image will change back to a blue circle.




To disable a breakpoint:

� Locate the breakpoint in the marker bar of an editor� Open the breakpoint's context menu and select Disable Breakpoint.� The breakpoint image will change to a white circle.



Figure 70: Method Breakpoints

To add a method breakpoint:

� Open the class in the Outline view, and select the method where you wantto add a method breakpoint.

� From the method's pop-up menu, select Add/Remove Method Breakpoint.� A breakpoint appears in the Breakpoints view. If source exists for the class,

then a breakpoint also appears in the marker bar in the file's editor for themethod that was selected.

� While the breakpoint is enabled, thread execution suspends when the methodis entered, before any line in the method is executed.



Figure 71: Applying Hit Counts

To set a hit count on a breakpoint:

� Select the breakpoint to which a hit count is to be added.� From the breakpoint's pop-up menu, select Hit Count.� In the Enter the new hit count for the breakpoint field, type the number of

times you want to hit the breakpoint before suspending execution.



Figure 72: Applying Hit Counts

When the breakpoint is hit for the nth time, the thread that hit the breakpointsuspends. The breakpoint is disabled until either it is re-enabled or its hit count ischanged.



Figure 73: Catching Java Exceptions

Choose Add Java Exception Breakpoint from the Breakpoints view or theworkbench Run menu.

A dialog listing all of the available exceptions is shown.

Either type the name of the exception you want to catch or select it from the list.

At the bottom of the page, use the check boxes to specify how you want executionto suspend at locations where the exception is thrown.

� Select Caught if you want execution to suspend at locations where theexception is thrown but caught.

� Select Uncaught if you want execution to suspend at locations where theexception is uncaught.



Figure 74: Variables View

When stack frame is selected, you can see the visible variables in that stack framein the Variables view.

The Variables view shows the value of primitive types. Complex variables can beexamined by expanding them to show their members.

To launch the Variables View:

� Choose Window→ Show View→ Other� Select Debug→ Variables View




Force the portal to execute your deployed coding, e.g. an iView can be launchedwith PortalAnywhere.Go. The VM stops at the specified break point.

The current values of the member variables can be tracked in the variables windowof SAP NetWeaver Developer Studio.




Debugging with the variables view may be useful in situations where you are notreceiving a runtime error but the component is not functioning correctly.



Figure 77: Debugging Help

Additional help is also available that is specific to the EP Plug-Ins.



Lesson Summary

You should now be able to:� Debug a portal application


EP120 Unit Summary

Unit SummaryYou should now be able to:� Getting started with SAP NWDS� Create a portal application project� Create a simple portal application component� Upload the component to the portal� Test the component� Debug a portal application


Unit Summary EP120


Unit 4Portal Applications and the Portal

Runtime

Unit OverviewReview the Portal Runtime Guide.

Describe a Portal application. Describe the PAR file format.

Describe the properties of the deployment descriptor file (portalapp.xml).

Describe Portal Components and Services.


� Download and review the Portal Runtime Guide� Describe what makes up a Portal Application� Describe the PAR file format and how it relates to deployment of a portal

application� Describe the various properties of the deployment descriptor (portalapp.xml)� Describe Portal Components� Describe Portal Services

Unit ContentsLesson: Portal Applications and the Portal Runtime ... . . . . . . . . . . . . . . . . . . . . . 76

Exercise 5: Portal Applications and the Portal Runtime... . . . . . . . . . . . . . 87


Unit 4: Portal Applications and the Portal Runtime EP120

Lesson: Portal Applications and the Portal Runtime

Lesson Overview


� Download and review the Portal Runtime Guide� Describe what makes up a Portal Application� Describe the PAR file format and how it relates to deployment of a portal


Business Example

Portal Applications and the Portal RuntimeThe Portal Runtime (PRT)

� The Portal Runtime (PRT) is one basic part of the portal environmentintegrated into the Web AS

� Provides a runtime and its corresponding services� Provides a development environment� Defines and manages the objects that make up a portal environment

Note: The architecture and components of the PRT are describedin the PRT Guide. You will find a copy of the PRT Guide in thePDK Documentation under: Java Developer→ Getting Started→ Portal Runtime Guide

You can also download a copy of the current PRT Guide from SDNusing Portal Runtime Technology Release 6 as keywords in theSDN search field.

The Portal Runtime is one basic part of the SAP Enterprise Portal Environmentintegrated in the SAP J2EE environment.


EP120 Lesson: Portal Applications and the Portal Runtime

The Portal Runtime Technology provides a Java based framework to define, build,and execute Applications in a Portal Environment by allowing the aggregation andthe display of various contents such as rich text, xml, videos etc�

The Portal Runtime Technology provides a runtime and its corresponding servicesas well as a development environment for Portal applications. The motivationbehind the design and the technical implementation of the Portal Runtime arethe following:

Area of concern: The goal of the PRT is very well identified and restricts itselfto the life cycle of portal applications.

Open and Extensible: Many of the components of the PRT can be changed orcustomized to be adapted to the environment in which the PRT is executed. So themodel proposed by the PRT can be extended to support, for example, differentuser interface models or different programming models.

So, the Portal Runtime clearly positions itself as one of the key block used tobuild and execute any kind of Portal.

The Portal Runtime defines and manages two kinds of objects that define a PortalApplication. They are:

Portal Components. From a user point of view, a component that can be displayedinto a portal page. From an application development perspective, a plug ablecomponent designed to be executed into a Portal environment.

Portal Services. A Component offering a globally accessible function in thePortal. The portal runtime development model offers a way to implement a clearseparation between a Service API and its implementation.

Portal Applications

� Portal Applications ...

� .. are bundles of Portal Components and Portal Services.� .. are packaged as PAR (Portal Application ARchive) files � format

that the Portal Runtime accepts for deployment of Portal Applications.� A PAR file is an archive file/standard JAR file (ZIP format) containing

a Portal Application with a XML-based Portal Application DeploymentDescriptor (DD) called portalapp.xml.

� DD describes the portal application itself and provides informationrequired at runtime



Portal Applications contain two types of resources:

� Web Resources

� Accessible via http(s) requests to a web server� All files NOT under WEB-INF

� Non-Web Resources

� Not accessible via an http(s) request� All files under WEB-INF

A Portal Application can contain:

� several Portal Components and several Portal Services. Using severalsections in DD these components and services are defined.

� only 1 Portal Components� only 1 Portal Services

Each Portal Application can be accessed by <par file name>.<component name>

Everything can be packaged in a PAR file but depending on the purpose of theobjects different properties may be needed to be set.

Figure 78: Structure Deployment Descriptor



Figure 79: Deployment Descriptor - Application Config (1)

Figure 80: Deployment Descriptor - Application Config (2)

Startup: If set to �true�, the application as a whole will be "started" (initialized) onstartup of the server. In particular this means that it will be locally deployed.

Releasable: Because PRT allows hot deployment, all applications are releasableand the application instance can be dropped at any time by the system.

Nevertheless some critical applications may want to avoid the release of theirinstance when the system runs low in memory. They should then set this propertyto false.



Figure 81: Portal Application - PAR file

Portal Applications � Components

Portal Applications � Components

� This is an executable part of the Portal Application.� It can be described as a Java Code or JSP defined by properties and executed

in a particular mode.� Three different flavours (types):

� iView Code (AbstractPortalComponent, �)� System� Layout

� The distinction is made by the property �ComponentType�

� iView: �JSPNative�, �none� or �servlet�� System: com.sapportals.portal.system� Layout: com.sapportals.portal.layout

Flavours, System and Layout are just a matter of configuration.There is comprehensive documentation to be found in the online help(http://help.sap.com/nw04). In the further sections we refer to the flavor �iView�when speaking about Portal Components.


http://help.sap.com/nw04


Figure 82: Portal Applications - Components

Portal Component Config

The component config is a set of properties which configures the PortalComponent (class name, etc.).

Portal Component Profile

The component profile is a set of properties (name-value pairs) representing thedynamic part of the Portal Component that could be customized/personalized tochange the behavior of a Portal Application.

Figure 83: Portal Applications - Component Configuration



ResourceBundleName: standard java mechanism to provide multi languagesupport.

Figure 84: Portal Applications - Component Profile

AuthRequirement: (new in EP6.0) A list of roles can be specified. This protectionis important because the component can be launched directly (without using aniView). Cause the ACL�s are set for iViews only, this was a protection whiledirect launching is possible.

Figure 85: Portal Applications - Component Profile



Figure 86: iView Properties and Delta Links

The Portal Component shown above is an executable component (code) whichis (up-)loaded to the portal as part of an archive. It lays at the beginning of theinheritance chain.

The component-profile section contains properties that makeup the profile of the Portal Component as accessible from thecom.sapportals.portal.prt.component.IPortalComponentProfile interface atruntime. The profile is usually abstracted in a personalizable entity, the iView.

The values of properties in this section define the default values. By administrativemodification or personalization, these values may be modified.

Explain the inheritance using Delta Links



Portal Applications � Services

� Portal Services bring commonly used functionality into the Portal

� Portal Services are a way to provide JAVA based functionality to PortalComponents and other Portal Service

� By the handling of Portal Applications, Portal Services may enjoyseparation of API and implementation

� Portal Services may now be accessed from outside of the PortalFramework using SOAP/Web Services Protocol

� In the non-trivial case, a service provides an interface based API and animplementation.

� The implementatoin is non-public and will not be seen by nor interferwith using applications.

� The service interface relates the service API and its implementation byoffering access to implementations of API interfaces through factories.

� The API should not rely on any other non-standard API.� A portal service can be transfered into a Web Service.

Figure 87: Portal Applications - Services

Attention please here again the separation between �config� and �profile�definition.

In the config section only two important properties are set. (see next slide)



Figure 88: Portal Applications - Service Configuration

Portal Applications � Service Profile

� Contains properties that make up the profile of the Portal Service.� Properties are accessible via the interfacecom.sapportals.portal.prt.ser-

vice.IServiceProfile.� In contrast to the service config, the service profile properties may be

modified by administrative environment and is available at next start ofthe service.

� There are no predefined service profile properties.

Figure 89: Portal Applications - Exemplary portalapp.xml



Sharing References declare API extensions (with 6.0 policy).

Private Sharing References declare APIs used by the application's private code

Service-config defines essential settings for the service.

The Class Loading Policy determines how definitions of this application areexported and definitions from other applications are imported. "transitive" is thedefault.



Exercise 5: Portal Applications and thePortal Runtime

Exercise ObjectivesAfter completing this exercise, you will be able to:� Explain the differences between Portal Applications, Portal Components

and Portal Services� What are the essential parts of a PAR file?� What is the Deployment Descriptor?

Business Example

Task:Portal Terminology

1. Explain the differences between Portal Applications, Portal Componentsand Portal Services.

2. What are the essential parts of a PAR file?

3. What is the Deployment Descriptor?



Solution 5: Portal Applications and thePortal RuntimeTask:Portal Terminology

1. Explain the differences between Portal Applications, Portal Componentsand Portal Services.

a) The Portal Runtime defines and manages two kinds of objects thatdefine a Portal Application: the Portal Components and the PortalServices.Thus a Portal Application compromises Portal Componentsand Portal Services.

From a user point of view, a portal component can be displayed into aportal page. From an application development perspective, the portalcomponent is a plugable component that is designed to be executedinto a Portal environment.

A portal service offers functionality that is globally accessible forcomponents in the Java iView Runtime. The component accesses theservice via an API.

2. What are the essential parts of a PAR file?

a) The PAR file is a zip compatible format which includes at least thedeployment descriptor portalapp.xml and the according implementationclasses as compiled classes or as jar-libs.




3. What is the Deployment Descriptor?

a) The Deployment Descriptor defines:

� How a portal component is handled by the platform� Which portal services and other portal components are accessed� Which parameters can be personalized by the user

It is defined in the file portalapp.xml and noted as an XML definition.The root element is the application element. The application elementcan have an attribute alias, containing a comma-separated list of aliaseson the portal application. The portal application name is defined bythe name of the portal archive (par file). The attribute alias definesan additional name for the portal application. Attention: It is notrecommended to use the aliases because of name clashes. This featureis meant to be used for backward compatibility reasons.

Three child elements are allowed in the application element:

� application-config: the properties defined in this section affect theportal application as a whole.

� components: all portal components of a portal application aredeclared in this element

� services: all portal services of a portal application are declared inthis element



Lesson Summary

You should now be able to:� Download and review the Portal Runtime Guide� Describe what makes up a Portal Application� Describe the PAR file format and how it relates to deployment of a portal



EP120 Unit Summary

Unit SummaryYou should now be able to:� Download and review the Portal Runtime Guide� Describe what makes up a Portal Application� Describe the PAR file format and how it relates to deployment of a portal



Unit Summary EP120


Unit 5Portal Components

Unit OverviewUse Abstract Portal components, Dynpage components and JSP Dynpagecomponents.

Leverage personalization features.

Leverage internationalization features.

Describe the features of HTMLB and use HTMLB in Portal components.

Use JSP pages.

Understand Model-View-Controller (MVC) approach to developing Portalapplications.


� Understand and build abstract portal components� Discuss the nature of the security zone� Discuss how a Portal application uses the security zone features� Discuss permissions and security zones� Allow end user personalization of portal applications� Write Portal Applications that are language independent and handle complex

phrases in a language neutral fashion.� Build Portal applications using HTMLB controls� Use the Model-View-Controller (MVC) approach when developing your

Portal Applications.

Unit ContentsLesson: Abstract Portal Components ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95Lesson: Security Zones .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .100

Exercise 6: Security Zones... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .109Lesson: Personalization .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .115

Exercise 7: Personalization .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .121


Unit 5: Portal Components EP120

Lesson: Internationalization ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .139Exercise 8: Internationalization ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .141

Lesson: HTMLB... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .155Exercise 9: HTMLB ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .163

Lesson: MVC .... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .173Exercise 10: JSPDynPage ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .179


EP120 Lesson: Abstract Portal Components

Lesson: Abstract Portal Components

Lesson Overview


� Understand and build abstract portal components

Business Example

Abstract Portal Components

Figure 90: The IPortalComponent Interface

possible causes for calling the destroy() method are 1. Portal is terminating or2. The Portal runtime needs to free up some memory For example when a newversion of the application is being uploaded.

After the call to destroy(), the garbage collector collects the component.



Figure 91: The AbstractPortalComponent

-> Show documenation in Java Doc of the PDK !!

doContent - Generates the content of the component.

doEdit - Provides personalization dialog.

doHandleEditData Default handler upon personalization according to theconvention, which is that a personalization dialog presentation should use profilenames as parameter names and it should contain a field �save� if the parameter setshould be saved into the profile.

doBeforeContent Handles the BEFORE_CONTENT event.

doAfterContent Handles the AFTER_CONTENT event.

doRequestEvent - Handles a client raised event that is not handled in a specificevent handler.

Portal Components that extend the AbstractPortalComponent classcan overwrite and implement methods for content creation and requestprocessing.



Figure 92: Portal Components Execution Model

HTTPServletRequest → PRT-Servlet → PortalComponentRequest →PortalComp1→ PC Response→ PC Request→ Portal Comp2→ PRT-Servlet→ HTTPServletResponse

Figure 93: Portal Components IPortalComponentRequest



Figure 94: Portal Components IPortalComponentResponse



Lesson Summary

You should now be able to:� Understand and build abstract portal components



Lesson: Security Zones

Lesson OverviewIn this lesson you will learn about security zones and how the portal administratorcan use them to control access to portal services and components.


� Discuss the nature of the security zone� Discuss how a Portal application uses the security zone features� Discuss permissions and security zones

Business ExampleAs a portal content developer, you have been tasked with developing a portalapplication to display highly sensitive information. To ensure that only thoseusers authorized can access this application and its related portal componentsand portal services, this application may not be accessible directly from outsidethe portal. To run this application on the portal platform, you need to secure itunder a security zone.

What is a Security Zone?Security zones are used to prevent unauthorized users from accessing iViews,portal components and portal services through a direct URL used outside of theportal environment. When activated, security zones enable system administratorsto control which portal components and portal services a portal user can launch.Security zones provide a means of implementing an optional, secondary layer ofsecurity to portal components and services which are accessed by a URL. URLaccess to portal components and services can occur directly or indirectly via aniView, and is controlled by means of progressive safety levels and permissions,which are assigned by system administrators to authorized users in the permissioneditor.


EP120 Lesson: Security Zones

Figure 95: Security Zones

A security zone specifies the vendor ID, the security area, and safety level foreach portal component and portal service (Web services accessed through theSOAP protocol). Access to portal components and services by authorized usersis controlled by assigning portal user permissions to the hierarchical structure ofvendor ID, the security area, and progressive safety levels in the portal�s securityzones.

Content developers assign portal components and services to a security zoneduring the development phase. The security zone is defined in a portalapplication�s descriptor XML file. Typically, it is the content or systemadministrator�s responsibility to provide the appropriate security zone assignmentto the content developer.



Figure 96: Requirements for Direct URL Access

After a portal application is deployed in a portal, an administrator with access tothe central permission editor must assign authorized users, groups, or roles to thesecurity zone to which the portal component or service belongs. Security zonesare displayed in the Portal Catalog in a hierarchical structure.

A portal component or service can belong to only one security zone; howeverportal components and services may share the same safety level. This allowsthe administrator to assign permissions to a safety level, instead of assigningthem directly to each portal component or service, thus taking advantage of thepermission inheritance mechanism, which passes the permissions from the safetylevel to any portal component or service located in it.

You can control access to portal components through direct URLs or throughiViews.

Access controlled through direct URLsGenerally, portal components are accessed through an iView. However,special cases � such as the portal logon component � require direct URLaccess to portal applications without an iView. A user is allowed directaccess by URL at runtime under the following conditions:

� The portal component or service declares its security zone.� The user (or group or role) has been assigned end-user permissions

in the permission editor to the security zone defined by the portalcomponent.



Access controlled through iViewsWhen an iView is launched by a user at runtime, the Portal Runtime (PRT)initially determines if the user is assigned end-user permission to the roleobject containing the iView. If authorized, the user can view the iView�scontent. Security zones offer an extra, but optional, layer of code-levelsecurity to iViews accessed through standard role-based assignment.When this functionality is activated, the PRT also checks if the user hasbeen assigned end-user permission to the iView�s portal component in itsdesignated security zone. Note that this check is performed after the end-userpermission to the iView has been approved. The user must pass both checksto view the iView�s content. This second level of security for iViews isactivated or deactivated by setting a Java VM (virtual machine) parameterusing the J2EE Config Tool (for both server and instance or server only).By default, this functionality is disabled

� To activate it, set the Dcom.sap.nw.sz parameter to true.� To deactivate it, set the Dcom.sap.nw.sz parameter to false.

Hint: This parameter also prevents unauthorized users fromaccessing iViews through a direct URL used outside of the portalenvironment. In future release, this parameter may be deprecated;the functionality it provides will remain and operate permanently.

How to Get a Portal Application into a Security ZoneWhen the portal application archive is loaded in the system, zones are createdif they do not exist. The entries that correspond to the portal objects are thencreated in the zone.

When a portal object (portal component or portal service) is accessed, the portalruntime checks if the current user has the permissions required to access the zoneto which the portal object belongs.

Figure 97: Example of Security Zone Entry in the Deployment Descriptor



You can specify security zones in the portal application descriptor file,portalapp.xml, in the following ways:

� Computed (preferred method)� Fully specified

In the computed method, the security zone of a component is defined by creatingthe following properties in the portalapp.xml file in the application PAR file:

� VendorID and SecurityArea: These properties are defined in theapplication-config section, and apply to all the components and servicesin the PAR.

� SafetyLevel: This property is defined for each component and service

When the portal application is deployed in the portal, the full security zone is thenautomatically generated by the PRT using the above properties and the names ofthe components and services:

� Components: VendorID/SecurityArea/SafetyLevel/portal_applica-tion_name/components/component_name

� Services: VendorID/SecurityArea/SafetyLevel/portal_application_name/ser-vices/service_name

In the fully specified method, the security zone is defined in the portal applicationdescriptor with a single property, SecurityZone.

The syntax of this property can be any slash-separated (/) string to define thesecurity zone hierarchy; however, either of the following formats is recommended:

� vendor_ID/security_area/safety_level/portal_application_name/components/component_name� vendor_ID/security_area/safety_level/portal_application_name/services/component_name

Rules for Creating the Zones

During the deployment of the portal application in the portal, the following rulesapply to creating the zones associated to the portal objects:

� If the portal application specifies a SecurityZone property (fully specifiedmethod), its value will take precedence even if the portal application alsospecifies the VendorID and SafetyLevel properties (computed method).

� If no security zone is specified, the PRT computes a zone for each portalobjects using the properties Vendor, SecurityArea and SafetyLevel. Anycomponent that does not have a proper vendor, security area or safety levelproperty are listed under an UndefinedVendor, UndefinedSecurityAreaor UndefinedSafetyLevel folder in the appropriate location in the SecurityZones folder in the Portal Catalog. This enables administrators to easilylocate components whose PAR has been deployed without the proper securityzone properties.



How Are Permissions and Security Zones RelatedSecurity zones extend to components and services the permission modelimplemented in the PRT, which controls access to all portal objects:

� Portal components � either accessed from the prtroot URL or from the portalapplication repository.

� Portal services � when accessed as Web services by the SOAP connection.

In the portal, security zones are located in the root Security Zones folder withinthe Portal Catalog and are represented as a set of portal components and portalservices, to which Access Control Lists (ACL) are attached and checked at runtimewhen the portal object belonging to a zone is accessed. During the developmentphase, the security zone allows you to abstract the security level that a portalcomponent or a portal service will require at runtime. You do not need to knowthe name of the roles or the name of the users that will be present in the portalenvironment in which the portal application will be installed. The zone definesa logical catalog containing a set of portal objects. You have to associate theprincipal security of the system to that zone by creating ACLs. The ACLs definethe permission required for accessing a specific zone.

A safety level for a security zone enables you to group objects that belong to azone into different categories. Within that zone, you can define different safetylevels. Each of these safety levels can then be assigned to different permissions.This helps you to organize and classify objects that belong to a certain zone.

The portal defines the following standard safety levels for initial portal contentto which out-of-the-box groups and roles are assigned permissions (note that thedescription of each safety level is based on the end-user permission setting only,regardless of the administrator permission setting):



Safety Levels for Security ZonesSafety Level Description

No Safety Anonymous users are permitted toaccess portal components defined inthe security zone.

Low Safety A user must be at least an authenticatedportal user to access portal componentsdefined in the security zone.

Medium Safety A user must be assigned to a particularportal role that is authorized to accessportal components defined in thesecurity zone.

High Safety A user must be assigned to a portal rolewith higher administrative rights that isauthorized to access portal componentsdefined in the security zone.

For information on which initial groups and roles are assigned to the standardsecurity zones shipped with the portal, see Default Permissions section below. Wehighly recommend that customers use this convention and the standard safetylevels when deploying custom-made applications in the portal.

Hint: Problems related to accessing the portal and its content areoften attributed to insufficient permissions in security zones. Whentroubleshooting access-related issues in the portal, it is recommended toalso check the security zone permissions.

Default Permissions for Maximum Security

The portal comes with a minimum set of permissions assigned to its initialcontent. These default permissions are designed to provide maximum security fora freshly installed portal. The default permissions settings are sufficient to enableusers assigned to the super administrator role to work and gain access to all initialcontent. They also enable the remaining standard administration roles (content,system, and user) to access tools specific to these roles, but not to initial contentobjects. For example, a content administrator has access to the Portal ContentStudio, but is not able to gain access to any content objects, such as iViews, pages,and roles � the Portal Catalog in the Portal Content Studio is empty. This topicdescribes the default permissions assigned to the initial content of the portal.



Caution: The initial permissions described in this topic are only valid fora fresh and full installation of the portal. When upgrading a portal, theinitial permissions script in the portal is not executed. This prevents thepermissions in an existing portal from being overwritten.

If you are upgrading your portal, you will however need to assignpermission to the standard portal components and services shipped withthe portal. These components and services reside in the Security Zonesfolder. It is recommended to use as a basis the initial permissions set forsecurity zones in a fresh installation (as described in the Permissionsin Security Zones section above).

On one hand, iViews automatically inherit their permissions from the role to whichthey are used. On the other hand, portal components and services inherit theirpermissions from the security zone or safety level to which they are assigned. Mostgeneric portal applications intended for standard users in an organization shouldapply to either the no safety or low safety levels, and no additional role-specificpermissions need to be assigned to their security zones. The reason for this is thatthe Everyone and Authenticated Users groups are by default assigned end-userpermission to the no safety and low safety levels, respectively, and thereby permitall anonymous and authorized user activity already. The medium safety andhigh safety levels are typically reserved for sensitive applications, which requirepermission assignments that are targeted to specific users, groups, or roles.

Note:

� Security zone functionality is only operational when the PRTsecurity mode is set to production mode. The Located at\J2eeRoot\cluster\server0\apps\sap.com\irj\servlet_jsp\irj\root\WEB-INF\portal\system\properties\prtCentral.properties

The portal.runtime.security.mode=production setting must be setto "production", which does not allow portal components to startdirectly. Possible values are "development" or "production" or "test".

� To prevent a complete lockout situation that prevents access to theportal by all users, including super users, you must make sure thatall portal groups representing anonymous users (for example, theEveryone group) have end-user permission enabled for the safetylevel that permits anonymous access to portal components andservices accessed by a URL (for example, the no safety level).

Typically, you should grant end-user permission to the Everyonegroup in the following standard security zones that are shipped withthe portal:

� security/sap.com/NetWeaver.Portal/no_safety� security/sap.com/NetWeaver.UserManagement/no_safety





Exercise 6: Security Zones

Exercise ObjectivesAfter completing this exercise, you will be able to:� Add a security zone to your portal application

Business ExamplePrevent unauthorized users from running portal applications from the commandline.

Task:Add a security zone to your portal application to stop unauthorized access.

1. Open portal component 05-PersonalizationXX or the template solution.Open the portalapp.xml file and add a vendor of com.customer and aSecurityArea of portal to the application configuration section.

2. Add a safety level of low_safety to the component configuration sectionto the welcome component.

3. Deploy the component. Close all browsers down and try running thecomponent from portalapp.xml file of NWDS. Login into the portal asuser EP120.E-XX and re-test the application. Login into the portal as userEP120.D-XX and re-test the application. What are the results in each caseand why?



Solution 6: Security ZonesTask:Add a security zone to your portal application to stop unauthorized access.

1. Open portal component 05-PersonalizationXX or the template solution.Open the portalapp.xml file and add a vendor of com.customer and aSecurityArea of portal to the application configuration section.

a) In the application section of the portalapp.xml file add a standardconfiguration property of Vendor: com.customer and SecurityArea:portal.

Figure 98:




2. Add a safety level of low_safety to the component configuration sectionto the welcome component.

a) In the component Welcome add a standard configuration propertyof low_safety.

Figure 99:

3. Deploy the component. Close all browsers down and try running thecomponent from portalapp.xml file of NWDS. Login into the portal asuser EP120.E-XX and re-test the application. Login into the portal as userEP120.D-XX and re-test the application. What are the results in each caseand why?

a) Deploy the component. Close all browsers down and try running thecomponent from portalapp.xml file of NWDS. You should receivean error. Login into the portal as user EP120.E-xx and password ofwelcome. Run the component again and this time you will receivean security error. Login to the portal as user EP120.D-XX. Run theapplication one more time. This should now be successful and showsyou must be authorized to run a portal component from the commandline. User EP120.D-xx is a super administrator and is therefore able torun all component.




Figure 100:

Figure 101:




Figure 102:



Lesson Summary

You should now be able to:� Discuss the nature of the security zone� Discuss how a Portal application uses the security zone features� Discuss permissions and security zones


EP120 Lesson: Personalization

Lesson: Personalization

Lesson Overview


� Allow end user personalization of portal applications

Business Example

Personalization

Figure 103: Personalization vs. Configuration



Figure 104: Configuration

Figure 105: Personalization

Personalization

Aspects of personalization:

� Modifying and storing per user data of a Portal Component� Displaying and handling of personalization dialogs that offer modification

of iView properties



Standard Dialog:

� The built-in personalization mechanism presents a standard dialog forchanging personalization enabled properties in the component profile.

Custom Dialog:

� Custom personalization can be implemented to present customer specificUI for the personalization dialog.

Figure 106: Attributes of Personalization Properties (1)

Figure 107: Attributes of Personalization Properties (2)



Figure 108: IPortalComponentProfile

Figure 109: Personalization Example



Figure 110: Deployment and Test

Figure 111: Update personalization properties

Hint: The personalization dialog can be tested directly before creating aniview. Run the portal application from the portalapp.xml file. When thebrowser is open append ?prtmode=edit to the end of the URL. For examplehttp://twdf0xxx.wdf.sap.corp:50000/irj/servlet/prt/portal/prtroot/05-Personalization.Welcome?prtmode=edit





Exercise 7: Personalization

Exercise ObjectivesAfter completing this exercise, you will be able to:� Leverage the component profile to implement personalization for your Portal

Component

Business Example

Task:Personalization

Enhance your Portal Component by enabling the user to change your propertiesby a personalization feature.

1.

1. Create a new Portal Application Project within the EP perspective.Call the project 05-PersonalizationXX.

2. Add a new Portal Component named Welcome.3. Navigate to the Outline box, bottom left, � right click on Welcome andselect Add property in and component profile. Ensure that you havethe PortalApp.xml displayed in the editor

4. Create a new property called colorName and assign an initial valueof blue.

5. Create a new property called petsName and assign an initial value ofyour choice e.g. Flower

6. Create a new property called location and assign an initial value ofyour choice e.g. Paris.

7. Add a sub-property to colorName and assign a name of type with valueselect e.g. select[Red,Orange,Green,Blue,Yellow,Purple,Violet]

8. Add a sub-property to colorName and assign a name plainDescriptionand value of Favourite Colour or Favorite Color depending on whichside of the Atlantic you reside.

9. Add a sub-property to colorName and assign a name personalizationand value of dialog.

10. Add a sub-property to location and assign a name plainDescription andvalue of Country of Residence.




11. Add a sub-property to location and assign a name personalization andvalue of dialog.

12. Add a sub-property to petsName and assign a name plainDescriptionand value of Pet�s Name.

13. Add a sub-property to petsName and assign a name personalizationand value of dialog.

14. Check the Portalapp.xml file to check all the added entries.15. Within the doContent method of your AbstractPortalComponent pleaseadd the following code:IPortalComponentProfile profile =

request.getComponentContext().getProfile();

String colorName = profile.getProperty("colorName");

String petsName = profile.getProperty("petsName");

String location = profile.getProperty("location");

response.write("<table><tr></tr>");

response.write(

"<tr><td> Hello. Your favorite color is </td><td bgcolor='"

+ colorName.toLowerCase().trim()

+ "'>"

+ colorName

+ "</td></tr>");

response.write(

"<tr><td>Your pet's name is </td><td>" + petsName + "</td></tr>");

response.write(

"<tr><td> You live in </td> <td>" + location + "</td> </tr>");

response.write("</table>");

16. Create an iView to test the working of your Personalization.



Solution 7: PersonalizationTask:Personalization

Enhance your Portal Component by enabling the user to change your propertiesby a personalization feature.

1.

1. Create a new Portal Application Project within the EP perspective.Call the project 05-PersonalizationXX.

2. Add a new Portal Component named Welcome.3. Navigate to the Outline box, bottom left, � right click on Welcome andselect Add property in and component profile. Ensure that you havethe PortalApp.xml displayed in the editor

4. Create a new property called colorName and assign an initial valueof blue.

5. Create a new property called petsName and assign an initial value ofyour choice e.g. Flower

6. Create a new property called location and assign an initial value ofyour choice e.g. Paris.

7. Add a sub-property to colorName and assign a name of type with valueselect e.g. select[Red,Orange,Green,Blue,Yellow,Purple,Violet]

8. Add a sub-property to colorName and assign a name plainDescriptionand value of Favourite Colour or Favorite Color depending on whichside of the Atlantic you reside.

9. Add a sub-property to colorName and assign a name personalizationand value of dialog.

10. Add a sub-property to location and assign a name plainDescription andvalue of Country of Residence.

11. Add a sub-property to location and assign a name personalization andvalue of dialog.

12. Add a sub-property to petsName and assign a name plainDescriptionand value of Pet�s Name.

13. Add a sub-property to petsName and assign a name personalizationand value of dialog.




14. Check the Portalapp.xml file to check all the added entries.15. Within the doContent method of your AbstractPortalComponent pleaseadd the following code:IPortalComponentProfile profile =

request.getComponentContext().getProfile();

String colorName = profile.getProperty("colorName");

String petsName = profile.getProperty("petsName");

String location = profile.getProperty("location");

response.write("<table><tr></tr>");

response.write(

"<tr><td> Hello. Your favorite color is </td><td bgcolor='"

+ colorName.toLowerCase().trim()

+ "'>"

+ colorName

+ "</td></tr>");

response.write(

"<tr><td>Your pet's name is </td><td>" + petsName + "</td></tr>");

response.write(

"<tr><td> You live in </td> <td>" + location + "</td> </tr>");

response.write("</table>");

16. Create an iView to test the working of your Personalization.

a)

Figure 112:




Figure 113:

Figure 114:

Figure 115:




Figure 116:

Figure 117:

Figure 118:




Figure 119:

Figure 120:




Figure 121:

Figure 122:

Figure 123:

Figure 124:

Figure 125:




Figure 126:

Figure 127:




Figure 128:

Figure 129:




Figure 130:

Figure 131:




Figure 132:

Figure 133:




Figure 134:

Figure 135:




Figure 136:

Figure 137:

Figure 138:




Figure 139:

Figure 140:




Figure 141:

Figure 142:




Figure 143:

Figure 144:



Lesson Summary

You should now be able to:� Allow end user personalization of portal applications


EP120 Lesson: Internationalization

Lesson: Internationalization

Lesson Overview


� Write Portal Applications that are language independent and handle complexphrases in a language neutral fashion.

Business ExampleBuild applications that can display information in multiple languages.

Internationalization

Figure 145: Internationalization Locales & ResourceBundles



Figure 146: Internationalization - iViews

Figure 147: Internationalization iViews Example



Exercise 8: Internationalization

Exercise ObjectivesAfter completing this exercise, you will be able to:� Support multiple languages in your Portal Application

Business Example

Task:Internationalization Support multiple locales in your personalized PortalComponent. Extend the previous exercise and translate all labels on the screen.

�Hello. Your favorite color is�→ �Hallo. Ihre Lieblingsfarbe ist�

�Your pet's name is�→ �Der Name Ihres Haustiers ist�

�You live in�→ �Sie wohnen in�

1.




1. Open project 05-PersonalizationXX.2. Add the property ResourceBundleName to the component-config of

welcome. Set the property to myBundle.3. Add the following 3 files to the directory 05-PersonalizationXX→

dist→ PORTAL-INF localization:

� myBundle.properties containing

favorite_color= Hello. Your favorite color is

pet_name= Your pet's name is

home= You live in

� myBundle_de.propeties containing

favorite_color= Hallo. Ihre Lieblingsfarbe ist

pet_name= Der Name Ihres Haustiers ist

home= Sie wohnen in

� myBundle_en.properties containing



home= You live in4. Add a new component-profile property ForcedRequestLanguage

with value en to easily test component through personalizationoption in iview.

5. Access the string within the doContent method of the componentHelloWorldComponent. Change all literals to use the translatablelanguage tokens.

6. Deploy and test your component



Solution 8: InternationalizationTask:Internationalization Support multiple locales in your personalized PortalComponent. Extend the previous exercise and translate all labels on the screen.

�Hello. Your favorite color is�→ �Hallo. Ihre Lieblingsfarbe ist�

�Your pet's name is�→ �Der Name Ihres Haustiers ist�

�You live in�→ �Sie wohnen in�

1.

1. Open project 05-PersonalizationXX.2. Add the property ResourceBundleName to the component-config of

welcome. Set the property to myBundle.3. Add the following 3 files to the directory 05-PersonalizationXX→

dist→ PORTAL-INF localization:

� myBundle.properties containing



home= You live in

� myBundle_de.propeties containing

favorite_color= Hallo. Ihre Lieblingsfarbe ist

pet_name= Der Name Ihres Haustiers ist

home= Sie wohnen in

� myBundle_en.properties containing



home= You live in4. Add a new component-profile property ForcedRequestLanguage

with value en to easily test component through personalizationoption in iview.

5. Access the string within the doContent method of the componentHelloWorldComponent. Change all literals to use the translatablelanguage tokens.

6. Deploy and test your component




a)

Figure 148:

Figure 149:

Figure 150:




Figure 151:

Figure 152:




Figure 153:

Figure 154:




Figure 155:

Figure 156:




Figure 157:

Figure 158:




Figure 159:

Figure 160:




Figure 161:

Figure 162:




Figure 163:

Figure 164:




Figure 165:

Figure 166:

Figure 167:




Figure 168:

Figure 169:



Lesson Summary

You should now be able to:� Write Portal Applications that are language independent and handle complex

phrases in a language neutral fashion.


EP120 Lesson: HTMLB

Lesson: HTMLB

Lesson Overview


� Build Portal applications using HTMLB controls

Business ExampleBuild portal applications using HTMLB controls.

HTMLBHTMLB � What it is

� HTMLB (HTML-Business for Java) provides a full set of easy-to-useWeb controls

� HTMLB allows a design-oriented page layout� It is designed to overcome typical servlet problems, such as:

� Visualization and business logic are not separate� Content management consumes a lot of qualified manpower. Skills in

HTML, CSS, JavaScript etc. are essential� Development has to take care of different web clients and -versions� Maintaining the corporate identity through out the whole application

is hard to achieve� Namespace conflicts with form elements

� Also provides the technological infrastructure for easy customer branding

Although development skills are essential, there is more room for flexibility whiledeveloping the application



Figure 170: HTMLB - How it works

HTMLB Objects

� Forms� Controls:

� Layout Controls:

Use to arrange elements in your interface

� Visible Controls:

Elements with which the user has significant interaction

� Non-visible Controls:

Container elements that hold other elements or compliment the othercomponents

� Container� Events

For every button or link an event can be defined. The event that is raisedcan be handled in the next request.


EP120 Lesson: HTMLB

Figure 171: HTMLB - Creating Pages in Abstract Portal Components usingthe class library

Figure 172: HTMLB - DynPage Approach

doInitialization: Called when the application is started. The call is made whenthe page is directly called per URI without parameters and no event occurred.Usually this method is used to initialize data and to set up models. Be aware of thefact that the doInitialization event is also caused when another portal componenton the same page sends an event

doProcessAfterInput: Called when the web client sends the form to the webserver. Except on doInitialization the call is performed every time an event occurs

doProcessBeforeOutput: Called before the form is sent to the web client. Thecall is performed every time even on doInitialization



Figure 173: HTMLB - DynPage Approach Example: PageProcessorCom-ponent

Figure 174: HTMLB - DynPage Approach Example: DynPage

Please notice that the highlighted code in the above example are the areas that thedeveloper has added.

The line myButton.setOnClick(click); will invoke the method onClick when theuser clicks this button.


EP120 Lesson: HTMLB

Figure 175: HTMLB - DynPage Approach - JSP Example:PageProcessorComponent

Figure 176: HTMLB - DynPage Approach - JSP Example: JSPDynPage



Figure 177: HTMLB - DynPage Approach - JSP Example: JSP

Figure 178: HTMLB - DynPage Approach - JSP Beans Example


EP120 Lesson: HTMLB

Figure 179: HTMLB - DynPage Approach - JSP Beans Example: JSPDynPage

Figure 180: HTMLB - DynPage Approach - JSP Beans Example: JSPDynPage




EP120 Lesson: HTMLB

Exercise 9: HTMLB

Exercise ObjectivesAfter completing this exercise, you will be able to:� To write a portal Application based on the DynPage approach.� Use HTMLB eventing.� Use a complex HTMLB element (dateNavigator).

Business Example

Task:Use the DynPage approach to implement an easy user interface. In this exercisewe implement an HTMLB dateNavigator element.

1.

1. Create new Portal Application Project named 05-Basic1HTMLBXXwhere XX is your student number.

2. Create a new DynPage component with the Portal ComponentWizard. Name this Basic1Dynpage.

3. Please add the following code into the doProcessingBeforeOutputmethod to add a new input field.myForm.addText("This is your

Basic HTMLB Application ");

InputField inputField = new InputField("myInputField");

inputField.setValue("This is your inputfield text");

myForm.addComponent(inputField);

4. Perform a quick par upload and test.




5. Add the dateNavigator code into the doProcessBe-foreOutput method:IPortalComponentRequest request =

(IPortalComponentRequest) this.getRequest();

IPortalComponentContext context = request.getComponentContext();

IPortalComponentProfile profile = context.getProfile();

IPageContext pagecontext = PageContextFactory.createPageContext(request);

DateNavigator dn = new DateNavigator(pagecontext);

dn.setId("DateNavigator1");

dn.setMonthsPerColumn(2);

dn.setMonthsPerRow(6);

dn.setOnNavigate("Navigate");

dn.setOnDayClick("DayClick");

dn.setOnWeekClick("WeekClick");

dn.setOnMonthClick("MonthClick");

myForm.addComponent(dn);

6. Save and correct the imports that are needed. Perform a quick parupload and test.

7. Use events to find the day, month or year that the user selects.8. An example of the method for month:public void

onMonthClick(Event evt) {

DateNavigatorMonthClickEvent month = (DateNavigatorMonthClickEvent) evt;

action = month.getMonth() + " " + month.getYear();

}

9. Optional: Change the number of months displayed by theDateNavigator element.


EP120 Lesson: HTMLB

Solution 9: HTMLBTask:Use the DynPage approach to implement an easy user interface. In this exercisewe implement an HTMLB dateNavigator element.

1.

1. Create new Portal Application Project named 05-Basic1HTMLBXXwhere XX is your student number.

2. Create a new DynPage component with the Portal ComponentWizard. Name this Basic1Dynpage.

3. Please add the following code into the doProcessingBeforeOutputmethod to add a new input field.myForm.addText("This is your

Basic HTMLB Application ");

InputField inputField = new InputField("myInputField");

inputField.setValue("This is your inputfield text");

myForm.addComponent(inputField);

4. Perform a quick par upload and test.5. Add the dateNavigator code into the doProcessBe-

foreOutput method:IPortalComponentRequest request =


IPortalComponentContext context = request.getComponentContext();

IPortalComponentProfile profile = context.getProfile();

IPageContext pagecontext = PageContextFactory.createPageContext(request);

DateNavigator dn = new DateNavigator(pagecontext);

dn.setId("DateNavigator1");

dn.setMonthsPerColumn(2);

dn.setMonthsPerRow(6);

dn.setOnNavigate("Navigate");

dn.setOnDayClick("DayClick");

dn.setOnWeekClick("WeekClick");

dn.setOnMonthClick("MonthClick");

myForm.addComponent(dn);

6. Save and correct the imports that are needed. Perform a quick parupload and test.




7. Use events to find the day, month or year that the user selects.8. An example of the method for month:public void

onMonthClick(Event evt) {

DateNavigatorMonthClickEvent month = (DateNavigatorMonthClickEvent) evt;

action = month.getMonth() + " " + month.getYear();

}

9. Optional: Change the number of months displayed by theDateNavigator element.

a)

Figure 181:

Figure 182:



EP120 Lesson: HTMLB

Figure 183:

Figure 184:

Figure 185:




Figure 186:

Figure 187:

Figure 188:



EP120 Lesson: HTMLB

Figure 189:

Figure 190:




Figure 191:

Figure 192:



EP120 Lesson: HTMLB

Figure 193:

Figure 194:



Lesson Summary

You should now be able to:� Build Portal applications using HTMLB controls


EP120 Lesson: MVC

Lesson: MVC

Lesson Overview


� Use the Model-View-Controller (MVC) approach when developing yourPortal Applications.

Business ExampleBuild applications using MVC.

MVCJava Server Pages (JSPs) - Motivation

The Java servlet approach for developing server-side web applications has somedrawbacks, e.g.

� Application logic and content creation is mixed� Generation HTML output from a Java class is not comfortable (e.g.

out.println(�<table name=\�table1\� width=\�100%\�>�)� Developers need both Java and HTML know-how

These issues have been overcome with the introduction of Java Server Pages(JSPs). These are simple HTML (or XML, WML, �) templates, enriched withspecial tags for server side page processing. At runtime, the JSPs are compiledto Java Servlets.



Figure 195: iViews with JSPs Simple Component Level Example

Figure 196: iViews with JSPs Simple Resource Level Example


EP120 Lesson: MVC

Figure 197: Implicit Objects in standard JSPs

Scopes: application, session, request, page11

Figure 198: Implicit Objects in JSP iViews

Both the HTTPServletRequest and the IPortalComponentRequest are available

Only the IPortalComponentResponse is available (no HTTPServletResponse!)

Only the HTTPSession is available (no IPortalComponentSession!)



Figure 199: JSPs Model View Controller Pattern

Figure 200: JSPs Model View Controller Pattern (2)


EP120 Lesson: MVC

Figure 201: Java Beans and JSPs

Figure 202: Java Beans and JSPs: Example




EP120 Lesson: MVC

Exercise 10: JSPDynPage

Exercise ObjectivesAfter completing this exercise, you will be able to:� Write Portal Applications that using JSPDynPages.� Add your elements to a TabStrip

Business Example

Task:Create an Application using the TabStrip HTMLB element to demonstrate the useof tags in the JSPDynPages.

1.

1. Create a Portal Application with the name 05-JSPTabStrip-htmlbXXwhere XX is your student or group number.

2. Create a Portal Component based on a JSPDynpage with the nameJSPtabstrip.

3. Ensure that you have the following code at the top of your JSP page:

<%@ taglib uri="tagLib" prefix="hbj" %>




4. Add the basic TabStrip tags<hbj:tabStrip

id="myTabStrip1"

bodyHeight="200"

width="400"

horizontalAlignment="CENTER"

verticalAlignment="TOP"

selection="1"

tooltip="This is the best TabStrip ever designed"

>

<hbj:tabStripItem

id="myTabStripItem1"

index="1"

height="80"

width="160"

onSelect="tabItem1"

title="Bananas"

tooltip="Select this to find out more about bananas"

>

<hbj:tabStripItemBody>

<hbj:textView text="Bananas are grown in tropical areas of the world." />

</hbj:tabStripItemBody>

</hbj:tabStripItem>

</hbj:tabStrip>



EP120 Lesson: MVC

5. Add more tabstrips items within the tabstrip start and end tags. Theseform the screens that will be displayed when a user presses the top tab.<hbj:tabStripItem


index="2"

height="80"

width="160"

onSelect="tabItem2"

title="Oranges"

tooltip="Oranges are orange"

>


<hbj:textView text=

"The Orange is a fruit originating from South America" />


</hbj:tabStripItem>

<hbj:tabStripItem


index="3"

height="80"

width="160"

onSelect="tabItem3"

title="Apples"

tooltip="Apple makes mac"

>

hbj:tabStripItemHeader>

<hbj:textView text="Apples 3" />

</hbj:tabStripItemHeader>


<hbj:textView text=

"Apples were introduced into the UK by the Romans?" />


</hbj:tabStripItem>

<hbj:tabStripItem


index="4"

height="80"

width="160"

onSelect="tabItem4"

title="Grapes"

tooltip="Grapes are great"

>

<hbj:tabStripItemHeader>

<hbj:textView text="Grapes 4" />



<hbj:textView text=

"Grapes are the best because they are used to make wine." />


</hbj:tabStripItem>




6. Please ensure that the following entry is included in the DeploymentDescriptor<component-profile>

<property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>

</component-profile>

7. Please ensure that the certain native jsp entries are deleted in theDeployment Descriptor.

8. Perform a par upload and test.9. Ensure that the methods required are inserted:

public void onTabItem1(Event event) throws PageException {

IPortalComponentRequest request =


request.putValue("tabselection1", "1");

}





}





}





}

10. Please insert the variable needed at the top of the JSP page:<%

String tabselection1 = (String)componentRequest.getValue("tabselection1");

%>

11. Change the defaulted first tab to dynamically show the selection:selection="<%=tabselection1%>"



EP120 Lesson: MVC

12. Enter this code into the doInitialization method. This will enable thefirst tab to be selected when we first access this screen(the user hasnot had a chance to change). We could change this to 2 or 3 later.// set the initial entry button to the first tab




13. Create a par file, deploy onto your server and test.14. Optional: Add other htmlb elements into your �tab screens�.

<br><br>

<hbj:dropdownListBox id="myDropdownListBox1"

tooltip="Tooltip for my DropdownListBox"

selection="k2"

disabled="false"

nameOfKeyColumn="KeyCol"

nameOfValueColumn="ValueCol" >

<hbj:listBoxItem key="k1" value="Spanish Seville" selected="true"/>

<hbj:listBoxItem key="k2" value="Tangarine"/>

<hbj:listBoxItem key="k3" value="Navel"/>

<hbj:listBoxItem key="k4" value="Outspan"/>

<hbj:listBoxItem key="k5" value="Israel Jaffa"/>

<hbj:listBoxItem key="k6" value="Satsuma"/>

<hbj:listBoxItem key="k7" value="Naartjie"/>

</hbj:dropdownListBox>



Solution 10: JSPDynPageTask:Create an Application using the TabStrip HTMLB element to demonstrate the useof tags in the JSPDynPages.

1.

1. Create a Portal Application with the name 05-JSPTabStrip-htmlbXXwhere XX is your student or group number.

2. Create a Portal Component based on a JSPDynpage with the nameJSPtabstrip.

3. Ensure that you have the following code at the top of your JSP page:

<%@ taglib uri="tagLib" prefix="hbj" %>



EP120 Lesson: MVC

4. Add the basic TabStrip tags<hbj:tabStrip

id="myTabStrip1"

bodyHeight="200"

width="400"

horizontalAlignment="CENTER"

verticalAlignment="TOP"

selection="1"

tooltip="This is the best TabStrip ever designed"

>

<hbj:tabStripItem


index="1"

height="80"

width="160"

onSelect="tabItem1"

title="Bananas"

tooltip="Select this to find out more about bananas"

>


<hbj:textView text="Bananas are grown in tropical areas of the world." />


</hbj:tabStripItem>

</hbj:tabStrip>




5. Add more tabstrips items within the tabstrip start and end tags. Theseform the screens that will be displayed when a user presses the top tab.<hbj:tabStripItem


index="2"

height="80"

width="160"

onSelect="tabItem2"

title="Oranges"

tooltip="Oranges are orange"

>


<hbj:textView text=

"The Orange is a fruit originating from South America" />


</hbj:tabStripItem>

<hbj:tabStripItem


index="3"

height="80"

width="160"

onSelect="tabItem3"

title="Apples"

tooltip="Apple makes mac"

>

hbj:tabStripItemHeader>

<hbj:textView text="Apples 3" />



<hbj:textView text=

"Apples were introduced into the UK by the Romans?" />


</hbj:tabStripItem>

<hbj:tabStripItem


index="4"

height="80"

width="160"

onSelect="tabItem4"

title="Grapes"

tooltip="Grapes are great"

>

<hbj:tabStripItemHeader>

<hbj:textView text="Grapes 4" />



<hbj:textView text=

"Grapes are the best because they are used to make wine." />


</hbj:tabStripItem>



EP120 Lesson: MVC

6. Please ensure that the following entry is included in the DeploymentDescriptor<component-profile>

<property name="tagLib" value="/SERVICE/htmlb/taglib/htmlb.tld"/>

</component-profile>

7. Please ensure that the certain native jsp entries are deleted in theDeployment Descriptor.

8. Perform a par upload and test.9. Ensure that the methods required are inserted:





}





}





}





}

10. Please insert the variable needed at the top of the JSP page:<%

String tabselection1 = (String)componentRequest.getValue("tabselection1");

%>

11. Change the defaulted first tab to dynamically show the selection:selection="<%=tabselection1%>"




12. Enter this code into the doInitialization method. This will enable thefirst tab to be selected when we first access this screen(the user hasnot had a chance to change). We could change this to 2 or 3 later.// set the initial entry button to the first tab




13. Create a par file, deploy onto your server and test.14. Optional: Add other htmlb elements into your �tab screens�.

<br><br>

<hbj:dropdownListBox id="myDropdownListBox1"

tooltip="Tooltip for my DropdownListBox"

selection="k2"

disabled="false"

nameOfKeyColumn="KeyCol"

nameOfValueColumn="ValueCol" >

<hbj:listBoxItem key="k1" value="Spanish Seville" selected="true"/>

<hbj:listBoxItem key="k2" value="Tangarine"/>

<hbj:listBoxItem key="k3" value="Navel"/>

<hbj:listBoxItem key="k4" value="Outspan"/>

<hbj:listBoxItem key="k5" value="Israel Jaffa"/>

<hbj:listBoxItem key="k6" value="Satsuma"/>

<hbj:listBoxItem key="k7" value="Naartjie"/>

</hbj:dropdownListBox>

a)



EP120 Lesson: MVC

Figure 203:

Figure 204:

Figure 205:




Figure 206:

Figure 207:



EP120 Lesson: MVC

Figure 208:

Figure 209:




Figure 210:

Figure 211:

Figure 212:Continued on next page


EP120 Lesson: MVC

Figure 213:

Figure 214:




Figure 215:

Figure 216:



EP120 Lesson: MVC

Figure 217:

Figure 218:



Lesson Summary

You should now be able to:� Use the Model-View-Controller (MVC) approach when developing your



EP120 Unit Summary

Unit SummaryYou should now be able to:� Understand and build abstract portal components� Discuss the nature of the security zone� Discuss how a Portal application uses the security zone features� Discuss permissions and security zones� Allow end user personalization of portal applications� Write Portal Applications that are language independent and handle complex

phrases in a language neutral fashion.� Build Portal applications using HTMLB controls� Use the Model-View-Controller (MVC) approach when developing your



Unit Summary EP120


Unit 6Portal Services and Web Services

Unit OverviewDescribe Portal Services.

Develop and deploy Portal Services.

Access Portal Services from another Portal application.

Generate Web Services proxies fro a portal services.

Generate proxies for a Web Service and access them from a Portal Application.


� Describe what Portal Services are and situations where they are typicallyused

� Develop and Deploy your own Portal Services� Access Portal Services from another Portal Application� Describe the basic components of Web Services and how they are used� Generate Web Service Proxies for a Portal Service� Generate Proxies for a Web Service and access them from a Portal

Application

Unit ContentsLesson: Portal Services... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .200

Exercise 11: Custom Portal Services .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .211Lesson: Web Services .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .222


Unit 6: Portal Services and Web Services EP120

Lesson: Portal Services

Lesson Overview


� Describe what Portal Services are and situations where they are typicallyused

� Develop and Deploy your own Portal Services� Access Portal Services from another Portal Application

Business ExampleDeploy a portal service and use it in another application.

Portal Services

Figure 219: Portal Services


EP120 Lesson: Portal Services

In the non-trivial case, a service provides an interface based API and animplementation.

� The implementatoin is non-public and will not be seen by nor interfer withusing applications.

� The service interface relates the service API and its implementation byoffering access to implementations of API interfaces through factories.

� The API should not rely on any other non-standard API.

A portal service can be transfered into a Web Service.

Figure 220: Implementing Portal Services - IService

Figure 221: Implementing Portal Services - IServiceContext



Figure 222: Deployment Descriptor Service Profile

Figure 223: Portal Object Naming

Figure 224: Creating a new Portal Service



Figure 225: SAP NWDS Support for Portal Service Implemenation

Figure 226: Example: Implementing IService



Figure 227: Example: Implementing the new Interface

Figure 228: Example: Creating the Deployment Descriptor

Figure 229: Example: Package and Deploy



Figure 230: Configuration of Portal Applications/Services

Only services with a service-profile are shown here.!!

Figure 231: Accessing a Portal Services



Figure 232: Accessing Portal Services: Add SharingReference

Figure 233: Accessing Portal Services: Add Libraries



Figure 234: Accessing Portal Services: Import packages

Figure 235: Accessing Portal Services: Get Instance



Figure 236: Example I: Use your myLoggerService

Figure 237: Example I: Use your myLoggerService



Figure 238: Example II: Using the Navigation Service





Exercise 11: Custom Portal Services

Exercise ObjectivesAfter completing this exercise, you will be able to:� Implement your own service and access this within your Portal Application

Business Example

Task:

1. Create a new portal project called 06-CustomPortalServiceXX where XXis your group number. Create a service called PercentCalc with a methodgetPercentage. getPercentage accepts two floating point numbers and returnsa floating point result which is the precentage of the two numbers passedin. Deploy this service to the portal.

2. Create a portal application called CustomPortalServiceTestXX to call theportal service you just deployed.



Solution 11: Custom Portal ServicesTask:

1. Create a new portal project called 06-CustomPortalServiceXX where XXis your group number. Create a service called PercentCalc with a methodgetPercentage. getPercentage accepts two floating point numbers and returnsa floating point result which is the precentage of the two numbers passedin. Deploy this service to the portal.

a)

Figure 239:




Figure 240:

Figure 241:




Figure 242:

Figure 243:




Figure 244:

Figure 245:




Figure 246:

Figure 247:




Figure 248:

Figure 249:

2. Create a portal application called CustomPortalServiceTestXX to call theportal service you just deployed.

a)




Figure 250:

Figure 251:




Figure 252:

Figure 253:




Figure 254:

Figure 255:



Lesson Summary

You should now be able to:� Describe what Portal Services are and situations where they are typically

used� Develop and Deploy your own Portal Services� Access Portal Services from another Portal Application



Lesson: Web Services

Lesson Overview


� Describe the basic components of Web Services and how they are used� Generate Web Service Proxies for a Portal Service� Generate Proxies for a Web Service and access them from a Portal

Application

Business ExampleBuild a Web Service.

Web Services

Figure 256: Web Service Architecture


EP120 Lesson: Web Services

Figure 257: Web Services Support in the Portal (1)

By providing a SOAP connection to the Portal Service, external componentscan access to the services and applications developed with the PRT technologyusing the SOAP protocol.

The PRT provides tools and facilities to generate Proxies to external WEBServices, so that Portal Components and Portal Services can easily access toexternal WEB Services to build Portal Applications.

Figure 258: Web Services Support in the Portal (2)

Inqmysoap.jar: a JAXM 1.0 Implementation (based on the Java API for XMLMessaging (JAXM)) which was developed as JSR067 under the Java CommunityProcess.



Figure 259: Create Web Services (1)










Alias: is the alias name for the service in the portalapp.xml

Output: is the name of the wsdl file

Location import: if you want to use multiple wsdl files to describe your wsdl file,this option will write tag import in the generated wsdl (not often used)

Location URL: The end of the URL to access to the portal, at runtime sth. Is addedlike <http://localhost:50000/> to give the service the port addess in the wsdl file.



Generate the virtual portal service client: this will generate a proxy service usein communication between two PRT with Web Service protocol. In this case aproxy will fake a true PortalService on PRT Client side.

Enable the getter/setter limitation: If disable allow you to generate inwsdl/serializer signature of complex only based on getter (no need to code setterfor each attribute). This should only be used for inside/out scenario, when need togive back to soap call messaeg such complex type.

Enable Security: Enable security based on ACL/Portal User Management. If settrue you will need to setup for each possible user right in ACL.

The user are extracted from the httprequest as in the normal portal scenario:user/password/sso ticket/https.....









Figure 269: Accessing external WEB Services (1)















Figure 276: Changed portalapp.xml

Figure 277: Sample Code



Lesson Summary

You should now be able to:� Describe the basic components of Web Services and how they are used� Generate Web Service Proxies for a Portal Service� Generate Proxies for a Web Service and access them from a Portal

Application


EP120 Unit Summary

Unit SummaryYou should now be able to:� Describe what Portal Services are and situations where they are typically

used� Develop and Deploy your own Portal Services� Access Portal Services from another Portal Application� Describe the basic components of Web Services and how they are used� Generate Web Service Proxies for a Portal Service� Generate Proxies for a Web Service and access them from a Portal

Application


Unit Summary EP120


Unit 7Standard Portal Services

Unit OverviewDescribe available services in the Portal Runtime.

Describe key components of the User Management Engine (UME) and use theUM API to work with user, group and role objects.

Describe the architecture of the Connector Framework and use the Connectorgateway to connect to an ABAP system and a RDBMS.


� Describe the available services in the Portal Runtime� Describe the key components of the User Management Engine (UME) and

use the UM API to work with user, group and roles objects� Describe the architecture of the Connector Framework and use the

Connector gateway to connect to an R/3 system and to RDBMS

Unit ContentsLesson: User Management.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .238

Exercise 12: User Management ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .261Lesson: Connector Framework .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .266

Exercise 13: JDBC Connection.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .289


Unit 7: Standard Portal Services EP120

Lesson: User Management

Lesson Overview


� Describe the available services in the Portal Runtime� Describe the key components of the User Management Engine (UME) and

use the UM API to work with user, group and roles objects

Business ExampleBuild applications to access standard portal services such as User Management

Public Services of the PRT

� User Agent Service� Logging Service� Connector Framework� JCo client service� HTML Business for Java (HTMLB)� User Management� User Mapping� Navigation� System Console� EPCF Toolbox� System Landscape� Admin Logviewer� ...

Client eventing: The Client Framework enables portal components tocommunicate easily on the client. Several features like automatic relaxing of theJavaScript Origin Policy, Client Eventing and Client Data-Bag simplifies theintegration and cooperation of different portal components from different servers.

Logger: This service is used to diagnose problems and to return detailedinformation about the problems identified. Depending on the target user, it ispossible to define simple or more complex logging. The logger provides a set ofconvenient methods for generating log messages.


EP120 Lesson: User Management

JCo client service: This service defines all the actions needed to connect to anSAP system through RFC connections.

HTML Business for Java: HTML Business for Java provides the user with anefficient set of controls, similar to JavaSwing. The controls are based on servletsand JSP pages. The developer uses bean-like components or JSP tags. Rendererclasses translate the components into HTML commands.

User Mapping: Map the user id, if the user has diffrent ids in diffrent systems

User Management: Get user information (for example, role assignment) fromportal user management

Navigation: Create custom navigation iViews or custom navigation hierarchies

System Console: Administration console to load PARs, monitor ClusterLandscape, and manage Portal Applications

Xsltransform: Provides API to apply XLS transformation toXML document

jcoclient: Manage JCO Client access by implementing pooling and sessiontimeout/logoff detection

Application Contentconverter: Generic XSL Converter providing factories toconvert RSS to HTML and XML to HTML.

Application Contentconversion: The Content Type Conversion Service offersAPI to add content converter capabilities to the response process.

Admin Logviewer: search, filter, browser, download log files of the Platform.

Admin Logadmin: manage logger configuration of the Platform.

EPCF Toolbox: Java classes for EPCF integration

Useragent: User-Agent (Browser) detection plus affiliation checker

System Landscape: Get information about the system landscape

iView Service: iViews/Pages/Systems semantic layer



User Management

Figure 278: Architecture Overview User Management Engine

UME is the central storage place for user and role information for all Java andABAP applications that use UME. As such, the individual services do not haveto rely on their own UM and the user is confronted with only one central usermanagement service.

Persistence Manager: Responsible for reading the data from or writing the datato the correct data source. The data source to which the persistence managerwrites is transparent to the application. Specific user sets or attributes can bedistributed across different repositories. Persistence Adapters

Data source specific implementation for data storage and retrieval. The persistencemanager consults the persistence adapters when creating, reading, writing, andsearching user management data. Persistence adapters for the following typesof repositories are available:

Database

Lightweight Directory Access Protocol (LDAP) directory

SAP R/3 System 6.20

You can configure UME to use one or more of these persistence devices in parallel.Users can also be stored in several different physical LDAP directory servers, orin different branches of the same LDAP directory server.



The application programming interface (API): Layer on top of the persistencemanager. In the persistence manager, you configure which data is written to orread from which data source, so that the applications using the API do not have toknow any details about where user management data is stored

Replication Manager

The replication manager replicates UME data to external systems. User data that iswritten to the persistence manager is also written to the replication manager. Thereplication manager generates XML documents and sends them to the externalsystems which process them and perform the corresponding actions.

For example, if you are using UME with SAP Enterprise Portal and want an SAPCustomer Relationship Management (CRM) system to work with the same userbase as the portal, you can configure UME to replicate all user data from theportal to the CRM system.

Figure 279: User Management Engine API



Figure 280: User Management Access in Portal Components

How do I determine which JAR file contains the API I want to use?

-> A utility is available from the Alphaworks (IBM) website which plugs intothe Eclipse IDE and provide a useful means of determining which JAR filesneed to be referenced. Download the free utility from the Alphaworks websitehttp://www.alphaworks.ibm.com/aw.nsf/reqs/jarclassfinder (registration required).Unzip it into your NWDS eclipse\plugins directory. Restart NWDS.



Figure 281: UME Objects

Figure 282: User Management Factories



Figure 283: Unique IDs in the UME World

The examples illustrate various objects returned:

USER.CORP_LDAP.uid=i802895,ou=people,dc=sap,dc=corp (User fromCORP_LDAP server)

GRUP.CORP_LDAP_2.cn=developers,ou=groups,dc=sap,dc=corp (Group from adifferent LDAP server)

GRUP.SUPER_GROUPS_DATASOURCE.EVERYONE (Special group"Everyone")

ROLE.PCD_ROLE_PERSISTENCE.VvlvkEGjiW9zPFaxR/4pd2/bX5Q= (Role"super_admin")

USER.PRIVATE_DATASOURCE.un:admin (User from databasePRIVATE_DATASOURCE)



Figure 284: Working with Unique IDs

Figure 285: More Information



Figure 286: UMFactory - IUserFactory

Figure 287: User Factory Obtaining a User object

The IUser object contains most the information that you probably need regardinga user. Information about the name of the user, their unique ID, LDAP attributes,display name, role membership, etc are available from the IUser object. If you



have a user object (either from the authenticated user or any other user), you canuse that object to query the user�s profile using the respective get() - methods. It isalso possible to edit the corresponding profile data with the interface IUserMaint.

Figure 288: IUser Methods

IUser is read-only. In order to modify a user, use IUserMaint



Figure 289: Obtaining Information about the Current User

This example illustrates how to obtain information about a user associated withthe request.



Figure 290: Obtaining Information about another User

This example illustrates how to obtain information about a user using the LogonID as a key.

The exception checks to see if a nested exception such as NoSuchUserAccountEx-ception occurred



Figure 291: Obtaining Information about another User (2)

This example illustrates how to obtain information about a user using the UniqueID as a key.

The exception checks to see if a nested exception such as NoSuchUserExceptionoccurred



Figure 292: LDAP Attributes accessible via UME

Figure 293: Predefined Attributes



Different applications or iViews which want to store application-specific data forthe same principal object might cause inconsistencies by overwriting or deletingthe data written by another application or iView. To prevent inconsistencies of thistype, UME configuration files support namespaces, where each application canstore its application-specific data in a separate namespace. In this way, customattributes that have the same name are stored in a different namespace and do notclash with each other.

Example: A user, USER.CORP_LDAP.uid=testuser,ou=research,o=sap, hasthree email addresses, one in it�s master data (in the UME default namespacecom.sap.security.core.usermanagement), one for application1 and another forapplication2.

Additional Custom Attributes can be added by editing the dataSourceConfigu-ration_xxx file. A mapping (logical to physical) needs to be performed for eachattribute Use getAttribute() to retrieve the value of the required custom LDAPattribute

Figure 294: Attribute Mapping Configuration

In this example the LOGICAL attribute "lastname" is mapped to the PHYSICALattribute "sn"

The attribute mappings are defined in the dataSourceConfiguration_xxx.xml filefor the appropriate LDAP vendor. See the How-To Guide



Figure 295: Adding a new LDAP Attribute in Custom Namespace

Figure 296: Reading Custom LDAP Attributes

This example illustrates how to obtain a custom attribute "hr_org" for a particularuser from the LDAP server.



The namespace corresponds to the namespace defined in the XML configurationfile.

The name of the default (SAP standard) namespace is IPrincipal.DE-FAULT_NAMESPACE

Figure 297: Searching for Users



Figure 298: Searching for Users Code sample

Figure 299: Searching for Users Code sample 2



Use IPrincipal.DEFAULT_NAMESPACE for the default SAP definednamespace (e.g. email address, first name, lastname, etc.)

Figure 300: Changing Information about the Current User

This example illustrates how to obtain update the user "testuser01".

Exception handling is omitted in the sample code for clarity



Figure 301: IUserAccount

� Users can be created with the UserFactory newUser() method. IUserMaintrepresents a modifiable user object. You must issue a commit() in orderto actually create the user.

� An associated account needs to be created for the User withnewUserAccount() using the UniqueID of the new User.

� Take care to delete the user if an error occurs (catch the appropriate exceptionand handle it).



Figure 302: Creating a New User (2)

Figure 303: Creating a New User (3)



Figure 304: Deleting an Existing User

Deleting a user also removes the associated account





Exercise 12: User Management

Exercise ObjectivesAfter completing this exercise, you will be able to:� Access your account�s details through the IPortalComponentRequest object� Access further information like role assignments through the UMFactory

Business Example

Task:User Management Service

Develop an iView that displays personal attributes belonging to your user account,i.e. the email address, first and last name. In addition find out what roles areassigned to your user account.

1. Open the in Exercise 3 generated project 03-FirstPortalProject.

2. Create a new AbstractPortalComponent named com.sap.training.por-tal.UserInfoComponent

3. Add a sharing reference to the usermanagement service to thecomponent-config section in the portalapp.xml

4. Get access to your user account attributes and print them. Use theIPortalComponentRequest object to perform this task. See course materialfor details.

Find and add the necessary imports by the �Source→ Organize Imports�wizard.

5. Iterate through all roles available in the portal. Print roles assigned to currentuser. Use the UMFactory resp. the IRoleFactory to perform this task.

6. Deploy and test your component.



Solution 12: User ManagementTask:User Management Service

Develop an iView that displays personal attributes belonging to your user account,i.e. the email address, first and last name. In addition find out what roles areassigned to your user account.

1. Open the in Exercise 3 generated project 03-FirstPortalProject.

a) Open the in Exercise 3 generated project FirstPortalProject

2. Create a new AbstractPortalComponent named com.sap.training.por-tal.UserInfoComponent

a) Click on the icon of the Portal Application Object wizard. Select PortalComponent→ Abstract Portal Component as template.

Enter UserInfoComponent into the name field.

Enter com.sap.training.portal into the package name field.

Click finish.

3. Add a sharing reference to the usermanagement service to thecomponent-config section in the portalapp.xml

a) Add a sharing reference to the new component. Double click on theportalapp.xml in FirstPortalProject→ dist→ PORTAL-INF→portalapp.xml. Click on More in the application section and thenon Add... → Add Standard. Choose PrivateSharingReference andenter usermanagement into the value field. Finish the wizard. (Thisreference is only necessary for step 5)

4. Get access to your user account attributes and print them. Use theIPortalComponentRequest object to perform this task. See course materialfor details.




Find and add the necessary imports by the �Source→ Organize Imports�wizard.

a) Add the coding for your details to the doContent() method. This couldlook as follows:

IUser user = request.getUser();

String userName = user.getDisplayName();

String depName = user.getDepartment();

String phone = user.getTelephone();

String email = user.getEmail();

response.write("<B>Your details:</B><BR>");

response.write("Name: "+ userName +"<BR>");

response.write("Department: "+ depName+ "<BR>");

response.write("Phone: "+phone+"<BR>");

response.write("Email: "+email+"<BR>");




5. Iterate through all roles available in the portal. Print roles assigned to currentuser. Use the UMFactory resp. the IRoleFactory to perform this task.

a) In order to list all roles you have to get a search filter from theroleFactory and search using the wildcard *. The coding may looklike this:

response.write("<br><B>Your roles:</B><BR>");

IRoleFactory roleFactory = UMFactory.getRoleFactory();

IRoleSearchFilter rFilter;

try {

rFilter = roleFactory.getRoleSearchFilter();

rFilter.setDescription("*", ISearchAttribute.LIKE_OPERATOR, false);

ISearchResult result;

result = roleFactory.searchRoles(rFilter);

if (result.getState() == ISearchResult.SEARCH_RESULT_OK) {

while (result.hasNext()) {

String uniqId = (String) result.next();

if (user.isMemberOfRole(uniqId, true)) {

IRole aRole = roleFactory.getRole(uniqId);

response.write(aRole.getDescription() + "<BR>");

}

}

}

} catch (UMException e) {

// TODO Auto-generated catch block

e.printStackTrace();

}

6. Deploy and test your component.

a) Deploy and test your component.



Lesson Summary

You should now be able to:� Describe the available services in the Portal Runtime� Describe the key components of the User Management Engine (UME) and

use the UM API to work with user, group and roles objects



Lesson: Connector Framework

Lesson Overview


� Describe the architecture of the Connector Framework and use theConnector gateway to connect to an R/3 system and to RDBMS

Business ExampleBuild reports from RFC, BAPI or SQL Queries.

Connector Framework

Figure 305: JCA (J2EE Connector Architecture)

JCA/J2EE Connector Architecture is not API: it's the name of the architecture,as the name implies. The goal of JCA is to provide the pluggable connectorarchitecture between J2EE Application Servers and EIS/Enterprise InformationSystems (ex. ERP, RDBMS).

JCA 1.0 defines set of system level contracts between J2EE Application Serversand EIS:


EP120 Lesson: Connector Framework

Connection management

The J2EE Connector Architecture provides support for efficient connectionmanagement by relying on application connection pooling. Connections with EISdata and services are established, configured, cached, and reused automatically byapplication servers that are compliant with J2EE 1.3 technology.

Rather than create and destroy EIS connections on an as-needed basis -- aninefficient approach at best -- J2EE Connector Architecture calls on Javatechnology application servers to monitor and manage them intelligently, inan effort to maximize runtime performance and scalability on the fly. TheJava application server manages the EIS connection pool automatically andtransparently, so no additional programming is required by either EIS or Javatechnology developers.

Transaction management

Transactional integrity is another thorny EIS integration issue elegantly solved bythe J2EE Connector Architecture. The J2EE Connector Architecture prescribes"transaction management contracts" between application servers and EISconnectors. Third-party EIS vendors simply encapsulate transaction supportwithin EIS connectors that are compliant with J2EE 1.3 technology to make themavailable to Java technology developers.

For EIS vendors, this can range from no transaction support at all (for legacysystems), to support for one or all three types of enterprise transactions: local orXA (with either single- or two- phase commit). Conversely, Java technologyapplication server vendors have no say in the matter of transaction support. TheJ2EE Connector Architecture specification requires them to deliver products to themarket that uphold all EIS transaction types.

Security

The J2EE Connector Architecture defines portable "security contracts" that don'trely on platform- or implementation- specific technologies. The scope of thesegeneric security contracts depends upon the particular back-end EIS system.For example, it could require password user-authentication, or an end-to-endenvironment, in addition to specific security requirements of the EIS. As withconnection pooling and transactional support, it's up to the individual EISconnector vendors to roll in full support for their platform's security requirements.

A J2EE Application Server vendor is responsible for shipping a set of Java APIcalled "CCI/Common Client Interface". On the other hand, An EIS vendor isresponsible for shipping "Resource Adapter", which is wrapped by CCI API.Resource Adapter may contain platform specific native libraries. You can thinkthat the relationship of CCI and Resource Adapter is similar with the one wehave in JDBC API and vendor specific database drivers. In theory, by usingthe JCA, EIS vendors no longer need to customize their product for each J2EEApplication Server.



SAP has partnered with I-Way software to provide a number of RAs (they haveover 250)

Implements both CCI and uses the EIS's proprietary APIs for integration

Shields the developer from complexities of the EIS APIs

Using the SAP Connector

Figure 306: Connector Framework (for SAP Connector)



Figure 307: Connector Framework (for JDBC Connector)

Figure 308: More Information



Figure 309: How ABAP implements interface with RFM?

"Function Modules" are the routines of ABAP program.Theyhave well-definedinterfaces called "Import parameters" and "Export parameters". ABAP has 3data types - Scalar, Structure and Table values. SAP developed it's proprietarycommunication protocol called "RFC/Remote Function Call", which is originallybased on the standard RPC/Remote Procedure Call. We call a RFC-enabledFunction Module a "RFM/Remote Function Module". CCI/Common ClientInterface API is a Java wrapping layer ofRFM.

Figure 310: Connector Framework (for SAP Connector)



Figure 311: Find and execute BAPIs in R/3 using transaction se37



Figure 312: Display signature of a BAPI

1. Use the Connector Gateway Service to obtain connections to back endsystems

2. Use the Connection Properties object to facilitate SSO3. Create an Executable Interaction interact to describe the interaction with the

back end system (Function Module, BAPI call, etc)4. Create an Interaction Spec (IInteractionSpec) to specify function module to

call5. Create an input record (MappedRecord) describing input parameters6. Execute the interaction Spec with the input record



Figure 313: Required imports and libraries

The required libraries can be found in the PDK Library convenience ZIP file.

Figure 314: Deployment Descriptor



Figure 315: Getting a connection - 1





Figure 318: Interactions



Figure 319: Interaction Specs - 1

Figure 320: Interaction Specs - 2



Figure 321: Set scalar values

Figure 322: Set Structure values



Figure 323: Set Structure values

Figure 324: Set Table values



Figure 325: Set Table values

Figure 326: CF API Executing the Interaction



If you access ABAP data via JCA, the Java data type you need is only"Mapped Record type. MappedRecord is a collection of Record instancesordered by key-value pairs. We'll put respective scalar values, structure values,and table values on this MappedRecord instance. MappedRecord belongs tojavax.resource.cci.* package.

Figure 327: CF API Retrieving the Data

Figure 328: CF API Using the Data




Figure 330: CF API Closing the Connection



Using the JDBC Connector

Figure 331: General Architecture The Big Picture



Figure 332: Connector Framework (for JDBC Connector)

1. Use the Connector Gateway Service to obtain connections to back endsystems

2. Use the Connection Properties object to facilitate SSO3. Obtain a connection to the back end system4. Create a Query object to describe the query you wish to execute on the back

end system5. Execute the query and check the return status6. Obtain the output - usually returns an IRecordset object7. Iterate through the record set and deal with the data



Figure 333: Required imports and libraries

The required libraries can be found in the PDK Library convenience ZIP file.

Figure 334: CF API Getting a Connection

The connector gateway is used as any other service in the portal is accessed.



Figure 335: CF API Getting a Connection (cont.)

Figure 336: CF API Getting a Connection (cont.)



Figure 337: CF API Queries




Figure 339: CF API Using the Data (cont.)

Figure 340: CF API Retrieving Query Results



Figure 341: CF API Retrieving Query Results (cont.)



Exercise 13: JDBC Connection

Exercise ObjectivesAfter completing this exercise, you will be able to:� Connect to a SQL database.

Business ExampleBuild a report from a database table.

Task:

1. Follow the detailed instructions in the Solutions.



Solution 13: JDBC ConnectionTask:

1. Follow the detailed instructions in the Solutions.

a)

Figure 342:

Figure 343:




Figure 344:

Figure 345:




Figure 346:

Figure 347:

public class JDBC extends AbstractPortalComponent {

public void doContent(

IPortalComponentRequest request,




IPortalComponentResponse response) {

// Open a connection

IConnectorGatewayService cgService =

(IConnectorGatewayService) PortalRuntime

.getRuntimeResources()

.getService(

IConnectorService.KEY);

ConnectionProperties prop =

new ConnectionProperties(request.getLocale(), request.getUser());

IConnection client = null;

try {

client = cgService.getConnection("myDB", prop);

} catch (Exception e) {

response.write(e.toString());

return;

}

try {

// Issue SQL Query statement

INativeQuery query = client.newNativeQuery();

String queryStr =

"SELECT name, address, zip FROM hotel.hotel";

Object result = query.execute(queryStr);

// Iterate returned result

ResultSetMetaData recordMetaData =

((ResultSet) result).getMetaData();

int colNum = recordMetaData.getColumnCount();

//result.beforeFirst();

response.write("<table border=1>");

while (((ResultSet) result).next()) {

response.write("<tr>");

for (int i = 1; i <= colNum; i++) {

response.write("<td>" + ((ResultSet) result).getString(i)+ "

}

}

// Close the connection

client.close();

} catch (QueryExecutionException e) {


} catch (CapabilityNotSupportedException e) {





} catch (ConnectorException e) {


} catch (InvalidQueryStringException e) {


} catch (ResourceException e) {


} catch (SQLException e) {


} catch (Exception e) {


}

}

}

Figure 348:

Figure 349:




Figure 350:

Figure 351:




Figure 352:

Figure 353:




Figure 354:

Figure 355:




Figure 356:

Figure 357:



Lesson Summary

You should now be able to:� Describe the architecture of the Connector Framework and use the



Unit Summary EP120

Unit SummaryYou should now be able to:� Describe the available services in the Portal Runtime� Describe the key components of the User Management Engine (UME) and

use the UM API to work with user, group and roles objects� Describe the architecture of the Connector Framework and use the



Unit 8Enterprise Portal Client Framework

Unit OverviewUnderstand the architecture and features of EPCF.

Use the Client Framework to raise and subscribe to events.

Understand the Client Data Bag and pass data to receiving components using theClient Data Bag.

Understand the different Navigation features and use the Navigation API.

Understand the Work Protect feature.


� Understand the architecture and features of the EPCF� Use the Client Framework to raise and subscribe to events� Understand the Client Data Bag and pass data to receiving components

using the Client Data Bag� Understand the different Navigation features and use the Navigation API� Understand the WorkProtect feature and implement Portal Applications that

handle unsaved data

Unit ContentsLesson: Enterprise Portal Client Framework ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . .302

Exercise 14: Eventing.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .315


Unit 8: Enterprise Portal Client Framework EP120

Lesson: Enterprise Portal Client Framework

Lesson Overview


� Understand the architecture and features of the EPCF� Use the Client Framework to raise and subscribe to events� Understand the Client Data Bag and pass data to receiving components


handle unsaved data

Business Example

Enterprise Portal Client Framework

� Eventing Send and receive events without server involvement.� Data Bag Store and load data on the client side.� Navigation with Navigation Target Navigate to any portal page or iView

inside a role through by URL Cross-navigate: use links within any portalapplication and the navigation nodes are automatically updated.

� WorkProtect Handle unsaved data in stateful applications.


EP120 Lesson: Enterprise Portal Client Framework

Figure 358: EPCF Levels

Figure 359: Configuration of the Framework Level



Figure 360: System API

getInstanceID: This method returns an unique EPCF instance as type String.

The method is used by the EPCF core to distinguish the pages after a page refresh.

getUniqueWindowId(): You can use this method to append the returned iFrameidentifier string to the name you use to define a client data bag.

This creates a client data bag that can only be accessed by a specific IFrame.

Figure 361: Client Eventing API

Namespaces: Compliant to W3C specification (RFC2141, RFC1630)

reserved Namespaces SAP Core Development: urn:com.sap.* ,urn:com.sapportals.* , urn:com.sapportals.portal.*



Show example in PDK (com.sap.pct.pdk.epcf ? ExampleTwo)

Figure 362: Client Data Bag

Figure 363: Client Data Bag API



Figure 364: Eventing & Data Bag Example

� Provides the infrastructure for handling unsaved data in stateful applications.� Preconditions for a portal application that wants to take advantage of the

WorkProtect feature must maintain a special status: the �Dirty� flag� EPCM.setDirty(flag)� EPCM.getDirty()

� The Client Framework monitors the current �Dirty� state of all applicationson the portal page. If one or more apps are marked as �Dirty� - navigationtarget is executed in a new window

� Navigation performed with browser links (Back/Forward, entering URL,etc.) always destroy the unsaved data.

Navigation performed with browser lnhiks (Back/Forward/URL) alwaysdestroys the unsaved data because such links cannot be adapted. In a typicalscenario, the application sets the �Dirty� flag when the user enters a newvalue in the entry field and resets the �Dirty�� flag when The user saves it,i.e. clicks on the save/submit button in the portal application. Back, Forward,URL in the location bar always destroy the unsaved data. Links that use thedoNavigate method are workprotect save. Links that open in a new windoware save, but links with a target will lose the unsaved data.



Figure 365: WorkProtect Mode - Example

Figure 366: WorkProtect Mode - Configuration



Figure 367: WorkProtect Mode - Personalization

1. Start with NavigationTarget /Navigation by URL2. Absolute Navigation3. Relative Navigation4. Object Based Navigation

Figure 368: Navigation: Navigation Targets

Determination of pcd location:

Open the role or page

Within the role navigate to the iView or page that you want to use asNavigationTarget



Display the properties of that iView or Page

Select and copy the PCD Location property value

Replace the pcd: PREFIX with the PREFIX ROLES://

Figure 369: Start with NavigationTarget / Navigation by URL

Figure 370: Absolute Navigation

A navigation is considered to be absolte of the full path � starting from thenavigation hierarchy root down to the navigation target, is known to the invokerof the navigation.



Figure 371: Absolute Navigation - doNavigate

For navigation through the portal, when the absolute location of the navigationtarget is known. The function must get the navigation target parameter. All therest of the parameters are optional.

Figure 372: Absolute Navigation - doNavigate



Figure 373: Relative Navigation - doRelativeNavigate

Possibility to navigate to a location, relative to current location.

For Example:

< AHREF="myLink2" onclick="return EPCM.doRelativeNavigate('ROLES://por-tal_content/WebDynproTests/WebDynproRolle/Level1/Level2/Level3/Level4', 2,'{WebDynproPage}')">This is a portal link using doRelativeNavigate<A>

PCDUrl of the current node folder

Levels up

Name of the Page to which to navigate.







Figure 376: Object Based Navigation - doObjBasedNavigate

String obnCall = "EPCM.doObjBasedNavigate('"

+ "OBNTest" + "','"

+ "dbo.sales" + "','"

+ "Marion=Test" + "','"

+ "PassParameterTest"

+ "')";

Figure 377: Object Based Navigation - doObjBasedNavigate





Exercise 14: Eventing

Exercise ObjectivesAfter completing this exercise, you will be able to:� Write portal applications which make use of the EPCF to subscribe to and

raise events

Business Example

Task:To demonstrate Client Side Eventing we will import the par file08_ClientEventing_Exercise.par.

This consists of a simple JSP application compromising two JSP files: One toraise an event and one to subscribe to this specific namespace. Modify thedisplayInfo2.jsp component by following the TODO items in the code to includethe following things:

1.




1. A client row selection handler has been registered with the Tableview.The code below is used to cause the Javascript function �radioSelect()�to be called when the user clicks on a user:

srTV.setOnClientRowSelection(

"JavaScript:radioSelect(htmlbevent.obj.getClickedRowKey());");

2. Locate the function radioSelect() in the JSP file and register a clientside event handler for the row selection event. The event handlershould raise the following event:

namespace: com.customer.training.UMEExample

event: userSelected

data: userID of selected user.

3. Modify the UserInfo component (actually � userDetails.jsp) toregister for an event handler that listens for the event raised by thesearch component.

4. The event handler should retrieve the data from the event andthen repost back to itself with the user ID as the parameter.The data from the event can be obtained by using the propertyevent.dataObject. The value should be stored in the �uid� formelement (e.g. document.forms[0].uid.value) After storing the valuefrom the event, repost (submit) the form back to the server (e.g.documents.forms[0].submit())

5. Please follow the detail solutions.



Solution 14: EventingTask:To demonstrate Client Side Eventing we will import the par file08_ClientEventing_Exercise.par.

This consists of a simple JSP application compromising two JSP files: One toraise an event and one to subscribe to this specific namespace. Modify thedisplayInfo2.jsp component by following the TODO items in the code to includethe following things:

1.

1. A client row selection handler has been registered with the Tableview.The code below is used to cause the Javascript function �radioSelect()�to be called when the user clicks on a user:

srTV.setOnClientRowSelection(

"JavaScript:radioSelect(htmlbevent.obj.getClickedRowKey());");

2. Locate the function radioSelect() in the JSP file and register a clientside event handler for the row selection event. The event handlershould raise the following event:

namespace: com.customer.training.UMEExample

event: userSelected

data: userID of selected user.

3. Modify the UserInfo component (actually � userDetails.jsp) toregister for an event handler that listens for the event raised by thesearch component.

4. The event handler should retrieve the data from the event andthen repost back to itself with the user ID as the parameter.The data from the event can be obtained by using the propertyevent.dataObject. The value should be stored in the �uid� formelement (e.g. document.forms[0].uid.value) After storing the valuefrom the event, repost (submit) the form back to the server (e.g.documents.forms[0].submit())

5. Please follow the detail solutions.

a)




Figure 378:

Figure 379:




Figure 380:

Figure 381:




Figure 382:

Figure 383:




Figure 384:

Figure 385:




Figure 386:

Figure 387:



Lesson Summary

You should now be able to:� Understand the architecture and features of the EPCF� Use the Client Framework to raise and subscribe to events� Understand the Client Data Bag and pass data to receiving components


handle unsaved data


Unit Summary EP120

Unit SummaryYou should now be able to:� Understand the architecture and features of the EPCF� Use the Client Framework to raise and subscribe to events� Understand the Client Data Bag and pass data to receiving components


handle unsaved data


Unit 9Introduction to Web Dynpro

Unit Overview


� Understand the basic concepts behind Web Dynpro� Understand the basic architecture of a Web Dynpro Component� Understand the structure of the context� Navigate between views� Understand the WebDynpro Architecture

Unit ContentsLesson: Introduction to Web Dynpro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .326Lesson: Web Dynpro Context and Navigation .. . . . . . . . . . . . . . . . . . . . . . . . . . . . .332Lesson: Web Dynpro Architecture.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .338

Exercise 15: Creating a Java Web Dynpro Component... . . . . . . . . . . . .343


Unit 9: Introduction to Web Dynpro EP120

Lesson: Introduction to Web Dynpro

Lesson Overview


� Understand the basic concepts behind Web Dynpro� Understand the basic architecture of a Web Dynpro Component

Business Example

What is Web Dynpro?

� A Programming Model for User Interfaces

� Defines a standard structure for user interface applications

� Derived from the MVC (�model-view-controller�) design pattern� A Set of Tools for User Interface Design

� Focus on graphical modelling

� Code is generated from meta-model declarations� Integrated in SAP NetWeaver Developer Studio and the ABAP

Workbench� A Runtime Environment for Applications

� Framework running on SAP Web AS server offers common services� A Technology for Software Modularization

� Components help structure applications and support pattern-based UIs

What is Web Dynpro?

From a technological point of view, SAPs Web Dynpro for Java and ABAPis a revolutionary step in the development of web-based user interfaces. It iscompletely unlike any design paradigm ever used by SAP before and represents aquantum leap in the development of web-based, ERP applications.

What is the Design Philosophy Behind Web Dynpro?

Web Dynpro applications are built using declarative programming techniquesbased on the Model View Controller (MVC) design paradigm. That is, you specifywhich user interface elements you wish to have on the client, and where thoseelements will get their data from. All the code to create the user interface is then


EP120 Lesson: Introduction to Web Dynpro

generated automatically within a standard runtime framework. This relieves youfrom the repetitive coding tasks involved in writing HTML and then making itinteractive with JavaScript.

Figure 388: Web Dynpro Main Benefits

Web Dynpro Main Benefits

Web Dynpros main goal is to enable application developers to create powerfulWeb applications with a minimum of effort using descriptive tools in a structureddesign process.

One guiding principle in the Web Dynpro philosophy is: the fewer lines ofhand-written code there are in the UI, the better. Web Dynpro pursues this goalin two ways.

Web Dynpro uses a declarative, language-neutral metamodel for defining a userinterface. From this abstract definition, the development environment generatesthe required Java/ABAP code. Hand-written code still has its place, but is confinedto that required to manipulate the business data, not the user interface.

Web Dynpro provides technical features such as support for internationalization,flicker-free interaction and a clean separation of the business logic and the userinterface. This separation is achieved through a modified implementation ofthe Model-View-Controller (MVC) design paradigm. MVC was invented byTrygve Reenskaug in the late seventies and first implemented in the Smalltalk-80language.

Since the repetitive tasks of UI coding have been all but eliminated, the developercan focus their attention on the flow of business data through the application.



Web Dynpro applications can run on a range of devices and on various types ofnetwork an important feature for collaboration scenarios.

Figure 389: Meta-model Declarations vs. Custom Coding

Metamodel Concept and Declarative Programming

A Web Dynpro application is developed using a declarative programmingapproach. Within the SAP NetWeaver Developers Studio or the ABAPWorkbenchthere are special tools that allow you to build and abstract representation of your



application in the form of a Web Dynpro metamodel. The necessary source codeis then generated automatically and conforms to a standard architecture known asthe Web Dynpro Framework (WDF).

� The WDF allows each controller within a component to have a set ofstandard hook methods. It is within these hook methods that any requiredcustom coding can be placed.

� In addition to the events provided by the WDF, you can also define your ownevents for a Web Dynpro application.

� All Web Dynpro applications are constructed from the same basic units.However, through the use of custom coding in the standard hook methods,the standard framework can be extended to supply any required businessfunctionality.

� Not all implementation decisions need to be made at design time. It isperfectly possible to implement a Web Dynpro application in which theappearance of the user interface is decided at runtime. This allows a highlyflexible application to be written without requiring the need to directly writeany HTML or JavaScript.

Figure 390: Application Scenarios with Web Dynpro

Application Scenarios with Web Dynpro



AWeb Dynpro Model Object can be supplied with information from the followingtypes of backend system:

� RFC Modules such as BAPIs in an SAP ABAP backend system. Thisinterface is provided by the Adaptive RFC Layer (aRFC).

� Enterprise JavaBeans (EJBs) which encapsulate application logic.� Web Services

Figure 391: Web Dynpro Component



Lesson Summary

You should now be able to:� Understand the basic concepts behind Web Dynpro� Understand the basic architecture of a Web Dynpro Component



Lesson: Web Dynpro Context and Navigation

Lesson Overview


� Understand the structure of the context� Navigate between views

Business Example

Figure 392: Context and Data Transport


EP120 Lesson: Web Dynpro Context and Navigation

Figure 393: Context Mapping

Context Mapping

Context mapping allows a context node in one controller to be suppliedautomatically with data from a corresponding context node in another controller.This is the primary mechanism for sharing data between controllers. MappingTerminology

When two controllers within the same component share data through a mappingrelationship, this is known as Internal Mapping.

The context node that acts as the data source is known as the Mapping OriginNode, and the context node that is mapped is known as the Mapped Node.

Prerequisites

In order for a mapping relationship to be established, the following steps mustfirst be performed:

� A node must exist in the context of the controller acting as the mappingorigin. This node need not have any declared child nodes or attributes.

� The mapping origin controller must be a custom controller.� The controller containing the mapped node must declare the use of the

mapping origin controller as a required controller.



Figure 394: Putting data on the screen: Data Binding

Data Binding

Data binding is the means by which data is automatically transported from a viewcontrollers context to a UI element in its layout.

You may not bind UI elements to context nodes or attributes that occur in someother controller. UI elements are private to the view controller within which theyare declared.

The data binding process decouples the UI element object from the applicationcode within the view controller. Therefore, in order to manipulate UI elementproperties, the application code in the view controller needs only manipulate thevalues of context nodes and attributes to which the UI elements are bound. TheWeb Dynpro Framework then manages the following two tasks:

� The transport of data from the context to the UI element during the screenrendering process.

� Repopulating the context from the UI element after data is entered by theuser.

Navigation with Web Dynpro

Figure 395: Navigation between views

Outbound Plugs



Calling an outbound plug method causes a navigation event to be raised.Navigation events are special, asynchronous events that are placed into anavigation queue. Only when all the outbound plugs have been called by all theviews in the current view assembly, will the Web Dynpro Framework enter itsnavigation processing phase. Outbound plugs should be named according to theaction that caused navigation away from the current view.

Inbound Plugs

Inbound plugs are special event handler methods that subscribe to navigationevents raised when outbound plugs are fired. Inbound plug methods are calledonly when the navigation queue is processed. This will only take place onceall the views in the current view assembly have fired their outbound plugs andno validation errors have occurred that would cause navigation to be cancelled.Inbound plugs should be named according to the reason for which the view beingdisplayed.

Links

Outbound and inbound plugs are joined together using navigation links.

Figure 396: Navigation between views - Java

The Navigation Modeller gives a graphical representation of the navigation linksthat exist between the different views in a window.

The Web Dynpro Explorer shows the same information as a hierarchy.

Links: Select the Navigation Link tool from the graphical editor, then draw aline from the outbound plug to the inbound plug. This causes the event handlermethod represented by the inbound plug to subscribe to the navigation eventraised by the outbound plug.

Figure 397: Windows, View Sets and View Areas

Windows, View Sets and View Areas

When create a Window, you define three things:

� All the possible views that could exist in the components visual interface.� The layout and position of those views within view sets and view areas� The navigation links that exist between different views

You can embed either a single view, or one or more view sets into a window. Eachview set in turn is divided into view areas, each of which can have one or moreviews or view sets embedded within it.

A view area can only display one view at a time. Navigation links must be definedbetween views in order for the contents of a view area to be replaced.



View areas can be blanked out by creating an empty view whose inbound plugresponds to an appropriate navigation event.

Figure 398: View Assembly

View Assembly

Special asynchronous navigation events are the triggers that cause a view areato contain a particular view.

For a given window definition in which multiple views are embedded into viewareas, there could be many permutations of views visible. The permutation that isvisible depends on which navigation links the user follows.

The subset of views visible at anyone time is known as a View Assembly.

Figure 399: View Assembly

View Assembly

Special asynchronous navigation events are the triggers that cause a view areato contain a particular view.

For a given window definition in which multiple views are embedded into viewareas, there could be many permutations of views visible. The permutation that isvisible depends on which navigation links the user follows.

The subset of views visible at anyone time is known as a View Assembly.



Lesson Summary

You should now be able to:� Understand the structure of the context� Navigate between views



Lesson: Web Dynpro Architecture

Lesson Overview


� Understand the WebDynpro Architecture

Business Example

Figure 400: Web Dynpro Component Architecture I

The architecture of a Web Dynpro Component can be divided into two partsexternally and internally visibility:

� The horizontal dotted line separates the entities that are visible from outsidethe component, from those that are only visible from within the component.

A view consists of a view layout and the corresponding view controller. A viewcan contain navigation plugs, methods and a context.

A window embeds one or more views and has a corresponding window controller.A window can contain navigation plugs, methods and a context.


EP120 Lesson: Web Dynpro Architecture

Figure 401: Web Dynpro Component Architecture II

The component controller acts as a component wide controller.

Notice that Web Dynpro Models stand outside the Component. Models arereusable across multiple components.

Figure 402: Web Dynpro Component Architecture III



Custom controller can act as a local controller for some views. This allows toreduce the content of the component controller by populating sub functions.

Figure 403: Web Dynpro Component Architecture IV

A Web Dynpro Component can declare the use of another Web DynproComponent. A specific component usage is then created and the parent componentaccesses the functionality of the child component via its component interfacecontroller.

The only parts of a Web Dynpro Component that are visible to the outside world,are the interface controller and the interface view(s).

� All Web Dynpro components have only one Interface Controller.� There is a one to one relationship between a Window and an Interface View.� If the component has no views, then it will have no Windows, which in turn,

means that it will not implement an interface view. Such components haveno visual interface and are known as faceless components.



Figure 404: Web Dynpro Application

Web Dynpro Application

AWeb Dynpro Application is an entry point into a Web Dynpro Component and isthe only Web Dynpro entity that can be addressed via a URL.

There is often (but not always) a one to one relationship between an interfaceview and an application.

In the same way that the functionality in an ABAP module pool can be accessed bydefining multiple transaction codes, so the functionality of a single Web Dynprocomponent can be accessed by defining multiple applications.

Application definition

In order to define a Web Dynpro application, you must specify

� The component to be invoked. This component is then known as the rootcomponent,

� Which interface view of the root component will be used as the initial viewassembly,

� Which inbound plug will act as the entry point for the nominated interfaceview (this inbound plug must have the Startup check box selected)





Exercise 15: Creating a Java Web DynproComponent

Exercise ObjectivesAfter completing this exercise, you will be able to:� Create a simple Java Web Dynpro� Set the J2EE engine for correct deployment� Create a Java Web Dynpro Application.

Business Example

Task:1. Development Objectives

This exercise has the following objectives:

- Introduce the student to the Java Web Dynpro development environment.

- Use the Web Dynpro tools and wizards to create a Java Based Web Dynpro.

- Create an application to deploy and test the component.

A simple Web Dynpro �Hello World� component will be created to familiarisethe student with a component, a window, a view and an application. Thecorresponding .ear file is deployed to the J2EE server and not just the Portal serveras with the Portal environment.

2. Result

The result of this exercise will be display of a simple text within a browser window.




Figure 405: WebDynproArchitecture Screenshot 1

Template Solution: WD01_Basics_00

3. Prerequisites

You have launched the SAP NetWeaver Developer Studio. You have selectedthe Web Dynpro perspective.

4. Overview: Developing

1. Set the J2EE settings by following the menu path: Windows→ Preferences→ SAP J2EE Engine

2. Open the Net Weaver Developers Studio. Open the Web Dynpro Perspectivemuch the same as the Enterprise Portal was opened earlier.

3. Create a new Web Dynpro project by following the menu path. File→Project→ Web Dynpro. Give the project a name: WD01_Basics_XX whereXX is your given student number.

4. Create a Web Dynpro Component by expanding the node WD01_Basics_XX.Then expand node Web Dynpro before right clicking the Web DynproComponent to create.

5. Create the component with the name Exc_Intro. Assign the packagecom.sap.training, Exc_intro_Window as the window name, and StartView asthe View name.

6. Save all Metadata.

7. Open the Web Dynpro Component Structure and double click the viewStartView by following the pathWeb Dynpro→ Components→ Exc_into→Views→ StartView.




8. Navigate to the �Outline� View. This is normally in the bottom left corner ofthe Web Dynpro editor screen. Beneath the RootUIElementContainer theDefaultTextView must be selected. Select the Layout tab (normally middleright view) then the Properties tab (normally lower right tab). Change thedesign to header1 and the text to �This is my first WD�.

9. Navigate toWeb Dynpro→ Applications. Right click to create an applicationwith the name WD01_basics_XX. Save all metadata.

10. Right click the new application and select �Deploy New Archive and Run�.

11. Check the result from the Browser.



Solution 15: Creating a Java Web DynproComponentTask:1. Development Objectives


- Introduce the student to the Java Web Dynpro development environment.

- Use the Web Dynpro tools and wizards to create a Java Based Web Dynpro.

- Create an application to deploy and test the component.

A simple Web Dynpro �Hello World� component will be created to familiarisethe student with a component, a window, a view and an application. Thecorresponding .ear file is deployed to the J2EE server and not just the Portal serveras with the Portal environment.

2. Result

The result of this exercise will be display of a simple text within a browser window.


Template Solution: WD01_Basics_00

3. Prerequisites

You have launched the SAP NetWeaver Developer Studio. You have selectedthe Web Dynpro perspective.




4. Overview: Developing

1. Set the J2EE settings by following the menu path: Windows→ Preferences→ SAP J2EE Engine

a)


Change your J2EE settings if you have to show your allocatedserver. Windows → Preferences → SAP J2EE Enginee.g.twdf0265.wdf.sap.corp Message Server Port e.g. 3601 or 3622depending on the instance number

2. Open the Net Weaver Developers Studio. Open the Web Dynpro Perspectivemuch the same as the Enterprise Portal was opened earlier.

a) Open NWDS.





Open Web Dynpro perspective.






3. Create a new Web Dynpro project by following the menu path. File→Project→ Web Dynpro. Give the project a name: WD01_Basics_XX whereXX is your given student number.

a)


Select Web Dynpro Project.









4. Create a Web Dynpro Component by expanding the node WD01_Basics_XX.Then expand node Web Dynpro before right clicking the Web DynproComponent to create.

a)


Create a Web Dynpro Component. Expand node WD01_Basics_XX.Expand node Web Dynpro. Right click Web Dynpro Componentto create.




5. Create the component with the name Exc_Intro. Assign the packagecom.sap.training, Exc_intro_Window as the window name, and StartView asthe View name.

a)


Component name Exc_Intro. Package com.sap.training.

Exc_intro_Window as the window name.

View name: StartView Finish.




6. Save all Metadata.

a)


Right click the project and Save all Metadata.




7. Open the Web Dynpro Component Structure and double click the viewStartView by following the pathWeb Dynpro→ Components→ Exc_into→Views→ StartView.

a)


Open the Web Dynpro→ Components→ Exc_intro→ Views→StartView. Double click this StartView.




8. Navigate to the �Outline� View. This is normally in the bottom left corner ofthe Web Dynpro editor screen. Beneath the RootUIElementContainer theDefaultTextView must be selected. Select the Layout tab (normally middleright view) then the Properties tab (normally lower right tab). Change thedesign to header1 and the text to �This is my first WD�.

a)


Go to the View �Outline�.

Ensure that DefaultTextView is selected.

Ensure Layout tab(middle right view).

Select Properties tab(bottom right view).

Change design to header1.

Change text to �This is my first WD�.

9. Navigate toWeb Dynpro→ Applications. Right click to create an applicationwith the name WD01_basics_XX. Save all metadata.

a)





Right click Applications and create an Application WD01_basics_XX.


Enter a Package of com.sap.training.

Press Finish.

Use existing component.

Save all metadata.




10. Right click the new application and select �Deploy New Archive and Run�.

a)


Select Deploy New Archive and Run.

11. Check the result from the Browser.

a)



Lesson Summary

You should now be able to:� Understand the WebDynpro Architecture


EP120 Unit Summary

Unit SummaryYou should now be able to:� Understand the basic concepts behind Web Dynpro� Understand the basic architecture of a Web Dynpro Component� Understand the structure of the context� Navigate between views� Understand the WebDynpro Architecture


Unit Summary EP120


Unit 10Web Dynpro Controllers

Unit Overview


� Understand the MVC Model� Understand the different controllers used with Web Dynpro.� Understand the different kinds of Web Dynpro controller and what they

are used for� Perform navigation between views� Start a Web Dynpro components with an application� Understand the different kinds of Web Dynpro controller and what they

are used for� Perform navigation between views� Start a Web Dynpro components with an application

Unit ContentsLesson: Model, View Controller .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .362

Exercise 16: Navigating between Views.. .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .375Lesson: Web Dynpro Controllers ... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .398

Exercise 17: Navigating between Views.. .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .409


Unit 10: Web Dynpro Controllers EP120

Lesson: Model, View Controller

Lesson Overview


� Understand the MVC Model� Understand the different controllers used with Web Dynpro.� Understand the different kinds of Web Dynpro controller and what they


Business Example

Figure 422: Model View Controller (MVC)

The roots of Web Dynpro Model-View-Controller


EP120 Lesson: Model, View Controller

SAPs Web Dynpro is built on the foundation of the Model-View-Controller(MVC) design paradigm originally invented by the Norwegian software designerTrygve Reenskaug (pronounced TRIG-vuh RAINS-cow) whilst working at XeroxPARC in the late seventies. The first implementation of this design paradigm waswith the release of the Smalltalk-80 programming language.

MVC was a revolutionary design paradigm because it was the first to describesoftware components in terms of:

� The functional responsibilities each should fulfil.� The message protocols to which each component should respond.

SAP has modified and extended the original MVC specification in order to createthe Web Dynpro toolset.

Figure 423: Web Dynpro Component Architecture

Web Dynpros use of the MVC design paradigm

SAP has made several important changes to the standard MVC design paradigm:

� Standard MVC allows a model to directly notify a view that it has changed.This has not been implemented in Web Dynpro.

� Standard MVC allows for nested view controllers. This is not permittedin Web Dynpro.

� SAP has extended the design concept by adding an aggregation unit knownas a component. The component is both the unit of application developmentand application reuse.



Web Dynpro Controllers

Figure 424: Common Features for all Controllers

Common features for all controllers: Required Controllers

In order for information to be shared between different controllers, one controllermust declare the use of another controller. The most frequent requirement for thiskind of data sharing is when you wish the create a mapped context node. This iswhere a context node in one controller references the data in the context nodeof another controller.

General points on controller usage

A view controller can declare the use of a custom controller and a customcontroller can declare the use of another custom controller.

You may not specify the name of a view controller as a required controller as thiswould violate good MVC design principles. A view controller should be writtensuch that it is responsible for nothing more than the display of data and userinteraction. A view controller is not responsible for generating the data it displays:that is the role of a custom controller.

Accessing business logic

Business logic (Models) like function modules, BAPIs or calling methods inhelper classes can be accessed.

Common features for all controllers: Component Usage



The Web Dynpro component is the unit of application reuse. Therefore, if youwant to make use of the functionality within another component, you can declarethe use of that component.

Lifespan

The lifespan of a component usage instance cannot exceed the lifespan of theparent component.

Three types of controller

� Custom / Component controller

� Each Web Dynpro component has at least one global controller � thecomponent controller (default)

� Custom controllers are a kind of additional global controllers tocapsulate sub function from the component controller � typically tostructure bigger components

� They do not have a visual interface� View controller

� Each view has exactly one view controller, which processes the actionsperformed by the user in the view

� Window controller Only WD-ABAP

� Each window has exactly one window controller. It behaves like a viewcontroller (plugs) and is usable from other controllers (like a custom/ component controller)

Web Dynpro controller principles

Two types of controller exist within a Web Dynpro component: custom/componentand view/window.

� Custom/component controllers have no visual interface, whereas viewcontrollers do.

� At runtime, all controller instances are singletons with respect to their parentcomponent.

� All controllers are independent programs yet none function in isolation fromthe other controllers in the component.

� All controllers store their runtime data in a hierarchical data storage areaknown as the Context.

� Unless an explicit controller usage is declared, all the data in a controllerscontext is private.

� A Custom/component controller may share the data in its context, but aview controller may not.



Figure 425: Where are the Component / Custom Controller?

Custom controllers

These are the internal building blocks of a Web Dynpro component and haveno user interface. They are only to be used when some unit of functionality isrequired by several other controllers. Do not create a custom controller simplybecause you can! Only use one where its presence will simplify or optimize thecomponents architecture.

Component Controller

The component controller is a special custom controller that is automaticallycreated when a component is created. The lifespan of a component is defined by,and equal to, the lifespan of the component controller.

Lifespan

All custom controller instances exist for as long as their parent component existsand are instantiated automatically by the Web Dynpro framework. After thecomponent controller has been instantiated, the order in which any subsequentcustom controllers are instantiated is undefined.

An Interface controller exists for as long as the component usage instance exists.



Figure 426: Component / Custom Controllers Event Handlers

Web Dynpro Custom Controllers

Custom controllers are the active parts of a Web Dynpro component that do notneed any direct interaction with the user. Such controllers therefore have no visualinterface.

When a Web Dynpro component is created, a special custom controller is createdcalled the Component controller. It is this controller that drives the functionalityof the entire component.

All custom controllers are instantiated as singletons with respect to their parentcomponent.

Custom controllers are instantiated automatically by the Web Dynpro Frameworkand the instantiation order is undefined! Therefore, the coding in a customcontroller should make no assumptions about the existence of any other customcontroller. Controller Events

Using your design time declarations, the Web Dynpro Framework willautomatically manage the definition, triggering and handler subscription to suchevents for you. You also have the additional option of dynamic event subscriptionat runtime.

A typical use of such events is the invocation of processing in a view controllerafter processing in the component controller has been completed. This can beachieved when a method in the view controller subscribes to an event raised by thecomponent controller.



Important: If two or more methods subscribe to the same event, then the order inwhich they will be executed is undefined.

Events can only be defined in Component/Custom controllers.

Figure 427: Where are the View Controllers?

View controllers

A view controller is visual building block of a WD component and is designed tohandle all aspects of data display and user interaction.

Lifespan

A view controllers lifespan parameter can have the values When Visible orFramework Controlled. A view instance will be created either because it is thedefault view in a view area; or when the first navigation request to that view isencountered. There are three situations is which the view instance can be deleted.

� If When Visible is selected, then the view will be deleted when a navigationevent replaces the current view area with some other view, and the view isno longer part of the current view assembly.

� If Framework Controlled is selected, then the view will be deleted whenthere is no further use for the view. This will never occur whilst the view ispart of the current view assembly.

� Finally, a view controller will never exist for longer than the lifespan of itsparent component controller.



Figure 428: View Controllers Action Handlers

Web Dynpro View Controllers

View controllers are the active parts of a Web Dynpro component that handle allaspects of user interaction. Only view controllers have a visual interface.

The lifespan of a view controller is determined by its presence in (or absencefrom) the current window (The term �View Assembly� may also be used insteadof the term �Window�). As soon as a view controller instance is no longer partof the current view assembly, the Web Dynpro Framework will automaticallygarbage collect it.

View controllers are always instantiated as singletons with respect to their parentcomponent. Therefore, if the same view is embedded multiple times in a viewassembly, you will see the same data in each view.

View Controller Actions

An action is conceptually the same as an event, however there are some specificimplementation differences:

� An action can only be defined in a view controller� An action is an event that originates on the client, initiates an HTTP round

trip, and is then handled on the server side by a special event handler foundonly in a view controller.

� Many different UI elements are able to trigger an action, e.g, the onActionevent of a button UI element.



Figure 429: View Controllers Navigation Plugs

View Controller Navigation Plugs

In order for navigation to take place between different Web Dynpro viewcontrollers, special navigation events and navigation event handlers have beencreated called plugs.

Outbound plugs

A navigation event is raised when an outbound plug is fired.

Using the generic name sing the generic name <Outbound Plug> for an outboundplug, its declaration will cause a method to be generated in the view�s componentcontroller called FIRE_<Outbound Plug>PLG or wdFirePlug<Outbound Plug>().This method is only visible for the WD framework and not visible for thedeveloper.



Figure 430: Navigation

Navigation Modeller

The Navigation Modeller is a Web Dynpro specific, graphical editor in which youcan define the navigation links that exist between the different views of your WebDynpro Component. The view that displays the work area of the NavigationModeller, and within which the individual elements are displayed, is called theDiagram View.

The navigation modeller allows you to manipulate the following entities:

� View Sets� Views� Inbound and Outbound Plugs� Navigation Links

Opening the Navigation Modeller

Start the Navigation Modeller either by choosing the context menu entry OpenNavigation Modeller for the window name in the Web Dynpro Explorer or bydouble clicking on the window name.




Outbound Plugs


Inbound Plugs


Links

Outbound and inbound plugs are joined together using navigation links createdin the Navigation Editor. Select the Navigation Link tool from the graphicaleditor, then draw a line from the outbound plug to the inbound plug. This causesthe event handler method represented by the inbound plug to subscribe to thenavigation event raised by the outbound plug.



Figure 432: Application: entry point into a Web Dynpro component














Exercise 16: Navigating between Views.

Exercise ObjectivesAfter completing this exercise, you will be able to:� Use Navigation with the Java Web Dynpro to navigate to another view� Assign Actions to Plugs

Business Example

Task:Development Objectives


- Introduce the student to Navigation Plugs, Events and Navigation Links andhow they work to navigate to a different View.

- Use the solution from the previous exercise to continue with thisdevelopment.

Figure 433: WebDynproControllers Screenshot 1





The result of this exercise will be the display of a view that will be able tonavigate to the second view.

Result

Template Solution:

WD01_Basics_00 � from previous exercise

Prerequisites

You have launched the SAP NetWeaver Developer Studio.

You have selected the Web Dynpro perspective.

Overview: Developing

1. Follow the path Web Dynpro→ Web Dynpro Components→ Exc_intro→Windows→ Exc_intro_Window→ StartVIew and double click.(You may notneed to do this as it could be open). We will now include a new view. Clickon the Icon Embed a View. Position the cursor within the diagram pane anddrag a rectangle to the required size.

2. The diagram pane displays two areas representing the two views. In thiscase, the first view you created, the StartView is displayed as the activeview. When the Web Dynpro application is launched, the active view isalways accessed.

3. Select the StartView, right click and choose Create Outbound Plug.




4. Give the Outbound plug the name ToResultView and press the Finish button.

5. Select the second View: ResultView and create an Inbound plug byright clicking and selecting Create Inbound Plug. Give this the nameFromStartView and leave the defaults. Press the Finish button.

6. You have thus created the exit and corresponding entry point for navigationfrom the (active) StartView to the ResultView.

7. Create Outbound Plug from ResultView called ToStartView and createan Inbound Plug called FromResultView. The result should look like thediagram below.

8. Create a navigation link by pressing the navigation link button.

9. Connect the StartView outbound � (red) to the ResultView inbound (blue).Connect the StartView outbound � (red) to the ResultView inbound (blue).

10. Create a new Action for the StartView.

11. Create the Action by entering the Name and Text. Select the Fire Plug to beassociated with this action.

12. Create an Action for the ResultView.

13. Enter the Name Back with the text Back and select the Fire Plug as toStartView.

14. Check that the relevant code has been generated. Go to StartViewand select the implementation tab. Scroll almost to the end of thecode and find the method onActionNavigate. Check the methodwdThis.wdFirePlugToResultView(); Also check the ResultView with themethod onActionBack with the code wdThis.wdFirePlugToStartView();

15. Create a button to navigate from the StartView to the ResultView.

16. Assign the Navigate Action to the onAction of your button. The text fromthe Action is automatically displayed on the button.

17. Navigate to the ResultView. Create a new button to navigate back to theStartView using the same process completed above.

18. Deploy the New Archive and Run.



Solution 16: Navigating between Views.Task:Development Objectives










Result

Template Solution:


Prerequisites





a) The starting position of this exercise is the result from the previousexercise.





Follow the path Web Dynpro -> Web Dynpro Components -> Exc_intro-> Windows -> Exc_intro_Window -> StartVIew and double click.(Youmay not need to do this as it could be open)

We will now include a new view.

Click the Icon Embed a View.

Position the cursor within the diagram pane and drag a rectangle areato the required size.


Drag the embed View icon onto the screen.





Embed a new view.


View Name = ResultView Finish





a) The diagram pane displays two areas representing the two views. Inthis case, the first view you created, the StartView is displayed as theactive view. When the Web Dynpro application is launched, the activeview is always accessed.


a) Select the StartView, right click and choose Create Outbound Plug.


Create Outbound Plug





a) Give the Outbound plug the name ToResultView and press the Finishbutton.


Enter the name ToResultView





a) Select the second View: ResultView and create an Inbound plug byright clicking and selecting Create Inbound Plug. Give this the nameFromStartView and leave the defaults. Press the Finish button.


Create Inbound Plug with the name FromStartView





a) You have thus created the exit and corresponding entry point fornavigation from the (active) StartView to the ResultView. These twoplugs are displayed as shown:



a) Create Outbound Plug from ResultView called ToStartView and createan Inbound Plug called FromResultView. The result should look likethe diagram below.


Create another Outbound Plug and an Inbound Plug with the namesToStartView and FromResultView.





a) Create a navigation link by pressing the navigation link button.


a) Connect the StartView outbound � (red) to the ResultView inbound(blue). Similarly, to create the navigation link back from the second tothe first view. It should look like this.

An event handler with the name onPlug<Name of Plug>has beenautomatically generated for each inbound plug.


Connect the Plugs using the navigation link.

Save all metadata.





a) Create a new Action for the StartView.


Double click StartView.

Select Actions tab on the bottom of view.

Press New.





a) Create the Action by entering the Name and Text. Select the Fire Plugto be associated with this action.


Enter Navigate for the Name and �Navigate to Result View� for the Text.

Please ensure that you have selected the Fire plug ToResultView.

Finish.





a) Create an Action for the ResultView.


Double click ResultView.

Actions tab.

New button.





a) Enter the Name Back with the text Back and select the Fire Plug asto StartView.


Enter the Name as Back.

Enter the Text as Back.

Select ToStartView.

Finish.

Save all metadata





a) Check that the relevant code has been generated. Go to StartViewand select the implementation tab. Scroll almost to the endof the code and find the method onActionNavigate. Checkthe method wdThis.wdFirePlugToResultView(); Also checkthe ResultView with the method onActionBack with the codewdThis.wdFirePlugToStartView();


Press implementation tab.

Navigate to the onActionNavigate method.

Check both views.





a) Create a button to navigate from the StartView to the ResultView.



Select Layout tab.

Right click the RootUIElementContaner and select Insert Child.

Select Button.

Finish.





a) Assign the Navigate Action to the onAction of your button. The textfrom the Action is automatically displayed on the button.


Highlight the button.

Go to the Properties View.

Use the dropdown to select Navigate for the onAction for the button.

The button should look like this.


a) Navigate to the ResultView. Create a new button to navigate back tothe StartView using the same process completed above.





Double Click ResultView.

Insert a child in the Root Container.

Select Button.


Highlight the button and assign Back to the onAction.

The text �Back� gets displayed automatically from the Action.

Save all metadata.


a) Deploy the New Archive and Run.





Right click the Application and select Deploy New Archive and Run.


Notice the result.

Press the button.





The navigate button will take you to the next View.



Lesson Summary

You should now be able to:� Understand the MVC Model� Understand the different controllers used with Web Dynpro.� Understand the different kinds of Web Dynpro controller and what they




Lesson: Web Dynpro Controllers

Lesson Overview


� Understand the different kinds of Web Dynpro controller and what theyare used for

� Perform navigation between views� Start a Web Dynpro components with an application

Business Example

Figure 459: Common Features for all Controllers

Common features for all controllers: Required Controllers


EP120 Lesson: Web Dynpro Controllers

In order for information to be shared between different controllers, one controllermust declare the use of another controller. The most frequent requirement for thiskind of data sharing is when you wish the create a mapped context node. This iswhere a context node in one controller references the data in the context nodeof another controller.

General points on controller usage

A view controller can declare the use of a custom controller and a customcontroller can declare the use of another custom controller.

You may not specify the name of a view controller as a required controller as thiswould violate good MVC design principles. A view controller should be writtensuch that it is responsible for nothing more than the display of data and userinteraction. A view controller is not responsible for generating the data it displays:that is the role of a custom controller.

Accessing business logic

Business logic (Models) like function modules, BAPIs or calling methods inhelper classes can be accessed.

Common features for all controllers: Component Usage

The Web Dynpro component is the unit of application reuse. Therefore, if youwant to make use of the functionality within another component, you can declarethe use of that component.

Lifespan

The lifespan of a component usage instance cannot exceed the lifespan of theparent component.

Three types of controller

� Custom / Component controller

� Each Web Dynpro component has at least one global controller � thecomponent controller (default)

� Custom controllers are a kind of additional global controllers tocapsulate sub function from the component controller � typically tostructure bigger components

� They do not have a visual interface� View controller

� Each view has exactly one view controller, which processes the actionsperformed by the user in the view

� Window controller Only WD-ABAP

� Each window has exactly one window controller. It behaves like a viewcontroller (plugs) and is usable from other controllers (like a custom/ component controller)



Web Dynpro controller principles

Two types of controller exist within a Web Dynpro component: custom/componentand view/window.

� Custom/component controllers have no visual interface, whereas viewcontrollers do.

� At runtime, all controller instances are singletons with respect to their parentcomponent.

� All controllers are independent programs yet none function in isolation fromthe other controllers in the component.

� All controllers store their runtime data in a hierarchical data storage areaknown as the Context.

� Unless an explicit controller usage is declared, all the data in a controllerscontext is private.

� A Custom/component controller may share the data in its context, but aview controller may not.

Figure 460: Where are the Component / Custom Controller?

Custom controllers

These are the internal building blocks of a Web Dynpro component and haveno user interface. They are only to be used when some unit of functionality isrequired by several other controllers. Do not create a custom controller simplybecause you can! Only use one where its presence will simplify or optimize thecomponents architecture.



Component Controller

The component controller is a special custom controller that is automaticallycreated when a component is created. The lifespan of a component is defined by,and equal to, the lifespan of the component controller.

Lifespan

All custom controller instances exist for as long as their parent component existsand are instantiated automatically by the Web Dynpro framework. After thecomponent controller has been instantiated, the order in which any subsequentcustom controllers are instantiated is undefined.

An Interface controller exists for as long as the component usage instance exists.

Figure 461: Component / Custom Controllers Event Handlers

Web Dynpro Custom Controllers

Custom controllers are the active parts of a Web Dynpro component that do notneed any direct interaction with the user. Such controllers therefore have no visualinterface.

When a Web Dynpro component is created, a special custom controller is createdcalled the Component controller. It is this controller that drives the functionalityof the entire component.

All custom controllers are instantiated as singletons with respect to their parentcomponent.



Custom controllers are instantiated automatically by the Web Dynpro Frameworkand the instantiation order is undefined! Therefore, the coding in a customcontroller should make no assumptions about the existence of any other customcontroller. Controller Events

Using your design time declarations, the Web Dynpro Framework willautomatically manage the definition, triggering and handler subscription to suchevents for you. You also have the additional option of dynamic event subscriptionat runtime.

A typical use of such events is the invocation of processing in a view controllerafter processing in the component controller has been completed. This can beachieved when a method in the view controller subscribes to an event raised by thecomponent controller.

Important: If two or more methods subscribe to the same event, then the order inwhich they will be executed is undefined.

Events can only be defined in Component/Custom controllers.

Figure 462: Where are the View Controllers?

View controllers

A view controller is visual building block of a WD component and is designed tohandle all aspects of data display and user interaction.

Lifespan



A view controllers lifespan parameter can have the values When Visible orFramework Controlled. A view instance will be created either because it is thedefault view in a view area; or when the first navigation request to that view isencountered. There are three situations is which the view instance can be deleted.

� If When Visible is selected, then the view will be deleted when a navigationevent replaces the current view area with some other view, and the view isno longer part of the current view assembly.

� If Framework Controlled is selected, then the view will be deleted whenthere is no further use for the view. This will never occur whilst the view ispart of the current view assembly.

� Finally, a view controller will never exist for longer than the lifespan of itsparent component controller.

Figure 463: View Controllers Action Handlers

Web Dynpro View Controllers

View controllers are the active parts of a Web Dynpro component that handle allaspects of user interaction. Only view controllers have a visual interface.

The lifespan of a view controller is determined by its presence in (or absencefrom) the current window (The term �View Assembly� may also be used insteadof the term �Window�). As soon as a view controller instance is no longer partof the current view assembly, the Web Dynpro Framework will automaticallygarbage collect it.



View controllers are always instantiated as singletons with respect to their parentcomponent. Therefore, if the same view is embedded multiple times in a viewassembly, you will see the same data in each view.

View Controller Actions

An action is conceptually the same as an event, however there are some specificimplementation differences:

� An action can only be defined in a view controller� An action is an event that originates on the client, initiates an HTTP round

trip, and is then handled on the server side by a special event handler foundonly in a view controller.

� Many different UI elements are able to trigger an action, e.g, the onActionevent of a button UI element.

Figure 464: View Controllers Navigation Plugs

View Controller Navigation Plugs

In order for navigation to take place between different Web Dynpro viewcontrollers, special navigation events and navigation event handlers have beencreated called plugs.

Outbound plugs

A navigation event is raised when an outbound plug is fired.



Using the generic name sing the generic name <Outbound Plug> for an outboundplug, its declaration will cause a method to be generated in the view�s componentcontroller called FIRE_<Outbound Plug>PLG or wdFirePlug<Outbound Plug>().This method is only visible for the WD framework and not visible for thedeveloper.


Navigation Modeller

The Navigation Modeller is a Web Dynpro specific, graphical editor in which youcan define the navigation links that exist between the different views of your WebDynpro Component. The view that displays the work area of the NavigationModeller, and within which the individual elements are displayed, is called theDiagram View.

The navigation modeller allows you to manipulate the following entities:

� View Sets� Views� Inbound and Outbound Plugs� Navigation Links

Opening the Navigation Modeller

Start the Navigation Modeller either by choosing the context menu entry OpenNavigation Modeller for the window name in the Web Dynpro Explorer or bydouble clicking on the window name.




Outbound Plugs


Inbound Plugs


Links

Outbound and inbound plugs are joined together using navigation links createdin the Navigation Editor. Select the Navigation Link tool from the graphicaleditor, then draw a line from the outbound plug to the inbound plug. This causesthe event handler method represented by the inbound plug to subscribe to thenavigation event raised by the outbound plug.



Figure 467: Application: entry point into a Web Dynpro component














Exercise 17: Navigating between Views.

Exercise ObjectivesAfter completing this exercise, you will be able to:� Use Navigation with the Java Web Dynpro to navigate to another view� Assign Actions to Plugs

Business Example

Task:Development Objectives










Result

Template Solution:


Prerequisites



























Solution 17: Navigating between Views.Task:Development Objectives










Result

Template Solution:


Prerequisites





a) The starting position of this exercise is the result from the previousexercise.





Follow the path Web Dynpro -> Web Dynpro Components -> Exc_intro-> Windows -> Exc_intro_Window -> StartVIew and double click.(Youmay not need to do this as it could be open)

We will now include a new view.

Click the Icon Embed a View.

Position the cursor within the diagram pane and drag a rectangle areato the required size.


Drag the embed View icon onto the screen.





Embed a new view.


View Name = ResultView Finish





a) The diagram pane displays two areas representing the two views. Inthis case, the first view you created, the StartView is displayed as theactive view. When the Web Dynpro application is launched, the activeview is always accessed.


a) Select the StartView, right click and choose Create Outbound Plug.


Create Outbound Plug





a) Give the Outbound plug the name ToResultView and press the Finishbutton.


Enter the name ToResultView





a) Select the second View: ResultView and create an Inbound plug byright clicking and selecting Create Inbound Plug. Give this the nameFromStartView and leave the defaults. Press the Finish button.


Create Inbound Plug with the name FromStartView





a) You have thus created the exit and corresponding entry point fornavigation from the (active) StartView to the ResultView. These twoplugs are displayed as shown:



a) Create Outbound Plug from ResultView called ToStartView and createan Inbound Plug called FromResultView. The result should look likethe diagram below.


Create another Outbound Plug and an Inbound Plug with the namesToStartView and FromResultView.





a) Create a navigation link by pressing the navigation link button.


a) Connect the StartView outbound � (red) to the ResultView inbound(blue). Similarly, to create the navigation link back from the second tothe first view. It should look like this.

An event handler with the name onPlug<Name of Plug>has beenautomatically generated for each inbound plug.


Connect the Plugs using the navigation link.

Save all metadata.





a) Create a new Action for the StartView.



Select Actions tab on the bottom of view.

Press New.





a) Create the Action by entering the Name and Text. Select the Fire Plugto be associated with this action.


Enter Navigate for the Name and �Navigate to Result View� for the Text.

Please ensure that you have selected the Fire plug ToResultView.

Finish.





a) Create an Action for the ResultView.


Double click ResultView.

Actions tab.

New button.





a) Enter the Name Back with the text Back and select the Fire Plug asto StartView.


Enter the Name as Back.

Enter the Text as Back.

Select ToStartView.

Finish.

Save all metadata





a) Check that the relevant code has been generated. Go to StartViewand select the implementation tab. Scroll almost to the endof the code and find the method onActionNavigate. Checkthe method wdThis.wdFirePlugToResultView(); Also checkthe ResultView with the method onActionBack with the codewdThis.wdFirePlugToStartView();


Press implementation tab.

Navigate to the onActionNavigate method.

Check both views.





a) Create a button to navigate from the StartView to the ResultView.



Select Layout tab.

Right click the RootUIElementContaner and select Insert Child.

Select Button.

Finish.





a) Assign the Navigate Action to the onAction of your button. The textfrom the Action is automatically displayed on the button.


Highlight the button.

Go to the Properties View.

Use the dropdown to select Navigate for the onAction for the button.

The button should look like this.


a) Navigate to the ResultView. Create a new button to navigate back tothe StartView using the same process completed above.





Double Click ResultView.

Insert a child in the Root Container.

Select Button.


Highlight the button and assign Back to the onAction.

The text �Back� gets displayed automatically from the Action.

Save all metadata.


a) Deploy the New Archive and Run.





Right click the Application and select Deploy New Archive and Run.


Notice the result.

Press the button.





The navigate button will take you to the next View.



Lesson Summary

You should now be able to:� Understand the different kinds of Web Dynpro controller and what they



Unit Summary EP120

Unit SummaryYou should now be able to:� Understand the MVC Model� Understand the different controllers used with Web Dynpro.� Understand the different kinds of Web Dynpro controller and what they

are used for� Perform navigation between views� Start a Web Dynpro components with an application� Understand the different kinds of Web Dynpro controller and what they



Unit 11The Adaptive RFC Layer

Unit OverviewModels encapsulate the business objects that care for reading and writing data,setting database locks. In addition, data format conversion and data checks areimplemented in the models. Thus, the WD only cares about the program flow andthe UI presentation, but not about the issues related to a model. Different kindof models are supported, however, the most important one is the aRFC model,which connects data and business logic available in an ABAP based backendsystem to the presentation layer. Defining and using such a model is describedhere, however, the client proxies for all kind of models have a common interfaceto be used by Web Dynpro, so the concepts explained here can be applied to allother kinds of models.


� Understand the background technology for the adaptive RFC (aRFC) layer� Understand the basic requirements of a remote function callable ABAP

function module (RFM)� Create aRFC models that allow to access RFMs from your Web Dynpro

application� Explain what kind of JAVA objects are created as a result of generating

an aRFC model� Create model objects in a development component, so they can be reused in

other Web Dynpro projects� Use aRFC model objects in a Web Dynpro application� Check the installed software catalog� Import a software catalog if necessary� Define technical systems in the SLD� Define JCo destinations

Unit ContentsLesson: Remote Invocation of ABAP Functionality . . . . . . . . . . . . . . . . . . . . . . . .435


Unit 11: The Adaptive RFC Layer EP120

Lesson: The Adaptive RFC (aRFC) Model Object . . . . . . . . . . . . . . . . . . . . . . . . .441Exercise 18: Creating and using an aRFC model object. . . . . . . . . . . . . .461

Lesson: Configuring SLD and JCo Connections ... . . . . . . . . . . . . . . . . . . . . . . . .486Exercise 19: Configure SLD and JCo Destinations .. . . . . . . . . . . . . . . . . . .497


EP120 Lesson: Remote Invocation of ABAP Functionality

Lesson: Remote Invocation of ABAP Functionality

Lesson OverviewABAP function module can be used as models objects by calling them via RFC.


� Understand the background technology for the adaptive RFC (aRFC) layer� Understand the basic requirements of a remote function callable ABAP

function module (RFM)

Business ExampleYour Web Dynpro application needs to display and change data, which is storedon database tables of an ABAP based SAP system. You heard that remote enabledABAP function modules exist, that can be used to access the database tables. Thusyou decide to learn about ABAP function modules and how these modules cantechnically be accessed from your Web Dynpro application.

Invoke ABAP functionality from a JAVA applicationvia RFC

Figure 494: A brief history of remote function calls into SAP



Figure 495: The original RFC interface architecture

The original implementation of the JCo layer contained functionality to adapt tochanges in the interface structure, but at that time, no applications required thisfunctionality, so it was not implemented in the earlier API�s such as the EnterpriseConnector.

Regardless of language, all external programs that wish to invoke functionalitywithin an SAP system will ultimately use the RFC layer.

Figure 496: The Adaptive RFC Layer architecture

Only Web Dynpro makes use of the Adaptive RFC layer.



Every time an RFC enabled function module is called in an SAP system, themetadata describing its interface is checked.

If the interface has changed since the last invocation, the new metadata data isobtained from the SAP system. The application program should then check thedictionary for changes and react appropriately.

The aRFC layer will automatically update the dictionary with any metadatachanges, but it is up to you to design your Web Dynpro application to react tothese changes!

ABAP function modules and BAPIs

Figure 497: The interface of an ABAP function module

All ABAP function modules have the following interface architecture:

Import parameters

Scalar or structured parameters used only on the inbound side of the interfacehaving a cardinality of 0..1.

Export parameters

Scalar or structured parameters used only on the outbound side of the interfacehaving a cardinality of 0..1.

Changing Parameters

Bi-directional scalar or structured parameters having a cardinality of 0..1.

RFC enabled function modules tend not to use CHANGING parameters.



Tables

Bi-directional structured parameters having a cardinality of 0..n.

Exceptions

Text labels used to identify an unexpected termination of processing withinthe function module. Exceptions can only be invoked by means of the ABAPstatement RAISE.

RFC enabled function modules should avoid the use the RAISE statement!The reason for this will be explained later.

Figure 498: What is a BAPI?

Only SAP delivered coding can comply with criteria 1 to 3.

During a Web Dynpro implementation that uses an SAP system as its businessback-end, it is likely that your Web Dynpro program will need to call some customwritten ABAP function modules. In this situation, it is essential that your functionmodules comply with criteria 4 to 7 above!

Further clarification for custom written remote modules:

Point 4: Don�t forget to switch on the Remote Enabled flag!

Point 5: If any attempt is made to invoke a SAPGUI screen of any sort, the RFCconnection will be terminated immediately!

Point 6: A remote module must run to completion irrespective of any errors thatoccur. This means that when control is passed back to Web Dynpro, the data in theinterface will accurately reflect the success or failure of execution.



The use of the ABAP statement RAISE must be avoided because it will terminatethe function module immediately, leaving the interface in a potentially undefinedstate.

Point 7: Important: Do not use any ABAP statement that would cause the currentlogical unit of work (LUW) within the SAP User Roll Area to terminate! This hasan impact on the RFC connection and will interfere with your ability to managetransactional data in the SAP system.



Lesson Summary

You should now be able to:� Understand the background technology for the adaptive RFC (aRFC) layer� Understand the basic requirements of a remote function callable ABAP

function module (RFM)


EP120 Lesson: The Adaptive RFC (aRFC) Model Object

Lesson: The Adaptive RFC (aRFC) Model Object

Lesson OverviewIn order to use an ABAP function module in a Web Dynpro application, a relatedaRFC model object has to be generated. This is guided by a wizard.

This lesson explains how to create and how to use an aRFC model object in a WebDynpro application. In addition it is explained, how development components areused to create model objects, that can be used in multiple Web Dynpro projects.


� Create aRFC models that allow to access RFMs from your Web Dynproapplication

� Explain what kind of JAVA objects are created as a result of generatingan aRFC model

� Create model objects in a development component, so they can be reused inother Web Dynpro projects

� Use aRFC model objects in a Web Dynpro application

Business ExampleThe data, you want to display with your Web Dynpro application has to be readusing an ABAP function module. Your colleague told you, that you have tocreate an aRFC model object to be able to call the ABAP function module. Thisconcept is not known to you, so you have to learn about how to create highlyreusable aRFC models.



Creating an aRFC model object

Figure 499: Creating an aRFC model object (1)


Please observe the SAP naming convention for model objects: {nm} = {m}Model.

Where {nm} is the actual model object name and {m} is the desired model name

Always ensure that you create an individual Java package per modelobject! The package name should conform to a pattern such as{pkg1}.{pkg2}.{pkg3}.models.{m}. See the SAP recommended namingconvention listed in the Appendix.



If you have two model objects that share the same data structure (e.g. the structureBAPIRET2 that defines the RETURN parameter of many BAPI�s), then placingthe model objects in different packages avoids any runtime ambiguity that couldoccur.


Logical system names can be any meaningful names you desire. However, pleaseavoid creating names that contain the SAP system name, as this will createconfusion once the application is transported out of the development environment.

E.G.: If you wish to call some HR Payroll remote modules in the SAP systemcalled DEV, then HR_PAYROLL_DATA and HR_PAYROLL_METADATAare much better logical system names than DEV_PAYROLL_DATA andDEV_PAYROLL_METADATA.




As for the SAP GUI for Windows, the information displayed by the drop downlist on the Load Balancing tab is obtained from the saplogon.ini file, which islocated in the Windows directory.


When this screen initially appears, it will be empty!

This is a deliberate design decision because the average SAP contains around9,500 remote callable function modules. It would be highly inefficient to present alist of all such remote modules, from which only a few will actually be required!

You will only see a list of function modules after a search criterion has beenentered and the Search button has been pressed.




The model class hierarchy

Figure 505: What has the aRFC model wizard created?

Dedicated Model Dictionary

A dedicated dictionary is created for each model object. Each dictionary containsa set of Simple Types and a set of Structures

Simple Types



The Simple Types are the dictionary definitions for the individual fields in theinterface.

Structures

These are the dictionary entities that describe all the structured interfaceparameters. Every Structure listed here is built from the Simple Types shownin the same dictionary.

Model Class Hierarchy

A hierarchy of model classes is constructed to represent the entire interface ofeach RFM in the model object. For each remote function module {rfm}, an{rfm}_Input and an {rfm}_Ouput class will always be created.

The additional classes are named according to the structure name found in theABAP data dictionary, not the parameter name in the RFM�s interface. Forinstance, if the RFM has an EXPORTING parameter called RETURN that is basedon the dictionary structure BAPIRET2, then you will see the name BAPIRET2listed and not RETURN.

Figure 506: Java Dictionary Simple Types

Simple Types

Simple Types for aRFC interface fields are defined using Web Dynpro Built-InTypes (date, string, integer etc). These are not the same as the namesake Javaclasses!



Figure 507: Java Dictionary Structures

Structures

The structured classes seen in the model hierarchy are defined using the structureddata types defined in the models distinct dictionary.

Figure 508: The Model Class Hierarchy (1)

Model Class RFC Types



All aRFC model classes have an RFC part type associated with them; thisdescribes the function played by the class in the RFC interface.


Scalar parameters

A scalar parameter is any value that can be described as a single field. These arenot shown directly in the model class hierarchy, but can be displayed by doubleclicking on the model class name, and then selecting the Properties tab fromthe editor window.




Relationship between model classes

All RFC model classes are arranged in a hierarchical structure that, taken together,represents the entire interface of function module {rfm}.

The controlling class in this hierarchy is always {rfm}_Input. This class mustbe instantiated first, and it is the only RFC model class to possess an execute()method. Once the method {rfm}_Input.execute() has been called, an instance ofclass {rfm}_Output will be available.

All structures used to type IMPORTING, EXPORTING, CHANGING or TABLESparameters to {rfm} will be represented by the classes of RFC type structure.


Bi-directional parameters

Important: Due to the fact that CHANGING and TABLES parameters of anRFM are bi-directional, it is necessary to preserve an �input� and �output� imageof these parameters. This means that you will see the same parameters listedunder both the {rfm}_Input and {rfm}_Output classes. At runtime, these classesbecome separate instances that hold the �before execution� and �after execution�images of the parameter values.

This important fact that must be understood because it has a significant impactwhen binding context model nodes to model objects.




Executing an aRFC model object and handling the output data

If an RFM requires input parameters, these must be supplied to the instance ofclass {rfm}_Input. Then the {rfm}_Input.execute() method can be called.

Once the RFM has executed, and instance of {rfm}_Output will be available as achild of {rfm}_Input.

Model Object Management

Figure 513: Principles of model object management (1)



Figure 514: Principles of model object management (3)

Having one RFM per model is inefficient from a connection management pointof view.

Having all your RFMs in one big model object is inefficient from a reuse pointof view.

Reusable model objects in development components

Figure 515: Model object management: SAP Recommendations (1)








It is most important, that once you have built your DC�s, you should perform a DCBuild. This is done by right mouse clicking on the DC name itself, then selectingDevelopment Component and then Build from the side-bar menu.

This build process is different from the Rebuild Project option. Each Public Partbecomes a separate JAR file, and the DC Build process rebuilds these public partJAR files. This is a separate build process from the normal project build process.

Using aRFC model objects in Web Dynpro applications

Figure 519: Context Model Nodes



Figure 520: Binding a context model node

The Data Modeler Tool provides a wizard to create not only the binding betweenthe controller context and the model object, but also most of the source codenecessary to execute the model and handle possible errors.

Figure 521: General architecture for RFM invocation (1)

Data passes from the model object to the screen using this chain of connections:

The context of the component controller is bound to the model object.

The view controller context is mapped to the component controller context.



The UI elements are bound to the view controller�s context.


Preparing the controllers context includes the creation of a model object and thebinding of this instance to a model node in the context.

For each non-scalar import parameter of the RFM, it is necessary to create arelated object and add this object to the model instance. The object has to be aninstance of the generated model class, that has the name of the import parametersstructure type.





To access a method of the component controller from within a method of the viewcontroller, the self reference wdThis is used.

E.G. To call the method {nm} in the component controller of component {nc}, thefollowing expression is used: wdThis.wdGet{nc}Controller.{nm}()




Invalidating the models output nodes is necessary to have access to the actualmodel data.

Figure 526: General architecture for RFM invocation

Figure 527: Using model objects at runtime (1)

This coding will normally be defined in the wdDoInit() method of a customcontroller (typically the component controller).



Once the above coding has been executed, the BAPI_FLIGHT_GETLISTfunction module will be able to receive input values in the structured parametersDESTINATION_TO and DESTINATION_FROM.

It is useful to create the executable model object as a class variable. That way itcan be accessed by any method in the custom controller.

It is also useful to create a class variable to refer to the component�s messagemanager.

Figure 528: Using model objects at runtime (2)

The call to any particular RFM should always be placed within a dedicated methodin the custom controller. Using the wizard in the Data Modeller Tool, this methodis created automatically including the complete source code.

The RFM functionality is being invoked by directly calling the models execute()method. However, it is also possible to invoke the RFM via the context modelnode. For reasons of coding legibility, the SAP recommendation is to interactdirectly with the model object.

Once the invalidate() method has run against the model object�s Output node, thedata returned by the RFM will be available in the context.

Figure 529: Generic use of model objects at runtime



In its generic form, the coding to use a model object requires three main steps,the second of which is optional, depending on the individual requirements ofthe RFM being called.

Create an instance of the RFM class. By default, the class will be called{rfcm}_Input.

Create any structured parameters that the RFM may require and add them to theinstance of the {rfcmin}_Input class. This step is dependent upon the individualrequires of the RFM you are using.

Bind the {rfcmin}_Input instance to the appropriate controller model node.





Exercise 18: Creating and using an aRFCmodel object

Exercise ObjectivesAfter completing this exercise, you will be able to:� Create an aRFC model object allowing to call one or more ABAP RFMs� Describe, what kind of objects are generated by the model wizard and how

these objects are related to the interface of the ABAP RFM� Know how Development Components (DCs) can be used to encapsulate

reusable Web Dynpro objects� Know how DCs can be reused by other DCs� Know how an aRFC model can be accessed from a Web Dynpro Controller

Business ExampleYou want to read data, stored on the database of an ABAP based SAP system. Youknow, that there is a remote enabled function module (RFM), that can be used toread the data from the database. In addition, this RFM can be called from Javaprograms using the JCo protocol. For Web Dynpro, there is the possibility to let awizard create all objects necessary to access the RFM.

Task:

1. Create a new Web Dynpro Development Component called models. SelectFile→ New→ Development Component Project, then select LocalDevelopment→ MyComponents from the tree structure.

2. Enter a vendor name of training.sap.com. The Name of the DevelopmentComponent must be specified in lower case letters; enter models here. Entersome descriptive caption and select Web Dynpro from the Type tree.

3. Repeat exactly the same DC creation process, but now, call the DCcomponents. It is vitally important that you are consistent with the languagein which all your DCs are created. DCs of different languages will notinteract with each other correctly.

4. Open the models DC hierarchy, and select Create Model from the rightmouse click menu under Web Dynpro→ Models. Select Import AdaptiveRFC Model and then press Next. Remember that the model name shouldend in the word Model, and that each model object must live in its ownpackage. In the screen, enter FlightListModel as the model name, andcom.sap.training.models.flightlist as the model package name. The logical




system names (JCo Destinations) entered here do not yet need to exist in theJ2EE engine. Remember that the logical system names should not containthe name of the system from which you are obtaining the data. Rather, theyshould describe the type of data being obtained. The Logical Dictionaryname should be allowed to default to the same name as the model object.

5. Specify the name of the SAP system you wish to connect to. Your instructorwill be able to supply the connection details for you. Press Next. Enterbapi_flight* in the Function Name field and press the search button. Tickthe checkbox next to BAPI_FLIGHT_GETLIST and press Next. The Modelwizard will now extract the details of the function module�s interface andpresent you with a log file. Press Finish.

6. All that is necessary to complete the models DC is to add the model objectFlightListModel to the DC�s public part. In order to do this, right mouseclick on the model object name FlightListModel, and select New Public Part.Since this is the very first public part defined for this DC, we must specifythe name of the public part to which this model object will be added. Enter apublic part name of FlightListModel and press Finish.

7. The last step needed for the models DC is to build the entire project, and thento perform a DC build. It is most important that a DC Build is performed,otherwise, the DC�s public parts (which are each separate JAR files) will notbe constructed properly. Firstly, click on the entire models DC, and selectRebuild Project. This will only take a few seconds. Now right mouse clickagain on the DC name and select Build from the Development Componentside menu. Since development components can declare the use of otherdevelopment components, it is possible that a set of dependencies can existbetween these DCs. This particular case, the models has no dependencies onany other DCs, so this next screen only shows a list of one DC. Select OK.

8. Now open the following branch in the components DC: DC MetaData→DC Definition→ Used DCs. At the moment, the components DC onlyrequires the use of standard Web Dynpro DCs. You must add to this list anddeclare that the models DC is also a Used DC. Right mouse click on UsedDCs and select Add Used DC. Expand the branch LocalDevelopments→MyComponents and select models. Press Finish. Now all the public parts ofDC models are accessible within the DC components

9. In the components DC, open the Web Dynpro branch of the hierarchy, andcreate a new Web Dynpro Component called FlightListComp. Use a packagename of com.sap.training.flightlist and don�t forget to remove the charactersComp from the view name.

10. In the Used Models node of component FlightList, add the usage of modelFlightListModel.




11. The information in the model object FlightListModel must now be madeavailable to component controller of FlightListComp. The easiest way to dothis is to open the diagram editor of component FlightListComp. This is doneby double clicking on the component name itself. Select the Create a datalink button from the diagram editor�s tool bar, and starting at the ComponentController, drag a line to the model object FlightListModel. This will nowopen the Model Binding window. Select the Bapi_Flight_Getlist_Inputmodel class and drop it directly onto the Context root node. Now the ContextMapping window opens. It is here that we decide which parts of the BAPI�sinterface are needed by the component controller. It is at this point that youwill need to know which parts of the BAPI interface are used for input,which for output and which are bidirectional. In this case, we are going touse the two scalar parameters Airline and Max_Rows, and the two structuredparameters Destination_To and Destination_From. Since the parametersDate_Range, Extension_In, Extension_Out, Flight_List and Return areTABLES parameters, they will appear on both the input and output sides ofthe interface. We will not be sending any data into the function module viathese tables, so they can be omitted from the input side of the interface.However, Flight_List and Return have to be selected at the output side,because we want to display the data the BAPI sends back.

12. The previous step has made the information in the model object available tothe component controller. Now we need to make the data available to theview controller. This is done by creating another data link starting at the viewcontroller and going across to the component controller. As in the creationof the previous data link, you will need to drag the model node from thecomponent controller context across to the view controller context. Select allthe nodes in the context hierarchy and then click OK and then Finish.

13. Now that the model data has been mapped all the way through to the viewcontroller, we can start building the view�s user interface.

14. Select the RootUIElementContainer and change its layout property toMatrixLayout

15. In the Outline view, right mouse click on RootUIElementContainer andselect Insert Child. Add a Tray UI element with the name ParentTray andchange the text property of its child Caption UI element to Input Parameters.If you find that your Tray UI element is called something like Tray0 orTray1, then you can rename it by changing the value of its id property.

16. Select the ParentTray UI element from the Outline view and choose ApplyTemplate from the right mouse click menu. Choose the Form templateand press Next. Select Max_Rows and Airline from the Template Wizardwindow and press Finish




17. You now need to insert two further Group UI elements as the children ofParentTray. Select the ParentTray UI element in the Outline view and chooseInsert Child. Create two child Group UI elements called ChildGroupToand ChildGroupFrom.

18. Each Group UI element has a child Caption UI element. Change the textproperties of these child Caption UI elements to To and From respectively

19. For each Group UI element, apply a form template to the Group UI elementChildGroupFrom for all the attributes of node Destination_From, andanother form template for Group UI element ChildGroupTo for all theattributes of Destination_To.

20. Change the layoutData property of ChildGroupFrom to MatrixHeadData

21. Next, select the Actions tab from the view controller editor and create a newAction. Give the Action the name Search and the text Start search. Use thedefault event handler. Press Finish

22. Go back to the Layout tab and insert a Button UI element as a childof the Tray UI element ParentTray. Change its layoutData property toMatrixHeadData and its onAction property to Search. Notice that as soon asthe Search action is assigned to the onAction event of the button, the buttonimmediately inherits the text description of the action.

23. The last step is to create a table in which the BAPI output results will bedisplayed. Select the RootUIElementContainer, and select Apply Templatefrom the right mouse-click menu. This time, select a Table template andpress next. Under the Output context node, there will be a child node calledFlightList. Select this check box, and all the child attribute checkboxeswill be selected automatically. Press Finish and press the Save Metadatabutton on the toolbar.

24. Now we need to add some coding into the component controller. Doubleclick on the Component Controller node underneath FlightListComp in theWeb Dynpro Explorer. Select the Implementation tab

25. Scroll right down to the bottom of the file, and between the //@@beginothers and //@@end comment markers, declare an instance of executablemodel class called bapiInput, and an instance of the message manager calledmsgMgr.

26. Now locate method wdDoInit() and assign the message manager variableto the component�s message manager instance, and assign to the bapiInputobject a new instance of the BAPI class.




27. Now create an instance of each of the structure input parametersDESTINATION_TO and DESTINATION_FROM. The class that needs tobe instantiated can be found by switching to the Context tab, selecting thecorresponding model node, and then looking at the value of the ModelClassproperty. In this case, the class is Bapisfldst

Once these two parameter instances have been created, they must be addedas structured parameters to the main bapiInput object

The last step for method wdDoInit() is to bind the BAPI input object to thecorresponding model node in the component controller�s context

28. Next, it is necessary to add the coding that will call the BAPI. This codingwill be placed into its own method, so go to the Methods tab and create anew method. In the pop-up window, select a method type of Method (Don�tselect Event Handler, it won�t work!), press Next, and then enter a nameof callBAPI and then press Finish

29. Go back to the Implementation tab, and locate the callBAPI() method. In thismethod, the execute() method of the BAPI object must be called from withina try/catch clause. If the execution fails, then a simplistic error message willbe issued, otherwise the BAPI�s Output model node needs to be invalidated

30. Now that the component controller has a separate method for calling theBAPI, this method must be called when the view controller�s action Searchis processed. This is done by going back to the Implementation tab ofthe view controller FlightListView and adding a line of code to methodonActionSearch() that calls method callBAPI() in the component controller.

31. The final stage is to create an application called FlightListApp placing it intopackage com.sap.training.flightlist.

32. Save Metadata and do a DC Build. This time, the DC Build screen will showthat a dependency exists between DC components and DC models. Since thepublic part of DC models has not been changed, it is not necessary to rebuildthis DC. Therefore, leave the check box against models unchecked. Press OK

33. Since the components DC is dependent upon the models DC, it is necessaryto deploy the models DC first. Select the root node of the models DCfrom the Web Dynpro Explorer window and choose Deploy from the rightmouse-click menu. If this is the first time you have deployed anything toyour J2EE server since starting the NetWeaver Developer Studio, then youwill be asked for the SDM password. The default value is sdm

34. Now choose FlightListApp from the applications menu, and select Deploynew archive and run from the right mouse-click menu. If you have forgottento create the two JCo destinations FlightList_Data and FlightList_Metadata,then when you run the application, you will get a Java stack trace. Thisis due to the fact that the J2EE engine is attempting to use a pair of JCodestinations that have not yet been configured!




ResultAfter deploying and running the application, you should see results similarto this.



Solution 18: Creating and using an aRFCmodel objectTask:

1. Create a new Web Dynpro Development Component called models. SelectFile→ New→ Development Component Project, then select LocalDevelopment→ MyComponents from the tree structure.

a) Select File→ New→ Development Component Project, then selectLocal Development→MyComponents from the tree structure. PressNext

Figure 530:





a) The Name of the Development Component must be specified in lowercase letters; enter models here. Enter some descriptive caption andselect Web Dynpro from the Type tree. Press Next then Finish.

Figure 531:


a) Repeat step 4-2 giving the component the name components. Youshould now have two Web Dynpro DCs and your workspace shouldlook like this:

Figure 532:

4. Open the models DC hierarchy, and select Create Model from the rightmouse click menu under Web Dynpro→ Models. Select Import AdaptiveRFC Model and then press Next. Remember that the model name shouldend in the word Model, and that each model object must live in its ownpackage. In the screen, enter FlightListModel as the model name, andcom.sap.training.models.flightlist as the model package name. The logicalsystem names (JCo Destinations) entered here do not yet need to exist in the




J2EE engine. Remember that the logical system names should not containthe name of the system from which you are obtaining the data. Rather, theyshould describe the type of data being obtained. The Logical Dictionaryname should be allowed to default to the same name as the model object.

a) Open the models DC hierarchy, and select Create Model from theright mouse click menu under Web Dynpro→Models. Select ImportAdaptive RFC Model and then press Next Remember that the modelname should end in the word Model, and that each model objectmust live in its own package. In the screen, enter FlightListModel asthe model name, and com.sap.training.models.flightlist as the modelpackage name.

Figure 533:

5. Specify the name of the SAP system you wish to connect to. Your instructorwill be able to supply the connection details for you. Press Next. Enterbapi_flight* in the Function Name field and press the search button. Tick




the checkbox next to BAPI_FLIGHT_GETLIST and press Next. The Modelwizard will now extract the details of the function module�s interface andpresent you with a log file. Press Finish.

a) Enter bapi_flight* in the Function Name field and press the Searchbutton. You should see some search results similar to the image on theleft. Tick the checkbox next to BAPI_FLIGHT_GETLIST and pressNext. The Model wizard will now extract the details of the functionmodule�s interface and present you with a log file. Press Finish.

Figure 534:

b) The Model wizard creates an XML description of the RFM�s interface.After pressing Finish, you will notice that the IDE now spends a fewseconds generating the actual Java source code. Your models DCshould now as displayed on the left:

Figure 535:

6. All that is necessary to complete the models DC is to add the model objectFlightListModel to the DC�s public part. In order to do this, right mouseclick on the model object name FlightListModel, and select New Public Part.




Since this is the very first public part defined for this DC, we must specifythe name of the public part to which this model object will be added. Enter apublic part name of FlightListModel and press Finish.

a) Right mouse click on the model object name FlightListModel,and select New Public Part. Since this is the very first public partdefined for this DC, we must specify the name of the public part towhich this model object will be added. Enter a public part name ofFlightListModel and press Finish.

Figure 536:

b) FlightListModel listed as an Entity belonging to the public part calledFlightListModel.

Figure 537:

7. The last step needed for the models DC is to build the entire project, and thento perform a DC build. It is most important that a DC Build is performed,otherwise, the DC�s public parts (which are each separate JAR files) will not




be constructed properly. Firstly, click on the entire models DC, and selectRebuild Project. This will only take a few seconds. Now right mouse clickagain on the DC name and select Build from the Development Componentside menu. Since development components can declare the use of otherdevelopment components, it is possible that a set of dependencies can existbetween these DCs. This particular case, the models has no dependencies onany other DCs, so this next screen only shows a list of one DC. Select OK.

a) Firstly, click on the entire models DC, and select Rebuild Project. Thiswill only take a few seconds. Now right mouse click again on theDC name and select Build from the Development Component sidemenu. Since development components can declare the use of otherdevelopment components, it is possible that a set of dependenciescan exist between these DCs. This particular case, the models hasno dependencies on any other DCs, so this next screen only shows alist of one DC

Figure 538:

b) Check models and press OK. The DC build process takes around 30seconds to complete the first time it runs. The models DC is nowcomplete

Figure 539:

8. Now open the following branch in the components DC: DC MetaData→DC Definition→ Used DCs. At the moment, the components DC onlyrequires the use of standard Web Dynpro DCs. You must add to this list and




declare that the models DC is also a Used DC. Right mouse click on UsedDCs and select Add Used DC. Expand the branch LocalDevelopments→MyComponents and select models. Press Finish. Now all the public parts ofDC models are accessible within the DC components

a) Now open the following branch in the components DC: DC MetaData→ DC Definition→ Used DCs. At the moment, the components DConly requires the use of standard Web Dynpro DCs. You must addto this list and declare that the models DC is also a Used DC. Rightmouse click on Used DCs and select Add Used DC. Expand the branchLocalDevelopments→MyComponents and select models. Press Finish

Figure 540:

b) Now all the public parts of DC models are accessible within DCcomponents

Figure 541:





a) Use a package name of com.sap.training.flightlist and don�t forget toremove the characters Comp from the view name

Figure 542:





a) If you cannot see FlightListModel when you try to add a used modelto component FlightListComp, then one of the following problemscould exist: You have not exposed the model object FlightListModelcorrectly through a public part of DC models. You have forgotten tobuild the public part of DC models. DC components does not have acorrect usage declaration for DC models.

Figure 543:





a) Select the Create a data link button from the diagram editor�s tool bar,and starting at the Component Controller, drag a line to the modelobject FlightListModel. Select the Create a data link button from thediagram editor�s tool bar, and starting at the Component Controller,drag a line to the model object FlightListModel.

Figure 544:

b) This will now open the Model Binding window. Select theBapi_Flight_Getlist_Input model class and drop it directly onto theContext root node.

Figure 545:

c) Use the two scalar parameters Airline and Max_Rows, and the twostructured parameters Destination_To and Destination_From from theinput side. Also select Flight_List and Return from the output side.Press OK and then press Finish.




Figure 546:

12. The previous step has made the information in the model object available tothe component controller. Now we need to make the data available to theview controller. This is done by creating another data link starting at the viewcontroller and going across to the component controller. As in the creation




of the previous data link, you will need to drag the model node from thecomponent controller context across to the view controller context. Select allthe nodes in the context hierarchy and then click OK and then Finish.

a) Creating another data link starting at the view controller and goingacross to the component controller

Figure 547:

b) Select all the nodes in the context hierarchy and then click OK andthen Finish.

Figure 548:

13. Now that the model data has been mapped all the way through to the viewcontroller, we can start building the view�s user interface.

a) Double click on FlightListView under Web Dynpro Components→FlightListComp→ Views. Delete the default TextView UI element.

14. Select the RootUIElementContainer and change its layout property toMatrixLayout

a)





a)

16. Select the ParentTray UI element from the Outline view and choose ApplyTemplate from the right mouse click menu. Choose the Form templateand press Next. Select Max_Rows and Airline from the Template Wizardwindow and press Finish

a) The UI layout should now look like shown on the left

Figure 549:


a)

18. Each Group UI element has a child Caption UI element. Change the textproperties of these child Caption UI elements to To and From respectively

a)


a)




20. Change the layoutData property of ChildGroupFrom to MatrixHeadData

a)

Figure 550:

21. Next, select the Actions tab from the view controller editor and create a newAction. Give the Action the name Search and the text Start search. Use thedefault event handler. Press Finish

a)

Figure 551:

In the New Action pop-up window, enter the following values (seeleft). Press Finish


a)

23. The last step is to create a table in which the BAPI output results will bedisplayed. Select the RootUIElementContainer, and select Apply Templatefrom the right mouse-click menu. This time, select a Table template and




press next. Under the Output context node, there will be a child node calledFlightList. Select this check box, and all the child attribute checkboxeswill be selected automatically. Press Finish and press the Save Metadatabutton on the toolbar.

a)

Figure 552:

Select the RootUIElementContainer, and select Apply Template fromthe right mouse-click menu. This time, select a Table template andpress next. Under the Output context node, there will be a child nodecalled FlightList. Select this check box, and all the child attributecheckboxes will be selected automatically. Press Finish and press theSave Metadata button on the toolbar. This completes the UI layoutfor view FlightListView.

24. Now we need to add some coding into the component controller. Doubleclick on the Component Controller node underneath FlightListComp in theWeb Dynpro Explorer. Select the Implementation tab

a)


a) � //@@begin others Bapi_Flight_Getlist_Input bapiInput;IWDMessageManager msgMgr; //@@end




26. Now locate method wdDoInit() and assign the message manager variableto the component�s message manager instance, and assign to the bapiInputobject a new instance of the BAPI class.

a) public void wdDoInit() { //@@begin wdDoInit() msgMgr =wdComponentAPI.getMessageManager(); bapiInput = newBapi_Flight_Getlist_Input(); //@@end wdDoInit() }

27. Now create an instance of each of the structure input parametersDESTINATION_TO and DESTINATION_FROM. The class that needs tobe instantiated can be found by switching to the Context tab, selecting thecorresponding model node, and then looking at the value of the ModelClassproperty. In this case, the class is Bapisfldst

Once these two parameter instances have been created, they must be addedas structured parameters to the main bapiInput object

The last step for method wdDoInit() is to bind the BAPI input object to thecorresponding model node in the component controller�s context

a)public void wdDoInit() {//@@begin wdDoInit(. . .Bapisfldst destTo = new Bapisfldst();Bapisfldst destFrom = new Bapisfldst();bapiInput.setDestination_To(destTo);bapiInput.setDestination_From(destFrom);wdContext.nodeBapi_Flight_Getlist_Input().bind(bapiInput);//@@end wdDoInit()}

28. Next, it is necessary to add the coding that will call the BAPI. This codingwill be placed into its own method, so go to the Methods tab and create anew method. In the pop-up window, select a method type of Method (Don�tselect Event Handler, it won�t work!), press Next, and then enter a nameof callBAPI and then press Finish

a)




29. Go back to the Implementation tab, and locate the callBAPI() method. In thismethod, the execute() method of the BAPI object must be called from withina try/catch clause. If the execution fails, then a simplistic error message willbe issued, otherwise the BAPI�s Output model node needs to be invalidated

a)public void callBAPI( ) {//@@begin callBAPI()try {bapiInput.execute();wdContext.nodeOutput().invalidate();}catch(Exception e) {wdContext.nodeReturn().invalidate();String msgText = wdContext.nodeReturn().currentReturnElement().getMessage();if (msgText.length()==0) {msgMgr.raiseException("BAPI call failed", false);} else {msgMgr.raiseException(msgText, false);}}//@@end}

30. Now that the component controller has a separate method for calling theBAPI, this method must be called when the view controller�s action Searchis processed. This is done by going back to the Implementation tab ofthe view controller FlightListView and adding a line of code to methodonActionSearch() that calls method callBAPI() in the component controller.

a)public void onActionSearch(IWDCustomEvent wdEvent) {//@@begin onActionSearch(ServerEvent)wdThis.wdGetFlightListCompController().callBAPI();//@@end}




31. The final stage is to create an application called FlightListApp placing it intopackage com.sap.training.flightlist.

a)

32. Save Metadata and do a DC Build. This time, the DC Build screen will showthat a dependency exists between DC components and DC models. Since thepublic part of DC models has not been changed, it is not necessary to rebuildthis DC. Therefore, leave the check box against models unchecked. Press OK

a)

33. Since the components DC is dependent upon the models DC, it is necessaryto deploy the models DC first. Select the root node of the models DCfrom the Web Dynpro Explorer window and choose Deploy from the rightmouse-click menu. If this is the first time you have deployed anything toyour J2EE server since starting the NetWeaver Developer Studio, then youwill be asked for the SDM password. The default value is sdm

a)

34. Now choose FlightListApp from the applications menu, and select Deploynew archive and run from the right mouse-click menu. If you have forgottento create the two JCo destinations FlightList_Data and FlightList_Metadata,then when you run the application, you will get a Java stack trace. Thisis due to the fact that the J2EE engine is attempting to use a pair of JCodestinations that have not yet been configured!

a)

Figure 553:

ResultAfter deploying and running the application, you should see resultssimilar to this.



Lesson Summary

You should now be able to:� Create aRFC models that allow to access RFMs from your Web Dynpro



other Web Dynpro projects� Use aRFC model objects in a Web Dynpro application



Lesson: Configuring SLD and JCo Connections

Lesson OverviewIn order to use an aRFC model, the corresponding JCo destinations have to bedefined first. JCo destinations point on ABAP based systems, which in turn have tobe defined in the System Landscape Directory (SLD) before. This lesson explainsthe steps incorporated in defining both, technical systems and JCo destinations.


� Check the installed software catalog� Import a software catalog if necessary� Define technical systems in the SLD� Define JCo destinations

Business ExampleYou start your Web Dynpro application, which includes an aRFC model. However,you get a runtime error, since JCo destinations have not been defined yet. Thus,you have to learn, how to create JCo destinations and what other technicalpreparations have to be made before your application can be started successfully.

Figure 554: Importing and Displaying the Software Catalog


EP120 Lesson: Configuring SLD and JCo Connections

Importing the software catalog is the first step in configuring technical systemsin the SLD. The software catalog contains technical information to all possibleSAP products and software components.

To check, if the technical information for the type of system you want to connectto (to obtain model data) has already been imported, open the software catalogof your SLD:

http://<host>:<port>/skl→Link Software Catalog If the SAP product or softwarecomponent is not displayed, you have to import the newest software catalog toyour SLD:

http://<host>:<port>/skl→Link Administration →Link Content Import→Button Browse

For a standard J2EE Installation, the software catalog is provided by a .zip file,which is located at

<root>/usr/sap/<J2EE System Name>/SYS/global/sld/model

Figure 555: Defining Technical Systems (1)

Before any JCo connection can be defined, a new technical system has to bedefined in the SLD. A technical system is a logical object, that contains allmetadata to a certain SAP system, like the system ID (SID), the names of allapplication servers, the message server name, logon groups and so on.

To define a new technical system, open the following page:

http://<host>:<port>/sld→ Link Technical Landscape




Proceed as follows:

On the first screen press New Technical System. Select Web AS ABAP and pressNext. Enter the SID of the SAP system, the installation number and the name ofthe DB host. After having logged on the SAP system, the installation number canbe found on the popup appearing when choosing the menu System→Status.

Press Next.




Proceed as follows:

Enter the message server host, application server host, the instance number, themessage server port and all logon groups.

Important: By default, the logon group PUBLIC is entered in the list of logongroups. This does not need to be correct. If none of the allowed logon groupsis entered by you in the list of logon groups, you will not be able to set up JCoconnections using load balancing.

Press Next.

On the next screen you can add the name of all application server hosts (and theirinstance numbers) belonging to the same SAP system. Press Next.

Now enter all clients, you want to use with the JCo connections. At least oneclient has to be defined. Press Next.


Proceed as follows:

Select the technical product, describing your SAP system. This is, where thesoftware catalog imported before comes into play!

Check the list of software components. Uncheck all components, that are notinstalled on your SAP system.

Press Finish.

Result: A new Technical System has been defined, which can be used to defineJCo connections to the underlying SAP system.



Figure 559: Introduction to logical system names

At the time a model object is created, the logical system names do not yet needto exist in the J2EE engine. The Web Dynpro application can be fully built anddeployed to the J2EE engine before it becomes necessary to create the logicalsystem names.

Logical system names are also known as �JCo Destinations�.

To define the JCo Destinations, the Web Dynpro Content Administrator Toolis used. The creation of JCo destinations is a one-time configuration processper J2EE engine.



Figure 560: Defining logical system names (1)

The System Landscape Directory (SLD) Server must be started & configured.

Start the Web Dynpro Content Administrator application by entering the URL

http://<host>:<port>/webdynpro/welcome→ Link Content Administrator Youwill need to log on with a user id that has administrative authority.


It does not matter in which order you do the following steps:



Defining the model object to use a given pair of logical destinations

Creating the logical destinations in the J2EE engine

What is important is that the logical system names have been successfully createdin the J2EE engine before the Web Dynpro application is run.

There is no particular standard for JCo destination names, other than following:

Do not hard code the SAP system name

Use a name that describes the type business information being used.

All JCo destinations for all deployed applications will be listed in this screen.

The red icon indicates that the JCo destination is required by an application, buthas not yet been defined.

Click on the link named Create in order to set up the JCo Destination.


Step 1: Enter the client of the system, the JCo connection is pointing to

Press Next.

Maximum Pool Size: The parameter Pool Size is used to specify how manyconnections should be left open for the current user, even if they are not beingused actively. A pooled RFC connection is allocated much faster than a newconnection, therefore, increasing the pool size will optimize the time needed toget a new connection. On the other hand, if a connection is pooled, it is notavailable for other users.

Maximum Connections: Maximum amount of connections per user. This needs tobe determined for each Application Data destination (also called logical system).

Connection Timeout: Defines how long the pool waits (in seconds) before adestination, which is in the range between 1 and the maximum pool size, is closedby the pool. This allows closing pooled connections after a certain amount of time,if the user is no longer active. A typical value here is 10 - 30 seconds.



Maximum Wait Time: Defines how long you can wait (in seconds) before you getan exception after trying to get an destination although the maximum destinationsare open. In a high user load scenario, it makes sense to increase this numberappropriately (20-60), in low user load scenarios, this number can typically bereduced to a very low number (1-5 seconds).


Step 2: Select which J2EE cluster you wish the JCo destination to be assigned.

Press Next.

Step 3: Select the connection type Application Data or Dictionary Meta Data.

When Application Data is selected, you can choose between direct connection to adistinct application server of the technical system or using load balancing.

When Dictionary Meta Data is selected, load balancing is pre-selected and can notbe changed.

Press Next.




Step 4.1 / 4.2: You may only select Servers and / or Logon Groups from the dropdown list that have first been defined as technical Systems in the SLD.

Press Next.

Message Server

The SAP system to which Application Data JCo destination is connected musthave at least one logon group defined! If this has not been done, then you will beunable to proceed beyond this screen.

If your SAP has no logon groups, then use transaction SMLG in the SAP systemto create one.


Step 5 (Application Data):



If you select a connection type of Application Data, then when you get tothe Security screen, you will have a choice of 4 different user authenticationtechniques:

User/Password

Client Certificate (X.509)

Ticket (SSO2 Cookie)

User Mapping (Requires the use of the User Mapping Engine in the J2EE engine)

For development and testing scenarios, it is acceptable to use the User/Passwordauthentication method. However, for productive use, you should always choose amethod that allows user specific authorisations to be employed within SAP. Thiswill help provide an application level audit trail of user activity.

If you select User/Password for you productive system, then all users using thisJCo connection will appear to be the same user within SAP. Thus, you will looseany audit trail capability.

Step 5 (Dictionary Meta Data):

If you select a connection type of Dictionary Metadata, then when you get to theSecurity screen, you will only be able to use a named user id and password forconnection to the SAP system. This is because no audit trail is required for thetransfer of metadata. Therefore, the same user id (SAP user is of type SYSTEM)can be used irrespective of the identity of the end user.

Press Next.


Step 6: Check your configuration data on the Summary screen.

Press Finish.

The icon next to the JCo destination now turns green.



Finally, press the Test button to ensure that your JCO connection works. You mustscroll to the bottom of the browser window to see the success/failure message.

Important: You must repeat this process for the second JCo destination!

Once both JCo destinations have been successfully created, you are ready to runyour Web Dynpro application.



Exercise 19: Configure SLD and JCoDestinations

Exercise ObjectivesAfter completing this exercise, you will be able to:� Display the Software Catalog� Import a Software Catalog, if necessary� Define Technical Systems� Define Logical System Names (JCo Destinations)

Business ExampleYou have created a Web Dynpro application, which accesses an RFM by using anaRFC model object. The ABAP system is referred to by logical system names, thatare stored with the model object. However, these logical system names have notbeen mapped yet to a real ABAP system. In order to do this, you have to defineJCo destinations. When doing this, you will be asked for a technical descriptionfor the system. This information has to be defined before in the SLD.

Task 1:Development Objectives


- Separate Web Dynpro Model objects and Components in different DevelopmentComponents.

- Use the functionality defined in one development component within anotherdevelopment component.

- Use the aRFC model object to call a function module in an SAP system andthen display the results.

The aRFC model object will be created in a development component (DC) called�models�. This DC will expose the model object functionality via its public part.

There will then be a second web Dynpro DC called �components� that makes useof the models DC. Thus, we can separate model objects from the Web Dynprocomponents that use them. This improves the overall application architecture,and helps reduce the Java compile time.

Result

The result of this exercise will be that you have an application that will callJA310_WD_Ex10 using parameters supplied on the input screen.




The results of the BAPIs execution will be displayed in a table.

Figure 567:

Template Solution:Development Component containing Model: JA310_ModelsDevelopment Component containing WDApplication:

JA310_Components

WD Project: Ex10CompApplication: Ex10App

Prerequisites



Task 2:Overview: Developing

1. Create a new Web Dynpro Development Component called models.Select File→ New→ Development Component Project, then select LocalDevelopment→ MyComponents from the tree structure.






4. Open the models DC hierarchy, and select Create Model from the rightmouse click menu under Web Dynpro→ Models. Select Import AdaptiveRFC Model and then press Next. Remember that the model name shouldend in the word Model, and that each model object must live in its ownpackage. In the screen, enter FlightListModel as the model name, andcom.sap.training.models.flightlist as the model package name. The logicalsystem names (JCo Destinations) entered here do not yet need to exist in theJ2EE engine. Remember that the logical system names should not containthe name of the system from which you are obtaining the data. Rather, theyshould describe the type of data being obtained. The Logical Dictionaryname should be allowed to default to the same name as the model object.

5. Specify the name of the SAP system you wish to connect to. Your instructorwill be able to supply the connection details for you. Press Next. Enterbapi_flight* in the Function Name field and press the search button. Tickthe checkbox next to BAPI_FLIGHT_GETLIST and press Next. The Modelwizard will now extract the details of the function module�s interface andpresent you with a log file. Press Finish.



8. Now open the following branch in the components DC: DC MetaData→DC Definition→ Used DCs. At the moment, the components DC onlyrequires the use of standard Web Dynpro DCs. You must add to this list anddeclare that the models DC is also a Used DC. Right mouse click on UsedDCs and select Add Used DC. Expand the branch LocalDevelopments→MyComponents and select models.




Press Finish.

Now all the public parts of DC models are accessible within the DCcomponents.




12. The previous step has made the information in the model object available tothe component controller. Now we need to make the data available to theview controller. This is done by creating another data link starting at the viewcontroller and going across to the component controller. As in the creationof the previous data link, you will need to drag the model node from thecomponent controller context across to the view controller context. Select allthe nodes in the context hierarchy and then click OK and then Finish.

13. Now that the model data has been mapped all the way through to the viewcontroller, we can start building the view�s user interface. Double clickon FlightListView under Web Dynpro Components→ FlightListComp→Views. Delete the default TextView UI element.

14. Select the RootUIElementContainer and change its layout property toMatrixLayout.





16. Select the ParentTray UI element from the Outline view and choose ApplyTemplate from the right mouse click menu. Choose the Form templateand press Next. Select Max_Rows and Airline from the Template Wizardwindow and press Finish.


18. Each Group UI element has a child Caption UI element. Change the textproperties of these child Caption UI elements to To and From respectively.


20. Change the layoutData property of ChildGroupFrom to MatrixHeadData.

21. Next, select the Actions tab from the view controller editor and create a newAction. Give the Action the name Search and the text Start search. Use thedefault event handler. Press Finish.


23. The last step is to create a table in which the BAPI output results will bedisplayed. Select the RootUIElementContainer, and select Apply Templatefrom the right mouse-click menu. This time, select a Table template andpress next. Under the Output context node, there will be a child node calledFlightList. Select this check box, and all the child attribute checkboxeswill be selected automatically. Press Finish and press the Save Metadatabutton on the toolbar.

24. Now we need to add some coding into the component controller. Doubleclick on the Component Controller node underneath FlightListComp in theWeb Dynpro Explorer. Select the Implementation tab.







Solution 19: Configure SLD and JCoDestinationsTask 1:Development Objectives


- Separate Web Dynpro Model objects and Components in different DevelopmentComponents.

- Use the functionality defined in one development component within anotherdevelopment component.

- Use the aRFC model object to call a function module in an SAP system andthen display the results.

The aRFC model object will be created in a development component (DC) called�models�. This DC will expose the model object functionality via its public part.

There will then be a second web Dynpro DC called �components� that makes useof the models DC. Thus, we can separate model objects from the Web Dynprocomponents that use them. This improves the overall application architecture,and helps reduce the Java compile time.

Result

The result of this exercise will be that you have an application that will callJA310_WD_Ex10 using parameters supplied on the input screen.

The results of the BAPIs execution will be displayed in a table.

Figure 568:




Template Solution:Development Component containing Model: JA310_ModelsDevelopment Component containing WDApplication:

JA310_Components

WD Project: Ex10CompApplication: Ex10App

Prerequisites



Task 2:Overview: Developing

1. Create a new Web Dynpro Development Component called models.Select File→ New→ Development Component Project, then select LocalDevelopment→ MyComponents from the tree structure.

a) Select File→ New→ Development Component Project, then selectLocal Development→ MyComponents from the tree structure.

Press Next.

Figure 569:





a) The Name of the Development Component must be specified in lowercase letters; enter models here. Enter some descriptive caption andselect Web Dynpro from the Type tree.

Press Next then Finish.

Figure 570:


a) Repeat step 4-2 giving the component the name components.

You should now have two Web Dynpro DCs and your workspaceshould look like this:

Figure 571:

4. Open the models DC hierarchy, and select Create Model from the rightmouse click menu under Web Dynpro→ Models. Select Import AdaptiveRFC Model and then press Next. Remember that the model name shouldend in the word Model, and that each model object must live in its ownpackage. In the screen, enter FlightListModel as the model name, and




com.sap.training.models.flightlist as the model package name. The logicalsystem names (JCo Destinations) entered here do not yet need to exist in theJ2EE engine. Remember that the logical system names should not containthe name of the system from which you are obtaining the data. Rather, theyshould describe the type of data being obtained. The Logical Dictionaryname should be allowed to default to the same name as the model object.

a) Open the models DC hierarchy, and select CreateModel from the rightmouse click menu under Web Dynpro→ Models.

Select Import Adaptive RFC Model and then press Next.

Remember that the model name should end in the word Model,and that each model object must live in its own package. Inthe screen, enter FlightListModel as the model name, andcom.sap.training.models.flightlist as the model package name.

Figure 572:

5. Specify the name of the SAP system you wish to connect to. Your instructorwill be able to supply the connection details for you. Press Next. Enterbapi_flight* in the Function Name field and press the search button. Tick




the checkbox next to BAPI_FLIGHT_GETLIST and press Next. The Modelwizard will now extract the details of the function module�s interface andpresent you with a log file. Press Finish.

a) Enter bapi_flight* in the Function Name field and press the Searchbutton. You should see some search results similar to the image onthe left.

Tick the checkbox next to BAPI_FLIGHT_GETLIST and press Next.The Model wizard will now extract the details of the function module�sinterface and present you with a log file. Press Finish.

Figure 573:

The Model wizard creates an XML description of the RFM�s interface.After pressing Finish, you will notice that the IDE now spends a fewseconds generating the actual Java source code. Your models DCshould now as displayed on the left:

Figure 574:





a) Right mouse click on the model object name FlightListModel, andselect New Public Part. Since this is the very first public partdefined for this DC, we must specify the name of the public part towhich this model object will be added. Enter a public part name ofFlightListModel and press Finish.

Now that this has been done, you will see the FlightListModel listed asan Entity belonging to the public part called FlightListModel.

Figure 575:

Figure 576:





a) Firstly, click on the entire models DC, and select Rebuild Project.This will only take a few seconds.

Now right mouse click again on the DC name and select Build from theDevelopment Component side menu.

Since development components can declare the use of otherdevelopment components, it is possible that a set of dependencies canexist between these DCs. This particular case, the models has nodependencies on any other DCs, so this next screen only shows a listof one DC. Check models and press OK. The DC build process takesaround 30 seconds to complete the first time it runs.

Figure 577:

Figure 578:

The models DC is now complete.Continued on next page



8. Now open the following branch in the components DC: DC MetaData→DC Definition→ Used DCs. At the moment, the components DC onlyrequires the use of standard Web Dynpro DCs. You must add to this list anddeclare that the models DC is also a Used DC. Right mouse click on UsedDCs and select Add Used DC. Expand the branch LocalDevelopments→MyComponents and select models.

Press Finish.

Now all the public parts of DC models are accessible within the DCcomponents.

a) Now open the following branch in the components DC: DC MetaData→ DC Definition→ Used DCs.

At the moment, the components DC only requires the use of standardWeb Dynpro DCs. You must add to this list and declare that the modelsDC is also a Used DC.

Right mouse click on Used DCs and select Add Used DC. Expand thebranch LocalDevelopments→ MyComponents and select models.

Press Finish.

Figure 579:

Now all the public parts of DC models are accessible within DCcomponents.




Figure 580:


a) Use a package name of com.sap.training.flightlist and don�t forget toremove the characters Comp from the view name.

Figure 581:





a) If you cannot see FlightListModel when you try to add a used modelto component FlightListComp, then one of the following problemscould exist:

You have not exposed the model object FlightListModel correctlythrough a public part of DC models.

You have forgotten to build the public part of DC models.

DC components does not have a correct usage declaration for DCmodels.

Figure 582:

11. The information in the model object FlightListModel must now be madeavailable to component controller of FlightListComp. The easiest way to dothis is to open the diagram editor of component FlightListComp. This is doneby double clicking on the component name itself. Select the Create a datalink button from the diagram editor�s tool bar, and starting at the ComponentController, drag a line to the model object FlightListModel. This will nowopen the Model Binding window. Select the Bapi_Flight_Getlist_Inputmodel class and drop it directly onto the Context root node. Now the ContextMapping window opens. It is here that we decide which parts of the BAPI�sinterface are needed by the component controller. It is at this point that youwill need to know which parts of the BAPI interface are used for input,which for output and which are bidirectional. In this case, we are going touse the two scalar parameters Airline and Max_Rows, and the two structuredparameters Destination_To and Destination_From. Since the parametersDate_Range, Extension_In, Extension_Out, Flight_List and Return areTABLES parameters, they will appear on both the input and output sides ofthe interface. We will not be sending any data into the function module via




these tables, so they can be omitted from the input side of the interface.However, Flight_List and Return have to be selected at the output side,because we want to display the data the BAPI sends back.

a) Select the Create a data link button from the diagram editor�s tool bar,and starting at the Component Controller, drag a line to the modelobject FlightListModel.

Select the Create a data link button from the diagram editor�s tool bar,and starting at the Component Controller, drag a line to the modelobject FlightListModel.

Figure 583:

This will now open the Model Binding window. Select theBapi_Flight_Getlist_Input model class and drop it directly onto theContext root node.

Figure 584:

Use the two scalar parameters Airline and Max_Rows, and the twostructured parameters Destination_To and Destination_From fromthe input side.

Also select Flight_List and Return from the output side.

Press OK and then press Finish.




Figure 585:

12. The previous step has made the information in the model object available tothe component controller. Now we need to make the data available to theview controller. This is done by creating another data link starting at the viewcontroller and going across to the component controller. As in the creation




of the previous data link, you will need to drag the model node from thecomponent controller context across to the view controller context. Select allthe nodes in the context hierarchy and then click OK and then Finish.

a) Creating another data link starting at the view controller and goingacross to the component controller.

Figure 586:

Select all the nodes in the context hierarchy and then click OK andthen Finish.

Figure 587:

13. Now that the model data has been mapped all the way through to the viewcontroller, we can start building the view�s user interface. Double clickon FlightListView under Web Dynpro Components→ FlightListComp→Views. Delete the default TextView UI element.

a)

14. Select the RootUIElementContainer and change its layout property toMatrixLayout.

a)





a)

16. Select the ParentTray UI element from the Outline view and choose ApplyTemplate from the right mouse click menu. Choose the Form templateand press Next. Select Max_Rows and Airline from the Template Wizardwindow and press Finish.

a) The UI layout should now look like shown on the left.

Figure 588:


a)

18. Each Group UI element has a child Caption UI element. Change the textproperties of these child Caption UI elements to To and From respectively.

a)


a)




20. Change the layoutData property of ChildGroupFrom to MatrixHeadData.

a)

Figure 589:

21. Next, select the Actions tab from the view controller editor and create a newAction. Give the Action the name Search and the text Start search. Use thedefault event handler. Press Finish.

a) In the New Action pop-up window, enter the following values (see left).

Press Finish.

Figure 590:


a)

23. The last step is to create a table in which the BAPI output results will bedisplayed. Select the RootUIElementContainer, and select Apply Templatefrom the right mouse-click menu. This time, select a Table template andpress next. Under the Output context node, there will be a child node called




FlightList. Select this check box, and all the child attribute checkboxeswill be selected automatically. Press Finish and press the Save Metadatabutton on the toolbar.

a) Select the RootUIElementContainer, and select Apply Template fromthe right mouse-click menu. This time, select a Table template andpress next.

Under the Output context node, there will be a child node calledFlightList. Select this check box, and all the child attribute checkboxeswill be selected automatically.

Figure 591:

Press Finish and press the Save Metadata button on the toolbar.

This completes the UI layout for view FlightListView.

24. Now we need to add some coding into the component controller. Doubleclick on the Component Controller node underneath FlightListComp in theWeb Dynpro Explorer. Select the Implementation tab.

a)


a) //@@begin others Bapi_Flight_Getlist_Input bapiInput;IWDMessageManager msgMgr; //@@end



Lesson Summary

You should now be able to:� Check the installed software catalog� Import a software catalog if necessary� Define technical systems in the SLD� Define JCo destinations


Unit Summary EP120

Unit SummaryYou should now be able to:� Understand the background technology for the adaptive RFC (aRFC) layer� Understand the basic requirements of a remote function callable ABAP

function module (RFM)� Create aRFC models that allow to access RFMs from your Web Dynpro



other Web Dynpro projects� Use aRFC model objects in a Web Dynpro application� Check the installed software catalog� Import a software catalog if necessary� Define technical systems in the SLD� Define JCo destinations


Unit 12Visualising the Java Web Dynpro

through the SAP Portal

Unit Overview


� Create an iView from the Web Dynpro Application.� Enable communication between iViews using Portal Eventing and Java Web

Dynpro.� Understand Absolute, Relative, Object-based Navigation, WorkProtect and

the Portal theme using Java Web Dynpro.� Build a WebDynpro IView� Create an iView from the Web Dynpro Application.� Communication between iViews using Portal Eventing is achieved using the

raise, subscribe and unsubscribe methods with Java Web Dynpro.� Absolute, Relative, Object-based Navigation can easily be coded for the

portal in Java Web Dynpro.� WorkProtect can be used to prevent losing unsaved data in the Portal using

Java Web Dynpro.� The Portal theme can be utilised or overwritten using Java Web Dynpro.

Unit ContentsLesson: Introduction .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .522Lesson: Creating a Web Dynpro iView... . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .525Lesson: Portal Eventing, Navigation and WorkProtect .. . . . . . . . . . . . . . . . . . .531

Exercise 20: Creating and using Portal Eventing with Java WebDynpro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .539


Unit 12: Visualising the Java Web Dynpro through the SAP Portal EP120

Lesson: Introduction

Lesson Overview


� Create an iView from the Web Dynpro Application.� Enable communication between iViews using Portal Eventing and Java Web


the Portal theme using Java Web Dynpro.

Business Example

Introduction: SAP Portal and Java WD

� Java Web Dynpro is used to create interactive Web-based user interfacesfor specific business applications.

� The SAP Enterprise Portal allows the role-based and secure access todifferent kinds of information, services and applications using a WebBrowser

The SAP Enterprise Portal and Web Dynpro are both the strategic user interfacetechnologies of SAP and are based on the SAP Web Application Server.

The SAP Enterprise Portal supports the WD application development withfunctions like:

� Event handling of portal events� Navigation between any portal content� WorkProtect mode.

Ways to Integrate Web Dynpros into the Portal

1. Create a Web Dynpro iView with a Template2. Access Web Dynpro Admin tools3. Configure Client Side Eventing4. Create Single Sign on between Portal, WD and the back-end applications5. Prevent loss of data using WorkProtect mode.

Create a Web Dynpro iView by using the standard delivered iView.


EP120 Lesson: Introduction

By using Web Dynpro administration tools: the Web Dynpro ContentAdministrator for Portal content administration.

Client Side Eventing can be configured between Web Dynpro Applications(ABAP WD or/and Java WD) to other Portal Content

Single Sign on can be created between the Portal, Web Dynpro and back-endapplications

By using the WorkProtect mode in the Web Dynpro Application to prevent dataloss in the Portal.



Lesson Summary

You should now be able to:� Create an iView from the Web Dynpro Application.� Enable communication between iViews using Portal Eventing and Java Web


the Portal theme using Java Web Dynpro.


EP120 Lesson: Creating a Web Dynpro iView

Lesson: Creating a Web Dynpro iView

Lesson Overview


� Build a WebDynpro IView

Business Example

Figure 592: Creating Web Dynpro based Portal Content 1

Create a folder to structure the Web Dynpro-based portal content and ensure thatthe portal application has been deployed onto the server.

Create a Single Full Page iView by following the menu Content Administration→Portal Content→ (Folder). Use the context menu and select New iView.



Figure 593: Creating Web Dynpro Based Portal Content 2

Choose the iView type.

Select the option �Create a single full-page iView from each application variant�.

iView types:

Single full-page iView: The Web Dynpro application becomes a single iView.Single full-page iViews can be personalised and can use services from the servicefactory, but the portal will know nothing of the internal strucure of the application.

Multiple iViews: The Web Dynpro application is divided into several iViews.Multiple iViews are necessary when the application has to provide role-based orend-user based customising of the layout or when features, for instance printing,should only be provided for certain parts of the application.




Modify the iView properties if needed. The generic iView settings, e.g. iViewname or the technical iView name, can be changed.

An optional task allows you to create a Web Dynpro page with the single full-pageiView.


Select finish to create the view � you will be shown a summary of the createdportal objects.



By opening the iView for testing, it allows the user to enter a variety of propertiesspecific to Web Dynpro.

Figure 596: Web Dynpro iView Specific Properties

The property �Show Debug Screen� enables the definition of your Web DynproiView so that the SAP Application Integrator displays the relevant debuginformation when the Web Dynpro Application starts. Please note that this Yes /No setting in the iView is used only if �on demand� has been selected as a globalsetting. This means that this property determines which Web Dynpro iViewswill allow the SAP Application Integrator to display the debug information. Theadvantage is that this will not affect other Web Dynpro iViews without this setting.This is an improvement on the global debugging. In the future debugging will bepermitted on a specific user.

The property �Hand over Portal Stylesheet� is also a Yes / No setting. If you haveselected �Yes�, this will cause the Web Dynpro Application, when started withinthe Portal environment, to use the selected Portal theme. In other words, the WebDynpro will have the same �look and feel� as the Portal. Problems could occurif you don�t run your Web Dynpro application directly on the SAP NetWeaverPortal installation, but on a different installation. The two installations couldcontain different versions of the selected portal theme. In these cases you couldprevent the transfer of the portal theme for individual iViews via the Hand overPortal Stylesheet property. The theme from the portal can be suppressed andignored by the entire Web Dynpro runtime environment and a specific theme canbe configured to be used for the display of you Web Dynpro applications.

The property �Don�t forward these Parameters to Web Dynprp� enables you todefine explicitly which transfer parameters for a Web Dynpro iView are not tobe forwarded to the Web Dynpro application. Examples are parameters likeClientWindowID, Command, DebugSet etc.



The size of the Web Dynpro iView can be set by selecting appearance -> sizeproperty category. A fixed size or an automatic sizing can be selected. It isrecommended that the automatic sizing is adopted to ensure that no space iswasted and the correct size will be displayed even if the Web Dynpro componentis changed in size. The Web Dynpro iView is different to other iView types, as theheight of the is adapted after each user interaction.

Figure 597: Testing the Web Dynpro iView

Testing the iView can quickly be achieved by using the Preview button. The iViewcould also be placed into a page, assigned to a role which has been assigned asan entry point and displayed within the Portal area.



Lesson Summary

You should now be able to:� Build a WebDynpro IView


EP120 Lesson: Portal Eventing, Navigation and WorkProtect

Lesson: Portal Eventing, Navigation and WorkProtect

Lesson Overview


� Create an iView from the Web Dynpro Application.� Communication between iViews using Portal Eventing is achieved using the




Business Example

Figure 598: Portal Eventing using Java Web Dynpro.



Please note that it may be advisable not to use Portal Eventing whencommunications are on a frequent basis between Java Web Dynpro iViews. Itwould be better to implement a �full-screen� Web Dynpro application containingall the relevant components.

The communication between iViews is based on EPCF that uses JavaScript toallow iView communication and also provides an API for the Portal applicationdeveloper. Web Dynpro applications have to use a set of Java Wrapper methods toimplement client-side eventing. All Portal servers and servers that are used mustbe in the same domain when EPCF is used.

Figure 599: Raising a Portal Event

The first parameter � the namespace and the second parameter � the event namemust be unique to your event. The Third parameter is the Web Dynpro action thatis mapped to the portal event. The event handler is called when the Web Dynproapplication receives the specified portal event on the client. The Web DynproHTML Client handles the mapping between a portal event and a Web Dynproaction and is absolutely transparent for the Web Dynpro application developer.The Web Dynpro action can be reused for several Portal events. If you want toreceive the transported data of the portal event, you can define the followingparameters for your Web Dynpro action: dataObject � contains the parameterof the portal event, Namespace � contains the name space of the received portalevent and Name � contains the name of the received portal event.

You can fire a portal event at any time in your Web Dynpro application. The eventis transported with the next response to the client. More than one portal event canbe raised in a request- response cycle.



Figure 600: Subscribing to an Event in Java Web Dynpro.

If a number of parameters need to be passed � need the EventHelper help classwhich allows multiple parameters to be bundled and read out. The EventHelperhelp class is part of the Utils public part of the tc~utils development component.

The Web Dynpro application is registered as an event listener via the subscribe()method which should be called from the view controller and normally in thewdDoInit() method. To access any event parameters that may have beentransferred, a dataObject parameter of the type String must be declared for thespecified action.



Figure 601: Unsubscribing to an Event in Java Web Dynpro.

The unsubscribe() method of the WDPortalEventing help class is used toderegister the Web Dynpro application from a particular portal event.

Please ensure that every single Web Dynpro view is unsubscribed, as thesubscription and unsubscription is valid only for the current view.

Absolute Navigation

Figure 602: Absolute Navigation



There could be a number of problems with Absolute navigation, especially whenthe target is moved to a new location. Object based navigation and relativenavigation are a lot more stable and reliable. It would be a good decision to makethe target addresses configurable by using the WDConfiguration service

Figure 603: Relative Navigation

Relative addressing for example if you want to navigate between two portal pagesthat are both defined in the same directory in the PCD. The relative addressescontinue to remain the same even if the entire directory is moved within the PCD.To trigger relative navigation, use one of the navigateRelative() methods of theWDPortalNavigation utility class.



Figure 604: Object Based Navigation

Object-based navigation (OBN) enables developers to specify navigation based onbusiness objects and operations, without identifying a specific navigation target.Portal administrators can later assign specific navigation targets to these businessobjects and operations.

Figure 605: WorkProtect with Java Web Dynpro

To avoid losing unsaved data when navigating to another iView, the portal providesa WorkProtect mode that, when activated, provides the user an opportunity tosave any changes before navigating.



Figure 606: Setting the Theme to the Web Dynpro Theme

Web Dynpro applications in the portal automatically use the currently selectedportal theme, and any user or role-based personalization of the theme. If the portaland a Web Dynpro application in the portal are running on different systems withdifferent releases, style sheet compatibility problems can occur when the portalversion is older than the Web Dynpro runtime. In such cases, the problem can besolved by having the Web Dynpro application use the Web Dynpro theme.

You can set the default Web Dynpro theme by modifying the sap.theme.defaultproperty, which is also located in the Propertysheet default folder.The followingis an example of a valid URL: http://localhost:50000/irj/portalapps/com.sap.por-tal.themes.lafservice/themes/portal/sap_chrome.


http://localhost:50000/irj/portalapps/com.sap.portal.themes.lafservice/themes/portal/sap_chrome




Exercise 20: Creating and using PortalEventing with Java Web Dynpro

Exercise ObjectivesAfter completing this exercise, you will be able to:�

Business Example

Task:

1. Create a new Web Dynpro project the same as the first exercise:WD_Events_XX where XX is your student number or continue workingwith WD01_Basics_XX.

2. Navigate to the RootUIElementContainer and insert a child element.

3. Select a button type and use your own ID. Press finish

4. Add a text for your button e.g. Sporting Event. Create an Event.

5. Create the Action with the name SportButtonClicked. Press Finish.

6. Repeat steps 2, 3, 4 and 5 to create a new button.

7. Change the layout of the RootUIElementContainer from FlowLayout toMatixLayout and the Sporting Event Button to MatrixHeadData to ensurea neater display.

8. Raise the EPCF event by adding the code into the View ControllersImplementation in the methods starting with onActionSportButtonClickedthen onActionConcertButtonClicked.

9. Right click to organise imports to remove the error.

10. Repeat the step for the concert method. No need to organise imports. (Alsowe could have changed the event name rather than passing the parametersconcert and sport.)

11. Deploy the changed project and run. The fire event Web Dynpro shouldlook like this.

12. Create a new Web Dynpro project that will subscribe to this event.

13. Call the Project WD01_Subscribe_XX where XX is your student number.Press Finish to create.




14. Create a Web Dynpro Component.

15. Enter the Component Name e.g. SubscribingWD and enter a Package e.g.com.sap.training. Name the view e.g. SubscribeView. Press finish.

16. Double click the SubscribeView. Press the Context tab to display the Context.

17. Create a new Value Node by using the context menu and selecting ValueNode.

18. Give the Value Node a name e.g. Eventing. Please ensure that the cardinalityis 1:1 for the Value node. Complete by pressing finish.

19. Create a new Value Attribute.

20. Give the Value Attribute the name Text. Finish.

21. Now for the important part. We will create an Action. This Action will becalled by the subscribe event when the event is raised / fired. Press Actiontab � then New. Enter the name e.g. ConcertorSport and some text. NB pressNext not finish as we need to enter the parameters.

22. Create three parameters by pressing New. dataObject, name and namespace,all type string.

23. Navigate to the View Controller implementation tab. Scroll down the codeuntil the wdDoInit is reached. Please ensure that some text is defaulted intothe text that will appear on the screen. Access the node, then it�s elementand set it�s text.

IEventingNode node = wdContext.nodeEventing();

IEventingElement elem = node.currentEventingElement();

elem.setText("Start Value");

24. Enter the Subscribe method to listen for the event when raised / fired fromthe other Web Dynpro project. Please use your editor to find your methodafter wdThis.

WDPortalEventing.subscribe(

"urn:com.sap.tc.webdynpro.test",

"TestWDEvent",

wdThis.wdGetConcertorSportAction());

25. Enter the code that will analyse the parameter passed. This is placed into themethod called when an event is raised.

if (dataObject.equals("sport")) {






elem.setText("You have chosen to attend a sporting event.");

} else if (dataObject.equals("concert")) {



elem.setText("You would prefer a concert.");

} else {



elem.setText("Parameter not sport or concert, maybe surfing?");

}

Remember to save.

26. Create a new textView to hold the changed Text. Finish.

27. Change the RootUIElementContainer to MatrixLayout. Change the newTextView to design of header1, Layout of MatrixHeadData. Please select thedrop down select Text from the Value Attribute in the Context.

28. Select Text.

29. Create an Application and deploy to the portal server.

30. Result should look like the following:

31. Create an iView from both of these and display them on a page. The resultsshow the initial values. No button has been selected. The second showsthat a sporting event button has been selected. The third shows that Rockconcert event button has been selected.




Figure 607: PortalEventingNavigationWorkProtect Screenshot 31



Solution 20: Creating and using PortalEventing with Java Web DynproTask:

1. Create a new Web Dynpro project the same as the first exercise:WD_Events_XX where XX is your student number or continue workingwith WD01_Basics_XX.

a)





2. Navigate to the RootUIElementContainer and insert a child element.

a)


3. Select a button type and use your own ID. Press finish

a)





4. Add a text for your button e.g. Sporting Event. Create an Event.

a)


5. Create the Action with the name SportButtonClicked. Press Finish.

a)





6. Repeat steps 2, 3, 4 and 5 to create a new button.

a)


7. Change the layout of the RootUIElementContainer from FlowLayout toMatixLayout and the Sporting Event Button to MatrixHeadData to ensurea neater display.

a)


8. Raise the EPCF event by adding the code into the View ControllersImplementation in the methods starting with onActionSportButtonClickedthen onActionConcertButtonClicked.

a)





9. Right click to organise imports to remove the error.

a)


10. Repeat the step for the concert method. No need to organise imports. (Alsowe could have changed the event name rather than passing the parametersconcert and sport.)

a)


11. Deploy the changed project and run. The fire event Web Dynpro shouldlook like this.

a)





12. Create a new Web Dynpro project that will subscribe to this event.

a)


13. Call the Project WD01_Subscribe_XX where XX is your student number.Press Finish to create.

a)





14. Create a Web Dynpro Component.

a)


15. Enter the Component Name e.g. SubscribingWD and enter a Package e.g.com.sap.training. Name the view e.g. SubscribeView. Press finish.

a)





16. Double click the SubscribeView. Press the Context tab to display the Context.

a)


17. Create a new Value Node by using the context menu and selecting ValueNode.

a)





18. Give the Value Node a name e.g. Eventing. Please ensure that the cardinalityis 1:1 for the Value node. Complete by pressing finish.

a)


19. Create a new Value Attribute.

a)


20. Give the Value Attribute the name Text. Finish.

a)





21. Now for the important part. We will create an Action. This Action will becalled by the subscribe event when the event is raised / fired. Press Actiontab � then New. Enter the name e.g. ConcertorSport and some text. NB pressNext not finish as we need to enter the parameters.

a)


22. Create three parameters by pressing New. dataObject, name and namespace,all type string.

a)


23. Navigate to the View Controller implementation tab. Scroll down the codeuntil the wdDoInit is reached. Please ensure that some text is defaulted intothe text that will appear on the screen. Access the node, then it�s elementand set it�s text.






elem.setText("Start Value");

a)


24. Enter the Subscribe method to listen for the event when raised / fired fromthe other Web Dynpro project. Please use your editor to find your methodafter wdThis.

WDPortalEventing.subscribe(

"urn:com.sap.tc.webdynpro.test",

"TestWDEvent",

wdThis.wdGetConcertorSportAction());

a)


25. Enter the code that will analyse the parameter passed. This is placed into themethod called when an event is raised.

if (dataObject.equals("sport")) {






elem.setText("You have chosen to attend a sporting event.");

} else if (dataObject.equals("concert")) {



elem.setText("You would prefer a concert.");

} else {



elem.setText("Parameter not sport or concert, maybe surfing?");

}

Remember to save.

a)


26. Create a new textView to hold the changed Text. Finish.

a)





27. Change the RootUIElementContainer to MatrixLayout. Change the newTextView to design of header1, Layout of MatrixHeadData. Please select thedrop down select Text from the Value Attribute in the Context.

a)


28. Select Text.

a)


29. Create an Application and deploy to the portal server.

a)





30. Result should look like the following:

a)


31. Create an iView from both of these and display them on a page. The resultsshow the initial values. No button has been selected. The second showsthat a sporting event button has been selected. The third shows that Rockconcert event button has been selected.





a)




Lesson Summary

You should now be able to:� Create an iView from the Web Dynpro Application.� Communication between iViews using Portal Eventing is achieved using the





EP120 Unit Summary

Unit SummaryYou should now be able to:� Create an iView from the Web Dynpro Application.� Enable communication between iViews using Portal Eventing and Java Web


the Portal theme using Java Web Dynpro.� Build a WebDynpro IView� Create an iView from the Web Dynpro Application.� Communication between iViews using Portal Eventing is achieved using the





Unit Summary EP120


Unit 13ABAP Web Dynpro

Unit Overview


� Understand System Architecture and ABAP Program� Create a simple ABAP WebDynpro application� Integrate a WebDynpro application into the portal� Use Portal Eventing� Use Portal Navigation� Use Portal Workprotect

Unit ContentsLesson: Introduction to ABAP Web Dynpro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .562Lesson: Creating an ABAP Web Dynpro .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .569Lesson: Integrating an ABAP Web Dynpro into the Portal . . . . . . . . . . . . . . . .575Lesson: Portal Eventing, Navigation and WorkProtect with ABAP WebDynpro.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .578

Exercise 21: Create a simple Web Dynpro Application ... . . . . . . . . . . . .585Exercise 22: Extract data from the SAP system and display in a simpletable format.. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .595


Unit 13: ABAP Web Dynpro EP120

Lesson: Introduction to ABAP Web Dynpro

Lesson Overview


� Understand System Architecture and ABAP Program

Business Example

Figure 640: Decision to use ABAP or Java Web Dynpro

When to use Java Web Dynpro and when to use ABAP Web Dynpro?

This is a vital question asked by many development projects. The first question toask is: where is the needed data stored. If the predominant data is found in theSAP system it will be a lot easier for an SAP developer to access the informationvia the ABAP Web Dynpro. If most of the relevant data is found via the JavaDictionary, it would be prudent to access the information using Java Web Dynpro.

What release strategy does your company follow. Java Web Dynpro has beenavailable for a lot longer than the ABAP Web Dynpro and it may not be on theplans to upgrade to allow ABAP Web Dynpro to be used.


EP120 Lesson: Introduction to ABAP Web Dynpro

What is the skill set of a company�s developers. If there are predominantlyJava developers and no ABAP skills, it would add weight to developing JavaBased Web Dynpros. If ABAP skills are more prevalent then there is more of anargument to use ABAP Web Dynpro.

How much ABAP Data Dictionary information is needed. ABAP Web Dynprocomponents can be completed significantly faster by incorporation of numerousData Dictionary functionality for example: search helps, F1 help documentationand field labels. An SAP dictionary structure can be copied to the Java Dictionary.

Will there be a need for new features available with ABAP Web Dynpro forexample ALV grid and Adobe forms incorporated into the ABAP Web DynproViews. Adobe Forms designed in the Form Builder (transaction: SFP), can beintegrated into ABAP Web Dynpro views.

Figure 641: System Architecture and ABAP Program

The SAP Web Application Server has a modular architecture that follows thesoftware-oriented client/server principle.

In the SAP Web Application Server, presentations, application logic, and datastorage can be assigned to different systems. This serves as the basis for thescalability of the system.

The lowest level is the database level. Here data is managed with the help of arelational database management system (RDBMS). This data includes, apart fromapplication data, the programs and the metadata that the SAP System requiresfor self-management.



The ABAP programs run at the application server level, that is, both theapplications provided by SAP and the ones you develop yourself. The ABAPprograms read data from the database, process the data, and possibly store data.

The third level is the presentation server level. This level contains the userinterface where each user can access the program, enter new data, and receivethe results of a work process.

The technical distribution of software is independent of its physical location onthe hardware. Vertically, all levels can be installed on top of each other on onecomputer or each level on a separate computer. Horizontally, the presentationand application servers can be divided among any number of computers. Thehorizontal distribution of database components, however, depends on the typeof database installed.

Figure 642: Excerpt for an ABAP Program

ABAP programs are processed on the application server. The design of userdialogs and database accesses is of particular importance when writingapplication programs.



Figure 643: Repository Objects

The Repository is subdivided according to application components.

Within an application component (e.g., MM) there are several packagescontaining relevant objects for a more detailed logical subdivision.

Whenever a Repository object is created, it must be assigned to a package.

Repository objects are often made up of sub-objects that are also referred to asRepository objects.

Figure 644: Working with the ABAP Workbench tools.

The ABAP Workbench includes all tools required for creating and editing



Repository objects. These tools cover the entire software development cycle.

The most important tools are:

The ABAP Editor for editing source code

The ABAP Dictionary for editing database table definitions, central data types,and so on

The Screen Painter for configuring screens (screens together with functionsfor user dialogs)

TheMenu Painter for designing user interfaces (menu bar, standard toolbar,application toolbar, function key settings)

The Function Builder for maintaining function modules

The Class Builder for maintaining global classes and interfaces

You can call each of these tools explicitly and then load a Repository object forprocessing. But it is much more elegant and convenient to access them using theObject Navigator. You can have the requested Repository objects listed in thiscentral development tool. All you have to do to edit one of them is to double-clickto select it. The corresponding tool is called automatically and includes theselected Repository for displaying or editing.

Figure 645: Transporting Development Objects

Development projects are carried out in a development system. The developmentobjects edited or created in a project are transported to subsequent systems (testand/or production system) on project completion. At the start of a developmentproject the project manager creates a change request, in which he or she names



the employees of this project, in the Transport Organizer or directly in theABAP Workbench. The Transport Organizer then creates a task for each projectemployee in the change request.

When a development object is edited or created, the relevant employee assignsthis to the change request. The object is entered into the task of the employee.Thus, all repository objects that an employee works on during a developmentproject are collected within his or her task.



Lesson Summary

You should now be able to:� Understand System Architecture and ABAP Program


EP120 Lesson: Creating an ABAP Web Dynpro

Lesson: Creating an ABAP Web Dynpro

Lesson Overview


� Create a simple ABAP WebDynpro application

Business Example

Figure 646: Creating an ABAP Web Dynpro - logon.

Access the SAP logon icon. Select the SAP system that you would like to access.

Enter the client, your user, password and language.

Either enter SE80 into the command line or follow the menu path Tools -> ABAPWorkbench -> Overview, then click the Object Navigator to access the ObjectNavigator.



Figure 647: Creating an ABAP Web Dynpro - Package + Request

Select Package from the drop down. Press the create button.

Enter a name for your package. Please remember that this must start with a z or ay otherwise this could be overwritten during an upgrade.

Enter a short description for your package and optionally an ApplicationComponent e.g. MM for material management.

Enter an existing transportable workbench request or create one. This creates aRequest number that is needed to transport this development object to the QAor Production System.



Figure 648: Creating an ABAP Web Dynpro - Create component.

Right click the Package that you have created.

Select Create -> Web Dynpro -> Web Dynpro Component.

Give the ABAP Web Dynpro a name beginning with z or y. Enter a meaningfuldescription, select Web Dynpro Component and give the Window a name.

Open the navigation menu and select Create -> View. To create the view. (did Ineed to say that?).



Figure 649: Creating an ABAP Web Dynpro - create view

Create the View by assigning a name and a description.

Drag e.g. a Caption onto the view.

Assign a text to the caption

Figure 650: Creating an ABAP Web Dynpro - assign view to window



Press the Activate button � select all the entries and press enter.

Open the menu path on the left and double click on the Window e.g. MAIN.

On the right � select the Window � alternate click (right click) and select EmbedView.

Select the view that you would like to add. Select enter � green tick on the bottomleft to continue.

Figure 651: Creating an ABAP Web Dynpro - create application.

Create a Web Dynpro application by right clicking the component.

Enter some exciting and descriptive text and continue � green tick.

Accept the defaults and press save.

Right click this newly created application and select test.

Check that your browser starts and displays the view.



Lesson Summary

You should now be able to:� Create a simple ABAP WebDynpro application


EP120 Lesson: Integrating an ABAP Web Dynpro into the Portal

Lesson: Integrating an ABAP Web Dynpro into the Portal

Lesson Overview


� Integrate a WebDynpro application into the portal

Business Example

Figure 652: Integrating an ABAP Web Dynpro Component into the Portal 1



Figure 653: Integrating an ABAP Web Dynpro Component into the Portal 2

Enter the System Alias and specify the namespace (sap) and name of the WebDynpro application.

The name of the ABAP Web Dynpro can be found in the SAP system.

The iView size can be altered by opening the iView and Choose Appearance ->size. It is advisable to change the size to automatic when using large and complexapplications.


EP120 Lesson: Integrating an ABAP Web Dynpro into the Portal

Lesson Summary

You should now be able to:� Integrate a WebDynpro application into the portal



Lesson: Portal Eventing, Navigation and WorkProtectwith ABAP Web Dynpro

Lesson Overview


� Use Portal Eventing� Use Portal Navigation� Use Portal Workprotect

Business Example

Figure 654: Portal Eventing using ABAP Web Dynpro.

Please note that it may be advisable not to use Portal Eventing whencommunications are on a frequent basis between Java Web Dynpro iViews. Itwould be better to implement a �full-screen� Web Dynpro application containingall the relevant components.


EP120 Lesson: Portal Eventing, Navigation and WorkProtect with ABAP Web Dynpro

The communication between iViews is based on EPCF that uses JavaScript toallow iView communication and also provides an API for the Portal applicationdeveloper. Web Dynpro applications have to use a set of Java Wrapper methods toimplement client-side eventing. All Portal servers and servers that are used mustbe in the same domain when EPCF is used.

Portal eventing functions only between iViews that are on the same browserwindow. Events between iViews in different browser windows cannot betransported.

Figure 655: Raising a Portal Event with ABAP Web Dynpro

The first parameter, must start with urn, � the namespace and the second parameter� the event name must be unique to your event. The Third parameter is the WebDynpro action that is mapped to the portal event. The event handler is called whenthe Web Dynpro application receives the specified portal event on the client. TheWeb Dynpro HTML Client handles the mapping between a portal event and aWeb Dynpro action and is absolutely transparent for the Web Dynpro applicationdeveloper. The Web Dynpro action can be reused for several Portal events. Ifyou want to receive the transported data of the portal event, you can define thefollowing parameters for your Web Dynpro action: dataObject � contains theparameter of the portal event, Namespace � contains the name space of thereceived portal event and Name � contains the name of the received portal event.

You can fire a portal event at any time in your Web Dynpro application. Theevent is transported with the next response to the client. More than one portalevent can be raised in a request- response cycle. You can trigger such a portalevent from anywhere in your Web Dynpro application. The event is sent with the



next response to the client. You can even trigger several portal events in onerequest-response cycle. However, it is usual to trigger a portal event in an actionhandler of a Web Dynpro application. This could be the case, for example, with anaction handler of a UI element (for example, a button). When a portal event istriggered, an internal application event is first passed from the iView to the portaland can e handled within one or several other iViews.

Figure 656: Subscribing to an Event in ABAP Web Dynpro.

Enter the namespace and the name of the event. The combination of namespaceand event name must be unique. In addition, enter the name of the action that is tobe triggered if exactly this portal event is to be received. The corresponding actionhandler is then called automatically.

The action, in this case GET_EVENT, is not created automatically. Therefore,create the action explicitly on the tab page Actions in the view.

The parameters of a portal event are passed to the action parameter WDEVENTusing its method GET_STRING. With the help of the optional parameterPORTAL_EVENT_PARAMETER, you can have application-dependentinformation passed to the handler method. In the following example, this is thefield whose value is passed to the XYZ method of the component controllercalled afterwards.

method ONACTIONGET_EVENT.

data: EVT_NAME type STRING,

field type dictionarytable-field.

EVT_NAME = WDEVENT->GET_STRING( NAME = 'PORTAL_EVENT_NAME' ).



if EVT_NAME = ' TestWDEvent '.

field = WDEVENT->GET_STRING( NAME = 'PORTAL_EVENT_PARAMETER' ).

WD_COMP_CONTROLLER->XYZ( methodparameter = field ).

endif.

endmethod.

Figure 657: Absolute Navigation with ABAP Web Dynpro 1

There could be a number of problems with Absolute navigation, especially whenthe target is moved to a new location. Object based navigation and relativenavigation are a lot more stable and reliable. It would be a good decision to makethe target addresses configurable by using the WDConfiguration service



Figure 658: Absolute Navigation with ABAP Web Dynpro 2

With the absolute navigation tool, you must know the name of the page to bedisplayed in order to pass it to the method.

The navigation target is the only parameter required here. It stands for anabsolute address in the portal. The other parameters are used for controlling thenavigation and are optional. You can set business parameters and parametersfor the respective application launcher in the portal. To transport businessparameters correctly to the target application, you have to set the parameterUSE_SAP_LAUNCHER. If it is an SAP application (for example, BSP WebDynpro, and so on), you have to set the switch to TRUE.



Figure 659: Relative Navigation in ABAP Web Dynpro

Relative addressing for example if you want to navigate between two portal pagesthat are both defined in the same directory in the PCD. The relative addressescontinue to remain the same even if the entire directory is moved within the PCD.Parameters are used in the same way as Absolute Navigation.

Figure 660: Object Based Navigation

Object-based navigation (OBN) enables developers to specify navigation based onbusiness objects and operations, without identifying a specific navigation target.Portal administrators can later assign specific navigation targets to these businessobjects and operations.



In many cases it is sufficient to use either relative or absolute navigation tonavigate to a specific iView or page. However, sometimes more flexibility isrequired. For this purpose, you have Object-Based Navigation, which allows youto define navigation steps at a higher semantic level. Instead of defining a concretetarget URL, you call a particular operation of a particular business-object.

You configure in the portal which concrete iView (or which page) is to be used forexecuting this operation. This configuration can be role-specific or user-specific.The Web Dynpro application itself passes on solely the name of the businessobject and the operations linked to it.

In Web Dynpro for ABAP, the integration of object-based navigation is verysimilar to the integration of portal eventing. To trigger the navigation itself, theWeb Dynpro Framework provides a service that can be called from the application.This service, like Portal Eventing, is part of the portal manager.

You can activate object-based navigation of the portal in Web Dynpro ABAP bycalling the method NAVIGATE_TO_OBJECT of the portal manager (interfaceIF_WD_PORTAL_INTEGRATION)

Figure 661: WorkProtect with ABAP Web Dynpro

To avoid losing unsaved data when navigating to another iView, the portal providesa WorkProtect mode that, when activated, provides the user an opportunity tosave any changes before navigating.



Exercise 21: Create a simple Web DynproApplication

Exercise ObjectivesAfter completing this exercise, you will be able to:� Create and run a simple Web Dynpro application

Business ExampleThe first exercise is a version of the popular �Hello World� program.

Task 1:You will place a UI element onto the view layout that contains the hard coded valueof �Welcome to Web Dynpro!�. This text will then be displayed in the browser.

Create a newWeb Dynpro Component called ZWD_##_HELLO_WORLD. Changethe proposed window name to MAIN.

After this exercise is complete, you should see the result shown on the left.

Figure 662: ABAPWebDynpro Screenshot 1

1. Developing

Create a new Web Dynpro Component called ZWD_##_HELLO_WORLD.Change the proposed window name to MAIN.

2. Create a view called HELLOWORLD and navigate to the view�s layout tab.Open the context menu of the ROOTUIELEMENTCONTAINER




choose Element einfügen (Insert Child)

Enter the name TEXT.

From the Type drop down list, select TextView.

Press Confirm Enry.

3. Now select the newly created element TEXT and change the design propertyfrom standard to header1. Enter �Welcome to Web Dynpro!� in the textproperty. Press Save.

4. Double-click on the window main. Right mouse click on the only elementMAIN and choose embed view from the context menu. Choose helloworld asview to be embedded and click on continue.

5. Save and activate your new Web Dynpro component.

6. Lastly, we must create an application so that we can access the Web Dynprocomponent via a URL.

- Right mouse click on the component node

- Select Create→ Web Dynpro Anwendung (Web Dynpro Application) fromthe context menu. Create the application having the following attributes:

Name: (accept default)Decription: Hello World

Accept all default settings and press Save.

Task 2:Running

1. Start the application.



Solution 21: Create a simple Web DynproApplicationTask 1:You will place a UI element onto the view layout that contains the hard coded valueof �Welcome to Web Dynpro!�. This text will then be displayed in the browser.

Create a newWeb Dynpro Component called ZWD_##_HELLO_WORLD. Changethe proposed window name to MAIN.

After this exercise is complete, you should see the result shown on the left.


1. Developing




Create a new Web Dynpro Component called ZWD_##_HELLO_WORLD.Change the proposed window name to MAIN.

a)


2. Create a view called HELLOWORLD and navigate to the view�s layout tab.Open the context menu of the ROOTUIELEMENTCONTAINER







Press Confirm Enry.

a)


b) Navigate to the view�s Layout tab

Open the context menu of the ROOTUIELEMENTCONTAINER




Press Confirm Enry.





3. Now select the newly created element TEXT and change the design propertyfrom standard to header1. Enter �Welcome to Web Dynpro!� in the textproperty. Press Save.

a)


4. Double-click on the window main. Right mouse click on the only elementMAIN and choose embed view from the context menu. Choose helloworld asview to be embedded and click on continue.

a)





5. Save and activate your new Web Dynpro component.

a) Save and activate your new Web Dynpro component.

6. Lastly, we must create an application so that we can access the Web Dynprocomponent via a URL.

- Right mouse click on the component node

- Select Create→ Web Dynpro Anwendung (Web Dynpro Application) fromthe context menu. Create the application having the following attributes:

Name: (accept default)Decription: Hello World




Accept all default settings and press Save.

a) Lastly, we must create an application so that we can access the WebDynpro component via a URL.


b)





Task 2:Running

1. Start the application.

a) Right mouse click on the newly created application zwd_##_hello_worldand select Test.

Your browser should now display the following screen:






Exercise 22: Extract data from the SAPsystem and display in a simple tableformat

Exercise ObjectivesAfter completing this exercise, you will be able to:� Use the ABAP Web Dynpro to create a useful component.� Extract data from the database.� Display the data in a table� Create nodes and attributes based on a dictionary structure� Create mapping and binding between context nodes and the view elements.

Business ExampleDevelopment Objectives


� Show the simplicity of data extraction from the SAP system� Show the automatic search helps and f1 helps when using the ABAP stack� Use the mapping and binding with the help of the dictionary structure.



Task:The result of this exercise will be that you have an application that will select datafrom the SAP transactional system and display this data in a table format.


Prerequisites

You have logged onto the correct client in the SAP system. You have completedthe Hello World exercise for practice.

1. Developing

Navigate to the Object Navigator � SE80 and select the WebDynpro dropdown. Create a Web Dynpro component with the nameZWD_XX_select_into_table where XX is your student number.

2. Navigate to the ComponentController in change mode and create a Contextnode with the name carriers. Enter a Dictionary structure of SCARR and 0..ncardinality. Next, press the button to add attributes from this structure.

3. Select the fields that you want to use: CARRID, CARRNAME, CURRCODEand URL. Please note that the field URL is 255 characters.

4. Press the Methods tab � select the WDDOINIT method and add the code toselect the data from table scarr into internal table itab. Access the contextnode called CARRIERS and bind the internal table data to this node.

5. Save and activate all components.

6. Create a View with the name Carrier_display.




7. Select the View, before selecting the Context tab. Drag the Carriers node tothe View Controllers Context. Data from the Component Controller contextshould be now available in the View Controller and visa versa. Save andActivate.

8. Select the Layout tab, highlight the RootUIElementContainer and Insert anElement of type table with the name Carrier_table.

9. Right click the carrier_table and select Create Binding. Press the Contextbutton and then the CARRIERS node. Select the fields that you wish tobind and add a Caption to the table.

10. Embed your View onto the Window.

11. Create a Web Dynpro application and activate.

12. Right click and test the Web Dynpro component.



Solution 22: Extract data from the SAPsystem and display in a simple tableformatTask:The result of this exercise will be that you have an application that will select datafrom the SAP transactional system and display this data in a table format.


Prerequisites

You have logged onto the correct client in the SAP system. You have completedthe Hello World exercise for practice.

1. Developing




Navigate to the Object Navigator � SE80 and select the WebDynpro dropdown. Create a Web Dynpro component with the nameZWD_XX_select_into_table where XX is your student number.

a)







2. Navigate to the ComponentController in change mode and create a Contextnode with the name carriers. Enter a Dictionary structure of SCARR and 0..ncardinality. Next, press the button to add attributes from this structure.

a)






3. Select the fields that you want to use: CARRID, CARRNAME, CURRCODEand URL. Please note that the field URL is 255 characters.

a)






4. Press the Methods tab � select the WDDOINIT method and add the code toselect the data from table scarr into internal table itab. Access the contextnode called CARRIERS and bind the internal table data to this node.

a)






5. Save and activate all components.

a)


6. Create a View with the name Carrier_display.

a)






7. Select the View, before selecting the Context tab. Drag the Carriers node tothe View Controllers Context. Data from the Component Controller contextshould be now available in the View Controller and visa versa. Save andActivate.

a)






8. Select the Layout tab, highlight the RootUIElementContainer and Insert anElement of type table with the name Carrier_table.

a)



9. Right click the carrier_table and select Create Binding. Press the Contextbutton and then the CARRIERS node. Select the fields that you wish tobind and add a Caption to the table.

a)

Figure 690: ABAPWebDynpro Screenshot 27Continued on next page









10. Embed your View onto the Window.

a)








11. Create a Web Dynpro application and activate.

a)






12. Right click and test the Web Dynpro component.

a)





Lesson Summary

You should now be able to:� Use Portal Eventing� Use Portal Navigation� Use Portal Workprotect


EP120 Unit Summary

Unit SummaryYou should now be able to:� Understand System Architecture and ABAP Program� Create a simple ABAP WebDynpro application� Integrate a WebDynpro application into the portal� Use Portal Eventing� Use Portal Navigation� Use Portal Workprotect


Course Summary EP120

Course SummaryYou should now be able to:



Glossarysecurity zone

Means of implementing an additional layer of security to portal componentsand services which are accessed by a URL. Access is controlled by meansof progressive safety levels and portal permissions, which are assigned toauthorized users.


Glossary EP120


IndexPportal application, securityzone for, 104

portal component access, 102Ssecurity zone

for portal applications,104permissions, 106rules, 104safety levels, 105specifications, 101


Index EP120


FeedbackSAP AG has made every effort in the preparation of this course to ensure theaccuracy and completeness of the materials. If you have any corrections orsuggestions for improvement, please record them in the appropriate place in thecourse evaluation.


Documents

EP120 SAP NetWeaver Portal Development