Core

App is the core of the application. It can hold multi stages, windows, popups and an overlay per stage.

Stack

App by default extend

  Uxi, Overlay, Touch;

And require

 Object, OML, Templater, Controller, Display

Note that if you use a release build ogx.min.js, you do not have to worry about including any other file (but the css).

OGX.App requires a configuration file app.config that must exist in the www folder of your project. If you are using the CLI, the file is automatically created when initialiazing the project by doing ogx init. Otherwise, create that file by hand, here is the skeleton

 {
     "routing":{},
     "stages":{},
     "templates":{},
     "scope":["public"]         
 }

Routing

The routing for the entire application must be defined in this file. To learn more about the routing system, out the page dedicated to this.

To prevent any navigation including the use of the back button, you can lock (and unlock) the core by doing

 app.lock(); 
 app.unlock();
 app.isLocked(); //Returns true or false

To navigate to another route

 app.goto(_URL_);

Example

 app.goto('stage/welcome');

Stages

The stages to be added to your app upon start. For instance, if your app is going to have one stage that you have named stage1, and will be using the Stage object Stage1 and the HTML template Stage, then your configuration will look like this

 {
     ...
     "vapps":{
          "stage:Stages.Stage":{"template":"Stage", "use":true, "home":"login", "scope":["public"], "theater":false}
     },
     ...
 }

Or if you prefer

 {
     ...
     "vapps":{
          "_ID_OF_STAGE_:_CLASS_OF_STAGE_":{"template":_TEMPLATE_NAME_, "observe":_BOOL_, "use":_BOOL_, "home":_DEFAULT_URL_}
     }
     ...
 }

The home attribute defines the default route upon start of the application. It MUST have a default route.

Templates

To load and store your HTML templates into the core, add them to the configuration file, such as

 {
     ...
     "templates":{
          "path":"html/templates/",
          "files":{
               "Stage1":"template.Stage1.html",
               "News":"template.News.html",
               User":"template.User.html",
               ...         
           }
     },
     ...
 }

Note that templates must be placed in the www/html/templates folder.

Sounds

Sounds have their on page, go here

JSON

You can also preload JSON data by including a path and file names in the config. The path is relative to the root (www) folder.

  {...,
       preload:{
            json:{
                 path:"json/",
                 files:["my.json"]
            }
       }, ...
 }

Then access the data directly

 app.getJSON('my.json');

Scope

An array of available scope for the entire application. If your application doesn't handle multiple types of users with different permissions, leave it to ["public"]

Instantiate

 let app = new OGX.App();

Methods & Shortcuts

This object also brings some shortcuts to creating, removing object and other time savers.

Stages

Add a stage to the app

 app.addStage(_STAGE_NAME_, _STAGE_OBJECT, _CONFIG_);

Remove that stage from the app

 app.removeStage(_STAGE_NAME_);

Note that if you declare your stages in the app.json config, you do not need to add stages by code, but know that the methods are available

Use another stage (to add/remove views for instance)

 app.useStage(_STAGE_NAME_);

Snooze a stage (all views, windows of this stage)

 app.snoozeStage(_STAGE_NAME_);

Wake a stage (all views, windows of this stage)

 app.wakeStage(_STAGE_NAME_);

Show a stage (and hide the current one if any)

 app.showStage(_STAGE_NAME_, _ANIMATION_);

Add a view to the stage in use

 app.addToStage(_CONFIG_);

Remove a view from the stage in use

 app.removeFromStage(_SELECTOR_);

Windows

Find a Window

 app.getWindow(__id);

Get all Windows

 app.getWindows();

Check if a Window exists

 app.windowExists(__id);

Add a Window (on current Stage)

 app.addWindow(__config);

Check if a Window is open

 app.windowOpen(__id);

Find and show a Window

 app.showWindow(__id, __anim, __cb, __params);

Find and hide a Window

 app.hideWindow(__id, __anim, __cb, __params);

Swap the depth between 2 Windows

 app.swapWindows(__winA_id, __winB_id);

Find and sleep a Window

 app.sleepWindow(__id);

Find and blur a Window

 app.blurWindow(__id);

Find and focus a Window

 app.focusWindow(__id);

Find and remove a Window

 app.removeWindow(__id);

Find and remove all window, parameter is optional

 app.removeAllWindows(__array_of_ids_to_skip);

Find the Window given an Object/Class in it

 app.findWindow(__obj);

Popups

Add a Popup to current Stage

 app.addPopup(__config);

Find and remove Popup

 app.removePopup(__id);

Find a Popup

 app.getPopup(__id);

Get visible Popups, return array

 app.getVisiblePopups();

Check if a Popup exists

 app.popupExists(__id);

Find the Popup given an Object/Class in it

 app.findPopup(__obj);

Overlays

Add Overlay on current Stage

 app.addOverlay(__anim);

Remove Overlay from current Stage

 app.removeOverlay(__anim);