Before continuing, it would be worthwhile to familiarise yourself with some concepts used in the framework, including the Component system.
This module must be an extension of antie/application.
To launch the application, the module must be loaded by require, and the returned function be used as a constructor, passing the following parameters.
An element in which to house the app
A path to the application’s css directory
A path to the application’s image directory
A callback function that will be executed after the module’s ready() function is called
Loading and instantiating
In the example index, the code below was added to load and instatiate the application:
The call to require does the following
Loads ‘static/script/appui/sampleapp.js’, the returned function is passed as SampleApp
Waits for the DOM to finish loading (require.ready())
Invokes SampleApp as a constructor function, passing the required parameters. This launches the application.
In this case the callback (onReady()) is simply used to remove the loading screen.
Any module extending Application should
Pass some values through to the constructor of its superclass (anite/Application) to initialise the framework
Set the root widget of the application
In addition it may
Add one or more component containers to the application for housing UI elements.
Add the initial component(s) of the application into the containers.
Once the UI is ready to accept user input, you should call this module’s ready() method, inherited from Application.
In this example we set the root widget, define a single component container and push a simple component into it.
The newly created component will take the responsibility for calling the ready() method when it has been rendered.
Running the application
The run() function is called once by the framework, after the framework has finished initialising.
The _setRootContainer() method defined in the constructor is called from run() to set the root widget of the application.
_setRootContainer() creates an instance of antie/widget/container, sets it to output to the application div passed into the constructor, then sets the container as the root of the application.
The addComponentContainer() method:
Creates a component container within the application div
Adds a component to it
The first argument will be set as the id of the container, the second is the require definition name of the component.