Shared View

Role#

• A SharedView is a View,
• A SharedView does not belong to a screen but is “shared” between screens,
• Focus and visibility management of a SharedView should be managed manually,
• SharedView are singletons,
• SharedView is always in front of or behind Screen, that’s why layer is mandatory (error will be raised if layer equals 0)

Declaration#

import $SharedView from "@SharedView";
import $RectanglePrimitive from "@RectanglePrimitive";

export default $SharedView.declare("MySharedView", {
    children: {
        overlay: {
            class: $RectanglePrimitive
        }
    },

    style: {
        width: 1920,
        height: 1080,
        overlay: {
            width: ({parent}) => parent.width,
            height: ({parent}) => parent.height,
            fillColor: "#FFFFFF",
            opacity: 0.5
        }
    }
});

Expected Use#

Adding to screen#

The use of shared view in Screen is different compared to other views.

A shared view is **not** part of `children` of a screen but of `properties` !

import $View from "@View";
import $MySharedView from "@MySharedView";

export default $Screen.declare("AppScreen", {
    properties: {
        sharedView: {class: $MySharedView}
    },
    children: {
        view: {class: $View}
    }
}

Hiding and showing#

As SharedView are shared between screens and their visibility should be managed by the developer. No hide / show will be performed during routing. If you want to show or hide a SharedView using animation, you can call showWithAnimation or hideWithAnimation. Those two methods will return promises that are going to be resolved when those animations are ending.

this.sharedView.showWithAnimation({animation; "fadeIn"});

Focusing#

To focus a shared view, you just have to call the focus method on your shared view. As it should be part of your screen properties, it should look like this:

this.sharedView.focus();

Then in order to blur it, you just have to call the focus on another view or shared view. By default, if you are focused on a SharedView and do route to another screen, current focus will stay on your shared view. In case you have override _getChildToFocus, the focus change will be applied on the resulting child item of this function.