RootLayout

<RootLayout> is a layout container designed to be used as the primary root layout container for your app with a built-in API to easily control dynamic view layers. It extends a GridLayout so has all the features of a grid but enhanced with additional apis.

You can use getRootLayout() to get a reference to the root layout in your app from anywhere.

Usage

To use the RootLayout element, add it to a HTML file

Then in the ViewModel, get its reference and call the open() method on it to open a View instance of interest.

xml

<RootLayout height="100%" width="100%">
  <GridLayout height="100%">
    <Label
      verticalAlignment="center"
      textAlignment="center"
      text="MAIN CONTENT AREA"
    ></label>
  </GridLayout>
</RootLayout>

// Open a dynamic popup
const view = this.getPopup('#EA5936', 110, -30)
getRootLayout()
  .open(view, {
    shadeCover: {
      color: '#000',
      opacity: 0.7,
      tapToClose: true,
    },
    animation: {
      enterFrom: {
        opacity: 0,
        translateY: 500,
        duration: 500,
      },
      exitTo: {
        opacity: 0,
        duration: 300,
      },
    },
  })
  .catch((ex) => console.error(ex))

// Close the dynamic popup
getRootLayout()
  .close(view, {
    opacity: 0,
    translate: { x: 0, y: -500 },
  })
  .catch((ex) => console.error(ex))

function getPopup(color: string, size: number, offset: number): View {
  const layout = new StackLayout()
  layout.height = size
  layout.width = size
  layout.marginTop = offset
  layout.marginLeft = offset
  layout.backgroundColor = color
  layout.borderRadius = 10
  return layout
}

Svelte

First, convert a Svelte component to a View instance:

function createNativeView(component, props?: any) {
  const fragment = createElement('fragment')
  const viewInstance = new component({ target: fragment, props })
  const element = fragment.firstElement() as NativeViewElementNode<View>
  return { element, viewInstance }
}

Then, pass the View instance to the open() method.

const nsView = createNativeView(TestComponent).element.nativeView

setTimeout(() => {
  getRootLayout()
    .open(nsView, {
      shadeCover: {
        color: '#000',
        opacity: 0.7,
        tapToClose: true,
      },
      animation: {
        enterFrom: {
          opacity: 0,
          translateY: 500,
          duration: 500,
        },
        exitTo: {
          opacity: 0,
          duration: 300,
        },
      },
    })
    .catch((ex) => console.error(ex))
})

Listening to a view closed event

To handle a closed view event, listen to the view's unloaded event.

view.on(ViewBase.unloadedEvent, () => {
  // Do something
})

API

Method	Returns
`open(view: View, options?: RootLayoutOptions)`	`Promise<void>`
`close(view: View, exitTo?: TransitionAnimation)`	`Promise<void>`
`bringToFront(view: View, animated?: boolean)`	`Promise<void>`
`closeAll()`	`Promise<void>`
`getShadeCover()`	View

For inherited See GridLayout.

getRootLayout()

 rootLayout: : RootLayout = getRootLayout()

Returns the reference to the RootLayout in an HTML file

RootLayoutOptions

Property	Type	Description
`shadeCover`	ShadeCoverOptions	Optional
`animation`	`{ enterFrom?: TransitionAnimation; exitTo?: TransitionAnimation}`	Optional: `enterFrom` is only applied if it's the first one to be opened. `exitFrom` is only applied if it's the last one to be closed

ShadeCoverOptions

Property	Type	Description
`opacity`	`number`	Optional
`color`	`string`	Optional
`tapToClose`	`boolean`	Optional
`animation`	`{ enterFrom?: TransitionAnimation; exitTo?: TransitionAnimation}`	Optional: `enterFrom` is only applied if it's the first one to be opened. `exitFrom` is only applied if it's the last one to be closed
`ignoreShadeRestore`	`boolean`	Optional

TransitionAnimation

Property	Type	Description
`translateX`	`number`	Optional
`translateY`	`number`	Optional
`scaleX`	`number`	Optional
`scaleY`	`number`	Optional
`rotate`	`number`	Optional: in `degrees`
`opacity`	`number`	Optional
`duration`	`number`	Optional : in `milliseconds`
`curve`	CoreTypes.AnimationCurve	Optional