The WebClient TreeView advanced control was designed to work with existing Plex Active/TreeView pattern functions with minimum changes to the action diagram. Read the following for the instructions (note this article was authored by Andrew Leggett, Senior Consultant for ADC Austin. He can be reached at aleggett@adcaustin.com).

For example, you may want to implement a function that looks like this as a page in a browser.

To prepare an existing Active/TreeView or ShowTree function for WebClient.

  1. Attach the WebClientControls group model as a library to your group model. Note this is a separately licensed model.

 

2.  You can now inherit from the WebClient/_Abstract.~TreeView function.


3. If you have existing action diagram code to display a TreeView control, the only addition you will need to make is to add a ‘Go Sub TreeView Refresh’ statement at any point where you need to update the control in the browser.  This subroutine behaves similarly to a ‘Put’ statement.  For a new TreeView function, follow the article ‘Implementing a Tree Control’ in the Plex Help.

4. When exiting the function, make sure you exit with ‘Go Sub Terminate’, as this subroutine inherits the code necessary to cleanly dispose of the tree control in memory

5. If you are displaying images for your tree nodes, you will need to make these available to the web application with the following steps: (Note: the SelectedImage property is not currently supported)

6. In Eclipse, your Web project will contain a ‘WebContent’ folder which contains the run-time resources for your web application.  Create a folder directly under ‘WebContent’ and name it ‘images’ (it is case-sensitive).

  • Copy any bitmaps that your application uses to the ‘images’ folder.

  • The web application is case-sensitive, so you need to ensure that the bitmap names match those in your model.  The Plex TreeView uses Name objects scoped to the Scripts function to get the bitmap names; e.g. MyTreeView.Scripts/FNC option NME/Image 1.  The bitmap name is stored in the literal value of the name object.  Compare these names to the bitmaps in your images folder, and rename the files if appropriate.

To see a worked example of the TreeView pattern, download the WXPCourse61 example model.