Use the class ClientStateTreeDataProxy to make the tree component interactive. This proxy keeps track of the expanded/collapsed state of the tree by setting up the expand and collapse destinations. Use the proxy attribute to set the proxy to be used on a tree component.
When a node is in the collapsed state, the value associated with the 'expandDestination' key is used as the destination to expand the node. When a node is in the expanded state, the value associated with the 'collapseDestination' key is used as the destination to collapse the node.
When using ClientStateTreeDataProxy, the state of the tree is kept on the client. The proxy sets the expand/collapse destinations such that the following name-value pairs are sent to the server when a node is expanded or collapsed:
The value of 'event' is the name of a UIX Servlet event. Note that the value is 'expand' whether or not a node is being expanded or collapsed. The value of 'source' is the value set for the ID attribute. The values associated with 'node', 'state', and 'selection' are used at the server to create a new proxy. You must get the values and pass these values to the ClientStateTreeDataProxy constructor, as shown in an example later.
If you set up the tree with the proper state and then use the ClientStateTreeDataProxy constructor that takes null for the tree state, the proxy will attempt to pull the expanded/collapsed state from the node data. So, to have a tree opened up to a specific node by default, you need only set the nodes along the path to the root to be expanded, as shown in an example later.
The following example requires Java code, which is shown after the UIX XML code.
Example:
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:data="http://xmlns.oracle.com/uix/ui"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<dataScope xmlns="http://xmlns.oracle.com/uix/ui">
<contents>
<!-- UIX Components -->
<form name="myForm" >
<contents>
<tree id="tree"
formSubmitted="true"
nodes="${data:data().Nodes.nodes}"
proxy="${TreeProxy.proxy}"/>
</contents>
</form>
</contents>
<!-- Data -->
<provider>
<data name="TreeProxy"><method class="oracle.cabo.doc.demo.DataTrees"
<method="getTreeProxy"/>
</data>
<data name="data:Nodes">
<inline>
<nodes text="Shop"
destination="http://www.oracle.com"
expandable="expanded">
<nodes text="Books"
destination="http://www.oracle.com"
expandable="expanded">
<nodes text="Sale"
destination="http://www.oracle.com"
expandable="expanded">
<nodes text="Paperbacks"
destination="http://www.oracle.com" />
</nodes>
<nodes text="Fiction"
destination="http://www.oracle.com"/>
<nodes text="Nonfiction"
destination="http://www.oracle.com"/>
</nodes>
<nodes text="Hardware"
expandable="expanded">
<nodes text="Desktops"
destination="http://www.oracle.com"/>
<nodes text="Notebooks"
destination="http://www.oracle.com"/>
</nodes>
</nodes>
</inline>
</data>
</provider>
</dataScope>
</contents>
</body>
</ctrl:content>
<!-- UIX Controller -->
<ctrl:handlers xmlns="http://xmlns.oracle.com/uix/controller">
<event name="expand">
<method class="oracle.cabo.doc.demo.DataTrees"
method="expandEventHandler"/>
</event>
</ctrl:handlers>
</ctrl:page> The following code examples show the two methods used in the UIX XML code above. All subsequent examples use these same methods. The first method is the getTreeProxy method, which returns a DataObject that returns a proxy.
Example:
public static DataObject getTreeProxy(
RenderingContext rc,
String ns,
String name)
{
return new TreeProxyDataObject(null);
}
private static class TreeProxyDataObject implements DataObject
{
public TreeProxyDataObject(
String submitURL
)
{
_submitURL = submitURL;
}
public Object selectValue(
RenderingContext rc,
Object key
)
{
BajaContext bc = BajaRenderingContext.getBajaContext(rc);
EventResult result = EventResult.getEventResult(bc);
Object proxy = (result==null) ? null : result.getProperty("proxy");
if (proxy==null)
proxy = new ClientStateTreeDataProxy( _submitURL, null, null, null);
return proxy;
}
String _submitURL;
}
The expandEventHandler method handles 'expand' events when
they are generated. Note in expandEventHandler you just
pass the values associated with the parameters 'state' (
UIConstants.STATE_PARAM), 'node' (UIConstants.NODE_PARAM
), and 'selection' (UIConstants.SELECTION_PARAM) to a new
ClientStateTreeProxy. This new proxy is set as a property on the
context and is subsequently returned by the TreeProxyDataObject
created in the method above.
Example:
public static EventResult expandEventHandler(
BajaContext context,
Page page,
PageEvent event )throws Throwable
{
String state = event.getParameter(UIConstants.STATE_PARAM);
String node = event.getParameter(UIConstants.NODE_PARAM);
String selection = event.getParameter(UIConstants.SELECTION_PARAM);
EventResult result = new EventResult(page);
Object proxy = new ClientStateTreeDataProxy(null, state, node, selection);
result.setProperty("proxy", proxy);
return result;
} Selection will be handled by the proxy if the constructor that takes a selection parameter is used. Currently the proxy only supports single selection. A node will remain selected (until a new selection is made) even if it is not visible. The selection state is handled through an onClick handler. The example below uses a nodeStamp.
Note: Selection is not available on Netscape when using a proxy.
Example:
<ctrl:page xmlns="http://xmlns.oracle.com/uix/ui"
xmlns:ctrl="http://xmlns.oracle.com/uix/controller"
xmlns:data="http://xmlns.oracle.com/uix/ui"
xmlns:html="http://www.w3.org/TR/REC-html40"
expressionLanguage="el">
<ctrl:content xmlns:ui="http://xmlns.oracle.com/uix/ui">
<body>
<contents>
<dataScope xmlns="http://xmlns.oracle.com/uix/ui">
<contents>
<!-- UIX Components -->
<form name="myForm" >
<contents>
<tree id="tree"
formSubmitted="true"
nodes="${data:data().Nodes.nodes}"
proxy="${TreeProxy.proxy}">
<nodeStamp>
<flowLayout>
<contents>
<checkBox rendered="${uix.current.rendered}"
disabled="${uix.current.disabled}"
checked="${uix.current.checked}"/>
<link destination="${uix.current.destination}" text="${uix.current.text}"/>
</contents>
</flowLayout>
</nodeStamp>
</tree>
</contents>
</form>
</contents>
<!-- Data -->
<provider>
<data name="TreeProxy">
<method class="oracle.cabo.doc.demo.DataTrees"
method="getTreeProxy"/>
</data>
<data name="data:Nodes">
<inline>
<nodes text="Shop"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif" >
<nodes text="Books"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif" >
<nodes text="Sale"
destination="http://www.oracle.com"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif">
<nodes text="Paperbacks"
destination="http://www.oracle.com"
disabled="true" />
</nodes>
<nodes text="Fiction"
destination="http://www.oracle.com"
checked="true"/>
<nodes text="Nonfiction"
destination="http://www.oracle.com"/>
</nodes>
<nodes text="Hardware"
expandable="expanded"
rendered="false"
icon="/docs/devguide/images/data_trees/info.gif" >
<nodes text="Desktops"
destination="http://www.oracle.com"/>
<nodes text="Notebooks"
destination="http://www.oracle.com"/>
</nodes>
</nodes>
</inline>
</data>
</provider>
</dataScope>
</contents>
</body>
</ctrl:content>
<!-- UIX Controller -->
<ctrl:handlers xmlns="http://xmlns.oracle.com/uix/controller">
<event name="expand">
<method class="oracle.cabo.doc.demo.DataTrees"
method="expandEventHandler"/>
</event>
</ctrl:handlers>
</ctrl:page> The background and text change color as a node's check box is clicked.
Working with Navigation Components
Copyright © 1997, 2004, Oracle. All rights reserved.