How To Use Web Dynpro Popup Menus

Web Dynpro Foundation For Java SAP NetWeaver 2004s
How to Use Web Dynpro Popup Menus

Bertram Ganz and Daniel Wirbser – SAP AG, NW ESI Foundation UI
Overview
This sample application demonstrates the usage of Web Dynpro popup menus that come with SAP
NetWeaver 2004s.
You will learn how to add a popup menu to a Tray UI element, how to declare menu item events, and
how to disable or enable menu action items by programmatically disabling or enabling the associated
action objects within action event handlers.
The sample application also shows popup menus in table cell editors. To select the contained menu
items without changing the table’s lead selection, the special table selection mode ‘nw04Plus’
combined with parameter mapping is applied.
Besides the static definition of popup menus at design time, this tutorial demonstrates how to add
popup menus dynamically at runtime by modifying the view layout within the wdDoModifyView()
controller hook method.
Contents
1. Introduction
2. Creating Component and Context
3. Designing the View Layout using Popup Menus
4. Implementing Action Event Handlers
5. Applying the Table Selection Behavior ‘nw04Plus’
6. Dynamically Adding Popup Menus to the View Layout
7. Related Content
Keywords
Web Dynpro, Menu, Popup menu, IWDMenu, IWDMenuActionItem, IWDMenuCheckBox,
IWDMenuRadioButton, IWDMenuSeparator, Web Dynpro Table, dynamic programming, dynamic UI
modification, end user UI customizing, action, action object, parameter mapping, table selection
Behavior, compatibiltyMode
1. Introduction
Demo Application Sshowing Popup Menus
The application scenario will demonstrates the following popup menu functions:
...
The end user is able to customize the Web Dynpro view on the UI using popup menus in both trays
(product detail tray, product table tray):
1. Swap (move down or move down) the position of both trays on the UI
2. Delete one row in the table with a popup menu item of a product cell editor (Product ID column)
without implicitly changing the table’s lead selection.
3. Display product details with a popup menu item of a product cell editor (Product ID column)
without implicitly changing the table’s lead selection.
4. Hide the product table tray and show it again.
5. The popup menu of the product detail tray is dynamically added at runtime within the
wdDoModifyView() hook method of the view controller.
How to use Popup Menus in Web Dynpro Applications – SAP NetWeaver 2004s 1
Figure 1: Screenshots of demo application demonstrating popup menus
2. Creating Component and Context

Create a New Development Component
• In SAP NetWeaver Developer Studio open the Development Component Perspective to create
a new DC.
• Create a new Web Dynpro DC: In window Local DCs Æ MyComponents select Create New
DC, enter sap.com as vendorname, wd/popupmenus as name of the DC and Web Dynpro
as DC type.
Create a New Web Dynpro Application and Web Dynpro Component

• Select Applications Æ Create Application and enter PopupMenuApp as name,
com.sap.tc.wd.samples.menus as package.
• Select Create a new component and enter the following values (see table).
Input field Value

ComponentName PopupMenuComp
ComponentPackage com.sap.tc.wd.samples.menus
Window Name PopupMenuWindow
Window Package com.sap.tc.wd.samples.menus
View Name PopupMenuView
View Package com.sap.tc.wd.samples.menus
Define the Controller Context

• In the view PopupMenuView create the following context elements:
Node/Attribute Name Type Java Data Type
Products Value Node (cardinality: 0..n)
Details Value Attribute string
Name Value Attribute string
Price Value Attribute string
ProductId Value Attribute string
Quantity Value Attribute integer
UIState Value Node (cardinality: 1..1
selection cardinality: 1..1)
DoSwapTrays Value Attribute boolean
MenuItemSelected Value Attribute boolean
ProductTrayVisibility Value Attribute Visibility
ProductDetail Value Attribute string
Programmatically Populate Context with Sample Data

To fill the context with some sample date, the following coding in wdDoInit() will be used:
View Controller PopupMenuView.java - Component PopupMenuComp
//@@begin javadoc:wdDoInit()
/** Hook method called to initialize controller. */
//@@end
public void wdDoInit()
{
//@@begin wdDoInit()
// ======== Popuplate context node 'Products' ====================
// fill product table with some data
List products = new ArrayList();
IPrivatePopupMenuView.IProductsElement product =
wdContext.createProductsElement();
product.setName("Product 1");
product.setPrice("89,90");
product.setProductId("PP-1020");
product.setQuantity(850);
product.setDetails("Detailed description of product 1");
products.add(product);
product = wdContext.createProductsElement();
product.setProductId("PRD-4711");
product.setProductId("ZR-0124");
product.setProductId("ZR-1454");
// add collection of node elements to context value node

wdContext.nodeProducts().bind(products);
// ======== Initialize context attribute 'DoSwapTrays' ====================

// set product table visible and show messages
wdContext.currentUIStateElement().setDoSwapTrays(false);
// ======== Disable certain action objects ====================

wdThis.wdGetMoveDownAction().setEnabled(false);
wdThis.wdGetShowProductTrayAction().setEnabled(false);
//@@end
}
3. Designing the View Layout Using Popup Menus

Menus in general can be used in a MenuBar UI element or within certain UI elements like trays or
table cell editors as popup menus:
The popup menu is used to group actions in a space-saving way. After a user action the menu is
opened according to the UI element to which it is assigned. A MenuBar and a popup menu consist of
the following elements:
• Submenus for hierarchical menu structures, defined as a menu.
• Different menu items which can be defined as the following UI elements: MenuActionItem,
MenuRadioButton, MenuCheckBox, MenuSeparator. The MenuSeparator element adds a
separator between two menu items and thus provides a structure to the menu items.
Please note that popup menus do not fulfill real context menu functions like populating
menus on demand or adapting them to the UI context in which they are opened.
Insert a Popup Menu in a Tray UI Element

Within the View Designer (select PopupMenuView Æ Layout) implement the following view layout:
To use a popup menu you have to select the UI element you want to use for a popup menu (e. g. tray)
and select Insert PopupMenu.
• In this demo application select the ProductTableTray Tray UI element an insert a PopupMenu
with id PopupMenuTableTray.
• Insert the following three menu items by selecting Insert Item.
• Bind the onAction event of the two MenuActionItem UI elements to new actions. Defining a new
action is done by pressing the utmost right button […] in the line onAction:
ID Type Event .. onAction Action Text

menUp MenuActionItem MoveUp Move Up
menDown MenuActionItem MoveDown Move Down
menSeparator MenuSeparator - -
menHide MenuActionItem HideProductTray Hide Tray
The text property of each menu action item must not be explicitly set as it is retrieved
from the associated action object at runtime. For this reason the texts must be defined on
action level (action texts) at design time.
For the definition of a popup menu in the table you have to select the TableCellEditor of the column
you want to provide with a popup menu.
• Select the context menu item ProductId_editor Æ Insert Menu to insert a menu with ID
MenuProductTable.
• Define the following menu items in the menu UI element MenuProductTable.
ID Type Event .. onAction Action Text

menShowDetails MenuActionItem ShowProductDetails Show Details
menSepProd MenuSeparator - -
menDeleteProduct MenuActionItem DeleteProduct Delete
Supported UI Elements for Popup Menus

List of UI elements carrying a menu:
• Image, LinkToAction, LinkToURL, ProgressIndicator, TextView, Tray, Tree{Item, Node}Type
Out of this set of menu-aggregating UI elements the following ones can be used as table cell editors:
• Image, LinkToAction, LinkToURL, ProgressIndicator, TextView
4. Applying the Table Selection Behavior nw04Plus

When using popup menus in table cell editors we want to avoid an implicit lead selection change. It is
quite cumbersome for the user when the selected table line is always moved to the table line, where
the popup menu action item was selected. Instead the table’s lead selection should keep unaffected
for all selected menu items:
Such a behavior can be achieved by setting the table property compatibilityMode to nw04Plus in
combination with implementing a parameter mapping relation.
The parameter mapping relation must be implemented to transfer the event parameter nodeElement of
a MenuActionItem UI element to a corresponding parameter in the action event handler. With this
mechanism a reference to the clicked node element (product in table line) is automatically passed to
the action event handler by the Web Dynpro runtime. The lead selection no longer needs to be
implicitly changed or accessed for this purpose.
Setting the Product Table Property compatibilityMode=nw04Plus

In a first declarative step, we set the table property compatibilityMode as nw04Plus:
• Select perspective view Layout of the PopupMenuView
• In the Outline select the Table UI element with id ProductTable
• Set the property compatibilityMode as nw04Plus
Define the Action Parameter product

We then add a the parameter product of type IProductsElement to the actions ShowProductDetails
and DeleteProduct.
• Select action ShowProductDetails.
• Define a new action parameter by pressing button New.
{ parameter name: product.
{ parameter type: the parameter type must be defined as
IPrivatePopupMenuView.IProductsElement (See following screenshots). You
must mark the check box Adapt event handler parameter so that the new action
parameter is also added to the related action event handler.
• Additionally add the same parameter product to the action DeleteProduct and its associated
action event handler.
After this step the signature of the generated action event handler onActionDeleteProduct()
looks like this:
//@@begin javadoc:onActionDeleteProduct(ServerEvent)
/** Declared validating event handler. */
//@@end
public void onActionDeleteProduct(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent,
com.sap.tc.wd.samples.menus.wdp.IPrivatePopupMenuView.IProductsElement product )
{
//@@begin onActionDeleteProduct(ServerEvent)
...
//@@end
}
Implement Parameter Mapping in wdDoModifyView()

The controller code, which implements the required parameter mapping, is as follows:
public static void wdDoModifyView(
IPrivatePopupMenuView wdThis,
IPrivatePopupMenuView.IContextNode
wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view,
boolean firstTime)
{
//@@begin wdDoModifyView
if (firstTime) {
// === Apply Parameter Mapping to use compatibilityMode='nw04Plus' =====
// Apply compatibilityMode feature for omitting a second server roundtrip
// when clicking a menu action item in a table cell editor. As a consequence
// the table's lead selection is not changed when selecting a menu action
// item. Map UI element event parameter 'nodeElement' to action (event
// handler) parameter 'product' (parameter mapping).
IWDMenuActionItem menuActionItem =
(IWDMenuActionItem) view.getElement("menShowDetails");
menuActionItem.mappingOfOnAction()
.addSourceMapping("nodeElement", "product");
menuActionItem = (IWDMenuActionItem) view.getElement("menDeleteProduct");
menuActionItem.mappingOfOnAction()
.addSourceMapping("nodeElement", "product");
}
//@@end
}
5. Implementing Action Event Handlers

The next step is to implement the application logic to handle the events in the previously defined
actions.
The following actions and action event handlers are declared in the view controller of view
PopupMenuView:
Action Action Text Action Event Handler

DeleteProduct Delete onActionDeleteProduct
HideProductTray Hide Tray onActionHideProductTray
ShowProductTray Show Product Tray onActionShowProductTray
MoveDown Move Down onActionMoveDown
MoveUp Move Up onActionMoveUp
OnToggle Some Toggle Action onActionToggle
ShowProductDetails Show Details onActionShowProductDetails
Implement Controller Code

The following code blocks comprise the implementation of the different action event handlers. They
are processed by the Web Dynpro Java Runtime when the user has selected a popup menu item on
the UI.
• onActionDeleteProduct () will be called to delete one element in the context node
Products. Based on the implemented parameter mapping relation we can access the clicked
node element with the action event parameter product.
• onActionMoveUp() and onActionMoveDown() will be called to set the context attribute
UIState.DoSwapTrays to true and to adapt the state of the action objects MoveUpAction and
MoveDownAction. Later, we will swap the order of both trays within the wdDoModifyView()
hook method.
• onActionHideProductTray and onActionShowProductTray will be called to set the
context attribute ProductTrayVisibility (controls the visibility of the tray with the product table)
and to adapt the state of action object ShowProductTrayAction.
• onActionShowProductDetails will be called to show further product details as TextView UI
element in the product detail tray. A reference to the clicked node element is passed by the Web
Dynpro Runtime with the action event parameter product.
Please notice how the state (disabled or enabled) of the MenuActionItem UI element is
implicitly managed by disabling or enabling the action objects to which its onAction
event is bound. Based on the event-to-action binding mechanism the Web Dynpro
Runtime automatically renders a UI element as disabled in case its event is bound to a
disabled action object.
This implicit action-object-based disabling/enabling of menu items is not applied for the
UI elements MenuCheckBox and MenuRadioButton. They keep enabled for disabled
actions.

//@@begin javadoc:onActionDeleteProduct(ServerEvent)
//@@end
public void onActionDeleteProduct(
com.sap.tc.wd.samples.menus.wdp.IPrivatePopupMenuView.IProductsElement product )
{
//@@begin onActionDeleteProduct(ServerEvent)
String productId = product.getProductId();
wdContext.nodeProducts().removeElement(product);
wdComponentAPI.getMessageManager()
.reportSuccess("Product " + productId + " was sucessfully deleted.");
wdContext.currentContextElement().setProductDetail("");
//@@end
}
//@@begin javadoc:onActionShowProductDetails(ServerEvent)
//@@end
public void onActionShowProductDetails(
com.sap.tc.wd.samples.menus.wdp.IPrivatePopupMenuView.IProductsElement
product)
{
//@@begin onActionShowProductDetails(ServerEvent)
wdContext.currentContextElement().setProductDetail(
"Details for " + product.getProductId() + ": " + product.getDetails());
//@@end
}
//@@begin javadoc:onActionHideProductTray(ServerEvent)
//@@end
public void onActionHideProductTray(
com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )
{
//@@begin onActionHideProductTray(ServerEvent)
wdContext.currentUIStateElement().setProductTrayVisibility(WDVisibility.NONE);
wdThis.wdGetShowProductTrayAction().setEnabled(true);
wdContext.currentContextElement().setProductDetail("");
//@@end
}
//@@begin javadoc:onActionShowProductTray(ServerEvent)
//@@end
public void onActionShowProductTray(
{
//@@begin onActionShowProductTray(ServerEvent)
wdContext.currentUIStateElement().setProductTrayVisibility(
WDVisibility.VISIBLE);
wdThis.wdGetShowProductTrayAction().setEnabled(false);
//@@end
}
//@@begin javadoc:onActionMoveUp(ServerEvent)
//@@end
public void onActionMoveUp(
{
//@@begin onActionMoveUp(ServerEvent)
wdThis.wdGetMoveUpAction().setEnabled(false);
wdThis.wdGetMoveDownAction().setEnabled(true);
wdContext.currentUIStateElement().setDoSwapTrays(true);
//@@end
}
//@@begin javadoc:onActionMoveDown(ServerEvent)
//@@end
public void onActionMoveDown(
{
//@@begin onActionMoveDown(ServerEvent)
wdThis.wdGetMoveUpAction().setEnabled(true);
//@@end
}
6. Dynamically Adding Menus to the View Layout

Swap Tray UI Element Containers in wdDoModifyView()
RootUIElementContainer
2
swapChildren(1,2)
Within the action event handlers onActionMoveDown() and onActionMoveUp()we set the context
attribute UIState.DoSwapTrays to true.

//@@begin javadoc:onActionMoveDown(ServerEvent)
//@@end
public void onActionMoveDown(
{
//@@begin onActionMoveDown(ServerEvent)
wdThis.wdGetMoveUpAction().setEnabled(true);
//@@end
}
Within the wdDoModifyView() hook method we can then access this context attribute in order to
swap the position of both Tray UI element containers. This can be done by calling the method
swapChildren(1,2) which is implemented by all UI element containers of type
IWDUIElementContainer. The RootContainerUIElement is of type IWDTransparentContainer
which extends the IWDUIElementContainer interface. The integer values 1 and 2 are based on the
fact, that the UI Element HeaderTextView as the first child of the RootContainerUIElement is at
position 0.

boolean firstTime)
{
if (firstTime) {
...
} else if (wdContext.currentUIStateElement().getDoSwapTrays()) {
// Swap Trays if action 'MoveUp' or 'MoveDown' was triggered on the UI
IWDTransparentContainer rootUIElement =
(IWDTransparentContainer) (IWDTransparentContainer) view.getRootElement();
rootUIElement.swapChildren(1, 2);
wdContext.currentUIStateElement().setDoSwapTrays(false);
}
//@@end
}
Dynamically Add a Popup Menu in wdDoModifyView()

If you want to add popup menus to the view layout at runtime you have to apply dynamic view
modification. The related APIs are IWDMenu for menus, IWDMenuActionItems for items in menus,
IWDMenuCheckBox for checkboxes im menus and IWDMenuSeparator for horizontal menu
separators.
The following controller code demonstrates how to create a menu in the wdDoModifyView() hook
method. Three menu items are added to a new popup menu which is associated with the Tray UI
element with id ProductDetailTray by invoking trayMsg.setPopupMenu(popupMenu).
• The first menu item is of type IWDMenuActionItem. Its onAction event is bound to the action
ShowProductTrayAction which displays the hidden product detail tray.
• The second menu item is a UI element of type IWDMenuSeparator.
• The last one is a checkbox menu item of type IWDMenuCheckBox . The context attribute
menuItemSelected of type boolean stores the state of this checkbox. The checked
property of the menu check box is dynamically bound to this context attribute.

boolean firstTime)
{
if (firstTime) {
// === Apply Parameter Mapping to use compatibilityMode='nw04Plus' =====
...
// === Dynamically add popup menu to Message Tray =========================

// create IWDMenu object
IWDTray trayMsg = (IWDTray) view.getElement("ProductDetailTray");
IWDMenu popupMenu =
(IWDMenu) view.createElement(IWDMenu.class, null);
trayMsg.setPopupMenu(popupMenu);
// add menu action item (IWDMenuActionItem)

menuActionItem =
(IWDMenuActionItem) view.createElement(IWDMenuActionItem.class, null);
menuActionItem.setOnAction(wdThis.wdGetShowProductTrayAction());
popupMenu.addItem(menuActionItem);
// add menu separator

IWDMenuSeparator menuSeparator =
(IWDMenuSeparator) view.createElement(IWDMenuSeparator.class, null);
popupMenu.addItem(menuSeparator);
// add menu check box (IWDMenuCheckBox)

IWDMenuCheckBox menuCheckBox =
(IWDMenuCheckBox) view.createElement(IWDMenuCheckBox.class, null);
menuCheckBox.setOnToggle(wdThis.wdGetOnToggleAction());
menuCheckBox.bindChecked(
wdContext.nodeUIState().getNodeInfo().getAttribute(
IPrivatePopupMenuView.IUIStateElement.IS_MENU_ITEM_SELECTED));
popupMenu.addItem(menuCheckBox);
...
} else if (wdContext.currentUIStateElement().getDoSwapTrays()) {
...
}
//@@end
}
7. Related Content
• Ready-to-use popup menu sample application: 41TutWD_PopupMenus.zip.
• This Readme document (PDF 49 KB) describes how to import the sample application into your
NetWeaver Developer Studio.
• Web Dynpro UI Element Reference: MenuBar and PopupMenu

How To Use Web Dynpro Popup Menus

Uploaded by

Document Information

Original Description:

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

How To Use Web Dynpro Popup Menus

Uploaded by

Copyright:

Available Formats

Web Dynpro Foundation For Java SAP NetWeaver 2004s

How to Use Web Dynpro Popup Menus

Figure 1: Screenshots of demo application demonstrating popup menus

2. Creating Component and Context

Create a New Web Dynpro Application and Web Dynpro Component

Input field Value

Define the Controller Context

Programmatically Populate Context with Sample Data

// add collection of node elements to context value node

// ======== Initialize context attribute 'DoSwapTrays' ====================

// ======== Disable certain action objects ====================

3. Designing the View Layout Using Popup Menus

Insert a Popup Menu in a Tray UI Element

ID Type Event .. onAction Action Text

• Define the following menu items in the menu UI element MenuProductTable.

ID Type Event .. onAction Action Text

Supported UI Elements for Popup Menus

4. Applying the Table Selection Behavior nw04Plus

Setting the Product Table Property compatibilityMode=nw04Plus

Define the Action Parameter product

Implement Parameter Mapping in wdDoModifyView()

5. Implementing Action Event Handlers

Action Action Text Action Event Handler

Implement Controller Code

View Controller PopupMenuView.java - Component PopupMenuComp

6. Dynamically Adding Menus to the View Layout

View Controller PopupMenuView.java - Component PopupMenuComp

View Controller PopupMenuView.java - Component PopupMenuComp

Dynamically Add a Popup Menu in wdDoModifyView()

View Controller PopupMenuView.java - Component PopupMenuComp

// === Dynamically add popup menu to Message Tray =========================

// add menu action item (IWDMenuActionItem)

// add menu separator

// add menu check box (IWDMenuCheckBox)

You might also like