View - globules-io/OGX.JS GitHub Wiki

A view in OGX.JS is an interactive object linked to an HTML element (usually - but not limited to - a DIV). It is a controller in the way that it handles users interactions and its own display.

You can create a view using the CLI, by doing

 ogx create view MyView

Stack

Views by default extend

  Uxi, Template, Placeholder, Overlay, Touch;

Skeleton

require('Views.NAME_OF_YOUR_VIEW', 'View');

OGX.Views.NAME_OF_YOUR_VIEW = function(){

     construct(this, 'Views.NAME_OF_YOUR_VIEW');

     'use strict';
  
     //@Override
     this.construct = function(){
           //called when the view has done building
     };  

     //@Override
     this.onFocus = function(){
          //called when the view focuses
     };   

     //@Override
     this.onBlur = function(){
          //called when the view blurs
     };
    
 //@Override
     this.destroy = function(){
           //destroy anything here that is not a Uxi node that you have created
 };	
};	

Note that you can remove any of the overrides if you are not actually overriding them with your own code.

OML

The OML node of a View

 {"selector:Views.NAME_OF_MY_VIEW':__config}

Example : create a view that uses a template then create a switch for an element in that template

 {"#my_stage .my_main_zone:Views.MyView":{
      id:"my_view",
      template:"My_Template",
      "node:OML":{
           "default .my_template_switch:Switch":{
                id:"my_switch"
           } 
      }
 }}  

Instantiate

To create an object and add it to the node stack, from any UXi, do

 this.create(__Class, __config);

Creating an adding to the node stack later on

 let o = OGX.Object.create(__Class, __config);

Creating using OML

 OGX.OML.render(this, [OML Node]);

Configuration

Views require a configuration object such as

 let config = {
      id:_STRING_, //id of the view
      el:_SELECTOR_, //String
      observe:_BOOL_, //Optional, if the mutation observe is active for the view, defaults to false
      scroll:_BOOL_, ///Optional, if the view contains a scroller, defaults to false
      overlay:_BOOL_, ///Optional, if the view has an overlay at start, defaults to false
      loading:_BOOL_, ///Optional, if the view has a loading at start, defaults to false
      html:_STRING_, //HTML to be rendered in the view OR
      template:_STRING_, //Name of a template preloaded in OGX.Templater,
      css:_STRING_, //Optional, css class to add to view element,
      id:_STRING_, //Optional, a unique id
      data:* //Data to be passed to the view's constructor
 };

CSS

Quick note on the css property here. If your view is going to be instanced into a component, such as a Scroller (if your view has scroll:true), or if you instantiate it within a component such as Carousel, it is recommended to not add additional css classes that change the display so the components don't break.

id

By default, if no id is set in the config, OGX.JS will generate a pseudo unique id and add it to the view's HTML element as data-ogx-id. You can however force an id for a view by setting it in the config. If your id starts with # (i.e #mydiv), in this case, the HTML element will get the id attribute set to your id, (i.e id="mydiv"). Keep this in mind when binding forms and fields that require a unique selector, or if you want your dynamic views to have a specific id.

Scrolling

If the scroll property is set to true, a Scroller is automatically created in the view, taking the full height of the view HTML element.

Loader

You can add a small loader popup in the middle of a view as you need, from within the view

 this.addLoading(_OBJECT_);

To display the default loader popup (size and image), do

 this.addLoading();

To display the loader popup with a custom image, do

 this.addLoading({image:_PATH_TO_FILE_});

To display a loader popup of a size of 80x50px, do

 this.addLoading({width:80, height:50});

To hide it once you're done loading stuff

 this.removeLoading();

Note that the configuration is merged with the default one.

Custom Events

It is possible to use custom event to dispatch from the HTML element linked to the view respecting this format:

 OGX.Views.NAME_OF_YOUR_VIEW.NAME_OF_YOUR_EVENT = 'nameOfYourViewNameOfYourEvent';

In the following example, we create a custom event 'OBJECT_UPDATED' to be dispatched by our view MyView. It could be used, for instance, to broadcast that an object has been updated from this view, and as a result be handled by a main controller, such as a stage.

 OGX.Views.MyView.OBJECT_UPDATED = 'myViewObjectUpdated';

Trigger this event from within the view by doing

 this.el.trigger(OGX.Views.MyView.OBJECT_UPDATED, {some_property:'some value'});

Listen to this event from within its stage

 this.el.on(OGX.Views.MyView.OBJECT_UPDATED, function(__event, __object){
      //__object is {some_property:'some value'}
 });