Adding Component From Code

You can also add a component from code. Its not recommended to do this in a production environment because it can be hard to maintain.

Mixins

There is mixins for the components. You can use them to add functionality to the components.

styleableComponentMixin is a mixin that adds the ability to style the component.

styleableContainerComponentMixin is a mixin that adds the ability to style the container (view group).

styleablePageMixin is a mixin that adds the ability to style the page.

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

class StyleableButton extends styleableComponentMixin(Button) {} // For a View, styleableComponentMixin is used.
class StyleableFlexLayout extends styleableContainerComponentMixin(
  FlexLayout
) {} // For a ViewGroup, styleableContainerComponentMixin is used.

export default class Page1 extends withDismissAndBackButton(PageSampleDesign) {
  myFlexLayout: StyleableFlexLayout;
  myButton: StyleableButton;
  constructor(private router?: Router, private route?: Route) {
    super({});
  }

  createComponents() {
    this.myFlexLayout = new StyleableFlexLayout();
    this.addChild(this.myFlexLayout, 'myFlexLayout', '.sf-flexLayout', {
      top: 20,
      left: 0,
      bottom: 0,
      right: 0,
      flexProps: {
        positionType: 'RELATIVE',
        flexDirection: 'COLUMN'
      },
      backgroundColor: '#FFFFFF'
    });
    this.myButton = new StyleableButton();
    this.myButton.text = 'Button from code';
    this.myFlexLayout.addChild(this.myButton, 'uniqueButtonID', '.sf-button');
  }

  onShow() {
    super.onShow();
    this.createComponents();
  }

  onLoad() {
    super.onLoad();
  }
}