View

Role#

• A view is a data model that is binded to rendering primitives
• A view is composed of other views or primitives
• A view is agnostic to the rendering technology
• The view is NOT responsible to get its data. Hence, a view is not connected, in any way, to the services

Declaration#

import View from "@View";
import TextPrimitive from "@TextPrimitive";
import Easing from "@Easing";

export default View.declare("WelcomeHomeInfoView", {
    children: {
        titleText: {
            class: TextPrimitive,
            text: "Hello"
        }
    },
    style: {
        width: 272,
        height: 24,
        titleText: {
            height: 24,
            width: 272
        }
    },
    states: {
        slided: {
            "titleText.y": 50,
            "titleText.opacity": 0
        },
        focused: {
            scale: 1.2
        }
    },
    transitions: {
        slided: {
            "titleText.y": {
                duration: 300,
                delay: 100
            },
            "titleText.opacity": {duration: 300}
        },
        focused: {
            scale: {
                duration: 300,
                easing: Easing.easeInQuad
            }
        }
    },
    animations: {
        fadeIn: {
            "titleText.opacity": {
                from: 0,
                to: 1,
                duration: 300,
                easing: Easing.easeInQuad
            }
        }
    }
});

Advanced Use#

Interacting with view initialisation#

For more complex views that have their own logic, you may want to execute an action to init a view that will be executed only once. Depending on your needs, you have two choices:

• constructor:
  Case: if you do not need to interact with rendering or children of the view.
  During constructor’s call, the rendering context of the view is not yet created and therefore so you can’t interact with it. That’s why a linter error will be raised to prevent people using this constructor to interact with children. But you can definitively use a constructor, for example to define a timer.

• _buildAfterRenderingContext:
  Case: if you need to interact with rendering or children of the view.
  At this runtime step, it is possible to interact with rendering items, and it means that you can override this _buildAfterRenderingContext method, for example to add dynamic children.

Override children order#

A field is available when you declare a View under the name childrenOrder. It’s an array of Strings (child ids) used to define children order. It can be used to order children of your View and its hierarchy.

If your parent have a child viewA and your view define a child viewB without childrenOrder viewB will be above viewA. You can define childrenOrder: [“viewB”, “viewA”] to place viewA above viewB

export default $View.declare("DemoView", {

    children: /** @lends DemoView.prototype */ {
        image: {
            class: $ImagePrimitive
        },
        text: {
            class: $TextPrimitive
        }
    },
    childrenOrder: ["text", "image"]
});