TPrxTreeView

TPrxTreeView is a tree control implementation for Morifk. Our new Tree View will allow you to build trees of virtually any complexity, even containing HTML and the ability to command other parts of your user interface. It has been optimized to keep its performance sustained even with large trees.

Main features

• Full keyboard navigation.
• Multiple levels of customizability (style sheet, properties, events, etc.).
• Any tree node can contain valid HTML.
• Build the tree either through the control API, or with the help of XML or JSON.
• Performance optimized.
• Multiple selection support (with keyboard navigation, too!).
• Fixed height or elastic sizing based on content.
• Dynamic loading API for huge trees.

A few words about the demo

• The default tree demonstrates a few things, like embedded hyperlinks, user interface commanding (will turn the pages in the Tab control in an event handler), and various icons.
• You can edit this tree or create your own in many ways
  • by building it up node-by-node,
  • by adding complete sub-trees defined in JSON format,
  • by specifying the entire tree in XML or JSON format, or
  • by generating a tree based on some parameters.
• You will notice that using the JSON interface is much faster than the XML interface. This is indeed a good comparison of the JSON v.s. XML support of your browser (see the Log for timing data).
• You will be able to customize many of the node and tree options.
• How to use the Items page:
  • First press “Set Items (XML)” (and be patient;-: it will set up a test tree that is in the editor on the right in XML format.
  • Then press “Get Items (JSON)”: the editor will be filled with the JSON version of the same tree.
  • Careful: press “Clear” below the tree control, to make the tree empty (it is lovely to have so many Clear buttons:-).
  • Now press “Set Items (JSON)”: your tree will be re-built much faster (just look at the log, on some configurations the difference can be 50 fold+!).
  • If you want to get back the original tree, just press “Default content”.
• You will see an example of loading the entire tree from the database if you click on [Load from server] in the Items tab.

Feel free to play with the control and let us know of your findings (either by commenting here or by dropping a mail).

How to install

• Make sure that Morfik 07 is not running.
• You must have obtained up to three archives:
  • PMAP_PannonRexControls_yyyymmdd.zip: containing the PMAP custom controls and utility functions in the PannonRex folder. You must copy the content of this archive (including the folder) into [your Morfik install]\System\Adapters (e.g. “C:\Program Files\Morfik\WebOS v1.1.0.3\System\Adapters)
  • PMAP_PannonRexFrameworkFixes.zip: containing some fixes to the Morfik Framework to make sure everything will work correctly. The files contained in this archive are © Copyright 2000-2007 Morfik Technology Pty. Ltd. and are provided in accordance to your license of Morfik 07. We always try to keep these files up-to-date, and you will find sob-folders in the archive that correspond to various releases of Morfik 07. You can copy the files directly into [your Morfik install]\System\Framework, or do a diff (PannonRex fixes are marked with !PRX! comments) if you are in doubt. We always work hard with Morfik to fold these changes back into the official Morfik 07 distribution to make things simple for you. Right now all our changes are included in the official Morfik framework (this may change from time to time, though :-).
  • PMAP_TreeViewDemo_yyyymmdd.zip: containing the demo application that is also available in Morfik Labs, but together with the source code. You can copy this into your Projects folder.
• If you start Morfik 07, you now should see the new controls in the Toolbox toolbar.

How to upgrade

• exit the Morfik IDE
• copy the PannonRex controls and the demo to the appropriate place (see above under Installation)
• make sure you do Project / Clear Compiler Cache before compiling (it sometimes happened that we had compilation errors after this step; restarting Morfik and doing this step again helped, though)
• if you already used the tree control and we made changes to the property list, then some manual work is needed (Morfik does not handle property changes in Adapted controls):
  • make a backup of your project
  • (a) safe way:
    • open those forms where you used the control in Morfik
    • make a (mental or paper) note of all the properties and events of the control
    • delete the control
    • add a new control and set all properties and event handlers
    • (as an alternative: don’t delete the original control first, just make room for the new one, add it, and then copy all properties and events, then delete the old control, re-position the new, and set the name of the control)
  • (b) guru way:
    • open those forms where you used the control in a text editor (NOT in Morfik)
    • search for “PrxTreeView” to find the tree control
    • make the necessary changes (e.g. add the following line: <item>’SelectionColor:String=Red’</item>, if a new property named “SelectionColor” was added)
    • save your work
• now start the IDE and verify that everything is all right
• you are ready

Properties

TPrxTreeView is an AdaptedControl, so it has all the properties as a typical AdaptedControl would have, and in addition in the Configuration sub-tree (on the Format page of the Properties sheet) you will find the following properties:

• ButtonWidth: the width of the minus/plus icon button on the left of each node in pixels
• OpenedIcons: if True then expanded nodes will display different icons (e.g. an opened book; see TPrxTreeNode.Icon and TPrxTreeNode.IconOpened for more details)
• FontColor, FontName, FontSize, FontStyle, FontWeight (Font during run-time): describe the font to be used
• HideSelection: if True and the control loses focus, the selection marker will be hidden (to not to confuse the user)
• HotTrack: if True, then hovering over nodes with the mouse pointer will highlight those nodes
• IconMinus, IconPlus: the name of the image files to be used for the Minus and Plus icons (the files must be located in the repository)
• Icons: in this string property you can specify the image files that you want to use as icons in the tree (the format is: “Icon1=folder.gif”,”Icon2=folderopen.gif”, etc.; the files must be located in the repository)
• Indent: the tree node–child node indentation value in pixels
• ItemsJSON, ItemsXML: you can assign JSON or XML format tree descriptions to these properties to replace the current tree (see the source code and demo for syntax information)
• ItemStyleClass, SelectedItemStyleClass: you can specify which CSS classes to use for normal and selected nodes
• MultiSelect: Will allow selection of multiple nodes with Ctrl+Click or Enter; the selected nodes can be retreived with the Selected (single selection) and SelectionCount and Selections[] run-time properties
• Scrollable: if False, the tree control will grow/shrink in size to accomodate the content (”fluid” operation)
• ShowButtons: if False, then the minus/plus icons will not be shown and the user icons will act like the minus/plus icons (i.e. users will be able to expand/collapse the tree by clicking on these icons)
• SupportDynamicLoading: if True, then the you can implement dynamic loading of sub-trees in the ItemExpanded event handler
• Items: this run-time property will allow you to access and manipulate the tree programmatically (see TPrxTreeNodes for more details)
• SelectionColor: will set the color of the selection bar

Events

Beyond the standard AdaptedControl events you will find the following properties in the ConfigurationEvent sub-tree (on the Event page of the Properties sheet):

• ControlReady: will be fired when the initialization of the control is finished
• ItemAddition: will be fired when a node is added to the tree
• ItemExpanded: will be fired when a node is expanded (suitable for implementing dynamic loading of sub-trees)
• SelectionChanged: will be fired when the selection changes
• TreeProgress: diagnostic event; will be fired upon several internal events (do not use)

Methods

The following member methods can be useful:

• FullExpand: will expand all nodes in the tree
• FullCollapse: will collapse all nodes in the tree
• MakeNodeVisible: will scroll the tree so that the node becomes visible (only if Scrollabe is True)

Issues

• We last tested all this with Morfik 1.1.0.4 but should work with all 1.0.1.x and up versions.
• When you put a tree control on your form and then want to save it, you may get an error message “Referenced method does not exist. Remove the reference?”. Please answer Yes. This is a Morfik issue.
• If you turn on “Obfuscate JavaScript” in Project Options, then you may get JavaScript run-time errors when the application starts. Turning on “Optimize JavaScript” may or may not remedy this. This is a Morfik issue (they sometimes generate faulty code from inline JavaScript functions). It may also happen that you get such errors after an incremental compile. A full re-build may help (Project/Clear Compiler Cache). In general we recommend to turn on both flags in production environments for performance and security reasons. We fixed this issue by replacing single line comments with block comments.