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,