Exploring ToolBar UI in Webdynpro Java

Agenda:

This document explores the ToolBar UI and also how UI elements like ToolBarPopin ,TextBar and ToolBarLinktoAction can be implemented inside it.

Approach:

Step 1:Create a Webdynpro Java DC shown as follows:

Step 2:Go to the component Controller :UI2Comp –>Click on the Context tab and create two nodes shown as follows:

Node CTX_VN_Table will have three attributes namely

CTX_VA_Address-Datatype String

CTX_VA_EmpId-Integer

CTX_VA_Name-String

Node CTX_VN_Visibility will have two context attributes namely-

CTX_VA_PopInVisible-Datatype-UIElementDefinitions.Visibilty

CTX_VA_ToolBarVisible-Datatype-UIElementDefinitions.Visibility

Step 3:Goto the view UI2CompView where in in the outline View Insert UI Elements as follows

Note :In the above figure please note that the TEXTBAR UI element is only available when inserted inside the ToolBarPopin UI Element.If tried to add individually or outside the popin Such an UI element is not available.

Also we have the UI element ToolBarLinkToAction as a ToolBarRightItem signifying the concept that these UI elements are in relevance to ToolBar Ui and when implemented will be aligned to the right hand side of the ToolBar UI.

3.1The TextBar UI Element Properties are as follows:

3.2 The ToolBarLinkToAction UI element property needs to be set as follows:

Go to the Events Property of the UI and create an Event: OpenPopin as displayed below:

In the java Editor of the view ,write the following code:

//GLOBAL declarations

  //@@begin others

  int g_count=0;

  int g_popin=0;

  //@@end

On the event :OpenPopin

public void onActionOpenPopin(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionOpenPopin(ServerEvent)

        if(g_count==1)

        {

        wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_ToolbarVisible(WDVisibility.VISIBLE);

        g_count=0;

        }

        else if(g_count==0)

        {

              wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_ToolbarVisible(WDVisibility.NONE);

              g_count=1;

        }

    //@@end

  }

3.3 The ToolBarPopin properties are set as follows:

The Visibility property should be bound to the context attribute:CTX_VA_ToolBarVisible

3.4 The toolbar LinktoAction properties to be set as follows:

Goto the Events Tab of ToolBarLinkToAction and create an Event: OpenTable

In the java Editor of the view ,write the following code:

public void onActionOpenTable(com.sap.tc.webdynpro.progmodel.api.IWDCustomEvent wdEvent )

  {

    //@@begin onActionOpenTable(ServerEvent)

        if(g_popin==1)

        {

        wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_PopinVisible(WDVisibility.VISIBLE);

        g_popin=0;

        }

        else if(g_popin==0)

        {

              wdContext.nodeCTX_VN_Visibility().currentCTX_VN_VisibilityElement().setCTX_VA_PopinVisible(WDVisibility.NONE);

              g_popin=1;

        }

    //@@end

  }

3.4 The Table UI should be set as follows:

Step 5:Deploy the DC and run the application:

When the page loads:

Clicking on Open This Link:

Clicking on Click Here To View the table

In the same way as the ToolBarLinkToAction is used we can use ToolBarLinkToUrl,ToolBarDropDownByKey and ToolBarDropdownByIndex.