Uxi

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 a Uxi is automatically generated unless you specify it. You can also set a name to a Uxi, in this case, you can look it up by using the gatherByName method.

Stack

Uxi by default extends

  Overlay, Loading;

Optional

  Scroller

If a Uxi has the property scroll set to true, a Scroller will be instanciated whithin the Uxi and added to its nodes. Then the scroller object will be available as scroller.

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 a Uxi. Using id 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 a Window, 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 to true, 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!
 });