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.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import { styleableComponentMixin } from "@smartface/styling-context";
import System from "@smartface/native/device/system";
import Application from "@smartface/native/application";
import View from "@smartface/native/ui/view";

class StyleableView extends styleableComponentMixin(View) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  myView: StyleableView;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.style.apply({
      flexProps: {
        flexDirection: "ROW",
        justifyContent: "CENTER",
        alignItems: "CENTER",
      },
    });
  }

  onShow() {
    super.onShow();
    const { headerBar } =
      System.OS === System.OSType.ANDROID ? this : this.parentController;
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.myView = new StyleableView();
    this.addChild(this.myView, "myView", ".view", {
      width: 250,
      flexGrow: 1,
      height: 200,
      backgroundColor: "#00A1F1",
      flexProps: {
        alignSelf: "CENTER",
      },
    });
  }
}

Removed Or Added Child

Get information about removed or added child.

note

The components in the example are added from the code for better showcase purposes. To learn more about the subject you can refer to:

Adding Component From Code

As a best practice, Smartface recommends using the WYSIWYG editor in order to add components and styles to your page or library. To learn how to use UI Editor better, please refer to this documentation

UI Editor Basics

scripts/pages/pageSample.ts

import PageSampleDesign from "generated/pages/pageSample";
import { Route, Router } from "@smartface/router";
import {
  styleableComponentMixin,
  styleableContainerComponentMixin,
} from "@smartface/styling-context";
import Application from "@smartface/native/application";
import Label from "@smartface/native/ui/label";
import Button from "@smartface/native/ui/button";
import FlexLayout from "@smartface/native/ui/flexlayout";

class StyleableLabel extends styleableComponentMixin(Label) {}
class StyleableButton extends styleableComponentMixin(Button) {}
class StyleableFlexLayout extends styleableContainerComponentMixin(
  FlexLayout
) {}

//You should create new Page from UI-Editor and extend with it.
export default class Sample extends PageSampleDesign {
  myFl: StyleableFlexLayout;
  myLabel: StyleableLabel;
  myChildBtn: StyleableButton;
  isAddedChild: boolean = false;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  // The page design has been made from the code for better
  // showcase purposes. As a best practice, remove this and
  // use WYSIWYG editor to style your pages.
  centerizeTheChildrenLayout() {
    this.dispatch({
      type: "updateUserStyle",
      userStyle: {
        flexProps: {
          flexDirection: "ROW",
          justifyContent: "CENTER",
          alignItems: "CENTER",
        },
      },
    });
  }

  onShow() {
    super.onShow();
    const { headerBar } = this;
    Application.statusBar.visible = false;
    headerBar.visible = false;
  }

  onLoad() {
    super.onLoad();
    this.centerizeTheChildrenLayout();

    this.myFl = new StyleableFlexLayout({});

    this.myFl.on("touch", () => {
      if (!this.isAddedChild) {
        this.myFl.addChild(this.myChildBtn, "myChildBtn", ".button", {
          width: 100,
          height: 50,
          textColor: "#FFFFFF",
        });
        this.myLabel.visible = false;
      }
    });

    this.myFl.onViewRemoved = (removedChild) => {
      this.isAddedChild = false;
      alert("removed child type: " + removedChild);
    };
    this.myFl.onViewAdded = (addedChild) => {
      this.isAddedChild = true;
      alert("added child type: " + addedChild);
    };

    this.myLabel = new StyleableLabel({
      text: "Touch in blue",
    });
    this.myChildBtn = new StyleableButton({
      text: "Remove Me",
    });
    this.myChildBtn.on("press", () => {
      this.myFl.removeChild(this.myChildBtn);
      this.myLabel.visible = true;
    });

    this.addChild(this.myFl, "myFl", ".flexLayout", {
      flexGrow: 2,
      height: 200,
      backgroundColor: "#00A1F1",
      flexProps: {
        alignSelf: "CENTER",
      },
      textColor: "#FFFFFF",
    });

    this.addChild(this.myLabel, "myLabel", ".label", {
      width: 100,
      height: 70,
      top: 50,
      flexGrow: 1,
      backgroundColor: "#FFFFFF",
      flexProps: {
        alignSelf: "CENTER",
      },
      textColor: "#00A1F1",
    });
  }
}