Tutorial 10: How to add/remove tree nodes (Part V)

This tutorial is a continuation of “How to add Popup Menu to Tree”. In this tutorial, we are going to add new node to the tree and remove the existing one.

First we will create a new dialog to get node values. Open your tree application that you created on the previous tutorial. Expand “Containers” accordion and click “Dialogs” node under “Windows” node. Click “+” sign to create a new dialog. Enter “newNode” as its name, “350” as its width and “120” as its height and then click OK button.
You will see following XML on editor.

<dialog width="350" height="120"></dialog>

Now we will create new panel that we will include into recently created dialog. Click “Panels” node and click the “+” sign. Enter “newNodePanel” as its name and click the OK button. Include this panel into “newNode” dialog, just like this:

<dialog width="350" height="120">
  <borderLayout>
    <cell docking="Center">
      <include panelName="newNodePanel"/>
    </cell>
  </borderLayout>
</dialog>

We are ready to design the panel UI. We need to add a text field with name “departmentName” that we reference in procedures and two buttons OK and Cancel. Here is xml of the “newNodePanel” panel:

<panel>
	<xyLayout>
		<cell x="150" y="20" width="150">
			<textField name="departmentName" label="Department Name"/>
		</cell>
		<cell x="50" y="50">
			<button label="OK"></button>
		</cell>
		<cell x="160" y="50">
			<button label="Cancel"></button>
		</cell>
	</xyLayout>
</panel>

Let’s create a procedure that will be used to create the action. Connect to your datasource schema and create “newNodeDialog_ok” procedure. In this procedure we will get users input from “departmentName” text field, and use this value to label the newly created tree node.

PROCEDURE NEWNODEDIALOG_OK IS
  v_department_id varchar2(255);
  v_department_name varchar2(255);
  v_node api_treenode.t_node;
BEGIN
  -- get value from textfield
  v_department_name := api_component.getvaluetx('newNodePanel.departmentName');
  -- we generate the ID by using current time
  v_department_id := to_char(systimestamp, 'YYYYMMDD HH24:MI:SS:FF3');

  -- create node object
  v_node := api_treenode.createnode(in_nodedisplayname_tx=>v_department_name,
                                    in_nodekey_tx=>v_department_id);
  -- add created object to tree
  api_tree.addnode(in_paneldottreename_tx=>'mainPanel.tree1',
                   in_parentnodekey_tx=>'DEPARTMENTS',
                   in_node_r=>v_node);

  api_dialog.setvisible(in_dialogname_tx=>'newNode', in_visible_yn=>'N');

END;

And create second procedure “newNodeDialog_cancel” which closes the dialog.

PROCEDURE NEWNODEDIALOG_CANCEL IS
BEGIN
  api_dialog.setvisible(in_dialogname_tx=>'newNode', in_visible_yn=>'N');
END;

Then return back to the Formspider IDE and create two new actions with same name of procedures. And add these actions as “buttonPress” events to the “newNodePanel” panel. Here is the last state of the panel XML:

<panel>
  <xyLayout>
    <cell x="150" y="20" width="150">
      <textField name="departmentName" label="Department Name"/>
    </cell>
    <cell x="50" y="50">
      <button label="OK">
        <events>
          <buttonPress action="newNodeDialog_ok"/>
        </events>
      </button>
    </cell>
    <cell x="160" y="50">
      <button label="Cancel">
        <events>
          <buttonPress action="newNodeDialog_cancel"/>
        </events>
      </button>
    </cell>
  </xyLayout>
</panel>

Now, since our dialog is ready, we should prepare events and actions to let this dialog to be shown. Connect again to your datasource schema and create “newNode” procedure. In this procedure, we will clear content of the textfield and show the dialog “newNode”. Here is the content of the procedure:

PROCEDURE NEWNODE IS
BEGIN
  api_component.setvalue(in_paneldotcomponentname_tx=>'newNodePanel.departmentName',
     in_value_tx=>null);
  api_dialog.setvisible(in_dialogname_tx=>'newNode', in_visible_yn=>'Y');
END;

And create another procedure named “removeNode”. This procedure will remove right clicked node from the tree. For simplicity we don’t ask users for validation, it is just a tutorial, nobody gets hurt anyway. Here is the content of the procedure:

PROCEDURE REMOVENODE IS
BEGIN
  api_tree.removenode(in_paneldottreename_tx=>'mainPanel.tree1',
                      in_nodekey_tx=>api_tree.getrightclickednodekey('mainPanel.tree1'));
END;

Let’s return back to Formspider IDE, create new actions with the same name recently created procedures “newNode” and “removeNode”.
Remember the popup menu that we created in the previous tutorial. Load this one by double clicking on its name on the “Miscellaneous” tree. Now we need to add new events and corresponding actions to the menu items.
Here is the content of the popup menu afterwards:

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

We are ready to run the application. Click the Run button or press the F7 key. You may add new nodes and remove existing ones by right clicking any node on the tree. Every time you add new node to Departments, it will be added to top of the tree.This behaviour is also editable but let’s keep it simple for now. Here is the preview of the application:

Preview of the application