My favorites | Sign in
Project Home Downloads
READ-ONLY: This project has been archived. For more information see this post.
Search
for
UpdateToVersion05  
Migration hints for updating from 0.4 to 0.5.
Updated Sep 27, 2010 by moo...@wwwendt.de

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);
    },
           [...]
Powered by Google Project Hosting