When updating from version 0.4 to 0.5, the following aspects have changed and may have to be adjusted.
Main Changes:
- Persistence has changed (no longer fires events)
- Support for persistence with lazy trees
- Added a sample web server for lazy trees (written in Python)
- Using jQuery 1.3.2 and jQuery UI 1.7.1
New functions:
- Callback function onPostInit(isReloading, isError)
- tree.reactivate(setFocus)ui.core 1.7.1
- tree.isInitializing()
- tree.isReloading()
- tree.isUserEvent()
- tree.getPersistData()
- Global: getDynaTreePersistData(cookieId, cookieOpts)
- dtnode.getEventTargetType(event)
New options for initAjax:
- addActiveKey
- addFocusedKey
- addExpandedKeyList
Other Changes:
- The default cookie name prefix was changed from 'ui-dynatree-cookie-' to 'dynatree-'.
- The A tag containing the title now has a class name assigned ('ui-dynatree-title')
- _nodeCount starts with 1, so first auto - key is '1'
- tree.initMode was dropped (now tree.phase)
Persistence has changed
When initializing a tree in persist mode, we first check, if existing persistence cookies are found.
In this case we assume re-loading, ignore the source node attributes and override them using the cookie info.
Otherwise we assume first-time initilaizing, read the status from the tree source, and store it into new cookies.
After loading, the 'active' status of a node is restored. But we no longer fire onActivate events. (The only event that may be fired is onFocus.)
In order to generate these events on reload, use the new callback function onPostInit() and tree.reactivate().
Example
onPostInit: function(isReloading, isError) {
// 'this' is the current tree
// isReloading is set, if status was read from existing cookies
// isError is only used in Ajax mode
// Fire an onActivate() event for the currently active node
this.reactivate();
},
onActivate: function(dtnode) {
// Use status functions to find out about the calling context
var isInitializing = dtnode.tree.isInitializing(); // Tree loading phase
var isReloading = dtnode.tree.isReloading(); // Loading phase, and reading status from cookies
var isUserEvent = dtnode.tree.isUserEvent(); // Event was triggered by mouse or keyboard
$("#echoActive").text(dtnode.data.title);
},Support for persistence with lazy trees
The problem with restoring the status of a lazy tree is, that the currently active or selected nodes may not be part of the tree, when it is freshly re-loaded.
The basic idea is to leave it up to the backend webservice to deliver not only the top-level nodes, but also all nodes that are required to display the current status.
For example, it may be neccessary to render 3 parent nodes, if the active node is at level # 4.
The backend may also deliver all child nodes of expanded parents.
Or in selectMode 3 (hierarchical) we may want to send all nodes, that are partly selected.
initAjax (and appendAjax) have 3 new options, that allow to pass the persistence information to the web service handler.
[...]
initAjax: {url: "/ajaxTree",
data: {key: key,
mode: mode,
filter: filter
},
addActiveKey: true, // add &activeKey= parameter to URL
addFocusedKey: true, // add &focusedKey= parameter to URL
addExpandedKeyList: true // add &expandedKeyList= parameter to URL
},
onPostInit: function(isReloading, isError) {
// In lazy mode, this will be called *after* the initAjax request returned.
// 'this' is the current tree
// isReloading is set, if status was read from existing cookies
// isError is set, if Ajax failed
// Fire an onActivate() event for the currently active node
this.reactivate();
},
onActivate: function(dtnode) {
// Use status functions to find out about the calling context
var isUserEvent = dtnode.tree.isUserEvent(); // Event was triggered by mouse or keyboard
$("#echoActive").text(dtnode.data.title);
},
[...]