CustomComponent

OGX.JS is easily extendable with your own custom components, that can themselves extend some of the base classes of the framework.

Skeleton

MyComponent is used to define your custom component but it could be anything, just make sure you do not use one of the keywords already declared within the framework (Carousel, View, etc...). Here we extend the default Uxi class, required to add to display, and the Touch class.

 require('MyComponent', 'Uxi', 'Touch');
 OGX.MyComponent = function(__config){
      construct(this, 'MyComponent');
      'use strict';  

       //here you can override all the method from Uxi such as enable, disable, contruct...               
       this.construct = function(){};  

       //called when the component appears on screen, and/or parent been enabled
       this.enable = function(){};

       //called when the component disappears off screen, and/or parent been disabled
       this.disable = function(){}; 

       //called when the component is enabled or disabled, clone method
       this.ux = function(boolean){};

       //called when the parent resizes
       this.resize = function(){};

       //called when the component is destroyed by the framework
       this.destroy = function(){};         
       ...           
 };

OML

You can then create your component via OML, from a route

 {
       "default:MyComponent":{
            "id" : "whatever",
            "template" : optional_template
            "data" : optional_data,
            "node:OML":{
                 //optional subtree of objects/components to use within
            }
       }
 }

Or at runtime, ie, from a View

 let obj = this.create('MyComponent', {
       el: '#my_element', 
       id : 'whatever',
       ...
 });

Sub-components

If you create children within the OML of your component, you can retrieve the instances within your component. In this case, we create our component and use a template that has a .list element in it, and we create a DynamicList in that .list element.

let obj = this.create('MyComponent', {
       el: '#my_element', 
       id : 'whatever',
       template : 'myComponentTmeplate',
       'node:OML': {
            'default .list:DynamicList':{
                 id: 'my_list',
                 key: '_id',
                 display: {
                      template: 'my_template',
                      css: 'my_css'
                 }
            }
       }
 });

Accessing children components from your component

 require('MyComponent', 'Uxi', 'Touch');
 OGX.MyComponent = function(__config){
      construct(this, 'MyComponent');
      'use strict';  
       let list;
          
       this.construct = function(){
            list = this.children('DynamicList')[0];
            //OR
            list = app.cfind('DynamicList', 'my_list');
       };  
  };