tabris.js layout example

layout.js

var page = tabris.create("Page", {
  title: "Hello Layout!",
  topLevel: true
});

tabris.create("Button", {
  id: "btn1",
  text: "Button 1",
  layoutData: {top: 10, left: 10, right: 10}
}).appendTo(page);

tabris.create("Button", {
  id: "btn2",
  text: "Button 2",
  layoutData: {top: ["#btn1", 10], left: 10, right: 10}
}).appendTo(page);

tabris.create("TextView", {
  text: "Lorem ipsum",
  alignment: "center",
  background: "gray",
  layoutData: {top: ["#btn2", 10], bottom: ["#btn3", 10], left: 10, right: 10}
}).appendTo(page);

tabris.create("Button", {
  id: "btn3",
  text: "Button 3",
  layoutData: {bottom: 10, left: 10, right: 10}
}).appendTo(page);

page.open();