1

I have written code for a terminal UI application using blessed package in NodeJS which contains 2 forms, say form1 and form2 with some widgets like list and checkboxes in each form. So how can I navigate between the forms with keyboard? 

var blessed = require('blessed');

// Create a screen object.
var screen = blessed.screen({
  smartCSR: true
});
screen.title = 'my window title';
var parentform = blessed.form({
  parent: screen,
  keys: true,
  left: 0,
  top: 2,
  width: 80,
  height: 50,
  // bg: 'green',
  content: '',
  border:{
    type:'line'
  },
  style:{
    border:{
      fg:'green',
      bg:'green'
    }
  }
});

var list = blessed.List({
  top:2,
  left:'center',
  parent:parentform,
  height:8,
  width:20,
  mouse:true,
  keys:true,
  items:["abc","xyz","123","456"],
  border:{
    type:'line'
  },
  style:{
    selected:{
      bg:'blue',
      fg:'white'
    },
    item:{
      bg:'white',
      fg:'blue'
    },
    // focus:{
    //   bg:'red'
    // }
  }
});

var parentform_cb1 = blessed.Checkbox({
  parent: parentform,
  top:12,
  left:10,
  content:"cb1",
  height:1,
  width:12,
  // bg:'white',
  mouse:true
});

var parentform_cb2 = blessed.Checkbox({
  parent: parentform,
  top:14,
  left:10,
  content:"cb2",
  height:1,
  width:12,
  // bg:'white',
  mouse:true
});

var parentform_cb3 = blessed.Checkbox({
  parent: parentform,
  top:16,
  left:10,
  content:"cb3",
  height:1,
  width:12,
  // bg:'white',
  mouse:true
});

var parentform_cb4 = blessed.Checkbox({
  parent: parentform,
  top:18,
  left:10,
  content:"cb4",
  height:1,
  width:12,
  // bg:'white',
  mouse:true
});

var parentform_cb5 = blessed.Checkbox({
  parent: parentform,
  top:20,
  left:10,
  content:"cb5",
  height:1,
  width:12,
  // bg:'white',
  mouse:true
});

var form2 = blessed.form({
  parent: screen,
  keys: true,
  left: 90,
  top: 2,
  width: 80,
  height: 50,
  content: '',
  mouse:true,
  scrollable:true,
  scrollbar: {
      style: {
        bg: 'blue'
      },
    },
  border:{
    type:'line'
  },
  style:{
    border:{
      fg:'green',
      bg:'green'
    }
  }
});

var form2_cb1 = blessed.Checkbox({
  parent: form2,
  top:4,
  left:4,
  content:"form2 cb2",
  height:1,
  width:18,
  mouse:true
});

screen.key(['escape', 'q', 'C-c'], function(ch, key) {
  return process.exit(0);
});

list.focus();

screen.render();

Currently I am able to do it with a mouse, but how can i do it with keyboard?

Jaikishan Ventrapragada
  • 33
  • 6

1 Answers1

0

To navigate between the forms you can simply, attach a key event to the last checkbox item of form1 and the checkbox item of form2.


parentform_cb5.key(["tab"], function (ch, key) {
  // focuses on form 2 when you press tab
  form2.focusNext();
});

form2_cb1.key(["tab"], function (ch, key) {
  // focuses back on the screen when you press tab
  screen.focusNext();
});
Ankur Datta
  • 161
  • 2
  • 6