Caph

Class: Surface

caph.ui.base.component. Surface

new Surface(property)

A class which provides a graphic context for uicomponents.

Parameters:
Name Type Description
property Object

The object is properties for initialize surface.
Since:
  • 2.0.0
Example
var Surface = caph.ui.base.component.Surface;

 var surface = new Surface({
      size: [500, 500]
 });

Extends

Methods

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.initialize(function(surface){
     var component1 = new UIComponentBase(),
         component2 = new UIComponentBase();

     component1.on({
         click: function(message) {
             surface.go('subScene');
         }
     });
     component2.on({
         click: function(message) {
             surface.back();
         }
     });

     surface.addChild([component1, component2]);
 };

 caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         this.addChild(component);
     }
 }));

 caph.app.addScene('subScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         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();

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.initialize(function(surface){
     var component1 = new UIComponentBase(),
         component2 = new UIComponentBase();

     component1.on({
         click: function(message) {
             surface.go('subScene');
         }
     });
     component2.on({
         click: function(message) {
             surface.back();
         }
     });

     surface.addChild([component1, component2]);
 };

 caph.app.addScene('mainScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         this.addChild(component);
     }
 }));

 caph.app.addScene('subScene', $class({
     $extends: Scene
     oncreate: function(){
         var component = new UIComponentBase();
         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');

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);

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);

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'
           });

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');

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();