JA310 Col54
Uploaded by
vijaysriJA310 Col54
Uploaded by
vijaysriJA310 Java Web Dynpro
Internal
Only
JA310
Java Web Dynpro
Partner
Use
THE BEST-RUN BUSINESSES RUN SAP
SAP
SAP
SAP AG©2004
SAP AG 2004
Partner
Use
SAP NetWeaver™
2005/Q4
Material number 50070818
Internal
Only
Copyright
Copyright 2005 SAP AG. All rights reserved.
No part of this publication may be reproduced or transmitted in
any form or for any purpose without the express permission of
SAP AG. The information contained herein may be changed
without prior notice.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Some software products marketed by SAP AG and its distributors contain proprietary software components of
Partner
other software vendors.
Use
Microsoft, Windows, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation.
IBM, DB2, DB2 Universal Database, OS/2, Parallel Sysplex, MVS/ESA, AIX, S/390, AS/400, OS/390, OS/400,
iSeries, pSeries, xSeries, zSeries, z/OS, AFP, Intelligent Miner, WebSphere, Netfinity, Tivoli, and Informix are
trademarks or registered trademarks of IBM Corporation in the United States and/or other countries.
Internal
Oracle is a registered trademark of Oracle Corporation.
UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group.
Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or
registered trademarks of Citrix Systems, Inc.
Only
HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web
Consortium, Massachusetts Institute of Technology.
Java is a registered trademark of Sun Microsystems, Inc.
JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and
implemented by Netscape.
MaxDB is a trademark of MySQL AB, Sweden.
SAP, R/3, mySAP, mySAP.com, xApps, xApp, and other SAP products and services mentioned herein as well as
their respective logos are trademarks or registered trademarks of SAP AG in Germany and in several other
countries all over the world. All other product and service names mentioned are the trademarks of their respective
companies. Data contained in this document serves informational purposes only. National product specifications
may vary.
These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated
companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and
SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP
Group products and services are those that are set forth in the express warranty statements accompanying such
products and services, if any. Nothing herein should be construed as constituting an additional warranty.
Course Prerequisites
z JA100 – Java Startup Kit
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
Target Group
z Participant
Developers of Java Web Dynpro Applications
z Duration: 3 days
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Hints to the user:
These training documents are not meant to be used without corresponding classroom
instruction. They are only complete when used in tandem with the comments of an SAP trainer.
Internal
Space is provided for you in the course documents to note this additional information.
Only
Course Goals
At the conclusion of this course, you will be
able to:
z Develop a Basic Web Dynpro Application
z Create and implement a UI using Views and
Windows
Internal
Only
z Create and implement programming logic using
Web Dynpro controllers
z Interact with a business backend system via
Partner
ABAP Function Modules
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
Content (1)
Unit 1: SAP Java Development Environment
Unit 2: Web Dynpro Introduction
Unit 3: Web Dynpro Controllers
Unit 4: The Context at Design Time
Internal
Only
Unit 5: The Context at Runtime
Unit 6: UI Elements
Unit 7: Language Support and Messages
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
Content (2)
Unit 8: Generic UI Services
Unit 9: Debugging
Unit 10: Dynamic Modifications at Runtime
Unit 11: Web Dynpro Models: Adaptive RFC Layer
Internal
Only
Unit 12: Appendix
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
SAP Java Development Environment
Contents:
z SAP NetWeaver Developer Studio
z Technical System Landscape, Administration Tools
z SAP Component Model
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-1
SAP Java Development Environment:
Unit Objectives
After completing this unit, you will be able to:
z Use the SAP NetWeaver Developer Studio
z Describe the technical system landscape
z Use the Administration Tools of the
Internal
Only
Web Application Server
z Understand the SAP Component Model
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-2
SAP NetWeaver Developer Studio:
Topic Objectives
After completing this topic, you will be able to:
z Describe the development environment for the SAP
NetWeaver Developer Studio
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-3
Architecture of the Eclipse Platform
Plug-In
Plug-In
Java Workbench
development Help
tools (JDT) JFace
Internal
Only
SWT Plug-In
Plug-In
Plug-In
Plug-In
development
development Workspace VCM
environment
environment
Partner
(PDE)
(PDE) Plug-In
Plug-In
Platform runtime
environment
Use
Eclipse SDK
SAP
SAP
SAP AG 2004
Partner
Use
Eclipse Development Platform
The Eclipse Project started in November 2001 at IBM as an Open Source Project released under a CPL
(Common Public License). Eclipse is a component-based development platform for web applications
that offers almost limitless enhancement possibilities. SAP is now represented in the Eclipse consortium
Internal
along with other reputable companies such as Borland, IBM, Merant, Rational Software, RedHat, SuSE,
and TogetherSoft etc.
Architecture
Only
During development of the Eclipse IDE, great importance was initially placed on the ability to enhance
this development. Core applications for the platform runtime environment can be enhanced using plug-
ins.
y Workbench
- Defines the structure of the interface development using Eclipse. JFace is built for collaboration
with the Standard Widget Toolkit (SWT).
- Performs standard tasks in interface creation, such as access to pictures and fonts, standard dialogs,
etc.. API and implementation are independent of the underlying window system.
y Standard Widget Toolkit (SWT)
- Pre-defined assembly for interface elements and graphical display. Implementations are available
for Windows and Motif.
y Workspace
- Allows Java applications to be incorporated in projects. Offers a history mechanism to protect
against loss of data by saving the contents of resources that have been changed and deleted.
© SAP AG JA310 1-4
Plug-Ins
z Are function units created within Eclipse in Java.
z Connections between Plug-Ins by enhancements and
enhancement points.
z Tools are added as Plug-Ins.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Plug-Ins
Plug-Ins declare any number of enhancement areas to which other plug-ins can be attached. When the
Eclipse Platform is started, the system determines the number of available plug-ins and their
connections.
Internal
Plug-ins are activated using a “lazy access” concept; that is, a plug-in is not activated until it is required.
Only
The Eclipse Platform is structured using various plug-ins.
© SAP AG JA310 1-5
Eclipse UI
z A perspective consists of various views and editors.
Example:
"Java Perspective" "Java Browsing Perspective"
Editor
Internal
Only
Partner
Use
Task Outline Overview of the
View View Java Hierarchy
SAP
SAP
SAP AG 2004
Partner
Use
The Eclipse UI (Perspective, Views, Editor)
The Eclipse Workbench offers several perspectives and views of the development process.
y A perspective consists of several views and editors.
y A view is used for navigation and information.
Internal
y An editor can be used to modify source texts.
Self-defined perspectives, views and editors are also possible. By adding or removing the individual
views and editors available, you can adjust the existing perspectives without difficulty.
Only
Java Editor
The Java Editor contains every possible option for making development easier using Code Completion,
Templates, QuickFix, Syntax Check, Immediate Translation, Local History, Code Generation and much
more.
Eclipse contains various options for Refactoring. This is the name given to the process of making
widespread changes throughout a projects – such globally renaming a class method.
Debugger
The integrated debugger contains a number of useful functions for J2EE developers, such as Remote
Debugging, Breakpoints with Conditions, Hit Counts etc.
© SAP AG JA310 1-6
SAP NetWeaver Developer Studio
z Eclipse offers everything required to develop Java programs.
However, integration with the application server and database
support is missing in XML and JSP editors for J2EE projects.
z The SAP NetWeaver Developer Studio adds new functionality to
Eclipse through a number of Plug-Ins.
Internal
Only
Infrastructure
Web Services
UML Modeller
J2SE
Web Dynpro
Persistence
Party Tools
& other 3rd
Dictionary
Partner
Tools
Tools
Tools
Tools
Tools
Tools
Tools
J2EE
Java
Use
SAP Integration Framework
Eclipse Plug-In Framework
SAP
SAP
SAP AG 2004
Partner
Use
SAP NetWeaver Developer Studio
Based on the free platform eclipse, the SAP NetWeaver Developer Studio is a development environment
for all development areas in J2EE applications.
y User Interface
Internal
SAP Web Dynpro tools can be used to develop flexible Web interfaces.
y E-business logic
The SAP NetWeaver Developer Studio supports you in the development and deployment of EJB’s
Only
and in the definition and publication of Web Services.
y Java persistence
State-of- the-art technologies, such as Container Managed Persistence (CMP), embedded SQL in Java
(SQLJ) und Java data objects (JDO) are supported by the corresponding tools.
You can also define platform-independent data types and database objects in the Java Dictionary.
The SAP NetWeaver Developer Studio combines a number of tools in one package. It supports local
development recognized by Java, but also contains a number of Plug-Ins that can be used for team-
oriented development, testing and deployment of business applications using version management.
The SAP NetWeaver Developer Studio also contains additional tools, such as design-time support for
HTML, XML and XSLT (validation, code completion).
© SAP AG JA310 1-7
SAP NetWeaver Developer Studio: Basics
z Based on open source Eclipse development framework
Incremental build, ant-based build support, support for building
archives, state-of-the-art debugger (local and remote)
z Functionality enhanced by SAP with Plug-Ins
Support for SAP-specific development (for example, Web Dynpro)
Creation wizards, Deployment, Local test and debug environment
z File and folder-based component storage
Internal
Only
z Fully integrated IDE-support for component development
z Flexible use of the PC + reliable server-based Infrastructure
Partner
z By seamlessly integrating the Java Development Infrastructure the
SAP NetWeaver Developer Studio combines the advantages of the
ABAP Workbench with the advantages of a local IDE
Use
SAP
SAP
SAP AG 2004
Partner
Use
Why you should use a separate Java IDE?
Local development of Java applications with commonly used tools revealed the following weaknesses:
y No support for development in large teams
y Inconsistencies between local developer PCs
Internal
y Long correction cycles
y Manual deployment
y Integration problems in large development projects
Only
This led to the request for a development platform in the format currently available with the ABAP
Workbench but with the additional benefit of a local development environment.
© SAP AG JA310 1-8
SAP NetWeaver Developer Studio: Installation
z Standard installation under "C:\Program Files\SAP\JDT\".
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Installation of the SAP NetWeaver Developer Studio
The SAP NetWeaver Developer Studio can either be installed with the SAP Web AS or it can be
installed stand alone.
y System prerequisites for IDE:
Internal
- 512 Mb RAM (Minimum)
- 1Gb RAM (Recommended)
- 300 Mb disc space
Only
- JDK 1.4.2 or higher
- Internet Explorer 6.0 or Netscape Navigator 7.0 or higher
y Default local Developer Studio path is C:\Program Files\SAP\JDT\eclipse
y Default local workspace path is C:\Documents and Settings\All Users\Documents\SAP\WorkSpace
- Unless multiple users are sharing the same development machine, then a shorter name should be
chosen such as C:\Workspace. This because the Windows™ Operating System has a built-in path
name length limit of 255 characters. If excessively long development entity names are chosen, then
it is possible that Eclipse could generate file names that exceed this limit.
- This limit can be checked for at design time, but not at deploy time.
© SAP AG JA310 1-9
SAP NetWeaver Developer Studio: Settings
z Menu: Window Æ Preferences ...
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Preferences
The Preferences dialog can be found from the main workbench Window menu under Window →
Preferences.
Internal
If a plug-in requires any configuration, then this can normally be performed through the relevant
preference page.
Only
© SAP AG JA310 1-10
SAP NetWeaver Developer Studio: Tool Set
z Menu Window Æ Open Perspective
z Order of all opened perspectives can be changed afterwards
z Choose your favourite perspectives via
Window Æ Preferences Æ Workbench Æ Perspective
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
SAP NetWeaver Developer Studio, Tool Sets
The Developer Studio offers a range of tools covering all aspects of application development. As is
usual in Eclipse, the associated tools are generally bundled together in Perspectives according to the task
at hand.
Internal
y Web Dynpro Perspective
Design support for creation of Web Dynpro applications
y J2EE Development Perspective
Only
Support for J2EE projects, Web Components (JSP, Servlet), XML
y Dictionary Perspective
Definition of database tables and simple types
y Web Service Perspective
Creation of Web Service client proxy definition
y Design Time Repository (DTR) Perspective
DTR client allows easy file handling on the file server
y Development Components Perspective
Display and edit a Development Component
y Development Configurations Perspective
Provides task-specific DTR access
© SAP AG JA310 1-11
SAP NetWeaver Developer Studio: Views
z We recommend that you always open the views
Navigator, Outline, Properties, Tasks
via Window Æ Show View Æ Other Æ Basic
for your daily work.
z For logging purposes, select the
corresponding view:
Window Æ Show View Æ
Internal
Only
PDE Runtime Æ Error Log
z Generally, task-dependent views are
automatically opened with the start
Partner
of the corresponding perspective.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Views
Within Eclipse, views are navigation tools that support editors and provide alternative presentations of
your project file hierarchy.
y Views have their own menus. To open the menu for a view, click the icon at the left end of the view's
Internal
title bar. Some views also have their own toolbars. The actions represented by buttons on view
toolbars only affect the items within that view.
y A view might appear by itself, or stacked with other views in a tabbed window. You can change the
Only
layout of a perspective by opening and closing views and by docking them in different positions in the
Workbench window.
© SAP AG JA310 1-12
Close: File, View, Perspective
Close single
file
Internal
Only
Double-
Partner
clicking the
toolbar
adapts
Use
the size of
any view to
Close perspective screen size,
Close view and back !
via context menu
SAP
SAP
SAP AG 2004
Partner
Use
Perspectives
Each Workbench window contains one or more perspectives and defines the initial set and layout of
views in a Workbench window. Within the window, each perspective shares the same set of editors and
controls what appears in certain menus and toolbars.
Internal
y Each perspective provides a set of capabilities aimed at accomplishing a specific type of task or works
with specific types of resources. For example, the Java perspective combines views that you would
commonly use while editing Java source files, while the Debug perspective contains the views that
Only
you would use while debugging Java programs.
y Perspectives can be customized and saved. You can then set your Workbench preferences to open
your perspectives in the same window or in a new window.
y As you work in the Workbench, you will probably switch perspectives frequently.
© SAP AG JA310 1-13
SAP NetWeaver Developer Studio: Editors
z Depending on the type of file you are editing, the appropriate
editor is displayed in the editor area. For example:
Source Code
Editor
Message
Editor
Internal
Only
Partner
Use
Message Editor Source code editor
SAP
SAP
SAP AG 2004
Partner
Use
Editors
Depending on the type of file you are editing, the appropriate editor is displayed in the editor area. For
example, if you are editing a .TXT file, a text editor is displayed in the editor area. The name of the file
appears in the tab of the editor. If an asterisk (*) appears at the left side of the tab this indicates that the
Internal
editor has unsaved changes. If you attempt to close the editor or exit the Workbench with unsaved
changes you will be prompted to save your editor's changes.
Dummy Web Dynpro Project file
Only
When editing a Web Dynpro Project, you will see a dummy file appear in the editor window. This
represents the fact that some file belonging to a Web Dynpro Project has been edited. This dummy file
will stop you from shutting down Eclipse without saving the changes to your project.
XML editor
Select an XML file in the Navigator view, and select Open With → XML Editor.
Result: The XML Editor is displayed in the right perspective pane.
Switch to the XML source via the tab Source.
© SAP AG JA310 1-14
Project Management: Create Project
z Choose File Æ New Æ Project Æ <perspective> Æ...
z Result:
Navigator displays all
project files (.java, .xml)
Explorer displays project
Internal
Only
entities, including option
for creating and editing
an entity, including tool
start
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Project management
You can open multiple projects at the same time. There are different ways to open projects:
y Create a non-Development Component (DC) project
Select File → New → Project → <project type>
Internal
y Create a DC project
Select File → New → Project → Development Component → Development Component Project →
<project type>
Only
y Import a project
Select File → Import → Multiple Existing Projects into Workspace
Browse to the workspace path, and select the corresponding projects you want to import.
y J2SE project migration support (switch 6.20 to 6.30 IDE)
Select File → Import → jpx Project. Some manual adaptation will be necessary.
y Project check-out/check-in from DTR
Performance warning!
When Eclipse starts up, it buffers all open projects into memory! Therefore, Projects or Development
Components that you are not working on should not be left open.
© SAP AG JA310 1-15
Project Management: Import Project
z Copy the project to the local
file system (into your workspace)
z File Æ Import Æ Multiple Existing
Projects into Workspace
Enables you to reuse existing
projects within a new Developer
Studio version
Internal
Only
z Navigate one level above the
project folder; in general this is
the workspace folder
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-16
Project Management: Remove Project
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-17
SAP NetWeaver Developer Studio: Topic Summary
You should now be able to:
z Describe the development environment for the SAP
NetWeaver Developer Studio
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-18
SAP Web AS, Administration Tools:
Topic Objectives
After completing this topic, you will be able to:
z Describe the technical system landscape and
installation options of SAP Web Application Server
z Use a selection of Administration tools of SAP Web
Internal
Only
Application Server
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-19
Technical System Landscape: Installation Options
Save / Deploy Save/load Deploy Deploy Save/load
load
File File
File System System
System
Internal
Only
Service Service Service Service Service Service
Partner
Web Container Web Container
EJB Container EJB Container
J2EE Server J2EE Server
Local J2EE Engine Central J2EE Engine
Use
z Single z Multiple NetWeaver Developer Studios
Developer Workplace connecting to a common
SAP Web AS J2EE system
SAP
SAP
SAP AG 2004
Partner
Use
The SAP NetWeaver Developer Workplace consists of an SAP Web Application Server J2EE system
and the SAP NetWeaver Developer Studio.
Each part of the SAP NetWeaver Developer Workplace can be installed separately. This allows the
following installation options:
Internal
1. A combined installation of the SAP NetWeaver Developer Studio and the SAP Web Application
Server J2EE system. This option provides a complete development and test environment for each
developer.
Only
2. A standalone installation of the SAP NetWeaver Developer Studio for each developer and a
standalone central test SAP Web Application Server J2EE system. This option provides a single
development environment and a common test environment for multiple developers. This can be used
for instance for a larger developer group working on separate development projects.
© SAP AG JA310 1-20
SAP Web AS Administration Tools
Save / Deploy
load
File
System
SAP Management Console
Internal
Only
Service Service Service
Telnet
Partner
Web Container
EJB Container Visual Administrator
J2EE Server
Local J2EE Engine
Use
Config Tool
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-21
SAP Management Console
z Available on Windows™ operating system only
z Monitoring of processes
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
SAP Management Console
The SAP Management Console (SAPMMC) provides essential information for monitoring the SAP
system and offers functions to start, stop, and restart the system and also to configure the SAP DB.
Internal
The SAPMMC presents information on two panes of a window. The pane on the left is the scope pane.
It displays available information in a tree structure that can be expanded and compressed. The pane on
the right is the result pane. It shows detailed information about any item selected in the scope pane.
Only
On your installation host double-click the SAP Management Console icon on your desktop. The
SAPMMC screen appears.
In the left pane you can open the tree SAP Systems → <SAPSID> tree.
The <SAPSID> node is called the system node.
To start and stop the entire system, right-click on the system node and chose Start or Stop.
With the same procedure you can start and stop the instance nodes.
Caution: If you start via the system node by choosing Start, the database is started also. The Stop
procedure, however, does not affect the database, therefore you need to stop the database via the blue
icon, if required (for a SAP DB installation, choose Offline to stop and Online to start the database).
© SAP AG JA310 1-22
Visual Administrator
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Visual Administrator
SAP J2EE Engine Visual Administrator is a graphical tool for administering a J2EE cluster as a whole,
all cluster elements, and all modules running on them. It provides remote monitoring and management of
managers, services, libraries, and interfaces working on each element in a single GUI. The Visual
Internal
Administrator includes functions for:
y Control and Administration of services, managers, interfaces, and libraries
y Deployment of applications on all cluster elements
Only
y Log viewing
Starting the Visual Administrator
The Visual Administrator is not part of the NetWeaver Development Studio.
The start script for the Visual Administrator can be found under the directory
/usr/sap/<SID>/JC<InstanceNumber>/admin.
Use go.bat on Windows systems and go.sh on Unix systems.
Logging on to the SAP J2EE Engine consists of two steps:
y In the first step you have to configure the list of connection properties for connecting the Visual
Administrator tool to the SAP J2EE Engine, or select a previously configured entry that you want to
connect to.
y In the second step, you have to specify the properties of the user and the connection.
© SAP AG JA310 1-23
Telnet
z telnet <hostname> 50008
The Telnet service is accessed from the command line or
from the SAP Management Console
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Telnet
An entire J2EE engine cluster can be remotely administered using a standard Telnet client. Within the
J2EE engine, there is a Telnet Provider Service that must be started before this service can be used.
The default port for the J2EE Engine telnet service is 50008.
Internal
By default, the Telnet shell is opened on the dispatcher. Once you are connected you can access and use
all shell commands available on the different J2EE Engine cluster elements. Use the LSC command to
display all server components with their ID, component name, host, port, and type. The first component
Only
displayed is the current one.
To connect from one component to another, use the JUMP command and specify the ID of the target
element. For example, executing jump 4001 enables the remote administration of a cluster element with
ID 4001. Entering “jump 0” is a shortcut to the first server component in the list.
You can obtain an overview of the available commands with the command MAN.
MAN <command> displays a short explanation of a command.
The commands are grouped into a number of groups that can be activated and deactivated. You can
obtain an overview of the groups with the command ADD. To activate a group of commands, enter the
command ADD <group>.
For instance, you can manually deploy an Enterprise Archive (EAR) file using this command line
interface. But before you can do so, you must activate the deployment command set by first entering
“add deploy”. After this, the “deploy” command is available to you.
© SAP AG JA310 1-24
Config Tool GUI
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Config Tool
The SAP J2EE Engine GUI Config Tool enables configuration of J2EE Engine cluster elements
concerning properties, adding new elements, and exporting the system configuration to the Database.
After installing the J2EE Engine a configtool directory is created, containing a configtool script file.
Internal
Double clicking on this file starts the Config Tool.
y Logging on to the Config Tool
y Config Tool utilities
Only
y Server configuration
y Cluster element properties
y Modifying manager or service of properties
y Creating new elements
y Applying the changes and exporting to an XML file
y Managing secure store data
The start scripts for the ConfigTool can be found in
usr/sap/<SID>/JC<InstanceNumber>/j2ee/configtool
Use the scripts configtool.bat or configtool.sh to start the configTool GUI.
© SAP AG JA310 1-25
SAP Web AS, Administration Tools:
Topic Summary
You should now be able to:
z Describe the technical system landscape and
installation options of SAP Web Application Server
z Use a selection of Administration tools of SAP Web
Application Server
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-26
SAP Component Model: Topic Objectives
After completing this topic, you will be able to:
z Describe the terms development component and
software component
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Java Development Infrastructure
The Java Development Infrastructure supports you during the organization of your Java development
processes.
Internal
y Division into individual components means working with large software projects is easier.
y The Design Time Repository versions the source codes in a central location.
y The Build Service creates components that can be run.
Only
y The Change Management Service supports you in the delivery of software.
© SAP AG JA310 1-27
Component Model
z Products
Collection of various
software components Product version
z Software Components (SCs) *
Software components and * 1 0/1
installation units SC version Release
Group development components 1
Internal
Only
without overlaps
*
z Development Components (DCs) DC version
Development objects for build process 1
Partner
Group development objects
without overlaps *
File version
Use
z Development Objects
Are saved as versioned files in the DTR
SAP
SAP
SAP AG 2004
Partner
Use
SAP Component Model
The SAP Component Model enhances the existing package concept in Java, since this was not sufficient
for the development of complex Java projects because:
y It was not possible to identify dependencies between individual packages without analyzing the source
Internal
code.
y Packages could not be broken down.
y Once classes have been declared as "public", they can be used everywhere. There is no option to
Only
control the fact that specific modules/components can use classes and others cannot.
Component Types
The Component Model from SAP distinguishes the following component types:
y Software Components (SC)
SCs are the smallest installable unit of a SAP Product. They have their own release cycles and
maintenance ranges. They are a superset of:
y Development Components (DC)
These contain individual development objects such as Java packages.
y Component definitions are recorded in files and versioned in the DTR (Design Time Repository).
© SAP AG JA310 1-28
Development Components
z Development Components (DCs)
Container for development objects DC B
Build unit DC C
z Nested DCs
DCs can be nested within
usage
each other (restricted access)
dependency
Internal
Only
z Public parts (pp)
ppA
Part of a DC that can be used
DC A ppX
by other DCs (DC interfacing)
Partner
z Usage dependencies DC X
Indicates that a DC part can be used ppY
by other DCs (during the build process
Use
or during the runtime) DC Y
SAP
SAP
SAP AG 2004
Partner
Use
Development Component
DCs are containers for all types of development object (such as classes, interfaces, table declarations
etc). These objects can be made visible externally using the "public part" of a DC.
Internal
Several pre-configured DC types (such as Web Dynpro, Data Dictionary, Web Services etc) are
available.
Only
© SAP AG JA310 1-29
SAP Component Model: Topic Summary
You should now be able to:
z Describe the terms development component and
software component
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-30
SAP Java Development Environment:
Unit Summary
You should now be able to:
z Use SAP NetWeaver Developer Studio
z Describe the technical system landscape
z Use the Administration Tools of the
Internal
Only
Web Application Server
z Understand the SAP Component Model
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 1-31
Exercise
Chapter: SAP Web AS Administration Tools
Theme: Use SAP Web AS Administration Tools
At the end of this Exercise, you are able to:
• Locate and run an important Administration Tools of the SAP Web
Application Server.
Internal
Only
1 Using Telnet Service
Partner
1-1 Open a connection to the Telnet Administration Service on your Web AS test system.
1-2 Logon as user Administrator.
Use
1-3 Find out which commands are available
1-4 List all active cluster elements (Hint: Use command ‘man lsc’).
SAP
SAP
1-5 Jump to one of the cluster nodes of the J2EE Server.
1-6 Optional: How many free database connections are available at your J2EE Engine?
Partner
Use
2 Using the Visual Administrator
2-1 Open the Visual Administrator tool.
2-2 Log on to the Visual Administrator as user Administrator.
Internal
2-3 Which data sources are configured in the JDBC Connector Service of your J2EE
Engine?
Only
3 Using the Config Tool
3-1 Open the ConfigTool.
3-2 Check on which port the Telnet service for the dispatcher of the J2EE Engine is
configured?
© SAP AG JA310 1-32
Solution
Chapter: SAP Web AS Administration Tools
Theme: Use SAP Web AS Administration Tools
At the end of this Exercise, you are able to:
• Locate and run an important Administration Tools of the SAP Web
Application Server..
Internal
Only
1 Using Telnet Service
Partner
1-1 Open a connection to the Telnet Administration Service on your Web AS system
Use
telnet <hostname> 50008
SAP
SAP
1-2 Logon as Admin user
Partner
Use
Logon to telnet administration
Please ask your instructor for user and password
Internal
Only
1-3 List available commands.
Type command
man
© SAP AG JA310 1-33
1-4 List all active cluster elements (Hint: Use command ‘man lsc’).
Use command Isc
(list all active cluster machines)
1-5 Jump to one the cluster node of the J2EE Server
Internal
Only
man jump
jump
The command jump lists all available cluster
nodes where you can jump
Partner
jump <cluster node of server>
Use
1-6 Optional: How many free database connections are available at your J2EE Engine?
SAP
SAP
man
add dbpool
man
Partner
Use
Show the free database connections fore one
Internal
data source
get_ds
Only
get_free_conn SAPC11DB
© SAP AG JA310 1-34
2 Using the Visual Administrator
2-1 Open the Visual Administrator tool.
Your instructor will provide you with the information, how to start the Visual
Administrator tool.
For a standard installation, the Visual Administrator tool is located in the file system
at
<root> \ usr \ sap \ <J2EE Engine System Name> \ JC<Instance Number> \ j2ee \
admin \ go.bat
2-2 Log on to the Visual Administrator as user Administrator.
Internal
Only
Log on to the J2EE Engine
Please ask your instructor for user and password
Partner
Use
SAP
SAP
2-3 Which data sources are configured in the JDBC Connector Service of your J2EE
Engine?
Show the JDBC Connector Service
Partner
Use
Path:
Server ->Services-> JDBC Connector
Internal
-> DataSources
Only
© SAP AG JA310 1-35
3 Using the Config Tool
3-1 Open the ConfigTool.
Open the ConfigTool
Your instructor will provide you with the
information, how to start the ConfigTool.
For a standard installation, the ConfigTool is
located in the file system at <root> \ usr \ sap \
<J2EE Engine System Name> \ JC<Instance
Internal
Only
Number> \ j2ee \ configtool \ configtool.bat
3-2 Check on which port the Telnet service of the dispatcher of the J2EE Engine is
Partner
configured.
Use
Check the configuration for Telnet service
Dispatcher -> Services -> telnet
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 1-36
Web Dynpro Introduction
Contents:
z Introduction to the Web Dynpro architecture
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-1
Web Dynpro Introduction: Unit Objectives
After completing this unit, you will understand:
z The basic concepts behind Web Dynpro
z The basic architecture of a Web Dynpro Component
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-2
Overview: Topic Objectives
After completing this topic, you will be able to:
z Describe the basic concept behind Web Dynpro.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-3
What is Web Dynpro ?
z A Programming Model for User Interfaces
Defines a standard structure for user interface applications
Derived from the MVC (“model-view-controller”) design pattern
z A Set of Tools for User Interface Design
Focus on graphical modelling
Code is generated from meta-model declarations
Internal
Only
Integrated in SAP NetWeaver Developer Workbench
z A Runtime Environment for Applications
Framework running on SAP’s J2EE server offers common services
Partner
z A Technology for Software Modularization
Components help structure projects and support pattern-based UIs
Use
SAP
SAP
SAP AG 2004
Partner
Use
What is Web Dynpro?
From a technological point of view, SAP’s Web Dynpro for Java is a revolutionary step in the
development of web-based user interfaces. It is completely unlike any design paradigm ever used by
SAP before and represents a quantum leap in the development of web-based, ERP applications.
Internal
What is the Design Philosophy Behind Web Dynpro?
Web Dynpro applications are built using declarative programming techniques based on the Model View
Controller (MVC) design paradigm. That is, you specify what user interface elements you wish to have
Only
on the client, and where those elements will get their data from. All the code to create the user interface
is then generated automatically within a standard runtime framework. This relieves you from the
repetitive coding tasks involved in writing HTML and then making it interactive with JavaScript.
© SAP AG JA310 2-4
Web Dynpro Main Benefits
z Deliver an Enterprise Quality Web Web
Web Development Environment Dynpro Dynpro
minimize coding, maximize design Tools Metadata
separate layout and logic
support arbitrary backend systems
support reuse of components
Web Dynpro Runtime
configuration of UI patterns
J2EE ABAP
support web services and data-binding
Internal
Only
z Achieve Independence
run on multiple platforms
z Improve User Experience
Partner
through a "High Fidelity Web UI"
browser based, zero footprint
screen updates w/o page reloads
Use
client-side dynamics
performance through caching
508 accessibility support
flicker-free screen, minimal refreshes Multi Channel Access
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Main Benefits
Web Dynpro’s main goal is to enable application developers to create powerful Web applications with a
minimum of effort using descriptive tools in a structured design process.
One guiding principle in the Web Dynpro philosophy is: the fewer lines of hand-written code there are in
Internal
the UI, the better. Web Dynpro pursues this goal in two ways.
y Web Dynpro uses a declarative, language-neutral metamodel for defining a user interface. From this
abstract definition, The SAP NetWeaver Development Studio generates the required Java code. Hand-
Only
written code still has its place, but is confined to that required to manipulate the business data, not the
user interface.
y Web Dynpro provides technical features such as support for internationalization, flicker-free
interaction and a clean separation of the business logic and the user interface. This separation is
achieved through a modified implementation of the Model-View-Controller (MVC) design paradigm.
MVC was invented by Trygve Reenskaug in the late seventies and first implemented in the Smalltalk-
80 language.
Since the repetitive tasks of UI coding have been all but eliminated, the developer can 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 of network – an important
feature for collaboration scenarios.
© SAP AG JA310 2-5
Meta-model Declarations vs. Custom Coding
Meta-data
Deployable App
Generated
Compiler
Web Code
Dynpro Generator
Tools Custom
Code
Internal
Only
Meta-model Declarations z Custom Coding
z Guarantees common app design z Guarantees universality
z Good for graphical tool support z Good for data-driven, dynamic apps
Partner
Screen Layout and Nesting Implementation of business rules
Navigation and Error Handling Dynamic screen modifications
Access to services (files etc.)
Use
Data Flow
Componentization Portal eventing
... ...
SAP
SAP
SAP AG 2004
Partner
Use
Metamodel Concept and Declarative Programming
A Web Dynpro application is developed using a declarative programming approach. Within the SAP
NetWeaver Development Studio there 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 code
Internal
is then generated automatically and conforms to a standard architecture known as the Web Dynpro
Framework (WDF).
The WDF allows each controller within a component to have a set of standard hook methods. It is within
Only
these hook methods that any required custom coding can be placed.
In addition to the events provided by the WDF, you can also define your own events for a Web Dynpro
application.
All Web Dynpro applications are constructed from the same basic units. However, through the use of
custom in the standard hook methods, the standard framework can be extended to supply any required
business functionality.
Not all implementation decisions need to be made at design time. It is perfectly possible to implement a
Web Dynpro application in which the appearance of the user interface is decided at runtime. This allows
a highly flexible application to be written without requiring the need to directly write any HTML or
JavaScript.
Web Dynpro application metadata is platform independent. It is therefore possible to develop an
application on one platform and then deploy it on another.
© SAP AG JA310 2-6
Application Scenarios with Web Dynpro
J2EE Web Service ABAP
Backend Provider Backend
Business Business Business
Backend Application
Server Server
Data Data Data
EJB (e.a.) Web RFC enabled
Service Function Modules
RMI SOAP RFC
Internal
Only
J2EE ABAP
Deployed Web Web Dynpro
Deployed Web
Dynpro App Web Dynpro Web Dynpro Web Dynpro
App
Dynpro App Runtime Runtime App
Partner
Conversion
SAP of existing
HTTP Dynpros
NetWeaver
Developer
Use
ABAP Workbench
Studio
Web Dynpro
Application
SAP
SAP Enterprise Portal
SAP
SAP AG 2004
Partner
Use
Application Scenarios with Web Dynpro
A Web Dynpro Model Object can be supplied with information from the following types of backend
system:
y RFC Modules such as BAPI’s in an SAP ABAP backend system. This interface is provided by the
Internal
Adaptive RFC Layer (aRFC).
y Enterprise JavaBeans (EJBs) which encapsulate application logic.
y Web Services
Only
y External XMI models (TogetherSoft / Rational Rose): A UML definition can be imported as an XMI
file with wizard support (Web Dynpro Model Tools).
© SAP AG JA310 2-7
Pattern-based UI Design
z Three levels of UI patterns
Controls: Controls
Atomic elements in the layout,
constitute the look & feel
Components:
Reusable, task-oriented building
Components
blocks
Internal
Only
Floor plans:
Screen layout, interaction and
semantics for a generic
application
Partner
z Consistent User Interfaces Floor plans
faster learning, less training
Use
less specialized knowledge
SAP
SAP
SAP AG 2004
Partner
Use
Pattern-based UI Design
A UI pattern is a generic solution for providing an interface to a user task. Technically, a UI pattern is a
generic, configurable Web Dynpro UI element group that has been built to deal with tasks common to a
number of applications.
Internal
Using UI patterns has the following benefits:
y A unified design both within and across applications
y A strict separation between front end and backend so changes to the UI do not affect the business logic
Only
y More rapid and efficient software development
y Lower development costs
y Reuse
y Reduced maintenance requirements
y Improvements to patterns can be made once centrally
© SAP AG JA310 2-8
Overview: Topic Summary
You should now be able to:
z Describe the basic concept behind Web Dynpro.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-9
Basic Architecture: Topic Objectives
After completing this topic, you will be able to:
z Explain the basic architecture of a Web Dynpro
Component
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-10
Web Dynpro Component Architecture
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains Usage
Components
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
The architecture of a Web Dynpro Component can be divided into four quadrants:
y The horizontal dotted line separates the entities that are visible from outside the component, from
those that are only visible from within the component.
y The vertical dotted line separates the visual entities from the non-visual, or programmatic entities.
Internal
The only parts of a Web Dynpro Component that are visible to the outside world, are the interface
controller and the interface view(s).
y All Web Dynpro components have an Interface Controller.
Only
y There is a one to one relationship between a Window and an Interface View.
y 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 have no visual interface and are known as “faceless”
components.
Within a Web Dynpro component, all controllers are independent programs; however, they all play a co-
operative role. No controller can function in isolation from its parent component.
Notice that Web Dynpro Models stand outside the Component. Models are reusable across multiple
components.
A Web Dynpro Component can declare the use of another Web Dynpro Component. A specific
component usage is then created and the parent component accesses the functionality of the child
component via its component interface controller.
© SAP AG JA310 2-11
Basic Terminology
Root node of a Web Dynpro Project or
Development Component
Root node for all Web Dynpro applications,
models and components
Dictionaries available to the Project or
Development Component
Internal
Only
Configuration, Mimes and Metadata
Partner
Use
This hierarchy is only visible through the Web
Dynpro Explorer perspective
SAP
SAP
SAP AG 2004
Partner
Use
The root node of a Web Dynpro Project or Development Component represents the deployable unit of
coding. This should contain one or more Web Dynpro applications.
The node Web Dynpro is the node under which all Web Dynpro applications, models and components
live.
Internal
Each Project or Development Component has two types of dictionary available to it:
y A Local Dictionary in which all scalar and structured data types are defined.
y A private dictionary per model object.
Only
The folder src is a reference (only display) showing
y Configuration
y Mimes
y Packages (metadata, not generated Java sources)
© SAP AG JA310 2-12
Basic Terminology (2)
Application: Entry point into a Web Dynpro
component, addressed via an URL.
Model: Encapsulates external business
functionality, providing a uniform interface to
remote services.
Generic interfaces implemented by different
Web Dynpro Components
Component: Logical business unit, not
Internal
Only
addressable via an URL
View: Controller possessing a visual interface.
Partner
Window: Defines the visual interface to a Web
Dynpro application.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Component Interfaces
If different Web Dynpro Component need to implement a common interface, then such generic
interfaces are defined as Web Dynpro Compoent Interfaces. The interface contains a visual part
(Interface Views) and a programmatic part (controller and context).
Internal
A Component represents a set of tasks that form a logical business unit. Components can be embedded
within other components and are not addressable via a URL
A View is the only controller type to posses a visual interface. All user interaction with Web Dynpro
Only
applications takes place through view controllers.
Windows
A Window (or more accurately, a “View Assembly”) defines the visual interface to a Web Dynpro
application. A window must contain at least one view, and will implement a component interface view.
There are two things to notice in the graphic above:
y Under the path <Component_name> Æ Component Interface Æ Interface Views, there is the entry
<Component_name>InterfaceView.
y Under the path <Component_name> Æ Windows, the name of the component has been repeated
Despite having different names, <Component_name> and <Component_name>InterfaceView are one
and the same entity. The Window name is programmatic entity referenced by the Web Dynpro
developer, and the Interface View name is the entity referenced by the Web Dynpro Framework.
© SAP AG JA310 2-13
Basic Terminology (3)
Component controller: Automatically
generated master controller for the entire
component.
Component interface: Interface presents to
either the Web Dynpro Framework or the
embedding controller.
Custom controller: Encapsulate functionality
Internal
Only
that is shared by several controllers.
View controller: Provide a visual interface to a
Web Dynpro application.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Custom Controllers
Custom controllers are used to encapsulate units of functionality that are shared by several controllers
and require no direct user interaction. A custom controller is always instantiated as a singleton with
respect to its parent component.
Internal
Custom controllers should be used sparingly!
Before implementing a custom controller, consider carefully whether its presence will simplify or
complicate the overall architecture of your application. Custom controllers should only be added in
Only
situations that will optimize or simplify the architecture of your application.
The interface(s) that this single component presents to either the Web Dynpro Framework or the
embedding controller are defined as Component Interfaces. There is a one to one relationship between
a component interface view and a component window.
View controllers are used to provide a visual interface to a Web Dynpro application. In order for a view
to be seen on the screen, it must be embedded into a Window.
© SAP AG JA310 2-14
Custom Controller Architecture
Other WD Required
Custom Controller
Controllers Controllers
Implementation
Custom Controller
Controller Context Standard
Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Events
Other WD Component
Components Usage
Partner
Use
Created by explicit declaration Created by the
or coding Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Custom Controllers
Custom controllers are the active parts of a Web Dynpro component that do not need any direct
interaction with the user. Such controllers therefore have no visual interface.
Internal
When a Web Dynpro component is created, a special custom controller is created called the Component
Controller. It is this controller that drives the functionality of the entire component.
Only
All custom controllers are instantiated as singletons with respect to their parent component.
Custom controllers are instantiated automatically by the Web Dynpro Framework and the instantiation
order is undefined! Therefore, the coding in a custom controller should make no assumptions about the
existence of any other custom controller.
© SAP AG JA310 2-15
View Controller Architecture
Other WD Required
View Controller
Controllers Controllers
Implementation Layout
Custom Controller
Controller Context Standard
Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Actions
Other WD Component Navigation
Components Usage Plugs
Partner
Use
Created by explicit declaration Created by the
or coding Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro View Controllers
View controllers are the active parts of a Web Dynpro component that handle all aspects of user
interaction. Only view controllers have a visual interface.
Internal
The lifespan of a view controller is determined by its presence in (or absence from) the current window
(The term “View Assembly” may also be used instead of the term “Window”). As soon as a view
controller instance is no longer part of the current view assembly, the Web Dynpro Framework will
Only
automatically garbage collect it.
View controllers are always instantiated as singletons with respect to their parent component. Therefore,
if the same view is embedded multiple times in a view assembly, you will see the same data in each
view.
© SAP AG JA310 2-16
Context Mapping
View Controller Component Controller
Context Root Context Root
SalesOrders SalesOrders
LineItems LineItems
Description Description
Controller
ItemNo Usage ItemNo
Declaration
Price Price
Internal
Only
Quantity Quantity
OrderNo OrderNo
SalesDate SalesDate
Partner
SalesRep SalesRep
LongText LongText
Use
Web Dynpro Component
Mapped node collection Node collection of
SAP
Mapping
SAP
Relationship mapping origin
SAP AG 2004
Partner
Use
Context Mapping
Context mapping allows a context node in one controller to be supplied automatically with data from a
corresponding context node in another controller. This is the primary mechanism for sharing data
between controllers.
Internal
Mapping Terminology
When two controllers within the same component share data through a mapping relationship, this is
known as “Internal Mapping”.
Only
The context node that acts as the data source is known as the “Mapping Origin Node”, and the context
node that is mapped is known as the “Mapped Node”.
There is also a type of mapping known as “External Mapping”, but this will not be dealt with in this
chapter.
Prerequisites
In order for a mapping relationship to be established, the following steps must first be performed:
y A node must exist in the context of the controller acting as the mapping origin. This node need not
have any declared child nodes or attributes.
y The mapping origin controller must be a custom controller.
y The controller containing the mapped node must declare the use of the mapping origin controller as a
required controller.
© SAP AG JA310 2-17
Putting data on the screen: Data Binding
Component controller View controller Context mapping
context context relationship
Data Binding
Root Node Root Node relationship
SalesOrders SalesOrders
LineItems LineItems View layout
Description Description
ItemNo ItemNo
Internal
Only
Price Price
Quantity Quantity
OrderNo OrderNo
Partner
SalesDate SalesDate
SalesRep SalesRep
Use
LongText LongText
Web Dynpro Component
SAP
SAP
SAP AG 2004
Partner
Use
Data Binding
Data binding is the means by which data is automatically transported from a view controller’s context to
a UI element in its layout.
Internal
You may not bind UI elements to context nodes or attributes that occur in some other controller. UI
elements are private to the view controller within which they are declared.
Only
The data binding process decouples the UI element object from the application code within the view
controller. Therefore, in order to manipulate UI element properties, the application code in the view
controller need only manipulate the values of context nodes and attributes to which the UI elements are
bound. The Web Dynpro Framework then manages the following two tasks:
y The transport of data from the context to the UI element during the screen rendering process.
y Repopulating the context from the UI element after data is entered by the user.
© SAP AG JA310 2-18
Windows, View Sets and View Areas
Window
View Set “Identify Customer“ View Set “Case Detail“
Empty
Customer
Search
Interaction
Record
Customer Product
Details Details
Internal
Only
Interaction
History
Customer Product Empty
List List
Partner
Use
z A window is the set of all possible views that can make up a visible screen
z A window can have zero or more view sets embedded within it.
z A view set is subdivided into several view areas each of which can possibly display
one or more views.
z A view area can only display one view at a time.
SAP
SAP
SAP AG 2004
Partner
Use
Windows, View Sets and View Areas
When defining a Window, you are defining three things:
y All the possible views that could exist in the component’s visual interface.
y The layout and position of those views within view sets and view areas
Internal
y The navigation links that exist between different views
You can embed either a single view, or one or more view sets into a window. Each view set in turn is
Only
divided into view areas, each of which can have one or more views or view sets embedded within it.
A view area can only display one view at a time. Navigation links must be defined between 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 plug responds to an
appropriate navigation event.
© SAP AG JA310 2-19
View Assembly
Window
View Set “Identify Customer“
Empty
Customer
Search
Internal
Only
Customer
List
Partner
Use
z The subset of views visible at any one time is known as a “View Assembly”
z Navigation causes either specific views within a view area to be replaced, or can
cause entire view sets within the window to be replaced.
SAP
SAP
SAP AG 2004
Partner
Use
View Assembly
Special asynchronous navigation events are the triggers that cause a view area to contain a particular
view.
Internal
For a given window definition in which multiple views are embedded into view areas, there could be
many permutations of views visible. The permutation that is visible depends on which navigation links
the user follows.
Only
The subset of views visible at anyone time is known as a “View Assembly”.
© SAP AG JA310 2-20
Navigation between views (1)
z To define the navigation between two views, you need to create exit and
entry points for each view using outbound and inbound plugs.
z Only then you can specify the navigation flow using navigation links
Internal
Only
Partner
Double click on Window node or
Use
Choose Open Navigation Modeller
from the context menu
SAP
SAP
SAP AG 2004
Partner
Use
Navigation Modeller
The Navigation Modeller is a Web Dynpro specific, graphical editor in which you can define the
navigation links that exist between the different views of your Web Dynpro Component. The view that
displays the work area of the Navigation Modeller, and within which the individual elements are
Internal
displayed, is called the Diagram View.
The navigation modeller allows you to manipulate the following entities:
y View Sets
Only
y Views
y Inbound and Outbound Plugs
y Navigation Links
Opening the Navigation Modeller
Start the Navigation Modeller either by choosing the context menu entry Open Navigation Modeller for
the window name in the Web Dynpro Explorer or by double clicking on the window name.
© SAP AG JA310 2-21
Navigation between views (2)
Navigation link
Internal
Only
Partner
Outbound plug Inbound plug
z The navigation modeller gives a graphical representation of the
Use
navigation links that exists between the different views in a window.
z The Web Dynpro Explorer shows the same information as a hierarchy
SAP
SAP
SAP AG 2004
Partner
Use
Outbound Plugs
Calling an outbound plug method causes a navigation event to be raised. Navigation events are special,
asynchronous events that are placed into a navigation queue. Only when all the outbound plugs have
been called by all the views in the current view assembly, will the Web Dynpro Framework enter its
Internal
navigation processing phase. Outbound plugs should be named according to the action that caused
navigation away from the current view.
Inbound Plugs
Only
Inbound plugs are special event handler methods that subscribe to navigation events raised when
outbound plugs are fired. Inbound plug methods are called only when the navigation queue is processed.
This will only take place once all the views in the current view assembly have fired their outbound plugs
and no validation errors have occurred that would cause navigation to be cancelled. Inbound plugs
should be named according to the reason for which the view being displayed.
Links
Outbound and inbound plugs are joined together using navigation links created in the Navigation Editor.
Select the Navigation Link tool from the graphical editor, then draw a line from the outbound plug to the
inbound plug. This causes the event handler method represented by the inbound plug to subscribe to the
navigation event raised by the outbound plug.
© SAP AG JA310 2-22
Component Interfaces
z External access to a component’s functionality is provided by
interface controllers.
z Each component has zero or more visual interface views, and
exactly one programmatic interface
z The Interface controller is only ever
instantiated when the component is
z Interface Views are standard Java used as the child of another component.
interfaces implemented by all Windows. z The Web Dynpro Framework never
z The interface view gives any component interacts with a component’s interface
Internal
Only
window a generic interface. controller.
Externally
Interface view
Visible
Internally
Controller
Interface
Partner
Visible
Interface
View
Use
Controller
Implements
Window Component
SAP
Controller
SAP
SAP AG 2004
Partner
Use
The Component Interface
The component interface consists of two visual parts and one programmatic part.
y The interface controller is the programmatic interface that gives a parent component access to the
child component’s functionality. The parent component can call methods in the child’s interface
Internal
controller, and these methods can react to events raised by the parent component.
y The interface view is the standardized mechanism by which all view assemblies can be presented
through the generic Web Dynpro Framework. By means of the interface view, a component’s visual
Only
interface becomes a reusable unit, thus allowing you to embed it into a larger view set.
y A component may have zero or more interface views.
© SAP AG JA310 2-23
Web Dynpro Application
z An application is an entry point into a Web Dynpro component
z An application can be addressed via a URL
z Automatically created with an inbound plug
of type startup called default.
z An application is a URL associated with this
special inbound plug in the interface view.
Internal
Only
Externally
Interface view
Visible
Internally
Controller
Interface
Partner
Visible
Interface
View
Use
Controller
Implements
Window Component
SAP
Controller
SAP
SAP AG 2004
Partner
Use
Web Dynpro Application
A Web Dynpro Application is an entry point into a Web Dynpro Component and is the only Web
Dynpro entity that can be addressed via a URL.
There is often (but not always) a one to one relationship between an interface view and an application.
Internal
In the same way that the functionality in an ABAP module pool can be accessed by defining multiple
transaction codes, so the functionality of a single Web Dynpro component can be accessed by defining
multiple applications.
Only
Application definition
In order to define a Web Dynpro application, you must specify
y The component to be invoked. This component is then known as the “root” component,
y Which interface view of the root component will be used as the initial view assembly,
y Which inbound plug will act as the entry point for the nominated interface view (this inbound plug
must have the Startup check box selected)
© SAP AG JA310 2-24
Web Dynpro Component Usage
Web Dynpro Application Web Dynpro Application
http://<host>:50000/webdynpro/dispatcher/App1 http://<host>:50000/webdynpro/dispatcher/App2
Web Dynpro Application
http://<host>:50000/webdynpro/dispatcher/App3
Component A
Internal
Only
Component D Component E Component B Component C
Usage Instance Usage Instance Usage Instance Usage Instance
Partner
z Comp. B, C, D: Child components with respect to comp. A
Use
z Comp. E: Child component with respect to comp. D
z Comp. A, B, E: Accessible as distinct Web Dynpro Applications
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Component Usage
A Web Dynpro component is both the unit of development and, from an application development point
of view, the unit of reuse. A component should be written to represent an atomic unit of business
processing. These units can then be reused as required in order to build up the functionality of an entire
Internal
application.
After a suitable usage declaration has been made, any Web Dynpro Component can act either as a parent
component (embedding the functionality of some other component), or it can act as a child component
Only
(being embedded by another component).
Advantages of a component based architecture:
y The Web Dynpro application is divided into interacting elements.
y The structure of a large Web Dynpro application is clearer.
y Working with reusable elements saves development costs and time.
y The parent Web Dynpro component does not need to have any knowledge of the internal structure of
the child component; it need only know how to drive the child component’s interface.
© SAP AG JA310 2-25
Web Dynpro Models
Externally Visible
Controller
Internally Visible
Interface
Interface z Created by the Model
View Wizard
Controller
z Components use
declarations
models via an explicit
Usage
Component
usage declaration
Controller
Internal
Only
Components
Usage z Model Types:
declarations
Custom Controller
Adaptive RFC
Model 1
Web Service
View
Partner
Controller Enterprise Services
Model 2 …
Use
Component Models
Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Models
A Web Dynpro Model encapsulates a variety of functionality that is external to the Web Dynpro
Framework (e.g. a Web Service or a BAPI call).
Internal
By means of the Common Model Interface (CMI) all the different types of external services are given a
uniform interface. It is now of little importance for the Web Dynpro application to know how the model
functions internally. All that is important is that the Web Dynpro controller is able to supply the correct
Only
information to drive the model’s functionality.
Web Dynpro Models are independent from any particular component.
© SAP AG JA310 2-26
Basic Architecture: Topic Summary
You should now be able to:
z Explain the basic architecture of a Web Dynpro
Component.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-27
Web Dynpro Introduction: Unit Summary
You should now be able to understand:
z The basic concept behind Web Dynpro.
z The basic architecture of a Web Dynpro
Component.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 2-28
Exercise
Chapter: Web Dynpro Introduction
Theme: Create a simple Web Dynpro Application
At the end of this Exercise, you will be able to:
• Create and run a simple Web Dynpro application using the SAP
NetWeaver Developer Studio.
Internal
Only
1 Development Objectives
Partner
The first exercise is a version of the popular “Hello World” program.
You will place a UI element onto the view layout that contains the hard coded value of
Use
“Welcome to Web Dynpro”. This text will then be displayed on the user’s browser.
SAP
SAP
2 Result
After this exercise is complete, you
should see the result shown on the left.
Partner
Use
Internal
Template Solution: Only
WD Project: JA310_WD_Introduction
Application: Ex1App
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro Perspective.
© SAP AG JA310 2-29
4 Overview: Developing
4-1 Create a new Web Dynpro project called JA310_Ex_1. Without changing any other
values, press Finish.
4-2 In the Web Dynpro project, create a new component having the following values:
Name: Ex1Comp
Package: com.sap.training.wd.ex1
Window Name: Ex1Comp
View Name: Ex1View
4-3 In the Web Dynpro Explorer locate the view controller Ex1View under the Views node.
- Open the view editor and select the Layout tab.
- In the outline view, select the RootUIElementContainer.
Internal
Only
You should see its properties appear in the bottom right tabbed window. If the
properties do not appear after the UI element has been selected, then click on the
Properties tab in the bottom right window.
4-4 Change the layout property of the RootUIElementContainer from FlowLayout to
MatrixLayout.
Partner
4-5 Now in the Outline view select the element DefaultTextView and change the design
property from standard to header1.
Use
Notice that the appearance of the text changes.
4-6 In the Outline view again, right mouse click on RootUIElementContainer. - Select
Insert Child.
- From the Type drop down list, select TextView. The Id of the field will
SAP
SAP
now default to TextView1.
- Press Finish.
Notice that although a new TextView UI element has been added to the hierarchy
shown in the outline view, no visible change has taken place on the view layout. This
Partner
Use
is because the UI element has no text to display.
4-7 In the Outline view, select TextView1.
- Change the text property to Welcome to Web Dynpro.
Notice that the text now becomes visible, but it is to the immediate right of the text
Internal
Ex1View. This text is in the wrong place, so we will move it to the start of the next
row.
Only
- Change the layoutdata property of TextView1 from MatrixData to
MatrixHeadData.
- Change the design property from standard to header2.
4-8 Save your metadata by clicking on the toolbar icon that contains a circle with the letter
M and a floppy disk.
4-9 Lastly, we must create an application so that we can access the Web Dynpro
component via a URL.
- In the Web Dynpro Explorer, right mouse click on the Application
node immediately under the Web Dynpro node.
- Select Create Application from the context menu. Create the
application having the following attributes:
Name: Ex1App.
Package: com.sap.training.wd.ex1
© SAP AG JA310 2-30
5 Overview: Building, Deploying, and Running
Deploy and start the application: Right mouse click on the newly created application Ex1App
and select Deploy new archive and run. This will first save your metadata, then rebuild the
project, then create an Enterprise Archive file, and finally deploy it to the defined J2EE
engine.
When you deploy an application for the first time since starting the NetWeaver Design
Studio, you will be asked for the Software Deployment Manager password. The default
value is sdm.
Your browser should now show the following display:
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 2-31
Solution
Chapter: Web Dynpro Introduction
Theme: Create a simple Web Dynpro Application
4 Overview: Developing
Internal
Only
4-1 Create a new Web Dynpro project called JA310_Ex_1.
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
4-2 In the Web Dynpro project, create a new component.
Open the tree structure of the new project
and find the Web Dynpro Components node.
Right mouse-click on this node and select
Create Web Dynpro Component from the
pop-up menu.
© SAP AG JA310 2-32
In the next pop-up screen, give the new
component the following values:
Name: Ex1Comp
Package: com.sap.training.wd.ex1.
Go to the View Name field and change the
view name from Ex1CompView to
Ex1View.
Internal
Only
Partner
4-3 In the Web Dynpro Explorer locate the view controller Ex1View under the Views node.
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 2-33
4-4 Change the layout property of the RootUIElementContainer from FlowLayout to
MatrixLayout.
With the Layout tab selected, in the bottom left
corner of the NetWeaver Design Studio, you will
see the Outline view. At the moment, there are
only the elements RootUIElementContainer and
DefaultTextView
Select RootUIElementContainer and you should
Internal
Only
see its properties appear in the bottom right tabbed
window. If the properties do not appear after the
UI element has been selected, then click on the
Properties tab in the bottom right window.
Partner
Change the layout property from FlowLayout to
MatrixLayout
Use
4-5 Now in the Outline view select the element DefaultTextView and change the design
SAP
SAP
property from standard to header1.
Partner
Use
Internal
Only
4-6 In the Outline view again, right mouse click on RootUIElementContainer and select
Insert Child….
Notice that although a new TextView UI element
has been added to the hierarchy shown in the
outline view, no visible change has taken place on
the view layout. This is because the UI element
has no text to display
© SAP AG JA310 2-34
4-7 In the Outline view, select TextView1 and change the text property to Welcome to Web
Dynpro….
This text is in the wrong place, so we will move it
to the start of the next row.
Internal
Only
Change the layoutdata property of TextView1
from MatrixData to MatrixHeadData.
Notice that the text now jumps down to the start of
Partner
the next row.
Use
Change the design property from standard to
header2.
SAP
SAP
4-8 Save your metadata by clicking on the toolbar icon that contains a circle with the letter
M and a floppy disk.
Partner
Use
Internal
Only
4-9 Lastly, we must create an application so that we can access the Web Dynpro
component via a URL.
In the Web Dynpro Explorer, right mouse click on
the Application node immediately under the Web
Dynpro node. Select Create Application from the
context menu.
© SAP AG JA310 2-35
Name the application Ex1App.
Press the Browse button to the right of the
Package input field and select
com.sap.training.wd.ex1 from the list.
All other values can be defaulted, so simply press
Finish (this will also cause the Diagram View
editor to open).
Internal
Only
5 Overview: Building, Deploying, and Running
Partner
Deploy and start the application.
Right mouse click on the newly created
Use
application Ex1App and select Deploy new archive
and run. This will first save your metadata, then
rebuild the project, then create an Enterprise
SAP
Archive file, and finally deploy it to the defined
SAP
J2EE engine.
Partner
Use
When you deploy an application for the first time
Internal
since starting the NetWeaver Design Studio, you
will be asked for the Software Deployment
Manager password. The default value is sdm.
Only
© SAP AG JA310 2-36
Web Dynpro Controllers
Contents:
z Model View Controller – The roots of Web Dynpro
z The architecture of the different Web Dynpro Controllers
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 3-1
Web Dynpro Controllers: Unit Objectives
After completing this unit, you will:
z Have further understanding of the Model View
Controller (MVC) design paradigm.
z Understand the different kinds of Web Dynpro
Internal
Only
controllers and what they are used for.
z Understand the controller methods that are
available to you for application coding.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 3-2
Model View Controller (MVC)
z Original MVC design for decoupling presentation and application logic
Binds the user and business Generates the application
interaction layers together. data without caring how it
All intermediate processing Model will be displayed.
is performed here.
Internal
Only
Business Interaction Layer
User Interaction Layer
Request
Controller
Response
Partner
Visualizes the application
data without caring how it
was generated.
Binding Layer
Use
View
SAP
SAP
SAP AG 2004
Partner
Use
The roots of Web Dynpro – Model-View-Controller
SAP’s Web Dynpro is built on the foundation of the Model-View-Controller (MVC) design paradigm
originally invented by the Norwegian software designer Trygve Reenskaug (pronounced “TRIG-vuh
RAINS-cow”) whilst working at Xerox PARC in the late seventies. The first implementation of this
Internal
design paradigm was with the release of the Smalltalk-80 programming language.
MVC was a revolutionary design paradigm because it was the first to describe software components in
terms of:
Only
y The functional responsibilities each should fulfil.
y The message protocols to which each component should respond.
SAP has modified and extended the original MVC specification in order to create the Web Dynpro
toolset.
© SAP AG JA310 3-3
Web Dynpro Component Architecture
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains
Components
Usage
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro’s use of the MVC design paradigm
SAP has made several important changes to the standard MVC design paradigm:
y Standard MVC allows a model to directly notify a view that it has changed. This has not been
implemented in Web Dynpro.
Internal
y Standard MVC allows for nested view controllers. This is not permitted in Web Dynpro.
y SAP has extended the design concept by adding an aggregation unit known as a component. The
component is both the unit of application development and application reuse.
Only
© SAP AG JA310 3-4
Where are the custom controllers?
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains
Components
Usage
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro controller principles
Two types of controller exist within a Web Dynpro component: “custom” and “view”.
y Custom controllers have no visual interface, whereas view controllers do.
y At runtime, all controller instances are singletons with respect to their parent component.
Internal
y All controllers are independent programs yet none function in isolation from the other controllers in
the component.
y All controllers (apart from an Interface View Controller) store their runtime data in a hierarchical data
Only
storage area known as the Context.
y Unless an explicit controller usage is declared, all the data in a controller’s context is private.
y A custom controller may share the data in its context, but a view controller may not.
© SAP AG JA310 3-5
Where are the view controllers?
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains
Components
Usage
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro controller principles
Two types of controller exist within a Web Dynpro component: “custom” and “view”.
y Custom controllers have no visual interface, whereas view controllers do.
y At runtime, all controller instances are singletons with respect to their parent component.
Internal
y All controllers are independent programs yet none function in isolation from the other controllers in
the component.
y All controllers (apart from an Interface View Controller) store their runtime data in a hierarchical data
Only
storage area known as the Context.
y Unless an explicit controller usage is declared, all the data in a controller’s context is private.
y A custom controller may share the data in its context, but a view controller may not.
© SAP AG JA310 3-6
Common Features: Required Controllers
Controller
Other WD Required
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Events
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Common features for all controllers: Required Controllers
In order for information to be shared between different controllers, one controller must declare the use of
another controller. The most frequent requirement for this kind of data sharing is when you wish to
create a mapped context node. This is where a context node in one controller references the data in the
Internal
context node of another controller.
General points on controller usage
y A view controller can declare the use of a custom controller and a custom controller can declare the
Only
use of another custom controller.
y You may not specify the name of a view controller as a required controller as this would violate good
MVC design principles. A view controller should be written such that it is responsible for nothing
more than the display of data and user interaction. A view controller is not responsible for generating
the data it displays: that is the role of a custom controller.
© SAP AG JA310 3-7
Common Features: Model Usage
Required
Controller
Other WD
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Common features for all controllers: Model Usage
Model objects stand outside the scope of any individual Web Dynpro component, but within the scope of
the Web Dynpro Project or Development Component.
Internal
After a model has been created, it’s use must be explicitly declared on a per component basis.
Only
© SAP AG JA310 3-8
Common Features: Component Usage
Required
Controller
Other WD
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Common features for all controllers: Component Usage
The Web Dynpro component is the unit of application reuse. Therefore, if you want to make use of the
functionality within another component, you can declare the use of that component.
Internal
The component usage instance must be given a new name in the same way that an instance of a Java
class has a different name from the class being instantiated.
Only
Lifespan
The lifespan of a component usage instance cannot exceed the lifespan of the parent component.
When a component usage instance is created, the lifespan property must be given a value. If this is set to
“createOnDemand”, then the Web Dynpro Framework will create the component usage instance
automatically. If however, it is set to “manual”, then it is the responsibility of the application
programmer to explicitly instantiate the component usage instance.
© SAP AG JA310 3-9
Common Features:
Standard Controller Hook Methods
Required
Controller
Other WD
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Code Implementation
Each Web Dynpro controller is a separate Java program. The definition of these programs is generated
automatically when a new component or controller is declared. The source code, that implements these
controllers is generated automatically. You are provided with various points within the controller code
Internal
where you may add your own coding.
Any attempt to entering coding outside the designated areas will result in that code being lost when the
controller is regenerated.
Only
Controller code is regenerated every time the “Implementation” tab is entered.
Standard Hook Methods
In every controller, there are certain standard methods that are always present. At controller creation
time, these methods are empty and can hold any coding the developer wishes to place within them.
The application developer is not permitted to deleted or rename any of these standard hook methods. If
any attempt is made to do this, the changes will be lost when the coding is regenerated.
© SAP AG JA310 3-10
Standard Hook Methods for all controllers
public void wdDoInit() {
//@@begin wdDoInit()
//@@end
}
Internal
Only
public void wdDoExit() {
//@@begin wdDoExit()
//@@end
}
Partner
z All controllers have these two standard hook methods.
Use
z Irrespective of whether you choose to implement code within these methods,
each will be called once during the controller’s lifecycle.
SAP
SAP
SAP AG 2004
Partner
Use
wdDoInit()
Standard hook method for all Web Dynpro controllers. This method is only called once during the
lifecycle of a controller. All your initialization code should go here since this method is called
immediately after the controller has been instantiated.
Internal
The application developer has no access to the Java constructor of any Web Dynpro controller class. All
Web Dynpro controllers have a constructor with a signature of {nctl}(IPrivate{nctl} wdThis)
Only
where {nctl} is the name of the controller.
wdDoExit()
Standard hook method called at the end of a controller’s life cycle. All your cleanup code should go
here.
This method is called immediately before the controller’s lifecycle comes to an end.
© SAP AG JA310 3-11
Common Features: Controller Instance Methods
Required
Controller
Other WD
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Controller instance methods
This information applies to both view and custom controllers.
For all controllers (except for an Interface View Controller), you can create an instance method by
declaring the method name and its parameters in the “methods” tab of the controller editor window.
Internal
Important: Instance methods created through the NetWeaver Development Studio may not be
overloaded. This is because the Web Dynpro metamodel is designed to be independent of the
Only
implementation language. Since the Web Dynpro toolset has also been developed for use in Object
Oriented ABAP which does not support method overloading, this feature has not been implemented in
Web Dynpro for Java.
© SAP AG JA310 3-12
Member Variables and Utility methods
/*
* The following code section can be used for any Java code that is
* not to be visible to other controllers/views or that contains
* constructs currently not supported directly by Web Dynpro (such
* as inner classes or member variables etc.). </p>
*
* Note: The content of this section is in no way managed/controlled
* by the Web Dynpro Designtime or the Web Dynpro Runtime.
*/
Internal
Only
//@@begin others
//@@end
z At the end of the source code listing for every controller, there is a section
Partner
for your member variables and static methods.
Use
SAP
SAP
SAP AG 2004
Partner
Use
//@@begin others … //@@end
y This comment block delimits the area in which you can place all your member variable declarations
and static method definitions. It is always found at the bottom of all controller implementations.
y Code entered here will not be visible to other controllers!
Internal
y Since the view controller’s standard hook method wdDoModifyView() is static, if you want it to
call any utility methods these methods must also be static. Such static, user defined method can only
be defined here!
Only
© SAP AG JA310 3-13
Controller Imports
// IMPORTANT NOTE
// ALL_ IMPORT STATEMENTS MUST BE PLACED IN THE FOLLOWING SECTION
// ENCLOSED BY @@begin imports AND @@end. FURTHERMORE, THIS SECTION
// MUST ALWAYS CONTAIN AT LEAST ONE IMPORT STATEMENT (E.G. THAT FOR
// IPrivateDynamicsAppInterface).
// OTHERWISE, USING THE ECLIPSE FUNCTION "Organize Imports"
// FOLLOWED BY A WEB DYNPRO CODE GENERATION (E.G. PROJECT BUILD)
// WILL RESULT IN THE LOSS OF IMPORT STATEMENTS.
Internal
Only
//@@begin imports
import com.sap.wd.dynamics.wdp.IPrivateDynamicsAppInterface;
//@@end
Partner
z Unresolved Java class names can be added automatically by using the
Use
Eclipse “Organize Imports” function.
SAP
SAP
SAP AG 2004
Partner
Use
Controller Imports
y Standard import statements are at the top of all controller implementations.
y The code generator places all import statements here.
y If you reference a class that does not yet have an import statement, then use the Eclipse function
Internal
Organize Imports to generate the necessary import statements for you.
Only
© SAP AG JA310 3-14
Controller Shortcut Variables
private final IPrivate{nc} wdThis;
private final IPrivate{nc}.IContextNode wdContext;
private final IWDViewController wdControllerAPI;
private final IWDComponent wdComponentAPI;
public {nc}(IPrivate{nc} wdThis) {
this.wdThis = wdThis;
this.wdContext = wdThis.wdGetContext();
Internal
Only
this.wdControllerAPI = wdThis.wdGetAPI();
this.wdComponentAPI = wdThis.wdGetAPI().getComponent();
}
z Within any Web Dynpro controller, three shortcut variables are always
Partner
present, whose values are all derived from the member variable
wdThis.
z The member variable wdThis is populated from a parameter of the same
Use
name, passed in by the Web Dynpro Framework when the controller is
instantiated.
SAP
SAP
SAP AG 2004
Partner
Use
wdThis
wdThis is the Web Dynpro specific self reference and should be used in preference to the standard Java
self reference of this. wdThis is a reference to the current controller’s IPrivate{nctl} interface
and represents all the functionality implemented in the generated class Internal{nctl}. This gives
Internal
you access to standard Web Dynpro functionality such as logging, validation, and parameter mapping.
The only situation in which the use of the standard Java self reference this is appropriate is, when you
Only
wish to make explicit reference to declarations made between the comment markers //@@begin
others and //@@end. Any variables or methods declared here are invisible to the Web Dynpro
Framework.
wdContext
wdContext is the reference to the controller’s context root node, and thus to the entire context.
wdControllerAPI
wdControllerAPI is the reference to the API of the current controller – be it a custom controller or a
view controller.
wdComponentAPI
wdComponentAPI is the reference to the API of the component controller to which this controller
belongs. Remember that the component controller is considered hierarchically superior to all other
controllers in the component.
If this variable is used from within the component controller itself, then wdComponentAPI and
wdControllerAPI will point to the same object.
© SAP AG JA310 3-15
Custom Controllers
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains
Components
Usage
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
Custom controllers
These are the internal building blocks of a Web Dynpro component and have no user interface. They
are only to be used when some unit of functionality is required by several other controllers. For
instance, a custom controller could be used, when a BAPI is called, and the information returned requires
Internal
some sort of intermediate processing before it can be displayed. This custom controller could then be
declared for use by several different view controllers.
Only
Do not create a custom controller simply because you can! Only use one where its presence will simplify
or optimize the component’s architecture.
Component Controller
The component controller is a special custom controller that is automatically created 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 exists and are instantiated
automatically by the Web Dynpro framework. After the component controller has been instantiated, the
order in which any subsequent custom controllers are instantiated is undefined.
An Interface controller exists for as long as the component usage instance exists.
© SAP AG JA310 3-16
Standard Hook Methods – Component controller
public void wdDoPostProcessing(boolean isCurrentRoot) {
//@@begin wdDoPostProcessing()
//@@end
}
Internal
Only
public void wdDoBeforeNavigation(boolean isCurrentRoot) {
//@@begin wdDoBeforeNavigation()
//@@end
}
Partner
z Only a custom controller has these hook methods.
Use
SAP
SAP
SAP AG 2004
Partner
Use
wdDoPostProcessing()
This standard hook method is found only in component controllers.
In complex Web Dynpro applications, it is possible that the data from multiple components must be
validated before the next step in the business process can be taken. This method has been implemented
Internal
in order for cross component validation to take place.
wdDoBeforeNavigation()
This standard hook method is found only in component controllers.
Only
Whenever an outbound plug is fired from a view controller, a navigation event is raised. It is perfectly
possible for each view in a viewset to fire an outbound plug; therefore, all navigation events are placed
into a queue and are only processed once all the views in the current view assembly have been
processed. The wdDoBeforeNavigation() method is called just before the Web Dynpro
Framework processes the events in the navigation queue. This allows you to implement your own coding
to do such things a navigation event prioritisation etc.
The isCurrentRoot parameter
When a component‘s interface view is nominated to be the initial screen seen by the user, then the
component containing that interface view is known as the root component. Since the
wdDoPostProcessing() method can be found in all component controllers, it is necessary to
identify whether the current invocation occurs in the component controller of a root component or not.
© SAP AG JA310 3-17
Custom Controllers – Event Handlers
Required
Custom Controller
Other WD
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Methods Root Node
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Events
Other WD Component
Partner
Components Usage
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
Custom Controller Events
Web Dynpro events are synonymous with events in the Java world. Using your design time declarations,
the Web Dynpro Framework will automatically manage the definition, triggering and handler
subscription to such events for you. You also have the additional option of dynamic event subscription at
Internal
runtime.
A typical use of such events is the invocation of processing in a view controller after processing in the
Only
component controller has been completed. This can be achieved when a method in the view controller
subscribes to an event raised by the component controller.
Important: If two or more methods subscribe to the same event, then the order in which they will be
executed is undefined.
Events can only be defined in custom controllers.
© SAP AG JA310 3-18
View Controllers
Externally
Visible
Interface view
Controller
Interface
Internally
Visible
Interface
View
Controller
Implements
Usage declarations
Window Component
Internal
Only
Controller
Contains
Components
Usage
declarations
Custom Controller
Model 1
Partner
View View
Layout Controller
Use
Model 2
W e b D y n p r o C o m p o n e n t Models
Visual Entities Programmatic Entities
SAP
SAP
SAP AG 2004
Partner
Use
View controllers
A view controller is visual building block of a Web Dynpro component and is designed to handle all
aspects of data display and user interaction.
Interface View Controller
Internal
Interface view controllers are very similar to view controllers – but with an important restriction. An
interface view controller is executed as a Java interface by the calling controller (usually the Web
Dynpro Framework). Consequently, an interface view controller has neither its own context, nor any of
Only
the standard hook methods.
Lifespan
A view controller’s lifespan parameter can have the values When Visible or Framework Controlled. A
view instance will be created either because it is the default view in a view area; or when the first
navigation request to that view is encountered. There are three situations is which the view instance can
be deleted.
y If When Visible is selected, then the view will be deleted when a navigation event replaces the current
view area with some other view, and the view is no longer part of the current view assembly.
y If Framework Controlled is selected, then the view will be deleted when there is no further use for the
view. This will never occur whilst the view is part of the current view assembly.
y Finally, a view controller will never exist for longer than the lifespan of its parent component
controller.
© SAP AG JA310 3-19
Standard Hook Methods – View controllers
public static void wdDoModifyView(IPrivate{nv} wdThis,
IPrivate{nv}.IContextNode wdContext,
IWDView view,
boolean firstTime) {
//@@begin wdDoModifyView
//@@end
}
Internal
Only
z Only a view controller has this hook method.
z This method will only be called if:
- The view is part of the current view assembly and this is the first
time the view is required, or
Partner
- The view is part of the current view assembly and an action
belonging to the same view controller has been processed.
Use
SAP
SAP
SAP AG 2004
Partner
Use
wdDoModifyView()
This Standard Hook method is called just before the view layout is rendered. It is the only method in
which the programmer is allowed direct access to the UI element objects themselves.
Internal
It is a static method to prevent programmers from storing references to UI elements in the view
controller class – this would violate the principles of good MVC design!
Only
Notice in above code sample that the name of the view controller has been generalised to {nv}. This
means the parameters wdThis and wdContext are of type IPrivate{nv}. Obviously, when you
edit this method in the NetWeaver Development Studio, you will see the name of your view controller,
not {nv}.
The firstTime parameter is a boolean value that lets you know if the screen is being rendered for the
very first time, or re-rendered in response to an Action event.
© SAP AG JA310 3-20
View Controllers – Action Handlers
Required
View Controller
Other WD
Controllers Controllers
Implementation Layout
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Actions
Other WD Component Navigation
Partner
Components Usage Plugs
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
View Controller Actions
An action is conceptually the same as an event, however there are some specific implementation
differences:
y An action can only be defined in a view controller
Internal
y 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 found only in a view controller.
y Many different UI elements are able to trigger an action, e.g, the onAction event of a button UI
Only
element.
© SAP AG JA310 3-21
View Controllers – Navigation Plugs
Required
View Controller
Other WD
Controllers Controllers
Implementation Layout
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Actions
Other WD Component Navigation
Partner
Components Usage Plugs
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
View Controller Navigation Plugs
In order for navigation to take place between different Web Dynpro view controllers, special navigation
events and navigation event handlers have been created called plugs.
Internal
Outbound plugs
A navigation event is raised when an outbound plug is fired.
Only
Using the generic name {npo} for an outbound plug, its declaration will cause a method to be generated
in the view’s component controller called wdFirePlug{npo}().
Inbound plugs
An inbound plug is the navigation event handler that will respond when the fired event.
Using the generic name {npi} for an inbound plug, its declaration will cause a method to be generated
in the view’s component controller called onPlug{npi}().
Navigation Links
A link defines which onPlug{npi}() methods will subscribe to the navigation event raised when
method wdFirePlug{npo}() is called.
© SAP AG JA310 3-22
Web Dynpro Controllers: Topic Summary
You should now be able to:
z Understand the different kinds of Web Dynpro
controllers and what they are used for.
z Understand the controller methods that are available
to you.
Internal
Only
z Understand the life-cycle of the different Web
Dynpro controllers.
z Use the “short cut” member variables provided
Partner
within each Web Dynpro controller.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 3-23
Web Dynpro Controllers: Unit Summary
You should now be able to:
z Understand the basic concept of the Model View
Controller (MVC) paradigm.
z Understand the different kinds of Web Dynpro
controller and what they are used for.
Internal
Only
z Understand the various standard hook methods
that are available to you.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 3-24
The Context At Design Time
Contents:
z The Structure of the Context
z Context Mapping
z Internal mapping
z External mapping
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-1
The Context At Design Time: Topic Objectives
After completing this topic, you will be able to:
z Use the context editor
z Understand the structure of the context
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-2
The Context - The Heart of a Controller
Controller
Other WD Required
Controllers Controllers
Implementation
Controller
Custom Standard Context
Controller Interface
Hook
Root Node
Methods
Models Model Usage Instance
Methods
Internal
Only
Model Model
Object Object
Other WD Component
Components Usage
Partner
Use
Created by explicit declaration or coding Created by the Web Dynpro Framework (WDF)
SAP
SAP
SAP AG 2004
Partner
Use
The Context
Every Web Dynpro controller (except an interface view controller) has exactly one hierarchical data
storage structure known as a context. The data held in the context exists only for the lifespan of the
controller. Once the controller instance has been terminated, all data held within its context is lost.
Internal
Context structure
The structure (I.E., the metadata) of a context will typically be defined at design time; however, at
runtime, it is perfectly possible not only to modify the contents of the context, but also to modify its
Only
structure.
Data visibility
Unless declared to be otherwise, all runtime data within a controller’s context is private to that
controller.
Sharing data between different controllers
Information held in the context of a custom controller can be made accessible to the context of another
controller (view or custom) by a technique known as context mapping. Using this technique, two or
more controllers can access the same runtime data. This is the primary mechanism for sharing data
between controllers within a single component.
It is not permitted for a view controller to share its context data.
© SAP AG JA310 4-3
The Context Editor
1) Open a controller (view or
custom) using the Edit option
from the pop-up menu
2) Choose the Context tab.
Internal
Only
Partner
Use
3) Make the Properties View
visible to show the properties of
the selected Context elements.
SAP
SAP
SAP AG 2004
Partner
Use
Context Editor
The Context Editor is a Web Dynpro specific graphical editor that shows the hierarchical structure of a
controller’s context. Using the Context Editor you can create the various different nodes and attributes
from which a context is constructed.
Internal
Important: You should always have the Properties View open when you edit the context because there
are certain properties that will critically affect the behaviour of the context at runtime (namely,
Only
Cardinality and Singleton). If these properties are incorrectly set, then at runtime you can arrive at the
false impression that data is missing from the context!
© SAP AG JA310 4-4
Context Structure – Design Time (1)
Right mouse Value Node
click on the
Context Root Value Attribute
Node to use the
pop-up menu. Model Node
Model Attribute
Context Root Node
Internal
Only
z Value Node:
Stores runtime data or references to runtime data stored in value nodes of other
Partner
controllers
Metadata description declared manually or derived from a Java Dictionary Structure
z Model Node:
Use
Stores references to model objects that hold the actual runtime data.
Must be bound to a model object. The model object then supplies all the metadata
necessary for the context to have a full description of the data it holds.
SAP
SAP
SAP AG 2004
Partner
Use
Context Structure
All controller contexts are constructed from a hierarchical arrangement of entities known as nodes and
attributes. A context always has a parent node known as the Root Node. The root node is created
automatically when the controller is initialised and always has the same properties.
Internal
Important: The context root node may not be deleted or modified in any way!
Nodes
A context node is the main abstraction class used for runtime data storage within the Web Dynpro
Only
Framework. Context nodes are arranged hierarchically and are permitted to have children. The node may
have attributes or other nodes as children.
All the child entities of a node are aggregated into a unit known as an element. A node can then be
thought of as a collection of such elements in the same way that a table is a collection of rows.
The maximum and minimum number of elements permitted in a node collection is controlled by the
cardinality property.
All nodes contain an element collection, even if the maximum number of elements within the collection
is limited to one.
Attributes
An attribute is a hierarchical entity within the context that is not permitted to have children. A context
attribute cannot exist without being the child of some parent node – be it the context root node itself, or
some other node.
© SAP AG JA310 4-5
Context Structure – Design Time (2)
Node SalesOrders is an independent
Context Metadata node because it has the context root as
its immediate parent.
Context Root
SalesOrders
LineItems Node LineItems is a dependent node
because it has node SalesOrders as
Description its immediate parent.
ItemNo
Internal
Only
Price
z Any node or attribute that has the
Quantity
context root node as its immediate
OrderNo
parent, is known as an independent
SalesDate node or attribute.
Partner
SalesRep z Any node or attribute that has some
LongText other node as its immediate parent, is
Use
known as a dependent node or
attribute.
Design time
SAP
SAP
SAP AG 2004
Partner
Use
Context Terminology
The nodes or attributes that have the context root as their immediate parent are referred to as being
independent because their existence is independent of any developer action. Any such nodes or
attributes will automatically exist at runtime because their parent node (the context root node) is
Internal
guaranteed to contain exactly one element.
However, nodes or attributes that have some other node as their parent are referred to as being
Only
dependent because they must be created by specific application code. In other words, their existence is
dependent upon you, the developer, writing the appropriate code to instantiate these objects.
© SAP AG JA310 4-6
Context Structure – Design Time (3)
Context Metadata
Node Metadata (c=cardinality, s=singleton)
Context Root (c=1..1, s=true)
IWDNodeInfo object
SalesOrders (c=0..n, s=true) Attribute Metadata (data type)
LineItems (c=0..n, s=false) IWDAttributeInfo object
Description (string) A node collection
ItemNo (int)
Internal
Only
Price (decimal)
z All context nodes are collections.
Quantity (decimal)
z A node collection is composed of
OrderNo (int)
elements, where an element is an
SalesDate (date)
Partner
aggregation of the node’s immediate
SalesRep (string) children (attributes and/or other nodes).
LongText (string) z The cardinality property controls the
Use
number of elements a node collection
may hold at runtime.
Design time
SAP
SAP
SAP AG 2004
Partner
Use
The Context at design time
At design time, you are creating the metadata structure within which the runtime data will live. The
diagram above gives the impression that the context structure is a flat, two dimensional tree, much like
the display of directories and files shown in the Windows™ Explorer. However, all context nodes are
Internal
collections, so there could potentially be multiple instances of each child node and attribute within a
node’s collection.
The Cardinality Property
Only
Every context node has a property called Cardinality. This property is composed of two values that
taken together, describe the maximum and minimum number of elements the node collection may hold
at runtime.
y Cardinality Minimum: 0 or 1
y Cardinality Maximum: 1 or n
Therefore, there are four possible cardinality values (specified as <Min>..<Max>)
y 0..1 Zero or one elements permitted
y 0..n Zero or more elements permitted
y 1..1 One and only one element permitted
y 1..n One or more elements permitted
© SAP AG JA310 4-7
Context Structure – Runtime (1)
z All independent nodes are forced to be singletons. This is
because the context root node has one and only one element.
Context Root Node
c=1..1, s=true
= Element created by an application at runtime
Default 0 = Element created by the WDF at context initialisation time
Element
Internal
Only
c=1..1, s=true
Node collection contains a default element.
Default 0
Partner
Element Can contain a maximum of one element.
c=0..1, s=true Independent Node
Node collection is initially empty.
Use
0
Can contain a maximum of one element.
Independent Node
SAP
SAP
SAP AG 2004
Partner
Use
The Context Root Node
The context root node always contains exactly one element (notice the cardinality is 1..1). This is
known as the default element and it cannot be deleted!
Violating the cardinality constraints
Internal
If you attempt to perform any action on a node collection that would violate its cardinality, then you
will get a runtime error from the Web Dynpro Framework. Such actions would be: trying to delete the
default element from a node of cardinality 1..<something>, or trying to add a second element to a node
Only
of cardinality <something>..1.
© SAP AG JA310 4-8
Context Structure – Runtime (2)
z All independent nodes are forced to be singletons. This is
because the context root node has one and only one element.
Context Root Node
c=1..1, s=true
= Element created by an application at runtime
Default 0 = Element created by the WDF at context initialisation time
Element = Element at the lead selection
Internal
Only
c=1..n, s=true
Node collection contains a default element.
..n Can contain as many elements as required.
Partner
1
c=0..n, s=true Default 0
Element
..n
Use
1
0 Independent Node
Node collection is initially empty.
Can contain as many elements as required.
Independent Node
SAP
SAP
SAP AG 2004
Partner
Use
Three dimensional context
You can now see that the structure of the context at runtime will not be the flat, two dimensional
hierarchy seen at design time. Instead, a context node takes on depth. If you think of the design time
structure as occupying the x-y plane, then at runtime each element in the node collection occupies a
Internal
position in the z plane (moving into and out of the page).
Lead Selection
A node's element collection can be accessed using a zero based index value. It is possible to flag
Only
multiple elements as being selected (controlled by the selection cardinality property), but only one of the
selected elements can be processed at any one time. The element being processed is referred to as the
lead selection element.
© SAP AG JA310 4-9
Context Structure – Runtime (3)
Context Root
The runtime structure of the
Default
Context Metadata Element 0
context if node LineItems is a
non-singleton.
Context Root (c=1..1, s=true)
SalesOrders (c=0..n, s=true) SalesOrders
LineItems (c=0..n, s=false)
OrderNo ..n
Description (string) SalesDate
OrderNo 1
ItemNo (int) SalesDate
OrderNo 0
Price (decimal) SalesDate
Internal
Only
Quantity (decimal)
LineItems
OrderNo (int)
LineItems ItemNo ..n
SalesDate (date) ItemNo
Price 1
LineItems
Partner
ItemNo ..n
SalesRep (string) ItemNo
Price 0
ItemNo
Price 1
ItemNo ..n Price
LongText (string) ItemNo
Price 0
ItemNo
Price 1
Use
ItemNo Price
Price 0
Price
Design Time Runtime
SAP
SAP
SAP AG 2004
Partner
Use
The Singleton property of a context node
Notice that the context node SalesOrders has a child node called LineItems. The LineItems
node is a distinct node with its own element collection.
Internal
The Boolean property called Singleton critically affects the relationship between an dependent node and
its parent node!
Node LineItems as a non-singleton (Singleton = false)
Only
If the node LineItems has its Singleton property set to false, then for every element in the parent node
collection (SalesOrders in this case), there will be a distinct instance of the child node LineItems.
The most important thing to understand here is that each instance of node LineItems is related to the
respective element in the parent node collection. Notice that the arrows pointing to each of the
LineItems node collections originate from each element in the parent node.
Therefore, if there are n elements in the parent node, then there will be n distinct instances of a non-
singleton child node.
© SAP AG JA310 4-10
Context Structure – Runtime (4)
Context Root
The runtime structure of the
Default
Context Metadata Element 0
context if node LineItems is a
singleton.
Context Root (c=1..1, s=true)
SalesOrders (c=0..n, s=true) SalesOrders
LineItems (c=0..n, s=true)
OrderNo ..n
Description (string) SalesDate
OrderNo 1
ItemNo (int) SalesDate
OrderNo 0
Price (decimal) SalesDate
Internal
Only
Quantity (decimal)
OrderNo (int)
SalesDate (date)
LineItems
Partner
SalesRep (string)
ItemNo ..n
LongText (string)
ItemNo
Price 1
Use
ItemNo
Price 0
Price
Design Time Runtime
SAP
SAP
SAP AG 2004
Partner
Use
Node LineItems as a singleton (Singleton = true)
If the node LineItems now has its Singleton property set to true (which is the default), then it does not
matter how many elements are present in the parent node collection (SalesOrders in this case), there
will only ever be one instance of the child node LineItems.
Internal
The most important thing to understand here is that a singleton node is related to its parent node
collection. Notice that the arrow pointing to the LineItems node collection originates from the entire
Only
SalesOrders node collection, and not from any element within the collection.
Repopulating singleton child nodes
In the above example, there could be many different elements in the SalesOrders node collection.
However, since there is only ever one instance of the singleton child node LineItems, we need to
ensure that when this child node is accessed, it contains the correct data for the selected element in the
parent node. In other words, if node SalesOrders contains the header records for orders 1000, 1001
and 1002; then there must be a way of ensuring the when order 1001 is being accessed, I don’t end up
with the node LineItems containing the data for order 1000!
Supply functions
Supply functions are the mechanism to repopulate child nodes when the lead selection in the parent node
changes. When a singleton child node is declared, you must also write an accompanying supply function.
The Web Dynpro Framework will then automatically call your supply function when the lead selection
in the parent node changes.
© SAP AG JA310 4-11
Context Structure – Why Singleton nodes?
Context Root
Default
Element 0
Q: Why do singleton nodes exist? SalesOrders
A: Efficiency! OrderNo ..n
SalesDate
OrderNo 1
SalesDate
OrderNo 0
SalesDate
Internal
Only
This design of context structure both copies LineItems
Partner
the way users handle business data, and
ItemNo ..n
causes the Web Dynpro application to ItemNo
Price 1
Use
consume significantly less memory. ItemNo
Price 0
Price
SAP
SAP
SAP AG 2004
Partner
Use
Why do Singleton nodes exist?
When a typical business transaction is being used, information will often be presented in the form of a
list of header records of some sort; for instance, sales order headers. From this list, the user will typically
select one order header and then look at its line items. It makes much better sense to read the line item
Internal
information only when it is needed, rather than to read all the line items for all the sale orders in the hope
that the user might want to look at the information! This would be a highly inefficient application
architecture both in terms of processing requirements and memory usage.
Only
Lazy Data Access
Web Dynpro follows the principle of Lazy Data Access. This means that data is only obtained when it is
actually needed. When this principle is applied to the architecture of the context, it means that unless the
program actually needs to look at the data in a child node, then that child node will remain unprocessed.
Hence, there is no need to hold multiple instances of data the user has not requested.
Having singleton child nodes greatly reduces the amount of memory required for a business application,
and means that the Web Dynpro application does not waste time by performing unnecessary processing
on business data the user does not want to see.
© SAP AG JA310 4-12
The Context At Design Time: Topic Summary
You should now be able to:
z Use the context editor.
z Understand the structure of the context.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-13
Context Mapping: Topic Objectives
After completing this topic, you will be able to:
z Use the Data Modeller.
z Understand Internal Context Mapping
z Understand External Context Mapping
Internal
Only
z Explain the difference between internal and external
context mapping
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-14
Context Mapping
z Context mapping is the primary mechanism for
sharing data between different controllers.
z Advantages:
z Data is automatically available to all
controllers using the mapping relationship
z Only one copy of the data is ever maintained
Internal
Only
z Data can be mapped selectively, thus
reducing the amount of data in a controller’s
context to the minimal set required to fulfil a
Partner
task
Use
SAP
SAP
SAP AG 2004
Partner
Use
Context Mapping
Context mapping allows a controller (typically a view controller) to access data that has been pre-
processed by some other controller. Since a mapping relationship allows a direct reference to be made to
data in another controller, there is no need for this data to be copied or moved.
Internal
Important: A mapped node ceases to maintain its own element collection! Instead, it references the
element collection of the mapping origin node.
Only
Why can a view controller not act as a data source for a mapping relationship?
According to the principles of good MVC design, a view controller should be written in such a way that
it takes no part in the generation of the data it displays. Instead, the view controller should only be
concerned with displaying pre-generated data and then handling the resulting user interaction (validation
and error handling etc.).
It is the custom controller’s job to interact with model objects to generate the required data. Once the
data has been generated, the custom controller then supplies it to a view controller for display.
If a view controller were allowed to act as the data source (origin) for a mapping relationship, then the
situation could be created in which a custom controller was dependent upon functionality found in a
view controller. This would be bad MVC design and is therefore not permitted.
© SAP AG JA310 4-15
Data Modeller
Create data link.
Double click on
Internal
Only
the data link.
Partner
Use
Double click or
choose Open Data Modeler
from the context menu
SAP
SAP
SAP AG 2004
Partner
Use
Data Modeller
The Data Modeller is a Web Dynpro specific, graphical tool for modelling component and controller
usage within a component. Data links can be created that define a context mapping relationship between
two controllers. The perspective area that displays the Data Modeller is the Diagram View.
Internal
Opening the Data Modeller
To open the Data Modeller, either choose Open Data Modeller from the right mouse click menu for the
component name in the Web Dynpro Explorer; or simply double click on the component name itself.
Only
Data Link
Once a data link has been created, double click on it, and you will see the Context mapping window pop-
up. Here you can drag a context node from the right hand side (the mapping origin) to the left hand side
(the context that will contain the mapped node). This does three things for you:
y It declares the controller containing the mapping origin as a required controller for the controller
containing the mapped node.
y It creates the node in the target context
y It establishes the mapping relationship.
y These steps can all be performed manually through the Context Editor if required.
© SAP AG JA310 4-16
Context Mapping: Internal Mapping
View Controller Component Controller
Context Root Context Root
SalesOrders SalesOrders
LineItems LineItems
Desc Controller Desc
Usage
ItemNo Declaration ItemNo
Price Price
Internal
Only
Qty Qty
OrderNo OrderNo
SalesDate SalesDate
Partner
SalesRep SalesRep
LongText LongText
Use
W
W ee bb D
D yy nn pp rr oo C
C oo m
m pp oo nn ee nn tt
Mapped node collection Node collection of mapping origin
SAP
SAP
Mapping Relationship
SAP AG 2004
Partner
Use
Internal Context Mapping
Internal mapping is the name given to a mapping relationship in which both the mapped node and the
mapping origin node lie within the boundaries of one component. This means that the mapping
relationship can be fully established when writing the current component.
Internal
There is however, one special case where a mapping relationship can only be partially established when
writing the current component. This is known as External mapping. As the name implies, this is a
Only
situation in which the mapping origin node lies outside the boundaries of, or is external to, the current
component.
© SAP AG JA310 4-17
Context Mapping: External Mapping (1)
z Used to map the context of a child components interface controller
to the context of a parent components custom controller
Unknown Component Interface Controller
Mapping Origin ?
Context Root
DataFromParent Component Controller
Internal
Only
SalesOrderNo Context Root
ShowAsTable SomeNode
External mapping is only possible for SomeChildNode
nodes in a Component Interface UpdateAllowed
AnAttribute
Controller.
Partner
AnotherAttribute
The mapped node must have its
isInputElement property set to
true.
Use
Web Dynpro Child Component
Node collection of Mapped
mapping origin Incomplete External Mapping node collection
SAP
SAP
Relationship
SAP AG 2004
Partner
Use
External Mapping
There is a fundamental problem when trying to establish a mapping relationship with a mapping origin
node that lies outside the boundaries of the current component. The problem is simply this:
At the time the child component is being written, you have no idea what the identity of the mapping
Internal
origin node will be. In fact, you have no idea whether the component that will act as the parent even
exists!
Only
In order to get around this problem, context nodes in an Interface Controller have a special property
called isInputElement. You will not find this property on any other node in any other context!
The isInputElement property
The solution to the “Unknown Mapping Origin” problem is to allow the mapping relationship to be
defined in two stages. The first stage requires the isInputElement flag for the mapped node to be
set to true. This identifies the fact that a mapping relationship will be required, but the identity of the
mapping origin node, at the moment, is unknown.
The completion of the mapping relationship will have to be postponed until the parent component
declares a usage instance of this child component.
© SAP AG JA310 4-18
Context Mapping: External Mapping (2)
Node DataToChild acts as the mapping origin
for this particular component usage instance.
Usage instance of child component
Component Interface Controller
Custom Controller
Context Root
Context Root
DataFromParent
DataToChild
Internal
Only
SalesOrderNo
SalesOrderNo
ShowAsTable
ShowAsTable
UpdateAllowed
UpdateAllowed
Partner
WD Child Component
Use
Web Dynpro Parent Component
Node collection of Mapped
mapping origin Complete External Mapping node collection
SAP
SAP
Relationship
SAP AG 2004
Partner
Use
Completing an External Mapping relationship
As stated on the previous slide, and external mapping relationship must be established in two stages.
The second stage takes place when the parent component is being written. During this process, the parent
component must declare the use of the child component, and it is at this point that the external mapping
Internal
relationship can be completed.
Declaring a Used Web Dynpro Component
Whenever a Web Dynpro component is declared for use, the only point of access the parent component
Only
has into the child component is through the child’s component interface controller. This is the controller
that contains the node with the isInputElement flag set to true. Therefore, in order to complete the
usage declaration, a context node in the parent component must be nominated to act as the mapping
origin.
External mapping relationships are usage specific!
Since it is possible to create multiple usages of the same child component, it therefore follows that each
child component usage instance could have a different context node nominated to complete the external
mapping relationship.
© SAP AG JA310 4-19
Context Mapping: Topic Summary
You should now be able to:
z Use the Data Modeller.
z Understand Internal Context Mapping
z Understand External Context Mapping
Internal
Only
z Explain the difference between internal and external
context mapping
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-20
The Context At Design Time: Unit Summary
You should now be able to understand:
z The Structure of the Context
z Both Internal and External Context Mapping
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 4-21
Exercise
Chapter: Web Dynpro Context
Theme: Binding UI elements to the view context and
mapping view context nodes to the component
controller context
At the end of this Exercise, you will be able to:
• Create a value node and child attributes in a context.
Internal
Only
• Map the view context node to component controller’s context
• Bind the UI elements to the view context.
Partner
1 Development Objectives
Use
This exercise has the following objectives:
- Make the data stored in the context of the component controller available to a view
controller.
SAP
SAP
- Create some UI elements on the view layout that can display the data in the context of the
view controller.
The context of the component controller will act as the data source. Then using context
mapping, the data will be shared with a view controller. Once the data is available to the
Partner
Use
context of the view controller, UI elements can be added to the view layout. These UI
elements will then be bound to the context of the view controller.
Internal
2 Result
Only
In this exercise, you will extend the
component you created in the last exercise
to include two input fields and a push
button.
© SAP AG JA310 4-22
Template Solution of this exercise:
WD Project: JA310_WD_Context_1
Application: Ex1App
Starting point of this exercise:
Go on with your WD Project: JA310_Ex_1
Or start from template solution: JA310_WD_Introduction
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
Internal
Only
You have successfully completed the last exercise.
You have opened the JA310_Ex_1 project.
The structure of this project is shown in the screen shot below.
Partner
Use
SAP
SAP
Partner
Use
Internal
4 Overview: Developing Only
4-1 Locate the Component Controller node in the project structure that is located
immediately under Ex1Comp. Double click on Component Controller to open the
Custom Controller editor.
- Add a new value node to the Custom Controller Context, having the
name PeopleInfo.
- Assign two value attributes to this node, having the names FirstName
and LastName.
- Change the cardinality property of the value node PeopleInfo from 0..n
to 1..1. This step is very important!
© SAP AG JA310 4-23
4-2 Locate the component name Ex1Comp in the hierarchy displayed in the Web Dynpro
Explorer window. Double click on the component name Ex1Comp in order to open the
Diagram View of the Data Modeller.
- Create a data link between the view controller and the component
controller. At runtime, this will allow the view controller to access the
context attributes of the component controller.
- In the following pop-up window called Edit Context Mapping, select
the node PeopleInfo in the right-hand window and drag it across to the
left-hand window. The node must be dropped exactly on the context
root node, rather than just anywhere in the window.
Another screen will now appear.
- Select the node PeopleInfo (both the child attributes FirstName and
LastName will be selected automatically).
Internal
Only
- Press Finish.
Now that the context mapping between the view controller and the component
controller is complete.
4-3 Open the outline view of the view Ex1View.
Partner
- Delete the TextView UI element in which the text Welcome to Web
Dynpro is displayed
Use
4-4 Add a Label UI element and an InputField UI element for each of the attributes in the
PeopleInfo context node by using the Apply Template functionality:
- In the Outline view window, right mouse click on the
RootUIElementContainer UI element and select Apply Template from
SAP
SAP
the context menu.
- Choose Form as the templates name.
- Select the PeopleInfo node with both child attributes (FirstName and
LastName).
Partner
Use
4-5 Even though we have not completed the development of the application, select Deploy
New Archive and Run from the right mouse-click menu on the application Ex1App.
The problem is that you can type into the input fields, but we cannot send the data
back to the server. The next few steps will rectify that problem.
Internal
4-6 In the view editor for view controller Ex1View, select the Actions tab.
- Define a new action, having the Name DataEntry and the text “Go”.
Only
4-7 Now go back to the layout tab of the view.
- In the Outline view, add a button as a child element of the
RootUIElementContainer.
- Select the Properties tab from the bottom window and change the
value of the button’s layoutdata property from MatrixData to
MatrixHeadData.
- Locate the onAction property of the button and assign the action
DataEntry from the drop down list.
Notice that the text on the button is defined by the text in the Action object.
© SAP AG JA310 4-24
5 Overview: Building, Deploying, and Running
No coding is actually required in the action handler at this point, so select Deploy New
Archive and Run from the context menu of application Ex1App.
The screen now has a button on it with the text Go. When this button is pushed, a round trip
to the server will take place and the data you entered in the input fields will be stored in the
respective context attributes.
The final screen should now look like this:
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 4-25
Solution
Chapter: Web Dynpro Context
Theme: Binding UI elements to the view context and
mapping view context nodes to the component
controller context
4 Overview: Developing
4-1 Locate the Component Controller node in the project structure that is located
immediately under Ex1Comp….
Internal
Only
Double click on the Node Component Controller of
the component Ex1Comp.
Partner
Use
SAP
SAP
By default, the Context tab will be displayed when
the Custom Controller editor is first opened.
The context of the component controller is
currently empty; therefore, right mouse click on the
Partner
Use
word Context next to the blue circle icon and select
New -> Value Node from the context menu.
Call the value node PeopleInfo and press Finish.
Internal
Now right mouse click on the value node you just
created and select
Only
New -> Value Attribute. Enter the name FirstName
and press Finish.
Repeat the previous step and create another value
attribute, this time, called LastName.
Click once on the value node PeopleInfo and then
select the properties tab from the window in bottom
right of the NetWeaver Developer Studio screen.
This will open the Properties Tab.
© SAP AG JA310 4-26
4-2 Locate the component name Ex1Comp in the hierarchy displayed in the Web Dynpro
Explorer window.….
Double click on the component name Ex1Comp.
Internal
Only
For convenience, double click on the title bar of
this window (where it says Diagram View) in order
Partner
to make the window full size (double clicking a
second time will cause the window to revert to its
original size).
Use
We have just defined a value node in the context of
the component controller. We now need to share
this runtime information with the view controller.
SAP
Select the arrow icon from the toolbar on the upper
SAP
left side of the editor window (Create a data link).
Starting from the view controller, drag a line into
component controller and release the mouse button.
Partner
This will open a pop-up window called Edit
Use
Context Mapping.
The Edit Context Mapping window is divided into
two, vertical halves. On the right side is the context
Internal
of the component controller (where you can see the
node PeopleInfo) and on the left is the context of
the view controller (which is currently empty).
Only
Select the node PeopleInfo in the right-hand
window and drag it across to the left-hand window.
The node must be dropped exactly on the context
root node, rather than just anywhere in the window.
Another screen will now appear in which you select
which nodes and attributes are to be mapped from
the view controller to the component controller.
Select the checkbox next to the node PeopleInfo,
and both the child attributes (FirstName and
LastName) will be selected automatically.
Press OK.
© SAP AG JA310 4-27
Once the context mapping is complete and the tree
structures expanded, you will see the display shown
on the left.
Press Finish.
4-3 Delete the TextView UI element in which the text Welcome to Web Dynpro is displayed.
Internal
Only
The TextView UI element in which the text
Welcome to Web Dynpro is displayed is no longer
needed, so locate it in the Outline view’s
Partner
hierarchical display (bottom left of the NetWeaver
screen) and select delete from the context menu.
Use
SAP
SAP
4-4 Add a Label UI element and an InputField UI element for each of the attributes in the
PeopleInfo context node.
Partner
Use
This can be done manually by individually
inserting each UI element, but it is quicker to use
the Apply Template functionality.
Internal
In the Outline view window, right mouse click on
the RootUIElementContainer UI element and select
Only
Apply Template from the context menu.
The type of template we wish to apply is the Form
template. This is already selected by default, so
press Next.
© SAP AG JA310 4-28
Check the checkbox next to the PeopleInfo node
and ensure that both the FirstName and the
LastName attribute are automatically selected.
Since we can accept the default values that will
appear on the next screen, you can simply press
Finish.
The Apply Template wizard has now done several
things for us. It has added a Label and an
InputField for each attribute in the node
PeopleInfo, and it has bound the value property of
Internal
Only
each InputField to the appropriate context attribute.
Select the FirstName InputField UI element by
clicking on it in the layout view. Now examine the
value of its value property. There will be a green
Partner
tick icon in the field followed by the value
PeopleInfo.FirstName.
This is the critical configuration step that both
Use
defines what data will be displayed when the
screen is rendered, and also the location in which
data received from the user will be stored.
SAP
SAP
4-6 Define a new action, having the Name DataEntry and the text “Go”.
Partner
Use
In the view editor for view controller Ex1View,
select the Actions tab.
Press the New button towards to the upper right of
Internal
the window, and enter DataEntry as the name of
the action, and “Go” at the text.
Without changing any other parameters, press
Only
Finish.
© SAP AG JA310 4-29
4-7 In the Outline view, add a button as a child element of the RootUIElementContainer.
In the Outline view, select the
RootUIElementContainer and select Insert Child
from the context menu.
Select Button from the drop down list and press
Finish.
Select the Properties tab from the bottom window
and change the value of the button’s layoutdata
property from MatrixData to MatrixHeadData.
Internal
Only
Locate the onAction property of the button and
assign the action DataEntry from the drop down
list.
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 4-30
Exercise
Chapter: Web Dynpro Context
Theme: Passing data to a child component via external
mapping
At the end of this Exercise, you will be able to:
• Embed a child component within another component.
• Define an externally mapped node in the context of a component
Internal
Only
interface controller.
• Share data between the context of a parent component and the interface
controller of a child component
Partner
Use
1 Development Objectives
This exercise has the following objectives:
SAP
SAP
To extend the functionality found in component Ex1Comp.
- Make use of the functionality found in another component. This is achieved by embedding
the existing component within the component you will write here.
Partner
Use
- Pass data from the component controller of the parent component to the interface
controller of the child component.
In the parent component, the context of the component controller will act as the data source.
Then the data will be shared with the view controller in parent component using internal
Internal
context mapping, and shared with the interface controller of the child component using
external mapping.
Only
Both the parent and the child components will have view controllers that display the same
data.
© SAP AG JA310 4-31
2 Result
In this exercise, you will extend the
component you created in the last exercise.
You will define a new component having a
view with two input fields. This component
will be embedded in the previously defined
component.
Without having to write a single line of
code, data entered in the parent component
will be passed to and displayed by the child
component.
Internal
Only
Template Solution of this exercise:
Partner
WD Project: JA310_WD_Context_2
Application: Ex1App
Use
Starting point of this exercise:
Go on with your WD Project: JA310_Ex_1
Or start from the template solution: JA310_WD_Context_1
SAP
SAP
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
Partner
Use
You have successfully completed the last Exercise.
You have opened the JA310_Ex_1 Web Dynpro project.
The structure of this project is in the screen shot below.
Internal
Only
© SAP AG JA310 4-32
4 Overview: Developing
4-1 In the JA310_Ex_1 project, create a new component:
name: Ex1Child
package: com.sap.training.wd.ex1
window name: Ex1Child
view name: Ex1ChildView.
This new component Ex1Child will be embedded into the already existing component
Ex1Comp.
4-2 In the context of the Interface Controller of component Ex1Child, create a new value
node with two value attributes.
- Create a value node called DatafromParent.
This node will receive data from the parent component through and external mapping
relationship.
Internal
Only
- Create two value attributes under node DataFromParent called
FirstName and LastName.
Important: External context mapping requires that the node attributes in both the
child’s Interface Controller and the parent’s custom controller have the same names.
Partner
- Select the DataFromParent node and change the isInputElement
property to true.
- Also change its cardinality property from 0..n to 1..1.
Use
This is step is vital! If you do not do this, the whole exercise will fail!
We have now declared that external mapping will be used, but we have not yet defined
which node will act as the mapping origin. This step must be deferred to a later point
SAP
in time.
SAP
4-3 We now need to create a chain of context mappings from the Interface Controller,
through the Component Controller to the View Controller. The easiest way to do this
is to use the Data Modeller.
Partner
Use
- Open the Data Modeller for component Ex1Child.
- Create a data link between the Component Controller and the Interface
Controller.
- Map the DataFromParent node and all child attributes.
Internal
4-4 Now repeat the above step.
- This time create a data link from the View Controller to the
Component Controller.
Only
- Map the DataFromParent node and all child attributes.
4-5 Open the View Controller Editor for view Ex1ChildView.
- In the layout tab, change the layout property of the
RootUIElementContainer UI element from FlowLayout to
MatrixLayout.
- Change the design property of the DefaultTextView from standard to
header1.
4-6 In the Outline view, use the Apply Template functionality to define InputField UI
elements and Label UI elements which are bound to the context attributes FirstName
and LastName.
4-7 Select each of the InputField UI elements and change their readOnly property to true.
4-8 Save your metadata by clicking on the appropriate tool bar icon.
© SAP AG JA310 4-33
4-9 Next we need to declare that the parent component Ex1Comp will use an instance of
component Ex1Child.
- Locate the Used Web Dynpro Components node under Ex1Comp.
- Right mouse click the Used Web Dynpro Components node and select
Add Used Component.
- Enter the following values:
Name: childUsage
Used Web Dynpro Component: com.sap.training.wd.ex1.Ex1Child
Lifecycle CreateOnDemand
4-10 The last step is to connect the externally mapped node in the Interface Controller of
Ex1Child with a node in the context of the component controller of parent component
Internal
Only
Ex1Comp.
- In order to complete the external mapping relationship, expand the
childUsage component usage and then double click on the Interface
Controller node.
- Select the Properties tab of the Interface Controller.
Partner
- Add the Component Controller of Ex1Comp to the required controllers
of Ex1Child.
Now select the Context tab of the childUsage component usage.
Use
- Edit the Context Mapping of the node DataFromParent.
- Select PeopleInfo and press Next.
- Select the check box next to DataFromParent and press Finish.
SAP
A programmatic connection has now been made between the parent and child
SAP
components.
4-11 The only remaining step is to create a visual interface that will display both a view
from the parent component, and the interface view from the child component.
Partner
Use
- Locate the window called Ex1Comp under the Windows node of
component Ex1Comp. By default, the first window defined for a
component will always have the same name as the component to which
it belongs.
Internal
- Double click on this window name, and the Navigation Editor will be
opened.
- Select the Create a View Set tool bar button, and click anywhere in the
Only
editor window.
This will cause a pop-up window to be displayed in which you must specify the name
and type of View Set you wish to create.
- Enter ParentViewSet as the name, and leave the ViewSetDefinition at
the default value of GridLayout.
As soon as you press finish, you will see that a 2 column, 2 row view set is created in
the navigation editor. This is not the correct definition for our view set.
- Having the view set selected, change the columns property from 2 to 1.
- Also, change the default property from false to true.
This last step is very important!
If you do not make this change, then when you run your application, you will see
nothing on the screen!
© SAP AG JA310 4-34
4-12 Currently, the Ex1View is not part of the view set that we have just created.
- So, in the Navigation Editor, right mouse click on the view Ex1View
and select Delete.
This will delete the usage of the view within the window, rather than delete the view
itself.
- Now click on the Embed a View toolbar button. Point to cell[1,1] in
your view set and click the mouse button.
The Embed View pop-up window will now appear.
- Select Embed Existing View and press Next.
- Select Ex1View and press Finish.
Now the Ex1View will appear in the top row of view set ParentViewSet.
Internal
Only
4-13 Lastly, we must embed the interface view of the child component into the view set. In
this case, the interface view of the child component Ex1Child is only a single view, but
in general, it represents this entire visual interface of the component. This could be as
simple as a single view, or it could be a more complex layout involving nested view
sets. Either way, we must take whatever visual interface the child component supplies,
Partner
and embed it within the bottom row of ParentViewSet.
- Click on the Embed a View toolbar button again. Point to cell[2,1] in
Use
your view set and click the mouse button.
The Embed View pop-up window will now appear.
- Select Embed Interface View of a Component Instance and press
Next.
SAP
SAP
- Expand the tree structure of Component Instances and select
Ex1ChildInterfaceView.
- Press Finish.
Partner
Use
5 Overview: Building, Deploying, and Running
Locate the application Ex1App in the Web Dynpro Explorer menu (under Applications).
Select Deploy New Archive and Run from the context menu. The final screen should now
Internal
look like this:
Only
© SAP AG JA310 4-35
Internal
Only
Partner
Enter some values into the FirstName and LastName fields and press “Go”. The data you
enter into the top fields will be transported back to the server and the Web Dynpro
Framework will write it back to the context of Ex1View.
Use
Now, due to the chain of context mapping relationships that has been created, the data will
be available to the view controller of the child component view Ex1ChildView.
All without having to write a single line of code!
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 4-36
Solution
Chapter: Web Dynpro Context
Theme: Passing data to a child component via external
mapping
4 Overview: Developing
Internal
Only
4-1 In the JA310_Ex_1 project, create a new component Ex1Child.
Under the JA310_Ex_1 project, locate the Web
Dynpro Components node.
Right mouse click on this node and create a new
Partner
component called Ex1Child with a view called
Ex1ChildView.
Use
Use the package com.sap.training.wd.ex1.
Whenever a new component is created within a
SAP
Web Dynpro project, the Navigation Diagram
SAP
View will be opened. In this particular case, the
Navigation Diagram View is not required, so it can
be closed.
Partner
Use
The component Ex1Child will be embedded into component Ex1Comp. We will pass
data into the child component Ex1Child using external mapping. This means that a
node in the interface controller of the child component will have its isInputElement
Internal
property set to true.
When a custom controller in the parent component declares the use of a child
Only
component, it must nominate one of its context nodes to act as the mapping origin for
the externally mapped node in the child component.
© SAP AG JA310 4-37
4-2 In the context of the Interface Controller of component Ex1Child, create a new value
node with two value attributes.
Expand the Ex1Child component node, and then
expand the Component Interface node. Double
click on the Interface Controller.
Create a value node called DatafromParent.
Create two value attributes under node
DataFromParent called FirstName and
Internal
Only
LastName.
Partner
Use
Select the DataFromParent node and change the
isInputElement property to true. Also change its
cardinality property from 0..n to 1..1.
SAP
SAP
Notice that once this property has been set, the
icon changes to indicate that external mapping is
required.
Partner
Use
Internal
4-3 Create a data link between the Component Controller and the Interface
Only
Controller.
The first data link starts from the Component
Controller and goes to the Interface Controller.
As soon as this link is created, you will see the
Edit Context Mapping window appear. Drag the
DataFromParent node on the right and drop it on
the context root node shown on the left. Then in
the next window, select the checkbox against
DataFromParent.
© SAP AG JA310 4-38
4-4 Create a data link from the View Controller to the Component Controller.
Now repeat the above step, but this time create a
data link from the view controller to the
component controller.
Once both of these data links have been created,
your Data Modeller Diagram View will look as
shown on the left side.
Close the Data Modeller view.
Internal
Only
4-6 Use the Apply Template functionality to define InputField UI elements and Label UI
elements which are bound to the context attributes FirstName and LastName.
Partner
Right mouse click on the RootUIElementContainer
in the Outline view and select Apply Template.
Use
The Form template is the default type of template,
so press Next, and select DataFromParent on the
following screen.
SAP
SAP
Partner
Use
Internal
After pressing Finish, your screen should look like
shown on the left side.
Only
© SAP AG JA310 4-39
4-9 Declare, that the parent component Ex1Comp will use an instance of component
Ex1Child.
Right mouse click the Used Web Dynpro
Components node and select Add Used
Component.
In the pop-up window, you must enter a name for
the component usage. This name will differ from
the component name in the same way that an
object instance name differs from the name of class
it instantiates.
Internal
Only
Enter the name childUsage and then using the
Browse button, select Ex1Child.
Partner
Before you press Finish, the window should look
like shown on the left.
Use
SAP
SAP
4-10 Connect the externally mapped node in the Interface Controller of Ex1Child with a
context node of the component controller of parent component Ex1Comp.
Partner
Use
In order to complete the external mapping
relationship, expand the childUsage component
usage and then double click on the Interface
Internal
Controller node.
Only
Select the Properties tab of the Interface
Controller.
Press the Add button and select the Component
Controller for Ex1Comp.
Now the interface controller of the child
component usage has access to the context and
methods in the parent component controller.
© SAP AG JA310 4-40
Now select the Context tab of the childUsage
component usage. Edit the Context Mapping of the
node DataFromParent.
Select PeopleInfo and press Next.
Select the check box next to DataFromParent and
press Finish.
Internal
Only
4-11 Create a visual interface that will display both a view from the parent component, and
the interface view from the child component.
Locate the window called Ex1Comp under the
Windows node of component Ex1Comp.
Partner
By default, the first window defined for a
component will always have the same name as the
component to which it belongs. Double click on
Use
this window name, and the Navigation Editor will
be opened.
Select the Create a View Set tool bar button, and
SAP
click anywhere in the editor window.
SAP
This will cause a pop-up window to be displayed in
which you must specify the name and type of View
Set you wish to create.
Partner
Use
Enter ParentViewSet as the name, and leave the
ViewSetDefinition at the default value of
GridLayout.
Internal
As soon as you press finish, you will see that a 2
column, 2 row view set is created in the navigation
editor.
Only
This is not the correct definition for our view set,
so with the view set selected (as shown on the left
side), change the columns property from 2 to 1.
Also, change the default property from false to
true.
This last step is very important!
If you do not make this change, then when you run
your application, you will see nothing on the
screen!
© SAP AG JA310 4-41
4-13 Embed the interface view of the child component into the view set.
Click on the Embed a View toolbar button. Point to
cell[2,1] in your view set and click the mouse
button. The Embed View pop-up window will now
appear.
Select Embed Interface View of a Component
Instance and press Next.
Expand the tree structure of Component Instances
and select Ex1ChildInterfaceView.
Internal
Only
Press Finish and the view set should now look like
shown on the left.
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 4-42
The Context At Runtime
Contents:
z The Context At Runtime
z The Typed Context API
z The Generic Context API
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-1
The Typed Context API: Topic Objectives
After completing this topic, you will be able to:
z Understand how your design time context
declarations cause typed context entities to be
generated
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-2
The Typed Context API
z When you create context entities at design time, you are creating
the metadata that will describe the runtime data.
z Once the metadata that describes nodes and attributes has been
created, actual node collection objects can be created.
z The node collection objects for independent context nodes can
always be assumed to exist, and can therefore be accessed
Internal
Only
immediately as their existence is guaranteed by the Web Dynpro
Framework.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Programmatic access to the context
From within any controller (except a component interface view controller), there will always be the
standard member variable wdContext. This is the starting point for all access to the controller’s entire
context.
Internal
Switching off typed access
If necessary, the typed context API can be switched off on a per node basis. Each context node has a
Only
Boolean property called typedAccessRequired which by default, is set to true. If this is set to
false, then the typed interface to that one node will not be generated.
For very large Web Dynpro applications, it may be necessary to switch off the generation of the typed
context API in order to reduce the volume of generated code.
© SAP AG JA310 5-3
Typed access to value node elements
SalesOrders z Value node SalesOrders has been declared with a
cardinality of 0..n and the following attributes:
OrderNo ..n
longText String
SalesDate
OrderNo 1 orderNo int
SalesDate
OrderNo 0 salesDate Date
SalesDate salesRep String
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Typed access to data in a value node
In order to access the individual attributes within a context node, the following three steps must be
performed:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
Internal
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
an object of type I{cn}Node.
Only
© SAP AG JA310 5-4
Typed access to value node elements
SalesOrders z Value node SalesOrders has been declared with a
cardinality of 0..n and the following attributes:
OrderNo ..n
longText String
SalesDate
OrderNo 1 orderNo int
SalesDate
OrderNo 0 salesDate Date
SalesDate salesRep String
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
// Get the SalesOrders element at the lead selection
ISalesOrdersElement soEl = soNode.currentSalesOrdersElement();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Typed access to data in a value node
In order to access the individual attributes within a context node, the following three steps must be
performed:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
Internal
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
an object of type I{cn}Node.
y Obtain a reference to the element at the node collection’s lead selection. For every node object
Only
{cn}, there is a method {cn}.current{cn}Element() that will return the relevant element
as an object of type I{cn}Element.
© SAP AG JA310 5-5
Typed access to value node elements
SalesOrders z Value node SalesOrders has been declared with a
cardinality of 0..n and the following attributes:
OrderNo ..n
longText String
SalesDate
OrderNo 1 orderNo int
SalesDate
OrderNo 0 salesDate Date
SalesDate salesRep String
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
// Get the SalesOrders element at the lead selection
ISalesOrdersElement soEl = soNode.currentSalesOrdersElement();
Partner
// Get the attribute values using the accessor methods
String longText = soEl.getLongText();
int orderNo = soEl.getOrderNo();
Use
Date salesDate = soEl.getSalesDate();
String salesRep = soEl.getSalesRep();
SAP
SAP
SAP AG 2004
Partner
Use
Typed access to data in a value node
In order to access the individual attributes within a context node, the following three steps must be
performed:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
Internal
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
an object of type I{cn}Node.
y Obtain a reference to the element at the node collection’s lead selection. For every node object
Only
{cn}, there is a method {cn}.current{cn}Element() that will return the relevant element
as an object of type I{cn}Element.
y Once a reference to the correct element has been obtained, the relevant accessor methods can be
called to supply the attribute data. The accessor methods are always in the form get{ca}() where
{ca} is the name of the context attribute.
What assumption has been made here?
The coding above is syntactically correct, but a big assumption has been made about the contents of
node SalesOrders: It has been assumed that the node collection actually has some elements in it!
This could be a problem.
Check the cardinality of node SalesOrders again … 0..n. The zero is the give away.
When this controller is instantiated, this node will be an empty collection. Therefore to blindly use the
object returned by calling method current{cn}Element() could potentially cause a null pointer
exception.
© SAP AG JA310 5-6
Generalised code - accessing value node elements (1)
z Typed access
z {cn} is an independent value node
Process the typed element at the lead selection of a value node
// Get a reference to node {cn}
I{cn}Node node{cn} = wdContext.node{cn}();
// Get the element at the lead selection {cn}
I{cn}Element this{cn}El = node{cn}.current{cn}Element();
Internal
Only
// Get the value of {ca} using its accessor method
{dtca} this{ca} = this{cn}El.get{ca}();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generalised code
Generalised coding has been supplied here to show the pattern of code that should be used when
accessing data in a value node collection using the typed context API.
Accessing independent value attributes
Internal
The method wdContext.currentContextElement.get{ca}() allows to access independent
value attributes.
Only
Please refer to the Appendix chapter in your notes for a full list of all the coding placeholders.
© SAP AG JA310 5-7
Generalised code - accessing value node elements (2)
z Typed access
z {cn} is an independent value node
Process all typed elements in a value node collection
// Get a reference to node {cn}
I{cn}Node node{cn} = wdContext.node{cn}();
// Get the size of the node element collection
int size{cn} = node{cn}.size();
Internal
Only
// Loop over all the elements in {cn}’s collection
for (int i=0; i<size{cn}; i++) {
I{cn}Element this{cn}El = (I{cn}Element) node{cn}
.getElementAt(i);
// Get the value of {ca} using its accessor method
{dtca} this{ca} = this{cn}El.get{ca}();
Partner
// Do something useful with attribute values
}
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generalised code
Generalised coding has been supplied here to show the pattern of code that should be used when
accessing data in a value node collection using the typed context API.
Internal
Please refer to the Appendix chapter in your notes for a full list of all the coding placeholders.
Only
© SAP AG JA310 5-8
Addition of a typed element to a value node
z Value node SalesOrders will start empty
SalesOrders and have a single element added to it.
z This process can be repeated as often as the
node’s cardinality will permit.
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Typed addition of data to a value node
The process of adding an element to a node collection requires the following three steps:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
Internal
an object of type I{cn}Node.
Only
© SAP AG JA310 5-9
Addition of a typed element to a value node
z Value node SalesOrders will start empty
SalesOrders and have a single element added to it.
z This process can be repeated as often as the
node’s cardinality will permit.
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
// Create a new element for node SalesOrders
ISalesOrdersElement newSoEl = soNode.createSalesOrdersElement();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Typed addition of data to a value node
The process of adding an element to a node collection requires the following three steps:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
Internal
an object of type I{cn}Node.
y Create a new element using method {cn}.create{cn}Element(). This method returns an
Only
object of type I{cn}Element.
Important: The newly created node element is not yet a member of the node’s element collection!
© SAP AG JA310 5-10
Addition of a typed element to a value node
z Value node SalesOrders will start empty
SalesOrders and have a single element added to it.
z This process can be repeated as often as the
node’s cardinality will permit.
OrderNo
SalesDate
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
// Create a new element for node SalesOrders
ISalesOrdersElement newSoEl = soNode.createSalesOrdersElement();
Partner
// Use the attribute mutator methods to set the values
newSoEl.setLongText("Printer supplies");
newSoEl.setOrderNo(1000);
Use
newSoEl.setSalesDate(new Date(System.currentTimeMillis());
newSoEl.setSalesRep("Harry Hawk");
SAP
SAP
SAP AG 2004
Partner
Use
Typed addition of data to a value node
The process of adding an element to a node collection requires the following three steps:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
referencing wdContext.node{cn}() where {cn} is the name of the context node. This returns
Internal
an object of type I{cn}Node.
y Create a new element using method {cn}.create{cn}Element(). This method returns an
Only
object of type I{cn}Element.
Important: The newly created node element is not yet a member of the node’s element collection!
y Call the relevant mutator methods to populate the new element.
© SAP AG JA310 5-11
Addition of a typed element to a value node
z Value node SalesOrders will start empty
SalesOrders and have a single element added to it.
z This process can be repeated as often as the
node’s cardinality will permit.
OrderNo 0
SalesDate
Internal
Only
// Get a reference to the SalesOrders node
ISalesOrdersNode soNode = wdContext.nodeSalesOrders();
// Create a new element for node SalesOrders
ISalesOrdersElement newSoEl = soNode.createSalesOrdersElement();
Partner
// Use the attribute mutator methods to set the values
newSoEl.setLongText("Printer supplies");
newSoEl.setOrderNo(1000);
newSoEl.setSalesDate(new Date(System.currentTimeMillis());
Use
newSoEl.setSalesRep("Harry Hawk");
// Append the new element to the node’s collection
soNode.addElement(newSoEl);
SAP
SAP
SAP AG 2004
Partner
Use
Typed addition of data to a value node
The process of adding an element to a node collection requires the following three steps:
y Access the relevant context node. In the case of an independent node, this is simply a matter of
referencing wdContext.node{cn}() where {cn} is the name of the context node. This
Internal
returns an object of type I{cn}Node.
y Create a new element using method {cn}.create{cn}Element(). This method returns an
Only
object of type I{cn}Element.
Important: The newly created node element is not yet a member of the node’s element collection!
y Call the relevant mutator methods to populate the new element.
y Once the relevant mutator methods have been called to populate the new element, it must be added
to the node’s collection using one of the {cn}.addElement() methods.
It is also possible to use one of the {cn}.bind() methods, but these methods must be used with
care because they replace the entire node collection with whatever is passed as a parameter!
Therefore, calls to the {cn}.bind() methods cannot be used in an additive manner.
© SAP AG JA310 5-12
Generalised code for adding value node elements
z Typed access
z {cn} is an independent value node
Add a new element to a value node collection
// Get a reference to node {cn}
I{cn}Node node{cn} = wdContext.node{cn}();
// Create a new element for node {cn}
I{cn}Element new{cn}El = node{cn}.create{cn}Element();
Internal
Only
// Set the value of {ca} using its mutator method
new{cn}El.set{ca}(<some_value>);
// Append the new element to node {cn}’s collection
node{cn}.addElement(new{cn}El);
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generalised code
Generalised coding has been supplied here to show the pattern of code that should be used when adding
data to a value node collection using the typed context API.
Accessing independent value attributes
Internal
The method wdContext.currentContextElement.set{ca}() allows to set the value of an
independent value attribute {ca}.
Only
Please refer to the Appendix chapter in your notes for a full list of all the coding placeholders.
© SAP AG JA310 5-13
Context coding generated for a controller
Generated context classes for a controller {nctl}
Generated Class Method
Context Node
IPrivate{nctl}.I{cn}Node I{cn}Element create{cn}Element()
I{cn}Element current{cn}Element()
I{cn}Element get{cn}ElementAt(int)
void bind(I{cn}Element)
I{chn}Node node{chn}()
Internal
Only
I{chn}Node node{chn}(int)
Context Element
IPrivate{nctl}.I{cn}Element String get{cn}Name()
void set{cn}Name(String)
Partner
I{chn}Element current{chn}Element()
I{chn}Element create{chn}Element()
Use
I{chn}Element get{chn}ElementAt(int)
I{chn}Node node{chn}()
SAP
SAP
SAP AG 2004
Partner
Use
The Context Node methods highlighted in grey will only be generated if node {cn} has a child node
{chn}.
The Context Element methods highlighted in grey will only be generated if {chn} is a non-singleton
node with respect to {cn}.
Internal
From within any controller, the IPrivate{nctl} interface can be used to access the context.
However, the context of a custom controller can also be accessed through the IPublic{ncc} interface.
Only
It is this feature that permits a custom controller to share the contents of its context with other
controllers!
© SAP AG JA310 5-14
The Typed Context API: Topic Summary
You should now be able to:
z Understand how your design time context
declarations cause typed context entities to be
generated
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-15
The Generic Context API: Topic Objectives
After completing this topic, you will be able to:
z Understand how to access nodes and attributes in
the context using the generic context API.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-16
The Generic Context API
z If a context node has its typedAccessRequired property to
false, or it has been created dynamically at runtime, then the typed
classes and methods described in the previous section will not
exist!
z It now becomes necessary to use the generic context API. This API
knows nothing about the names of either the context node or its
Internal
Only
attributes.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Accessing the context through the generic API
There are three general situations in which the generic context API will be needed:
y If you have to process a context of an unknown structure
y If you have to process context nodes and attributes that were dynamically created at runtime
Internal
y If the node’s typedAccessRequired property was set to false at design time
Only
© SAP AG JA310 5-17
Generic access to value node elements
Context Root
Default 0
SalesOrders Element
OrderNo ..n
SalesDate
OrderNo 1
SalesDate
OrderNo 0
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generic access to data in a value node
If the typedAccessRequired property is now switched off for node SalesOrders, then the
coding required to access the element at the lead selection is quite different. The node is still called
SalesOrders, and it still has exactly the same metadata as before, but now, none of the convenient
Internal
typed classes and methods exist!
To access a context node element generically, the following steps must be performed:
y Use the getChildNode() method to return a generic IWDNode node instance. This method
Only
requires both the name of the node and the index of the element in the parent node the desired node
instance belongs to. In this case, the parent node is the context root which only ever has one element,
therefore the index parameter is 0.
© SAP AG JA310 5-18
Generic access to value node elements
Context Root
Default 0
SalesOrders Element
OrderNo ..n
SalesDate
OrderNo 1
SalesDate
OrderNo 0
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
int leadSel = soNode.getLeadSelection();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generic access to data in a value node
If the typedAccessRequired property is now switched off for node SalesOrders, then the
coding required to access the element at the lead selection is quite different. The node is still called
SalesOrders, and it still has exactly the same metadata as before, but now, none of the convenient
Internal
typed classes and methods exist!
To access a context node element generically, the following steps must be performed:
y Use the getChildNode() method to return a generic IWDNode node instance. This method
Only
requires both the name of the node and the index of the element in the parent node the desired node
instance belongs to. In this case, the parent node is the context root which only ever has one element,
therefore the index parameter is 0.
y Call getLeadSelection() to find the lead selection value. If we get -1 then no element is
currently selected.
© SAP AG JA310 5-19
Generic access to value node elements
Context Root
Default 0
SalesOrders Element
OrderNo ..n
SalesDate
OrderNo 1
SalesDate
OrderNo 0
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
int leadSel = soNode.getLeadSelection();
// Select element 0 if no element is currently selected
Partner
if (leadSel == -1) ++leadSel;
// Get the SalesOrders element at the lead selection
IWDNodeElement soEl = soNode.getElementAt(leadSel);
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generic access to data in a value node
If the typedAccessRequired property is now switched off for node SalesOrders, then the
coding required to access the element at the lead selection is quite different. The node is still called
SalesOrders, and it still has exactly the same metadata as before, but now, none of the convenient
Internal
typed classes and methods exist!
To access a context node element generically, the following steps must be performed:
y Use the getChildNode() method to return a generic IWDNode node instance. This method
Only
requires both the name of the node and the index of the element in the parent node the desired node
instance belongs to. In this case, the parent node is the context root which only ever has one element,
therefore the index parameter is 0.
y Call getLeadSelection() to find the lead selection value. If we get -1 then no element is
currently selected.
y Calling method getElementAt() with a parameter of -1 will result in a runtime error – the if
statement prevents this. Now get the element at the node collection’s lead selection. This returns a
generic IWDNodeElement object.
© SAP AG JA310 5-20
Generic access to value node elements
Context Root
Default 0
SalesOrders Element
OrderNo ..n
SalesDate
OrderNo 1
SalesDate
OrderNo 0
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
int leadSel = soNode.getLeadSelection();
// Select element 0 if no element is currently selected
Partner
if (leadSel == -1) ++leadSel;
// Get the SalesOrders element at the lead selection
IWDNodeElement soEl = soNode.getElementAt(leadSel);
Use
// Get the attribute values using the generic accessor methods
String longText = soEl.getAttributeAsText("LongText");
int orderNo = ((Integer)soEl.getAttributeValue("OrderNo")).intValue();
Date salesDate = (Date)soEl.getAttributeValue("SalesDate");
String salesRep = soEl.getAttributeAsText("SalesRep");
SAP
SAP
SAP AG 2004
Partner
Use
Generic access to data in a value node
If the typedAccessRequired property is now switched off for node SalesOrders, then the
coding required to access the element at the lead selection is quite different. The node is still called
SalesOrders, and it still has exactly the same metadata as before, but now, none of the convenient
Internal
typed classes and methods exist!
To access a context node element generically, the following steps must be performed:
y Use the getChildNode() method to return a generic IWDNode node instance. This method
Only
requires both the name of the node and the index of the element in the parent node the desired node
instance belongs to. In this case, the parent node is the context root which only ever has one element,
therefore the index parameter is 0.
y Call getLeadSelection() to find the lead selection value. If we get -1 then no element is
currently selected.
y Calling method getElementAt() with a parameter of -1 will result in a runtime error – the if
statement prevents this. Now get the element at the node collection’s lead selection. This returns a
generic IWDNodeElement object.
y Since we are using the generic interface, the IWDNodeElement object has no typed accessor or
mutator methods for any of the attributes. Therefore, we must use either
getAttributeAsText() or getAttributeValue(). In the case of method
getAttributeValue(), you must know what data type the attribute has, and cast the resulting
Object appropriately.
© SAP AG JA310 5-21
Generalised code for accessing value node elements
z Generic access
z {cn} is an independent value node
Process the generic element at the lead selection of a value node
// Get a generic reference to node {cn}
IWDNode node{cn} = wdContext.getChildNode("{cn}",0);
int leadSel = node{cn}.getLeadSelection();
// Select element 0 if no element is currently selected
Internal
Only
if (leadSel == -1) ++leadSel;
// Get the element at the lead selection
IWDNodeElement this{cn}El = node{cn}.getElementAt(leadSel);
// Get the attribute values using the generic accessor methods
String this{ca1} = this{cn}El.getAttributeAsText("{ca1}");
{dtca2} this{ca2} = ({dtca2})this{cn}El.getAttributeValue("{ca2}");
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generalised code
Generalised coding has been supplied here to show the pattern of code that should be used when
accessing data in a value node collection through the generic context API.
Internal
Please refer to the Appendix chapter in your notes for a full list of all the coding placeholders.
Only
© SAP AG JA310 5-22
Addition of a generic element to a value node
Context Root
SalesOrders Default 0
Element
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generic addition of data to a value node
The process of adding an element to a value node collection using the generic context API requires the
following three steps:
y Access the relevant context node. As was stated before, the getChildNode() method must be
Internal
passed both the name of the required context node, and the index of the element in the parent node
collection to which the required node belongs.
Only
© SAP AG JA310 5-23
Addition of a generic element to a value node
Context Root
SalesOrders Default 0
Element
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
// Create a new element for node SalesOrders
IWDNodeElement newSoEl = soNode.createElement();
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generic addition of data to a value node
The process of adding an element to a value node collection using the generic context API requires the
following three steps:
y Access the relevant context node. As was stated before, the getChildNode() method must be
Internal
passed both the name of the required context node, and the index of the element in the parent node
collection to which the required node belongs.
y Create a new generic node element using method {cn}.createElement(). This returns a
Only
generic context element of type IWDNodeElement.
© SAP AG JA310 5-24
Addition of a generic element to a value node
Context Root
SalesOrders Default 0
Element
OrderNo
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
// Create a new element for node SalesOrders
IWDNodeElement newSoEl = soNode.createElement();
Partner
// Use the generic attribute mutator methods to set the values
newSoEl.setAttributeValue("LongText","Printer supplies");
newSoEl.setAttributeValue("OrderNo",new Integer(1000));
newSoEl.setAttributeValue("SalesDate",new Date(System.currentTimeMillis()));
Use
newSoEl.setAttributeValue("SalesRep","Harry Hawk");
SAP
SAP
SAP AG 2004
Partner
Use
Generic addition of data to a value node
The process of adding an element to a value node collection using the generic context API requires the
following three steps:
y Access the relevant context node. As was stated before, the getChildNode() method must be
Internal
passed both the name of the required context node, and the index of the element in the parent node
collection to which the required node belongs.
y Create a new generic node element using method {cn}.createElement(). This returns a
Only
generic context element of type IWDNodeElement.
y Call the generic mutator methods to set the attribute values. The setAttributeValue() method
requires the name of the attribute and the value to be assigned. You can specify the attribute value as
either a String or an Object.
© SAP AG JA310 5-25
Addition of a generic element to a value node
Context Root
SalesOrders Default 0
Element
OrderNo 0
SalesDate
Internal
Only
// Get a generic reference to the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
// Create a new element for node SalesOrders
IWDNodeElement newSoEl = soNode.createElement();
Partner
// Use the generic attribute mutator methods to set the values
newSoEl.setAttributeValue("LongText","Printer supplies");
newSoEl.setAttributeValue("OrderNo",new Integer(1000));
newSoEl.setAttributeValue("SalesDate",new Date(System.currentTimeMillis()));
Use
newSoEl.setAttributeValue("SalesRep","Harry Hawk");
// Append the new element to the node’s collection
soNode.addElement(newSoEl);
SAP
SAP
SAP AG 2004
Partner
Use
Generic addition of data to a value node
The process of adding an element to a value node collection using the generic context API requires the
following three steps:
y Access the relevant context node. As was stated before, the getChildNode() method must be
Internal
passed both the name of the required context node, and the index of the element in the parent node
collection to which the required node belongs.
y Create a new generic node element using method {cn}.createElement(). This returns a
Only
generic context element of type IWDNodeElement.
y Call the generic mutator methods to set the attribute values. The setAttributeValue() method
requires the name of the attribute and the value to be assigned. You can specify the attribute value as
either a String or an Object.
y Finally, the new element, it must be added to the node’s collection using one of the
{cn}.addElement() methods.
© SAP AG JA310 5-26
Generalised code for adding value node elements
z Generic access
z {cn} is an independent value node
Add a new generic element to a value node collection
// Get a generic reference to node {cn}
IWDNode node{cn} = wdContext.getChildNode("{cn}",0);
// Create a new element for node {cn}
IWDNodeElement new{cn}El = node{cn}.createElement();
Internal
Only
// Use the generic mutator methods to set the attribute values
new{cn}El.setAttributeValue("{ca1}",<some_String_value>);
new{cn}El.setAttributeValue("{ca2}",<some_non_String_value>);
// Append the new element to the node’s collection
node{cn}.addElement(new{cn}El);
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Generalised code
Generalised coding has been supplied here to show the pattern of code that should be used when adding
data to a value node collection using the generic context API.
Internal
Please refer to the Appendix chapter in your notes for a full list of all the coding placeholders.
Only
© SAP AG JA310 5-27
The Generic Context API: Topic Summary
You should now be able to:
z Understand how to access nodes and attributes in
the context using the generic context API.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-28
The Context At Runtime: Unit Summary
You should now be able to:
z Understand the typed and generic context API’s
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 5-29
Exercise
Chapter: Web Dynpro Context
Theme: Adding elements to a context value node at
runtime
At the end of this Exercise, you will be able to:
• Add new elements to a value node collection
• Display the data you just added.
Internal
Only
Partner
1 Development Objectives
This exercise has the following objectives:
Use
- Define a context value node in the component controller.
- Map the value node to the view controller
- Write the required coding in the component controller to add some data to the value node.
- Display the contents of the mapped value node in the view controller on the screen
SAP
SAP
The context of the component controller will act as the data source. Then using context
mapping, the data will be shared with a view controller. Once the data is available to the
context of the view controller, UI elements can be added to the view layout. These UI
Partner
elements will then be bound to the context of the view controller.
Use
The data that will be displayed on the screen will be created at runtime by the coding you
will add
Internal
2 Result
Only
In this exercise, you will create a context
node in the component controller. Then
you will create a corresponding node in
the view controller that is mapped to the
context node in the component controller.
The View layout will contain fields
shown on the left.
The data will be created by runtime
coding that you will add.
© SAP AG JA310 5-30
Template Solution of this exercise:
WD Project: JA310_WD_Context_3
Application: Ex4App
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
The structure of the project that you will create is shown in the screen shot below.
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
4 Overview: Developing
4-1 Create a new Web Dynpro project called JA310_Ex_4. Without changing any other
values, press Finish.
4-2 Create a new Web Dynpro Component having the following properties:
Name: Ex4Comp
Package: com.sap.training.wd.ex4
Window Name: Ex4Comp
View Name: Ex4View
Press Finish.
4-3 Open the Custom Controller editor by double clicking on the Component Controller of
the component Ex4Comp.
© SAP AG JA310 5-31
4-4 Select the Context tab of the component controller. The context is currently empty.
- Create a new value node having the name SalesOrders.
- Now create four value attributes for node SalesOrders as followings
OrderNo Type: integer
SalesDate Type: date
SalesRep Type: string
Description Type: string
The data type of an attribute can be changed from the properties view of this context
attribute.
4-5 Open the Diagram view of the Data modeller for component Ex4Comp by double
clicking on the corresponding node in the Web Dynpro Explorer.
Internal
Only
- Create a data link between the view controller and the component
controller.
This will open a pop-up window called Edit Context Mapping.
- Select the node SalesOrders in the right-hand window and drag it
across to the left-hand window.
Partner
The node must be dropped exactly on the context root node, rather than just anywhere
in the window!
Use
Another screen will now appear in which you select which nodes and attributes are to
be mapped from the view controller to the component controller.
- Select the checkbox next to the node SalesOrders, and all the child
attributes will be selected automatically.
SAP
- Press OK.
SAP
- Press Finish.
4-6 Change the properties of the UI elements defined in view Ex4View.
- Double click on the view Ex4View in the Web Dynpro Explorer to edit
Partner
Use
the view.
- Select the RootUIElementContainer in the Outline view and change its
layout property to MatrixLayout.
- Select the DefaultTextView in the Outline view and changes its design
Internal
property to header1.
4-7 Add a Label UI element and an InputField UI element for each of the attributes in the
Only
SalesOrders context node.
- Use the Apply Template functionality, which can be found in the
context menu of the RootUIElementContainer element.
- Select the Form template.
- On the next screen, check the node SalesOrders and all the child
attributes.
- Press Finish.
The Apply Template wizard has now done several things for us. It has added a Label
and an InputField for each attribute in the node SalesOrder, and it has bound the value
property of each InputField to the appropriate context attribute.
This is the critical configuration step that both defines what data will be displayed
when the screen is rendered, and also the location in which data received from the
user will be stored.
© SAP AG JA310 5-32
4-8 Return to the Component controller editor and select the implementation tab. The
Outline View shows the classes and methods within the selected program.
- Select the method wdDoInit() in the Outline View.
The editor window jumps to the appropriate location in the code.
In the implementation window, add the coding to do the following:
- Obtain a reference to the context node SalesOrders.
(Hint: start with the shortcut wdContext)
- Create a new element object for node SalesOrders
(Hint: Use a method of the node object to create a new element object)
- Set the attributes of this element using the typed mutator methods
(Hint: Use the mutator methods of the element object)
When you create an attribute of type date (to provide a value to the
element attribute SalesDate), you have the to import the appropriate
Internal
Only
class definition. Choose java.sql.date, to be compatible with the
Web Dynpro built in type date!
- Add the new element to the node collection
(Hint: Use a method of the node object to add the new element object)
Partner
4-9 Create an application called Ex4App for component Ex4Comp.
Use
5 Overview: Building, Deploying, and Running
Right mouse click on the newly created application and select Deploy New Archive and Run.
SAP
SAP
The final screen should now look like this:
Partner
Use
Internal
Only
Notice that a date picker icon appears next to the date field. This is created automatically!
All you need to do is bind an InputField UI element to a context attribute of type date, and
the Web Dynpro Framework will generate the correct interface.
© SAP AG JA310 5-33
Solution
Chapter: Web Dynpro Context
Theme: Adding elements to a context value node at
runtime
4 Overview: Developing
Internal
Only
4-2 Create a new Web Dynpro Component having the name Ex4Comp.
Open the tree structure of the new project and find
the Web Dynpro Components node. Right mouse-
Partner
click on this node and select Create Web Dynpro
Component from the context menu.
Use
In the next pop-up screen, give the new
component the following values:
Name: Ex4Comp
Package: com.sap.training.wd.ex4
SAP
SAP
Notice that as you enter the component name, the
Window and view names are created for you.
Go to the View Name field and change the view
Partner
Use
name from Ex4CompView to Ex4View.
Press Finish.
Internal
Only
© SAP AG JA310 5-34
4-3 Create a new Web Dynpro Component having the name Ex4Comp.
Locate the Component Controller node in the
project structure that is located immediately under
Ex4Comp. Double click on Component Controller.
This will open the Custom Controller editor.
Internal
Only
Partner
4-4 Create a new Web Dynpro Component having the name Ex4Comp.
Use
By default, the Context tab will be displayed when
the Custom Controller editor is first opened. The
context of the component controller is currently
empty; therefore, right mouse click on the word
SAP
SAP
Context next to the blue circle icon and select New -
> Value Node from the context menu. Call the
value node SalesOrders.
To create the value attributes, right mouse click on
Partner
Use
the word Context next to the blue circle icon and
select New -> Value Attribute from the context
menu.
Internal
The data type of an attribute can be changed by first
selecting it in the context hierarchy, then select the
Only
properties tab in the lower right-hand window. Now
locate the type property and select an appropriate
data type from the drop down list.
© SAP AG JA310 5-35
4-5 Define the context mapping between view controller and the component controller of
component Ex4Comp.
Now locate the component name Ex4Comp in the
hierarchy displayed in the Web Dynpro Explorer
window. Double click on the component name
Ex4Comp.
This will open the Diagram view of the Data
modeller. For convenience, double click on the
title bar of this window (where it says Diagram
View) in order to make the window full size
Internal
Only
(double clicking a second time will cause the
window to revert to its original size).
We have just defined a value node in the context of the component controller. We now
Partner
need to share this runtime information with the view controller. Select the arrow icon
from the toolbar on the upper left side of the editor window (Create a data link).
Starting from the view controller, drag a line into component controller and release the
Use
mouse button. This will open a pop-up window called Edit Context Mapping.
The Edit Context Mapping window is divided into two, vertical halves. On the right
SAP
side is the context of the component controller (where you can see the node
SAP
SalesOrders) and on the left is the context of the view controller (which is currently
empty).
Select the node SalesOrders in the right-hand window and drag it across to the left-
Partner
hand window. The node must be dropped exactly on the context root node, rather than
Use
just anywhere in the window!
Another screen will now appear in which you
Internal
select which nodes and attributes are to be mapped
from the view controller to the component
controller.
Only
Select the checkbox next to the node SalesOrders,
and all the child attributes will be selected
automatically.
Press OK.
Once the context mapping is complete and the tree
structures expanded, you will see the display
shown on the left.
Press Finish.
© SAP AG JA310 5-36
4-7 Add a Label UI element and an InputField UI element for each of the attributes in the
SalesOrders context node.
We now need to add a Label UI element and an
InputField UI element for each of the attributes in
the SalesOrders context node. This can be done
manually by individually inserting each UI element,
but it is much quicker to use the Apply Template
functionality.
Again, select the RootUIElementContainer from the
Outline view and then select Apply Template from
Internal
Only
the context menu.
The type of template we wish to apply is the Form
template. This is already selected by default, so
press Next.
Partner
Check the checkbox next to the SalesOrders node
Use
and ensure that all the child attributes are selected.
Since we can accept the default values that will
appear on the next screen, you can simply press
Finish now.
SAP
SAP
Partner
Use
Internal
4-8 Return to the Component controller editor and select the implementation tab…
In the bottom left of the NetWeaver Developer Studio screen you will now see that the
Only
Outline View shows the classes and methods within the selected program.
Select the method wdDoInit() in the Outline View and you will see the editor
window jump to the appropriate location in the code.
The following code needs to be added to the wdDoInit() method of the component
controller for Ex4Comp.
© SAP AG JA310 5-37
public void wdDoInit() {
..//@@begin wdDoInit()
// Get a reference to the SalesOrders node
..ISelesOrdersNode soNode = wdContext.nodeSalesOrders();
..// Create a new element for node SalesOrders
ISalesOrdersElement newSoEl =
soNode.createSalesOrdersElement();
..//Use the attribute mutator methods to set the values
Internal
Only
newSoEl.setDescription("Printer supplies");
newSoEl.setOrderNo(1000);
newSoEl.setSalesDate(new Date(System.currentTimeMillis()));
newSoEl.setSalesRep("Harry Hawk");
Partner
..//.Append the new element to the node's collection
soNode.addElement(newSoEl);
Use
..//@@end
Important: You should only add coding between the //@@begin and //@@end
comment markers!
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 5-38
UI Elements
Contents:
z Introduction to UI elements
z Putting data on the screen: Context binding
z Controlling the behaviour of UI elements using context
binding
z Using a basic composite UI element
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-1
Introduction to UI Elements: Topic Objectives
After completing this topic, you will be able to:
z Understand the concept of a Web Dynpro UI element
z Use the View Designer to create a view layout
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-2
What is a UI element?
z A UI element is any graphical entity that occupies a position
within a view layout.
InputField UI Element
TextView UI Element
Internal
Only
Label UI Element
Partner
Use
SAP AG 2004
SAP
SAP
Does that mean all UI elements are visible on the screen?
Partner
No! There are certain UI elements that are not visible on the screen, such as the
Use
TransparentContainer or the ViewUIElementContainer. Nonetheless, these UI elements
occupy a position in the UI element hierarchy just like any other visible UI element.
Is a UI element then just some HTML to represent an input field or a drop down list or a
checkbox – or something like that?
Internal
No, not necessarily! Web Dynpro has been designed to operate with any form-based user interface. This
is most probably going to be a standard browser, but it could also be a Pocket PC™ or a Blackberry™.
Only
© SAP AG JA310 6-3
How are UI elements arranged?
z All view layouts are composed from a hierarchy of UI elements.
z The root node is always of type TransparentContainer, and
is always called RootUIElementContainer. You cannot
change this, it is hard coded!
Internal
Only
Hard coded RootUIElementContainer
Partner
Use
SAP AG 2004
SAP
SAP
All subsequent UI elements added to a view layout are hierarchically subordinate to the UI element
Partner
called RootUIElementContainer.
Use
Internal
Only
© SAP AG JA310 6-4
UI Element categories
z Within the visual editor, there are various categories of UI elements
e.g. Button, InputField, Label MessageArea
BarCodeReader,
FunctionKey, RFIDReader
InteractiveForm
e.g. DateNavigator, Table, Tree
Internal
Only
e.g. TransparentContainer, Tray
OfficeControl
BusinessGraphics, GeoMap
Partner
z Each UI element object is represented as an abstract class that is
Use
independent of any client presentation layer.
SAP AG 2004
SAP
SAP
There are numerous user interface elements available for designing the user interface of a Web Dynpro
Partner
application.
Use
All available user interface elements are divided into categories and can be selected using buttons in the
view designer.
Simple Standard elements are:
Button, Caption, CheckBox, CheckBoxGroup, DropDownByIndex, DropDownByKey, FileDownload,
Internal
FileUpload, HorizontalGutter, IFrame, Image, InputField, InvisibleElement, Label, LintToAction,
LinkToURL, ProgressIndicator, RadioButton, RadioButtonGroupByIndex, RadioButtonGroupByKey,
TextEdit, TextView, TimedTrigger, ToolbarButton, ToolbarDroupDownByIndex,
Only
ToolbarDropDownByKey, ToolBarInputField, ViewContainerUIElement
Complex Standard elements are:
DateNavigator, PhaseIndicator, RoadMap, TabStrip, Table, Tree
Container Standard Elements are:
Group, ScrollContainer, TransparentContainer, Tray
© SAP AG JA310 6-5
Using the View Designer
Internal
Only
Partner
Use
1. Choose Edit from the
context menu of a view
SAP AG 2004
SAP
SAP
View Designer
Partner
The View Designer is a Web Dynpro specific tool that allows you to edit a view layout. The View
Use
Designer is only available when you are editing a view controller. It will not appear when you edit a
custom controller because these controllers have no visual interface.
Using the View Designer
y To open the View Designer, select a view and then choose Edit from the right mouse click menu.
Internal
This can be done from the Web Dynpro Explorer, the Navigation Modeler, or Data Modeler.
Only
© SAP AG JA310 6-6
Using the View Designer
2. The Layout view will
be selected by default
Internal
Only
Partner
Use
1. Choose Edit from the
context menu of a view
SAP AG 2004
SAP
SAP
View Designer
Partner
The View Designer is a Web Dynpro specific tool that allows you to edit a view layout. The View
Use
Designer is only available when you are editing a view controller. It will not appear when you edit a
custom controller because these controllers have no visual interface.
Using the View Designer
y To open the View Designer, select a view and then choose Edit from the right mouse click menu.
Internal
This can be done from the Web Dynpro Explorer, the Navigation Modeler, or Data Modeler.
y Now select the Layout tab.
y If you want to enlarge the work area in which you position the individual interface elements, double-
Only
click the header bar in the editor. To revert to the original size, double-click the same bar again.
© SAP AG JA310 6-7
Using the View Designer
2. The Layout view will 3. UI elements can be added by
be selected by default “drag and drop” from the toolbar
Internal
Only
Partner
Use
1. Choose Edit from the
context menu of a view
SAP AG 2004
SAP
SAP
Adding UI elements to the layout
Partner
To add any UI element, drag and drop it from the toolbar on the left hand side of the View Designer.
Use
Internal
Only
© SAP AG JA310 6-8
Using the View Designer
2. The Layout view will 3. UI elements can be added by
be selected by default “drag and drop” from the toolbar
4. UI elements can also be
added by selecting “Insert
Child” from the right mouse
click menu in the Outline view.
Internal
Only
Partner
Use
1. Choose Edit from the
context menu of a view
SAP AG 2004
SAP
SAP
Adding UI elements to the layout
Partner
To add any UI element, drag and drop it from the toolbar on the left hand side of the View Designer.
Use
Adding a new UI element from the Outline View is also possible. This can be done from the context
menu of an element in the hierarchy, that can have child elements (e.g. a Transparent Container
element, a Group element).
Positioning of the UI elements is done by changing the element hierarchy.
Internal
Only
© SAP AG JA310 6-9
Using the View Designer
2. The Layout view will 3. UI elements can be added by
be selected by default “drag and drop” from the toolbar
4. UI elements can also be
added by selecting “Insert
Child” from the right mouse
click menu in the Outline view.
Internal
Only
Partner
5. It is useful to keep the Properties
Use
1. Choose Edit from the
context menu of a view tab selected during editing.
SAP AG 2004
SAP
SAP
UI elements properties
Partner
The Properties tab displays all properties of a given UI element.
Use
Supported client-side events can be found as child's of the properties node Event. To handle these
client-side events, previously defined Actions have to be associated with each of the events. The
allowed Actions can be chosen from a drop down list.
Internal
Only
© SAP AG JA310 6-10
UI Elements Overview: Topic Summary
You should now be able to:
z Understand the Web Dynpro concept of a UI element
z Use the View Designer to create a view layout
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-11
Context binding: Topic Objectives
After completing this topic, you will be able to:
z Understand context binding
z Understand how UI element behaviour can be
controlled using context binding
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-12
Context Binding (1)
z Context Binding is the association of a UI element property with a
node or attribute in a view controller’s context.
z The UI element property then uses the context node or attribute as
it data source. If the UI element property can be updated by the
user, then new value replaces the value in the context.
UI Layout
Context
Root Node
Internal
Only
por t
dat a tr ans
at ic
Aut om
Partner
Use
SAP AG 2004
SAP
SAP
Once a UI element property is bound to a context node or attribute, the context data is used to supply a
Partner
value to the UI element property. If the UI element property is one that the user can update (e.g. the
Use
value property of an InputField UI element), then the context is automatically updated with new
value during the next round trip.
Almost all the properties of a UI element can be bound either to a context node or attribute.
A binding relationship can only exist between the context and UI elements of the same view controller.
Internal
Only
© SAP AG JA310 6-13
Context Binding (2)
z Context Binding decouples the UI element object from the
application coding.
Application Coding
Implementation UI Layout
Standard Context
Hook
Root Node
Methods
Internal
Only
por t
Instance
dat a tr ans
Methods at ic
Aut om
Actions
Partner
Navigation
Use
Plugs
SAP AG 2004
SAP
SAP
A Web Dynpro view controller has been constructed in such a way that it is normally possible to have
Partner
full control over the appearance of the screen layout, without ever needing direct access the UI element
Use
objects.
Any property over which you wish to have programmatic control should be bound to an appropriate
context node or attribute.
Internal
Only
© SAP AG JA310 6-14
Context Binding (3)
z In order to control the behaviour of UI elements, you should
manipulate the context nodes or attributes to which the UI
elements are bound.
Implementation UI Layout
Standard Context
Hook
Root Node
Methods
Internal
Only
por t
Instance t a tr ans
Updates
da
Methods at ic
Aut om
Actions
Partner
Navigation
Use
Plugs
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-15
Putting data on the screen (2)
Internal
Only
1) Declare context
attribute
Partner
Use
SAP AG 2004
SAP
SAP
Putting data on the screen
Partner
In order for a UI element to display any data, at the very least, its value property must be bound to an
Use
appropriate context node or attribute (there are very few UI elements that do not have a value property
– HorizontalGutter for instance).
The following steps are the minimum requirement for putting some data on the screen:
Internal
y Create a node or attribute in the view controller‘s context that will contain the data. It is not
important whether this a mapped context node or not.
Only
© SAP AG JA310 6-16
Putting data on the screen (3)
2) Create UI element
on layout
Internal
Only
1) Declare context
attribute
Partner
Use
SAP AG 2004
SAP
SAP
Putting data on the screen
Partner
In order for a UI element to display any data, at the very least, its value property must be bound to an
Use
appropriate context node or attribute (there are very few UI elements that do not have a value property
– HorizontalGutter for instance).
The following steps are the minimum requirement for putting some data on the screen:
Internal
y Create a node or attribute in the view controller‘s context that will contain the data. It is not
important whether this a mapped context node or not.
y Create the UI element on your view layout.
Only
© SAP AG JA310 6-17
Putting data on the screen (4)
3) Bind UI element 2) Create UI element
to context attribute on layout
Internal
Only
1) Declare context
attribute
Partner
Use
SAP AG 2004
SAP
SAP
Putting data on the screen
Partner
In order for a UI element to display any data, at the very least, its value property must be bound to an
Use
appropriate context node or attribute (there are very few UI elements that do not have a value property
– HorizontalGutter for instance).
The following steps are the minimum requirement for putting some data on the screen:
Internal
y Create a node or attribute in the view controller‘s context that will contain the data. It is not
important whether this a mapped context node or not.
y Create the UI element on your view layout.
Only
y Display the UI element’s properties by clicking on the UI element itself in the view layout, and then
select the Properties view.
Here, you will see a red X icon against any UI element property that requires a context binding.
Place the cursor in this field and an ellipsis button will appear at the right hand side. Click here and a
pop-up window will be displayed showing the view controller’s context.
Select an appropriate node or attribute and then this value will be transferred back to the Properties
view. The red X icon will now be a replaced with a green tick icon, and the context path will be
displayed in the field.
The UI element on the view layout will now also display the context path of the node or attribute to
which it is bound.
© SAP AG JA310 6-18
Putting data on the screen (5)
3) Bind UI element 2) Create UI element
to context attribute on layout
Internal
Only
1) Declare context
attribute
Partner
Use
SAP AG 2004
SAP
SAP
The complete binding relationship
Partner
The establishment of a binding relationship instructs the Web Dynpro screen renderer to obtain the
Use
value for UI element property from the context node or attribute to which it is bound.
Context binding is not limited to simply supplying and InputField, say, with a value. A UI
element’s value property is just one of the many properties that can be supplied with data through a
Internal
binding relationship.
Only
This is the mechanism by which a view controller can adjust the appearance and behaviour of its view
layout without ever needing to access the UI element objects themselves.
© SAP AG JA310 6-19
Putting data on the screen (6)
z The order of attributes within a node has no influence on the order in
which the data they hold is displayed.
Internal
Only
Notice that all the arrows
are double headed!
z The binding between a UI element and a context attribute is a two-way
Partner
relationship:
Data from the context is transported to the client during screen rendering
Data entered by the user is transported back to the context when the HTTP
Use
round-trip is processed.
SAP AG 2004
SAP
SAP
Ordering of fields on the screen
Partner
As can be seen from the graphic above, there is no requirement to have the UI elements in the same
Use
order as the context attributes to which they are bound
Context binding is a two-way relationship!
Once a binding relationship has been declared, the data in the bound nodes and attributes is transported
automatically to the corresponding UI elements. After the user has interacted with the screen and
Internal
initiated an HTTP round-trip, the new or modified data in the UI elements is transported back to the
same nodes and attributes in the view controller’s context. By the time the Web Dynpro Framework
hands controller over to your action handler, the context already holds the updated information.
Only
This two-way transport process is entirely automatic, and requires no action on the part of the
application developer. All you need to do is declare that a binding relationship exists.
© SAP AG JA310 6-20
Controlling UI element behaviour (1)
1.Since the value for the readOnly
property is hard coded …
2.The corresponding
input field will always
be open for input.
Internal
Only
z A hard coded UI element property value
Partner
gives the UI element a fixed behaviour.
z This arrangement does not lend itself to
Use
good UI design and should be avoided!
SAP AG 2004
SAP
SAP
UI Element properties
Partner
The value of a UI element property can either be hard coded, or it can be bound to a context attribute of
Use
a suitable data type. The graphic above illustrates this principle for the readOnly property, but can be
applied to almost all properties of a UI element.
Changing hard coded UI element property values
If you need to change the value of a UI element property value that has been hard coded at design time,
Internal
this can be done at runtime by placing coding in the view controller’s wdDoModifyView() method.
But this type of architecture is considered a poor design and should be avoided!
Only
© SAP AG JA310 6-21
Controlling UI element behaviour (2)
z By creating a new value attribute, you can control the property of
one or more UI elements.
1. A new attribute has been created
that is of the correct data type to
control the readOnly attribute
Internal
Only
Partner
2. The readOnly UI element
Use
property can be controlled by
an attribute of type boolean
SAP AG 2004
SAP
SAP
Creating context attributes for controlling UI element properties
Partner
In order to programmatically control the behaviour of a UI element, you should create a context attribute
Use
that is of the same data type as the property you wish to control. Your wdDoInit() or action handler
methods can then modify the value of the context attribute and control the behaviour of the UI element,
without ever needing to access the UI element object itself.
Internal
Only
© SAP AG JA310 6-22
Controlling UI element behaviour (3)
1. The readOnly property is now
bound to a boolean context attribute.
2. The input field will now
only be open for input if
the context attribute is
set to true.
Internal
Only
z Binding UI element properties to
Partner
suitable context attributes is a very
much better, and more flexible
technique for UI design.
Use
SAP AG 2004
SAP
SAP
Controlling a UI element property
Partner
Once the context attribute has been created, it must be bound to the appropriate property of the UI
Use
element. In this case, the readOnly property of an InputField UI element has been bound to a
boolean value attribute.
Now the wdDoInit() method, or one of your action handlers, can manipulate the context attribute.
Internal
This techniques gives you programmatic control over any bindable UI element property, and allows you
to control the appearance of the view layout without any need to access the UI element objects
Only
themselves.
© SAP AG JA310 6-23
Using dictionary data types for property binding
z Certain UI element properties (e.g. size, design and layout) cannot be
bound a context attribute, whose data type has been selected from the
drop down list presented in the “type” property, but must be bound to
context attributes having Web Dynpro Dictionary data types.
The data types for UI element
Internal
Only
properties can be found in the Local
Dictionary.
Partner
Most of these data types can be found
under the uielementdefinitions
node.
Use
SAP AG 2004
SAP
SAP
Web Dynpro Dictionary Data Types
Partner
Certain UI element properties have been abstracted in order to make them independent from the client
Use
software layer. This means that certain familiar HTML parameters such as heading levels cannot be
specified in the customary manner.
In these cases, specific classes have been created in the Web Dynpro dictionary to describe these data
Internal
types. When creating a context attribute to control, for instance, the design property of a TextView
UI element, you must declare the context element to be of type
Only
com.sap.ide.webdynpro.uielementdefinitions.TextViewDesign.
These classes can be found by clicking on the ellipsis button next to a context attribute’s data type, and
then selecting Local Dictionary as shown in the graphic above.
© SAP AG JA310 6-24
Context Binding: Topic Summary
You should now be able to:
z Understand context binding
z Understand how UI element behaviour can be
controlled using context binding
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-25
Composite UI Elements: Topic Objectives
After completing this unit, you will be able to:
z Understand a basic composite UI element
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-26
Introduction to composite UI elements (1)
z A composite UI element is any UI element that
requires child UI elements.
Examples: The Table and Tree UI elements.
Internal
Only
Partner
Rendered table UI elements Rendered tree
Use
UI element
SAP AG 2004
SAP
SAP
Composite UI elements
Partner
y Certain UI elements are displayed on the screen as aggregations of simpler, more basic, UI elements.
Use
The Table UI element is a good example here.
y Without the subordinate, or child UI elements, a composite UI element is not capable of displaying
any information.
y Composite UI elements such as Group and Tray have a mandatory Caption child UI element,
Internal
but beyond that, their structure is entirely user defined.
y Composite UI elements such as Table and Tree however, require a slightly more complex child
Only
structure.
© SAP AG JA310 6-27
Introduction to composite UI elements (2)
z Composite UI elements are incapable of displaying information on
their own.
z They must have child UI elements in order to function correctly.
Composite Table UI Element.
Child UI Elements. The
TableColumn elements are also
Internal
Only
composite UI elements.
Partner
Outline view of a Table UI element
Use
SAP AG 2004
SAP
SAP
Composite UI elements
Partner
Certain UI elements are displayed on the screen as aggregations of simpler, more basic, UI elements.
Use
The Table UI element is a good example here.
Notice in the graphic, that the Table UI element acts as a parent for several TableColumn UI
elements; each of which acts as the parent for a Caption and TextView UI element.
Internal
Without the subordinate, or child UI elements, a composite UI element is not capable of displaying any
Only
information.
© SAP AG JA310 6-28
The Table UI element
z The Table is an example of a composite UI element.
z A Table’s child elements are also composite.
Composite TableColumn UI Element.
Each TableColumn UI Element has a
Caption and TextView UI element
as its children.
Internal
Only
Partner
Outline view of a Table UI element
Use
SAP AG 2004
SAP
SAP
UI element naming format in the Outline view
Partner
Notice that the name of any UI element is described in three parts.
Use
For example:
SalesOrdersTable [Table – Child] or
OrderNo [TableColumn – Column]
Internal
This can be generalised into three constituent parts:
Only
<UI Element Name> [<UI Element Type> – <Role>]
So SalesOrdersTable is a UI element of type Table and fulfils the role of Child with respect to
its parent UI element.
OrderNo is a UI element of type TableColumn and fulfils the role of Column with respect to its
parent UI element.
© SAP AG JA310 6-29
Binding a Table UI element to the context
z The UI elements making up a Table
Context Metadata hierarchy require several context
bindings in order to function correctly.
Context Root
SalesOrders (c=0..n)
LineItems (c=0..n)
Description
ItemNo
Internal
Only
Price
Quantity
OrderNo View layout
SalesDate
The Table UI element must have its
Partner
SalesRep dataSource property bound to a context
LongText node of cardinality 0..n or 1..n
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
Table UI Element
Partner
The Table UI element allows the two-dimensional display of data in cells arranged in rows and
Use
columns. The UI element consists of an optional header area, zero or more rows, and footer area. The
element at the lead selection in the context node becomes the highlighted row when displayed on the
screen.
Internal
The Table UI element must contain at least one TableColumn UI element.
Only
The caption appearing at the top of the table (in this case Sales Orders) is optional.
© SAP AG JA310 6-30
Binding TableColumn UI elements to the context
z TableColumn UI elements must be
Context Metadata bound to child attributes of the same
node to which the parent Table UI
Context Root element is bound.
SalesOrders (c=0..n)
LineItems (c=0..n)
Description
Each context attribute is a
ItemNo
potential candidate for
becoming a TableColumn.
Internal
Only
Price
Quantity
OrderNo
SalesDate
Partner
View layout
SalesRep
LongText
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
TableColumn UI Elements
Partner
TableColumn UI elements must be bound to the attributes of the node to which the parent Table UI
Use
element is bound. Any node attribute of a simple data type is a candidate for becoming a table column.
TableColumn UI elements are composite UI elements! This means that they must have child UI
Internal
elements in order to function correctly.
Only
© SAP AG JA310 6-31
Defining child UI elements for a TableColumn
z A TableColumn UI element must
Context Metadata have a UI element nominated to act
as the table cell editor. The column
Context Root header caption is optional.
SalesOrders (c=0..n)
LineItems (c=0..n)
Description Optional column header
(Caption UI element)
ItemNo
Internal
Only
Price
Quantity
Mandatory table cell
OrderNo editor UI element
SalesDate
Partner
SalesRep View layout
LongText
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
Child UI elements of a TableColumn
Partner
In order to present information to the user, a TableColumn UI element must have a child UI element
Use
that will act as the cell editor. In order to decide which UI element to use, ask yourself this question:
Within which type of UI element do I want the column data to appear?
Internal
The answer to this question then determines how this user interacts with the data in that one column.
Only
Don’t think that because the name of this role contains the word editor that the user can necessarily
change the data. If you select some sort of display only UI element such as a TextView, then the user
will not be able to modify the data – the UI element you chose does not permit it!
If on the other hand, you chose an InputField to be the table cell editor, then all the cells appearing
in that column would, by default, be open for input.
The caption appearing as the column header is optional, but if defined, will always be of type
Caption.
© SAP AG JA310 6-32
Table row selection
Context Root
z Each element in the node
Context Metadata Default 0 collection becomes a table
Element row
Context Root
SalesOrders (c=0..n)
LineItems (c=0..n)
SalesOrders
Description OrderNo 1
ItemNo SalesDate
OrderNo 0
SalesDate
Internal
Only
Price
Quantity
Runtime data View layout
OrderNo
SalesDate
Partner
Selecting a row on the screen causes the
SalesRep node’s lead selection to be altered
LongText
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
Table row selection and the effect on a node’s lead selection
Partner
Any time you click on a table row on the rendered screen, an HTTP round trip is initiated. This round
Use
trip will cause the lead selection of the corresponding context node to which this table is bound to be
adjusted.
In the graphic above, the node collection contains two elements, and the user has clicked on the second
Internal
table row. This corresponds to element 1 of node SalesOrders, and the lead selection of this node is
altered to reflect the user’s selection.
Only
There will be as many rows in the table as there are elements in the node collection.
You can also define a Web Dynpro Action and associate it with the Table’s onLeadSelect event.
Now, not only will the node collection’s lead selection element be adjusted when the user clicks on a
table, but your action handler will also be invoked.
© SAP AG JA310 6-33
Selecting multiple rows from a table
z Define the node’s
Context Metadata selection cardinality
Context Root
SalesOrders (c=0..n)
LineItems (c=0..n)
Description
ItemNo
Internal
Only
Price
Quantity
View layout
OrderNo
SalesDate A node’s selection cardinality controls how many
Partner
elements may be selected simultaneously within the
SalesRep element collection. 0..1 is the default.
LongText
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
Multiple selection of rows from a table
Partner
Before a user is permitted to select multiple rows from a table (by holding down shift, and clicking on
Use
the required rows), the context node to which the Table UI element is bound must have a selection
cardinality of either 0..n or 1..n. The default selection cardinality setting for any context node is
0..1, meaning that zero or one elements may be selected at any one time.
Internal
Processing context nodes with multiple element selections
In order to process all the selected elements in a node collection, it is necessary to loop around all the
Only
elements in the collection, testing the isMultiSelected flag as follows:
for (int i=0; i<wdContext.node{cn}().size(); ++i) {
if (wdContext.node{cn}().isMultiSelected(i)) {
// Do something with the selected element...
}
}
Notice that the above coding has been generalized!
Warning: If the selection cardinality has been set to 0..1 or 1..1, the flag isMultiSelected is
not set for any of the elements. To find out, which element of a collection has been selected, the method
getLeadSelection() of the node collection has to be used.
© SAP AG JA310 6-34
Composite UI Elements: Topic Summary
You should now be able to:
z Understand a basic composite UI element
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-35
UI Elements: Unit Summary
You should now be able to:
z The UI element concept
z How to put data on the screen through context
binding
z Control the behaviour of UI elements using context
binding
Internal
Only
z The use of a basic composite UI element
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-36
Exercise
Chapter: UI Elements
Theme: Standard and Container UI Elements
At the end of this Exercise, you are able to:
• Define standard UI elements (e.g. TextView, Image).
• Place the standard UI elements in container UI elements (e.g. Group,
Tray).
Internal
Only
1 Development Objectives
Partner
Container UI Elements
Use
Container UI Elements can be used to group a set of UI elements in the layout of a view.
The following container UI elements exist: Group, Scroll Container, Transparent
Container, and Tray.
For each container UI element layout properties can be used to define the alignment of the
SAP
SAP
UI elements within the container UI element.
Partner
Use
2 Result
In this exercise, you will define several
Internal
standard UI elements (such as Image,
TextView) and you will place them within
container UI elements (such as Group or
Only
Tray UI element).
Optional: You will set image properties
programmatically.
© SAP AG JA310 6-37
Exercise without optional part:
Template Solution:
WD Project: JA310_WD_UIElements_1
Application: JA310_WD_UIElements_1
Starting point:
Template WD Project: JA310_WD_ UIElements_1T
Optional Part:
Template Solution:
WD Project: JA310_WD_UIElements_1opt
Application: JA310_WD_UIElements_1opt
Internal
Only
Starting point:
Go on with your WD Project: JA310_WD_UIElements_1T
Or start from the template solution: JA310_WD_UIElements_1.
Partner
3 Prerequisites
Use
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
You have opened the JA310_WD_UIElements_1T project.
SAP
The structure this project is currently displayed in the Web Dynpro Explorer.
SAP
For your convenience, you can start
developing with a predefined view.
Partner
Use
Expand the node Ex5Comp and add
the new functionality to the existing
view Ex5View.
The screen shot on the left shows the
Internal
predefined project structure of this
exercise.
Only
© SAP AG JA310 6-38
4 Overview: Developing
4-1 Add a Tray UI element to the view Ex5View. Define the Trays title.
4-2 Add a TextView to the Tray UI element and define the text property of this element
(an arbitrary text shall be displayed).
4-3 Add a Group UI element to the Tray UI element. Define the Groups title. Position
the Group element below the TextView element.
4-4 Add an Image to the Group UI element. Name of the image: explosion.gif. This
image has already been imported into the project. In addition, set the value of the
properties alt and tooltip.
4-5 Create the Web Dynpro application JA310_WD_UIElements_1.
Internal
Only
5 Overview: Building, Deploying, and Running
Deploy and run the Web Dynpro application.
Partner
Use
6 Optional: Setting image properties programmatically
6-1 Bind the image properties alt and source to the context of the view container:
SAP
SAP
- Add a new value node to the view controller context, having the
name Image. Change the cardinality of this node to 1..1.
- Add two new value attributes to the value node Image, having the
names ImgSource and ImgAlt.
Partner
Use
- Edit the properties of the context value attributes. Set the property
calculated to true. This will result in the automatic generation of
getter methods for these context value attributes.
- Bind the properties alt and source of the Image UI element to these
Internal
context elements.
6-2 Set the image properties source and alt programmatically:
Edit the getter methods for the two context value attributes.
Only
© SAP AG JA310 6-39
Solution
Chapter: UI Elements
Theme: Container UI Elements
4 Developing, Step-by-Step
4-1 Add a Tray UI element to the view Ex5View.
Internal
Only
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_UIElements_1T / Web Dynpro / Web Dynpro
Components / Ex5Comp / Views.
Partner
Select the node Ex5View and choose Edit from the context menu.
Use
The View Designer for the view Ex5View appears
on the right pane
SAP
In the toolbar, choose Container Standard. Drag
SAP
and drop Tray to the editor pane on the right.
Partner
Use
Assign the following property values to the Tray UI element:
TrayHeader: text Image view, Tray title
Internal
Save the new project data by choosing Save All Metadata from the toolbar.
Only
© SAP AG JA310 6-40
4-2 Add a TextView to the Tray UI element.
In the Outline view, select the Tray element and
choose Insert Child from the context menu.
Add a TextView UI element to the Tray element.
Assign the following property values to the
TextView UI element:
text Tray text
Internal
Only
Partner
Save the new project data by choosing Save All Metadata from the toolbar.
Use
4-3 Add a Group to the Tray UI element.
SAP
SAP
In the Outline view, select the Tray element and choose Insert Child from the context
menu.
Or:
Partner
Use
From the toolbar, choose Container Standard and drag and drop Group to the editor
pane.
Internal
Assign the following property value to the Group_Header UI element:
Only
text Group title
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-41
4-4 Add an Image to the Group UI element.
In the Outline view, select the Group
element and choose Insert Child from
the context menu.
Or:
From the toolbar, choose Simple
Standard and drag and drop Image to the
editor pane.
Assign the following property values to
the Image UI element:
Internal
Only
alt explosion.gif
Source explosion.gif
Tooltip Boom!
Partner
The simplest way to insert a picture is by assigning its file name - in this example,
Use
explosion.gif - as a value to the source property of the Image UI element. The picture
file must be stored in the directory
<ProjectFolder>/src/mimes/Components/<ComponentPackageName
SAP
>.
SAP
This directory was automatically created when adding the Web Dynpro component
Ex5Comp.
(Optional: Take a look at Step 6. There you will find, how
Partner
Use
you can set the source property programmatically).
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
Successful Result
The Outline View shows the nested UI containers
and UI elements.
© SAP AG JA310 6-42
4-5 Create a Web Dynpro application
In the Web Dynpro Explorer, expand the node JA310_WD_UIElements_1T.
Expand the node Web Dynpro and open the context menu for Applications.
To open the wizard, choose Create Application.
In the wizard, enter:
Name JA310_WD_UIElements_1
Package com.sap.training.ja310.wd_uielements_1t
Internal
Only
Accept the other suggested values and choose Next.
Select Use existing component and choose Next.
Select
Partner
Web Dynpro Component Ex5Comp
Interface View Ex5CompInterfaceView
Use
Startup Plug Default
and choose Finish.
SAP
SAP
Successful result:
The generated Web Dynpro application object completes your project structure. You can
now deploy your project and start your Web Dynpro application.
Partner
JA310_WD_UIElements_1 enables you to address the Web application as a whole, when
Use
you launch this complete application in the next step.
Internal
Only
© SAP AG JA310 6-43
5 Building, Deploying, and Running, Step-by-Step
Deploy and run the Web Dynpro application.
In the Web Dynpro Explorer:
Expand the node JA310_WD_UIElements_1T / Web Dynpro / Applications.
Open the context menu for JA310_WD_UIElements_1
To deploy and run the application, choose Deploy new Archive and Run
Successful result:
Internal
Only
The Developer Studio launches the Web browser
and chooses the active view Ex5View.
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-44
6 Optional: Setting image properties programmatically, Step-by-Step
6-1 Bind the image properties alt and source to the context of the view.
In the View Designer, choose the tab Context.
Add a new value node to the root context node,
having the name Image. Go to the properties view
and change the value of the property cardinality to
1..1.
Add two value attributes (ImgAlt and ImgSource) to
Internal
Only
the value node Image.
Set the following property values of the context
elements ImgSource and ImgAlt:
Partner
calculated true
Use
This will automatically result in the generation of a
getter- and a setter-method for the context value
attributes ImgSource and ImgAlt, respectively.
SAP
SAP
In the View Designer, choose the tab Layout.
Partner
Use
Assign the following property values to Image UI
element
alt Image.ImgAlt
Internal
source Image.ImgSource
Only
This will bind the image properties to the view
context.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-45
6-2 Set the image properties source and alt programmatically.
In the View Designer, choose the tab Implementation, select the generated methods
getImageImgSource and getImageImgAlt. Add the following return statement:
. . .
public java.lang.String getImageImgSource(
IPrivateImageView.IContextElement element)
{
//@@begin getImageImgSource( . . .
Internal
Only
return "explosion.gif";
//@@end
}
Partner
. . .
Use
public java.lang.String getImageImgAlt(
IPrivateImageView.IContextElement element)
{
//@@begin getImageImgAlt( . . .
SAP
SAP
return "This image is not available";
//@@end
}
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
Rebuild, deploy and run the application.
Internal
Only
© SAP AG JA310 6-46
Exercise
Chapter: UI Elements
Theme: Dictionary, Table
At the end of this Exercise, you are able to:
• Define a dictionary structure and reuse it from a Web Dynpro
application.
• Define standard table functionality.
Internal
Only
1 Development Objectives
Defining Dictionary Structures
Partner
In the Web Dynpro perspective, you can comfortably create simple data types and
structures, immediately deploy them to the SAP Web Application Server, and then use
them in your Web Dynpro application straight away without having to switch to the Java
Use
Dictionary even once.
Structures created in the Java Dictionary can be reused in different Web Dynpro contexts.
SAP
SAP
Tables
Table UI elements allows authors to arrange data, preformatted text, and so on into rows
Partner
and columns of cells.
Use
Internal
2 Result
Only
In this exercise, you will define a table
and insert some data into it.
Optional part I:
You will learn, how to display details of a
selected row.
Optional part II:
You will learn, how to delete an entry of
a table.
Optional part III:
You will learn, how to sort the table
content.
© SAP AG JA310 6-47
Exercise without optional part:
Template Solution:
WD Project: JA310_WD_UIElements_2
Application: JA310_WD_UIElements_2
Starting point:
Template WD Project: JA310_WD_UIElements_2T
Optional Part I:
Template Solution:
WD Project: JA310_WD_UIElements_2opt1
Application: JA310_WD_UIElements_2opt1
Starting point:
Internal
Only
Go on with your WD Project: JA310_WD_UIElements_2T
Or start from the template solution: JA310_WD_UIElements_2.
Optional Part II:
Partner
Template Solution:
WD Project: JA310_WD_UIElements_2opt2
Use
Application: JA310_WD_UIElements_2opt2
Starting point:
Go on with your WD Project: JA310_WD_UIElements_2T
SAP
Or start from the template solution: JA310_WD_UIElements_2opt1.
SAP
Optional Part III:
Template Solution:
Partner
Use
WD Project: JA310_WD_UIElements_2opt3
Application: JA310_WD_UIElements_2opt3
Starting point:
Go on with your WD Project: JA310_WD_UIElements_2T
Internal
Or start from the template solution: JA310_WD_UIElements_2opt2.
Only
© SAP AG JA310 6-48
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
You have opened the JA310_WD_UIElements_2T project.
The structure of this project is currently displayed in the Web Dynpro Explorer.
For your convenience, you can start
developing with a predefined view.
Expand the node Exc_UI_02 and add the
new functionality to the existing view
Internal
Only
TableView.
The graphic on the left shows the
predefined project structure of this exercise
Partner
with the predefined views:
StartView
Layout completely predefined.
Use
TableView
Here you have to insert a table
displaying person information.
SAP
TableDetailView
SAP
This is only needed for the
optional exercise.
Partner
Use
4 Overview: Developing
Internal
4-1 Define the data transport from the StartView to the Component Controller.
Only
4-1-1 Define a Dictionary structure type, having the Name Person and the
components FIRSTNAME, LASTNAME (both of type string, not null),
DATEBEGIN and DATEEND (both of type date).
4-1-2 Define a new value node for the context of the view StartView having the
name Person with structure binding to the structure Person you have
defined in the step before.
In the Properties View, set the cardinality of this node to 1..1.
4-1-3 For the view StartView, bind the input field UI elements to the value
attributes of the context node Person.
4-1-4 Create a new value node in the context of the component controller with
structure binding to the structure Person. Name this value node People.
© SAP AG JA310 6-49
4-1-5 Define the mapping between the context of the view StartView and the
context of the component controller. Map the value node People of the
component controller to the context of the view StartView.
4-1-6 Add the values of the input fields of StartView to the context node People.
The element collection of this value node will later on displayed using a
TableView UI on the view TableView.
In order to realize this task, you have to implement the handler method
onActionShowTableView(…) of the view StartView:
- Get a reference to the lead element of the Person value node (type
IPersonElement).
- Define a local instance of the context element People (type
IPeopleElement).
- Use the mutator methods of the PeopleElement instance to copy the user
input stored in the Person element to value attributes of the
Internal
Only
PeopleElement.
- Don't forget to add the local instance of the PeopleElement to the
context node People.
Partner
4-2 In the Layout of view TableView, define a table UI element. Bind this UI element
to the views context.
Use
4-2-1 Define the context mapping between the component controller and the view
TableView. Define the mapping between the value node People of the
component controller and the context of the view.
4-2-2 Define the table UI element. Position the table UI element between the
SAP
SAP
default TextView element and the Group UI element containing the Button.
4-2-3 Define the table binding between the table UI element and the context:
The elements FIRSTNAME and LASTNAME of the value node People shall
be bound to columns of the table UI element.
Partner
Use
4-3 Create the Web Dynpro application JA310_WD01_UIElements_2.
Internal
5 Overview: Building, Deploying, and Running
Deploy and run the Web Dynpro application.
Only
© SAP AG JA310 6-50
6 Optional: Additional table features.
6-1 Show Details of a selected table row in a separate view.
In this exercise, you will add an
additional view TableDetailView to the
component. When you select a table row
and choose the Details button, the view
TableDetailView will appear and the
details of the selected person will be
displayed.
Internal
Only
Partner
6-1-1 Define the data transport from the view TableView to the view
TableDetailView.
Use
- Define the context mapping between the context of the view
TableDetailView and the component controller context. Create the
context node People in the TableDetailView by mapping the component
controllers context node People to the views context.
SAP
SAP
6-1-2 Add input fields for all context elements to the detail view
TableDetailView. Apply the template Form to define input fields and
labels.
Partner
Use
6-1-3 Define the navigation between the views TableView and TableDetailView.
6-1-4 Build, deploy and run the application.
Internal
Only
© SAP AG JA310 6-51
6-2 Delete a selected table row.
In this exercise, you will add a button to the
toolbar of the table UI element, having the
following functionality:
If a table row is selected and the button Delete
Entry is pressed, the selected table row will be
deleted.
Internal
Only
6-2-1 Define a toolbar for the table in the view TableView. Add a toolbarButton
to the toolbar, having the text Delete Entry.
6-2-2 Define an action (DeleteEntry) for the toolbar button und bind the
toolbarButton to this action.
Partner
6-2-3 Implement the event handler bound to the action DeleteEntry in order to
delete a person’s entry:
The Method wdContext.nodePeople().getLeadSelection() can be used to
Use
find out the index of the selected element.
The Method wdContext.nodePeople().getElementAt(index) can be used to
get back the reference to the element with index index.
SAP
SAP
The Method wdContext.nodePeople().removeElement(object) can be used
to delete a given element object from the list of persons.
6-2-4 Build, deploy and run the application
Partner
Use
Internal
Only
© SAP AG JA310 6-52
6-3 Calculated attributes
In this exercise, you will add an additional column
Duration to the table.
This duration – which is the difference between the
start date and the end date - has to be calculated
from the values of the corresponding input fields.
6-3-1 Update the structure Person in the local dictionary. Add an additional
attribute DURATION (type long).
6-3-2 Update the context of the component controller and the mapping between
Internal
Only
the context of view TableView and the component controller.
- Add the attribute DURATION to the context value node People defined
in the component controller.
- Update the context of the view TableView: Add the additional attribute
Partner
DURATION to the context node Persons and map it to the component
context.
Use
6-3-3 Calculate the DURATION as the difference between the DATE_BEGIN
and DATE_END.
- In the component controller context, set the calculated property of the
attribute DURATION to true.
SAP
SAP
- Implement the generated method getPeopleDURATION(…). Calculate
the attribute DURATION as the difference between the attributes
DATE_END and DATE_ BEGIN. Use methods of the Class
GregorianCalendar to convert the dates to a number of milliseconds
Partner
Use
(type long), which can than be subtracted.
6-3-4 Update the table on the view TableView: Add additional columns to
display the attributes DATE_BEGIN, DATE_END, and DURATION from
the structure People.
Internal
6-3-5 Build, deploy and run the application
Only
© SAP AG JA310 6-53
Solution
Chapter: UI Elements
Theme: Dictionary, Table
4 Developing, Step-by-Step
Note: In this exercise you have to type in some lines of java code. For your convenience,
you can cut and paste the code from the corresponding solution project.
Internal
Only
But keep in mind: Some of the methods are automatically generated by Web Dynpro
.Because of that, the methods names you have to choose can differ from the method
names of the solution.
4-1 Define the data transport from the StartView to the component controller.
Partner
4-2-1 Define a Dictionary structure type.
Use
In the Web Dynpro Explorer:
SAP
SAP
Expand the nodes
JA310_WD_UIElements_2T / Dictionaries / Local
Dictionary / Data Types.
Partner
Use
Select the node Structures and open the context
menu.
Internal
Choose Create Structure.
Only
In the wizard that appears, enter
Structure Person
name
Structure com.sap.training.
package ja310.wd_uielements_2t
Choose Finish.
© SAP AG JA310 6-54
Define the elements of the structure:
Assign the following property values:
Element Name Built-in Not null
Type
FIRSTNAME string x
LASTNAME string x
DATE_BEGIN date
DATE_END date
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
4-1-2 Define a new value node for the context of the view StartView having the name
Person with structure binding to the structure Person.
Partner
In the Web Dynpro Explorer:
Use
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp / Views.
Select the view StartView and open the context menu. Choose Edit.
SAP
SAP
The Controller editor appears on the right pane.
Choose the tab Context.
Partner
Use
Open the context menu for the root node Context
and choose the option New / Value Node. Choose
Internal
Person as the nodes name and check the option
Create with structure binding.
Only
© SAP AG JA310 6-55
Select the simple data type Person, you have
defined before.
Select all structure elements to define the four
context attributes FIRSTNAME, LASTNAME,
DATE_BEGIN and DATE_END.
Internal
Only
Partner
Use
In the Properties View assign the value 1..1 to the
property cardinality of the value node Person.
SAP
SAP
Partner
Use
Internal
Save the new project data by choosing Save All Metadata from the toolbar. Only
© SAP AG JA310 6-56
4-1-3 For the view StartView, bind the input field UI elements to the value attributes
of the context node Person.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp.
Select the node Views and open the context menu of StartView.
Choose Edit.
The View Designer for StartView appears on the
right pane
Internal
Only
Choose the Layout tab.
Define the data binding between the UI elements
Partner
of the view StartView and the context value
attributes:
Use
Assign the names of the context value attributes to
the value property of the corresponding UI
elements.
SAP
SAP
Now the dummy context value attributes can be
deleted!
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
© SAP AG JA310 6-57
4-1-4 Create a new value node in the context of the component controller with
structure binding to the structure Person.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp.
Select the Component Controller and open the context menu. Choose Edit.
The Controller editor appears on the right pane.
Choose the tab Context.
Open the context menu for the root node Context
Internal
Only
and choose the option New / Value Node. Choose
People as the nodes name and check the option
Create with structure binding.
Partner
Select the simple data type Person, you have
Use
defined before.
Select all structure elements to define the four
SAP
context attributes FIRSTNAME, LASTNAME,
SAP
DATE_BEGIN and DATE_END.
Partner
Use
Internal
Only
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-58
4-1-5 Define the mapping between the context of the view StartView and the context
of the component controller.
In the context menu of the node JA310_WD_UIElements_2T / Web Dynpro / Web
Dynpro Components / Ex6Comp, select the entry Open Data Modeler:
In the left toolbar, choose Create a data link. This
is then shaded in grey.
Place the cursor on the view StartView and left-
click. Drag the data link to the Component
Controller and release the left mouse button.
Internal
Only
The dialog box for defining the context mapping
appears.
Drag and drop the value node People of the
component controller to the to the root node
Partner
(Context) of the view StartView.
Use
SAP
SAP
On the next screen check the node People. This
will also select all child attributes. Choose OK.
Partner
Use
Press Finish to complete the context mapping.
Internal
Only
© SAP AG JA310 6-59
4-1-6 Add the values of the input fields of StartView to the context node People.
In the Web Dynpro Explorer:
Double click on the view StartView.
Choose the Implementation tab.
Navigate to the event handler method
onActionShowTableView().
Add the following lines to the event handler method onActionShowTableView ():
Internal
Only
Note: Some of the following methods were generated by Web Dynpro after you’ve
specified the context value nodes and values. Because of that, the methods names
you have to choose can differ from the following names:
Partner
public void onActionshowTableView(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent) {
//@@begin onActionshowTableView(ServerEvent)
Use
// Create a new People element
IPeopleElement newPerson =
wdContext.nodePeople().createPeopleElement();
SAP
SAP
// Get a reference to the context node Person
IPersonElement person =
wdContext.nodePerson().currentPersonElement();
// Use mutator methods to set values of element attributes
Partner
Use
// of People element instance
newPerson.setFIRSTNAME(person.getFIRSTNAME());
newPerson.setLASTNAME(person.getLASTNAME());
newPerson.setDATE_BEGIN(person.getDATE_BEGIN());
newPerson.setDATE_END(person.getDATE_END());
Internal
// Add People element instance to context node
wdContext.nodePeople().addElement(newPerson);
Only
wdThis.wdFirePlugToTableView();
//@@end
}
This method is called, after the user has pressed the button Show names.
The Web Dynpro automatically stores the values of the input fields in the component
context. The data entered in the view StartView is added to the element collection of
the node People.
In the next steps, the columns of a TableView UI element are bound to this context
node, the element collection is displayed – each element making up a single line.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-60
4-2 In the Layout of view TableView, define a table UI element. Bind this UI element to the
views context.
4-2-1 Define the context mapping between the component controller and the view
TableView..
In the Web Dynpro Explorer:
Expand the nodes
JA310_WD_UIElements_2T / Web Dynpro / Web
Dynpro Components / Ex6Comp.
Internal
Only
Double click on the node Ex6Comp.
This will open the diagram for the component.
Partner
Place the cursor on the view TableView and left-
click. Drag the data link to the Component
Controller and release the left mouse button.
Use
The dialog box for defining the context mapping
appears.
SAP
SAP
Edit the context mapping between the component
controller and the view TableView by double
clicking on the corresponding data link.
Partner
Use
Drag and drop the node People from the
component controller context to the root node of
the view controller TableView.
Internal
Press Finish.
Select the node People. This will also select all Only
child attributes.
Press OK.
© SAP AG JA310 6-61
On the next screen, the resulting mapping
relationship is displayed.
Press Finish.
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
4-2-2 Define the table UI element.
Partner
In the Web Dynpro Explorer:
Use
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro /
Web Dynpro Components / Ex6Comp.
SAP
SAP
Select the node Views.
Open the context menu of TableView.
Choose Edit.
Partner
Use
The View Designer for TableView appears on the
right pane
Internal
In the toolbar, choose Complex Standard and drag
Only
and drop Table to the editor pane on the right.
In the Outline View, drag and drop the table UI
element to the correct position.
In the Properties View for the Table UI element,
assign the value MatrixHeadData to the property
layoutdata.
© SAP AG JA310 6-62
4-2-3 Define the table binding between the table UI element and the context.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp.
Select the Views node and open the context menu of TableView.
Choose Edit.
The View Designer for the view TableView
appears on the right pane
Internal
Only
Choose the Layout tab and then choose the table
UI element.
Partner
Open the context menu and choose Create
Binding.
Use
In the wizard that appears, select FIRSTNAME
and LASTNAME from the node People.
SAP
SAP
Choose Finish.
Partner
Use
Internal
Save the new project data by choosing Save All Metadata from the toolbar.
Only
© SAP AG JA310 6-63
4-3 Create a Web Dynpro application
In the Web Dynpro Explorer, expand the node JA310_WD_UIElements_2.
Expand the node Web Dynpro and open the context menu for Applications.
To open the wizard, choose Create Application.
In the wizard, enter:
Name JA310_WD_UIElements_2
Package com.sap.training.ja310.wd_uielements_2t
Internal
Only
Accept the other suggested values and choose Next.
Select Use existing component and choose Next.
Select
Partner
Web Dynpro Component Ex6Comp
Interface View Ex6CompInterfaceView
Use
Startup Plug Default
and choose Finish.
SAP
SAP
Successful result:
The generated Web Dynpro application object completes your project structure. You
Partner
can now deploy your project and start your Web Dynpro application.
Use
JA310_WD_UIElements_2 enables you to address the Web application as a whole,
when you launch this complete application in the next step.
Internal
Only
© SAP AG JA310 6-64
5 Building, Deploying, and Running, Step-by-Step
Deploy and run the Web Dynpro application.
In the Web Dynpro Explorer:
Expand the node JA310_WD_UIElements_2T / Web Dynpro / Applications.
Open the context menu for Ex6Comp.
To deploy and run the application, choose Deploy new Archive and Run.
Successful result:
Internal
Only
The Developer Studio launches the Web browser
and chooses the active view StartView.
You can insert some values in the input fields and
Partner
choose the button Show Names.
First, these values are stored in the attributes of the
Use
node Person, defined in the views context.
The values are then copied programmatically to
the elements of the value node People, defined in
SAP
SAP
the component controller context. This context
element collection is then visualized by the table
UI element, which is bound to the context node
People.
Partner
Use
Internal
Only
© SAP AG JA310 6-65
6 Optional: Additional table features, Step-by-Step
6-1 Show Details of a selected table row in a separate view.
6-1-1 Define the data transport from the view TableView to the view
TableDetailView.
To transport the person detail data between the two views, it is necessary to define the
People context node in the TableDetailView context and map the node to the
corresponding node in the component controller context.
- Define the context mapping between the context of the view TableView and the
component controller context.
Internal
Only
Create a data link between the view
TableDetailView and the component controller.
Partner
Use
SAP
SAP
In the next screen drag and drop the node People
from the right side (component controller context)
to the root node (Context) on the left side
Partner
(TableDetailView context).
Use
Internal
Only
Check the node People. This will also check all
child attributes.
© SAP AG JA310 6-66
Now we have created a new context node in the
TableDetailView, which has the structure of the
node People in the component controller context
and which is mapped to this node.
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
6-1-2 Add input fields for all context elements to the detail view TableDetailView.
Apply the template Form to define input fields and labels.
Partner
In the Web Dynpro Explorer:
Use
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp.
SAP
Select the node Views and open the context menu of view TableDetailView.
SAP
Choose Edit.
The View Designer for TableDetailView appears
Partner
Use
on the right pane
Choose the Layout tab.
Internal
The Outline view appears in the lower left side of
Only
the SAP NetWeaver Developer Studio.
Choose the predefined Group node and choose
Apply Template from the context menu.
© SAP AG JA310 6-67
In the wizard that appears, choose Form.
Choose Next.
Internal
Only
On the next screen select all attributes from the
structure People.
Partner
Choose Finish.
Use
SAP
SAP
Successful result:
Partner
Use
The wizard creates all necessary labels and input
fields for the view TableDetailView. The data
bindng between the input fields and the context
Internal
attributes is also defined automatically.
Save the new project data by choosing Save All Metadata from the toolbar.
Only
© SAP AG JA310 6-68
6-1-3 Define the navigation between the views TableView and TableDetailView.
In the Web Dynpro Explorer:
JA310_WD_UIElements_2T / Web Dynpro / Web
Dynpro Components / Ex6Comp.
Double click on the node Windows / Ex6Comp.
This will open the Diagram View.
Click on the first icon in the list to embed a view.
In the wizard that appears, choose Embed existing
view.
Internal
Only
Choose TableDetailView
Choose Finish
Partner
Define the following plugs and navigation links:
Use
From to
Outbound plug Inbound plug
toDetailView fromTableView
SAP
SAP
toTableView fromDetailView
Partner
Use
Internal
In TableView
Only
Choose the Action tab.
Define a new Action ShowDetailView (fires plug
toDetailView).
Enter the value Details in the field with the label
Text
© SAP AG JA310 6-69
Choose the Layout tab.
Add a button to the button group.
Choose the following properties:
Event onAction ShowDetails
Internal
Only
Partner
Repeat the last two steps to define the navigation
back to the view TableView.
Use
In TableDetailView
SAP
SAP
Choose the Action tab.
Define a new Action ShowTableView (fires plug
toTableView).
Partner
Use
Enter the value Back in the field with the label
Text
Internal
Choose the Layout tab.
Add a button.
Only
Choose the following properties:
Event onAction ShowDetails
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-70
6-1-4 Build, deploy and run the application.
Take a look at exercise 5.
Successful result:
As a result of this exercise, you added an
additional view TableDetailView to the
component. When you select a table row and
choose the Details button, the TableDetailView
appears and shows all details of the selected
person.
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 6-71
6-2 Delete a selected table row.
6-2-1 Define a toolbar for the table in the view TableView. Add a toolbarButton to the
toolbar.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro
Components / Ex6Comp.
Select the node Views and open the context menu of TableView.
Choose Edit.
The View Designer for TableView appears on the right pane
Internal
Only
Choose the Layout tab.
The Outline view appears in the lower left side of
the SAP NetWeaver Developer Studio.
Partner
Select the node table. Open the context menu and
Use
choose Insert Toolbar.
Select the new Toolbar node. Open the context
SAP
SAP
menu and choose Insert ToolBarItem.
Define an element of the type ToolbarButton.
Partner
Use
Choose Finish.
Internal
Save the new project data by choosing Save All Metadata from the toolbar.
Only
© SAP AG JA310 6-72
6-2-2 Define an action for the toolbar button und bind the toolbarButton to this action.
Choose the tab Actions for the view TableView.
Define a new Action
Name: DeleteEntry
Text Delete Entry
Event Handler: Default
Fire Plug: <none>
Internal
Only
Choose Finish.
Choose the tab Layout of the view TableView.
Partner
Use
Update the properties of the toolbar button:
Event onAction DeleteEntry
Text Delete Entry
SAP
SAP
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
© SAP AG JA310 6-73
6-2-3 Implement the event handler for deleting a person entry.
Choose the tab Implementaion of the view TableView
Insert the following code in method onActionDeleteEntry(…)
public void onActionDeleteEntry(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent) {
//@@begin onActionDeleteEntry(ServerEvent)
// Get lead selection of node People
int lead = wdContext.nodePeople().getLeadSelection();
// Delete element at lead selection
wdContext.nodePeople().removeElement(
wdContext.nodePeople().getElementAt(lead));
//@@end
Internal
Only
Save the new project data by choosing Save All Metadata from the toolbar.
Partner
6-2-5 Build, deploy and run the application.
Use
Take a look at exercise 5.
SAP
SAP
Successful result:
Partner
Use
In this exercise, you have added a button to the table
toolbar, which allows to delete a selected table row.
Internal
Only
© SAP AG JA310 6-74
6-3 Calculated attributes
6-3-1 Update the structure Person in the local dictionary. Add an additional attribute
DURATION (type long).
In the Web Dynpro Explorer, expand the nodes JA310_WD_UIElements_2T /
Dictionary / Local Dictionary / Data Types / Structures.
Select the node Person, open the context menu and
choose Edit.
The Structure editor appears on the right pane
Internal
Only
Add the additional field DURATION of type long.
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
SAP
SAP
6-3-2 Update the component context.
- Add the attribute DURATION to the context value node Person
Partner
Use
In the Web Dynpro Explorer, expand the nodes
JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro Components.
Select the node Exc_UI_02, open the context menu and choose Edit.
Internal
In the context editor that appears, choose the tab
Context.
Only
Choose the node People, open the context menu and
choose Edit Structure Binding.
© SAP AG JA310 6-75
In the wizard that appears select also DURATION
and choose Finish.
Now the node People in the component controller
has been extended by the attribute DURATION.
- Update the context of the view TableView
Internal
Only
Edit the context mapping between the view
TableView and the component controller, by
double clicking on the corresponding data link in
Partner
the Diagram View.
Use
SAP
SAP
Drag and drop the attribute DURATION from the
component controller (right side) to the node
Partner
People of the view context (left side).
Use
Press Finish.
Internal
Only
On the next screen choose DURATION and press
OK.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 6-76
6-3-3 Calculate the DURATION as the difference between the DATE_BEGIN and
DATE_END.
- In the component controller context, set the calculated property of the attribute
DURATION to true.
In the Web Dynpro Explorer, expand the nodes
JA310_WD_UIElements_2T / Web Dynpro / Web Dynpro Components.
Select the node Ex6Comp, open the context menu and choose Edit.
In the context editor choose the DURATION entry
and change its property calculated to true,
Internal
Only
Partner
Save the new project data by choosing Save All Metadata from the toolbar.
Use
- Implement the generated method getPeopleDURATION(…).
SAP
SAP
In the context editor choose the IMPLEMENTATION tab and navigate to the method
getPeopleDURATION(…):
Partner
Use
package com.sap.training.ja310.wd_uielements_2opt3;
//@@begin imports
import java.sql.Date;
Internal
import java.util.Calendar;
import java.util.GregorianCalendar;
import com.sap.training.ja310.wd_uielements_2opt3
Only
.wdp.IPrivateEx6Comp;
//@@end
...
public long getPeopleDURATION(IPrivateEx6Comp
.IPeopleElement element)
{
//@@begin getPeopleDURATION(...)
// Get values of element attributes DATE_BEGIN and DATE_END
Date dateBegin = element.getDATE_BEGIN();
Date dateEnd = element.getDATE_END();
// Convert DATE_BEGIN to relative Time in Milliseconds
Calendar calBegin = new GregorianCalendar();
calBegin.setTime(dateBegin);
long dt1 = calBegin.getTimeInMillis();
© SAP AG JA310 6-77
// Convert DATE_END to relative Time in Milliseconds
Calendar calEnd = new GregorianCalendar();
calEnd.setTime(dateEnd);
long dt2 = calEnd.getTimeInMillis();
// Calculate difference between DATE_BEGIN and DATE_END
// in Milliseconds and convert back to days
long days = (dt2 - dt1) / 86400000;
// correct by one day e.g. start today / end today
// -> duration 1 day
return ++days;
//@@end
Internal
Only
Save the new project data by choosing Save All Metadata from the toolbar.
Partner
6-3-4 Update the table on the view TableView: Add additional columns to display the
attributes DATE_BEGIN, DATE_END, and DURATION from the structure
Use
People.
In the Web Dynpro Explorer, expand the nodes JA310_WD_UIElements_2T / Web
SAP
SAP
Dynpro / Web Dynpro Components / Views.
Choose TableView, open the context menu and choose Edit.
Partner
Use
In the view editor that appears, choose the tab
Layout.
Internal
In the Outline View, choose the table UI element,
open the context menu and choose Create Binding.
Only
© SAP AG JA310 6-78
In the wizard that appears, choose in addition
DATE_BEGIN, DATE_END, and DURATION.
Choose Finish.
Internal
Only
Partner
Save the new project data by choosing Save All Metadata from the toolbar.
Use
6-3-5 Build, deploy and run the application.
SAP
SAP
Take a look at exercise 5.
Partner
Use
Successful result:
In this exercise, you have added three additional
Internal
columns (DURATION , DATE_BEGIN and
DATE_END) to the table UI element.
Only
The duration is calculated as the difference between
the start date and the end date.
© SAP AG JA310 6-79
Language Support and Messages
Contents:
z Introduction to Internationalization
z Message Editor
z IWDMessageManager class
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-1
Messages and Error Handling: Unit Objectives
After completing this unit, you will be able to:
z Understand SAP’s implementation of the XLIFF
standard.
z Define message texts using the Message Editor.
z Report messages to the user using the
IWDMessageManager class.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-2
Internationalization
z The process by which language specific text is detached from the
program code that uses it is known as “Internationalization”.
z This allows the same program to operate in multiple languages
without needing different versions of the code for each language.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Internationalization
Partner
Due to the fact that “Internationalization” is such a long word, it is often abbreviated to “I18N”. That is,
Use
the first letter “I”, the last letter “N”, and don’t bother about the 18 other letters in between!
Internal
Only
© SAP AG JA310 7-3
The XLIFF standard
z The XML Language Interchange File Format (XLIFF) is a standard
by which language specific text can be stored and managed in XML
files.
z SAP has implemented a variant of this standard within the
NetWeaver Developer Studio.
z The SAP implementation of the XLIFF standard is known as SAP
Supported XLIFF or S2X.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-4
Language specific text within Web Dynpro (1)
z Within Web Dynpro, there are certain places where language
specific text can be hard coded in a coding entity. These include:
The text and tool tip properties of UI elements
Text descriptions for Actions defined in a view controller
Window titles
Text values and descriptions within the Java dictionary
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
All language specific text values are stored in .xlf files.
Partner
.xlf files are stored in src/packages/{pkgn}/…/{pkg1}
Use
When creating the archive for a Web Dynpro project, a standard .properties file is derived from the
content of all .xlf files (per language).
.properties files are stored in gen_wdp/packages/{pkgn}/…/{pkg1}/wdp
Internal
Only
© SAP AG JA310 7-5
Language specific text within Web Dynpro (2)
All language specific
texts are assumed to
be defined in the Web
Dynpro DC or Project
language.
Consequently, when you
Internal
Only
edit these text values,
you do not have the
option to change the
language.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-6
Language specific text within Web Dynpro (3)
z All language specific text values are stored in .xlf files
WD element Name of *.xlf file
MessagePool {nc}MessagePool.wdmessagepool.xlf
View {nv}.wdview.xlf
{nv}.wdcontroller.xlf
Window {w}.wdwindow.xlf
Internal
Only
SimpleType {st}.dtsimpletype.xlf
Partner
Use
SAP AG 2004
SAP
SAP
The version of the NetWeaver Developer Studio shipped with the NetWeaver ’04 release does not
Partner
currently have any tools for translation support. The following example illustrates the manual process
Use
required for translation. Lets say that a project has been created in British English, and all its text must
be translated to German.
y In the Navigator View, locate all the relevant .xlf files under the directory
src/packages/{pkgn}/.../{pkg1}.
Internal
y Using the context menu copy and paste each file making sure that you rename the copied file
correctly! If {file}.xlf is the name of the file in the project language and {iso} indicates the
Only
ISO code for your required language or dialect, the name of the copied file follows the following rule:
{file}.xlf Æ {file}_{iso}.xlf
y Once the files have been copied correctly, the contents can be edited by double clicking on the .xlf
file name and the S2X editor will open. The text values can then be translated manually.
y Finally, you have to rebuild the Web Dynpro Project and create the archive. This will create the
.properties files used at runtime.
Important!
You may only translate Web Dynpro projects into those languages and dialects supported by standard
SAP systems!
© SAP AG JA310 7-7
Runtime Locale Identification
User URL User ID Browser DefaultLoc. WD VM Final
property System Default Locale
Developer en de fr it ru jp en
Authenticated de fr it ru jp de
Anonymous fr it ru jp fr
Internal
Only
Anonymous it ru jp it
Anonymous ru jp ru
Anonymous jp jp
Partner
Use
SAP AG 2004
SAP
SAP
Determine Language Specific Text Information at Runtime
Partner
The session locale is the locale that is specified for the current user by the user management engine
Use
(UME). The fallback sequence is:
y In case of an authenticated user, the locale specified for this user is returned.
y Otherwise, the locale specified by the browser settings ("accept-language" HTTP header) is returned if
existing.
Internal
y Otherwise the default locale specified in the application properties is returned if existing.
y Otherwise the default locale specified in the Web Dynpro system properties is returned if existing.
y Otherwise the default locale of the VM is returned.
Only
The locale calculated by the Web Dynpro Runtime (last column) is passed to the
java.lang.ResourceBundle class loaded by the SAP J2EE Engine. This class uses the following fallback
sequence to load a physically existing resource bundle:
y load resource bundle for WD calculated locale
y if not existing: load resource bundle for the default locale of the VM
y if not existing: load resource bundle without language suffix, which always exists
© SAP AG JA310 7-8
Message Editor
z Use the Message Editor to create and edit messages that you
want to display on the screen
Internal
Only
Double click on the Message Pool
Partner
to open the editor, or select Open
Message Editor from the context
menu.
Use
SAP AG 2004
SAP
SAP
Message Editor
Partner
The message editor will create 4 different types of message – Standard, Warning, Error and Text.
Use
The first three message types (Standard, Warning and Error) are used for supplying information to the
screen in the form of messages. Any message declared as one of these types will be created as a Java
constant in the class IMessage{nc}.
Internal
Messages of type Text are not created as Java constants within class IMessage{nc}. Messages of type
Only
Text should be used to stored the values for UI elements such as Captions and TextViews. These
values can be accessed through class IWDTextAccessor.
© SAP AG JA310 7-9
Accessing arbitrary texts from message pool
z Accessing the Text Accessor from the current Component
IWDTextAccessor txtAccessor = wdComponentAPI.getTextAccessor();
z Get a message by name from the Message Pool
String msg = txtAccessor.getText("{MessageKey}");
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Accessing arbitrary texts from the message pool
Partner
The class IWDTextAccessor can be used to access all texts defined in the components message pool.
Use
To identify the message, the messages key {MessageKey} has to be provided.
Internal
Only
© SAP AG JA310 7-10
Putting messages onto the UI
z When you want to place a message on the screen, it is necessary
to use the IWDMessageManager class.
z No matter how many Views you have in your Web Dynpro
Component, there will only ever be one IWDMessageManager!
Internal
Only
Unless specified otherwise,
all messages will appear at
Partner
the bottom of the screen.
Use
SAP AG 2004
SAP
SAP
Default Message Area
Partner
By default, when messages are sent to the UI, they will appear as a table in the bottom left of the screen.
Use
Message Area UI element
If desired, you can add a Message Area UI element to your view. The location of this UI element will
now be the location in which messages will be displayed.
Internal
Only
© SAP AG JA310 7-11
Web Dynpro Messages – without link to UI Element
z Accessing the Message Manager
IWDMessageManager msgMgr = wdComponentAPI.getMessageManager();
z Reporting a simple message
msgMgr.reportMessage(IMessage{nc}.{MessageKey},
new Object[] {p1,…,pn} ,
boolean);
Access to the Message
having the key
{MessageKey}
Internal
Only
defined by the Message Cancel navigation as a
Editor in Component result of an error
{nc}. (true) or not (false)
Messages of type text Parameter values for
can not be reported. Placeholders in Message
Partner
Use
SAP AG 2004
SAP
SAP
Principles for using the IWDMessageManager class
Partner
y It is often useful to create a class wide variable for the component’s message manager. That way,
Use
every method in the current controller has a single point of access to the message manager.
y The message manager is capable of terminating navigation! When an outbound navigation plug is
fired, the a special asynchronous navigation event is raised. During a single request/response cycle,
multiple navigation events could be raised. All these events are placed into a navigation queue that is
Internal
processed once the wdDoBeforeNavigation() method has been called. If you call the message
manager with a cancelNavigation value of true, then irrespective of the number of navigation
Only
events in the queue, the entire queue is ignored!
y Class IMessage{nc}.java will contain all the declared messages of type Standard, Warning and
Error within the component’s message pool. These can be returned as objects of type IWDMessage.
y IWDMessageManager.report*() methods add a message to the message manager’s message
table and return control to the calling program.
© SAP AG JA310 7-12
Linking messages with UI elements in error
z When the IWDMessageManager is used to display a message, it
can be passed the metadata of the field containing the erroneous
value.
Then the error message becomes a link. Clicked on this link will
reposition the cursor to the field whose value must be corrected.
1. Pass the metadata of the
field containing the
erroneous value to
Internal
Only
IWDMessageManager.
Partner
2. Now the input field and the
error message are linked
to each other
Use
SAP AG 2004
SAP
SAP
Linking error messages with UI elements
Partner
If the user enters an invalid value into a UI element, then when the IWDMessageManager is told to
Use
report an error, it can be passed the context metadata of the attribute to which the UI element is bound.
By this way, the IWDMessageManager is able to establish a link between the text of the error
message appearing on the screen, and the UI element containing the invalid value.
Internal
The user can then click on the error message and the cursor will be repositioned on the offending field.
Only
© SAP AG JA310 7-13
Web Dynpro Messages – with link to UI Element
z Report a message with reference to the context (links message to the
offending field)
msgMgr.reportContextAttributeMessage(nodeElement,
attrInfo,
IMessage{nc}.{MessageKey},
new Object[] {p1,…,pn},
boolean);
Metadata of context attribute {ca}, containing the erroneous value
Internal
Only
IWDAttributeInfo attrInfo =
wdContext.node{cn}.getNodeInfo().
getAttribute({ca});
Reference to element at lead selection, having {ca} as a child
Partner
I{cn}Element nodeElement =
wdContext. node{cn}.current{cn}Element();
Use
SAP AG 2004
SAP
SAP
Principles for using the IWDMessageManager class
Partner
y If a message is reported with reference to the context, the UI Element bound to the context element is
Use
identified with a red border.
y IWDMessageManager.report*() methods add a message to the message manager’s message
table and return control to the calling program.
Internal
Only
© SAP AG JA310 7-14
Web Dynpro Messages – Instant message output
z Checking the Exception Manager for stored messages and
terminate user coding processing
wdComponentAPI.getMessageManager()
.raisePendingException();
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
IWDMessageManager.raise*() methods add a message to the message manager’s message table
Partner
and do not return control to the calling program. This causes a forcible termination of user coding in the
Use
current controller in the same way that the ABAP statement RAISE immediately terminates an ABAP
program.
Internal
Only
© SAP AG JA310 7-15
Messages and Error Handling: Unit Summary
You should now be able to:
z Understand SAP’s implementation of the XLIFF
standard.
z Define message texts using the Message Editor.
z Report messages to the user using the
IWDMessageManager class.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-16
Exercise
Chapter: Error Handling
Theme: Display messages
At the end of this Exercise, you are able to:
• create messages with the Message Editor
• display messages of different types in the Web browser.
Internal
Only
1 Development Objectives
Messages
Partner
The Web Dynpro runtime environment provides generic UI services, which enables the
application developers to display messages of different types in the Web browser. It is
possible, that several messages are displayed at the same time. Some of these messages
Use
may be error messages.
The messages are displayed as hyperlinks. When clicking one of these links, an input
recommendation describing how to correct the error in the corresponding UI element is
automatically displayed.
SAP
SAP
2 Result
Partner
Use
In this exercise you will learn, how to
display messages of different types in the
Web browser, e.g., support the user with
Internal
the task of correcting faulty input values or
help the user if he has left out mandatory
inputs
Only
© SAP AG JA310 7-17
Exercise without optional part:
Template Solution:
WD Project: JA310_WD_Messages
Application: JA310_WD_Messages
Starting point:
Template WD Project: JA310_WD_Messages_T
Optional Part I:
Template Solution:
WD Project: JA310_WD_Messages_opt1
Application: JA310_WD_Messages
Internal
Only
Starting point:
Go on with your WD Project: JA310_WD_Messages_T
Or start from the template solution: JA310_WD_Messages.
Optional Part II:
Partner
Template Solution:
WD Project: JA310_WD_Messages_opt2
Use
Application: JA310_WD_Messages
Starting point:
Go on with your WD Project: JA310_WD_Messages_T
SAP
Or start from the template solution: JA310_WD_Messages_opt1.
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-18
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
You have opened the JA310_WD_Messages_T project.
The structure this project is currently displayed in the Web Dynpro Explorer.
For your convenience, you can start
developing with predefined views.
Expand the node Ex7Comp. The graphic on
the left shows the predefined project
Internal
Only
structure of this exercise.
Partner
Use
SAP
SAP
Partner
Use
Navigation:
StartView
Inbound and outbound plugs are
predefined.
Internal
TableView
Inbound and outbound plugs are
Only
predefined.
Context Mapping
StartView
The view context and context
mapping are predefined.
TableView
The view context and context
mapping are predefined.
© SAP AG JA310 7-19
4 Overview: Developing
4-1 Create the Web Dynpro application JA310_WD_Messages, deploy and run the Web
Dynpro application. The following screen appears:
So far, there are no validity checks related
to the input fields. No messages are
displayed, if the user enters invalid data in
these fields.
Your task is:
Internal
Only
- Examine, whether the mandatory fields LASTNAME and FIRSTNAME are
indicated
- Examine, whether the DATE_BEGIN or the DATE_END is in the past.
4-2 Create Messages
Partner
4-2-1 Define two new error messages with the Message Editor.
The first message shall be displayed, if a mandatory field has no value. Use
Use
a placeholder to allow displaying the name of the mandatory field.
The second message shall be displayed, if the date is in the past. Use two
placeholders to allow displaying the field name and the field value in the
message.
SAP
SAP
4-3 Define check methods in the view StartView.
4-3-1 Define the methods checkMandatory (void, Parameter fieldname, Type
String) and checkDateIsInPast (void, Parameter fieldname, Type String).
Partner
4-3-2 Implement the method checkMandatory:
Use
- First define a variable of Type IWDMessageManager and get a
reference to the components message manager.
- Next define a variable of Type String and get the attribute value of the
Internal
field under consideration. Here, the Method getAttributeAsText() of the
element at the lead selection can be used.
Only
- Now define an object of Type IWDAttributeInfo and get a reference to
the fields attributes.
- If no value was entered by the user (field length equals 0), use the
Method reportContextAttributeMessage of the message manager to
define the resulting message.
4-3-3 Implement the method checkDateIsInPast:
- First define a variable of Type IWDMessageManager and get a
reference to the components message manager.
- Next define a variable of Type Date (java.util.sql) and get the attribute
value of the field under consideration. Here, the Method
getAttributeValue() of the element at the lead selection can be used.
However, because the returned value is of the generic type Object, the
result has to be casted to type Date.
© SAP AG JA310 7-20
- Now define an object of Type IWDAttributeInfo and get a reference to
the fields attributes.
- Check if the date is in the past. Here the helper class DateCalculator,
Method isInPast() can be used. This class has already been imported to
the implementation of the view StartView.
Use the method reportContextAttributeMessage of the message manager
to define the resulting message.
4-3-4 Update the Action onActionShowTableView ():
- Call the Message checkMandatory for the String fields and the method
checkDateIsInPast for the Date fields.
- Use the method raisePendingException of the message manager to
display the messages.
4-4 Create the Web Dynpro application JA310_WD_Messages
Internal
Only
5 Overview: Building, Deploying, and Running
Partner
Deploy and run the Web Dynpro application.
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-21
6 Optional 1: Define an additional check method
6-1 Define checkDateIsValid(). This method checks, if a date input field contains a
valid value.
6-1-1 Define a new error message DataIsNotValid without placeholders.
6-1-2 Define the method checkDateIsValid (Parameter fieldname, Type String).
6-1-3 Implement the method checkDateIsValid. Here the method
DateCalculater.isValid (Parameter dt, Type Date) can be used.
6-1-4 Update the Method onActionShowTableView(). Check if the values of both
Date fields are valid dates.
6-2 Build, deploy and run the application.
Internal
Only
7 Optional 2: Insert additional check method
7-1 Define checkDateRange(). This method shall check, if a start date is before a
corresponding end date
Partner
7-1-1 Define a new error message EndDateBeforeStartDate with two placeholders
for the two dates.
Use
7-1-2 Define the method checkDateRange.
7-1-3 Implement the method checkDateRange. If an error is found, this error shall
be bound to the field for the end date. Here the method
SAP
DateCalculater.isAfter (Parameter d1 and d2, both Type Date) can be used.
SAP
7-1-4 Update the method onActionShowTableView().
7-2 Build, deploy and run the application.
Partner
Use
Internal
Only
© SAP AG JA310 7-22
Solution
Chapter: Error Handling
Theme: Display messages
4 Developing, Step-by-Step
Note: In this exercise you have to type in some lines of java code. For your convenience,
you can cut and paste the code from the corresponding solution project.
Internal
Only
But keep in mind: Some of the methods are automatically generated by Web Dynpro .
For this reason, the methods names you have to choose can differ from the method
names of the solution.
Partner
4-2 Create Messages.
Use
4-2-1 Define two new error messages with the Message Editor.
In the Web Dynpro Explorer:
SAP
SAP
Expand the nodes JA310_WD_Messages_T / Web Dynpro / Web Dynpro Components /
Ex7Comp
Open the context menu of Message Pool.
Partner
Choose Open Message Editor.
Use
In the Message Editor, create two new messages
Internal
Only
Define the following messages:
Message Key Message Type Message Text
MissingInput error Entry of a valid {0} is required for
proceeding.
DataIsInPast error Please enter a valid date for field {0}. You
entered {1}, which is a date in the past
and therefore not a valid date.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 7-23
4-3 Define check methods in the view StartView.
4-3-1 Define methods checkMandatory and checkDateIsInPast
Open the view StartView with the View Editor:
Choose the tab Method.
Define the following methods:
Internal
Only
Return Type Name Parameters
Partner
void checkMandatory String fieldname
void checkDateIsInPast String fieldname
Use
Save the new project data by choosing Save All Metadata from the toolbar.
4-3-2 Implement method checkMandatory.
SAP
SAP
Open StartView with the View Editor:
Partner
Use
Choose the tab Implementation.
Internal
Only
© SAP AG JA310 7-24
Choose the method checkMandatory(…).
Error messages, which may be contained in the event handler, are first stored internally
and are displayed by calling the interface method raisePendingException() of the
IWDMessageManager interface.
public void checkMandatory( java.lang.String fieldname )
{
//@@begin checkMandatory()
// Get reference to Mapping Manager
IWDMessageManager msgMan = wdControllerAPI.getComponent()
Internal
Only
.getMessageManager();
// Get field value of attribute under investigation
String value = wdContext
Partner
.nodePerson()
.currentPersonElement()
.getAttributeAsText(fieldname);
Use
// Get field properties of attribute under investigation
IWDAttributeInfo personAttr = wdContext
SAP
.nodePerson()
SAP
.getNodeInfo()
.getAttribute(fieldname);
Partner
// Check if any input is provided
Use
if (value.length() == 0) {
// if not: report error, which is related to context attribute
Internal
..// under investigation
msgMan.reportContextAttributeMessage(
Only
wdContext.nodePerson().currentPersonElement(),
personAttr,
IMessageEx7Comp.MISSING_INPUT,
new Object[] { fieldname },
true);
}
//@@end
}
© SAP AG JA310 7-25
4-3-3 Implement the method checkDateIsInPast
You can implement the code to check the date on your own or you can use the Helper
class com.sap.training.ja310.wd_messages_t.util.DateCalculator.
This predefined class contains some static methods to check a dates.
public void checkDateIsInPast( java.lang.String fieldname)
{
//@@begin checkDateIsInPast()
// Get reference to Mapping Manager
Internal
Only
IWDMessageManager msgMan = wdControllerAPI.getComponent()
.getMessageManager();
// Get field value of attribute under investigation
Partner
Date usrDate =(Date) wdContext
.nodePerson()
.currentPersonElement()
Use
.getAttributeValue(fieldname);
// Get field properties of attribute under investigation
SAP
SAP
IWDAttributeInfo personAttr = wdContext
.nodePerson()
.getNodeInfo()
.getAttribute(fieldname);
Partner
Use
// Check if date is in past using helper method
if (DateCalculator.isInPast(usrDate)) {
Internal
// If yes: report error message
msgMan.reportContextAttributeMessage(
Only
wdContext.nodePerson().currentPersonElement(),
personAttr,
IMessageEx7Comp.DATA_IS_IN_PAST,
new Object[] { fieldname, usrDate },
true);
}
//@@end
}
© SAP AG JA310 7-26
4-3-4 Update Action onActionShowTableView().
The input checks are run in the onActionShowTableView() event handler using the
previously implemented methods checkDateIsInPast(), and checkMandatory().
public void onActionShowTableView( . . . )
{
//@@begin onActionShowTableView(ServerEvent)
// Check if the values for the Input fields FirstName and
// LastName are provided
this.checkMandatory("FIRSTNAME");
this.checkMandatory("LASTNAME");
Internal
Only
// Output Messages
wdComponentAPI
.getComponent()
Partner
.getMessageManager()
.raisePendingException();
Use
// Check if the dates were provided and if these dates are
// valid (not in the past)
this.checkDateIsInPast("DATE_BEGIN");
SAP
SAP
this.checkDateIsInPast("DATE_END");
// Output Messages
Partner
Use
wdComponentAPI
.getComponent()
.getMessageManager()
Internal
.raisePendingException();
Only
// Navigation will only take place, if all values are valid
wdThis.wdFirePlugToTableView();
//@@end
}
© SAP AG JA310 7-27
4-4 Create a Web Dynpro application
In the Web Dynpro Explorer, expand the node JA310_WD_Messages_T.
Expand the node Web Dynpro and open the context menu for Applications.
To open the wizard, choose Create Application.
In the wizard, enter:
Name JA310_WD_Messages
Package com.sap.training.ja310.wd_messages_t
Internal
Only
Accept the other suggested values and choose Next.
Select Use existing component and choose Next.
Partner
Select
Web Dynpro Component Ex7Comp
Use
Interface View Ex7CompInterfaceView
Startup Plug Default
and choose Finish.
SAP
SAP
Successful result:
The generated Web Dynpro application object completes your project structure. You can
now deploy your project and start your Web Dynpro application. JA310_WD_Messages
Partner
Use
enables you to address the Web application as a whole, when you launch this complete
application in the next step.
Internal
Only
© SAP AG JA310 7-28
5 Building, Deploying, and Running, Step-by-Step
5-1 Deploy and run the Web Dynpro application.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_Messages_T / Web Dynpro / Applications.
Open the context menu for JA310_WD_Messages.
To deploy and run the application, choose Deploy new Archive and Run.
Successful result:
Internal
Only
The Developer Studio launches the Web
browser and chooses the active views
StartView and TableView within the view set
Window1.
Partner
Leave the mandatory fields FIRSTNAME and
LASTNAME blank and choose the Insert
Use
button. An error message should appear.
Insert a date in the past (or no date at all) in
the DATE_BEGIN field and choose the Insert
SAP
SAP
button. An error message should appear.
Partner
Use
Internal
Only
© SAP AG JA310 7-29
6 Optional 1: Define an additional check method, Step-by-Step
6-1 Define checkDateIsValid()
This method checks, if a date input field contains a valid value
6-1-1 Define a new error message.
For detailed information about the necessary steps take a look at exercise 4-2-1.
Message Key Message Type Message Text
DataIsNotValid error Please enter a valid date.
Internal
Only
6-1-2 Define the method checkDateIsValid.
For detailed information about the necessary steps take a look at exercise 4-3-1.
Return Type Name Parameters
Partner
void checkDateIsValid String fieldname
Use
Save the new project data by choosing Save All Metadata from the toolbar.
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-30
6-1-3 Implement the method checkDateIsValid.
public void checkDateIsValid(…) {
//@@begin checkDateIsValid()
// Get reference to Mapping Manager
IWDMessageManager msgMan = wdControllerAPI.getComponent()
.getMessageManager();
// Get field value of attribute under investigation
Date usrDate =(Date) wdContext.nodePerson()
.currentPersonElement()
Internal
Only
.getAttributeValue(fieldname);
// Get field properties of attribute under investigation
Partner
IWDAttributeInfo personAttr = wdContext.nodePerson()
.getNodeInfo()
.getAttribute(fieldname);
Use
// Check if date is valid
if (!DateCalculator.isValid(usrDate)) {
SAP
SAP
// If date is not valid: report error message
msgMan.reportContextAttributeMessage(
Partner
Use
wdContext.nodePerson().currentPersonElement(),
personAttr,
IMessageEx7Comp.DATA_IS_NOT_VALID,
new Object[] { fieldname, usrDate },
Internal
true);
}
Only
//@@end
}
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 7-31
6-1-4 Update Action onActionShowTableView().
public void onActionShowTableView( . . . )
{
// Check if the values for the Input fields FirstName and
// LastName are provided
this.checkMandatory("FIRSTNAME");
this.checkMandatory("LASTNAME");
// Output Messages
wdComponentAPI
.getComponent()
Internal
Only
.getMessageManager()
.raisePendingException();
// Check if the dates provided are valid dates
Partner
this.checkDateIsValid("DATE_BEGIN");
this.checkDateIsValid("DATE_END");
Use
wdComponentAPI
.getComponent()
.getMessageManager()
.raisePendingException();
SAP
SAP
// Check if the dates were provided and if these dates are
// valid (not in the past)
this.checkDateIsInPast("DATE_BEGIN");
Partner
Use
this.checkDateIsInPast("DATE_END");
// Output Messages
Internal
wdComponentAPI
.getComponent()
.getMessageManager()
Only
.raisePendingException();
// Navigation will only take place, if all values are valid
wdThis.wdFirePlugToTableView();
//@@end
6-2 Build, deploy and run the application
Take a look at exercise 5.
© SAP AG JA310 7-32
7 Optional 2: Define an additional check method, Step-by-Step
7-1 Define checkDateRange()
This method checks, if a start date is before a corresponding end date
7-1-1 Define error message.
For detailed information about the necessary steps take a look at exercise 4-2-1.
Message Key Message Type Message Text
EndDateBeforStartDate error Please enter a valid end date.
You entered {0}, which is before
Internal
Only
the start date {1}.
7-1-2 Define methods checkDateRange
Partner
For detailed information about the necessary steps have a look at exercise 4-3-1.
Return Type Name Parameters
Use
void checkDateRange String fieldname_low,
String fieldname_high
SAP
Save the new project data by choosing Save All Metadata from the toolbar.
SAP
Partner
Use
Internal
Only
© SAP AG JA310 7-33
7-1-3 Implement method checkDateRange.
public void checkDateRange( java.lang.String fieldname_low,
java.lang.String fieldname_high){
//@@begin checkDateRange()
...
// Get field value of both date fields
Date usrDate_low =
(Date) wdContext
.nodePerson()
Internal
.currentPersonElement()
Only
.getAttributeValue(fieldname_low);
Date usrDate_high =
(Date) wdContext
.nodePerson()
Partner
.currentPersonElement()
.getAttributeValue(fieldname_high);
Use
// Get field properties of DATE_HIGH attribute
IWDAttributeInfo personAttr =
wdContext
SAP
SAP
.nodePerson()
.getNodeInfo()
.getAttribute(fieldname_high);
Partner
...
Use
// Check if date range is valid
Internal
if (DateCalculator.isAfter(usrDate_low, usrDate_high)){
Only
// If not: report error message
msgMan.reportContextAttributeMessage(
wdContext.nodePerson().currentPersonElement(),
personAttr,
IMessageEx7Comp.END_DATE_BEFORE_START_DATE,
new Object[] { usrDate_high, usrDate_low },
true);
}
//@@end
}
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 7-34
7-1-4 Update the method onActionShowTableView()..
public void onActionShowTableView( . . . )
{
...
// Check if the dates were provided and if these dates are
// valid (not in the past)
this.checkDateIsInPast("DATE_BEGIN");
this.checkDateIsInPast("DATE_END");
Internal
Only
// Output Messages
wdComponentAPI
.getComponent()
Partner
.getMessageManager()
.raisePendingException();
Use
// Check if date range is valid
this. checkDateRange("DATE_BEGIN", "DATE_END");
SAP
SAP
// Output Messages
wdComponentAPI
.getComponent()
Partner
Use
.getMessageManager()
.raisePendingException();
Internal
...
Only
// Navigation will only take place, if all values are valid
wdThis.wdFirePlugToTableView();
//@@end
}
7-2 Build, deploy and run the application
Take a look at exercise 5.
© SAP AG JA310 7-35
Generic UI Services
Contents:
z Three Types of Value Help.
z Defining a static Simple Type containing a value set.
z Simple Value Selector:
Populating a DropDownByKey UI element.
z Extended Value Selector:
Internal
Only
Value help for using larger value sets.
z Dynamic Type Modification:
Modifying a value attribute's data type
programmatically.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-1
Generic UI Services: Unit Objectives
After completing this unit, you will be able to:
z Explain the three types of value help.
z Use Static Value Sets.
z Use Dynamic Value Sets.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-2
Three types of Value help (1)
z Starting point:
A dictionary simple type containing an
enumeration.
z Simple Value Selector (SVS)
Dictionary simple type bound to a
DropDownByKey UI Element.
Suitable for small sets of values (< 30)
z Extended Value Selector (EVS)
Internal
Only
Dictionary simple type bound to an
InputField UI Element (EVS).
Rendered as a pop-up table that allows
its entries to be sorted and filtered.
Partner
Use
z If required, the enumeration of the dictionary simple type can be modified at
runtime.
SAP AG 2004
SAP
SAP
Generic UI Services
Partner
The Web Dynpro runtime environment provides generic UI services for the application development.
Use
They enable you to easily create a value help for constants – for example, for countries or zip codes.
Simple Value Selector (SVS)
You can use the simple value selector as a dropdown list box to display a set of constants when you bind
a DropDownByKey UI element to a value attribute defined as a dictionary Simple Type. The simple
Internal
value selector is especially useful for small sets of constant values (up to 30 entries).
Extended Value Selector (EVS)
Only
If the number of entries in the dropdown list becomes too large to be useable, then you should use the
extended value selector instead. This value selector can display a large set of constants in a special
dialog box below a regular input field. The extended value selector also provides a sort function and
search function.
The main concept of this value help is to bind constants to an InputField or a DropdownByKey UI
element. The constants are contained in a dictionary Simple Type and the value attributes have the same
type. With the exception of the possible dynamic data type modifications of a value attribute at runtime,
the application developer need only implement the declarations involved.
© SAP AG JA310 8-3
Three types of Value help (2)
z Object Value Selector (OVS)
Provides advanced search functionality
Requires that the developer writes some specific coding.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Object Value Selector (OVS)
Partner
In many application scenarios an additional type of value help is needed for searching objects instead of
Use
values. Think of searching for a Airline ID. For finding this ID you want to enter some related data like
departure and arrival airport or the flight date in a search form. The search results (matching flight
objects) are displayed in a table and after selecting a flight the airplane ID (or other values) is (are)
automatically transferred to the corresponding input field(s). For this purpose Web Dynpro provides a
Internal
third type of generic value help service called OVS (Object Value Selector).
In contrast to SVS and EVS the Object Value Selector is not completely based on a declarative
approach. For embedding this sophisticated value help into your Web Dynpro application you have to
Only
implement some lines of code in an associated OVS custom controller. Once defined, the Web Dynpro
Framework automatically renders a generic OVS pop-up window for you.
The OVS user interface is based on a core component belonging to the Web Dynpro Java Runtime
Environment.
© SAP AG JA310 8-4
Static vs. Dynamic Value Sets: Topic Objectives
After completing this topic, you will be able to:
z Use Static Value Sets.
z Use Dynamic Value Sets.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-5
Simple Value Selector
1. Create a dictionary simple type containing an enumeration. (e.g. Colour)
2. Create a context attribute of this simple type.
3. Bind the selectedKey property of a DropDownByKey UI element to the
context attribute.
Context Metadata
Context Root View Layout
SelectionValues
Colour
Internal
Only
Java Dictionary
Results in
Partner
tains
Con
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
How the Simple Value Selector works
Partner
At design time, a dictionary simple type is created that contains an enumeration. In this example the
Use
dictionary simple type is called Colours.
Next, a context value attribute is created and assigned the data type of Colours.
Finally, a DropDownByKey UI element is created on the view layout and the selectedKey property
is bound to the value attribute
Internal
When the screen is rendered, the drop down list will automatically be populated with the values found in
Only
the simple type’s enumeration. The user will see the description of the enumeration value in the drop
down list, but when the view controller accesses the context attribute, it will pick up the value of the
selected enumeration item, not the description.
A Simple value selector is suitable when you want to display a small number (<30) of values. The values
in the simple type can be modified at runtime using the ISimpleTypeModifiable class.
© SAP AG JA310 8-6
Extended Value Selector
1. Create a dictionary simple type containing an enumeration. (e.g. Colour)
2. Create a context attribute of this simple type.
3. Bind the value property of an InputField UI element to the context
attribute.
Context Metadata
Context Root View Layout
SelectionValues
Colour
Internal
Only
Java Dictionary
Results in
Partner
tains
Con
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
How the Extended Value Selector works
Partner
At design time, a dictionary simple type is created that contains an enumeration. In this example the
Use
dictionary simple type is called Colours.
Next, a context value attribute is created and assigned a data type of Colours.
Finally, an InputField UI element is created on the view layout and the value property is bound to
the value attribute
Internal
When the screen is rendered, the input field will have a selector icon next to it. When this is clicked on,
Only
the eunmeration values from the dictionary simple type will be displayed as a table.
Features of an Extended Value Selector table
y The first row is a simple filter tool. You can put the first few characters of column value in one of
these fields and then press the filter icon in the top left. All rows whose column values start with this
string will be displayed. You cannot use any wildcard characters.
y Clicking on a column header caption will sort the table using the selected column as the key.
An extended value selector is suitable when you want to display a larger number (>30) of simple values.
The values in the simple type can be modified at runtime using the ISimpleTypeModifiable class.
© SAP AG JA310 8-7
Dynamic Extended Value Selector
1. Create a context attribute of type string. (e.g. Colour in this example)
2. Bind this attribute to the value property of an InputField UI element.
3. Implement the type of coding shown on next slide
View Layout
Dynamic creation of a modifiable simple type
Context Metadata // Get the metadat a for no de S elec tion Values
IWDNodeInf o selVal sNod eInfo = wdConte xt.n odeS elec tionValu es().get Node Info();
Internal
Only
// Get the metadat a fo r th chi ld attri bute Col ours
IWDAttribu teInfo a ttrI nfo = selVals Node Info .get Attribut e("Colou rs") ;
// Get the modifia ble simple t ype asso ciat ed w ith this att rbute
Context Root ISimpleTyp eModifia ble msType = attrInf o.ge tMod ifia bleSimpl eType();
// Set the column head er capti on
msType.set FieldLab el(" Alt Colo urs");
SelectionValues // Get the modifia ble simple t ype's va lue set
Acts on
IModifiabl eSimpleV alue Set valu eSet = m sTyp e.ge tSVS ervices( ).getMod ifia bleSimpl eValueSe t();
Colour // Define a new va lue set
valueSet.p ut("Colo ur_1 0",
valueSet.p ut("Colo ur_1 1",
"Pin k");
"Tan ");
valueSet.p ut("Colo ur_1 2", "Saf fron");
valueSet.p ut("Colo ur_1 3", "Lim e");
Results in
valueSet.p ut("Colo ur_1 4", "Sky Blue");
Partner
valueSet.p ut("Colo ur_1 5", "Tur quoise") ;
valueSet.p ut("Colo ur_1 6", "Pur ple");
Use
Design Time Runtime
SAP AG 2004
SAP
SAP
How the Dynamic Extended Value Selector works
Partner
A dynamic extended value selector is the result of implementing runtime coding that alters a context
Use
attribute’s modifiable simple type. The coding is discussed on the following slide.
Principles of using a dynamic extended value selector
y If you dynamically alter the modifiable simple type associated with a context attribute of type
string, then the selection table will contain only those entries you have added through your runtime
Internal
coding.
y If however, you alter the modifiable simple type associated with a context attribute that already has an
Only
enumeration, then any values added at runtime will be appended to the existing enumeration. Thus the
extended value selector table will display the sum of the two sets of enumeration items.
However, an existing enumeration can also be cleared, before adding new values at runtime.
© SAP AG JA310 8-8
Dynamically Defining a Modifiable Simple Type
Dynamic creation of a modifiable simple type
// Get the metadata for node SelectionValues
IWDNodeInfo selValsNodeInfo = wdContext.nodeSelectionValues()
.getNodeInfo();
// Get the metadata for the child attribute Colours
IWDAttributeInfo attrInfo = selValsNodeInfo.getAttribute("Colours");
// Get the modifiable simple type associated with this attribute
ISimpleTypeModifiable msType = attrInfo.getModifiableSimpleType();
// Set the column header caption
msType.setFieldLabel("Alt Colours");
// Get the modifiable simple type's value set
Internal
Only
IModifiableSimpleValueSet valueSet = msType.getSVServices()
.getModifiableSimpleValueSet();
// Define a new value set
valueSet.put("Colour_10", "Pink");
valueSet.put("Colour_11", "Tan");
Partner
valueSet.put("Colour_12", "Saffron");
valueSet.put("Colour_13", "Lime");
valueSet.put("Colour_14", "Sky Blue");
Use
valueSet.put("Colour_15", "Turquoise");
valueSet.put("Colour_16", "Purple");
SAP AG 2004
SAP
SAP
Dynamic Extended Value Selector
Partner
In the above example, a context node called SelectionValues contains a string attribute called
Use
Colours. Since this attribute is of type string, it has no predefined enumeration, therefore, we need to
create one at runtime.
Whatever values are added to this modifiable simple type become the selection values shown in the
Internal
extended value selector table.
Only
© SAP AG JA310 8-9
Static vs. Dynamic Value Sets: Topic Summary
You should now be able to:
z Use Static value sets.
z Use Dynamic value sets.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-10
Generic UI Services: Unit Summary
You should now be able to:
z Explain the three types of value help.
z Use Static Value Sets.
z Use Dynamic Value Sets.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-11
Exercise
Chapter: Generic UI Services
Theme: Simple Value Selector
At the end of this Exercise, you are able to:
• Define Simple Data Types in the Java Dictionary
• Create a Simple Value Selector
Internal
Only
1 Development Objectives
Value Help
Partner
The Web Dynpro runtime environment provides generic UI services for the application
development. They enable you to create a value help for constants easily – for example, for
Use
countries or zip codes. You can use the simple value selector as a dropdown list box to
display a set of constants when you bind a DropdownByKey UI element to a value attribute
of the type Simple Type. The simple value selector is especially useful for small sets of
constant values (up to 30 entries).
SAP
SAP
2 Result
Partner
Use
In this exercise you will define a single
view, containing a dropdown list box, which
displays the constants for vehicle types (for
Internal
example, economy, compact, minivan, and
so on).
The set of valid values in the input field is
Only
restricted to key entries of a predefined set
of constants from the Java Dictionary.
© SAP AG JA310 8-12
Exercise without optional part:
Template Solution:
WD Project: JA310_WD_GenUI
Application: JA310_WD_GenUI
Starting point:
Template WD Project: JA310_WD_GenUI_T
Optional Part:
Template Solution:
WD Project: JA310_WD_GenUI_opt
Application: JA310_WD_GenUI
Internal
Only
Starting point:
Go on with your WD Project: JA310_WD_GenUI_T
Or start from the template solution: JA310_WD_GenUI
Partner
3 Prerequisites
Use
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
You have opened the JA310_WD_GenUI_T project.
The structure this project is currently displayed in the Web Dynpro Explorer.
SAP
SAP
For your convenience, you can start
developing with a predefined view.
Expand the node Ex8Comp.
Partner
Use
The graphic on the left shows the predefined
project structure of this exercise.
Internal
Only
© SAP AG JA310 8-13
4 Overview: Developing
4-1 Define a simple data type called VehicleType in the Java Dictionary. Add five car
types to the data type:
Value Description
CMPC Compact
ECNM Economy
LXRY Luxury
MNVN Minivan
PRMM Premium
Internal
Only
4-2 Declare a value attribute VhclType of the type VehicleType as a child of the value
node ReservationInfo in the context of the view controller.
4-3 Define a DropDownByKey UI element with a corresponding Label in the Layout of
the view controller. There is a group element already definied, which will serve as a
Partner
container (grp_vhclType).
Define the data binding between the DropDownByKey UI element and the value
attribute VhclType.
Use
4-4 Create the Web Dynpro application JA310_WD_GenUI.
SAP
SAP
5 Overview: Building, Deploying, and Running
Deploy and run the Web Dynpro application.
Partner
Use
Internal
Only
© SAP AG JA310 8-14
6 Optional:
Add an image UI element and change its visibility depending on the selected value
As a result of this exercise, an image will be
displayed depending on selected value of
the simple value selector.
Internal
Only
Partner
Use
SAP
SAP
6-1 In the view controller context, declare a new value node having the name Image as
Partner
Use
a child node of the value node ReservationInfo. Set the cardinality of this node to
1..1.
Define three attributes ImgAlt, ImgSrc (both type string), and ImgVisible (type
sap.com.ide.webdynpro.uielementdefinitions.Visibility) as child attributes of the
Internal
value node Image.
6-2 Add an Image UI element to the vehicle type group grpVhclType and bind the
context value attributes ImgAlt, ImgSrc, and ImgVisible of the value node Image to
Only
it (properties alt, source, and visible).
The image is not visible, when the application starts. After the user has selected a
value from the simple value selector a corresponding image should appear (after
having completed the next steps).
6-3 Define a new action ShowImg and assign this action to the DropDownByKey UI
element. The corresponding method is called automatically, when the user selects a
new value from the simple value selector.
6-4 Implement the Method onActionShowImg(): Define the images name from the entry
in the DropDownByKey UI element, by adding the ending .gif.
Assign the image name to the property attributes alt and source. Set the visibility to
WDVisibility.VISIBLE.
6-5 Build, deploy and run the application.
© SAP AG JA310 8-15
Solution
Chapter: Generic UI Services
Theme: Simple Value Selector
4 Developing, Step-by-Step
4-1 Define a Simple Type data type called VehicleType in the Java Dictionary.
Internal
Only
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_GenUI_T / Dictionaries / Local Dictionary / Data Types.
Open the context menu of Simple Types.
Partner
Choose Create Simple Type.
Enter:
Use
Name VehicleType
Package com.sap.training.ja310.wd_genui_t
.simpletypes
SAP
SAP
Partner
In the Data Type Editor, choose the tab
Use
Enumeration and create five entries:
Value Description
Internal
CMPC Compact
ECNM Economy
Only
LXRY Luxury
MNVN Minivan
PRMM Premium
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 8-16
4-2 Declare a value attribute VhclType of the type VehicleType as a child of the value node
ReservationInfo in the context of the view controller.
In the Web Dynpro Explorer:
Expand the nodes WD01_Basics_GenericUI_T / Web Dynpro / WD Components /
Ex8Comp / Views.
Open the context menu of StartView and choose Edit.
In the View Editor, choose the tab Context and from the context menu of the value node
ReservationInfo choose New → Value Attribute.
Name VhclType
Internal
Only
Type com.sap.training.wd_genui_t.
simpletypes.VehicleType
Note: By default, the context types are of Type
Partner
string. Choose the context attribute and update the
data type in the Properties view.
Use
Save the new project data by choosing Save All Metadata from the toolbar.
SAP
SAP
4-3 Define a DropDownByKey UI element with a corresponding Label.
Partner
Use
In the View Editor, choose the Layout tab.
Internal
The Outline view will appear. Several UI elements
are predefined for the view StartView.
Only
Choose RootUIElementContainer /
grp_inpFields_reservation / grpVhclType.
From the context menu choose Insert Child
© SAP AG JA310 8-17
Insert a DropDownByKey UI element:
Name DropDownByKey_vhclType
selectedKey ReservationInfo.VhclType
Insert a Label UI element:
Name lbl_vhclType
lableFor DropDownByKey_vhclType
Text Vehicle Type
Move the Label in front of the DropDownByKey UI element.
Internal
Only
Save the new project data by choosing Save All Metadata from the toolbar.
Partner
4-4 Create a Web Dynpro application
Use
In the Web Dynpro Explorer, expand the node JA310_WD_GenUI_T.
Expand the node Web Dynpro and open the context menu for Applications.
To open the wizard, choose Create Application.
SAP
SAP
In the wizard, enter:
Name JA310_WD_GenUI
Partner
Use
Package com.sap.training.ja310.wd_genui_t
Accept the other suggested values and choose Next.
Internal
Select Use existing component and choose Next.
Only
Select
Web Dynpro Component Ex8Comp
Interface View Ex8CompInterfaceView
Startup Plug Default
and choose Finish.
Successful result:
The generated Web Dynpro application object completes your project structure. You can
now deploy your project and start your Web Dynpro application. JA310_WD_GenUI
enables you to address the Web application as a whole, when you launch this complete
application in the next step
© SAP AG JA310 8-18
5 Building, Deploying, and Running, Step-by-Step
5-1 Deploy and run the Web Dynpro application.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_GenUI_T / Web Dynpro / Applications.
Open the context menu for JA310_WD_GenUI.
To deploy and run the application, choose Deploy new Archive and Run
Successful result:
Internal
Only
As a result of this exercise, the view contains a
dropdown list box, which itself contains the
constants for car categories and uses the simple
value selector for displaying the texts. The set of
valid values in the input field is restricted to key
Partner
entries of the predefined set of constants.
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-19
6 Optional 1:
Add an image and change its visibility depending on the selected value of the input field
category.
6-1 In the view controller context, declare a new value node having the name Image….
For detailed information about the necessary steps
take a look at exercise 4-2.
Internal
Only
Partner
Use
Set the cardinality of the value node Image to the
value 1..1.
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-20
6-2 Add an Image UI element to the category group grpVhclType and bind the context
attributes ImgAlt, ImgSrc and ImgVisible to it.
In the View Editor, choose the Layout tab.
The Outline view will appear.
Several UI elements are predefined for StartView.
Choose RootUIElementContainer /
grp_inpFields_reservation / grpVhclType.
Internal
Only
From the context menu choose Insert Child
Partner
Insert a Image UI element with the following properties:
id img_vhcl
Use
alt ReservationInfo.Image.ImgAlt
source ReservationInfo.Image.ImgSrc
visible ReservationInfo.Image.ImgVisible
SAP
SAP
colspan 2
Partner
Use
6-3 Define a new action ShowImg and assign this action to the DropDownByKey UI
element.
Internal
In the view Editor of StartView, choose the tab Actions.
Define the action:
Only
name ShowImg
event handler use default
fire plug None
© SAP AG JA310 8-21
In the View Editor, choose the tab Layout
The Outline view appears.
Choose RootUIElementContainer /
grp_inpFields_reservation / grpVhclType.
Choose the DropDownByKey UI element.
In the Properties view choose:
Internal
Only
onSelect ShowImg
Partner
Save the new project data by choosing Save All Metadata from the toolbar
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-22
6-4 Assign the action to the DropDownByKey UI element
In the view Editor of the view StartView, choose the tab Implementation.
Choose the generated method onActionShowImg()
public void onActionShowImg(…){
//@@begin onActionshowImg(ServerEvent)
/ Get value of DropDownByKey UI element from corresponding
../ context attribute, which is bound to the value property
String imgName = wdContext
Internal
Only
.nodeReservationInfo()
.currentReservationInfoElement()
.getVhclType();;
Partner
/ Get value of context attributes, which is bound to the image
/ properties source, alt and visibility, respectively
Use
wdContext.nodeImage()
.currentImageElement()
.setImgAlt(imgName+".gif");
SAP
SAP
wdContext.nodeImage()
.currentImageElement()
.setImgSrc(imgName+".gif");
Partner
Use
wdContext.nodeImage()
.currentImageElement()
.setImgVisible(WDVisibility.VISIBLE);
Internal
//@@end
Only
}
The last JAVA statement changes the visibility of the image, by changing the value of
the context attribute, which is bound to the property attribute visibility.
Here, not a build in data type can be used, but one defined in the dictionary
com.sap.ide.webdynpro.uielementdefinitions.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 8-23
6-5 Build, deploy and run the application
Take a look at exercise 5-1.
Successful result:
As a result of this exercise, an image will be visible
depending on the selected value of the simple value
selector.
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-24
Exercise
Chapter: Generic UI Services
Theme: Extended Value Selector
At the end of this Exercise, you are able to:
• Define Simple Data Types in the Java Dictionary
• Create an Extended Value Selector
• Change the values of the Value Selector programmatically
Internal
Only
1 Development Objectives
Value Help
Partner
The Web Dynpro runtime environment provides generic UI services for the application
development. They enable you to create a value help for constants easily – for example, for
Use
countries or zip codes. The extended value selector can be used as a value selector for a
large number of constants. Inserting an extended value selector is similar to inserting a
simple value selector. The difference is that instead of a DropDownByKey UI element, an
SAP
InputField UI element is bound to a value attribute whose data type is of the type Simple
SAP
Type. You can define the data type Simple Type in the Java Dictionary at design time or
you can create it using the ISimpleTypeModifiable interface for modifying the data type of
a value attribute at runtime. This interface does not provide the required metadata until
runtime. The main binding mechanisms are retained in this process.
Partner
Use
2 Result
Internal
In this exercise, you will develop an
extended value selector and fill it with data
(City names for pickup and drop down
Only
locations) that you’ve defined in the Java
Dictionary at design time.
Optional part:
You will learn, how allowed value
attributes can be can be added to the EVS
dynamically.
© SAP AG JA310 8-25
Exercise without optional part:
Template Solution:
WD Project: JA310_WD_GenUI_2
Application: JA310_WD_GenUI
Starting point:
Go on with your WD Project: JA310_WD_GenUI_T
Or start from the template solution: JA310_WD_GenUI_opt.
Optional Part:
Template Solution:
WD Project: JA310_WD_GenUI_2opt
Application: JA310_WD_GenUI
Internal
Only
Starting point:
Go on with your WD Project: JA310_WD_GenUI_T
Or start from the template solution: JA310_WD_GenUI_2.
Partner
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
Use
You have selected the Web Dynpro perspective.
You have opened the template project JA310_WD_GenUI_opt, or you go on working with
your last WD Project JA310_WD_GenUI_T.
The structure this project is currently displayed in the Web Dynpro Explorer.
SAP
SAP
For your convenience, you can start
developing with a predefined WD project.
Partner
If you have finished the previous exercise
Use
completely, you can go on working with
your WD project JA310_WD_GenUI_T.
Internal
Expand the Ex8Comp node. The graphic on
the left shows the structure of the
predefined template project.
Only
© SAP AG JA310 8-26
4 Overview: Developing
4-1 Define a simple data type called Cities_All in the Java Dictionary. Create some
entries. The city values must have a prefix as follows:
EUR_ European Cities
AMS_ South American Cities
AMN_ North American Cities
OCE_ Oceanic Cities
ASA_ Asian Cities
AFR_ African Cities
Internal
Only
4-2 Declare a value attribute CityFrom and CityTo (each of it type: Cities_All) as
childes of the node ReservationInfo in the context of the view controller.
4-3 Define two InputField UI elements with corresponding Labels for the pickup
location CityFrom and drop down location CityTo. Define these elements in the
pre-defined group UI element grp_location using the Apply Template functionality.
Partner
Use
5 Overview: Building, Deploying, and Running
Deploy and run the Web Dynpro application.
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-27
6 Optional:
Dynamically fill value attributes
You will learn, how allowed value
attributes can be can be added to the EVS
dynamically, by changing the enumeration
of the related simple type.
You add a RadioButtonGroup UI element
to pre-select the region of the cities.
After having selected the region, only the
corresponding cities should be added to
the value attributes.
Internal
Only
Partner
Use
6-1 Define a simple data type called Region. Create some entries. The region values
must equal the city prefix from exercise 4-1:
SAP
SAP
EUR Europe
AMS South America
Partner
AMN North America
Use
OCE Oceania
ASA Asia
Internal
AFR Africa
6-2 Define a new value attribute Region as child of the value node ReservationInfo in
Only
the context of the view controller (type Region).
6-3 Define a new radio button group UI element RadioButtonGroupByKey in the pre-
defined group UI element grp_location. Bind the property selectedKey to the
context field Region.
6-4 Define a new action FilterCities. Bind this action to the property onSelect of the
RadioButtonGroup. The corresponding Method will be processed after the user
selects an entry from the RadioButtonGroup.
6-5 Declare a helper method fillValueSet to fill the value selector. This method shall be
called at start time and after the selection of the RadioButtonGroup.
At start time the simple value selector for pickup and dropdown location shall
contain all cities. After having selected a region from the RadioButtonGroup, the
value selector for these two InputFields should only contain cities of the selected
region.
© SAP AG JA310 8-28
6-5-1 Declare the helper method fillValueSet (Parameter Boolean initialize).
The parameter initialize will be used to provide the information, if all cities
shall be selected (initialize=true) or only the city which correspond to the
selected region shall be selected (initialize=false).
6-5-2 Implement the Method onActionFilterCities. Call the method
fillValueSet(false).
6-5-3 Define a new value attribute CitiesAll (type: Cities_All) as child of the value
node ReservationInfo in the context of the view controller. The enumeration
of the related data type will hold all possible cities for all regions.
6-5-4 Implement the method fillValueSet.
- First define three helper variables:
The first variable (nodeInfo)shall hold a reference to the metadata of the
node ReservationInfo.
Internal
Only
The second variable (nodeElement) shall hold a reference to the
ReservationInfo element at the lead selection.
The third variable (region) shall hold the value of the region selected by
the user.
Partner
- Now get a reference to the enumeration related to the context value
attributes CitiesAll, CityFrom and CityTo. Use the method
wdContext.nodeInfo
Use
.getAttribute("<ctx_field>")
.getModifiableSimpleType()
.getSVServices()
.getModifiableSimpleValueSet()
SAP
SAP
- Clear the enumeration related to the context value attributes CityFrom
and CityTo.
- Loop over the enumeration for the context field CitiesAll and copy all
appropriate values to the enumeration for the context fields CityFrom
Partner
Use
and CityTo.
Depending on the parameter initialize, only cities of a specified region
or all cities shall be copied.
6-6 Update the method wdDoInit(). At start time the value selector should contain all
Internal
cities. Therefore you have to call fillValueSet(true).
6-7 Build, deploy and run the application
Only
© SAP AG JA310 8-29
Solution
Chapter: Generic UI Services
Theme: Extended Value Selector
4 Developing, Step-by-Step
Note: In this exercise you have to type in some lines of java code. For your convenience,
you can cut and paste the code from the corresponding solution project.
Internal
Only
But keep in mind: Some of the methods are automatically generated by Web Dynpro.
For this reason the methods names you have to choose can differ from the method
names of the solution.
Note: The names of the WD project and of the package are based on the assumption,
Partner
that you start with the template solution WD project of the last exercise!
Use
4-1 Define a simple data type called Cities_All in the Java Dictionary.
In the Web Dynpro Explorer:
SAP
Expand the nodes JA310_WD_GenUI_opt / Dictionaries / Local Dictionary / Data
SAP
Types.
Open the context menu of Simple Types.
Partner
Use
Choose Create Simple Type.
Name Cities_All
Package com.sap.training.ja310.
Internal
wd_genui_opt.simpletypes
Only
© SAP AG JA310 8-30
In the Data Type Editor, choose the tab
Enumeration and create some entries as displayed
in the graphic.
Use the following prefixes for the values:
EUR Europe
AMS South America
AMN North America
OCE Oceania
Internal
Only
ASA Asia
AFR Africa
Partner
Save the new project data by choosing Save All Metadata from the toolbar.
Use
4-2 Declare a value attribute CityFrom and CityTo (each of it type: Cities_All) as childes of
the node ReservationInfo in the context of the view controller.
SAP
SAP
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_GenUI_opt / Web Dynpro / WD Components / Ex8Comp
/ Views.
Partner
Use
Open the context menu of StartView and choose Edit.
In the View Editor, choose the tab Context and create a new value attribute
Internal
Define the following value attributes:
Name Type
Only
CityFrom com.sap.training.ja310.
wd_genui_opt.
simpletypes.Cities_All
CityTo com.sap.training.ja310.
wd_genui_opt.
simpletypes.Cities_All
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 8-31
4-3 Define two InputField UI elements with corresponding Labels for pickup location and
drop down location
In the View Editor, choose the Layout tab.
The Outline view will appear. Several UI elements
are predefined for the view StartView.
Choose RootUIElementContainer /
grp_inpFields_reservation / grp_location
Internal
Only
From the context menu choose Apply Template
Partner
In the wizard that appears, choose:
Template Form
Use
Fields CityFrom, CityTo
The value property of the labels have to be adapted.
SAP
SAP
On the next screen make sure, that an InputField UI
element is generated and not a DropDownByKey
Partner
UI element (which is the default here) !
Use
This can be set via a dropdown listbox in the
column Editor.
Internal
Only
The propery text of the labels has to be adapted.
Save the new project data by choosing Save All Metadata from the toolbar.
© SAP AG JA310 8-32
5 Building, Deploying, and Running, Step-by-Step
5-1 Deploy and run the Web Dynpro application.
In the Web Dynpro Explorer:
Expand the nodes JA310_WD_GenUI_opt / Web Dynpro / Applications.
Open the context menu for JA310_WD_GenUI
To deploy and run the application, choose Deploy new Archive and Run
Successful result:
Internal
Only
In this exercise, you have developed an extended
value selector and filled it with static data (City
names for pickup and drop down locations).
Partner
The static data has been defined in the Java
Dictionary at design time.
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 8-33
6 Optional:
Fill the extended value selector dynamically at runtime.
6-1 Define two new data types in Java Dictionary.
Define a simple data type called Region.
This type is needed for the RadioButtonGroup to select a region.
Name Region
Package com.sap.training.ja310.
wd_genui_opt.simpletypes
Internal
Only
In the Data Type Editor, choose the Enumeration tab and create some entries:
Value Description
OCE Oceania
Partner
ASA Asia
AFR Africa
Use
EUR Europe
AMB North America
AMS South America
SAP
SAP
Note: Use the same abbreviations as key as you have used as prefix for the cities data
type (see exercise 4-1).
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
6-2 Define a new value attribute Region as child of the value node ReservationInfo in the
context of the view controller (type Region).
Only
Take a look at exercise 4-2.
© SAP AG JA310 8-34
6-3 Define a new radio button group UI element RadioButtonGroupByKey in the pre-
defined group UI element grp_location.
In the View Editor, choose the Layout tab.
The Outline view will appear.
Several UI elements are predefined for StartView.
Choose RootUIElementContainer /
grp_inpFields_reservation / grp_location.
Internal
Only
From the context menu choose Insert Child
Partner
Choose RadioButtonButtonGroupByKey
Use
Change the properties of the UI element:
colCount 2
SAP
SAP
selectedKey ReservationInfo.Region
Partner
Use
Save the new project data by choosing Save All Metadata from the toolbar.
Internal
Only
© SAP AG JA310 8-35
6-4 Define a new action FilterCities. Bind this action to the property onSelect of the
RadioButtonGroup.
In the view Editor of StartView, choose the tab Actions.
Define the action:
name FilterCities
event handler use default
fire plug none
Internal
Only
Change the properties of the RadioButtonButtonGroupByKey UI element:
onSelect FilterCities
Partner
Save the new project data by choosing Save All Metadata from the toolbar
Use
6-5 Declare a helper method fillValueSet to fill the value selector.
SAP
SAP
6-5-1 Declare the helper method fillValueSet (Parameter Boolean initialize).
Partner
Use
In the view Editor of the view StartView, choose the tab Methods and add the method
public void fillValueSet(Boolean initialize).
Internal
Only
© SAP AG JA310 8-36
6-5-2 Implement the Method onActionFilterCities.
In the view Editor of StartView, choose the tab Implementation.
Choose the generated method onActionFilterCities() and add the following source code:
public void onActionFilterCities(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
{
//@@begin onActionFilterCities(ServerEvent)
Internal
Only
initialize();
fillValueSet( false );
//@@end
Partner
Use
6-5-3 Define a new value attribute CitiesAll (type: Cities_All) as child of the value
node ReservationInfo in the context of the view controller.
SAP
SAP
Take a look at exercise 4-2.
Partner
Use
Internal
Only
© SAP AG JA310 8-37
6-5-4 Implement the Method fillValueSet.
Choose the tab Implementation, navigate to the generated method and implement the
method body.
Note: You can copy and paste the code from the solution project.
public void fillValueSet( boolean initialize )
{
//@@begin fillValueSet()
Internal
Only
..// Define nodeInfo, holding a reference to the metadata of the
// node ReservationInfo
Partner
..IWDNodeInfo nodeInfo = wdContext
.nodeReservationInfo()
Use
.getNodeInfo();
..// Define nodeElement, holding a reference to the reference to
SAP
SAP
// the ReservationInfo element at the lead selection
IReservationInfoElement nodeElement =
wdContext.nodeReservationInfo()
Partner
Use
.currentReservationInfoElement();
// Define region, containing the region selected by the user
Internal
String region = nodeElement.getRegion();
Only
..// Now get a reference to the enumeration related to the
// context value attributes CitiesAll, CityFrom and CityTo
IModifiableSimpleValueSet citiesAll_SV =
nodeInfo.getAttribute("CitiesAll")
.getModifiableSimpleType()
.getSVServices()
.getModifiableSimpleValueSet();
IModifiableSimpleValueSet cityFrom_SV =
nodeInfo.getAttribute("CityFrom")
© SAP AG JA310 8-38
.getModifiableSimpleType()
.getSVServices()
.getModifiableSimpleValueSet();
IModifiableSimpleValueSet cityTo_SV =
nodeInfo.getAttribute("CityTo")
.getModifiableSimpleType()
.getSVServices()
.getModifiableSimpleValueSet();
// Clear the enumeration related to the context value
Internal
Only
// attributes CityFrom and CityTo
cityFrom_SV.clear();
cityTo_SV.clear();
Partner
..// OPTIONAL: Define helper variables for next two optional
Use
// steps
String cityFrom = nodeElement.getCityFrom();
SAP
String cityTo = nodeElement.getCityTo();
SAP
// OPTIONAL: If value of field CityFrom does not fit to
Partner
// selected region -> clear
Use
if (cityFrom != null) {
if (!cityFrom.startsWith(region)) {
Internal
nodeElement.setCityFrom("");
}
}
Only
// OPTIONAL: If value of field CityTo does not fit to
// selected region -> clear
if (cityTo != null) {
if (!cityTo.startsWith(region) && !(cityTo == null)) {
nodeElement.setCityTo("");
}
}
..// Loop aver all cities
© SAP AG JA310 8-39
for (int i = 0; i < citiesAll_SV.size(); i++) {
..// If the view is processed the first time or if city fits to
/ selected region (starts with same prefix)
if (initialize || citiesAll_SV.getKey(i)
.toString()
.startsWith(region)) {
..// Copy keys and values from the SV Set citiesALL_SV to
// the SV Sets cityFrom_SV and cityTo_SV
cityFrom_SV.put(citiesAll_SV.getKey(i),
citiesAll_SV.getText(i));
Internal
Only
cityTo_SV.put(citiesAll_SV.getKey(i),
citiesAll_SV.getText(i));
}
Partner
}
//@@end
Use
}
Save the new project data by choosing Save All Metadata from the toolbar.
SAP
SAP
6-6 Update the method wdDoInit()
Partner
Use
public void wdDoInit() {
//@@begin wdDoInit()
initialize();
Internal
fillValueSet( true );
//@@end
Only
}
Save the new project data by choosing Save All Metadata from the toolbar.
6-7 Build, deploy and run the application
Take a look at exercise 5.
© SAP AG JA310 8-40
Web Dynpro Debugging: Unit Objectives
After completing this topic, you will be able to:
z Understand Debugging functionality.
z Activate Debugging
z Start a Debug Session
z Analyze the State of a Running Program
Internal
Only
z Apply Debugging Techniques
z Terminate a Debug Session
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 9-1
Web Dynpro Dynamic Programming:
Business Scenario
z An important part of your programming toolkit should be
mastery of debugger.
z It will help you save time and reduce frustration in
locating and eliminating software bugs.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 9-2
Activating Debug Mode
z The server node of your J2EE cluster must first be switched to
debug mode before any debugging can take place
z Debug Mode can be activated in two ways:
1. Switch debug mode on temporarily using the J2EE Engine view
in the NetWeaver Developer Studio
2. Switch debug mode on permanently using the J2EE Visual
Administrator.
Internal
Only
Whichever way is chosen, the J2EE engine will need to be restarted
for the configuration to take effect.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 9-3
Switching on Debug Mode (Temporary)
Internal
Only
z Using the J2EE Engine view in the NWDS
Partner
Select the server node and from the right mouse click pop-up menu,
select “Enable debugging of process”. This will cause the server
node to restart in debug mode.
Use
However, if the J2EE is subsequently restarted, it will come back up
with debug mode switched off.
SAP AG 2004
SAP
SAP
Switching on debug mode temporarily
Partner
The J2EE Engine view provides a context menu option for switching on debug mode. The server node
Use
of the J2EE engine will then remain in debug mode until it is next restarted, at which time it will come
up again with debug mode switched off.
Internal
Only
© SAP AG JA310 9-4
Switching on Debug Mode (Permanent) - 1
1. Start the J2EE Visual Administrator
2. Select the Configuration Adapter
Under the Services node, select the Configuration
Adapter. The screen area to the right will then
display a list of different configurations.
Internal
Only
3. Locate cluster_data
One of the configurations is called
cluster_data.
Expand this node and locate the
Partner
Propertysheet for your cluster.
4. Switch to change mode
Click on the pencil icon in the tool
Use
bar and confirm the warning
message.
SAP AG 2004
SAP
SAP
Switching on debug mode permanently
Partner
The Visual Administrator tool allows you to configure all aspects of the J2EE Engine. Using this tool, it
Use
is possible to switch on the debug mode permanently.
Important!
Use the Visual Administrator carefully! This tool allows you to changes any of the J2EE engine’s
configuration parameters. Inappropriate or careless use of this tool could break one of the engine’s
Internal
services, or worse, the whole engine!
Only
© SAP AG JA310 9-5
Switching on Debug Mode (Permanent) - 2
5. Open the cluster’s
property sheet
Now that you are in change
mode, double click on the
property sheet, and you will
see a pop-up window
containing various cluster
configuration properties.
6. Change the server’s
Internal
Only
debug mode
Locate the server node’s
debug mode property.
Click once on the property
name.
Partner
Use
SAP AG 2004
SAP
SAP
Important
Partner
The dispatcher node of a J2EE cluster has an Id that ends in 00. The first server node has an Id that ends
Use
in 50.
Internal
Only
© SAP AG JA310 9-6
Switching on Debug Mode (Permanent) - 3
7. Enter the new value
Enter the word “yes” into the
custom value field, and press
Apply Custom.
8. Log off the Visual
Administrator
9. Restart the J2EE engine’s
server node
Internal
Only
Ö The server node will now come up in debug mode every time it is
started.
Partner
Use
SAP AG 2004
SAP
SAP
Important note!
Partner
In J2EE clusters in which there are multiple server nodes, switching on debug mode will remove that
Use
node from taking part in clustered load balancing. In other words, putting a server node into debug mode
instructs the message server to detach it from the cluster and reserves it for debug processing.
Only one debug session may be active on a server node at any one time.
Internal
Only
© SAP AG JA310 9-7
Setting a Breakpoint
Double
click
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Setting a Breakpoint
Partner
y Open the implementation page of any controller from a given application.
Use
To do so, in the Web Dynpro Explorer, edit the Controller and go to the Implementation tab page.
y The Editor displays the source code. Navigate to wdDoInit() method. Right-click on the marker
bar (along the left edge of the editor area) frame next to line of code to open the context menu and
choose Add Breakpoint. You can also double click in the marker bar to achieve the same results. The
Internal
breakpoint lines are highlighted with a blue dot.
Extra:
Only
You can also experiment with setting conditional breakpoints by setting the breakpoint properties from
the context menu
© SAP AG JA310 9-8
Defining a Debug Configuration and
Starting the Debug Session
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Defining a Debug Configuration and Starting the Debug Mode
Partner
To start the Web Dynpro application in the debugger, you require a launch configuration.
Use
y Choose Run → Debug... in the main menu.
y In the list of possible configurations, select Web Dynpro Application and then choose New.
y Under Name, enter a text, which characterizes this debugging configuration.
y Choose Browse... next to the Project field. Next, select the name of the project to be debugged and
Internal
confirm with OK.
y Choose Browse... next to the Web Dynpro Application field. Next, select the name of the Web
Only
Dynpro application to be debugged and confirm with OK.
y If the application to be debugged has not yet been deployed on the server, select the Create and
deploy archive checkbox.
y Press Apply.
y Optional: To select the server that you want to use for the debugging procedure, choose the J2EE
engine tab page.
y The configuration is now complete and you can start the debugger.
y To start the debugger, choose Debug and the NetWeaver Developer studio will switch automatically
to the debug view.
© SAP AG JA310 9-9
Debug Perspective
Variables View
Debug View
Internal
Only
Editor View
Partner
Use
SAP AG 2004
SAP
SAP
The Debugging perspective
Partner
Once you have started the debugging process, Eclipse will switch to the debugging perspective.
Use
The Debug view is at the upper left of the perspectives. This view allows you to manage the debugging
or running of a program in the workbench. It displays the stack frame for the suspended threads for each
target you are debugging. Each thread in your program appears as a node in the tree. It displays the
Internal
process for each target you are running.
The panel at the upper right contains a number of tabbed views including Variables (shown),
Only
Breakpoints, Expressions, and Display. This view shows information about variables that are currently
in scope (currently-selected stack frame) for your program.
The Editor view - The Java editor provides you with Java specific text editing support. You will see the
program line the debugger is currently executing. If the execution of your program takes you to a
different class, Eclipse will open up the corresponding .java file automatically.
Console view - shows the output of a process and allows you to provide keyboard input to a process, but
this only works if you started the java process in eclipse. Debugging the server means that you attach to
the process remotely, therefore you will need to rely on the log files to see the process output.
Tip: If you rearrange the view you can restore the default settings by selecting Window → Reset
Perspective. You can obtain more information about any of the views by clicking on the title of the view
and pressing F1.
© SAP AG JA310 9-10
Debug View: Step Execution
Step Into Step Over
Resume Step Out
Suspend Terminate
Disconnect
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Debug View: Key Assignments
Partner
The debug key assignments used in the NetWeaver Developer Studio are the same as the debug key
Use
assignments in ABAP.
Step Into (F5):
The next statement is executed. This means that is you are positioned on a statement containing inner
Internal
method calls, you will traverse into these methods.
Step Over (F6):
Only
The current statement is executed in it entirety, that is, without entering any inner method calls.
Step Out (F7):
The current method is exited and you will traverse back to the calling method.
Resume (F8):
The application exits debug mode and continues with execution.
Suspend:
Will pause execution and allows you to view state of variables.
Terminate:
Will terminate execution of the program .
© SAP AG JA310 9-11
Debug View: Step Filtering
Step with Filters
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Debug View: Step Filtering
Partner
The Step With Filters button works like Step Into, but you can specify which methods Step Filter will
Use
execute and return from immediately by selecting ( Window → Preferences → Java → Debug → Step
Filtering) and defining step filters by checking the packages and classes listed there. This way you can
step only into methods in your own classes and not into the standard Java packages or third-party
packages.
Internal
Only
© SAP AG JA310 9-12
Variables view
Click to expand
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Variables View
Partner
When the stack frame is selected, you can see the visible variables in that stack frame in the Variables
Use
view. The Variables view shows the value of primitive types. Complex variables can be examined by
expanding them to show their members.
Internal
Only
© SAP AG JA310 9-13
Hot Swap
z Allows you to change code “on the fly” during your debug session
1. Change the code in the editor while you’re debugging
2. Save the file, then press the Resume button to get the Web Dynpro
Application running again with your changes
Change line 168
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Hot Swap
Partner
A new feature of JVM 1.4 (Java Virtual Machine) and Eclipse version of Netweaver Developer Studio
Use
is Hotswap Bug Fixing. JVM 1.4 is compatible with the Java Platform Debugger Architecture (JPDA).
The JPDA allows you to modify code in a running application. To use this debugging function, simply
change the code in the editor, save and resume debugging. This is a much easier approach than exiting
the app, changing the source code, recompiling, and then starting another debugging session.
Internal
With HotSwap, you can fix the problem on the fly while the debugger is still running!
Only
© SAP AG JA310 9-14
Hot Swap
z Allows you to change code “on the fly” during your debug session
1. Change the code in the editor while you’re debugging
2. Save the file, then press the Resume button to get the Web Dynpro
Application running again with your changes
No need to exiting the app, changing
the code, recompiling, and starting
another debugging session. The
problem is fixed on the fly !
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 9-15
Terminating a Debug Session (1)
Step 1
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Terminating Debugging
Partner
If you want to exit debugging, you must terminate the threads in the SAP NetWeaver Developer Studio.
Use
y In the Debug View, call the context menu for the top node (<Application Name>[Web Dynpro
Application]).
y Choose Terminate.
Internal
Only
© SAP AG JA310 9-16
Terminating a Debug Session (2)
Step 2
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Terminating Debugging
Partner
If you want to exit debugging, you must terminate the threads in the SAP NetWeaver Developer Studio.
Use
y In the Debug View, call the context menu for the top node (<Application Name>[Web Dynpro
Application]).
y Choose Terminate.
y Call the context menu again and then choose Remove All Terminated Launches. The Remove All
Internal
Terminated Launches tool button clears the Debug view of threads that have been terminated.
Only
© SAP AG JA310 9-17
Restarting a debug session
Restart
Debugging
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Restarting a debugging session
Partner
You can restart debugging of the application <Application Name> by choosing
Use
Run → Debug History and select <Application Name>.
Internal
Only
© SAP AG JA310 9-18
Debugging Scenarios
z Standalone Java Cluster
z LAN Scenario Java Instance
00
Single Server Process
Dispatcher
Cluster SDM
Server 0 Productive Node
z WAN Scenario Server 1 Run Debug
03
Dispatcher
Internal
Only
Server 0
Server 1 Productive Nodes
...
Server N Run Debug
07
Partner
Use
SAP AG 2004
SAP
SAP
Debugging Scenarios
Partner
y Standalone developer workplace installation
Use
The Web AS is installed on the same local developer PC as the Developer Studio. By default, the
debugging mode is deactivated for this single server configuration. However, the server node
(server0) can be switched from run mode to debugging mode. This is the typical scenario for a
developer’s installation.
Internal
y LAN scenario
Web AS is installed at any location in the LAN. The Developer Studio and the server (including the
Only
database) are now installed on different hosts. In general, a LAN will feature a cluster configuration.
It defines a group consisting of several instance nodes. In such a cluster configuration, one or more
server nodes can be reserved for debugging. When debugging is activated the message server
deactivates the relevant server node for the cluster communication. As a result, incoming requests are
no longer passed on to the reserved node. A debugging session can be executed from within the
Developer Studio via the debug port without affecting the other server nodes in the cluster.
y WAN scenario
The Web AS runs on the customer side. Debugging takes place through firewalls using SAP Router
technology.
© SAP AG JA310 9-19
Debugging ABAP Code from within Web Dynpro
z Switch on external debugging in the ABAP workbench
You must specify the same user as is used by the JCo connection.
z Set an external breakpoint in the ABAP code
You set the external breakpoint using the same user as is used by the JCo
connection.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Debugging ABAP Code from within Web Dynpro
Partner
In order to debug ABAP code from a Web Dynpro application, you must meet the following
Use
prerequisites:
y The kernel parameter abap/ext_debugging_possible must be set to 0. This is the default
for a non-productive system.
y SAP GUI is installed on your local machine.
Internal
y The JCo connection used to connect to the SAP system connects directly to an application server (i.e.
does not use a logon group).
Only
y You have activated external debugging in the ABAP Workbench for the user used by the JCo
connection.
y You have logged on to the SAP system with the same user as the JCo connection, and set an external
breakpoint in the ABAP code.
Since debugging in the ABAP system via load balancing is not supported, you must create a special JCo
destinations in your J2EE engine that connects to a dedicated application server.
For further information, read the document “Debugging ABAP Code from within Web Dynpro
Applications” available in SDN.
For detailed information of how to set up external debugging of ABAP code, see Note 668256.
© SAP AG JA310 9-20
Web Dynpro Debugging Unit Summary
You should now be able to:
z Understand Debugging functionality.
z Activate Debugging
z Start a Debug Session
z Analyze the State of a Running Program
Internal
Only
z Apply Debugging Techniques
z Terminate a Debug Session
Partner
Use
SAP AG 2004
SAP
SAP
Web Dynpro Debugging Unit Summary
Partner
No bugs have been harmed during the making of this presentation.
Use
Internal
Only
© SAP AG JA310 9-21
Exercises
Chapter: Web Dynpro Debugging
At the end of this Exercise, you are able to:
• Debug and change the Component Context of a running Web Dynpro
application.
• Optional – HotSwap code
Internal
Only
1 Development Objectives
Partner
These short exercises will give practical hands-on experience using the debugger to change
program variables.
Use
SAP
2 Result
SAP
As a result of this exercise, you will be
able to start a debug session, analyze the
Partner
Use
application state, set breakpoints, and
change program variables.
Internal
Optional part:
You will learn how to change source code
on the fly in a debugging session
Only
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
The structure of the project JA310_WD_UIElements_2opt3 is currently displayed in the
Web Dynpro Explorer.
© SAP AG JA310 9-22
Please take a moment to deploy and run
this application so that you are familiar
with the application logic.
Internal
Only
Partner
4 Debugging, Step-by-Step
Use
4-1 Web Dynpro Debugging:
In the application JA310_WD_UIElements_2opt3, which is defined in the project
having the same name, the user can input some person data on the first screen. This
person information is then collected and displayed on a second screen using a
SAP
SAP
TableView UI element.
In this exercise, the debugger shall be used to manipulate the person's information,
which is displayed in the TableView element. This shall be realized by manipulation
the user input before storing it in the context node related to the TableView element.
Partner
Use
4-1-1 Switch the Server Node to Debug Mode.
4-1-2 Edit the view StartView and choose the Implementation tab. Navigate into the
method onActionshowTableView() and set a breakpoint at the beginning of
the source code of this method.
Internal
4-1-3 Define a debug configuration for the application
JA310_WD_UIElements_2opt3 and start this application in the Debug Mode.
Only
4-1-4 Change the values of the attributes FIRSTNAME and LASTNAME in the
variable newPerson.
4-1-5 Terminate debugging.
4-2 Optional: Hot Swap Code
4-2-1 Delete all breakpoints in method onActionshowTableView() and set a new
breakpoint in method onActionShowDetailView(), defined in the view
TableView.
4-2-2 Resume debugging of the application JA310_WD_UIElements_2opt3.
4-2-3 On the second screen (TableView): If the user presses the button Details, the
Debugger will stop in the method onActionShowDetailView (). Change the
source code in a way, that the navigation brings the user back to the view
StartView. Save and resume debugging.
© SAP AG JA310 9-23
Solution
Chapter: Web Dynpro Debugging
4 Debugging, Step-by-Step
4-1 Web Dynpro Debugging
Internal
Only
4-1-1 Switch the Server Node to Debug Mode.
From Web Dynpro Explorer Perspective:
To be able to debug within a running Web Dynpro application, you must activate
Partner
debugging for the server process of the J2EE Engine. You activate this in the J2EE
Engine view.
If necessary, open the J2EE Engine view. To do so, choose Window → Show View →
Use
Other and then select J2EE → J2EE Engine.
The system displays a view containing status
information about the running J2EE Engine.
SAP
SAP
Expand the tree display fully until you can see the
actual server process (for example server0).
Partner
Use
Internal
Right-click the server node and then choose Enable
debugging of process from the context menu.
Only
© SAP AG JA310 9-24
Result
The server process is stopped and restarted in
debugging mode. The ON value is shown for
Debug Mode. To display the current status of the
server, in the view toolbar, choose Refresh. Wait
until the server has the status Running.
4-1-2 Edit the view StartView and choose the Implementation tab. Navigate into the
Internal
Only
method onActionshowTableView() and set a breakpoint at the beginning of the
source code of this method.
In the Web Dynpro Explorer, double click on the
Partner
view StartView, which is located at
JA310_WD_UIElements_2opt3 → Web Dynpro
Components → Ex6Comp → Views.
Use
Select the implementation tab to edit the views
cource code.
SAP
SAP
Navigate to the onActionshowTableView() method.
Doubleclick in the markerbar (along the left edge of
the editor area) to define a new breakpoint. The line
Partner
Use
will then be highlighted with a blue dot.
A suggested breakpoint would be at line
IPeopleElement = …
Internal
Only
© SAP AG JA310 9-25
4-1-3 Define a debug configuration for the application JA310_WD_UIElements_2opt3
and start this application in the Debug Mode.
To start the Web Dynpro application in the
debugger, you require a launch configuration.
Choose Run → Debug... in the main menu.
In the list of possible configurations, select Web
Dynpro Application and then choose New.
Under Name, enter JA310_Debug as the name of
the configuration.
Internal
Only
Choose Browse... next to the Project field. Select
the JA310_WD_UIElements_2opt3 project and
confirm with OK.
Choose Browse... next to the Web Dynpro
Partner
Application field. Select the application
JA310_WD_UIElements_2opt3 and confirm with
OK.
Use
If the JA310_WD_UIElements_2opt3 application
to be debugged has not yet been deployed on the
server, select the Create and deploy archive
SAP
checkbox.
SAP
Optional: To select the server node that you want to
use for the debugging procedure, choose the J2EE
engine tab page. Only server nodes, which are
Partner
Use
started in debugger mode, can be selected!
To complete your configuration, press Apply.
Internal
To start the debugger, choose Debug.
The SAP NetWeaver Studio automatically switches
to the debug perspective. The Web application is
Only
started in an external Browser. If the application
appears that it can no longer be executed, you
should switch back to the SAP NetWeaver
Developer Studio. You will see that the application
was stopped at the breakpoint and can now be
analyzed.
© SAP AG JA310 9-26
4-1-4 Change the values of the attributes FIRSTNAME and LASTNAME in the variable
newPerson.
Enter some values in the Input fields of the browser
window.
After pressing Show Names, the application is
stopped at the breakpoint.
Switch from the browser session to the Debug
Perspective.
Internal
Only
Press Step Over (F6) to process line by line of the
source code.
Partner
In the Variables View you see the new Variables
Use
defined in the code.
Stop Stepping Over before the Variable newPerson
SAP
SAP
is added to the People node collection.
Partner
Use
Internal
Only
Open the newPerson variable.
Because newPerson is an instance of the People
node element in the StartView controller and this
node People is just a reference to the People node
in the component controller, the attributes
FIRSTNAME and LASTNAME can be found under
MappedElements.
© SAP AG JA310 9-27
To display the node collection People, add the
JAVA watch expression wdContext
.nodePeople().currentPeopleElement().
To do so, click on the Expressions tab in the
Variable view. Right mouse click in the watch area
and enter the watch expression in the editor
window.
Because the People instance has not been added to
the node element collection yet, the value of this
expression is null.
Internal
Only
Go on debugging the next statement by pressing
F6.
Partner
Use
SAP
SAP
After having processed the statement responsible
for adding the variable newPerson to the People
node collection, the value of the watch expression
Partner
Use
defined in the last step changes.
Opening the hierarchy of the watch expression, the
Internal
attribute values can now be found under the node
mappedElement.
Only
Now change the first name and last name stored in
the People node element.
Double click on the attribute. In the pop up enter
the new value and press OK.
The entered value is now stored as the new value of
the attribute.
© SAP AG JA310 9-28
Resume Debugging. Because there is no other
breakpoint, the program will be processed and the
Table is displayed in the Browser.
Notice, that the line content is different from the
user input, since we have changed the values in the
debugger.
Internal
Only
4-1-5 Terminate Debugging
Proceed as follows:
Partner
In the Debug View, call the context menu for the top
node and choose Terminate.
Use
Call the context menu again and then choose
Remove All Terminated Launches.
SAP
SAP
The Remove All Terminated Launches tool button
clears the Debug view of threads that have been
Partner
Terminated.
Use
Internal
Only
© SAP AG JA310 9-29
4-2 HotSwap code (Optional Section)
4-2-2 Resume Debugging
You can restart debugging of the JA310_Debug
debug launch configuration by choosing Run →
Debug History and select JA310_Debug.
Internal
Only
4-2-3 HotSwap
Partner
Enter some values in the Input fields of the browser
window.
Use
After pressing Show Names, the data set is
displayed in the table.
SAP
SAP
Now pressing the button having the label Details,
the application is stopped at the breakpoint.
Partner
Use
Switch from the browser session to the Debug
Perspective.
Internal
Change the method call from
wdThis.wdFirePlugToDetailView();
Only
to
wdThis.wdFirePlugToStartView();
Save and click Resume
Result: Your application should reflect your code changes. Instead of showing the
DetailView, the StartView is displayed again.
© SAP AG JA310 9-30
Dynamic Modifications at Runtime
Contents:
z Introduction
z Modifying the context structure at runtime
z Modifying the UI Element hierarchy at runtime
z The use of dynamic actions
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-1
Dynamic Modifications at Runtime: Unit Objectives
After completing this unit, you will be able to :
z Understand what is dynamic programming.
z Dynamically modify and create UI elements.
z Dynamically create context elements.
Internal
Only
z Dynamically bind UI element values to context
elements.
z Dynamically create actions.
Partner
z Understand and create parameter mappings.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-2
Introduction: Topic Objectives
After completing this topic, you will be able to:
z Understand the type of programming required for
making runtime changes to declared structures such
as the context and a UI element hierarchy.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-3
Dynamic Runtime Modifications
z What is type of dynamic modifications can be made
at runtime?
Dynamic Context Manipulation
The creation, modification and deletion of context nodes and
attributes
Dynamic UI Manipulation
The creation, modification and deletion of UI elements
Internal
Only
Dynamic Assignment of Actions to UI Elements
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Dynamic Runtime Modifications
Up till now, we have looked exclusively at the declarative approach to Web Dynpro programming.
Now, we will turn our attention to the programmatic techniques needed to perform programmatically,
the steps that have so far, only been done declaratively.
Internal
Only
© SAP AG JA310 10-4
Dynamic Runtime Modifications
z Under what circumstances should I write coding that
performs dynamic modifications?
There are several situations in which type of coding could be
required:
When the structure of your data is not known until runtime
When you want the behaviour of a screen to be generic – and
therefore dynamic
Internal
Only
When you are writing utility components that must function in
a generic manner
Etc…
Partner
Development Principle
Only if the required functionality of your application does not permit
Use
design time declarations, then use a dynamic modification approach.
SAP
SAP
SAP AG 2004
Partner
Use
Dynamic Runtime Modifications
Usually, you would declare the structure of a controller’s context at design time, and then create a static
UI layout to display the data contained within the declared context.
Internal
However, it is perfectly possible to create a context and UI layout hierarchy at runtime. These techniques
should only be used when they are required!
Only
It is preferable to create as much of your context and UI layout hierarchy as possible at design time.
© SAP AG JA310 10-5
Introduction: Topic Summary
You should now be able to:
z Understand why runtime changes to declared
structures such as the context and a UI element
hierarchy are necessary.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-6
Dynamic Context Manipulation: Topic Objectives
After completing this topic, you will be able to:
z Understand how to modify the structure of the
context at runtime.
z Create a new unmapped value node
Internal
Only
z Create new attributes within the new value node
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-7
Dynamic Context Data Creation
Context Metadata to be z Example of context
created at runtime
metadata to be created
Context Root (c=1..1, s=true) dynamically.
SalesOrders (c=0..n, s=true)
LineItems (c=0..n, s=false)
Description (string)
ItemNo (int)
Internal
Only
Price (decimal)
Quantity (decimal)
OrderNo (int)
Partner
SalesDate (date)
SalesRep (string)
Use
LongText (string)
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-8
Dynamic Value Node Creation (1)
Context Metadata to be z Coding steps:
created at runtime
Context Root (c=1..1, s=true) 1. Obtain a reference to the
SalesOrders (c=0..n, s=true) metadata of the context node
LineItems (c=0..n, s=false) that will act as the new node’s
Description (string)
parent. In this case, we are
creating an independent node,
ItemNo (int)
Internal
Only
therefore we get a reference to
Price (decimal) the metadata of the root node.
Quantity (decimal) 2. Call the addChild() method
OrderNo (int) of the parent node passing the
Partner
SalesDate (date)
relevant parameters.
SalesRep (string)
Use
LongText (string)
SAP
SAP
SAP AG 2004
Partner
Use
Context node creation
All context nodes created by the application developer must have some other node acting as their parent.
This is why a context is always supplied containing a root node. The root node is the anchor point for all
other nodes, irrespective of whether they created statically at design time, or dynamically at runtime.
Internal
Node creation principle
y Create the node’s metadata
y Create the node instance based on the new metadata
Only
© SAP AG JA310 10-9
Dynamic Value Node Creation (1)
z Create the metadata for the new value node
Create an independent, unmapped value node called “SalesOrders”
// Get the metadata object for the context root node
IWDNodeInfo rootNodeInfo = wdContext.getNodeInfo();
// Create a metadata object to describe a new independent node
// called "SalesOrders"
IWDNodeInfo salesOrdersInfo =
rootNodeInfo
Internal
Only
.addChild("SalesOrders", // Name
null, // Structure reference
true, // Is singleton?
false, true, // Cardinality
false, false, // Selection cardinality
true, // Initialise lead selection?
null, // Datatype
Partner
null, // Supplier function
null); // Disposer function
Use
SAP
SAP
SAP AG 2004
Partner
Use
Creating an independent value node
We are now dealing with the structure of the context not the contents, therefore we must work with the
metadata that describes the context nodes and attributes, rather than the runtime data contained within
node collections. This means we will be working with IWDNodeInfo objects.
Internal
y Get a reference to the metadata of the node acting as the parent of the new node. In the case of an
independent node, this will be the metadata of the context root node.
y Node names must be unique within the scope of the entire context! You will get a runtime error in
Only
the context if you try to create a new node of the same name as one that already exists.
y When creating an independent node, it is forced to be a singleton; therefore, the third parameter (a
boolean) must be set to true.
© SAP AG JA310 10-10
Dynamic Value Node Creation (2)
Context Metadata to be z Coding steps:
created at runtime
Context Root (c=1..1, s=true) 1. Using the metadata object
SalesOrders (c=0..n, s=true) returned from the call to
LineItems (c=0..n, s=false) addChild(), call the
addAttribute() method as
Description (string)
many times as needed.
ItemNo (int)
Internal
Only
2. The first parameter to
Price (decimal) addAttribute() is the
Quantity (decimal) attribute name.
OrderNo (int) 3. The second parameter is the
Partner
SalesDate (date)
datatype.
SalesRep (string)
Use
LongText (string)
SAP
SAP
SAP AG 2004
Partner
Use
Dynamic Attribute Creation
Using the reference to the metadata of a context node, you can create new attributes. This applies both to
nodes created at design time (which can be extended at runtime), or new nodes created dynamically at
runtime.
Internal
Creating an new value attribute
y Call the addAttribute() method of the node info object.
y Attribute names need only be unique within the scope of their parent node.
Only
© SAP AG JA310 10-11
Dynamic Value Node Creation (2)
z Add attributes to context node.
Create some attributes for the new node called “SalesOrders”
// Using the salesOrdersInfo object created on the previous slide
// Add the attribute metadata to the new node info object
salesOrdersInfo
.addAttribute("OrderNo","ddic:com.sap.dictionary.integer");
salesOrdersInfo
.addAttribute("LongText","ddic:com.sap.dictionary.string");
Internal
Only
salesOrdersInfo
.addAttribute("SalesDate","ddic:com.sap.dictionary.date");
salesOrdersInfo
.addAttribute("SalesRep","ddic:com.sap.dictionary.string");
Partner
z You may create an attribute of any data type you wish… but, if you
want to bind a UI element to the new attribute, then it must be
Use
created using a data type defined in the SAP Java Dictionary.
SAP
SAP
SAP AG 2004
Partner
Use
Attribute data types
If you wish to create a context attribute using a standard Java class (e.g. a String), then the syntax is
“java:java.lang.String”. This context attribute however, cannot be bound to a UI element!
Internal
In order to display the data, then you must use one of the “ddic:com.sap.dictionary.*”
classes.
Only
A list of these types can be seen if you select a statically defined attribute from the context, then look at
the values in the drop down list against its datatype property.
© SAP AG JA310 10-12
Dynamic Value Node Creation (3)
Context Metadata to be z Coding steps:
created at runtime
Context Root (c=1..1, s=true)
1. Create an instance of the
SalesOrders (c=0..n, s=true)
parent node
LineItems (c=0..n, s=false)
2. Obtain a reference to the
Description (string) metadata of the parent node.
ItemNo (int) 3. Create the metadata to
Internal
Only
Price (decimal) describe the new child node.
Quantity (decimal)
Attributes can be added to the
OrderNo (int)
child node in exactly the same
Partner
SalesDate (date) way as before (not shown on
SalesRep (string) this slide)
Use
LongText (string)
SAP
SAP
SAP AG 2004
Partner
Use
Creating a dependent value node
Creating a dependent value node is identical to creating an independent value node, except for one very
important prerequisite!
Internal
The general principle here is that an instance of the parent node must exist before a child node’s
metadata can be created. In the case of an independent node, the context root node (the parent node) can
always be assumed to exist, therefore, this step was not previously required.
Only
© SAP AG JA310 10-13
Dynamic Value Node Creation (3)
z Create a child node called “LineItems”.
Create a new child node called “LineItems”
// Create a new context node using the metadata we just created
IWDNode soNode = wdContext.getChildNode("SalesOrders",0);
IWDNodeInfo soNodeInfo = soNode.getNodeInfo();
// Create the metadata for the new LineItems child node
IWDNodeInfo lineItemsInfo =
soNodeInfo
Internal
Only
.addChild("LineItems", // Name
null, // Structure reference
false, // Is singleton?
false, true, // Cardinality
false, false, // Selection cardinality
true, // Initialise lead selection?
null, // Datatype
Partner
null, // Supplier function
null); // Disposer function
Use
SAP
SAP
SAP AG 2004
Partner
Use
Creating a dependent value node
The creation of a node instance is always performed at the parent node level. Therefore, to create a new
instance of an independent node, we must call the getChildNode() method of the context root
node. The name of the required node must be passed as a parameter, and also the index within the
Internal
parent node’s element collection that will act as the parent element for this new node. In cases where
the context root node is the parent, then this value will always be 0 since the context root node has one,
and only one element in its collection.
Only
© SAP AG JA310 10-14
Dynamic Context Manipulation: Topic Summary
You should now be able to:
z Create a new unmapped value node
z Create new attributes within the new value node
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-15
Dynamic UI Manipulation: Topic Objectives
After completing this topic, you will be able to:
z Create simple UI elements on a view layout.
z Bind the new UI elements to the context
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-16
Principles of UI element manipulation
z The following coding principles must be adhered to during UI element
manipulation:
1. Only perform direct manipulation of UI element objects when it is not
possible to control their behaviour through context binding.
2. UI manipulation is only permitted within the wdDoModifyView()
method of a view controller.
3. wdDoModifyView() has a boolean parameter called firstTime.
Internal
Only
Typically, you will only build a dynamic UI element hierarchy when
firstTime == true. This avoids rebuilding the UI element hierarchy
unnecessarily.
4. Do NOT implement any coding in wdDoModifyView() that modifies
Partner
the context! The context should be considered “read-only” during the
execution of this method.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-17
Dynamic UI manipulation (1)
Context Metadata UI Element Hierarchy to
be created at runtime
Context Root RootUIElementContainer
SalesOrders
OrderNoLabel
OrderNo
OrderNoInput
SalesDate
Internal
Only
SalesRep SalesDateLabel
LongText SalesDateInput
SalesRepLabel
Partner
SalesRepInput
LongTextLabel
Use
LongTextInput
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-18
Dynamic UI manipulation (2)
Context Metadata UI Element Hierarchy to Coding steps:
be created at runtime
1. Check that this is the
Context Root RootUIElementContainer
first time the view
SalesOrders
has been rendered
OrderNo 2. Obtain a reference to
SalesDate the root UI element
Internal
Only
SalesRep container
3. Define a layout
LongText
manager for the root
UI element container
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-19
Dynamic UI manipulation (2)
z Root UI Element: Define layout manager for entire view
Initial coding for the wdDoModifyView() method
public static void wdDoModifyView(
IPrivate{nv} wdThis,
IPrivate{nv}.IContextNode wdContext,
IWDView view,
boolean firstTime) {
//@@begin wdDoModifyView
// Is the screen being rendered for the first time?
Internal
Only
if (firstTime) {
// Get a reference to the root UI element in the view
// layout hierarchy.
IWDTransparentContainer tCont =
(IWDTransparentContainer)view.getRootElement();
Partner
// Define a layout manager for the entire view
tCont.createLayout(IWDMatrixLayout.class);
Use
...
}
SAP
SAP
SAP AG 2004
Partner
Use
Note about the above code sample
The data types of parameters wdThis and wdContext to method wdDoModifyView() have been
generalised. When you display the coding in the NetWeaver Developer Studio, you will see that the
placeholder {nv} has been substituted for the name of your view.
Internal
When you wish to display the contents of a context attribute on the screen, the UI element that will
display the data must be bound to the context attribute in question. This binding relationship is most
Only
easily defined by associating the UI element with a reference to the metadata of the context attribute.
Hence the last line of coding in the code sample above.
© SAP AG JA310 10-20
Dynamic UI manipulation (3)
Context Metadata UI Element Hierarchy to Coding steps:
be created at runtime
1. Obtain a reference to
Context Root RootUIElementContainer
the metadata of the
SalesOrders
OrderNoLabel context node we
OrderNo wish to display.
SalesDate 2. Create a new Label
Internal
Only
SalesRep UI element object
(here lab)
LongText
lab 3. Set the Label’s
properties as
Partner
required
4. Add the Label object
to the root UI
Use
element container
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-21
Dynamic UI manipulation (3)
z Create a new label UI element
Create a Label UI element
// Get the reference to the context attributes metadata
IWDAttributeInfo attrInfo = wdContext.getChildNode("SalesOrders",0)
.getNodeInfo()
.getAttribute("OrderNo");
// Create a label UI element and set its text to be
Internal
Only
// name of the attribute
IWDLabel lab = (IWDLabel)view.createElement(
IWDLabel.class,
attrInfo.getName() + "Label");
// Set the text of the label = the name of the attribute
// Set the layout data to be the start of a new matrix row
Partner
// Switch off the vertical bar to the left of the label text
lab.setText(attrInfo.getName());
lab.createLayoutData(IWDMatrixHeadData.class);
lab.setDesign(WDLabelDesign.LIGHT);
Use
// Add the label to the root UI element container
tCont.addChild(lab);
SAP
SAP
SAP AG 2004
Partner
Use
Note about the above code sample
In order to create a UI element object, you must call the createElement() method of object view.
This can only be done within method wdDoModifyView().
Internal
Irrespective of the type of UI element you wish to create, createElement() will always return an
object of class IWDViewElement. This is the parent class for all other UI element objects and can be
Only
cast to the require type.
© SAP AG JA310 10-22
Dynamic UI manipulation (4)
Context Metadata UI Element Hierarchy to Coding steps:
be created at runtime
1. Create a new
Context Root RootUIElementContainer
InputField UI
SalesOrders
OrderNoLabel element object (here
OrderNo inFld)
OrderNoInput
SalesDate 2. Bind the InputField
Internal
Only
SalesRep to the context using
the attribute
LongText
metadata
inFld
3. Set the InputField’s
Partner
properties as
required
4. Add the InputField to
Use
the root UI element
container
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-23
Dynamic UI manipulation (4)
z Create a new input field UI element
Create an InputField UI element
// Create a input field UI element
IWDInputField inFld = (IWDInputField)view.createElement(
IWDInputField.class,
attrInfo.getName() + "Input");
// Bind the input field to the relevant context attribute
Internal
Only
inFld.bindValue(attrInfo);
// Set the layout data to be a matrix row cell
inFld.createLayoutData(IWDMatrixData.class);
// Add the input field to the root UI element container
tCont.addChild(inFld);
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Note about the above code sample
The easiest way for a UI element to derive a property value from the context is to obtain the metadata of
the appropriate context attribute, and then pass this to the relevant bind method of the UI element
object.
Internal
For any UI element property {uip}, various methods will exist in the UI element’s class. Not all of the
methods listed below will exist for a given UI element property.
Only
void bind{uip}(String)
void bind{uip}(IWD[Attribute|Node]Info)
String bindingOf{uip}()
{dtp} get{uip}()
void set{uip}({dtp} value)
Where {uip} is the particular property of the UI element and {dtp} is the property’s data type.
© SAP AG JA310 10-24
Dynamic User Interfaces: Topic Summary
You should now understand how to:
z Create simple UI elements on a view layout.
z Bind the new UI elements to the context
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-25
Dynamic Actions: Topic Objectives
After completing this topic, you will be able to:
z Create dynamic actions.
z Understand basic parameter mapping.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-26
Dynamic Actions
z Certain UI elements can trigger client-side events (e.g. pressing enter
in an InputField, toggling a CheckBox or selecting the row of a
table).
z In order for the client-side event to trigger the execution of a server-
side method, Web Dynpro uses the concept of Actions.
z Actions can either be assigned declaratively to UI element events at
design time, or dynamically at runtime.
Internal
Only
z Actions assigned dynamically can only refer to existing server-side
action handler methods. It is not possible to define the coding of an
action event handler dynamically; only to define which existing action
Partner
handler will be called when a client-side event is trapped.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-27
Coding Generated After Action Declaration
z Whenever an action is declared within a view controller, it can be
referenced programmatically via the following coding:
IPrivate{nv}.WDActionEventHandler.GENERIC_EVENT
IPrivate{nv}.WDActionEventHandler.ROW_SELECT
Action names become constants within the
generated action event handler class
Internal
Only
Declared actions
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Note about the above code sample
Notice that the view controller name has been generalised. {nv} will be replaced with the name of your
view controller.
Internal
Only
© SAP AG JA310 10-28
Dynamic assignment of an action to a UI element
z Coding steps:
1. Obtain a reference to the action event handler.
2. Use the action event handler to create a runtime action object
3. Important! Make sure that the runtime action object is enabled.
4. Create a UI element (e.g. a checkbox)
5. Assign the runtime action object to the event handler of the UI
element’s onToggle event.
6. Add the UI element to the UI element hierarchy
Internal
Only
get reference
Event Handler
UI Element Hierarchy 1
Partner
RootUIElementContainer create
4
… create
assign enable
Use
cb Action Action 2
Checkbox1
6 5 3
add
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-29
Dynamic assignment of an action to a UI element
z Once an action handler has been created at design time, it can be
assigned dynamically to any suitable UI element.
Obtain a reference to the previously declared event handler
// Create a reference to the action handler called GenericEvent
WDActionEventHandler actHandler =
IPrivate{nv}.WDActionEventHandler.GENERIC_EVENT;
// Create runtime action object
Internal
Only
IWDAction genericEventAction =
wdThis.wdCreateAction(actHandler,"Event text");
// Enable runtime action object
genericEventAction.setEnabled(true);
// Create a checkbox UI element
Partner
IWDCheckBox cb = (IWDCheckBox)view.createElement(IWDCheckBox.class,
"Checkbox1");
// Assign runtime action object to the checkbox UI element
Use
cb.setOnToggle(genericEventAction);
SAP
SAP
SAP AG 2004
Partner
Use
Note about the above code sample
Notice that the view controller name has been generalised. {nv} will be replaced with the name of your
view controller.
Internal
It is very important to enable a runtime action object! If you assign a disabled runtime action to a UI
element, then the UI element will become deactivated. This is also a powerful programming technique
for activating or deactivating groups of UI elements in a single statement.
Only
Unfortunately, as it stands, this coding has a couple of drawbacks!
© SAP AG JA310 10-30
Introduction to Parameter Mapping (1)
z Using the example of a drop down list UI element, the server side
action handler will need to know which item in the list has been
selected.
This is achieved through parameter mapping.
z Many UI elements pass parameter values back to the Web Dynpro
server. These parameters must be identified and their values
obtained.
Internal
Only
z The parameter names are hard-coded and can be found by looking in
the coding of the UI element object itself.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-31
Introduction to Parameter Mapping (2)
Internal
Only
3
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Find parameter names for client-side event of an UI element:
y Open the coding of the class related to the UI element in the NetWeaver Developer Studio (e.g. cless
IWDCheckBox for UI element CheckBox).
This is done by positioning the mouse cursor on the class name in the Editor and pressing Ctrl on the
Internal
keyboard. Now, the class name appears as a link. Clicking on the link opens the source code of this
class.
y The method names that start mappingOf{uievt}() can be located in the Outline View. Clicking on
Only
these names repositions the source code of the element class in the editor.
y The parameter names are listed in the method’s comment block.
© SAP AG JA310 10-32
Introduction to Parameter Mapping (3)
z The parameter onSelect of a IWDDropDownByIndex UI element is
actually found in the IWDAbstractDropDownByIndex class.
Finding the parameter name for the onSelect parameter
/**
* Returns the parameter mapping of event <code>onSelect</code>.
*
* <p>To be accessible in a view controller, a UI element event
Internal
Only
* parameter has to be mapped to a controller event handler
* parameter. This is done by defining a parameter mapping.</p>
*
* <b>Event parameters:</b>
* <ul><li>int index - Zero based index of the new selected
Partner
* value.</li></ul>
*
* @return parameter mapping list.
Use
* @see #getOnSelect()
*/
public IWDParameterMapping mappingOfOnSelect();
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-33
Introduction to Parameter Mapping (4)
z Create an action for the DropDownByIndex UI element that has a
suitable parameter.
z Other than code legibility, there is no particular need to make the
action handler parameter name the same as the UI element
parameter name.
Declared action for drop
down list processing
Internal
Only
Partner
Use
Parameter for
receiving drop down
list index value
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-34
Introduction to Parameter Mapping (5)
z Coding steps:
1.Obtain a reference to the UI element sending the parameter value
2. Define a mapping between the UI element parameter (first value) and the
action event handler parameter (second value)
Now when the client-side event is raised, the server-side action event handler
will automatically receive the parameter value supplied by the UI element.
UI Element Hierarchy
Internal
Only
Event Handler
RootUIElementContainer
DDIndex
map parameters …
Partner
2
DropDownBox1
Use
index 1
Action get reference
dd
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-35
Introduction to Parameter Mapping (6)
z Link the index parameter of the UI element to the DDIndex
parameter of the action event handler.
Finding the parameter name for the onSelect parameter
if (firstTime) {
// Get a reference to the drop down list UI element
IWDDropDownByIndex dd = (IWDDropDownByIndex)view
.getElement("DropDownBox1");
Internal
Only
// Associate the client-side parameter with the server-side
// action handler parameter
dd.mappingOfOnSelect().addSourceMapping("index","DDIndex");
}
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-36
Generic Action Handler Processing
z It was previously stated out that a single action event handler could
be dynamically assigned to multiple UI elements.
However, in order for this type of processing to be successful, the
generic action event handler method must receive additional
information in order for it to identify which UI element has called it.
UI Element Hierarchy
Internal
Only
Event Handler
RootUIElementContainer
CheckBox1
Partner
Which
Check Box ? CheckBox2
Use
Action
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-37
Use of Identifying Parameters for Generic Action Event
Handlers (1)
z Coding steps:
1. Obtain references to all the UI elements that will share the use of the
generic action handler.
2. Map the UI element’s action parameter(s) as normal
3. Additional create a hard-coded action parameter that will identify which
UI element invoked the action handler.
4. The action handler must now have an additional parameter declared in
its interface called (in this case cbName) of type String.
Internal
Only
UI Element Hierarchy
Event Handler
cbName add parameters
RootUIElementContainer
State 4
Partner
checked CheckBox1
CheckBox2
cb1
Use
checked
Action
cb2
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-38
Use of Identifying Parameters for Generic Action Event
Handlers (2)
z Add an extra parameter to each UI element so that the generic action
event handler method can identify which UI element called it.
Distinguishing 2 check boxes that both invoke the same action handler
if (firstTime) {
// Get a reference to both checkboxes
IWDCheckBox cb1 = (IWDCheckBox)view.getElement("CheckBox1");
Internal
Only
IWDCheckBox cb2 = (IWDCheckBox)view.getElement("CheckBox2");
// Associate the client-side parameter with the server-side
// action handler parameter
cb1.mappingOfOnToggle().addSourceMapping("checked","State");
Partner
cb2.mappingOfOnToggle().addSourceMapping("checked","State");
// Give each checkbox a hard-coded distinguishing value
Use
cb1.mappingOfOnToggle().addParameter("cbName",cb1.getId());
cb2.mappingOfOnToggle().addParameter("cbName",cb2.getId());
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-39
Dynamic Actions: Topic Summary
You should now be able to:
z Create dynamic actions.
z Understand basic parameter mapping.
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-40
Web Dynpro Dynamic Programming: Unit Summary
You should now be able to:
z Understand what is dynamic programming.
z Dynamically modify and create UI elements.
z Dynamically create context elements.
Internal
Only
z Dynamically bind UI element values to context
elements.
z Dynamically create actions.
Partner
z Understand and create parameter mappings.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 10-41
Exercise
Chapter: Dynamic Runtime Modifications
Theme: Manipulation of Context and
UI Element hierarchy
At the end of this Exercise, you are able to:
• Create a new value node at runtime
• Create new UI elements that display the contents of the new value
Internal
Only
node.
1 Development Objectives
Partner
In this exercise you will dynamically add an independent value node to view controller’s
context.
Use
2 Result
SAP
SAP
In this exercise, you will define a context
node having four context attributes
dynamically.
Partner
Use
In the second part of the exercise, the data
stored in the dynamic generated context
Internal
should be displayed in the browser. Thus,
the layout of the view has to be created
dynamically, too.
Only
Template Solution:
WD Project: JA310_WD_DynMod
Application: JA310_WD_DynMod
© SAP AG JA310 10-42
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
4 Overview: Developing - Create a new value node at runtime
4-1 Create a new Web Dynpro Project called JA310_Ex9.
4-2 Create a new Web Dynpro component called Ex9Comp.
Use class com.sap.training.ja310.wd.ex9 and ensure that the view name is called
Ex9View.
4-3 Open the view controller called Ex9View. Since everything in this component will
Internal
Only
be created dynamically at runtime, both the context view and the layout view will
remain empty.
4-4 Go to the layout tab of the view controller and delete the UI element called
DefaultTextView as this is not needed.
Partner
4-5 Go to the Implementation tab of view controller Ex9View. At various points during
the coding, you will need to select “Organize Imports” from the right mouse click
Use
menu in the Java editor.
4-6 Locate the wdDoInit() method and enter the coding to create a new value node
called SalesOrders.
SAP
SAP
4-6-1 Get a reference to the metadata of the controller’s root node. Use the
wdContext.getNodeInfo() method.
4-6-2 Using the object returned from getNodeInfo(), create the metadata for a new
Partner
value node by calling its addChild() method. This method requires 11
Use
parameters as follows:
- The node name (String)
- Structure reference (Class).
Internal
- Is the node a singleton? (Boolean)
- Does the node require a default element? (Boolean)
- Can the node contain multiple elements? (Boolean)
Only
- Does the node selection require one element to be selected at all times?
(Boolean)
- Can multiple elements from the node collection be selected? (Boolean)
- Should the value of the lead selection be initialized? (Boolean)
- Does this node refer to a dictionary data type (Object)
- Node supply function (IWDNodeCollectionSupplier)
- Node disposer function (IWDNodeCollectionDisposer)
4-6-3 Using the IWDNodeInfo object returned by the previous call to addChild(),
use the addAttribute() method to create four new attributes. These attributes
have their names and data types as follows:
- OrderNo ddic:com.sap.dictionary.integer
- SalesDate ddic:com.sap.dictionary.date
- SalesRep ddic:com.sap.dictionary.string
- LongText ddic:com.sap.dictionary.string
© SAP AG JA310 10-43
4-6-4 Now that you have created the metadata for a new context node and its
attributes, the next thing to create is an instance of the node itself. This is
done by using the generic context API. Since our new node SalesOrders is
an independent node, its parent is the context root node. Therefore, you need
to call the method wdContext.getChildNode(String, int) to create a new
instance of the SalesOrders context node.
4-6-5 Using the IWDNode object returned by getChildNode(), create a new
element for this node using its generic createElement() method.
4-6-6 Using the generic IWDNodeElement object returned by createElement(), call
the setAttributeValue() method once for each of the four attributes.
Remember that the second parameter to setAttributeValue() is of type
Object, therefore, you must pass any Java primitive values as their
Internal
Only
equivalent object (e.g. you can’t pass an int, but you can pass an Integer())
- OrderNo 100
- SalesDate Today’s date
- SalesRep “Harry Hawk”
- LongText “Printer Supplies”
Partner
4-6-7 Warning, when you use an object of type Date, you must import package
java.sql.Date, not java.util.Date!
Use
By default, Web Dynpro always uses java.sql.Date objects.
4-6-8 Finally add the node element object to the node collection.
4-7 Now you have some data stored in the dynamically defined value node
SAP
SAP
SalesOrders! However, there are no UI elements defined in the views layout to
display the data.
Partner
Use
5 Overview: Developing - Create new UI elements that display the contents of the new
value node
5-1 Locate the method wdDoModifyView(). It is in this method that you will create the
Internal
dynamic UI elements.
5-1-1 Enclose all of the following code within a test for the parameter firstTime
being true.
Only
5-1-2 Obtain a reference to the root UI element container under which all
subsequent UI elements will be defined. This is an object of type
IWDTransparentContainer.
To do this you must use the view.getRootElement() method remembering
that whether you’re getting a reference to an existing UI element, or creating
a new one, the view object always passes back a generic IWDViewElement
object. Thus you have to cast this object to the appropriate type.
5-1-3 Set the root UI element’s layout manager to be Matrix layout. This is done
by calling the createLayout() method, not the setLayout() method that you
might expect. The createLayout() method requires the class of one of the
layout manager interfaces as its parameter. In this case, you will need
IWDMatrixLayout.class.
© SAP AG JA310 10-44
5-1-4 Obtain a reference to the metadata of the new SalesOrders node that has just
been created in method wdDoInit(). You will now have an IWDNodeInfo
object.
5-1-5 Create a for loop to process all the attributes of the context element
SalesOrders. To Loop about the elements, an iterator will be used. Use the
code completion functionality of the IDE in order to generate the code to
iterate about the collection.
5-1-6 Obtain an attribute iterator object from the IWDNodeInfo object describing
node SalesOrders. This is done by calling the method
IWDNodeInfo.iterateAttributes(). Correct the for statement accordingly.
5-1-7 Inside this loop, perform the following code:
Internal
Only
- Store the next item from the iterator as an IWDAttributeInfo object.
- Create a new IWDLabel object.
The view.createElement() method must be passed both the class and the
name of the UI element it is to create. The name should be constructed
Partner
from the name of the IWDAttributeInfo object you stored in the previous
step (hint: call its getName() method) plus the text “Label”.
- Set the label’s text property to be the text returned from
Use
IWDAttributeInfo.getName().
- Set the label’s layout data to be MatrixHeadData (hint: use the
createLayout() method – there is no setLayout() method!)
SAP
SAP
- Set the label’s design property to be WDLabelDesign.LIGHT. This will
switch off the vertical bar to the left of the label text.
- Set the label’s Label for property to be identical to the Attribute's name
Partner
(IWDAttributeInfo.getName()) plus the text “Input” (this will be the name
Use
of the Input UI element.
- Add the label UI element to the transparent container object derived in
step 5-1-2 (Hint: use the addChild() method)
Internal
- Now create an IWDInputField object using exactly the technique used
for the label substituting IWDInputField where previously you had
Only
IWDLabel.
The name of the UI element object should end with the text “Input”.
- Bind the input field UI element you have just created to the attribute info
object derived in step 5-1-4.
- Set the input field’s layout data to be MatrixData.
- Add the input field UI element to the transparent container object derived
in step 5-1-2.
5-1-8 Save your metadata.
5-2 Create a new application called Ex9App belonging to package
com.sap.training.wd.ex9.
5-3 Deploy and run your application.
© SAP AG JA310 10-45
Solution
Chapter: Dynamic Runtime Modifications
Theme: Manipulation of Context and
UI Element hierarchy
4 Source code of method wdDoInit().
Internal
Only
public void wdDoInit()
{
//@@begin wdDoInit()
Partner
// Get reference to the metadata of the context root node
Use
IWDNodeInfo rootNodeInfo = wdContext.getNodeInfo();
// Create new metadata object for node SalesOrders
SAP
SAP
IWDNodeInfo soNodeInfo =
rootNodeInfo.addChild(
"SalesOrders", // Name
Partner
Use
null, // Structure reference
true, // Singleton?
false, true, // Cardinality
Internal
false, false, // Selection cardinality
true, // Init. lead selection
Only
null, // Dictionary reference
null, // Supplier function
null); // Disposer function
// Create four attributes in the new SalesOrders node
soNodeInfo.addAttribute("OrderNo",
"ddic:com.sap.dictionary.integer");
soNodeInfo.addAttribute("SalesDate",
"ddic:com.sap.dictionary.date");
soNodeInfo.addAttribute("SalesRep",
© SAP AG JA310 10-46
"ddic:com.sap.dictionary.string");
soNodeInfo.addAttribute("LongText",
"ddic:com.sap.dictionary.string");
// Create an instance of the SalesOrders node
IWDNode soNode = wdContext.getChildNode("SalesOrders", 0);
// Create a new collection element for node SalesOrders
..IWDNodeElement soElement = soNode.createElement();
Internal
Only
// Set the attribute values for the new element
soElement.setAttributeValue("OrderNo", new Integer(100));
soElement.setAttributeValue("SalesDate",
Partner
new Date(System.currentTimeMillis()));
soElement.setAttributeValue("SalesRep", "Homer Simpson");
Use
soElement.setAttributeValue("LongText", "Printer Supplies");
// Add the element to the node collection
SAP
SAP
soNode.addElement(soElement);
//@@end
Partner
Use
}
Internal
5 Source code of method wdDoModifyView().
Only
public static void wdDoModifyView(
IPrivateEx9View wdThis,
IPrivateEx9View.IContextNode wdContext,
com.sap.tc.webdynpro.progmodel.api.IWDView view,
boolean firstTime)
{
//@@begin wdDoModifyView
// Is this the first time the view has been rendered?
if (firstTime) {
© SAP AG JA310 10-47
// Get a reference to the root UI element container
IWDTransparentContainer rootElement =
(IWDTransparentContainer) view.getRootElement();
// Set the containers layout manager to MatrixLayout
rootElement.createLayout(IWDMatrixLayout.class);
// Get a reference to the metadata of the new SalesOrders node
IWDNodeInfo soNodeInfo =
wdContext.getChildNode("SalesOrders", 0).getNodeInfo();
Internal
Only
// Iterate around the attribute metadata of node SalesOrders
Partner
for (Iterator iter = soNodeInfo.iterateAttributes();
iter.hasNext();) {
Use
// Get the metadata of the next attribute
IWDAttributeInfo soAttrInfo =
SAP
SAP
(IWDAttributeInfo) iter.next();
// Create a label UI element using the name of the attribute +
Partner
Use
// "Label" for the name
IWDLabel label =(IWDLabel) view.createElement(
IWDLabel.class,
Internal
soAttrInfo.getName() + "Label");
Only
// Set the text property to the name of the attribute, change
// the layout data to MatrixHeadData, switch off the vertical
// bar to the left of the label text and connect the label to
// the input field, to be defined next .
label.setText(soAttrInfo.getName());
label.createLayoutData(IWDMatrixHeadData.class);
label.setDesign(WDLabelDesign.LIGHT);
label.setLabelFor(soAttrInfo.getName() + "Input");
// Add the label UI element to the root UI element container
rootElement.addChild(label);
© SAP AG JA310 10-48
// Create an InputField UI element using the name of the
// attribute + "Input" for the name
IWDInputField ioField =
(IWDInputField) view.createElement(
IWDInputField.class,
soAttrInfo.getName() + "Input");
// Set the layout data to be Matrix Data
ioField.createLayoutData(IWDMatrixData.class);
Internal
Only
// Bind the InputField UI element to the context using the
// attribute's metadata
Partner
ioField.bindValue(soAttrInfo);
Use
// Add the InputField UI element to the root UI element
// container
rootElement.addChild(ioField);
SAP
SAP
Partner
Use
}
//@@end
Internal
Only
© SAP AG JA310 10-49
The Adaptive RFC Layer
Contents:
z Remote invocation of ABAP functionality
z The creation and management of Adaptive RFC (aRFC)
model objects
z The management of use aRFC Model objects
z The configuration of the SLD and JCo Connections
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-1
Remote invocation of ABAP functionality:
Topic Objectives
After completing this topic, you will be able to:
z Understand the background technology for
the aRFC layer
z Understand the purpose and function of
the aRFC Layer.
z Understand the basic requirements of a
Internal
Only
remote callable ABAP function module.
z Understand the minimum level of SAP
competence required by all Web Dynpro
Partner
developers for using an ABAP based
interface.
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-2
A brief history of remote function calls into SAP
z External programs have been able to invoke ABAP functionality
within an SAP system since version 2.0F of R/3 (circa 1994).
z The Remote Function Call (RFC) Remote Function Call
layer makes use of the standard
Common Programming Interface for
Communications (CPIC) layer which
in turn, sits directly on top of the CPI-C
TCP/IP layer.
Internal
Only
z Originally, the RFC layer was only
accessible from C programs! TCP/IP
Partner
z The JCo layer was later added to give the Java language
access to the RFC layer.
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-3
The original RFC interface architecture
Remote client SAP System
ABAP Runtime
Environment
generated by the SAP
Enterprise Connector
Static proxy objects
External Program
RFC Layer
RFC enabled
librfc32.dll
JCo Layer
CPI-C
CPI-C
TCP/IP ABAP
Function
Module
Internal
Only
Partner
z The SAP Enterprise Connector creates static proxy objects at
Use
design time. This means interface metadata are not available at
runtime.
SAP AG 2004
SAP
SAP
The original implementation of the JCo layer contained functionality to adapt to changes in the interface
Partner
structure, but at that time, no applications required this functionality, so it was not implemented in the
Use
earlier API’s such as the Enterprise Connector.
Regardless of language, all external programs that wish to invoke functionality within an SAP system
will ultimately use the RFC layer.
Internal
Only
© SAP AG JA310 11-4
Why not use the existing SAP Enterprise Connector?
The SAP Enterprise Connector has the following limitations:
If the structure of the RFC interface changes after deployment, a
JCo application using static proxy objects will most likely suffer
a fatal runtime error.
Due to the absence of a Java dictionary, ABAP dictionary fields
can only be represented using primitive data types.
Interface metadata are not available at runtime.
Standard SAP extensibility features such as the .APPEND
Internal
Only
structure are not supported.
Different versions of dictionary structures found in different
versions of SAP systems can not be supported.
Partner
Use
SAP AG 2004
SAP
SAP
At the lowest technical level, a remote function call to an SAP system sends and receives a byte stream.
Partner
The proxy objects built by the Java Enterprise Connector use a static offset and length lookup to parse
Use
the byte stream and obtain the field level information. Therefore, if a new field is added to the interface
structure, the positions of all subsequent fields are shunted down the byte stream. The Java Enterprise
Connector’s static offset and length lookup system can not react on such changes!
The JCo layer itself contains the functionality to access any field in the RFC interface; however, the
Internal
Java Enterprise Connector makes no use of this functionality, and can therefore not react to structural
interface changes at runtime.
Only
© SAP AG JA310 11-5
The Adaptive RFC Layer architecture
J2EE Engine SAP System
Web Dynpro Java ABAP Runtime
Framework Dictionary
Environment
Web Dynpro Application
Adaptive RFC Layer
Proxy objects
generated by
jRFC Layer
RFC Layer
RFC enabled
JCo Layer
CPI-C
CPI-C
TCP/IP ABAP
Function
Module
Internal
Only
Partner
z The Adaptive RFC layer was developed both to simplify, and
Use
fully implement, the functionality found in the JCo layer.
SAP AG 2004
SAP
SAP
Only Web Dynpro makes use of the Adaptive RFC layer.
Partner
Every time an RFC enabled function module is called in an SAP system, the metadata describing its
Use
interface is checked.
If the interface has changed since the last invocation, the new metadata data is obtained from the SAP
system. The application program should then check the dictionary for changes and react appropriately.
The aRFC layer will automatically update the dictionary with any metadata changes, but it is up to you
Internal
to design your Web Dynpro application to react to these changes!
Only
© SAP AG JA310 11-6
Features of the Adaptive RFC Layer (1)
z The aRFC layer provides dictionary based access to the byte
stream received at the JCo communication layer.
z The aRFC layer makes metadata available at runtime such as:
Dictionary simple types
Field labels
Column headings
Tool Tips
Internal
Only
Value Sets
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-7
Features of the Adaptive RFC Layer (2)
z The Adaptive RFC (aRFC) Layer can respond to certain
structural interface changes by making use of existing
functionality in the JCo layer.
The aRFC layer is adaptive, not dynamic!
It can adapt to the addition of new fields within an existing
interface structure, but it cannot adapt to the addition of an
entirely new structure.
z The aRFC layer will adapt the runtime metadata of an RFC
Internal
Only
interface automatically, but it is up to the Web Dynpro
developer to write their coding in such a way that it responds
to these changes!
Partner
Use
SAP AG 2004
SAP
SAP
The aRFC layer can adapt to the addition of new fields in an existing interface structure.
Partner
For instance, any function modules delivered by SAP that make use of .APPEND structures can be
Use
extended by the customer. It is this type of interface change to which the adaptive RFC layer can react,
and the metadata definition will be updated at runtime.
The Web Dynpro Application must check for metadata changes!
If you want your application to be able to respond to the new metadata supplied by the aRFC layer at
Internal
runtime, then you must write your application to check for changes. There’s no magic here!
Only
© SAP AG JA310 11-8
The interface of an ABAP function module
RFC Function z Irrespective of whether
Module an ABAP function
1..1 module is remote
0..1 Import callable or not, they all
Parameters have exactly the same
interface architecture.
0..1 Export
Parameters
Internal
Only
0..1 Changing * * *
Parameters
DDIC
Structure
*
Partner
*
Tables
*
Use
0..1
Exceptions
SAP AG 2004
SAP
SAP
All ABAP function modules have the following interface architecture:
Partner
y Import parameters
Use
Scalar or structured parameters used only on the inbound side of the interface having a cardinality of
0..1.
y Export parameters
Scalar or structured parameters used only on the outbound side of the interface having a cardinality
Internal
of 0..1.
y Changing Parameters
Only
Bi-directional scalar or structured parameters having a cardinality of 0..1.
RFC enabled function modules tend not to use CHANGING parameters.
y Tables
Bi-directional structured parameters having a cardinality of 0..n.
y Exceptions
Text labels used to identify an unexpected termination of processing within the function module.
Exceptions can only be invoked by means of the ABAP statement RAISE.
RFC enabled function modules should avoid the use the RAISE statement! The reason for this will
be explained later.
© SAP AG JA310 11-9
What is a BAPI?
z In 1996, SAP introduced the concept of the Business
Application Programming Interface (BAPI).
z A BAPI is an ABAP function module that fulfils specific design
criteria. A BAPI must:
1) Have a name that starts with BAPI_
2) Implement the method of an SAP Business Object
3) Maintain a static interface through different versions of the SAP system
Internal
Only
4) Be remote enabled
5) Run to completion without the need for any secondary user interaction
6) Handle all errors gracefully
7) Not cause an ABAP session change
Partner
Criteria adhered to by SAP
Use
Criteria to which a customer developed remote function module
must adhere
SAP AG 2004
SAP
SAP
Only SAP delivered coding can comply with criteria 1 to 3.
Partner
During a Web Dynpro implementation that uses an SAP system as its business back-end, it is likely that
Use
your Web Dynpro program will need to call some custom written ABAP function modules. In this
situation, it is essential that your function modules comply with criteria 4 to 7 above!
Further clarification for custom written remote modules:
y Point 4: Don’t forget to switch on the Remote Enabled flag!
Internal
y Point 5: If any attempt is made to invoke a SAPGUI screen of any sort, the RFC connection will be
terminated immediately!
y Point 6: A remote module must run to completion irrespective of any errors that occur. This means
Only
that when control is passed back to Web Dynpro, the data in the interface will accurately reflect the
success or failure of execution.
The use of the ABAP statement RAISE must be avoided because it will terminate the function module
immediately, leaving the interface in a potentially undefined state.
y Point 7: Important: Do not use any ABAP statement that would cause the current logical unit of
work (LUW) within the SAP User Roll Area to terminate! This has an impact on the RFC connection
and will interfere with your ability to manage transactional data in the SAP system.
© SAP AG JA310 11-10
Terminology
z The aRFC layer can call any remote enabled ABAP function
module whether it be a standard BAPI delivered by SAP, or a
customer written remote function module.
z Therefore, the subsequent slides will refer to generic Remote
Function Modules (RFM’s) rather than only BAPI’s.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-11
Minimum required level of SAP competence
The skills listed below should be considered the minimum level of SAP
competence required by all Web Dynpro developers wishing to use the
aRFC interface.
Beyond this, extra skills related to the actual SAP application area within
which you are working may also need to be acquired.
z Logon to a SAP system
z Use transaction SE37 (Function Module Builder) to:
Examine the interface of a function module
Internal
Only
Run the function module with appropriate test data
Examine the output from a function module’s execution
z Use transaction SE11 (ABAP Dictionary) to examine a table or data
Partner
structure’s metadata.
z Use transaction SE16 (Data Browser) to display the contents of a
database table.
Use
SAP AG 2004
SAP
SAP
Whilst it is not necessary for a Java Web Dynpro programmer to be able to program in ABAP, it is very
Partner
important that the interface presented by an ABAP function module is understood. Within Web Dynpro,
Use
the different parameter types found in the function module’s interface will be represented as different
model objects. In order to understand the generated objects, you must understand the interface of the
underlying ABAP function module.
If you are a Java developer with no prior experience of an SAP system, then in order to have a full
Internal
understanding of the interface with which you are working, you should gain the above listed skills in an
SAP system (these skills are very basic and can be acquired in a matter of hours).
Only
© SAP AG JA310 11-12
Remote invocation of ABAP functionality:
Topic Summary
You should now be able to:
z Understand the background technology for the aRFC
layer
z Understand the purpose and function of the aRFC
Layer.
z Understand the basic requirements of a remote
Internal
Only
callable ABAP function module.
z Understand the minimum level of SAP competence
required by all Web Dynpro developers for using an
ABAP based interface.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-13
aRFC model objects: Topic Objectives
After completing this topic, you will be able to:
z Create an Adaptive RFC model object
z Understand the model object structure created by
the import wizard
z Understand the basic principles of model object
management
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-14
Creating an aRFC model object (1)
Select Import
Adaptive RFC Model
and press Next.
Right mouse click on
the Models node
Internal
Only
and select Create
Model.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-15
Creating an aRFC model object (2)
Enter a model name.
Enter a model
package name.
Internal
Only
Partner
z Important: Each model object must live in its own Java package!
Use
SAP AG 2004
SAP
SAP
Please observe the SAP naming convention for model objects: {nm} = {m}Model.
Partner
Where {nm} is the actual model object name and {m} is the desired model name
Use
Always ensure that you create an individual Java package per model object! The package name should
conform to a pattern such as {pkg1}.{pkg2}.{pkg3}.models.{m}. See the SAP recommended
naming convention listed in the Appendix.
Internal
If you have two model objects that share the same data structure (e.g. the structure BAPIRET2 that
defines the RETURN parameter of many BAPI’s), then placing the model objects in different packages
Only
avoids any runtime ambiguity that could occur.
© SAP AG JA310 11-16
Creating an aRFC model object (3)
Enter names for the
logical systems
Internal
Only
Press Next.
z The logical systems should be named according to the type of
Partner
business information they supply.
z A logical system does not need to exist in the J2EE engine at the
Use
time the model object is created.
SAP AG 2004
SAP
SAP
Logical system names can be any meaningful names you desire. However, please avoid creating names
Partner
that contain the SAP system name, as this will create confusion once the application is transported out
Use
of the development environment.
E.G.: If you wish to call some HR Payroll remote modules in the SAP system called DEV, then
HR_PAYROLL_DATA and HR_PAYROLL_METADATA are much better logical system names than
Internal
DEV_PAYROLL_DATA and DEV_PAYROLL_METADATA.
Only
© SAP AG JA310 11-17
Creating an aRFC model object (4)
If SAPGUI client is installed
on the same machine as
the SAP NetWeaver
Developer Studio:
All systems defined in
SAPLogon will be available
in the System drop down
If the SAPGUI
Internal
Only
list on the Load Balancing
client is not
tab.
installed:
Enter the system
details manually
Partner
on the Single
Server tab.
Use
SAP AG 2004
SAP
SAP
As for the SAP GUI for Windows, the information displayed by the drop down list on the Load
Partner
Balancing tab is obtained from the saplogon.ini file, which is located in the Windows directory.
Use
Internal
Only
© SAP AG JA310 11-18
Creating an aRFC model object (5)
Enter a wildcard
search for the
remote module
name(s) and
press search
Each selected
remote module
Internal
Only
will be imported
into the current
model object
Partner
z When this screen initially appears – it will be empty!
Use
SAP AG 2004
SAP
SAP
When this screen initially appears, it will be empty!
Partner
This is a deliberate design decision because the average SAP contains around 9,500 remote callable
Use
function modules. It would be highly inefficient to present a list 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 been entered and the Search
button has been pressed.
Internal
Only
© SAP AG JA310 11-19
Creating an aRFC model object (6)
z Once the import has
completed, you will see the
Import Log.
z If the interface of a remote
module changes during the
development process, you
can re-import the model
object, and it is here in the
Import Log that you will see
Internal
Only
the changes.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-20
What has the aRFC model wizard created?
The aRFC
model
wizard
creates
two sets
of objects
Internal
Only
z A Java Dictionary is created for z A model class hierarchy
Partner
each model object. It contains the containing the interface structure
following metadata from which the of each RFM.
Use
RFM interfaces are constructed.
z These classes are built from the
z Simple Types
metadata found in the model’s
z Structures
SAP AG 2004
dictionary.
SAP
SAP
Dedicated Model Dictionary
Partner
A dedicated dictionary is created for each model object. Each dictionary contains a set of Simple Types
Use
and a set of Structures
y Simple Types
The Simple Types are the dictionary definitions for the individual fields in the interface.
y Structures
Internal
These are the dictionary entities that describe all the structured interface parameters. Every Structure
listed here is built from the Simple Types shown in the same dictionary.
Model Class Hierarchy
Only
A hierarchy of model classes is constructed to represent the entire interface of each 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 the ABAP data dictionary,
not the parameter name in the RFM’s interface. For instance, if the RFM has an EXPORTING parameter
called RETURN that is based on the dictionary structure BAPIRET2, then you will see the name
BAPIRET2 listed and not RETURN.
© SAP AG JA310 11-21
Java Dictionary Simple Types
Internal
Only
Partner
z Each Simple Type is a distinct dictionary entry that defines a field in
Use
the RFM’s interface, and uses the same name as the corresponding
ABAP dictionary type.
SAP AG 2004
SAP
SAP
Simple Types
Partner
Simple Types for aRFC interface fields are defined using Web Dynpro Built-In Types (date, string,
Use
integer etc). These are not the same as the namesake Java classes!
Internal
Only
© SAP AG JA310 11-22
Java Dictionary Structures
Each field in the Structure
is built from the Simple
Types defined in the
model’s dictionary.
Internal
Only
Partner
z Java Dictionary Structures are constructed from Simple Types
Use
z They have the same name as the corresponding structure in the
ABAP dictionary.
SAP AG 2004
SAP
SAP
Structures
Partner
The structured classes seen in the model hierarchy are defined using the structured data types defined in
Use
the models distinct dictionary.
Internal
Only
© SAP AG JA310 11-23
The Model Class Hierarchy (1)
Double click on the
model class name…
… select Properties from the lower window
Internal
Only
to see what role it performs in the interface.
z aRFC Model Classes shown in the
Partner
hierarchy come in three distinct types:
Input
Use
Output
Structure
SAP AG 2004
SAP
SAP
Model Class RFC Types
Partner
All aRFC model classes have an RFC part type associated with them; this describes the function played
Use
by the class in the RFC interface.
Internal
Only
© SAP AG JA310 11-24
The Model Class Hierarchy (2)
To see the scalar parameters,
double click on the class name…
Internal
Only
… and then select Properties
Partner
in the editor window.
Use
Only structured parameters are
shown in the model class hierarchy.
SAP AG 2004
SAP
SAP
Scalar parameters
Partner
A scalar parameter is any value that can be described as a single field. These are not shown directly in
Use
the model class hierarchy, but can be displayed by double clicking on the model class name, and then
selecting the Properties tab from the editor window.
Internal
Only
© SAP AG JA310 11-25
The Model Class Hierarchy (3)
The Input model class should always
be regarded as the controlling class.
This is the only model class to possess
an execute() method. Therefore it is
known as an executable model.
An instance of the Output model class
will be created when the execute()
Internal
Only
method on the corresponding Input
class is called.
Classes representing the structures
Partner
used to type the non scalar RFM
parameters
Use
SAP AG 2004
SAP
SAP
Relationship between model classes
Partner
All RFC model classes are arranged in a hierarchical structure that, taken together, represents the entire
Use
interface of function module {rfm}.
The controlling class in this hierarchy is always {rfm}_Input. This class must be instantiated first,
and it is the only RFC model class to possess an execute() method. Once the method
Internal
{rfm}_Input.execute() has been called, an instance of class {rfm}_Output will be available.
Only
All structures used to type IMPORTING, EXPORTING, CHANGING or TABLES parameters to {rfm}
will be represented by the classes of RFC type structure.
© SAP AG JA310 11-26
The Model Class Hierarchy (4)
Any parameter that occurs only
under the {rfm}_Input class is a
structured IMPORTING parameter.
E.G. Destination_From
Occurs
twice! Any parameter that occurs under
Internal
Only
both the {rfm}_Input and
{rfm}_Output classes is bi-
directional.
Partner
E.G. Flight_List
Use
SAP AG 2004
SAP
SAP
Bi-directional parameters
Partner
Important: Due to the fact that CHANGING and TABLES parameters of an RFM are bi-directional, it is
Use
necessary to preserve an “input” and “output” image of these parameters. This means that you will see
the same parameters listed under both the {rfm}_Input and {rfm}_Output classes. At runtime,
these classes become separate instances that hold the “before execution” and “after execution” images
of the parameter values.
Internal
This important fact that must be understood because it has a significant impact when binding context
Only
model nodes to model objects.
© SAP AG JA310 11-27
The Model Class Hierarchy (5)
Notice that the {rfm}_Input
class always has a subordinate
structure called Output.
The Output structure is always an
instance of class {rfm}_Output.
Instance
of z Every time the
{rfm}_Input.execute() method is
Internal
Only
called, an instance of class
{rfm}_Output will be created.
z It is not possible for an RFM to
generate any output with there first
Partner
being an instance of the Input object.
z This principle remains true even if the
Use
RFM requires no input parameters!
SAP AG 2004
SAP
SAP
Executing an aRFC model object and handling the output data
Partner
If an RFM requires input parameters, these must be supplied to the instance of class {rfm}_Input.
Use
Then the {rfm}_Input.execute() method can be called.
Once the RFM has executed, and instance of {rfm}_Output will be available as a child of
Internal
{rfm}_Input.
Only
© SAP AG JA310 11-28
Principles of model object management (1)
? How many RFMs should
a model object contain?
?
Here are some possible answers.
A model object should be constructed to contain:
z 1 RFM per model object
Internal
Only
z All the RFMs for your entire application
z As many RFMs as are needed by the current component
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-29
Principles of model object management (2)
In order to answer this question, the following
principles must be understood:
1. RFC connection pools are specific to a JCo destination.
2. A Web Dynpro component is the unit of development
and the unit of reuse. The component is also the
consumer of a model object.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
RFC connection pools are specific to a JCo destination.
Partner
Therefore, all deployed applications using the same model object pointing to the same JCo destination
Use
will share the same connection pool.
This fact defines both the scope of connection management and determines the number of concurrent
applications (and therefore users) that may use the JCo destination. This also explains why JCo
destinations should be named according to the type of business data they will supply – not according to
Internal
the name of the SAP system supplying the data.
A Web Dynpro component is the unit of development and the unit of reuse. The component is also
the consumer of a model object.
Only
Therefore, a model object should contain no more functionality than is required by the consuming
component.
Since a component should be written to implement a discrete business task, the models it consumes
should therefore supply distinct subsets of functionality, grouped together by business task.
© SAP AG JA310 11-30
Principles of model object management (3)
Answer:
A model object should contain
those RFMs that supply the
functionality for either a discrete
business task, or some atomic
subset of the business task.
In the example on the right, the model
ServiceOrderModel has been
Internal
Only
constructed such that it contains only
those RFMs needed for Service Order
management.
This model is then used by a Web
Partner
Dynpro component for managing
Service Orders.
Use
SAP AG 2004
SAP
SAP
Having one RFM per model is inefficient from a connection management point of view.
Partner
Having all your RFMs in one big model object is inefficient from a reuse point of view.
Use
Internal
Only
© SAP AG JA310 11-31
Model object management:
SAP Recommendations (1)
1. Always develop Web Dynpro
applications using Development
Components (DCs).
Internal
Only
z DCs are normally built in conjunction with SAP’s Java Development
Infrastructure (JDI).
Partner
z If you do not have a JDI configured, then it is possible to develop
DC’s using the MyComponents branch found under the
LocalDevelopment branch in the Development Configurations
Use
Perspective.
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-32
Model object management:
SAP Recommendations (2)
2. Place all your model objects
into a specific “Models” Web
Dynpro DC.
Internal
Only
Notice that this DC contains no
components!
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-33
Model object management:
SAP Recommendations (3)
3. Add each model to the
DC’s Public Part.
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-34
Model object management:
SAP Recommendations (4)
4. Any application DC
wishing to use a model
object should declare
the use of the Models
DC.
Internal
Only
The application DC now
has access to all the
Partner
models in the Models DC.
Use
SAP AG 2004
SAP
SAP
It is most important, that once you have built your DC’s, you should perform a DC Build. This is done
Partner
by right mouse clicking on the DC name itself, then selecting Development Component and then Build
Use
from the side-bar menu.
This build process is different from the Rebuild Project option. Each Public Part becomes a separate
JAR file, and the DC Build process rebuilds these public part JAR files. This is a separate build process
from the normal project build process.
Internal
Only
© SAP AG JA310 11-35
aRFC model objects: Topic Summary
You should now be able to:
z Create an Adaptive RFC model object
z Understand the model object structure created by
the import wizard
z Understand the basic principles of model object
management
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-36
Using aRFC Model Objects: Topic Objectives
After completing this topic, you will be able to:
z Bind a context model node to an aRFC model object.
z Use a model object at runtime
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-37
Context Model Nodes
Internal
Only
z A context model node is a node that obtains its metadata from a
model object.
Partner
z A context model node must be bound to a model object in order to
be useable.
z Important: A model node holds references to the model objects.
Use
The actual runtime data is stored in the model objects!
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-38
Binding a context model node
Internal
Only
Partner
z A context model node can be bound to a model object using the
graphical Data Modeller tool, or manually by selecting Edit Model
Use
Binding from the right mouse click pop-up menu of the context
model node.
SAP AG 2004
SAP
SAP
The Data Modeler Tool provides a wizard to create not only the binding between the controller context
Partner
and the model object, but also most of the source code necessary to execute the model and handle
Use
possible errors.
Internal
Only
© SAP AG JA310 11-39
General architecture for RFM invocation (1)
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Node Root Node
ng
Bindi
ent
lem
ing
Context Mapping UI E
ind
onAction{act}()
Internal
Only
lB
Model
de
Usage
Mo
Model callRFM()
Object
Partner
z Transport Data from the Model to UI elements by context mapping
Use
and data binding.
SAP AG 2004
SAP
SAP
Data passes from the model object to the screen using this chain of connections:
Partner
y The context of the component controller is bound to the model object.
Use
y The view controller context is mapped to the component controller context.
y The UI elements are bound to the view controller’s context.
Internal
Only
© SAP AG JA310 11-40
General architecture for RFM invocation (2)
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Root
xt
Node
par e conte Node
Pr e
ing
ind
onAction{act}()
Internal
Only
lB
Model
de
Usage
Mo
Model callRFM()
Object
Partner
1. Prepare the context by creating a model object and binding it to the
Use
corresponding model node.
SAP AG 2004
SAP
SAP
Preparing the controllers context includes the creation of a model object and the binding of this instance
Partner
to a model node in the context.
Use
For each non-scalar import parameter of the RFM, it is necessary to create a related object and add this
object to the model instance. The object has to be an instance of the generated model class, that has the
name of the import parameters structure type.
Internal
Only
© SAP AG JA310 11-41
General architecture for RFM invocation (3)
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Node Root Node
onAction{act}()
Internal
Only
Model
Usage
Model callRFM()
Object
Partner
2. The client side event (pushing the button) triggers the server side
Use
event handler method onAction{act}().
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-42
General architecture for RFM invocation (4)
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Node Root Node
onAction{act}()
Internal
Only
Model
Usage
Model callRFM()
Object
Partner
3. The server side event handler method onAction{act}() in the
Use
view controller calls a method in the component controller to invoke
the RFM.
SAP AG 2004
SAP
SAP
To access a method of the component controller from within a method of the view controller, the self
Partner
reference wdThis is used.
Use
E.G. To call the method {nm} in the component controller of component {nc}, the following
expression is used: wdThis.wdGet{nc}Controller.{nm}()
Internal
Only
© SAP AG JA310 11-43
General architecture for RFM invocation (5)
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Node Root Node
2)
I
nv utpu
ali t
o
onAction{act}()
Internal
Only
da no
Model
te de
Usage
co
nt
ex
Model callRFM()
t
Object
Partner
1) Call RFM
4. The component controller method invokes the actual RFM
Use
functionality, and then invalidates the corresponding output node
in the context.
SAP AG 2004
SAP
SAP
Invalidating the models output nodes is necessary to have access to the actual model data.
Partner
Use
Internal
Only
© SAP AG JA310 11-44
General architecture for RFM invocation
Custom Controller View Controller
Implementation Implementation Layout
Context Context
wdDoInit()
Root Node Root Node
ng
Bi ndi
ent
I Elem
U
Context Mapping
onAction{act}()
Internal
Only
Model
Usage
Model callRFM()
Object
Partner
5. Through context mapping and UI element binding, the data
Use
returned by the RFM call is now visible on the screen.
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-45
Using model objects at runtime (1)
Create a model object instance and bind it to a context model node
public void wdDoInt() {
//@@begin wdDoInit()
//Obtain a reference to the component’s message manager
msgMsg = wdComponentAPI.getMessageManager();
// Create a new instance of the Bapi_Flight_Getlist_Input model object
bapiInput = new Bapi_Flight_Getlist_Input();
// Create the structured input parameters required for this RFM
Bapisfldst destTo = new Bapisfldst();
Bapisfldst destFrom = new Bapisfldst();
// Add the DESTINATION_TO and DESTINATION_FROM parameter objects to the
Internal
Only
// model object representing the input side of the BAPI interface
bapiInput.setDestination_To(destTo);
bapiInput.setDestination_From(destFrom);
// Bind the model object instance to context model node
wdContext.nodeBapi_Flight_Getlist_Input().bind(bapiInput);
//@@end
Partner
}
...
//@@begin others
Use
IWDMessageManager msgMgr;
Bapi_Flight_Getlist_Input bapiInput;
//@@end
SAP AG 2004
SAP
SAP
This coding will normally be defined in the wdDoInit() method of a custom controller (typically the
Partner
component controller).
Use
Once the above coding has been executed, the BAPI_FLIGHT_GETLIST function module will be
able to receive input values in the structured parameters DESTINATION_TO and
DESTINATION_FROM.
Internal
It is useful to create the executable model object as a class variable. That way it can be accessed by any
method in the custom controller.
It is also useful to create a class variable to refer to the component’s message manager.
Only
© SAP AG JA310 11-46
Using model objects at runtime (2)
Calling the RFM via the executable model object
public void callRFM() {
try {
// Invoke the executable model object
bapiInput.execute();
// If the execution is successful, then invalidate
// the corresponding output node
wdContext.nodeOutput().invalidate();
}
catch(Exception e) {
// Simplistic error handling!
msgMgr.raiseException(?Error calling RFM?, true);
Internal
Only
}
}
Partner
Use
SAP AG 2004
SAP
SAP
The call to any particular RFM should always be placed within a dedicated method in the custom
Partner
controller. Using the wizard in the Data Modeller Tool, this method is created automatically including
Use
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 model node. For reasons of coding legibility, the
SAP recommendation is to interact directly with the model object.
Internal
Once the invalidate() method has run against the model object’s Output node, the data returned
by the RFM will be available in the context.
Only
© SAP AG JA310 11-47
Generic use of model objects at runtime
Generic code: Create a model object instance, bind it to a context model node
// Create a new instance of the Bapi_Flight_Getlist_Input
// model object
{rfcm)_Input bapiInput = new {rfcm}_Input();
// If {rfcm} requires any structured parameters, these
// instances must be created and added to the instance of
// the {rfcm}_Input object
{rfcmin} inputStructure = new {rfcmin}();
bapiInput.set{rfcmin}(inputStructure);
// Bind the model object instance to context model node
Internal
Only
wdContext.node{rfcmin}_Input().bind(bapiInput);
Partner
Use
SAP AG 2004
SAP
SAP
In its generic form, the coding to use a model object requires three main steps, the second of which is
Partner
optional, depending on the individual requirements of the RFM being called.
Use
y Create an instance of the RFM class. By default, the class will be called {rfcm}_Input.
y Create any structured parameters that the RFM may require and add them to the instance of the
{rfcmin}_Input class. This step is dependent upon the individual requires of the RFM you are
using.
Internal
y Bind the {rfcmin}_Input instance to the appropriate controller model node.
Only
© SAP AG JA310 11-48
Using aRFC Model Objects: Topic Summary
You should now be able to:
z Bind a context model node to an aRFC model object.
z Use a model object at runtime
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-49
Configuring SLD and JCo Connections:
Topic Objectives
After completing this topic, you will be able to:
z Import CIM Models to set up the Software Catalog
z Define Technical Systems in the System Landscape
Directory (SLD)
z Create JCo Destinations
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-50
Importing and Displaying the Software Catalog
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Importing the software catalog is the first step in configuring technical systems in the SLD. The software
Partner
catalog contains technical information to all possible SAP products and software components.
Use
To check, if the technical information for the type of system you want to connect to (to obtain model
data) has already been imported, open the software catalog of your SLD:
http://<host>:<port>/sld → Link Software Catalog
If the SAP product or software component is not displayed, you have to import the newest software
Internal
catalog to your SLD:
http://<host>:<port>/sld → Link Administration → Link Content Import → Button Browse
Only
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
© SAP AG JA310 11-51
Defining Technical Systems (1)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Before any JCo connection can be defined, a new technical system has to be defined in the SLD. A
technical system is a logical object, that contains all metadata to a certain SAP system, like the system
Partner
Use
ID (SID), the names of all application 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
Internal
Only
© SAP AG JA310 11-52
Defining Technical Systems (2)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Proceed as follows:
Partner
y On the first screen press New Technical System.
Use
y Select Web AS ABAP and press Next.
y Enter the SID of the SAP system, the installation number and the name of the DB host. After having
logged on the SAP system, the installation number can be found on the popup appearing when
choosing the menu System → Status.
Internal
y Press Next.
Only
© SAP AG JA310 11-53
Defining Technical Systems (3)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Proceed as follows:
Partner
y Enter the message server host, application server host, the instance number, the message server port
Use
and all logon groups.
Important: By default, the logon group PUBLIC is entered in the list of logon groups. This does not
need to be correct. If none of the allowed logon groups is entered by you in the list of logon groups,
you will not be able to set up JCo connections using load balancing.
Internal
y Press Next.
y On the next screen you can add the name of all application server hosts (and their instance numbers)
belonging to the same SAP system. Press Next.
Only
y Now enter all clients, you want to use with the JCo connections. At least one client has to be defined.
Press Next.
© SAP AG JA310 11-54
Defining Technical Systems (4)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Proceed as follows:
Partner
y Select the technical product, describing your SAP system. This is, where the software catalog
Use
imported before comes into play!
y Check the list of software components. Uncheck all components, which are not installed on your SAP
system.
y Press Finish.
Internal
Result: A new Technical System has been defined, which can be used to define JCo connections to the
underlying SAP system.
Only
© SAP AG JA310 11-55
Introduction to logical system names
z The aRFC layer always refers to SAP systems via a logical
system name. This allows an actual SAP system to be identified
without needing to know any of its technical details.
z The aRFC layer requires the use of two logical system names
Call the RFMs in
this model object.
Internal
Only
Partner
Obtain metadata
at runtime
Use
SAP AG 2004
SAP
SAP
At the time a model object is created, the logical system names do not yet need to exist in the J2EE
Partner
engine. The Web Dynpro application can be fully built and deployed to the J2EE engine before it
Use
becomes necessary to create the logical system names.
Logical system names are also known as “JCo Destinations”.
To define the JCo Destinations, the Web Dynpro Content Administrator Tool is used. The creation of
JCo destinations is a one-time configuration process per J2EE engine.
Internal
Only
© SAP AG JA310 11-56
Defining logical system names (1)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
The System Landscape Directory (SLD) Server must be started & configured.
Partner
Start the Web Dynpro Content Administrator application by entering the URL
Use
http://<host>:<port>/webdynpro/welcome → Link Content Administrator
You will need to log on with a user id that has administrative authority.
Internal
Only
© SAP AG JA310 11-57
Defining logical system names (2)
Click Maintain JCo
Internal
Only
Destinations.
Partner
Use
Click Create against the JCo
destination that you are going to set up.
SAP AG 2004
SAP
SAP
It does not matter in which order you do the following steps:
Partner
y Defining the model object to use a given pair of logical destinations
Use
y Creating the logical destinations in the J2EE engine
What is important is that the logical system names have been successfully created in the J2EE
engine before the Web Dynpro application is run.
There is no particular standard for JCo destination names, other than following:
Internal
y Do not hard code the SAP system name
y Use a name that describes the type business information being used.
All JCo destinations for all deployed applications will be listed in this screen.
Only
The red icon indicates that the JCo destination is required by an application, but has not yet been
defined.
Click on the link named Create in order to set up the JCo Destination.
© SAP AG JA310 11-58
Defining logical system names (3)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Step 1:
Partner
y Enter the client of the system, the JCo connection is pointing to
Use
y Press Next.
Maximum Pool Size: The parameter Pool Size is used to specify how many connections should be left
open for the current user, even if they are not being used actively. A pooled RFC connection is allocated
much faster than a new connection, therefore, increasing the pool size will optimize the time needed to
Internal
get a new connection. On the other hand, if a connection is pooled, it is not available for other users.
Maximum Connections: Maximum amount of connections per user. This needs to be determined for each
Application Data destination (also called logical system).
Only
Connection Timeout: Defines how long the pool waits (in seconds) before a destination, which is in the
range between 1 and the maximum pool size, is closed by 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 get an exception after
trying to get a destination although the maximum destinations are open. In a high user load scenario, it
makes sense to increase this number appropriately (20-60), in low user load scenarios, this number can
typically be reduced to a very low number (1-5 seconds).
© SAP AG JA310 11-59
Defining logical system names (4)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Step 2:
Partner
y Select which J2EE cluster you wish the JCo destination to be assigned.
Use
y Press Next.
Step 3:
y Select the connection type – Application Data or Dictionary Meta Data.
When Application Data is selected, you can choose between direct connection to a distinct
Internal
application server of the technical system or using load balancing.
When Dictionary Meta Data is selected, load balancing is pre-selected and can not be changed.
y Press Next.
Only
© SAP AG JA310 11-60
Defining logical system names (5)
If Message Server has
been selected in Step 3
Internal
Only
If Application Server
Partner
has been selected in
Step 3
Use
SAP AG 2004
SAP
SAP
Step 4.1 / 4.2:
Partner
y You may only select Servers and / or Logon Groups from the drop down list that have first been
Use
defined as technical Systems in the SLD.
y Press Next.
Message Server
The SAP system to which Application Data JCo destination is connected must have at least one logon
Internal
group defined! If this has not been done, then you will be unable to proceed beyond this screen.
If your SAP has no logon groups, then use transaction SMLG in the SAP system to create one.
Only
© SAP AG JA310 11-61
Defining logical system names (6)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Step 5 (Application Data):
Partner
If you select a connection type of Application Data, then when you get to the Security screen, you will
Use
have a choice of 4 different user authentication techniques:
y User/Password
y Client Certificate (X.509)
y Ticket (SSO2 Cookie)
Internal
y 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/Password authentication
method. However, for productive use, you should always choose a method that allows user specific
Only
authorisations to be employed within SAP. This will help provide an application level audit trail of
user activity.
If you select User/Password for you productive system, then all users using this JCo connection will
appear to be the same user within SAP. Thus, you will loose any audit trail capability.
Step 5 (Dictionary Meta Data):
If you select a connection type of Dictionary Metadata, then when you get to the Security screen, you
will only be able to use a named user id and password for connection to the SAP system. This is because
no audit trail is required for the transfer 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.
© SAP AG JA310 11-62
Defining logical system names (7)
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Step 6:
Partner
y Check your configuration data on the Summary screen.
Use
y 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 must scroll to the bottom
of the browser window to see the success/failure message.
Internal
Important: You must repeat this process for the second JCo destination!
Once both JCo destinations have been successfully created, you are ready to run your Web Dynpro
Only
application.
© SAP AG JA310 11-63
Configuring SLD and JCo Connections:
Topic Summary
You should now be able to :
z Import CIM Models to set up the Software Catalog
z Define Technical Systems in the System Landscape
Directory (SLD)
z Create JCo Destinations
Internal
Only
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-64
The Adaptive RFC Layer: Unit Summary
You should now be able to understand:
z Remote invocation of ABAP functionality
z The creation and management of Adaptive RFC
(aRFC) model objects
z The management and use of aRFC Model objects
Internal
Only
z The configuration of the SLD and JCo Connections
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-65
Model object limitation in NW04
The J2EE engine holds a cache of deployed model objects that is
optimized by technical system.
If several different Web Dynpro applications all use the same model object
pointing to the same JCo destination, then after deployment, there will only be
one copy of that model object’s metadata in the J2EE engine’s cache.
The architecture of this cache in the NetWeaver ’04 release is such that it is not
currently possible to determine which application uses which model object in the
optimized cache.
Internal
Only
Therefore, if the aRFC layer updates the metadata of a deployed model object, it
is necessary to restart the J2EE engine to flush this cache, and make the new
interface metadata available to the Web Dynpro application.
Partner
Use
SAP AG 2004
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-66
Exercise
Chapter: Adaptive RFC layer
Theme: Creating and using an aRFC model object
At the end of this Exercise, you will be able to:
• Create development components to contain aRFC models and Web
Dynpro Components.
• Use the aRFC model object in a working application
Internal
Only
1 Development Objectives
This exercise has the following objectives:
Partner
- Separate Web Dynpro Model objects and Components in different Development
Components.
Use
- Use the functionality defined in one development component within another
development component.
- Use the aRFC model object to call a function module in an SAP system and then display
SAP
SAP
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.
Partner
Use
There will then be a second web Dynpro DC called “components” that makes use of the
models DC. Thus, we can separate model objects from the Web Dynpro components that
use them. This improves the overall application architecture, and helps reduce the Java
compile time.
Internal
Only
© SAP AG JA310 11-67
2 Result
The result of this exercise will be that you
have an application that will call
JA310_WD_Ex10 using parameters supplied
on the input screen.
The results of the BAPIs execution will be
displayed in a table.
Internal
Only
Template Solution:
Development Component containing Model: JA310_Models
Development Component containing WD Application: JA310_Components
WD Project: Ex10Comp
Partner
Application: Ex10App
Use
3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
SAP
SAP
4 Overview: Developing
4-1 Create a new Web Dynpro Development Component called models. Select File →
New → Development Component Project, then select Local Development →
Partner
Use
MyComponents from the tree structure.
4-2 Enter a vendor name of training.sap.com. The Name of the Development Component
must be specified in lower case letters; enter models here. Enter some descriptive
Internal
caption and select Web Dynpro from the Type tree.
4-3 Repeat exactly the same DC creation process, but now, call the DC components.
It is vitally important that you are consistent with the language in which all your DCs
Only
are created. DCs of different languages will not interact with each other correctly.
4-4 Open the models DC hierarchy, and select Create Model from the right mouse 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. In the screen, enter FlightListModel as the model
name, and com.sap.training.models.flightlist as the model package name.
The logical system names (JCo Destinations) entered here do not yet need to exist in
the J2EE engine. Remember that the logical system names should not contain the
name of the system from which you are obtaining the data. Rather, they should
describe the type of data being obtained.
The Logical Dictionary name should be allowed to default to the same name as the
model object.
© SAP AG JA310 11-68
4-5 Specify the name of the SAP system you wish to connect to. Your instructor will be
able to supply the connection details for you.
Press Next.
Enter bapi_flight* in the Function Name field and press the search button.
Tick the checkbox next to BAPI_FLIGHT_GETLIST and press Next.
The Model wizard will now extract the details of the function module’s interface and
present you with a log file.
Press Finish.
4-6 All that is necessary to complete the models DC is to add the model object
FlightListModel to the DC’s public part. In order to do this, right mouse click 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 specify the name
of the public part to which this model object will be added.
Internal
Only
Enter a public part name of FlightListModel and press Finish.
4-7 The last step needed for the models DC is to build the entire project, and then to
perform a DC build.
It is most important that a DC Build is performed, otherwise, the DC’s public parts
Partner
(which are each separate JAR files) will not be constructed properly.
Firstly, click on the entire models DC, and select Rebuild Project. This will only take
a few seconds.
Use
Now right mouse click again on the DC name and select Build from the Development
Component side menu.
Since development components can declare the use of other development
components, it is possible that a set of dependencies can exist between these DCs.
SAP
SAP
This particular case, the models has no dependencies on any other DCs, so this next
screen only shows a list of one DC. Select OK.
4-8 Now open the following branch in the components DC: DC MetaData → DC
Partner
Definition → Used DCs.
Use
At the moment, the components DC only requires 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 Used DCs and select Add Used DC. Expand the branch
Internal
LocalDevelopments → MyComponents and select models.
Press Finish.
Now all the public parts of DC models are accessible within the DC components.
Only
4-9 In the components DC, open the Web Dynpro branch of the hierarchy, and create a
new Web Dynpro Component called FlightListComp. Use a package name of
com.sap.training.flightlist and don’t forget to remove the characters Comp from the
view name.
4-10 In the Used Models node of component FlightList, add the usage of model
FlightListModel.
© SAP AG JA310 11-69
4-11 The information in the model object FlightListModel must now be made available to
component controller of FlightListComp. The easiest way to do this is to open the
diagram editor of component FlightListComp. This is done by double clicking on the
component name itself.
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 model object FlightListModel. This will
now open the Model Binding window.
Select the Bapi_Flight_Getlist_Input model class and drop it directly onto the
Context root node.
Now the Context Mapping window opens. It is here that we decide which parts of the
BAPI’s interface are needed by the component controller. It is at this point that you
will need to know which parts of the BAPI interface are used for input, which for
output and which are bidirectional.
Internal
Only
In this case, we are going to use the two scalar parameters Airline and Max_Rows,
and the two structured parameters Destination_To and Destination_From.
Since the parameters Date_Range, Extension_In, Extension_Out, Flight_List and
Return are TABLES parameters, they will appear on both the input and output sides
of the interface. We will not be sending any data into the function module via these
Partner
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.
Use
4-12 The previous step has made the information in the model object available to the
component controller. Now we need to make the data available to the view
controller.
SAP
SAP
This is done by creating another data link starting at the view controller 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 the component controller context across to the view controller context.
Partner
Use
Select all the nodes in the context hierarchy and then click OK and then Finish.
4-13 Now that the model data has been mapped all the way through to the view controller,
we can start building the view’s user interface.
Double click on FlightListView under Web Dynpro Components → FlightListComp
Internal
→ Views.
Delete the default TextView UI element.
Only
4-14 Select the RootUIElementContainer and change its layout property to MatrixLayout.
4-15 In the Outline view, right mouse click on RootUIElementContainer and select Insert
Child. Add a Tray UI element with the name ParentTray and change 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 or Tray1, then
you can rename it by changing the value of its id property.
4-16 Select the ParentTray UI element from the Outline view and choose Apply Template
from the right mouse click menu. Choose the Form template and press Next.
Select Max_Rows and Airline from the Template Wizard window and press Finish.
4-17 You now need to insert two further Group UI elements as the children of ParentTray.
Select the ParentTray UI element in the Outline view and choose Insert Child. Create
two child Group UI elements called ChildGroupTo and ChildGroupFrom.
© SAP AG JA310 11-70
4-18 Each Group UI element has a child Caption UI element. Change the text properties of
these child Caption UI elements to To and From respectively.
4-19 For each Group UI element, apply a form template to the Group UI element
ChildGroupFrom for all the attributes of node Destination_From, and another form
template for Group UI element ChildGroupTo for all the attributes of
Destination_To.
4-20 Change the layoutData property of ChildGroupFrom to MatrixHeadData.
4-21 Next, select the Actions tab from the view controller editor and create a new Action.
Give the Action the name Search and the text Start search. Use the default event
handler.
Press Finish.
4-22 Go back to the Layout tab and insert a Button UI element as a child of the Tray UI
Internal
Only
element ParentTray. Change its layoutData property to MatrixHeadData and its
onAction property to Search.
Notice that as soon as the Search action is assigned to the onAction event of the
button, the button immediately inherits the text description of the action.
Partner
4-23 The last step is to create a table in which the BAPI output results will be displayed.
Select the RootUIElementContainer, and select Apply Template from the right
mouse-click menu.
Use
This time, select a Table template and press next.
Under the Output context node, there will be a child node called FlightList. Select
this check box, and all the child attribute checkboxes will be selected automatically.
SAP
Press Finish and press the Save Metadata button on the toolbar.
SAP
4-24 Now we need to add some coding into the component controller. Double click on the
Component Controller node underneath FlightListComp in the Web Dynpro
Explorer.
Partner
Use
Select the Implementation tab.
4-25 Scroll right down to the bottom of the file, and between the //@@begin others and
//@@end comment markers, declare an instance of executable model class called
bapiInput, and an instance of the message manager called msgMgr.
Internal
4-26 Now locate method wdDoInit() and assign the message manager variable to the
component’s message manager instance, and assign to the bapiInput object a new
Only
instance of the BAPI class.
4-27 Now create an instance of each of the structure input parameters DESTINATION_TO
and DESTINATION_FROM. The class that needs to be instantiated can be found by
switching to the Context tab, selecting the corresponding model node, and then
looking at the value of the ModelClass property. In this case, the class is Bapisfldst.
4-28 Once these two parameter instances have been created, they must be added as
structured parameters to the main bapiInput object.
4-29 The last step for method wdDoInit() is to bind the BAPI input object to the
corresponding model node in the component controller’s context.
© SAP AG JA310 11-71
4-30 Next, it is necessary to add the coding that will call the BAPI. This coding will be
placed into its own method, so go to the Methods tab and create a new method.
In the pop-up window, select a method type of Method (Don’t select Event Handler,
it won’t work!), press Next, and then enter a name of callBAPI and then press Finish.
4-31 Go back to the Implementation tab, and locate the callBAPI() method. In this method,
the execute() method of the BAPI object must be called from within a try/catch
clause. If the execution fails, then a simplistic error message will be issued, otherwise
the BAPI’s Output model node needs to be invalidated
4-32 Now that the component controller has a separate method for calling the BAPI, this
method must be called when the view controller’s action Search is processed. This is
done by going back to the Implementation tab of the view controller FlightListView
and adding a line of code to method onActionSearch() that calls method callBAPI()
Internal
Only
in the component controller.
4-33 The final stage is to create an application called FlightListApp placing it into package
com.sap.training.flightlist.
4-34 Save Metadata and do a DC Build. This time, the DC Build screen will show that a
Partner
dependency exists between DC components and DC models. Since the public part of
DC models has not been changed, it is not necessary to rebuild this DC.
Therefore, leave the check box against models unchecked.
Use
Press OK.
4-35 Since the components DC is dependent upon the models DC, it is necessary to deploy
the models DC first. Select the root node of the models DC from the Web Dynpro
SAP
SAP
Explorer window and choose Deploy from the right mouse-click menu.
If this is the first time you have deployed anything to your J2EE server since starting
the NetWeaver Developer Studio, then you will be asked for the SDM password. The
default value is sdm.
Partner
Use
4-36 Now choose FlightListApp from the applications menu, and select Deploy new
archive and run from the right mouse-click menu.
If you have forgotten to create the two JCo destinations FlightList_Data and
Internal
FlightList_Metadata, then when you run the application, you will get a Java stack
trace. This is due to the fact that the J2EE engine is attempting to use a pair of JCo
destinations that have not yet been configured!
Only
© SAP AG JA310 11-72
5 Results
After deploying and running the application, you should see results similar to this.
Internal
Only
Partner
Use
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-73
Solution
Chapter: Adaptive RFC layer
Theme: Creating and using an aRFC model object
4 Overview: Developing
4-1 Create a new Web Dynpro Development Component called models.
Internal
Only
Select File → New → Development Component
Project, then select Local Development →
MyComponents from the tree structure.
Partner
Press Next.
Use
SAP
SAP
4-2 Enter a vendor name of training.sap.com.
The Name of the Development Component must be
specified in lower case letters; enter models here.
Partner
Use
Enter some descriptive caption and select Web
Dynpro from the Type tree.
Press Next then Finish.
Internal
Only
© SAP AG JA310 11-74
4-3 Repeat exactly the same DC creation process, but now, call the DC components.
Repeat step 4-2 giving the component the name
components.
You should now have two Web Dynpro DCs and
your workspace should look like this:
4-4 Import an Adaptive RFC Model.
Open the models DC hierarchy, and select Create
Internal
Only
Model from the right mouse click menu under Web
Dynpro → Models.
Select Import Adaptive RFC Model and then press
Next
Partner
Remember that the model name should end in the
word Model, and that each model object must live
Use
in its own package. In the screen, enter
FlightListModel as the model name, and
com.sap.training.models.flightlist as the model
package name.
SAP
SAP
4-5 Specify the name of the SAP system you wish to connect to.
Partner
Use
Enter bapi_flight* in the Function Name field and
press the Search button. You should see some
search results similar to the image on the left.
Internal
Tick the checkbox next to
Only
BAPI_FLIGHT_GETLIST and press Next.
The Model wizard will now extract the details of
the function module’s interface and present you
with a log file.
Press Finish.
© SAP AG JA310 11-75
The Model wizard creates an XML description of
the RFM’s interface. After pressing Finish, you will
notice that the IDE now spends a few seconds
generating the actual Java source code. Your
models DC should now as displayed on the left:
Internal
Only
4-6 All that is necessary to complete the models DC is to add the model object
FlightListModel to the DC’s public part.
Partner
Right mouse click on the model object name
FlightListModel, and select New Public Part.
Use
Since this is the very first public part defined for
this DC, we must specify the name of the public
part to which this model object will be added.
Enter a public part name of FlightListModel and
SAP
SAP
press Finish.
Partner
Use
Now that this has been done, you will see the
FlightListModel listed as an Entity belonging to the
public part called FlightListModel.
Internal
Only
© SAP AG JA310 11-76
4-7 The last step needed for the models DC is to build the entire project, and then to perform
a DC build.
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 the Development Component side
menu.
Since development components can declare the use
of other development components, it is possible that
a set of dependencies can exist between these DCs.
This particular case, the models has no
dependencies on any other DCs, so this next screen
only shows a list of one DC.
Internal
Only
Check models and press OK.
The DC build process takes around 30 seconds to
complete the first time it runs.
Partner
The models DC is now complete.
Use
4-8 You must add the models DC to the list of used DC
SAP
SAP
Now open the following branch in the components
DC: DC MetaData → DC Definition → Used DCs.
Partner
At the moment, the components DC only requires
Use
the use of standard Web Dynpro DCs. You must
add to this list and declare that the models DC is
also a Used DC.
Internal
Right mouse click on Used DCs and select Add
Used DC. Expand the branch LocalDevelopments
→ MyComponents and select models.
Only
Press Finish.
© SAP AG JA310 11-77
Now all the public parts of DC models are
accessible within DC components.
Internal
Only
4-9 In the components DC, open the Web Dynpro branch of the hierarchy, and create a new
Web Dynpro Component called FlightListComp.
Use a package name of com.sap.training.flightlist
Partner
and don’t forget to remove the characters Comp
from the view name.
Use
SAP
SAP
Partner
Use
4-10 In the Used Models node of component FlightList, add the usage of model
Internal
FlightListModel.
If you cannot see FlightListModel when you try to
Only
add a used model to component FlightListComp,
then one of the following problems could exist:
You have not exposed the model object
FlightListModel correctly through 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 DC models.
© SAP AG JA310 11-78
4-11 The information in the model object FlightListModel must now be made available to
component controller of FlightListComp.
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 model
object 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 model
object FlightListModel.
Internal
Only
This will now open the Model Binding window.
Select the Bapi_Flight_Getlist_Input model class
Partner
and drop it directly onto the Context root node.
Use the two scalar parameters Airline and
Use
Max_Rows, and the two structured parameters
Destination_To and Destination_From from the
input side.
SAP
SAP
Also select Flight_List and Return from the output
side.
Partner
Use
Press OK and then press Finish.
Internal
4-12 The previous step has made the information in the model object available to the
Only
component controller. Now we need to make the data available to the view controller.
Creating another data link starting at the view
controller and going across to the component
controller.
© SAP AG JA310 11-79
Select all the nodes in the context hierarchy and
then click OK and then Finish.
4-16 Layout after having completet steps 4-13 .. 4-16
The UI layout should now look like shown on the
left.
Internal
Only
Partner
4-20 Layout after having completet steps 4-17 .. 4-20
Use
SAP
SAP
Partner
Use
4-21 Next, select the Actions tab from the view controller editor and create a new Action.
In the New Action pop-up window, enter the
Internal
following values (see left).
Only
Press Finish.
© SAP AG JA310 11-80
4-23 The last step is to create a table in which the BAPI output results will be displayed.
Select the RootUIElementContainer, and select
Apply Template from 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 called FlightList. Select this check
box, and all the child attribute checkboxes will be
selected automatically.
Press Finish and press the Save Metadata button
on the toolbar.
Internal
Only
This completes the UI layout for view
FlightListView.
Partner
Use
4-25 Define the static variables bapiInput and msgMgr.
SAP
SAP
//@@begin others
Bapi_Flight_Getlist_Input bapiInput;
IWDMessageManager msgMgr;
//@@end
Partner
Use
Internal
4-26 Assign the message manager variable to the component’s message manager instance,
and assign to the bapiInput object a new instance of the BAPI class.
Only
public void wdDoInit() {
//@@begin wdDoInit()
msgMgr = wdComponentAPI.getMessageManager();
bapiInput = new Bapi_Flight_Getlist_Input();
//@@end wdDoInit()
© SAP AG JA310 11-81
4-27 Create an instance of each of the structure input parameters DESTINATION_TO and
DESTINATION_FROM.
4-28 Add DESTINATION_TO and DESTINATION_FROM as structured parameters to the
main bapiInput object.
4-29 Bind the BAPI input object to the corresponding model node in the component
controller’s context.
public void wdDoInit() {
//@@begin wdDoInit()
. . .
Bapisfldst destTo = new Bapisfldst();
Internal
Only
Bapisfldst destFrom = new Bapisfldst();
bapiInput.setDestination_To(destTo);
bapiInput.setDestination_From(destFrom);
Partner
wdContext.nodeBapi_Flight_Getlist_Input().bind(bapiInput);
Use
//@@end wdDoInit()
SAP
SAP
Partner
Use
Internal
Only
© SAP AG JA310 11-82
4-31 Source Code of method callBAPI().
public void callBAPI( ) {
//@@begin callBAPI()
try {
bapiInput.execute();
wdContext.nodeOutput().invalidate();
}
catch(Exception e) {
wdContext.nodeReturn().invalidate();
Internal
Only
String msgText = wdContext
.nodeReturn()
.currentReturnElement()
.getMessage();
Partner
if (msgText.length()==0) {
msgMgr.raiseException("BAPI call failed", false);
Use
} else {
msgMgr.raiseException(msgText, false);
}
}
SAP
SAP
//@@end
}
Partner
Use
4-32 Source Code of method onActionSearch().
Internal
public void onActionSearch(IWDCustomEvent wdEvent) {
//@@begin onActionSearch(ServerEvent)
Only
wdThis.wdGetFlightListCompController().callBAPI();
//@@end
© SAP AG JA310 11-83
Appendix
Contents:
z Web Dynpro Naming Placeholders
z SAP Recommended Web Dynpro Naming Convention
z Web Dynpro Classes and Interfaces
Internal
Only
z SAP NetWeaver Developer Studio:
Tools for Developing Web Dynpros
z Java Development Infrastructure: Overview
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-1
Appendix
z Web Dynpro Naming Placeholders
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-2
Web Dynpro Naming Placeholders
z Due to the fact that design time declarations is the NetWeaver
Development Studio cause a large amount of Java code to be
generated, it is necessary to have some generalised way of
identify both the declared metadata entities, and the
subsequently generated Java classes.
z This is where the Web Dynpro Naming Placeholders are
Internal
Only
required.
z Each placeholder represents the name of a declared metadata
entity
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-3
Web Dynpro Naming Placeholders
Development Entities
{a} Application
{act} Action
{c} Component
{cc} Custom Controller
{dc} Development Component
{m} Model
{mo} Model object (referred to by a model node)
{pi} Inbound plug
Outbound plug
Internal
Only
{po}
{pr} Project
{rfcm} RFC module name (defined in ABAP in a remote SAP system)
{rfcmin} Any inbound, structured parameter to an RFC module
{rfcmout} Any outbound, structured parameter to an RFC module
{siv} Standalone component interface view
Partner
{sc} Software Component
{st} Dictionary Simple Type
{v} View
Use
{vs} Viewset
{w} Window
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-4
Web Dynpro Naming Placeholders
Context Entities
{ca} Any context attribute
{chn} Any context child node
{cn} Any context node
{ctx} Context name; always the same name as the controller to which it belongs
{mn} Model node
{ma} Model attribute
{rn} Recursive node
{vn} Value node
Internal
Only
{va} Value attribute
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-5
Web Dynpro Naming Placeholders
Generic and Composite abbreviations
{dt} Any data type defined either in standard Java or by the Web Dynpro data
dictionary
{dtp} The data type of UI element property p
{dtca} The data type of context attribute ca
{l} Locale value.
{p} Component usage purpose
{pkgn} Any part of a Java package name. These parts will be used to form the
directory names in the deployed application, and are concatenated together to
Internal
Only
form the full package name for an import statement.
E.G. if {pkg1}=com, {pkg2}=sap, {pkg3}=tc, and {pkg4}=webdynpro,
then the package name {pkg1}.{pkg2}.{pkg3}.{pkg4} will be
com.sap.tc.webdynpro.
{pkgsap} The standard SAP Java package within which all internal Web Dynpro
Partner
Framework (WDF) classes live. This is currently com.sap.tc.webdynpro.*
{ui} Any UI element object
{uip} Any property of a UI element
{uievt} Any client-side event raised by a UI element
Use
{vnd} The Java vendor name formed from reversing the order of the first parts of the
package names. Using the example given for the {pkgn} placeholder above,
the vendor could be formed from reversing the order of the first two parts of
package name to give {pkg2}.{pkg1} = sap.com.
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-6
Web Dynpro Naming Placeholders
Composite placeholders using SAP recommended suffixes
{na} Application = {a}App
{nc} Component controller = {c}Comp
{ncc} Custom controller = {cc}Cust
{nciv} Component interface view = {w}InterfaceView
{nctl} A controller of any type
{nm} Model = {m}Model
{npi} Inbound plug = {pi}In
{npo} Outbound plug = {po}Out
Internal
Only
{npr} Project = {pr}
{nsi} Standalone component interface = {si}CompI
{nsiv} Standalone component interface view = {si}{siv}
{nu} Component usage = {nc}{p}Inst or {si}{p}Inst
{nv} View = {v}View
Partner
{nvs} View set = {vs}Viewset
{nw} Window = {w}
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-7
Appendix
z SAP Recommended Naming Convention
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-8
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Applications: {na} = {a}App
The actual application name {na}, should consist of the desired name {a}, followed by
the suffix App. {a} should describe the business process being delivered.
Components: {nc} = {c}Comp
The actual component name {nc} should consist of the desired name {c} followed by the
suffix Comp. {c} should describe some (reusable) unit of functionality within the
Internal
Only
application.
Component Interface Views: {nciv} = {w}InterfaceView
The creation of window {w} automatically causes the component interface view {nciv} to
be created where {nciv} = {w}InterfaceView. Since this name is created
Partner
automatically, you are not permitted to change it.
The interface view is the component’s visual interface and is implemented by the window.
It is the means by which the view assembly defined in {w} is presented to the client layer.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-9
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Component Usage: {nu} = {p}{c} or {p}{si}
In order for component A to be able to use the data and functionality within component B,
component A must first declare the use of component B. The name of the component
usage differs from the name of the component in the same way that the name of an object
instance differs from the class it instantiates. Component usage is defined for two
situations:
1. When a component is being used
Internal
Only
2. When a standalone component interface in being used.
The usage instance name {nu} should therefore consist of the usage purpose {p}
followed either by the desired component name {c} if a component is being used, or the
standalone interface name {si}.
Partner
Custom Controllers: {ncc} = {cc}Cust
The actual custom controller name {ncc} should consist of the desired name {cc}
Use
followed by the suffix Cust.
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-10
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Inbound Plugs: {npi} = {pi}In
The actual inbound plug name {npi} should consist of the desired inbound plug name
{pi} followed by the suffix In. {pi} should start with an upper case letter.
The inbound plug should be named according to the reason for which the view is being
entered.
All inbound plugs have a corresponding event handler in the view controller. This method
is named onPlug{npi}().
Internal
Only
Outbound Plugs: {npo} = {po}Out
The actual outbound plug name {npo} should consist of the desired outbound plug name
{po} followed by the suffix Out. {po} should start with an upper case letter.
The outbound plug should be named according to the reason for which the current view is
Partner
being left, not the reason for which the target view is being entered!
Projects: {np} = {pr}
Use
The project name {np} should describe the category of the business processes it
contains.
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-11
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Models: {nm} = {m}Model
The actual model name {nm} should consist of the desired name {m} followed by the
suffix Model.
SAP strongly recommends that each Web Dynpro model live in its own Java package.
E.G. The package name should conform to a pattern such as
{pkg1}.{pkg2}.{pkg3}.models.{nm}.
Internal
Only
Failure to adhere to this recommendation could result in erroneous behaviour of model
objects and possible data loss - especially if the same model is used by multiple Web
Dynpro components.
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-12
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Standalone Component Interfaces: {nsi} = {si}CompI
The actual standalone component interface name {nsi} should consist of the desired
name {si} followed by the suffix CompI.
Standalone Component Interface Views: {nsiv} = {nsi}{siv}
If only one interface view is needed for a component interface, then no manual action is
needed here because the suffix InterfaceView will be added automatically to the
Internal
Only
window name {w} by the NWDS.
Should multiple interface views be required, then subsequent standalone component
interface view names should consist of the standalone interface name {nsi} followed by
some distinguishing name {siv}.
Partner
Views: {nv} = {v}View
The actual view name {nv} should consist of the desired name {v} followed by the suffix
View.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-13
SAP Recommended Naming Convention
Naming Conventions for Coding Entities
Viewsets: {nvs} = {vs}Viewset
The actual viewset name {nvs} should consist of the desired viewset name {vs} followed
by the suffix Viewset. The value of {vs} will typically be the same as the window {w}
within which it lives.
SAP does not currently have a recommendation for naming nested view sets.
Windows: {nw} = {w}
Internal
Only
A window {w} represents an arrangement of one of more views that will form the visual
interface for controller {nctl}. The collective name for the set of views making up the user
interface is a “view assembly”.
A window contains one or more views, and implements a component interface view.
There is a 1:1 relationship between a window and a component interface view. From a
Partner
programming point of view, you gain access to the current view assembly through the
window, but from a consumer’s point of view (I.E. someone using the component), the
view assembly is accessed through the component interface view.
Use
Since window {w} does not relate to any developer modifiable unit of Java coding, it is
unnecessary to use any particular suffix in its name.
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-14
Appendix
z Web Dynpro Classes and Interfaces
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-15
Accessing Service Interfaces
from inside Controllers
Controller Web Dynpro Controller Classes
Classes SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
wdThis wdThis wdThis
wdThis
Generated Private Controller Interfaces
Private IPrivate-
IPrivate- IPrivate-
IPrivate- IPrivate-
IPrivate-
SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
Interfaces
wdGetAPI() wdGetAPI() wdGetAPI()
wdGetAPI()
Generic Controller
Interfaces
IWDController
Internal
Only
IWDController
Generic IWDComponent IWDViewController
IWDViewController
IWDComponent
Interfaces getComponent()
getService() Web Dynpro Service Interfaces
Partner
IWDWindow-
IWDWindow-
IWDMessage IWDComponent- IWDWindow-
IWDWindow-
IWDWindow-
Service IWDMessage
Manager
IWDComponent-
Info
Manager
IWDWindow-
Manager
Manager
Manager
Manager
Manager Info Manager
Interfaces
Use
implements
Interface Class extends
Interface
other relation
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-16
Generic Controller Interfaces
IWDController
IWDAction getAction(String name)
IWDComponent getComponent()
IWDContext getContext()
IWDControllerInfo getControllerInfo();
String getText(String key)
String getText(String key,
Object parameters[])
extends String getName() extends
String getPackageName()
String getQualifiedName()
Internal
Only
IWDComponent IWDViewController
IWDMessageManager getMessageManager() IWDAbstractViewInfo getViewInfo()
IWDValidationCheck getValidationCheck() void firePlug(...)
IWDComponentInfo getComponentInfo() void requestFocus(IWDAction action)
Partner
IWDWindowManager getWindowManager() void requestFocus(IWDNodeElement
WDDeployableObjectPart nodeElement,
getDeployableObjectPart() IWDAttributeInfo
void addEventHandler(...) attribute)
Use
void removeEventHandler(...)
boolean isApplicationRoot()
IWDApplication getApplication()
SAP
SAP
SAP AG 2004
Partner
Use
IWDController
All controllers created by the Web Dynpro IDE implement this interface.
IWDComponent
This interface extends IWDController and is implemented by all Web Dynpro components .
Internal
IWDViewController
All view controllers created by the Web Dynpro IDE implement this interface. This interface extends
IWDController.
Only
© SAP AG JA310 12-17
Accessing the Message Manager
from inside a View
Controller Web Dynpro Controller Classes
Classes SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
wdThis wdThis wdThis
wdThis
Generated Private Controller Interfaces
Private IPrivate-
IPrivate- IPrivate-
IPrivate- IPrivate-
IPrivate-
SampleComp
SampleComp ModelCust
ModelCust MainView
Interfaces MainView
wdGetAPI() wdGetAPI() wdGetAPI()
wdGetAPI()
Generic Controller
Interfaces
IWDController
Internal
Only
IWDController
Generic IWDViewController
IWDComponent
IWDComponent IWDViewController
Interfaces getComponent()
getService() Web Dynpro Service Interfaces
Partner
IWDWindow-
IWDWindow-
IWDMessage IWDComponent- IWDWindow-
IWDWindow-
IWDWindow-
Service IWDMessage
Manager
IWDComponent-
Info
Manager
IWDWindow-
Manager
Manager
Manager
Manager
Manager Info Manager
Interfaces
Use
implements
Interface Class extends
Interface
other relation
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-18
Accessing Service Interfaces
from inside Controllers
Controller Web Dynpro Controller Classes
Classes SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
wdComponentAPI
wdThis wdThis wdThis
wdThis
PI
Generated Private Controller Interfaces
I
A
AP
nt
nt
Private
ne
IPrivate-
IPrivate- IPrivate-
IPrivate- e IPrivate-
IPrivate-
on
po
SampleComp
SampleComp ModelCust
p
ModelCust MainView
MainView
Interfaces m
m
wdGetAPI() Co wdGetAPI()
Co
wdGetAPI()
wd
wdGetAPI()
wd
Generic Controller
Interfaces
IWDController
Internal
Only
IWDController
Generic IWDViewController
IWDViewController
IWDComponent
IWDComponent
Interfaces getComponent()
getService() Web Dynpro Service Interfaces
Partner
IWDWindow-
IWDWindow-
IWDMessage IWDComponent- IWDWindow-
IWDWindow-
IWDWindow-
Service IWDMessage
Manager
IWDComponent-
Info
Manager
IWDWindow-
Manager
Manager
Manager
Manager
Manager Info Manager
Interfaces
Use
implements
Interface Class extends
Interface
other relation
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-19
Accessing Service Interfaces
from inside Controllers
Controller Web Dynpro Controller Classes
Classes SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
wdThis wdThis wdThis
wdControllerAPI
wdControllerAPI
wdThis
wdController
Generated Private Controller Interfaces
API
Private IPrivate-
IPrivate- IPrivate-
IPrivate- IPrivate-
IPrivate-
SampleComp
SampleComp ModelCust
ModelCust MainView
MainView
Interfaces
wdGetAPI() wdGetAPI() wdGetAPI()
wdGetAPI()
Generic Controller
Interfaces
IWDController
Internal
Only
IWDController
Generic IWDViewController
IWDComponent
IWDComponent IWDViewController
Interfaces getComponent()
getService() Web Dynpro Service Interfaces
Partner
IWDWindow-
IWDWindow-
IWDMessage IWDComponent- IWDWindow-
IWDWindow-
IWDWindow-
Service IWDMessage
Manager
IWDComponent-
Info
Manager
IWDWindow-
Manager
Manager
Manager
Manager
Manager Info Manager
Interfaces
Use
implements
Interface Class extends
Interface
other relation
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-20
Appendix
z SAP NetWeaver Developer Studio:
Tools for Developing Web Dynpros
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-21
Web Dynpro Explorer
z In order to develop a Web Dynpro
Application, certain specific tools need to be
used.
z The most important tool is the Web Dynpro
Explorer.
z This perspective displays the structure of a
Web Dynpro application. The information is
Internal
Only
presented in a way, so that you can see the
hierarchical relationship that exists between
the various coding entities.
z When developing a Web Dynpro application,
Partner
you will spend most of your time in this
perspective.
Use
SAP
SAP
SAP AG 2004
Partner
Use
Web Dynpro Explorer
The use of the Web Dynpro perspective is essential for editing any form of Web Dynpro Project.
The Web Dynpro Explorer displays the logical structure of the entire Web Dynpro Project. The nodes
Internal
and sub-nodes represent the hierarchical structure of a Web Dynpro project.
Opening the Web Dynpro Explorer
You open the Web Dynpro Explorer by choosing Windows → Show View → Web Dynpro Explorer from
Only
the menu. By default, this will add a new tab to the same window in which the Navigator and Project
Explorers appear.
If you want to activate the Web Dynpro Explorer after working with another tool, then choose the Web
Dynpro Explorer tab.
© SAP AG JA310 12-22
Data Modeller
Double click on the Component
Name or choose Open Data
Modeller from the context menu.
Internal
Only
Partner
View Controller
Custom Controller
Use
The Data Modeller can be used to define the
data sharing relationships between custom
controllers and view controllers.
SAP
SAP
SAP AG 2004
Partner
Use
Data Modeller
Within the Web Dynpro Explorer, you will find the Data Modeller. This is a graphical tool that shows
the relationship between the various controllers and models within one Web Dynpro Component. The
perspective area that displays the Data Modeller is the Diagram View.
Internal
The Data Modeller helps you perform the following development tasks:
y Controller creation
y Declaring the use of a custom controller by another controller
Only
y Declaring the use of a Model by the component
y Nesting Components
y Creating context mappings by means of data links
Opening the Data Modeller
To open the Data Modeller, either choose Open Data Modeller from the context menu for the component
name in the Web Dynpro Explorer or double click on the component name.
© SAP AG JA310 12-23
Navigation Modeller
The set of views making up a component’s
visual interface is known as a Window.
Internal
Only
Partner
These lines indicate the various navigation
relationships that exist between the views in
Use
a Window.
Double click on the Window name or choose Open
Navigation Modeller from the context menu.
SAP
SAP
SAP AG 2004
Partner
Use
Navigation Modeller
The Navigation Modeller is a graphical Web Dynpro tool for designing and implementing the navigation
relationships that exist between the views in a Window. It is displayed in the Diagram View editor. The
Navigation Modeller allows you to create and change the following entities of a Web Dynpro Window:
Internal
y View Sets
y Views
y Plugs
Only
y Navigation Links
Opening the Navigation Modeller
You can start the Navigation Modeller by either choosing the context menu entry Open Navigation
Modeller for the window name in the Web Dynpro Explorer, or double clicking on the Window name.
What purpose does a Window serve?
A Web Dynpro window is the superset of all views that could possibly be displayed within the given
screen layout. At any one time only a subset of these views is ever visible.
What is a View Assembly?
From the superset of views defined within a Window, only a subset will ever be visible at any one time.
The visible subset of views is known the “View Assembly”. This is the set of views that are actually
rendered and sent to the client.
© SAP AG JA310 12-24
Custom Controller Editor
The Component Controller is a special
custom controller. It is created
automatically when a component is
created.
Internal
Only
Partner
Use
Double click on the
The tab Events is specific to a custom
Component Controller node
controller, but the other four tabs are
or Choose Edit from the
common to all controller types.
context menu.
SAP
SAP
SAP AG 2004
Partner
Use
Controller Editors in General
The Component is the main unit of development and reuse in Web Dynpro Project. A component is
constructed from various interdependent controllers which are either of type “custom” or “view”.
Internal
The Web Dynpro Explorer provides various tools for editing all aspects of a controller. Irrespective of
the type, all controllers have the following editor tabs:
y Properties (Lists the required controllers)
Only
y Context (Runtime storage area used by all controllers)
y Methods (User defined instance methods; not for component interface view controllers )
y Implementation (Java editor for modifying the controller’s standard hook methods)
Custom Controller Editor
A custom controller has the following specific features:
y A Custom Controller has no visual interface. Therefore, the editor does not contain a “Layout” tab.
y A Custom Controller can raise server-side Events. Any method of any controller within the same
component can be defined as a listener for these events (once an appropriate usage declaration has first
been made).
© SAP AG JA310 12-25
View Controller Editor / View Layout Editor
View Layout
Internal
Only
Properties of the
selected UI element
Partner
Use
Double Click on the
Component Controller
Node or Choose Edit from Hierarchical arrangement of the UI
the context menu elements in the layout.
SAP
SAP
SAP AG 2004
Partner
Use
View Controller Editor
A Web Dynpro Component may have zero or more View Controllers, and each View Controller has
exactly one view layout. A view controller has the following specific features:
y A View Controller has exactly one visual interface.
Internal
y A View Controller can respond to client side events via runtime objects known as “Actions”.
y Navigation takes place to and from View Controllers via “Plugs”. “Plugs” are special event handlers
that respond to either inbound or outbound navigation events.
Only
View Layout Editor
The View Designer is the graphical tool within the Web Dynpro Explorer that allows you to design and
build the user interface (UI) part of a View Controller.
Opening the View Designer
To open the View Designer, choose Edit from the context menu of the view in the Web Dynpro
Explorer; Navigation Modeller, or Data Modeller. Once the View Designer has been opened, you can
edit all the various UI elements within the View’s layout. If you want to enlarge the work area of any of
the editor windows, simply double-click on the editor window’s title bar and it will become full screen.
To revert to the original size, double-click on the title bar again.
© SAP AG JA310 12-26
Message Editor
Internal
Only
Partner
Choose Open Message Editor from the
Use
context menu of Message Pool or double
click on the Message Pool node.
SAP
SAP
SAP AG 2004
Partner
Use
General points about language support
y All Web Dynpro Projects and Development Components (DC) must have a language specified when
they are created. This defines the default language for all hard coded texts strings and dictionary
metadata.
Internal
y The only languages that may be chosen are those in which an SAP R/3 system can operate.
y The Project or DC language is used only for translation purposes. It is not referenced at runtime.
Message Editor
Only
y Allows you to create and edit Web Dynpro specific text messages that you want to display on the
screen.
y Is only capable of editing texts in the Project’s or DC’s default language.
y Defines messages that are to appear on the user interface via the IWDMessageManager class.
© SAP AG JA310 12-27
Appendix
z Java Development Infrastructure: Overview
Internal
Only
Partner
Use
SAP
SAP
SAP AG 2004
Partner
Use
Internal
Only
© SAP AG JA310 12-28
Overview: Java Development Environment
z To implement large business applications with J2EE, SAP must:
Provide new features (SAP Web Dynpro, database-independent code)
Integrate open non-J2EE standards
Enhance the existing programming model
Support a highly productive development environment
Internal
Only
Presentation Layer Integration SAP NetWeaver
Change Management Service
Layer Developer Studio
Web Dynpro
Run Time J2EE Systems
Compo-
nent
Servlet JSP Build
Deploy
Web Service
Services (CBS)
(CMS)
Business Layer
Partner
EJB Design
Component
Model Time
Repository
Persistence (DTR)
Use
Local Local
JDBC SQLJ Open SQL File J2EE
System Engine
Components in a J2EE Application Development environment
SAP
SAP
SAP AG 2004
Partner
Use
Java Development Infrastructure
The Java Development Infrastructure provided by SAP consists of several components and services.
y SAP NetWeaver Developer Studio
The SAP NetWeaver Developer Studio is a development tool based on the free Eclipse platform that
Internal
SAP provides to develop business applications. It combines the advantages of local development with
the strength of a central resource repository and supports development teams with numerous tools for
development of complex applications such as build processes.
Only
y Design Time Repository (DTR)
The DTR can be used to store development components centrally within a distributed development
and is responsible for version management.
y Component Build Service (CBS)
The DTR is closely associated with the CBS. The CBS is responsible for creating software
components on the basis of the SAP "Component Model" as a central build process.
y Change Management Service (CMS)
Once make processes have been completed successfully, the CBS forwards the results to the CMS.
The CMS is responsible for software logistics. This is the controlled distribution of software
components to defined targets within the development landscape.
© SAP AG JA310 12-29
Design Time Repository
z Repository that is based on files and directories (Client/Server)
z Access to the repository via DeltaV / WebDAV protocols
z Version management (sync / check out / check in / ...)
DTR Server
Browser/ DTR Client DTR Client
WebFolder Client Commandline
Internal
Only
WebDAV Client DTR Client Tool
Eclipse
Plug-In
WebDAV
DeltaV+
Partner
DASL
Use
Local
File J2EE Server
System Developer's PC
SAP
SAP
SAP AG 2004
Partner
Use
Design Time Repository (DTR)
The DTR can be used for central management and versioning of Design Time Objects (files). The DTR
is highly scalable because it is divided into local and server-side components. The DTR Server runs in
the J2EE Server) provides individual DTR clients (run as Eclipse Plug-Ins) with a hierarchical file
Internal
system via the DeltaV and WebDAV standards.
y WebDAV
WebDAV allows straightforward access to the Remote Web Server (http://www.webdav.org/)
Only
y DeltaV
DeltaV adds WebDAV versioning characteristics (http://www.webdav.org/deltav/).
y DASL
The DASL protocol allows a HTTP/1.1-compliant schema to be used for the server-side search
functionality.
The DTR manages the different versions of your software and also solves possible conflicting change
conditions that may be created by the various developers.
If you want to modify the software provided by SAP, you can use the DTR to do so without errors
occurring. The DTR ensures that the changes you make are compared with the software provided by
SAP.
© SAP AG JA310 12-30
Component Build Service
z Central build process
Automatic generation of build scripts for different component types.
"Build on demand" instead of usual "nightly builds".
Synchronization of Archive / Assemblies.
Synchronization of resources in development teams.
Internal
Only
Automatic deployment controlled via CMS.
DTR 1 Component Build Service
CBS
DB
DTR Workspace
/HR/dev/
Buildspace
Partner
HR 1 Build Task 2 builds HR2 HR_DEV
HR 2
HR1 HR1 Archives
/FI/cons/ HR2
Use
HR2 Archives
FI 3 HR 2 build F1 F1 Archives
FI 4 TC TC Archives
SAP
SAP
SAP AG 2004
Partner
Use
Why use build processes?
An automatic build process is a prerequisite for a controlled software development. All resources
required are checked, compiled, combined and tested automatically. Since existing IDEs only offered
basic support here, specialist tools known as build tools were created. These obtain information on steps
Internal
such as how software is to be created from individual components, special instructions, known as make
files.
Component Build Process (CBS)
Only
The CBS Build Tool is based on the standard Apache-Ant and Velocity tools. One reason for SAP
providing a separate build tool with the CBS, is that the SAP component model contains several pre-
configured development component types (e.g. for Web Dynpro, Data Dictionary, Web Services etc)
with the corresponding additional information (such as "public part"). This information must be
evaluated before sources are actually compiled. A CBS can be run as follows (see diagram):
y The build process is triggered by the SAP NetWeaver Developer Studio.
y CBS searches for the resources and archives required automatically.
- The last change (HR2) from the Design Time Repository (DTR).
- Archives required from the CBS build space (HR1, FI and TC).
y The build process is started.
y The new archive created (HR2) is saved in the build space (HR_DEV).
y Deployment (e.g. to a central test system) takes place automatically (controlled by Change
Management Service, CMS).
© SAP AG JA310 12-31
Change Management Service
z The Change Management Service (CMS) is responsible for
transporting software components (changes etc.) within a SAP Java
development landscape.
z Uses of the CMS includes:
Automatic deployment of builds
Configuration of the SAP NetWeaver Developer Studio.
Import of Java Support Packages (supplied by SAP),
Internal
Only
Transport of your own Java projects in the development landscape.
SAP NetWeaver
Developer Studio Change Management Service
Run Time J2EE Systems
Compo-
Partner
nent
Build Deploy
Service
(CBS)
(CMS)
Use
Component Design
Model Time
Repository
(DTR)
Local Local
File J2EE
SAP
System Engine
SAP
SAP AG 2004
Partner
Use
Change Management Service (CMS)
CMS is closely linked with the Design Time Repository (DTR), Component Build Service (CBS) and
the System Landscape Repository (SLD). The central task of the CMS is to transport software changes
between different systems.
Internal
Only
© SAP AG JA310 12-32
SAP Java Development Process
Local development Design Time Component CentralJ2EE
environment Repository Build Service Server
Create
Development Archive
Component Pool
Naming Naming Naming
Service Service Service
Service Service Service
Develop, build,
Internal
Only
Save /
load
Deploy and test locally Java
Sources Web Container
EJB Container
File J2EE Server
Check-in
system
changes
Partner
Component
Naming Naming Naming
Service Service Service
Build
Service Service Service
Use
Deploy
Web Container Activate OK? archives
EJB Container
J2EE Server
Local J2EE engine
SAP
SAP
SAP AG 2004
Partner
Use
SAP Java development process
The development process for SAP J2EE applications is based on the models and tools that have already
been introduced. Local development is linked with the benefits of a central repository and build process,
which achieves optimum support for the development team.
Internal
DTR, pre-configured configurations and the results of the CBS help to create a standardized and stable
development environment at each work station.
Only
© SAP AG JA310 12-33
You might also like
- PIC16F84A Microcontroller Introduction and Features100% (1)PIC16F84A Microcontroller Introduction and Features21 pages
- SAP Enterprise Portal by Vamshi KrishnaNo ratings yetSAP Enterprise Portal by Vamshi Krishna51 pages
- SAP S4 HANA - Intro - Architecture - Day 1100% (1)SAP S4 HANA - Intro - Architecture - Day 186 pages
- Sap Netweaver - Web Application Development Environment: Peter VaníčekNo ratings yetSap Netweaver - Web Application Development Environment: Peter Vaníček47 pages
- Overview Functions Packages YRC1000 E 08.2019No ratings yetOverview Functions Packages YRC1000 E 08.2019100 pages
- Enterprise Reporting, Query, and Analysis: Developer'S Guide Sap Netweaver 2004S Sps 7No ratings yetEnterprise Reporting, Query, and Analysis: Developer'S Guide Sap Netweaver 2004S Sps 7672 pages
- Automatic Guiding Computer: Technical DescriptionNo ratings yetAutomatic Guiding Computer: Technical Description21 pages
- Master Guide - SAP Enterprise Point-Of-Sale 31No ratings yetMaster Guide - SAP Enterprise Point-Of-Sale 3140 pages
- Integrating Sap Netweaver Bi 7 With Enterprise Standard Etl ToolsNo ratings yetIntegrating Sap Netweaver Bi 7 With Enterprise Standard Etl Tools34 pages
- Labcenter Electronics - Proteus VSM - SPICE Co-Simulation - Debugging Benefits For PIC, 8051, AVR, HC11 and ARMNo ratings yetLabcenter Electronics - Proteus VSM - SPICE Co-Simulation - Debugging Benefits For PIC, 8051, AVR, HC11 and ARM2 pages
- 1.SAP BASIS Introductory Training Program - Day 1No ratings yet1.SAP BASIS Introductory Training Program - Day 150 pages
- ABAP On HANA Using ABAP Development Tool PDFNo ratings yetABAP On HANA Using ABAP Development Tool PDF61 pages
- Web Based Application Development With PHP: TODO ListNo ratings yetWeb Based Application Development With PHP: TODO List16 pages
- SAP ABAP Interview Question423351358753475..No ratings yetSAP ABAP Interview Question423351358753475..39 pages
- NW 202 - Platform For Developing ABAP and Java Applications: Ulrich Klingels/Wolf Hengevoss Sap AgNo ratings yetNW 202 - Platform For Developing ABAP and Java Applications: Ulrich Klingels/Wolf Hengevoss Sap Ag19 pages
- SAP Content Server 6.40 - Operations GuideNo ratings yetSAP Content Server 6.40 - Operations Guide63 pages
- Java Is An Programming Language Developed by Sun Microsystems, Which Is Now Taken Over by Oracle CorporationNo ratings yetJava Is An Programming Language Developed by Sun Microsystems, Which Is Now Taken Over by Oracle Corporation12 pages
- Ibm Global Business Services: Sap Netweaver Components and ArchitectureNo ratings yetIbm Global Business Services: Sap Netweaver Components and Architecture13 pages
- SAP ABAP Interview Question423351358753475No ratings yetSAP ABAP Interview Question42335135875347539 pages
- SAP System Landscape Directory On SAP Web AS Java 6.40No ratings yetSAP System Landscape Directory On SAP Web AS Java 6.4018 pages
- Sap Netweaver™ Training Overview - : Scott LowdenNo ratings yetSap Netweaver™ Training Overview - : Scott Lowden13 pages
- SAP - ABAP First Step: Akash R. BhavsarNo ratings yetSAP - ABAP First Step: Akash R. Bhavsar30 pages
- Applications of Automata in Electronic Machines and Android Games (Finite Automata)No ratings yetApplications of Automata in Electronic Machines and Android Games (Finite Automata)5 pages
- Student Book: CMAS Costa Rica Team Unit 1 SAP SystemsNo ratings yetStudent Book: CMAS Costa Rica Team Unit 1 SAP Systems8 pages
- Ibm Global Business Services: Sap Netweaver Components and ArchitectureNo ratings yetIbm Global Business Services: Sap Netweaver Components and Architecture13 pages
- SAP Enterprise Portal Architecture & Technology: ComponentNo ratings yetSAP Enterprise Portal Architecture & Technology: Component3 pages
- Module Code: DEE40082 Module Title: Project 1 Course: Diploma in Electrical and Electronic EngineeringNo ratings yetModule Code: DEE40082 Module Title: Project 1 Course: Diploma in Electrical and Electronic Engineering8 pages
- Related Content: For More Information, Visit TheNo ratings yetRelated Content: For More Information, Visit The2 pages
- Spectrum Scale Stretched Cluster Best PracticesNo ratings yetSpectrum Scale Stretched Cluster Best Practices61 pages
- Introducing SAP NetWeaver Developer StudioNo ratings yetIntroducing SAP NetWeaver Developer Studio4 pages
- Upgrade Your Sap Application Software With ConfidencerNo ratings yetUpgrade Your Sap Application Software With Confidencer20 pages
- SAP First Guidance Deploy SAP BW 4HANA TNo ratings yetSAP First Guidance Deploy SAP BW 4HANA T39 pages
- SAP BASIS Introductory Training Program - Day 1No ratings yetSAP BASIS Introductory Training Program - Day 155 pages
