Views

Views are the basic building blocks of CloudUX applications.
Application layout defines which views are part of the application.
There are two view types: layout views and app views.
Layout views are responsible for layout structure.
SplitContainer (split) and TabContainer (tabs) are examples of layout views.
Application views are views that allows user to execute user workflows.
The Browse View, the Metadata View, the Player view are examples of application views.

Application View

How to export application view

Application views can be exported using appViews feature:

    export const avid = {
        appViews: {
            'companyname-projectname-app-view-name': {
                factory: (config) => {
                    // .. 
                }
            }
        }
    };

You can also use the following approach to export application views plugins:

    export const avid = [{
        name: 'companyname-projectname-app-view-name',
        provides: ['appViews'],
        create: () => {
            return {
               factory: params => new YourApp(params)
            }
        }
    }];

factory

Function that returns an application view instance
Instance must implement interface described in Application View API.

Application View API

publicScope

It allows to expose an application View public API.
It will be accessible in:

• an application that owns the view
• actions (view menu items)
• keyboard shortcuts handlers

Important. It is prohibited to use on and off as methods names of view publicScope.

getSelection

getSelection provided data about current selection to context menus and view menus

Optional

getSelection():Object

Example:

getSelection() {
    return {
             "text/plain": "1v6a002",
             "text/x.avid.asset-list": "interplay-pam:20AB378F-2BA3-4C34-912C-CB6ADEA3172E:masterclip:060a2b340101010101010f0013-000000-54171a7154f91090-060e2b347f7f-2a80",
             "text/x.avid.asset-list+json": [{
                 "systemType":"interplay-pam",
                 "systemID":"20AB378F-2BA3-4C34-912C-CB6ADEA3172E",
                 "type":"sequence",
                 "id":"060a2b340101010101010f0013-000000-bfb98d6a74e200a5-dbffd4686e88-1a5a"
             }]
           };
}

The selection can be any object, but for pluggability context format is recommended.

See Context and Action API.

getMinHeight

Returns minimum allowable height.

Optional

getMinHeight():Number

Returns:

{Number} height

getMinWidth

Returns minimum allowable width.

Optional

getMinWidth():Number

Returns:

{Number} width

name

Returns view name (name is used if the view is one of the tabs in TabContainer).

Optional

name():String

Returns:

{String} Current name

Example

name() {
    return 'Metadata';
}          

Lifecycle

View has several life-cycle stages. Each stage can be implemented by defining a function for it.

• onInit

  It is called exactly once, when the View is created.
  At this moment, view dom element is not created yet.

• onRender

  It is called when view dom element is created.
  Be aware it might be that view is not in the document dom structure yet.

• onDestroy

  The View has been destroyed.
  It is called before the application view is destroyed.
  Performs necessary cleanup in this method (cancel requests, remove event listeners etc).

There are also several lifecycle hooks:

• onFocusGained
• onFocusLost
• onRevalidate

onInit

It is called exactly once, when the View is created.

onInit(config, { dispatch }) {
    ...
}

Parameters:

{Object} config specified view configuration

Configuration is specified in getLayoutConfig method of application.

{Function} dispatch Function to dispatch events to the application and view container

onInit(config, { dispatch }) {
     this.dispatch = dispatch;
}
// it can be used later as

this.dispatch('my_event', data);

Config Example

For example, application getLayoutConfig:

getLayoutConfig() {
        return {
            type: viewName,
            state: { mode: expanded }
        };
    }

Then, application view receives configuration in onInit method:

onInit(config, {dispatch}) {
    // config =  {
    //    type: viewName,
    //    state: { mode: expanded }
    // }
}     

onRender

It is called after rendering dom container.

onRender({ domElement }) {
    // ...
}

Parameters:

{DomElement} DomElement where the view dom structure can be appended

Important. Do not change classNames and id of this dom element.
A View implementation is allowed to create and modify only nested dom structure to this dom element.

onDestroy

Callback that is called before the view is destroyed. The best place to free up resources to prevent memory leaks.

onFocusGained

onFocusGained()

Callback that is called when the current view gains a focus.

onFocusLost

onFocusLost()

Callback that is called when the current view lost a focus.

onRevalidate

onRevalidate(data)

Callback that is called when layout revalidation is triggered.

Parameters:

{Object} data an event data.

data = {
    dimension: {
        width: 300,
        height: 400
    }
}