Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

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.

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;

View


API Reference: UI.View

Suggested Edits are limited on API Reference Pages

You can only suggest edits to Markdown body content, but not to the API spec.