Caph

Class: Scene

caph.ui.base. Scene

new Scene(property)

A class which provides Scene.
Scene has lifecycle and 6 special events. It is managed by Scene Manager.
Below is the description of the full list of lifecycle events.
create: It runs oncreate. User can create components in here.
attach: It adds scene to surface and run requestPostRender(). Scene is attached to DOM.
show: Visibility attribute of scene is changed to visible. If user use caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS flag, location of focus is restored.
hide: Visibility attribute of scene is changed to hidden. If user use caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS flag, location of focus is saved.
detach: It removes scene from surface. Scene is detached from dom.
destroy: Scene is removed from vdom.

Parameters:
Name Type Description
property Object

An object containing the parameters for initializing this component. Refer to the details in caph.ui.base.Component constructor.
Since:
  • 2.0.0
Example
var Scene = caph.require('ui.base.Scene')
 caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         this.addChild(component);
         var self = this;
         this.on({
             show: function(message) {
                 self.removeClass('hide');
                 self.addClass('show');
             },
             hide: function(message) {
                 self.removeClass('show');
                 self.addClass('hide');
             }
         });
     }
 }));

Extends

Members

FLAG_SCENE_CLEAR_TOP

String value indicates flag for 'clear_top'.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.FLAG_SCENE_CLEAR_TOP;

FLAG_SCENE_NO_HISTORY

String value indicates flag for 'no_history.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.FLAG_SCENE_NO_HISTORY;

FLAG_SCENE_SINGLE_TOP

String value indicates flag for 'single_top'.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.FLAG_SCENE_SINGLE_TOP;

FLAG_SCENE_USE_HIDE_ANIMATION

String value indicates flag for 'hide_animation'.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.FLAG_SCENE_USE_HIDE_ANIMATION;

FLAG_SCENE_USE_SAVE_FOCUS

String value indicates flag for 'save_focus'.

Since:
  • 2.1.1
Example
var flagName = caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS;

FLAG_SCENE_USE_SHOW_ANIMATION

String value indicates flag for 'show_animation'.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.FLAG_SCENE_USE_SHOW_ANIMATION;

state

String value indicates state of previous scene when go or back function is executed.

Since:
  • 2.1.1
Example
var state = caph.ui.base.Scene.state.READY;

Methods

_offset(x, y, z) → {caph.module.renderer.View|Object}

Set or get offset position from root view.

Parameters:
Name Type Description
x Number

The number is offset position about x axis. (from root view)
y Number

The number is offset position about y axis. (from root view)
z Number

The number is offset position about z axis. (from root view)
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an offset position from root view.

Type
caph.module.renderer.View | Object
Example
var View = caph.module.renderer.View;
 var view1 = new View();
 var view2 = new View();

 view1.position(100, 200).mount();
 view2.position(50, 100).addTo(view1);
 view2._offset(view1_offset());

addChild(node) → {caph.module.renderer.VDom}

Adds the given node or array of nodes to this node's children.

Parameters:
Name Type Description
node caph.module.renderer.VDom | Array.<VDom>

VDom node to add.
Since:
  • 2.0.0
Inherited From:
See:
  • collection.TreeNode.addChild
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom1 = new VDom(), vdom2 = new VDom();
vdom1.addChild(vdom2);

addClass(className) → {caph.module.renderer.VDom}

Adds a class to this object's list of classes. If class already exists in the list, it will not be added.

Parameters:
Name Type Description
className String

A string variable representing a class name or space-delimited class names.
Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.addClass('class1');
vdom.addClass('class2 class3 class4');

back(nextStateOfCurrentScene, parameter, callback) → {Boolean}

Calls 'back' API of Scene Manager.

Parameters:
Name Type Argument Description
nextStateOfCurrentScene Number <optional>

If state is caph.ui.base.Scene.state.INACTIVE, current scene is not removed in the dom tree. So 'onhide' event occurs.
If state is caph.ui.base.Scene.state.READY, current scene is removed in the dom tree. So 'ondetach' event occurs.
If state is caph.ui.base.Scene.state.DESTROY, current scene is removed completely and it can't be reused. 'ondestroy' event occurs.
parameter Object <optional>

Parameter for using in next scene.
callback function <optional>

The callback function. It will run after changing scene.
Since:
  • 2.1.1
Returns:

Result of 'back' API of Scene Manager.

Type
Boolean
Example
caph.app.addScene('mainScene', $class({
    $extends: Scene
    oncreate: function(){
        var component = new UIComponentBase();
        component.on({
            click: function(message) {
                scene.go('subScene');
            }
        });
        this.addChild(component);
    }
}));

caph.app.addScene('subScene', $class({
    $extends: Scene
    oncreate: function(){
        var component = new UIComponentBase();
        var state = caph.ui.base.Scene.state.DESTROY;
        component.on({
            click: function(message) {
                scene.back(state);
            }
        });
        this.addChild(component);
    }
}));

destroy()

Destroys itself and all its children, which makes them available for garbage collection and means they can't be reused.

Since:
  • 2.0.0
Inherited From:
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.destroy();

dim()

Shows dim scene or hides dim scene by first parameter. If it is true, dim scene is showed. If it is false, dim scene is hidden.

Parameters:
Name Type Argument Description
isShow. Boolean

It selects show or hide.
option. Object

It is Used for dim show or hide.
option.easing String <optional>

the name of easing effect.
option.duration Number <optional>

the second for effect.
option.opacity Number <optional>

the number for opacity from 0 to 1.
option.backgroundColor String <optional>

the name or hexcode for background color
option.remain Boolean <optional>

It selects removing dim at parent or not.
Since:
  • 2.0.0
Example
caph.app.addScene('mainScene', $class({
    $extends: Scene
    oncreate: function(){
        var component = new UIComponentBase();
        component.on({
            click: function(message) {
                scene.go('subScene');
            }
        });
        this.addChild(component);
        var self = this;
        this.on({
            show: function(message) {
                self.dim(false);
            },
            hide: function(message) {
                self.dim(true);
            }
        });
    }
}));

caph.app.addScene('subScene', $class({
    $extends: Scene
    oncreate: function(){
        var component = new UIComponentBase();
        component.on({
            click: function(message) {
                scene.back();
            }
        });
        this.addChild(component);
        var self = this;
        this.on({
            show: function(message) {
                self.dim(false, {remain: true});
            },
            hide: function(message) {
                self.dim(true);
            }
        });
    }
}));

getARIA() → {Object}

Get values about accessibility.

Since:
  • 2.0.0
Inherited From:
Returns:
Type
Object
Example
//Set uiComponent's accessibility value
uiComponent.setARIA({
     role : 'button',
     title : 'button'
});

// return object like this :
//   { role : button, title : button }
uiComponent.getARIA();

getDim() → {caph.ui.base.component.Dim}

Gets Dim component.

Since:
  • 2.0.0
Returns:

dim

Type
caph.ui.base.component.Dim
Example
caph.app.addScene('mainScene', $class({
    $extends: Scene
    oncreate: function(){
        var component = new UIComponentBase();
        component.on({
            click: function(message) {
                scene.go('subScene');
            }
        });
        this.addChild(component);
        var dim = this.getDim();
        var u = new UIComponentBase({size: [50, 20]});
        dim.setContent(u);
    }
}));

getFlag() → {Boolean}

Gets the specific flag.

Parameters:
Name Type Description
flagName. String

Name of flag which want to know
Since:
  • 2.0.0
Returns:

Current value of flag which want to know

Type
Boolean
Example
caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         var flagName = caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS;
         if(this.getFlag(flagName) === false){
             this.setFlag(flagName, true);
         }
         this.addChild(component);
     }
 }));

getProperty(attributeName) → {String|Number}

Gets the current value of the given attribute name.

Parameters:
Name Type Description
attributeName String

An attribute name to correspond to the one in Element in Web API Interfaces. (@link https://developer.mozilla.org/en-US/docs/Web/API/element#Properties)
Since:
  • 2.0.0
Inherited From:
Returns:

The value of the given attribute name.

Type
String | Number
Example
var VDom = caph.require('module.renderer.VDom');
var id, vdom = new VDom();
vdom.setProperty({ id : 'test' });
id = vdom.getProperty('id');

getStyle(styleName) → {String|Number}

Gets the current value of the given style name.

Parameters:
Name Type Description
styleName String

A style name to correspond to the one of ElementCSSInlineStyle. (@link http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle)
Since:
  • 2.0.0
Inherited From:
Returns:

The value of the given style name.

Type
String | Number
Example
var VDom = caph.require('module.renderer.VDom');
var bgColor, vdom = new VDom();
vdom.setStyle({ backgroundColor : 'blue' });
bgColor = vdom.getStyle('backgroundColor');

go(nextStateOfCurrentScene, parameter, callback) → {Boolean}

Calls 'go' API of Scene Manager.

Parameters:
Name Type Argument Description
targetSceneID. String

ID of target Scene
nextStateOfCurrentScene Number <optional>

If state is caph.ui.base.Scene.state.INACTIVE, current scene is not removed in the dom tree. So 'onhide' event occurs.
If state is caph.ui.base.Scene.state.READY, current scene is removed in the dom tree. So 'ondetach' event occurs.
If state is caph.ui.base.Scene.state.DESTROY, current scene is removed completely and it can't be reused. 'ondestroy' event occurs.
parameter Object <optional>

Parameter for using in next scene.
callback function <optional>

The callback function. It will run after changing scene.
Since:
  • 2.1.1
Returns:

Result of 'go' API of Scene Manager.

Type
Boolean
Example
caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         component.on({
             click: function(message) {
                 scene.go('subScene');
             }
         });
         this.addChild(component);
     }
 }));

 caph.app.addScene('subScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         var state = caph.ui.base.Scene.state.READY;
         component.on({
             click: function(message) {
                 scene.go('mainScene', state);
             }
         });
         this.addChild(component);
     }
 }));

hasClass(className) → {Boolean}

Checks if this object's list of classes contains a specific class.

Parameters:
Name Type Description
className String

A string variable representing a class name or space-delimited class names.
Since:
  • 2.0.0
Inherited From:
Returns:
Type
Boolean
Example
var VDom = caph.require('module.renderer.VDom');
var result, vdom = new VDom();
vdom.addClass('class1 class2 class3 class4');
result = vdom.hasClass('class1');
result =  vdom.hasClass('class3 class4');

innerHTML(HTML) → {String}

Sets innerHTML of component or gets innerHTML of component

Parameters:
Name Type Description
HTML String

String
Since:
  • 2.0.0
Inherited From:
Returns:

HTML String

Type
String
Example
var HTMLComponent = caph.require('ui.base.component.Html');
var uiComponent = new HTMLComponent();
uiComponent.innerHtml('<div>hellow world</div>);

isEnable() → {boolean}

Get state for enabled.

Since:
  • 2.0.0
Inherited From:
Returns:
Type
boolean
Example
//enabled flag change to false.
uiComponent.setEnable(false);

//return false
uiComponent.isEnable();

//enabled flag change to true
uiComponent.setEnable(true);

//return true
uiComponent.isEnable();

mount(target) → {caph.module.renderer.VDom}

Gets a vdom mounted in a HTML element. Currently this function can be called only once.

Parameters:
Name Type Argument Description
target String | HTMLElement | function <optional>

A HTML element where the given root node mounts, a function returning a HTML element, or else, a string describing element's id. If not defined, document.body is set as default.
Since:
  • 2.1.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var node = new VDom();
node.mount(document.body);

off(type)

Removes user message handlers which handle the matched message type.

Parameters:
Name Type Description
type Array.<String> | String

An array of message type or a message type to be removed. The value is always treated as lowercase.
Since:
  • 2.0.0
Inherited From:
Example
uiComponent.off(['click', 'keydown']);
 uiComponent.off('click');

on(handler)

Adds user message handlers which handle the matched message type. The message type must be a lowercase string. If you add a message handler to the corresponding type, the handler name will have "_on" prefix. For example if you add a "click" message handler, the handler name will become "_onclick". By default, the corresponding event handler functions of which name have "on" prefix calls these "_on" functions. So if you override the event handler functions when you inherit "caph.ui.base.Component", should be aware of this mechanism.

Parameters:
Name Type Description
handler Object

A set of key/value pairs that handles the matched message type.

Details
{String} type The name of message type. This string must be lowercase.
{Function} handler A function to execute when the message is received.

Since:
  • 2.0.0
Inherited From:
See:
Example
uiComponent.on({
 	'click': function(message) { // adds user message handler as "_onclick". by default, this handler will be called by corresponding event handler "onclick". 
 		console.log(message);
 	},
 	'keydown': function(message) { // add user message handler as "_onkeydown". by default, this handler will be called by corresponding event handler "onkeydown". 
 		console.log(message);
 	}
 });

oncreate(message)

Is event listener for create. Create event will be controlled by Scene Manager.

Parameters:
Name Type Description
message caph.event.Message
Since:
  • 2.0.0
Example
var Scene = caph.require('ui.base.Scene')
 caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         this.addChild(component);
         var self = this;
         this.on({
             show: function(message) {
                 self.removeClass('hide');
                 self.addClass('show');
             },
             hide: function(message) {
                 self.removeClass('show');
                 self.addClass('hide');
             }
         });
     }
 }));

opacity(value) → {caph.module.renderer.View|Number}

sets or gets this opacity

Parameters:
Name Type Description
value Number

The number is opacity value of view.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a opacity value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 var curOpacity = view.opacity();
 view.opacity(curOpacity - 0.2);

position(x, y, z) → {caph.module.renderer.View|Array}

Set position property or get position property.

Parameters:
Name Type Description
x Number

The number is position about x axis. (centered position)
y Number

The number is position about y axis. (centered position)
z Number

The number is position about z axis. (centered position)
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including three unit-less pixel values, which means x, y and z position.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 var curPosition = view.position();
 view.position(curPosition[0] + 100, curPosition[1] + 100, null);

positionOrigin(x, y) → {caph.module.renderer.View|Array}

Set the position origin or get the position origin.

Parameters:
Name Type Description
x Number

The number is x-position about position origin. The position origin value range is from 0 to 1.
y Number

The number is y-position about position origin. The position origin value range is from 0 to 1.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means x and y position origin.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.positionOrigin(0.5, 0.5);
 view.position(300, 300);

preLoad(callback) → {Boolean}

Calls 'preLoad' API of Scene Manager

Parameters:
Name Type Argument Description
targetSceneID. String

Target Scene ID for preLoading Scene by string.
callback function <optional>

The callback function. It will run after completing pre-load.
Since:
  • 2.1.1
Returns:

Result of 'preLoad' API of Scene Manager.

Type
Boolean
Example
caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         component.on({
             click: function(message) {
                 scene.go('subScene');
             }
         });
         this.addChild(component);
         this.preLoad('subScene');
     }
 }));

 caph.app.addScene('subScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         var state = caph.ui.base.Scene.state.INACTIVE;
         component.on({
             click: function(message) {
                 scene.go('mainScene', state);
             }
         });
         this.addChild(component);
     }
 }));

removeChild(node, option) → {caph.module.renderer.VDom}

Removes the given node in case that it is this node's child. The removed node will still be reusable unless the destroy option is truthy.

Parameters:
Name Type Argument Description
node caph.module.renderer.VDom | Array.<VDom>

VDom node to remove.
option Object <optional>

Option

Properties
Name Type Argument Description
destroy Boolean <optional>

Determines whether or not to destroy the given node. Once the given node and its children is destroyed, it can be included in garbage collection.
Since:
  • 2.0.0
Inherited From:
See:
  • collection.TreeNode.removeChild
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom1 = new VDom(), vdom2 = new VDom();
vdom1.addChild(vdom2);
vdom1.removeChild(vdom2);

removeClass(className) → {caph.module.renderer.VDom}

Removes a class from this object's list of classes.

Parameters:
Name Type Description
className String

A string variable representing a class name or space-delimited class names.
Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.addClass('class1 class2 class3 class4');
vdom.removeClass('class1');
vdom.removeClass('class3 class4');

requestPostRender(callback) → {caph.module.renderer.VDom}

Requests calling the given callback function just after this object has been rendered with its properties Once this is called, the given callback will be called by renderer in its 'post-render' sequence.

Parameters:
Name Type Description
callback function

[optional] the function named '_postRender' will be called in case that the given callback is undefined.
Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.module.renderer.VDom;
 var view = new VDom();
 view.requestPostRender(function() {
     alert('PostRender');
 });
 view.position(10, 10);

requestPreRender(callback) → {caph.module.renderer.VDom}

Requests calling the given callback function just before this object is rendered. Once this is called, the given callback will be called by renderer in its 'pre-render' sequence.

Parameters:
Name Type Description
callback function

[optional] the function named '_preRender' will be called in case the given callback is undefined.
Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.module.renderer.VDom;
 var view = new VDom();
 view.requestPreRender(function() {
     alert('PreRender');
 });
 view.position(10, 10);

rotate(degx, degy, degz) → {caph.module.renderer.View|Array}

Set rotation of component or get rotation of component.

Parameters:
Name Type Description
degx Number

The number is rotate degree about x axis. (centered position)
degy Number

The number is rotate degree about y axis. (centered position)
degz Number

The number is rotate degree about z axis. (centered position)
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including three unit-less degree values, which means x, y and z rotation.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 var curRotate = view.rotate();
 view.rotate(curRotate[0] + 30, curRotate[1] + 30, curRotate[2] + 30);

rotateX(value) → {caph.module.renderer.View|Number}

Set x rotate degree or get x rotate degree.

Parameters:
Name Type Description
value Number

The number is rotate degree.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a x rotation value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.rotateX(view.rotateX() + 30);

rotateY(value) → {caph.module.renderer.View|Number}

Set y rotate degree or get y rotate degree.

Parameters:
Name Type Description
value Number

The number is rotate degree.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a y rotation value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.rotateY(view.rotateY() + 30);

rotateZ(value) → {caph.module.renderer.View|Number}

Set z rotate degree or get z rotate degree.

Parameters:
Name Type Description
value Number

The number is rotate degree.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a z rotation value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.rotateZ(view.rotateZ() + 30);

rotationOrigin(x, y) → {caph.module.renderer.View|Array}

Set the rotation origin or get the rotation origin.

Parameters:
Name Type Description
x Number

The number is x-position about rotation origin. The rotation origin value range is from 0 to 1.
y Number

The number is y-position about rotation origin. The rotation origin value range is from 0 to 1.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means x and y rotation origin.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.rotationOrigin(0, 1);
 view.rotateZ(120);

scale(x, y) → {caph.module.renderer.View|Array}

Set scale of component or get scale of component.

Parameters:
Name Type Description
x Number

The number is scale value about x axis. The scale value range is from 0 to 1.
y Number

The number is scale value about y axis. The scale value range is from 0 to 1.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less ratio values, which means x and y scale.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 var curScale = view.scale();
 view.scale(curScale[0] * 0.5, curScale[1] * 0.5);

setARIA(option) → {caph.ui.base.Component}

Set accessibility properties.

Parameters:
Name Type Description
option String | Object

A set of accessibility values.
Since:
  • 2.0.0
Inherited From:
Returns:
Type
caph.ui.base.Component
Example
//Set uiComponent's accessibility value
uiComponent.setARIA({
     role : 'button',
     title : 'button'
});

//change value about title to 'basic button'
uiComponent.setARIA({
     title : 'basic button'
});

setEnable(state)

Set state to enable or disable for component.

Parameters:
Name Type Description
state Boolean

state is boolean value. true is enabled, false is disabled.
Since:
  • 2.0.0
Inherited From:
Example
//enabled flag change to false.
//in each component should override this method.
uiComponent.setEnable(false);

//enabled flag change to true.
uiComponent.setEnable(true);

setFlag() → {Boolean}

Sets flag of scene for scene stack or save of focus.
There is 4 flags. Below is detail of each flag
caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS. If one scene is hidden, last focus is stored. when this scene is show again, focus will be restored.
caph.ui.base.Scene.FLAG_SCENE_CLEAR_TOP. If scene having this flag is called and already exists in the scene stack,
manager don't create scene newly and calls existing scene. And then, it eliminates all upper scene than this scene in the scene stack
caph.ui.base.Scene.FLAG_SCENE_SINGLE_TOP. If the scene having this flag is at the top in stack and called again, it is not stacked up any more.
caph.ui.base.Scene.FLAG_SCENE_NO_HISTORY. The scene having this flag is not stored in the scene stack at all.

Parameters:
Name Type Description
flagName. String

Name of Flag for setting of scene stack or focus save
isTrue. Boolean

Setting value of flag
Since:
  • 2.0.0
Returns:

Result about which the setting succeeded

Type
Boolean
Example
caph.app.addScene('mainScene', $class({
     $extends: caph.ui.base.Scene
     oncreate: function(){
         var component = new UIComponentBase();
         var flagName = caph.ui.base.Scene.FLAG_SCENE_USE_SAVE_FOCUS;
         if(this.getFlag(flagName) === false){
             this.setFlag(flagName,true);
         }
         this.setFlag(caph.ui.base.Scene.FLAG_SCENE_SINGLE_TOP, true);
         this.addChild(component);
     }
 }));

setOption(option)

Sets this object's own properties with the given option.

Parameters:
Name Type Description
option Object

A set of component's properties.
Since:
  • 2.0.0
Inherited From:
Example
var base = caph.ui.base.Component();

base.setOption({
     'position' : [100,100],
     'size' : [300,200],
     'dom' : {
         'id' : 'base1'
     },
     accessibility : {role : 'button', title : 'button'}
});

setProperty(properties) → {caph.module.renderer.VDom}

Sets this object's properties.

Parameters:
Name Type Description
properties Object

An object with attribute name and value pairs which correspond to the properties of HTMLElement. (@link https://developer.mozilla.org/en-US/docs/Web/API/element#Properties) 'script','iframe','link' in 'innerHTML' attribute are not allowed.
Since:
  • 2.0.0
Inherited From:
See:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.setProperty({
              id: 'button',
             innerHTML: 'add',
             style: {
                 width: '100px',
                 height: '50px',
                 color: 'white',
                 textAlign: 'center',
                 backgroundColor: 'blue'
             }
           });

setStyle(styles) → {caph.module.renderer.VDom}

Sets this object's style attibutes.

Parameters:
Name Type Description
styles Object

An object with style name and value pairs which correspond to the configuration of ElementCSSInlineStyle. (@link http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-ElementCSSInlineStyle)
Since:
  • 2.0.0
Inherited From:
See:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.setStyle({
             width: '100px',
             height: '50px',
             color: 'white',
             textAlign: 'center',
             backgroundColor: 'blue'
           });

size(size) → {caph.module.renderer.View|Array}

Set size or get size (width / height)

Parameters:
Name Type Argument Description
size Array.<number> <optional>

A array unit-less pixel value The array has size value.( number[width, height] )
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less pixel values, which means width and height. (for example, [100,100] means width : 100px, height: 100px).

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.size([100, 100]);

skew(x, y) → {caph.module.renderer.View|Array}

Set skew of component or get skew of component.

Parameters:
Name Type Description
x Number

The number is skew value about x axis.
y Number

The number is skew value about y axis.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an array including two unit-less degree values, which means x and y skew.

Type
caph.module.renderer.View | Array
Example
var View = caph.module.renderer.View;
 var view = new View();
 var curSkew = view.skew();
 view.skew(curSkew[0] + 30, curSkew[1] + 30);

toggleClass(className) → {caph.module.renderer.VDom}

Toggles the existence of a class in this object's list of classes.

Parameters:
Name Type Description
className String

The class name to be toggled.
Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var result, vdom = new VDom();
vdom.addClass('class1 class2');
vdom.toggleClass('class2');

translate(dx, dy, dz) → {caph.module.renderer.View}

Translates this object relatively from its current position.

Parameters:
Name Type Description
dx Number

delta value of x. unit-less pixel value.
dy Number

delta value of y. unit-less pixel value.
dz Number

delta value of z. unit-less pixel value.
Since:
  • 2.0.0
Inherited From:
Returns:

It returns itself to provide method chaining.

Type
caph.module.renderer.View
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.translate(50, 50, 50);

unmount()

Unmounts from HTML element. If target vdom is not mounted at HTML Element, this method doesn't work.

Since:
  • 2.1.0
Inherited From:
Example
var VDom = caph.require('module.renderer.VDom');
var node = new VDom();
node.mount(document.body);

//unmounting from body. (not destroyed)
node.unmount();

update() → {caph.module.renderer.VDom}

Updates its properties to the corresponding DOM element.

Since:
  • 2.0.0
Inherited From:
Returns:

itself.

Type
caph.module.renderer.VDom
Example
var VDom = caph.require('module.renderer.VDom');
var vdom = new VDom();
vdom.update();

visibility(value) → {caph.module.renderer.View|Boolean}

Set visibility property or get visibility property.

Parameters:
Name Type Description
value Boolean

The boolean value is true or false.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns an Boolean, which means visibility state. If visibility is visible, true. If not, false.

Type
caph.module.renderer.View | Boolean
Example
var View = caph.module.renderer.View;
 var view = new View();
 if(view.visibility()) {
     view.visibility(false);
 }
 else {
     view.visibility(true);
 }

x(value) → {caph.module.renderer.View|Number}

Set x position property or get x position property.

Parameters:
Name Type Description
value Number

The number is x-axis position about component.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a x position value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.x(view.x() + 100);

y(value) → {caph.module.renderer.View|Number}

Set y position property or get y position property.

Parameters:
Name Type Description
value Number

The number is y-axis position about component.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a y position value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.y(view.y() + 100);

z(value) → {caph.module.renderer.View|Number}

Set z position property or get z position property.

Parameters:
Name Type Description
value Number

The number is z-axis position about component.
Since:
  • 2.0.0
Inherited From:
Returns:

If there is an argument, then it returns itself to provide method chaining. In case of no argument, it returns a z position value.

Type
caph.module.renderer.View | Number
Example
var View = caph.module.renderer.View;
 var view = new View();
 view.z(view.z() + 100);