CS 549, Spring 2007
Assignment #4
(due on April 30, Monday)

You may work on this assignment as a group. If anything does not work as described here, notify the instructor immediately. Each student must complete at least one task.

  1. Before your start working on this assignment, do the following:
      cd ~/public_html/ms_apps_cs440/framework_v3
      cvs up -d
      cd ~/public_html/ms_apps_cs440/web_gen
      cvs up -d
      cd ~/public_html/ms_apps_cs440/treeview
      cvs up -d
      cd ~/public_html/ms_apps_cs440/mantis
      cvs up -d
    
  2. Generate a treeview for a hierarchy of tables in your database. In order to create a treeview with the records in table xxxx at the top level of the treeview, you need to generate configuration files xxxx_tree.mconfig and xxxx_tree.config and then generate treeview script xxxx_tree.phtml with the following commands:
      treemconfgen -f xxxx
      treeconfgen  -f xxxx
      treegen_v2   xxxx_tree
    
    Execute these commands in a subdirectory of forms_mysql where scripts for table xxxx are stored.

    1. WebGen command treemconfgen retrieves the tables that can be recursively reached by one-many links from table xxxx. Table names retrieved from the database metadata are listed as an array in file xxxx_tree.mconfig generated. You may edit xxxx_tree.mconfig, keeping only those tables whose data are displayed in the treeview.

    2. WebGen command treeconfgen generates configuration file xxxx_tree.config from xxxx_tree.mconfig. File xxxx_tree.config provides for each treeview layer such information as the name of the table, the primary key, the parent key, the image associated with a treeview node, and the links for the actions.

    3. WebGen command treegen_v2 generates a treeview script xxxx_tree.phtml from xxxx_tree.config.

    4. The image files used by the treeview script can be copied from directory forms_mysql/data_admin2/images with command cp -r ../data_admin2/images .

  3. (Not an assignment task) Test treeview script mantis_project_table_tree_v2.php in ~/public_html/ms_apps_cs440/mantis/forms_mysql/treeview_ajax by opening it with URL
      http://~your-login-name/ms_apps_cs440/mantis/forms_mysql/treeview_ajax/
             mantis_project_table_tree_v2.php
    
    Then study the following scripts:

    1. zdata_admin_tree.html -- test script showing how to access nodes and attributes and how to display and hide nodes.

    2. mantis_project_table_tree_v2.php -- main application script executed on the server

    3. mantis_project_table_tree_node_v2.php -- server-side script that generates HTML elements for children nodes

    4. scripts_v2.js -- creates AJAX requests for the application

    5. ajax.js -- handles AJAX requests and responses

  4. Show the number of child nodes of each tree node correctly by adding an SQL statement select count(*) from ... to mantis_project_table_tree_node_v2.php.

  5. Switch correctly the icons used when a node is expanded and closed. You may study the icons used by the data admin treeview.

  6. Allow the treeview to be refreshed manually when the tables accessed by the treeview are modified.

    1. We must first record the values of this_node_type and pkey of each node expanded. The attributes of each treeview node is stored as
        <div this_node_type = MANTIS_PROJECT_FILE_TABLE pkey = 10
             text = Mantis_bugnote_table level = 2>
      
      You can obtain the value of attribute this_node_type with DOM method call
        obj.getAttribute("this_node_type")
      
    2. Expand the recorded nodes again, starting with the root node. When each node is expanded, obtain updated data from the database.

  7. Add vertical lines that link the open/close images for the nodes at each level.

    1. The vertical line of each level must stop at the last node. When you are drawing a node for a node in level N, you must know the preceding levels still open.

      1. Indicate the last treeview-node element of each level with attribute last_node as
          <div this_node_type = MANTIS_PROJECT_FILE_TABLE pkey = 10
               text = Mantis_bugnote_table level = 2 last_node=true>
        
        You can obtain the value of this attribute with DOM method call
          obj.getAttribute("last_node")
        
      2. Provide for the HTML element of each node attribute levels_ended which is a string of 0s and 1s. For example, levels_ended="1010" for a fourth-level node indicates that vertical bars are needed only for levels 1 and 3, implying that the additional nodes of these levels are drawn below the current node. You can set a value of attribute levels_ended with DOM method call obj.setAttribute("levels_ended", "bb...b").

      3. When a new node is created under a node whose levels_ended=bb...b, the levels_ended for the new node should be bb...b0 if the new node is not the last node at the current level. Otherwise, it should be bb...b1.

      4. When a new node is drawn, the image used at the vertical-bar position of each higher level should be a bar if the last node of that level has already been drawn. Otherwise it should be a white image.

  8. Given a node type and a primary key value, expand the treeview to that level.

  9. If you want to work on your own treeview. You can generate it as follows.

    1. Create new subdirectory yyyy_ajax under forms_mysql, where yyyy is an old category name.

    2. Generate treeview configuration file xxxx_tree.config for table xxxx as described earlier.

    3. Copy mantis_project_table_tree_v2.php to xxxx_tree_v2.php and edit it.

    4. Generate xxxx_tree_node_v2.php with command treegen_ajax xxxx.