//# Linear Layouts: 
//This is a demonstration of linear layouts
import ui.View as View;
import ui.TextView as TextView;
// test values and helper function
var colorNum = 0;
var colors = [ 'blue', 'red', 'green', 'orange', 'yellow', 'white', 'gray', 'teal', 'purple' ];
var nextColor = function() {
colorNum = (colorNum + 1) % colors.length;
return colors[colorNum];
};
//### Class: Application
exports = Class(GC.Application, function () {
this.initUI = function () {
this.style.layout = 'linear';
this.style.direction = 'vertical';
// build top row
this.topRow = new View({
superview: this,
layout: 'linear',
direction: 'horizontal',
flex: 1
});
// add row button
(new TextView({
superview: this.topRow,
text: 'ADD ROW',
backgroundColor: nextColor(),
layout: 'box',
flex: 1
})).on('InputSelect', bind(this, 'addRow'));
// remove row button (starts hidden)
(new TextView({
superview: this.topRow,
text: 'REMOVE ROW',
backgroundColor: nextColor(),
layout: 'box',
canHandleEvents: false,
flex: 0
})).on('InputSelect', bind(this, 'removeRow'));
};
// show/hide remove row button
this.setRemover = function(isOn) {
var remover = this.topRow.getSubviews()[1];
remover.style.flex = isOn ? 1 : 0;
remover.canHandleEvents(isOn);
};
// add a cell to the current row
this.addCell = function (row) {
var subs = row.getSubviews();
if (subs.length == 1) {
(new TextView({
superview: row,
backgroundColor: nextColor(),
text: 'REMOVE CELL',
layout: 'box',
flex: 1
})).on('InputSelect', bind(this, 'removeCell', row));
} else {
new View({
superview: row,
backgroundColor: nextColor(),
layout: 'box',
flex: 1
});
}
};
// remove a cell from the current row
this.removeCell = function (row) {
var subs = row.getSubviews();
subs[subs.length - 1].removeFromSuperview();
};
// add a row
this.addRow = function () {
this.setRemover(true);
var row = new View({
superview: this,
layout: 'linear',
direction: 'horizontal',
flex: 1
});
(new TextView({
superview: row,
backgroundColor: nextColor(),
text: 'ADD CELL',
layout: 'box',
flex: 1
})).on('InputSelect', bind(this, 'addCell', row));
};
// remove a row
this.removeRow = function() {
var rows = this.getSubviews();
if (rows.length == 2) {
this.setRemover(false);
}
rows[rows.length - 1].removeFromSuperview();
};
});
//The output should look like this screenshot:
//