Ultra Light Client Guide and Reference

Working with Tree Model parts

The Tree Model part stands in for an object hierarchy. Like the Form Model part, the Tree Model part defers changes in the UI until explicitly sent to the application server. In the example below, Tree Model is used to arrange a list of Customer objects in a tree view:
Tree view

The root node of the tree is a CustomerList object that contains a collection of Customer instances. Each Customer instance contains a Name instance and a collection of Address instances (as homeAddress and workAddress). Lazy loading at each step into the tree provides a basic demonstration of how this works.

To use the Tree Model part, follow this process:

Connecting up the parts

As shown in the previous illustration, the customer-list view is a ULC visual part to which Tree, Tree Model, and CustomerList parts have been added. CustomerList (shown here as SomeCustomers) is a standard Smalltalk class.

To associate the "real" object with the Tree Model part, connect the self attribute of the SomeCustomers part with the model attribute of the Tree Model part.

To associate the Tree Model part with the tree view, connect the self attribute of the Tree Model part with the treeModel attribute of the Tree part.

Setting the Tree Model part

In setting the Tree Model part, you specify the names of the accessors that specify the methods used to traverse and display the tree. An example follows:
Property sheet for Tree Model

These accessors are implemented in CustomerList as follows:

getRootNode
	"answers root"
 
	^self
 
getChildrenFor: aNode
	"answers how to get branch of tree"
 
	^aNode children
 
getNameFor: aNode
	"answers how to get displayable node name"
 
	^ aNode nodeLabel
 
getNumberOfChildrenFor: aNode
	"answers how to get size of tree branch"
 
	^aNode numberOfChildren
 
getIconFor: aNode
	"answers how to get icon for displaying node"
 
	^aNode icon
 

Implementing methods to support the tree view

Now implement the messages sent to aNode. The Tree Model part cannot handle a heterogeneous set of accessors, so the technique for making this work is to implement these methods polymorphically for CustomerList, Customer, and Address. Because there is only one root node, the getRootNode method is not implemented elsewhere in the tree.

The remaining implementations for CustomerList follow:

children
	"polymorphic method to access child nodes.
    customers is an instance variable of type OrderedCollection"
 
	^self customers
 
nodeLabel
	"polymorphic method to provide the name of the node "
	
	^'Customers'
 
numberOfChildren
	"polymorphic method to provide the size of tree"
 
	^ self customers size
 
icon
	"polymorphic method to provide icon for tree view"
 
	^UlcSharedResource named: 'treeIcon' 
      ifAbsent: [UlcIcon fromFile: 'bitmaps/red-ball.gif']
 

Implementations for Customer follow:

children
	"polymorphic method to access child nodes.
    addresses is an instance variable of type OrderedCollection"
 
	^self addresses
 
nodeLabel
	"polymorphic method to provide the name of the node.
    nameString, a string accessor for the embedded Name instance,
    is exposed to the public interface of Customer"
 
	^self nameString
 
numberOfChildren
	"polymorphic method to provide the size of tree.
    In this example, only two addresses are supported"
 
	^2
 
icon
	"polymorphic method to provide icon for tree view"
 
	^UlcSharedResource named: 'customerIcon'
      ifAbsent: [UlcIcon fromFile: 'bitmaps/green-ball.gif']
 

Implementations for Address follow:

children
	"polymorphic method to access child nodes.
    nil means the end of the tree"
 
	^nil
 
nodeLabel
	"polymorphic method to provide the name of the node.
    addressString is a string accessor for Address instances"
 
	^self addressString
 
numberOfChildren
	"polymorphic method to provide the size of tree"
 
	^0
icon
	"polymorphic method to provide icon for tree view"
 
	^UlcSharedResource named: 'addressIcon'
      ifAbsent: [UlcIcon fromFile: 'bitmaps/blue-ball.gif']
 

When complete, the example looks something like this:
Running tree view


[ Top of Page | Previous Page | Next Page | Table of Contents | Index ]