Web Dynpro Debugging, Exercises

Topic: Web Dynpro Debugging

At the end of this Exercise, you are able to:

1) Debug and change the Component Context of a running
Web Dynpro application.
2) Optional – HotSwap code

1 Development Objectives

An important part of your programming toolkit should be mastery of debugger. It will

help you save time and frustration in locating and eliminating software bugs. You can
easily use the debugger as part of your Web Dynpro development environment since
it is integrated into NetWeaver Developer Studio. These short exercises will give
practical hand-ons experience using the debugger to change program variables and to

2 Result

As a result of this exercise, you will be

able to start a debug session, analyze the
application state, set breakpoints, and
change program variables.

Optional part I:
You will learn how you to change code
on the fly in a debugging session
 3 Prerequisites
You have launched the SAP NetWeaver Developer Studio.
You have selected the Web Dynpro perspective.
The structure of your project WebDynpro_Quiz is currently displayed in
the Web Dynpro Explorer. Please take a moment to deploy and run this
application so that you are familiar with the application logic

4 Debugging, Step-by-Step

4-1 Web Dynpro Debugging

4-1-1 Switching Server Nodes to Debug Mode.
4-1-2 Setting a Breakpoint
4-1-3 Defining a Debug Configuration and Starting the Debug Mode
4-1-4 Changing the Web Dynpro Component Context

Your goal is to change 1 of the 7 questions and answers presented in the

QuizAPP by locating and changing the members variables of the Component
Context

4-1-5 Terminate Debugging

4-2 HotSwap code (Optional Section)
4-2-1 Set a Breakpoint
4-2-2 Resume Debugging
4-2-3 HotSwap
You goal is to change the action of the QuizApp exit button
to go to a different URL by using the hotswap feature.
4-2 Define a table UI element for Exc06_TableView and bind it to the view
context.
4-2-1 Define a table UI element.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Select the Views node. Open the context

menu of Exc06_TableView.
Choose Edit.

The View Designer for Exc06_TableView

appears on the right pane

In the toolbar, choose Complex Standard

and drag and drop Table to the editor pane
on the right.

Note: Leave the dataSource property of the

table blank. You will specify this property
later.

Save the new project data by choosing Save All Metadata from the toolbar.
4-2-2 Define a Dictionary structure type.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Dictionaries/Local
Dictionary/Data Types.

Select the Structures node. Open the

context menu.
Choose Create Structure.

In the wizard that appears, enter

Structure name:
Exc06_Person
Structure package:
com.sap.training.wd.exc06

Choose Finish.

Define the elements of the structure.

Assign the following property values:

Element Built-in Not

name type null
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.
4-2-3 Create the view context for view Exc06_TableView with structure
binding.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Select the Views node. Open the context

menu of Exc06_TableView.
Choose Edit.

The View Designer for Exc06_TabletView

appears on the right pane

Choose the Context tab

Open the context menu for the root node

Context and choose the option New/Value
Node.

In the wizard, enter

Name: Person
Select “Create with structure
binding”

Choose Next.

Select structure
com.sap.training.wd.exc06.
Person

Choose Next.
 Select the structure elements firstname,
lastname, date_begin, and date_end.

Choose Finish.

Save the new project data by choosing Save All Metadata from the toolbar.

4-2-4 Define the table binding and the dataSource property.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Select the Views node. Open the context

menu of Exc06_TableView.

Choose Edit.

The View Designer for Exc06_TableView

appears on the right pane

Choose the Layout tab and then choose the

table UI element.

Open the context menu and choose

Create Binding.

In the wizard that appears, select firstname

and lastname.

Choose Finish.
 Open the View Designer for
Exc06_TableView and choose
the table UI element again.

Open the properties editor.

Click on the button near the dataSource

field and select Person from the context.

Save the new project data by choosing Save All Metadata from the toolbar.

4-2-5 Add the values of the input fields of Exc06_StartView to the table of
Exc06_TableView.

Open the View Designer for

Exc06_TableView again.

Choose the Implementation tab.

Add the following lines to the event handler method onPlugFromStartView(): :

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:
public void onPlugfromStartView(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) {
//@@begin onPlugfromStartView(ServerEvent)
String firstname =
wdThis.wdGetExc06_ComponentController().wdGetContext().
currentContextElement().getCmpCtx_firstname();
String lastname =
wdThis.wdGetExc06_ComponentController().wdGetContext().
currentContextElement().getCmpCtx_lastname();
Date dateBegin =
wdThis.wdGetExc06_ComponentController().wdGetContext().
currentContextElement().getCmpCtx_dateBegin();
Date dateEnd =
wdThis.wdGetExc06_ComponentController().wdGetContext().
currentContextElement().getCmpCtx_dateEnd();

IPersonElement person = null;

person = wdThis.wdGetContext().createPersonElement();
 person.setFIRSTNAME(firstname);
person.setLASTNAME(lastname);
person.setDATE_BEGIN(dateBegin);
person.setDATE_END(dateEnd);

wdThis.wdGetContext().nodePerson().addElement(person);
//@@end
}

This method is called, after the user has made some changes to the input fields in
the StartView and pressed the Next button.
The Web Dynpro automatically stores the values of the input fields to the
component context. Before the TableView is shown, the onPlugFromStartView
is called. Here you’ll get the values from the component context, create a new
person element, set the attributes of the person element with the context data,
and create a new person node in the view context. Because the view context is
bound to the table as data source, the data is then shown in the table.

Save the new project data by choosing Save All Metadata from the toolbar.

4-5 Create a Web Dynpro application

In the Web Dynpro Explorer, expand the WD01_Basics node.

Expand the Web Dynpro node and open the context menu for Applications.

To open the wizard, choose Create Application.

In the wizard, enter:
Name: WD01_Basics_Exc05
Package: com.sap.training.wd.exc05
Accept the other suggested values and choose Next.

Select Use existing component and choose Next.

Select
Web Dynpro Component Exc05_Component
Interface View Exc05_WindowInterfaceView
Startup Plug Default
and choose Finish.

Successful result:

The generated Web Dynpro application

object completes your project structure.
You are now in a position to trigger
deployment. WD01_Basics_Exc05 enables
you to address the Web application as a
whole, when you launch this complete
application in the next step.
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 WD01_Basics node/Web Dynpro/Applications.
Open the context menu for WD01_Basics_Exc06.

To deploy and run the application, choose Deploy new Archive and Run
.
Successful result:

The Developer Studio launches the Web

browser and chooses the active view
Exc06_StartView.

You can insert some values in the input

fields and choose the Next button.

The values are stored in the table UI

element that is shown in the
Exc06_TableView.
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 data transport from Exc06_TableView to
Exc06_TableDetailView.
To transport the person detail data between the two views, it is necessary
to define the person structure in the component context and map this
structure to the two view contexts.

6-1-1-1 Define the component context value node Person for the component
controller.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Open the context menu of Component

Controller node.
Choose Edit.

The Controller editor appears on the right

pane

Choose the Context tab

Open the context menu for the root node

Context and choose the option New/Value
Node

In the wizard, enter

Name: Person
Select “Create with structure
binding”

Choose Next.

Select structure
com.sap.training.wd.exc06.
Person

Choose Next.
 Select the structure person.

Choose Finish.

Successful result:

The component context includes the value

node person and the value attributes
cmpCtx_dateBegin, cmpCtx_dtaeEnd,
cmpCtx_firstname, and cmpCtx_lastname

Save the new project data by choosing Save All Metadata from the toolbar.

6-1-1-2 Define view context value node Person for view Exc06_TableView.
This has already been done in exercise 4-2-3.

6-1-1-3 Define view context value node Person for view

Exc06_TableDetailView.
You find a description of the necessary steps in exercise 4-2-3.

6-1-1-4 Define the context mapping between the view context of

Exc06_TableView and the component context.
This mapping has already been created in exercise 4-1-3.
In this exercise you have to update the data link.

In the context menu of the node

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component, select the
entry Open Data Modeler:
 Choose the data link between
Exc06_TableView and the component
context.

From the context menu choose Edit.

Drag and drop the value node person of the

view context to the corresponding person
node of the component controller and map
the corresponding fields

To complete the data link definition, choose

Finish.
Save the new project data by choosing Save All Metadata from the toolbar.

6-1-1-5 Define the context mapping between the view context of

Exc06_TableDetailView and the component context.

Data Modeler, Exc06_Component:

In the left toolbar, choose Create a data

link. This is then shaded in grey.

Place the cursor on Exc06_TableDetailView

and left-click. Drag the data link to the
Component Controller and release the left
mouse button. The dialog box for defining
the context mapping appears.

Drag and drop the value node person of the

view context to the corresponding person
node of the component controller.

To complete the data link definition, choose

Finish.
Save the new project data by choosing Save All Metadata from the toolbar.
6-1-2 Add input fields to the detail view using templates.

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Select the Views node. Open the context

menu of Exc06_TableDetailView.
Choose Edit.

The View Designer for

Exc06_TableDetailView appears on the
right pane

Choose the Layout tab.

The Outline view appears in the lower left

side of the SAP NetWeaver Developer
Studio.

Choose the predefined Group node and

choose Apply Template from the context
menu.

In the wizard that appears, choose Form.

Choose Next.
 In the next screen select all attributes from
the structure Person.

Choose Finish.

Successful result:

The wizard creates all necessary labels and

input fields for Exc06_TableDetailView.

Save the new project data by choosing Save All Metadata from the toolbar.

6-1-3 Define navigation between Exc06_TableView and

Exc06_TableDetailView

In the Web Dynpro Explorer:

Expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro
Components/Exc06_Component..

Select the Windows node. Open the context

menu of Exc06_Component.
Choose Embed View.

In the wizard that appears, choose Embed

existing view.

Choose Exc06_TableDetailView

Choose Finish
 Define navigation links
from to
Outbound plug Inbound plug
toDetailView fromTableView
toTableView fromDetailView

In Exc06_TableView

Choose the Action tab.

Define a new Action ShowTableView
(fires plug toDetailView).

Choose the Layout tab.

Add a button to the button group
Choose the following properties:
Text: Details
Event: onActionShowDetails

Save the new project data by choosing Save All Metadata from the toolbar.

6-1-4 Create the Web Dynpro application WD01_Basics_Exc06.

Have a look at exercise 4-5.

6-1-5 Build, deploy and run the application.

Have a look at exercise 5-1.

Successful result:

As a result of this exercise, you added an

additional view Exc06_TableDetailView to
the component. When you select a table
row and choose the Details button, the
Exc06_TableDetailView appears and shows
all details of the selected person.
6-2 Delete a selected table row.
6-2-1 Define a toolbar and a toolbar button for the Person table in
Exc06_TableView.
In the Web Dynpro Explorer: Expand the nodes
WD01_Basics/Web Dynpro/Web Dynpro Components/Exc06_Component..

Select the Views node. Open the context menu of Exc06_TableView.

Choose Edit.

The View Designer for Exc06_TableView appears on the right pane

Choose the Layout tab.

The Outline view appears in the lower left

side of the SAP NetWeaver Developer
Studio.

Select the table node. Open the context

menu and choose Insert Toolbar.

Select the new Toolbar node. Open the

context menu and choose Insert
Toolbaritem.

Choose type ToolbarButton

Choose Finish.

Save the new project data by choosing Save All Metadata from the toolbar.

6-2-2 Define an action for the toolbar button.

Choose the Actions tab of Exc06_TableView

Define a new Action

Name: DeleteEntry
Text Delete entry
Event Handler: Default
Fire Plug: <none>

Choose Finish.

Save the new project data by choosing Save All Metadata from the toolbar.
6-2-3 Implement the event handler for deleting a person entry..
Choose the Implementaion tab of Exc06_TableView
Insert the following code in method onActionDeletePerson(…)
(For your convenience: You can cut and paste the code from the
implementation of Sol06_TableView)

public void onActionDeleteEntry(com.sap.tc.webdynpro.

progmodel.api.IWDCustomEvent wdEvent ) {

//@@begin onActionDeleteEntry(ServerEvent)
int n = wdContext.nodePerson().size();
int leadSelected = wdContext.nodePerson().getLeadSelection();

// loop backwards to avoid index troubles

for (int i = n - 1; i >= 0; --i)
{
if (wdContext.nodePerson().isMultiSelected(i)
|| leadSelected == i)
{
wdContext.nodePerson().removeElement(
wdContext.nodePerson().getElementAt(i));
} //if
} //for

//@@end
}

Save the new project data by choosing Save All Metadata from the toolbar.

6-2-4 Assign the delete action to the delete button.

Choose the Layout tab of Exc06_TableView

Update the properties of the toolbar button.

text: <>
At runtime this will be
replaced by the text Delete
entry that you have defined
when you created the
DeleteEntry action.
onAction DeleteEntry
Save the new project data by choosing Save All Metadata from the toolbar.

6-2-5 Create the Web Dynpro application WD01_Basics_Exc06.

Have a look at exercise 4-5.

6-2-6 Build, deploy and run the application.

Have a look at exercise 5-1.
 Successful result:

As a result of this exercise, you added a

Delete button to the table toolbar.
When you select a table row and choose the
Delete button, the table row will be deleted.

6-3 Calculated attributes

6-3-1 Update the Person structure, add an additional attribute DURATION
In the Web Dynpro Explorer, expand the nodes
WD01_Basics/Dictionary/Local Dictionary/Data Types/Structures..
Select the Exc06_Person node, open the context menu and choose Edit.
The Structure editor appears on the right pane
Add the additional field DURATION of type long.

Save the new project data by choosing Save All Metadata from the toolbar.

6-3-2 Update the component context.

6-3-2-1 Add the additional attribute DURATION from context Person
In the Web Dynpro Explorer, expand the nodes
WD01_Basics/Web Dynpro/Web Dynpro Components..
Select the Exc06_Components node, open the context menu and choose Edit.

In the context editor that appears, choose

the Context tab.
Choose the Person node, open the context
menu and choose Edit Structure Binding.
 In the wizard that appears choose
DURATION and choose Finish

6-3-2-2 Set the calculated property of this attribute true

In the context editor choose the

DURATION entry and change its property
calculated to true,

Save the new project data by choosing Save All Metadata from the toolbar.

6-3-2-3 Implement the generated method getPersonDURATION(…).

In the context editor choose the IMPLEMENTATION tab and navigate to

method getPersonDURATION(…):
package com.sap.training.wd.sol06;
//@@begin imports
import java.sql.Date;
import java.util.Calendar;
import java.util.GregorianCalendar;
//@@end

. . .

public long getPersonDURATION(

IPrivateSol06_Component.IPersonElement element) {
//@@begin
Date dateBegin = element.getDATE_BEGIN();
Date dateEnd = element.getDATE_END();

Calendar calBegin = new GregorianCalendar();

calBegin.setTime(dateBegin);
long dt1 = calBegin.getTimeInMillis();

Calendar calEnd = new GregorianCalendar();

 calEnd.setTime(dateEnd);
long dt2 = calEnd.getTimeInMillis();
long days = (dt2 - dt1) / 86400000;

return ++days;
//@@end
}

Save the new project data by choosing Save All Metadata from the toolbar.

6-3-3 Update the context of view Exc06_TableView.

Add the additional attribute DURATION from context Person and map
it to the component context.
Note: Since the view context has already been mapped to the component
context that has a dictionary structure binding, you can not directly update the
view context in the Context tab of the view editor.

In the Web Dynpro Explorer, expand the nodes

WD01_Basics/Web Dynpro/Web Dynpro Components.
Open the context of Exc06_Components and choose Open Data Modeler.

Choose the data link between

Exc06_TableView and the component
context.

From the context menu choose Edit.

In the right pane of the wizard that appears

(component context) choose DURATION
and drag and drop it to the Person entry on
the left pane (view context)

This will create a new attribute in the view

context and map it to the component
context.

Choose Finish

Save the new project data by choosing Save All Metadata from the toolbar.
6-3-4 Update table Person on Exc06_TableView. Add the additional attributes
DATE_BEGIN, DATE_END, and DURATION from structure Person.
In the Web Dynpro Explorer, expand the nodes
WD01_Basics/Web Dynpro/Web Dynpro Components/Views..
Choose Exc06_TableView, open the context menu and choose Edit.

In the view editor that appears, choose the

Layoutt tab.

Choose the Person table, open the context

menu and choose Create Binding.

In the wizard that appears, choose

DATE_BEGIN, DATE_END, and
DURATION.

Choose Finish.

Save the new project data by choosing Save All Metadata from the toolbar.

6-3-5 Create the Web Dynpro application WD01_Basics_Exc06.

Have a look at exercise 4-5.

6-3-6 Build, deploy and run the application.

Have a look at exercise 5-1.

Successful result:

As a result of this exercise, you add an

additional column Duration to the table.
There is no input field for this column since
the value of the column value is the
difference between the start date and the
end date and is calculated automatically.