CAPH.WUI.WIDGET.STRIP
Strip represents a container of a set of widgets, It can add a set of Strings, each string will be converted to a tag. A user can create a tool-bar easily by using this widget. And the tag has a beautiful animation. Strip can manage the size and the position of tags in it. The main APIs of ListWidget are 'addEvent', 'addItem', 'fireEvent', 'getCurIndex', 'removeEvent', 'removeItemById', 'setCurIndex', 'setCenterPosition', 'transfer'.
Contents
- Constructor
- Methods
- removeCls
- addCls
- isVisible
- show
- removeEventListener
- addEventListener
- click
- disable
- disableHighLight
- enable
- enableHighLight
- hide
- blur
- focus
- getChildNodes
- getCType
- getDomEl
- clone
- equals
- getParentNode
- isEnable
- getCenterPosition
- setAbsolutePosition
- setOpacity
- getOpacity
- getPosition
- setPosition
- getRotation
- setRotation
- setScale
- getScale
- setOptions
- fireEvent
- removeItemByIndex
- addItem
- render
- destroy
- getItems
- getSize
- getCurIndex
- setCurIndex
- transfer
- setHeight
- setSize
- setWidth
- setCenterPosition
- Strip
Constructor
Strip | ||
Description | ||
The constructor of strip component, in order to create strip object. | ||
Parameters | ||
option | Object | the options are some properties to a json object, some options is the same as parent class view, other different as below * options.maxSize : (Number) * options.Interval : (Number-unit) pixel * options.frame.cycle : (Boolean) |
Emulator Support | Y | |
SDK Constraint | None | |
Example | ||
var Strip = caph.wui.widget.Strip; var options = { 'frame' : { 'width' : 900, 'height' : 100, 'focusCls' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60, }, 'maxSize':5, 'Interval':10px, 'center-position':{ 'x':800, 'y':500, 'z':1 }, cls: 'strip' } var strip = new Strip(options); |
Methods
removeCls | ||
Description | ||
Removes specific css class from current widget, when css is removed successfully, the specified css style will be removed from the widget. | ||
Parameters | ■cls - String - The class name for the current widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.addCls('myview'); strip.removeCls('myview'); strip.render(page); page.show(); |
addCls | ||
Description | ||
Add specified css class for the label in the tag, which is convert from the input text, when css is added successfully, new style will apply on the | ||
Parameters | ■cls - String - The class name for the current widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.addCls('myview'); strip.render(page); page.show(); |
isVisible | ||
Description | ||
Indicates whether the widget is visible or not. | ||
Parameters | ■Void | |
Return | ■Boolean - true : if visible - false : otherwise | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show() var rc = strip.isVisible(); |
show | ||
Description | ||
Shows the widget to make it visible on the screen, registered listeners for this are invoked, if duration is greater than 14, that is there exists a fade animation, registered listeners will be invoked during the animation. | ||
Parameters | ■duration (Optional) - Number - (ms) If greater than 0, view will have a fade animation to show itself, milliseconds. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
removeEventListener | ||
Description | ||
Removes all listeners according the type and event. | ||
Parameters | ■type - String - Listener type of event, including {'onfocus', 'onblur', 'onkeydown'. 'onfocus'- the type of function will be called when the widget is focused. 'onblur'- the type of function will be called when the widget is blurred. 'onkeydown' - the type of fun} ■func - Function - The callback to remove | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); strip.removeEventListener('click', function(){ //listen the remove event }); |
addEventListener | ||
Description | ||
Appends an event handler to the widget. | ||
Parameters | ■type - String - Listener type of event, including {'onfocus', 'onblur', 'onkeydown'. * 'onfocus'- the type of function will be called when the widget is focused. * 'onblur'- the type of function will be called when the widget is blurred. * 'onkeydown' - the type of fun} ■function - Function - the callback to add | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('resize', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); |
click | ||
Description | ||
Clicks the view object, to make the view object selected. And if the widget has registered click listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.click(); //call the view click method |
disable | ||
Description | ||
Disables widget, to make widget not be able to be operated by user. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.disable(); }); |
disableHighLight | ||
Description | ||
Removes the highlight effect on a widget, but still remain the focus effect. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.disableHighLight(); }); |
enable | ||
Description | ||
Enables widget, to make widget be able to be operated by user. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.enable(); }); |
enableHighLight | ||
Description | ||
Recovers the highlight effect on a widget. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.enableHighLight(); }); |
hide | ||
Description | ||
Hide the color tag when current uicontext is home uicontext or detail uicontext. | ||
Parameters | ■duration (Optional) - Number - (ms) If duration is greater than 0, view will have a fade animation to hide itself, the unit is milliseconds. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.hide(); }); |
blur | ||
Description | ||
Blurs the view object, to make the view object lose focus. And if the widget has registered blur listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.blur(); //call the view blur method |
focus | ||
Description | ||
Focuses the view object, to make the view object receive focus. And if the widget has registered focus listeners, it will be invoked. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.focus(); //call the view focus method |
getChildNodes | ||
Description | ||
Returns child nodes of current widget, child nodes are those widgets rendered on the current widget. | ||
Parameters | ■Void | |
Return | ■Array - The child nodes list. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var childList = strip.getChildNodes(); |
getCType | ||
Description | ||
Returns the type of the widget, every widget have different ctype, it is identification of widget. | ||
Parameters | ■Void | |
Return | ■String - CType is widget or animation type, including 'BasicObject','view','UIContext','button', 'box','label','radio','spinner', 'navigator','panel','carousel','colortag','image','checkbox','gridwidget', 'popup','progressbar','dropdown','indicator','highlighthelper','coverflow', 'listwidget','book','domcontainer','imagegallery','sidebar','fade','transfer','rotate','scale','bounce','flip','syncanim','advancedbox'." | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var ctype = strip.getCtype(); |
getDomEl | ||
Description | ||
Returns the DOM element of the widget, note that the dom node to be found actually needs to exist (be rendered and etc). | ||
Parameters | ■Void | |
Return | ■DOM - A document element | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var dom = widget.getDomEl(); //call the view getDomEl method |
clone | ||
Description | ||
Creates and returns clone object from current object, the cloned object will have the same properties and same methods with the current object. | ||
Parameters | ■Void | |
Return | ■Object - The cloned object. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var obj = strip.clone(); |
equals | ||
Description | ||
Compares the contents of two objects using strict equality, objects are considered equal if they both have the same set of properties and the values of those properties are equal. | ||
Parameters | ■Object - Object - The object which wants to compare with current object. | |
Return | ■Boolean - Indicates whether the two objects are equal, - true : if they are equal, return true. - false : if they aren't equal, return false. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var obj = strip.clone(); var isequal = strip.equals(obj); |
getParentNode | ||
Description | ||
Returns parent node of current widget, parent node is the widget which the current widget will render on it. | ||
Parameters | ■Void | |
Return | ■Array - The parent node. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var parentList = strip.getParentNodes(); |
isEnable | ||
Description | ||
Returns the current status of widget, return true when the widget is activated. | ||
Parameters | ■Void | |
Return | ■Boolean - true : if enabled - false : otherwise | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var rc =strip.isEnable(); |
getCenterPosition | ||
Description | ||
Returns center position of the widget in the parent widget, include x,y,z coordinate. x,y value of the top and left of the parent widget is (0,15). | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * x : (Number) The x coordinate of 3D object, the unit is pixels. * y : (Number) The y coordinate of 3D object, the unit is pixels. * z : (Number) The z coordinate defines the order of overlap widgets, if z is too big, the widget will display above. e.g. 0, 1, 2 and etc. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.getCenterPosition(info.x, info.y, info.z); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setAbsolutePosition | ||
Description | ||
Sets absolute position of widget in the screen, x,y value of the top and left of the screen is (0,15). | ||
Parameters | ■x - Number - The x coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel. ■y - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel ■z - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setAbsolutePosition(info.x,info.y, info.z); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setOpacity | ||
Description | ||
Sets opacity of the widget. | ||
Parameters | ■opacity - Number - Opacity value of the widget, range from 0.0 to 1.0. e.g. 0.5. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setOpacity(0.5); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
getOpacity | ||
Description | ||
Returns opacity of the widget. | ||
Parameters | ■Void | |
Return | ■Number - Opacity value of the widget,range from 0.0 to 1.0. e.g. 0.5. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setOpacity(0.5); var op = strip.getOpacity(); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
getPosition | ||
Description | ||
Returns top and left position of widget in the parent widget, include x,y,z coordinate. x,y value of the top and left of the parent widget is (0,15). | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * x : (Number) The x coordinate of 3D object, the unit is pixels. * y : (Number) The y coordinate of 3D object, the unit is pixels. * z : (Number) The z coordinate defines the order of overlap widgets, if z is too big, the widget will display above. e.g. 0, 1, 2 and etc. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setPosition (info.x, info.y, info.z); var pos = strip.getPosition(); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setPosition | ||
Description | ||
Sets top and left position of widget in the parent widget. | ||
Parameters | ■x - Number - The x coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel. ■y - Number - The y coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel ■z - Number - The z coordinate, can be a percentage or a number ,like 50% or 500,50% means 50% of the screen, the unit is pixel | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setPosition(info.x,info.y, info.z); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
getRotation | ||
Description | ||
Returns widget rotation property. | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * The x coordinate for rotate position of the view. * The y coordinate for rotate position of the view. * The z coordinate for rotate position of the view. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setRotation(1,2,1); var rot =strip.getRotation(); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setRotation | ||
Description | ||
Sets rotation of widget , rotation angle of the widget will be changed. | ||
Parameters | ■x - Number - The x coordinate for rotate position of the view. ■y - Number - The y coordinate for rotate position of the view. ■z - Number - The z coordinate for rotate position of the view. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setRotation(Math.PI/4, 0, 0); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setScale | ||
Description | ||
Sets widget scale value, the display width and height of widget will be changed, but the value of height and width properties will not be modified. | ||
Parameters | ■x - Number - The x coordinate for scale position of the view. ■y - Number - The y coordinate for scale position of the view. ■z - Number - The z coordinate for scale position of the view. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setScale(0.8, 0.5, 0); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
getScale | ||
Description | ||
Returns the scale value of the widget, including x, y, z coordinates. | ||
Parameters | ■Void | |
Return | ■Object - Position object, including x, y, z value. * The x coordinate for scale position of the view. * The y coordinate for scale position of the view. * The z coordinate for scale position of the view. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setScale(0.8, 0.5, 0); var scalePosValue = strip.getScale(); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setOptions | ||
Description | ||
Sets some properties of the widget that are in the constructor method. The widget will be changed when these properties are set. For example, if width property is set, the width of widget will changed. | ||
Parameters | ■options (Optional) - Object * id : (Number) The id of widget. * name : (String) The name of widget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(); strip.setOptions(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
fireEvent | ||
Description | ||
Make the index of tap to fire the type of event. if the tap have the type of monitor, the type of monitor function will be invoked | ||
Parameters | ■index - Number - The index of the buttonStrip, it should between 0 - maxSize ■type - Object - Event type, It can be one of the follow one e.g.{'click','focus','mouseover','mouseout','keydown','keyup'}" | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.addEvent(0,"focus",function(){console.log('focus')}); strip.fireEvent(0,"focus"); strip.render(page); page.show(); |
removeEvent | ||
Description | ||
Remove the type of monitor from the tap. The event function couldn't be invoked when the type event is fired. | ||
Parameters | ■index - Number - The index of the buttonStrip, it should between 0 - maxSize ■type - Object - " Event type, It can be one of the follow one e.g.{'click','focus','mouseover','mouseout','keydown','keyup'}" ■event - Function - Event Listener | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; function foo() { console.log('foo'); } var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.addEvent(0,"focus", foo); strip.removeEvent(0,"focus", foo); strip.render(page); page.show(); |
addEvent | ||
Description | ||
Add a monitor to the index of the tap. The event function will be invoke when the type event is fired. | ||
Parameters | ■index - Number - The index of the buttonStrip, it should between 0 - maxSize ■type - Object - " Event type, It can be one of the follow one e.g.{'click','focus','mouseover','mouseout','keydown','keyup'}" ■event - String - User event function. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.addEvent(0,"focus",function(){console.log('focus')}); strip.render(page); page.show(); |
removeItemByIndex | ||
Description | ||
Remove the index of tap from the buttonStrip. The tap will be disappear from the screen, after this function is called. | ||
Parameters | ■index - Number - The index of the buttonStrip, it should between 0 - maxSize | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.removeItemByIndex(1); strip.render(page); page.show(); |
addItem | ||
Description | ||
Add text to the button strip. The text will be converted to a tag and display at the position using index. | ||
Parameters | ■index - Number - The index of the buttonStrip, it should between 0 - maxSize ■text - String - This is the string which user want to display in buttonStrip. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
render | ||
Description | ||
Renders the current widget to parent widget. Specify an existing widget that this widget will be rendered into. Widget will display in the parent widget and become a child node of the parent widget. | ||
Parameters | ■object - Json object - An existing widget that this widget will be rendered on. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
destroy | ||
Description | ||
Destroys the widget itself, the widget will disappear. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); strip.addEventListener('click', function() { strip.destroy(); }); |
getItems | ||
Description | ||
Returns all widgets in current buttonstrip. It is a map, with key and value, key is index of widget, value is widget object. | ||
Parameters | ■Void | |
Return | ■Object - Item map, which all widgets in the current widget. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var items= strip.getItems(); |
getSize | ||
Description | ||
Returns the size of the container. If user don't set the size, it will return {'width':0,'height':8}. | ||
Parameters | ■Void | |
Return | ■size - Object - The size of box with width and height, their units are pixel(px). e.g. {width:100, height:100}. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); var size = strip.getSize(); |
getCurIndex | ||
Description | ||
Return index of current active tag. If the current active component is not in the buttonStrip, it will return null. | ||
Parameters | ■Void | |
Return | ■Number - Number - integer type, The Index of Current active tap. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.setCurIndex(1); var index = strip.getCurIndex(); strip.render(page); page.show(); |
setCurIndex | ||
Description | ||
Set the current active component by the index. The tag of the index in the strip will be active. | ||
Parameters | ■index - Number - Index of buttonStrip which will be active the index should between 0 to maxSize. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.setCurIndex(1); strip.render(page); page.show(); |
transfer | ||
Description | ||
Transfer the buttonStrip to a position with an animation. the tag in the buttonStrip will have a animation effect. | ||
Parameters | ■option - Object - "This is an animation option object. It could be as below e.g. {'x':10,'y':10,'z':10,'ease':'Back.InOut'}" ■cb (Optional) - Function - The callback function Which user want to invoke after the strip animation over. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.transfer({'y':1,'duration':500},function(){}); strip.render(page); page.show(); |
setHeight | ||
Description | ||
Set the height of widget, the height of widget will be changed after user invokes the function. | ||
Parameters | ■height - Number - pixel : The height of label, the unit is pixel(px), if null or negative, the value will be ignore, e.g. 100. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setHeight(300); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setSize | ||
Description | ||
Sets the width and height of the widget, the widget's size would be changed by right called. | ||
Parameters | ■width - Number - pixel : The height of label, if null or negative, the value will be ignore. The unit is pixel(px), e.g. 10. ■height - Number - pixel : The height of label, if null or negative, the value will be ignore. The unit is pixel(px), e.g. 10. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setSize(300, 600); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setWidth | ||
Description | ||
Set the width of the widget, the width of the widget will be changed after user invokes the function. | ||
Parameters | ■width - Number - The width of label, the unit is pixel(px), if null or negative, the value will be ignore, e.g. 300. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); strip.setWidth(300); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
setCenterPosition | ||
Description | ||
Sets center position of buttonStrip in the parent widget, include x, y, z coordinate. x, y values of the top and left of the parent widget is (0, 0). | ||
Parameters | ■x (Optional) - Number - The x coordinate of 3D object, the unit is pixel(px), e.g. 50. ■y (Optional) - Number - The y coordinate of 3D object, the unit is pixel(px), e.g. 50. ■z (Optional) - Number - The z coordinate defines the order of overlap widgets, if z is too big, the widget will be displayed above. e.g. 0, 1, 2 etc. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Strip = caph.wui.widget.Strip; var page = new UIContext(); var options = { 'frame' : { 'width' : 900, 'height' : 60, 'focusHighlightCLs' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60 }, 'center-position':{ 'x':800, 'y':500, 'z':1 } }; var strip = new Strip(options); var strip.setCenterPosition(800, 800, 1); strip.addItem(0,'What'); strip.addItem(1,'Who'); strip.addItem(2,'Why'); strip.addItem(3,'Where'); strip.addItem(4,'How'); strip.render(page); page.show(); |
Strip | ||
Description | ||
(Constructor) The constructor of strip component, in order to create strip object. | ||
Parameters | ■options (Optional) - Object - the options are some properties to a json object, some options is the same as parent class view, other different as below * options.maxSize : (Number) * options.Interval : (Number-unit) pixel * options.frame.cycle : (Boolean) | |
Return | ■Object - instance of strip | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var Strip = caph.wui.widget.Strip; var options = { 'frame' : { 'width' : 900, 'height' : 100, 'focusCls' : 'hh', 'focusClsTargetWidth':150, 'focusClsTargetHeight':60, }, 'maxSize':5, 'Interval':10px, 'center-position':{ 'x':800, 'y':500, 'z':1 }, cls: 'strip' } var strip = new Strip(options); |