Tutorial 10: How to add Popup Menu to Tree (Part IV)

In this part of the tutorial, we are going to create new popup menu and show it when tree nodes are right clicked.

Open the tree application that you created in early parts of this tutorial. Now we are going to create the popup menu, nagivate to “Miscellaneous” tree and locate “Popup Menu” under “Menus” node. Then create a Popup menu named “treePopupMenu”. As you will notice, Formspider IDE automatically loads menu’s XML to the editor. Replace this XML with following one

<popupMenu>
  <menuItem label="New" name="newNode"/>
  <separator/>
  <menuItem label="Remove" name="removeNode"/>
</popupMenu>

Now we defined popup menu with two clickable items ,“New”, “Remove”, and a separator. It is time to show this popup menu.
We are going to register popup menu with tree nodes rightClick event, so when the user right clicks a tree node, we will be able to show popup menu at the same location. To make things more like the real world and a bit complicated, we will try to disable “Remove” menu item, when user right clicks “DEPARTMENTS” node.
First we need to create a procedure in datasource schema. Connect to it by your favourite PL\SQL developer. Create a new procedure named “showPopupMenu” and copy following code to procedure:

PROCEDURE SHOWPOPUPMENU IS
  v_treeName_tx varchar2(255) := 'mainPanel.tree1';
  v_nodekey_tx varchar2(255);
BEGIN
  -- get right clicked node
  v_nodekey_tx := api_tree.getrightclickednodekey(v_treeName_tx);

  -- if it is "Deparments" disable "Remove" menu, otherwise enable it.
  if v_nodekey_tx = 'DEPARTMENTS' then
    api_popupmenu.setmenuitemenabled('treePopupMenu.removeNode', 'N');
  else
    api_popupmenu.setmenuitemenabled('treePopupMenu.removeNode', 'Y');
  end if;

  -- show popup menu
  api_popupmenu.show('treePopupMenu', api_application.getrightclickpoint);
END;

Lets go through the procedure. First we get right clicked node with first API call, api_tree.getrightclickednodekey. We need this node key, since we are going to decide if we should enable/disable “Remove” menu item or not. Later, in the if clause, we check this key and set “Remove” menu item’s property accordingly. Finally, we should display the popup menu on the exact same location, so we use handy “api_application.getrightclickpoint” API and pass it to popup menu’s show api, so it will be popped up on this location.

Now back to the Formspider IDE, create an action with both name and procedure as “showPopupMenu”.

Expand “Containers” accordion and then “Panels” node. Double click “mainPanel” to edit its XML. Tree component “tree1” currently has “expanded” event, add one more event “rightClick”.

<panel>
  <tableLayout>
    <row>
      <cell hAlign="Full" vAlign="Full">
        <tree name="tree1" dataSource="treeDSD1" displayColumn="NAME" nodeKeyColumn="ID">
          <events>
            <expanded action="expandNode"/>
            <rightClick action="showPopupMenu"/>
          </events>
        </tree>
      </cell>
    </row>
  </tableLayout>
</panel>

We are ready to run the application. Click the Run button or press the F7 key. You can right click any node in the application. The “Remove” menu in popup menu will be disabled only for “Departments” node otherwise it will be enabled. Here is the preview of the application.

Preview of the application


On the next tutorial we are going to add new events to popup menu items “New” and “Remove”.