Uxi - globules-io/OGX.JS GitHub Wiki
Uxi is the base object that all other UI classes extend. It manages the base state of an object, such as active or inactive, sleeping or awake, and some capacities over its own nodes. It is an important part of the framework.
Every time an object is created from an object extending the Uxi class, that created object is then placed in the nodes of the creating object. All the nodes of an object respond to the same behaviors as their parent object. For instance, if an object is blurred, all of its nodes will be blurred, and their nodes too, and so om and so forth.
Uxi nodes are represented by a List, although Uxi has some shortcut methods to query the nodes. Note that the
id
property of aUxi
is automatically generated unless you specify it. You can also set aname
to a Uxi, in this case, you can look it up by using thegatherByName
method.
Stack
Uxi by default extends
Overlay, Loading;
Optional
Scroller
If a Uxi has the property
scroll
set totrue
, a Scroller will be instanciated whithin the Uxi and added to its nodes. Then the scroller object will be available asscroller
.
Methods
Override-able
construct
Called at start, overwrite this method from within
this.construct = function(){ ... }
onFocus
Called when the Uxi receives Focus. Overwrite from within the Uxi
this.onFocus = function(){ ... };
onBlur
Called when the Uxi looses Focus
this.onBlur = function(){ ... };
ux
This method is like the onFocus/onBlur duo except it is passed true or false. It is also linked to the focus/blur methods. When the object is blurred, this method receives false, when it is focused, it receives true
this.ux = function(__bool){ ... };
show
Override this method to create your own show behavior. The default behavior is
display:[previously set]
this.show = function(){...};
Side note for the show method. The internal reveal method will call the show method, so if you do override it, understand this first: If you are creating a custom object extending some core classes, and that your object is going to generate OML placeholders, your object then by default will get passed 2 parameters when calling its show method:
this.show = function(__type, __id){...};
This tells your object that it is shown due to a reveal action, and that we do not only want to show itself but also a possible target down its nodes, and that it has to display the appropriate placeholder before the reveal cycle can be complete. This is only valid for objects creating OML placeholders.
hide
Override this method to create your own hide behavior. The default behavior is
display:none
this.hide = function(){...};
destroy
You can also overwrite the destructor, from within the Uxi
this.destroy = function(){ ... };
Final
enable
Enable a Uxi
instance.enable();
disable
Disable a Uxi
instance.disable();
create
This method creates an Object and adds it to its tree
instance.create(class, config);
find
This method retrieves a list of nodes from the object's tree (recursive)
let array = instance.find(
class:string|regex|false, //Optional, the class of the object, will be faster if provided
id:string //Required, the id of the object
);
cfind
This method retrieves a list of nodes from the global cache, class and id must be set.
find
is more suited to look up a child,cfind
to retrieve a node from anywhere knowing it's class/type and id.
let array = instance.cfind(class:string, id:string|regexp);
Example
let array = this.cfind('DynamicList', 'my_list');
let array = this.cfind('DynamicList', /my_/gi);
gather
This method retrieves a list of nodes given one or more types/classes, from the object's tree (recursive)
let array = instance.gather(
class:string|regex|array
);
For instance, to gather all Carousels from a certain Uxi, do
instance.gather('Carousel');
you can also gather Views
instance.gather('View');
or a specific view
1.12.1+
instance.gather('Views.MyView');
Gather by name
This method retrieves **recursively ** all the children with a given name. Note that
name
is an optional flag for aUxi
. Usingid
to identify a Uxi is preferred.
instance.gatherByName('my_list');
children
to retrieve direct children given a type (non recursive)
instance.children(__TYPE__, __LIMIT__);
to get all
DynamicList
that are direct children
let array = instance.children('DynamicList');
to retrieve all children
let array = instance.children();
parents
to retrieve all parents given a type (recursive)
instance.parents(__TYPE__, __LIMIT__);
to get all parent
Container
let array = instance.parents('Container');
add
This method adds a node to the object's own tree
instance.add(object);
remove
This method removes a node from the object's own tree
instance.remove(id, class);
clear
This method destroys and delete all nodes off of the object's own tree
instance.clear();
reveal
This method finds the path to a Uxi and shows all instances along the path to reveal the final Uxi
instance.reveal();
Note that when targeting a
Popup
or aWindow
, an animation can be passed
instance.reveal('scale');
resize
Override this method to create your resize hide behavior. This method is called by the parent node holding the instance, and then upon all nodes of the tree.
instance.resize();
resizeNodes
This is an internal method that you should not override, internal method to call resize the entire node tree.
instance.resizeNodes();
blur
This is an internal method that you should not override. It disables/blur itself and of all the nodes of its tree. Blur/focus is automatic and you do not have to worry about this method.
instance.blur();
focus
This is an internal method that you should not override. It enables/focus itself and all the nodes of its tree. Blur/focus is automatic and you do not have to worry about this method.
instance.focus();
blurNodes
This is an internal method that you should not override. It enables/focus all the nodes of its tree. Blur/focus is automatic and you do not have to worry about this method.
instance.blurNodes();
focusNodes
This is an internal method that you should not override. It disables/blurs all the nodes of its tree. Blur/focus is automatic and you do not have to worry about this method.
instance.focusNodes();
detach
This is an internal method that you should not override. It detaches the object from its parent
instance.detach();
attach
This is an internal method that you should not override. It attaches the object to a new parent
instance.attach(_NEW_PARENT_, _SELECTOR_);
scroller
Only set if
scroll
is set totrue
, the scroller object will be available at
instance.scroller
stage
To get the stage a Uxi is currently attached to, going up the tree
instance.stage();
listening
To listen to a Uxi for events
instance.on(_EVENT_, _FUNCTION_);
instance.off(_EVENT_, _FUNCTION_);
observe
To observe for a change over this instance
instance.observe(_BOOL_, _CONFIG_, _CALLBACK_, _CALLBACK_PARAMS_, _TARGET_);
A practical example
instance.observe(true, {childList:true, subtree:true}, function(){
//my content has changed!
});
Later on, turn it off
instance.observe(false);
Note that the observer is buffered, and will only callback when no other changes have happened for 10ms
observeOnce
A shortcut to observing then turning it off right away
instance.observeOnce({childList:true, subtree:true}, function(){
//my content has changed once!
});