View
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
Views by default extend
Uxi, Template, Placeholder, Overlay, Touch;
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.
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"
}
}
}}
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]);
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
};
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.
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.
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.
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.
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'}
});
- Welcome
- Changelog
- Structure
- Configuration
- Getting started
- CLI
- Poly
- Core
- Templating
- Routing
- Controllers
- Components
- Extra Components
- Helpers
- Styling
- Debugging