3.2.0

Sample code for AW Tree keyboard navigation attached

This was developed using 2.0.1.

<html>
<head>
    <title>ActiveWidgets Example</title>
    <!-- ActiveWidgets stylesheet and scripts -->
    <link rel="stylesheet" href="../activewidget/runtime/styles/xp/aw.css" type="text/css" />
    <script language="javascript" type="text/javascript" src="../activewidget/runtime/lib/aw.js"></script>
    <style>
    </style>
    <script>
        window.focus();
    </script>

</head>
<body>
<script>

MyActions = (function(){

    function getTreeLookup(){
        if (TREE_LOOKUP == null) {
            TREE_LOOKUP = {};
            var m, n, nlen, items;
            mlen = TREE_DS.length;
            for (m in TREE_DS) {
                items = TREE_DS[m];
                nlen = items.length;
                for (n = 0; n < nlen; n++) {
                    TREE_LOOKUP[items[n]] = {m:m, n:n};
                }
            }
        }
        return TREE_LOOKUP;
    }


    function hasChildren(i){
        return TREE_DS[i] != null && TREE_DS[i].length > 0;
    }

    function clicked(event, index){
        return index;
    }

    function current(){
        return this.getCurrentItem();
    }

    function first(){
        return 1;
    }

    function last(){

        var items = TREE_DS[0];
        var treeLookup = getTreeLookup();
        while (items != null && items.length > 0) {
            var i = items[items.length - 1];
            if (hasChildren(i) && this.getViewExpanded(i) == true) {
                var lookup = treeLookup[i];
                if (lookup == null) {
                    return i;
                }
                items = TREE_DS[items[lookup.n]]
            }
            else {
                return i;
            }
        }
        return this.getCurrentItem();

    }

    function next(event){
        var i;
        if (event.keyCode == 39) {    //right arrow
            i = child.call(this);
            if (i != null) {
                return i
            }
        }
        var i = this.getCurrentItem();
        if (hasChildren(i) && this.getViewExpanded(i) == true) {
            return TREE_DS[i][0];
        }
        var treeLookup = getTreeLookup();
        while (true) {
            var lookup = treeLookup[i];
            if (lookup == null) {
                return this.getCurrentItem();
            }
            var items = TREE_DS[lookup.m];
            var nextIdx = lookup.n + 1;
            if (nextIdx < items.length) {
                return items[nextIdx];
            }
            i = lookup.m;
        }
        return this.getCurrentItem();
    }

    function previous(event){
        if (event.keyCode == 37) {     // left arrow
            return parent.call(this);
        }
        var i = this.getCurrentItem();
        var treeLookup = getTreeLookup();
        var lookup = treeLookup[i];
        if (lookup == null) {
            return this.getCurrentItem();
        }
        var items = TREE_DS[lookup.m];
        var prevIdx = lookup.n - 1;
        if (prevIdx < 0) {
            return lookup.m;
        }
        else {
            while (true) {
                i = items[prevIdx];
                if (hasChildren(i) == true && this.getViewExpanded(i) == true) {
                    items = TREE_DS[i];
                    prevIdx = items.length - 1;
                }
                else {
                    return i;
                }
            }
        }
        return this.getCurrentItem();
    }

    function parent(){
        var i = this.getCurrentItem();
        if (hasChildren(i) == true && this.getViewExpanded(i) == true) {
            this.setViewExpanded(false, i);
            return i;
        }
        var treeLookup = getTreeLookup();
        var lookup = treeLookup[i];
        if (lookup == null) {
            return i;
        }
        return lookup.m == 0 ? i : lookup.m;
    }

    function child(){
        var i = this.getCurrentItem();
        if (hasChildren(i) == true && this.getViewExpanded(i) == true) {
            return null;
        }
        this.setViewExpanded(true, i);
        return i;
    }

    function go(i){
        this.setCurrentItem(i);
    }

    function select(i){
        this.setSelectedItems([i]);
        this.setCurrentItem(i);
    }

    function toggle(i){
        this.setItemSelected(!this.getItemSelected(i), i);
        if (i != this.getCurrentItem()){this.setCurrentItem(i)}
    }

    function f(action, item){
        return function(event, index){
            var i = item.call(this, event, index);
            AW.setReturnValue(event, false);
            if (event && event.type == "mousedown"){
                this.setTimeout(function(){
                    if (this.$active){
                        action.call(this, i);
                    }
                });
            }
            else {
                if (this.$active){
                    action.call(this, i);
                }
            }
            event = null;
        }
    }

    return {

        gotoClickedItem:    f(go, clicked),
        gotoPreviousItem:    f(go, previous),
        gotoNextItem:        f(go, next),
        gotoFirstItem:        f(go, first),
        gotoLastItem:        f(go, last),

        selectClickedItem:    f(select, clicked),
        selectPreviousItem:    f(select, previous),
        selectNextItem:        f(select, next),
        selectFirstItem:    f(select, first),
        selectLastItem:        f(select, last),

        toggleClickedItem:    f(toggle, clicked),
        toggleCurrentItem:    f(toggle, current)

    };

})();

var TREE_DS = {
        0: [1, 2, 3, 4],
        1: [5, 6, 10],
        2: [7, 13],
        3: [8],
        4: [9],
        10: [11, 12],
        13: [14, 15, 16]
};
var TREE_CTL = null;
var TREE_LOOKUP = null;

function createTree() {

    TREE_CTL = new AW.UI.Tree;
    TREE_CTL.setController("actions", MyActions);
    TREE_CTL.setItemText(["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16"]);
    TREE_CTL.setItemImage(["", "home", "favorites", "fontsize", "search"]);
    TREE_CTL.setViewCount(function(i){return TREE_DS[i] ? TREE_DS[i].length : 0});
    TREE_CTL.setViewIndices(function(i){return TREE_DS[i]});
    TREE_CTL.setSize(400, 600);
    document.write(TREE_CTL);
}

createTree();
</script>
</body>
</html>
Bryn
April 16,
Great stuff! Thanks a lot.
Alex (ActiveWidgets)
April 16,

This topic is archived.

See also:


Back to support forum