:: Forum >> Version 2 >>

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 
mnnlenitems;
            
mlen TREE_DS.length;
            for (
m in TREE_DS) {
                
items TREE_DS[m];
                
nlen items.length;
                for (
0nlenn++) {
                    
TREE_LOOKUP[items[n]] = {m:mn:n};
                }
            }
        }
        return 
TREE_LOOKUP;
    }


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

    function 
clicked(eventindex){
        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 
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
            
child.call(this);
            if (
!= null) {
                return 
i
            
}
        }
        var 
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.1;
            if (
nextIdx items.length) {
                return 
items[nextIdx];
            }
            
lookup.m;
        }
        return 
this.getCurrentItem();
    }

    function 
previous(event){
        if (
event.keyCode == 37) {     // left arrow
            
return parent.call(this);
        }
        var 
this.getCurrentItem();
        var 
treeLookup getTreeLookup();
        var 
lookup treeLookup[i];
        if (
lookup == null) {
            return 
this.getCurrentItem();
        }
        var 
items TREE_DS[lookup.m];
        var 
prevIdx lookup.1;
        if (
prevIdx 0) {
            return 
lookup.m;
        }
        else {
            while (
true) {
                
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 
this.getCurrentItem();
        if (
hasChildren(i) == true && this.getViewExpanded(i) == true) {
            
this.setViewExpanded(falsei);
            return 
i;
        }
        var 
treeLookup getTreeLookup();
        var 
lookup treeLookup[i];
        if (
lookup == null) {
            return 
i;
        }
        return 
lookup.== 0 ? i lookup.m;
    }

    function 
child(){
        var 
this.getCurrentItem();
        if (
hasChildren(i) == true && this.getViewExpanded(i) == true) {
            return 
null;
        }
        
this.setViewExpanded(truei);
        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 (
!= this.getCurrentItem()){this.setCurrentItem(i)}
    }

    function 
f(actionitem){
        return function(
eventindex){
            var 
item.call(thiseventindex);
            
AW.setReturnValue(eventfalse);
            if (
event && event.type == "mousedown"){
                
this.setTimeout(function(){
                    if (
this.$active){
                        
action.call(thisi);
                    }
                });
            }
            else {
                if (
this.$active){
                    
action.call(thisi);
                }
            }
            
event null;
        }
    }

    return {

        
gotoClickedItem:    f(goclicked),
        
gotoPreviousItem:    f(goprevious),
        
gotoNextItem:        f(gonext),
        
gotoFirstItem:        f(gofirst),
        
gotoLastItem:        f(golast),

        
selectClickedItem:    f(selectclicked),
        
selectPreviousItem:    f(selectprevious),
        
selectNextItem:        f(selectnext),
        
selectFirstItem:    f(selectfirst),
        
selectLastItem:        f(selectlast),

        
toggleClickedItem:    f(toggleclicked),
        
toggleCurrentItem:    f(togglecurrent)

    };

})();

var 
TREE_DS = {
        
0: [1234],
        
1: [5610],
        
2: [713],
        
3: [8],
        
4: [9],
        
10: [1112],
        
13: [141516]
};
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(400600);
    
document.write(TREE_CTL);
}

createTree();
</
script>
</
body>
</
html>

 
Bryn
Monday, April 16, 2007
Great stuff! Thanks a lot.
Alex (ActiveWidgets)
Monday, April 16, 2007



This topic is archived.

Back to support forum

Forum search