Quick start up guide

Welcome

To get started with OGX.JS, I recommend you to clone the demo repo to get a first look and explore.

You can also clone the tutorial repo.

You should also check out the CLI and the Neutralino Demo

Setup

To install the whole framework including the CLI (recommended), do

 npm init
 npm install @globules-io/ogx.cli -g

To install the framework only

 npm init
 npm install @globules-io/ogx.js

npm init is only required for a new installation/project

Install / update framework from CLI

 ogx update --force

Themes

OGX.JS supports themes (dark & light mode) and comes with a basic skin io-globules-ogx. You can explore and clone other themes in the repo dedicated to them here.

Configuration

The app.json is the configuration of your application. You can leverage the power of OML to prepare interfaces for you and to create as many objects that you want (at start). You can always create more objects at runtime.

The routing node of the app.json file is the routing for the entire application. It can also be modified at runtime.

Create a stage

Use the CLI to create a Stage

 ogx create stage MyStage

Use the CLI to create a template for the Stage

 ogx create template MyStage

Create a view

Use the CLI to create a View

 ogx create view MyView

Use the CLI to create a template for the View

 ogx create template MyView

Declare the stage placeholder

This tells where in the Stage's template you want your Views to be instantiated when you navigate to a route

Open the template in VSCODE by doing

ogx open template MyStage

Create a placeholder for the Views

<div id="view"></div>

Edit app.json to add the placeholder reference to the stage

 "vapps": {
    "mystage:Stages.MyStage": {
        "template": "MyStage",
        "use": true,
        "placeholder": "#view",
        "home": "index"
    }
},

From now on, you can create more Views and Routes and when you navigate to a new route, the View will always be instanced in the #view placeholder (div)

Create a route to your view

open app.json then in routing, add

 "routes": {
      "mystage/index": {
          "oml":{
               "default:Views.MyView": {
                    "template": "MyView"
                }
            }
        }
    }
 }

Now when the app is loaded, it will automatically go to mystage/index.

Let's create Routes and Views and then navigate between them

 ogx create view OtherView
 ogx create template OtherView

Add new route

  "routes": {
      "mystage/index": {
          "oml":{
               "default:Views.MyView": {
                    "template": "MyView"
                }
            }
       },           
       "mystage/something": {
           "oml":{
              "default:Views.OtherView": {
                    "template": "OtherView"
                }
            }
        }
    }
 }

Open the MyView view

 ogx open view MyView

Add a timeout to navigate to the other route

 this.contruct = function(){
      setTimeout(() => {
         app.goto('mystage/something');
      }, 1000);
 };

After one second, the app will be redirected to mystage/something. Here's what the view's methods do:

The ux method receives true when the view focusses and false and it blurs, and onFocus and onBlur follow the same logic. The only difference is, if you'd rather use a boolean to control your listeners or separate methods. The onResize method gets called when the view size changes. The destroy method is called when the view is destroyed. You do not need to add anything to destroy that you have instanciated with OGX.JS. This method is only useful if you create other objects with other libraries.

Styling

You can also style Stages and Views by editing their respective css files, that have been automatically created and linked when you used the CLI to create the objects.

Understading OGX.JS

It claims to be as abstract, at its core, as much as possible. The goal of this framework is the ability to render a tree of information mapped with a tree of objects, that displays and controls any node of the tree of information.

It is highly recommended to read about OML and OSE to grasp what this framework can do, which as an essential read to understand how to write a tree of objects and mapping data to it.

Cordova

OGX.JS can also be used with Cordova to create mobile applications. Here's how to setup your project

Install OGX.JS CLI globally

 npm install @globules-io/ogx.cli -g

Install Cordova globally

 npm install cordova -g

Create Cordova app

 cordova create MyApp

Move into root of app

 cd myapp

Remove www/index.html

Install OGX

 ogx update --force

Create default folders

 ogx init

Neutralino

OGX.JS can also be used with NeutralinoJS to create desktop applications. Here's how to setup your project

Install OGX.JS CLI globally

 npm install @globules-io/ogx.cli -g

Install Neutralino globally

 npm install @neutralinojs/neu -g

Create "myapp" folder (or whatever you want) then Move into root of app

 mkdir myapp
 cd myapp

Init package

 npm init

Install OGX

 ogx update --force

Create default folders

 ogx init

Update Neutralino

 neu update