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.setName("Product 2"); product.setPrice("849,00"); product.setProductId("PRD-4711"); product.setQuantity(12); product.setDetails("Detailed description of product 2"); products.add(product); product = wdContext.createProductsElement(); product.setName("Product 3"); product.setPrice("0,89"); product.setProductId("ZR-0124"); product.setQuantity(1000); product.setDetails("Detailed description of product 3"); products.add(product); product = wdContext.createProductsElement(); product.setName("Product 4"); product.setPrice("1,15"); product.setProductId("ZR-1454"); product.setQuantity(1000); product.setDetails("Detailed description of product 4"); products.add(product); // 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) /** 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) String productId = product.getProductId(); wdContext.nodeProducts().removeElement(product); wdComponentAPI.getMessageManager() .reportSuccess("Product " + productId + " was sucessfully deleted."); wdContext.currentContextElement().setProductDetail(""); //@@end } //@@begin javadoc:onActionShowProductDetails(ServerEvent) /** Declared validating event handler. */ d//@@en public void onActionShowProductDetails( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent, 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) /** Declared validating event handler. */ //@@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) /** Declared validating event handler. */ d//@@en public void onActionShowProductTray( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionShowProductTray(ServerEvent) wdContext.currentUIStateElement().setProductTrayVisibility( WDVisibility.VISIBLE); wdThis.wdGetShowProductTrayAction().setEnabled(false); //@@end } //@@begin javadoc:onActionMoveUp(ServerEvent) /** Declared validating event handler. */ //@@end public void onActionMoveUp( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionMoveUp(ServerEvent) wdThis.wdGetMoveUpAction().setEnabled(false); wdThis.wdGetMoveDownAction().setEnabled(true);



wdContext.currentUIStateElement().setDoSwapTrays(true); //@@end } //@@begin javadoc:onActionMoveDown(ServerEvent) /** Declared validating event handler. */ //@@end public void onActionMoveDown( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionMoveDown(ServerEvent) wdThis.wdGetMoveUpAction().setEnabled(true); wdThis.wdGetMoveDownAction().setEnabled(false); wdContext.currentUIStateElement().setDoSwapTrays(true); //@@end }

6. Dynamically Adding Menus to the View Layout Swap Tray UI Element Containers in wdDoModifyView()

2

1

0

RootUIElementContainer

swapChildren(1,2)

Within the action event handlers onActionMoveDown() and onActionMoveUp()we set the context attribute UIState.DoSwapTrays to true.


//@@begin javadoc:onActionMoveDown(ServerEvent) /** Declared validating event handler. */ //@@end public void onActionMoveDown( com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent ) { //@@begin onActionMoveDown(ServerEvent) wdThis.wdGetMoveUpAction().setEnabled(true); wdThis.wdGetMoveDownAction().setEnabled(false); wdContext.currentUIStateElement().setDoSwapTrays(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.


public static void wdDoModifyView( IPrivatePopupMenuView wdThis, IPrivatePopupMenuView.IContextNode wdContext, com.sap.tc.webdynpro.progmodel.api.IWDView view, boolean firstTime) { @@begin wdDoModifyView // 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.


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' ===== ... // === 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


https://www.sdn.sap.com/irj/sdn/softwaredownload?download=/irj/servlet/prt/portal/prtroot/com.sap.km.cm.docs/business_packages/a1-8-4/41TutWD_PopupMenus.zip

http://help.sap.com/saphelp_nw2004s/helpdata/en/de/416d42ab7fd142e10000000a1550b0/frameset.htm

how to use web dynpro popup menus

Documents

component popupmenucomp begin javadoc

web dynpro foundation

table cell editors

tables lead selection

clicked node element

sap netweaver 2004s

parameter mapping relation

action event handler