Application

Role

  • An Application is a singleton,
  • The Application handles the bootstrap of current application,
  • Current Application is initialized in the file app.js (i.e. bootstrap),
  • Any Application can have a name,
  • Every project must declare an implementation of the Application class.

Declaration

import $Application from "@Application";

/**
 * MyApplication example
 *
 * @name MyApplication
 * @class
 * @extends Application
 */
export default $Application.declare("app", {
    properties: {
            name: "myAppName"
        }
    },

    methods: {
        /**
         * Extension point that is called right after the application has been initialized.
         * You should rarely need to implement it.
         */
        initialize: function() {},

        /**
         * Extension point that is called when the application is ready to be shown.
         * The first screen is not yet shown.
         * This is the right place to initialize services, player, get data, etc.
         */
        beforeShow: function() {}
    }
);

The application code offers extension points to add behaviours into the startup sequence. Most of the time, you will only need to implement the beforeShow() method.

Expected use

Events

Events triggered by the Application are defined in const ApplicationEvents. By default, Application subscribes to:

  • suspend event
  • resume event
  • quit event

You can add any needed event (to subscribe to) by adding its subscription into the main application constructor:

import $Application from "@Application";
import $EventBus from "@EventBus";
import $ApplicationEvents from "@ApplicationEvents";

/**
 * App
 *
 * @name app
 * @extends Application
 *
 * @property {string} name - Application name
 * @property {EventBus} eventBus - Instance of EventBus
 *
 * @class
 */
export default $Application.declare("app", {
    properties: /** @lends app.prototype */ {
        name: "app",
        eventBus: {class: $EventBus}
    },
    constructor: function () {
        this.eventBus.subscribe($ApplicationEvents.ready, () => {
            console.debug("Application ready");
        });
    }
});

Lifecycle

The application is the starting point of everything.

When an application is started, the following promises are chained sequentially:

Application
Application
AbstractApplication
AbstractApplication
application.ready
application.ready
initialize
initialize
application.initialized
application.initialized
beforeShow
beforeShow
show
show
Text is not SVG - cannot display

Framework initialization

The whole Dana framework code is started by the file named wtv.js which handles those startup steps:

index
index
application
application
load all modules
load all modules
start application
start application
wtv.js
wtv.js
load configuration (wtvConfig)
load configuration (wtvConfig)
load bootstrap
load bootstrap
declare eventBus singleton
declare eventBus singleton
declare inputEventDispatcher singleton
declare inputEventDispatcher singleton
declare i18nManager singleton
declare i18nManager singleton
declare routerManager singleton
declare routerManager singleton
evaluate JS code
evaluate JS code
framework loaded
framework loaded
instanciate wtv application
instanciate wtv application
Text is not SVG - cannot display

Application boot up sequence

During the application startup, those specific methods will be called and various events will be fired:

index
index
wtv
wtv
eventBus
eventBus
application
application
beforeShow()
beforeShow()
show()
show()
application is started
you can play from here !
application is started...
i18nManager
i18nManager
moduleManager
moduleManager
routerManager
routerManager
index.html
index.html
startup
startup
instantiate eventBus
instantia...
instantiate application
instantia...
bootstrap()
bootstrap...
initialize()
initializ...
i18nManager.localeChanged
i18nManager.localeChanged
register()
register()
initialize()
initializ...
$ApplicationEvents.initialized
$ApplicationEvents.initialized
route()
route()
first route dispatch
toscreen
first rou...
$ApplicationEvents.ready
$ApplicationEvents.ready
Text is not SVG - cannot display

API Reference

This application component is part of Dana’s core vendor which includes a JSDoc description.

See the component AbstractApplication under this core API.