new List(property)
A class which provides the list layout.
Parameters:
Name | Type | Description | ||||||||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
property |
Object | An object which initializes this component. Refer to the details in caph.ui.base.Layout constructor.
|
- Since:
-
- 2.1.0
Throws:
Will throw an error if the decorateItem option does not exist.
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, gap: [5, 10], size: [640, 480], position: [10, 10, 0], duration: 1000, items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; }, on: { focusitem: function(message) { message.source.setStyle({ color: 'blue' }); }, bluritem: function(message) { message.source.setStyle({ color: '' }); }, selectitem: function(message) { console.log(message.detail); } } });
Extends
Members
-
<static> HORIZONTAL
-
A string indicates horizontal scroll list.
- Since:
-
- 2.0.0
Example
var Component = caph.ui.base.Component; var List = caph.ui.base.component.List; var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { return new Component(); } });
-
<static> VERTICAL
-
A string indicates vertical scroll list.
- Since:
-
- 2.0.0
Example
var Component = caph.ui.base.Component; var List = caph.ui.base.component.List; var list = new List({ direction: List.VERTICAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { return new Component(); } });
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.
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.
Example
var VDom = caph.require('module.renderer.VDom'); var vdom = new VDom(); vdom.addClass('class1'); vdom.addClass('class2 class3 class4');
-
addItem(item) → {caph.ui.base.component.List}
-
Adds an item meta datum to the list.
Parameters:
Name Type Description item
Object The item meta datum.
- Since:
-
- 2.1.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); list.addItem({ title: 'Test' });
-
addItems(items) → {caph.ui.base.component.List}
-
Adds the item meta data to the list.
Parameters:
Name Type Description items
Array.<Object> An array of the item meta datum.
- Since:
-
- 2.1.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); list.addItems(items);
-
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();
-
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();
-
getCurrentItemIndex() → {Number}
-
Gets the current item index.
- Since:
-
- 2.0.0
Returns:
- Type
- Number
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); var currentItemIndex = list.getCurrentItemIndex();
-
getCurrentPositionItem() → {caph.ui.base.Component}
-
Gets the current position item.
- Since:
-
- 2.1.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); var currentPositionItem = list.getCurrentPositionItem();
-
getItemCount() → {Number}
-
Gets the item meta data count in the list.
- Since:
-
- 2.0.0
Returns:
- Type
- Number
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); var itemCount = list.getItemCount();
-
getItemSize() → {Array}
-
Gets the item size in the list.
- Since:
-
- 2.0.0
Returns:
An array unit-less pixel value. The array has size value. ([width, height])
- Type
- Array
Example
var Component = caph.ui.base.Component; var List = caph.ui.base.component.List; var list = new List({ direction: List.VERTICAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { return new Component(); } }); var itemSize = list.getItemSize();
-
getMaxColumnIndex() → {Number}
-
Gets the maximum column index.
- Since:
-
- 2.0.0
Returns:
- Type
- Number
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); var maxColumnIndex = list.getMaxColumnIndex();
-
getMaxRowIndex() → {Number}
-
Gets the maximum row index.
- Since:
-
- 2.0.0
Returns:
- Type
- Number
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.VERTICAL, row: 5, column: 1, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); var maxRowIndex = list.getMaxRowIndex();
-
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');
-
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.
Example
var VDom = caph.require('module.renderer.VDom'); var node = new VDom(); node.mount(document.body);
-
moveTo(nextX, nextY) → {caph.ui.base.component.List}
-
Moves the list to the given x-position and y-position.
Parameters:
Name Type Description nextX
Number The x-position to move.
nextY
Number The y-position to move.
- Since:
-
- 2.0.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 3, column: 3, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); list.moveTo(1, 1);
-
moveToX(nextX) → {caph.ui.base.component.List}
-
Moves the list to the given x-position.
Parameters:
Name Type Description nextX
Number The x-position to move.
- Since:
-
- 2.0.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); list.moveToX(3);
-
moveToY(nextY) → {caph.ui.base.component.List}
-
Moves the list to the given y-position. If you
Parameters:
Name Type Description nextY
Number The y-position to move.
- Since:
-
- 2.0.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.VERTICAL, row: 5, column: 1, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } } }); EventManager.addObserver(item); return item; } }); list.moveToY(3);
-
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); } });
-
onautoscroll(message)
-
A handler to listen for the autoscroll event. If the mouse cursor is on the auto scroll area for designated time, the list will be scrolled automatically, and then this event occurs. The message detail value contains current x and y index.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List autoscroll event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onbluritem(message)
-
A handler to listen for the bluritem event. This event occurs when the item loses a focus. The message source value is the item which loses a focus.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List bluritem event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onfocusitem(message)
-
A handler to listen for the focusitem event. This event occurs when the item gets a focus. The message source value is the item which gets a focus. The message detail value contains current x and y index.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List focusitem event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onkeydown(message)
-
A handler to listen for the keydown event. If the list is a horizontal direction list, scrolls the items when the up or down key is input.
Parameters:
Name Type Description message
caph.event.Message A normalized event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onkeyup(message)
-
A handler to listen for the keyup event. If the list is a horizontal direction list, scrolls the items when the up or down key is input.
Parameters:
Name Type Description message
caph.event.Message A normalized event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onnextpage(message)
-
A handler to listen for the nextpage event. This event occurs when the all displayed items on the previous one page disappear from the screen. The one page has row * column items. The message detail value contains current item number and total item count.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List nextpage event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onprevpage(message)
-
A handler to listen for the prevpage event. This event occurs when the all displayed items on the next one page disappear from the screen. The one page has row * column items. The message detail value contains current item number and total item count.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List onprevpage event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
onselectitem(message)
-
A handler to listen for the selectitem event. This event occurs when an item is selected. The message detail value is the item which is selected.
Parameters:
Name Type Description message
caph.event.Message A caph.ui.base.component.List selectitem event message.
- Since:
-
- 2.0.0
Example
No example available. This method is automatically called by "caph.module.event.Manager". See "caph.module.mixins.event.Observer" example for more details.
-
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);
-
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.
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.
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.
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.
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:
Example
//Set uiComponent's accessibility value uiComponent.setARIA({ role : 'button', title : 'button' }); //change value about title to 'basic button' uiComponent.setARIA({ title : 'basic button' });
-
setCurrentPositionByItem(item) → {caph.ui.base.component.List}
-
Sets the list x-position and y-position to the given item's x-position and y-position.
Parameters:
Name Type Description item
Object The item to set position. This item is a "decorateItem" function's return value.
- Since:
-
- 2.1.0
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } }, on: { focus: function() { list.setCurrentPositionByItem(this); } } }); EventManager.addObserver(item); return item; } });
-
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);
-
setKeyLockDuration(keyLockDuration) → {caph.ui.base.component.List}
-
Sets the keyboard input lock duration time.
Parameters:
Name Type Description keyLockDuration
Number The key lock duration time(ms). Default value is 200.
- Since:
-
- 2.1.1
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } }, on: { focus: function() { list.setCurrentPositionByItem(this); } } }); EventManager.addObserver(item); return item; } }); list.setKeyLockDuration(50);
-
setMouseAutoScrollAreaSize(mouseAutoScrollAreaSize) → {caph.ui.base.component.List}
-
Sets the mouse auto scroll area size.
Parameters:
Name Type Description mouseAutoScrollAreaSize
Number The mouse auto scroll area size(px). Default value is 20.
- Since:
-
- 2.1.1
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } }, on: { focus: function() { list.setCurrentPositionByItem(this); } } }); EventManager.addObserver(item); return item; } }); list.setMouseAutoScrollAreaSize(30);
-
setMouseAutoScrollLockDuration(mouseAutoScrollLockDuration) → {caph.ui.base.component.List}
-
Sets the mouse auto scroll lock duration time.
Parameters:
Name Type Description mouseAutoScrollLockDuration
Number The mouse auto scroll lock duration time(ms). Default value is 200.
- Since:
-
- 2.1.1
Returns:
Example
var Label = caph.ui.base.component.Label; var List = caph.ui.base.component.List; var EventManager = caph.module.event.Manager.getInstance(); var items = []; for (var i = 0; i < 10; i++) { items.push({ title: 'Test' }); } var list = new List({ direction: List.HORIZONTAL, row: 1, column: 5, size: [640, 480], items: items, decorateItem: function(item, index) { var item = new Label({ text: item.title + ' ' + index, dom: { style: { backgroundColor: 'white' } }, on: { focus: function() { list.setCurrentPositionByItem(this); } } }); EventManager.addObserver(item); return item; } }); list.setMouseAutoScrollLockDuration(50);
-
setOption(property)
-
Sets this component properties.
Parameters:
Name Type Description property
Object An object which initializes this component. Refer to the details in caph.ui.base.Layout constructor.
List Details {String} direction (Optional) Determines the list scroll direction. This value can be "caph.ui.base.component.List.HORIZONTAL" or "caph.ui.base.component.List.VERTICAL". Default value is "caph.ui.base.component.List.HORIZONTAL". {Number} row (Optional) A number indicates the list row count. Default value is 1. The list automatically calculates the item height using row count. {Number} column (Optional) A number indicates the list column count. Default value is 1. The list automatically calculates the item width using column count. {Array} gap (Optional) An array of integer which indicates the gap between items. The first index value is horizontal gap and the second index value is vertical gap. Default value is "[5, 5]". {String} ease (Optional) The transition-timing-function property specifies the speed curve of the transition effect. Default value is "ease-out". Look at http://www.w3schools.com/cssref/css3_pr_transition-timing-function.asp for a complete list of possible values. {Number} duration (Optional) A number indicates how many times an effect takes to complete. Default value is "500". (ms) {Array} items (Optional) An array of item which is appended to the list. Each item should be an instance of "caph.module.renderer.View" and mix both "caph.module.mixins.event.Observer" and "caph.module.mixins.focus.Focusable". The class instance which extends "caph.ui.base.Component" meets these requirements. If does not meet the requirements, the events which occur from the list are not propagated properly. {Function} decorateItem A function which takes both an item meta datum and its index as parameter and returns a new instance of "caph.ui.base.Component" using the passed arguments. All decorated items have some preserved properties which have 'data-list-item-' prefix such as 'data-list-item-x-position', 'data-list-item-y-position' and 'data-list-item-index'. When an item is inserted, item's focusable value is set to "true" automatically. If you do not want to set focusable value to "true" automatically, sets item's "data-list-item-no-auto-focus" property to "true". ex) item.setProperty({'data-list-item-no-auto-focus': true}); {Object} on (Optional) A set of key/value pairs that handles the matched message type. Refer to the details in caph.ui.base.Component#on. This class provides additional "focusitem", "bluritem", "selectitem", "prevpage", "nextpage" and "autoscroll" message types. - Since:
-
- 2.1.0
Throws:
Will throw an error if the decorateItem option does not exist.
Example
var Component = caph.ui.base.Component; var List = caph.ui.base.component.List; var list = new List({ direction: List.VERTICAL, row: 1, column: 5, size: [640, 480], decorateItem: function(item, index) { return new Component(); } }); list.setOption({ gap: [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.
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.
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.
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.
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.
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);