View

API Reference: UI.View

View class represents a rectangular area on the screen and it is responsible for event handling. View is the base of all UI classes.

JavaScript
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const View = require('sf-core/ui/view');
const Button = require('sf-core/ui/button');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
var myView = new View({
flexGrow: 1,
height: 200,
backgroundColor : Color.create("#00A1F1"),
alignSelf : FlexLayout.AlignSelf.CENTER
});
this.layout.addChild(myView);
}
);
module.exports = Page1;

Removed Or Added Child

Get information about removed or added child.

const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const Label = require('sf-core/ui/label');
const View = require('sf-core/ui/view');
const Button = require('sf-core/ui/button');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false;
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
var myFl = new FlexLayout({
flexGrow: 1,
height: 200,
backgroundColor: Color.create("#00A1F1"),
alignSelf: FlexLayout.AlignSelf.CENTER,
text: "Touch Me",
textColor: Color.create("#FFFFFF"),
onTouch: function() {
myFl.addChild(myChildBtn);
myLabel.visible = false
},
});
myFl.onViewRemoved = function(removedChild) { alert("removed child type: " + removedChild) }
myFl.onViewAdded = function(addedChild) {
if (addedChild=='Button') alert("added child type: " + addedChild)
}
var myLabel = new Label({
width: 100,
height: 50,
text: "Touch in blue",
textColor: Color.WHITE,
});
myFl.addChild(myLabel);
var myChildBtn = new Button({
width: 100,
height: 70,
top: 50,
backgroundColor: Color.create("#FFFFFF"),
alignSelf: FlexLayout.AlignSelf.CENTER,
text: "Remove Me",
textColor: Color.create("#00A1F1"),
onPress: function() {
myFl.removeChild(myChildBtn);
myLabel.visible = true
}
});
this.layout.addChild(myFl);
}
);
module.exports = Page1;