CAPH.WUI.WIDGET.GRIDWIDGET
GridWidget represents a container of a set of widgets, the container can display some widgets in a two-dimensional. A user can set the layout of widget, add or remove the basic widget such as image widget, also add them automatically in linear mode.
Contents
- Constructor
- Methods
- GridWidget
- addItemList
- appendItemList
- loadItemListener
- removeCls
- addCls
- blur
- click
- getDomEl
- clone
- equals
- getParentNode
- getSize
- setAbsolutePosition
- setCenterPosition
- getCenterPosition
- setHeight
- setOpacity
- show
- getOpacity
- disable
- enable
- hide
- focus
- getCType
- isVisible
- isEnable
- setOptions
- setPosition
- getPosition
- setRotation
- getRotation
- setScale
- getScale
- setSize
- destroy
- setWidth
- render
- removeEventListener
- addEventListener
- getChildNodes
- setCurItem
- getActiveItem
- removeItem
- removeItemByIndex
- getBlockNum
- getItem
- getItems
- setLayOut
- disableHighLight
- enableHighLight
Constructor
GridWidget | ||
Description | ||
The constructor of gridWidget component, in order to create gridWidget object. | ||
Parameters | ||
obj | Object | some options is the same with arguments of parent class view, other differences as below: * interval : (Number-unit) pixel * colInterval : (Number-unit) pixel * itemCycle : (Boolean) * appendNum : (Number) * autoFlag : (Boolean) * iSelect : (Boolean) * frame.layout : (Json object) * frame.cycle : (Boolean) * item.margin : (Number-unit) pixel |
Emulator Support | Y | |
SDK Constraint | None | |
Example | ||
caph._setBasePath('../../../build'); //set caph path var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Image = caph.wui.widget.Image; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var options = { 'frame' : { 'width' : 1100, // 'width' can be 0 ~ 9999 by integer value or 0% ~ 100% by percentage value 'height' : 900, // 'height' can be 0 ~ 9999 by integer value or 0% ~ 100% by percentage value 'layout' : { 'row' : 4, 'column' : 4 }, 'cycle' : false, 'focusHighlightCLs' : 'u-gridwidget-normal-focus-d', // 'u-gridwidget-focus' class must have 'focusClsTargetWidth' and 'focusClsTargetHeight' property 'focusOffset' : { 'x' : 0, 'y' : 0, 'z' : 1 } }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, 'topleft_position' : { 'x' : 0, 'y' : 20 }, 'item' : { 'margin' : '10 10' } }; var gridWidget = new GridWidget(options); |
Methods
GridWidget | ||
Description | ||
(Constructor) The constructor of gridWidget component, in order to create gridWidget object. | ||
Parameters | ■options (Optional) - Object - some options is the same with arguments of parent class view, other differences as below: * interval : (Number-unit) pixel * colInterval : (Number-unit) pixel * itemCycle : (Boolean) * appendNum : (Number) * autoFlag : (Boolean) * iSelect : (Boolean) * frame.layout : (Json object) * frame.cycle : (Boolean) * item.margin : (Number-unit) pixel | |
Return | ■Object - instance of gridWidget | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
caph._setBasePath('../../../build'); //set caph path var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Image = caph.wui.widget.Image; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var options = { 'frame' : { 'width' : 1100, // 'width' can be 0 ~ 9999 by integer value or 0% ~ 100% by percentage value 'height' : 900, // 'height' can be 0 ~ 9999 by integer value or 0% ~ 100% by percentage value 'layout' : { 'row' : 4, 'column' : 4 }, 'cycle' : false, 'focusHighlightCLs' : 'u-gridwidget-normal-focus-d', // 'u-gridwidget-focus' class must have 'focusClsTargetWidth' and 'focusClsTargetHeight' property 'focusOffset' : { 'x' : 0, 'y' : 0, 'z' : 1 } }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, 'topleft_position' : { 'x' : 0, 'y' : 20 }, 'item' : { 'margin' : '10 10' } }; var gridWidget = new GridWidget(options); |
addItemList | ||
Description | ||
Add multiple items to the GridWidget once a time. | ||
Parameters | ■itemObjList - Array - object array type, the object list which added on the gridWidget. Such as [image1,image2,panel3,...] | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var GridWidget = caph.wui.widget.GridWidget; var UIContext = caph.wui.widget.UIContext; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var gridWidget = new GridWidget(); var options_Panel = [{ 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Valentine\'s Day', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/1.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Mamma Mia!', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/2.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'The Simpsons Movie', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/3.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Harry Potter', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/4.jpg' }, {+L728 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Music and Lyrics', 'text-height': 45, 'margin':'18 0' }, 'labelScroll' : false, 'url' : './testImages/5.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Avatar', 'text-height': 45, 'margin':'18 0' }, 'labelScroll' : false, 'url' : './testImages/6.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Toy Story 3', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/7.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'The Hangover Part 2', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/8.jpg' }, { 'width' : 223, 'height' : 198, text:{ 'normalTextCls':'aa', 'data': 'Rango', 'text-height': 45, 'margin':'18 0' }, 'url' : './testImages/9.jpg' }]; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.render(page); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); |
appendItemList | ||
Description | ||
Provide automatic loading resources for user, if users want to the gridwidget add automatically, users can set the loading resource by calling this method. | ||
Parameters | ■itemList - Type : Array - The loading resources, which included a set of components. ■cb (Callback, Optional) - Type : Function - the function which used in callback function for setting the loading resources' properties. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var GridWidget = caph.wui.widget.GridWidget; var Image = caph.wui.widget.Image; var gridWidget = new GridWidget(); var domContainerList = []; for(var i=0; i<1000; i++){ var img = new Image(); domContainerList.push(img); } var layout = {'row': 1, 'column': 15}; gridwidget.setLayOut(layout); gridwidget.addItemList(domContainerList); gridwidget.autoFlag =true; gridwidget.appendNum = 6; var itemList = domContainerList.slice(16, 1000); var cnt = 0; gridwidget.loadItemListener(function() { var m = cnt + gridwidget.appendNum; if(m> itemList.length){ }else{ gridwidget.appendItemList(itemList.slice(cnt,m)); } cnt = m; }); gridwidget.render(page); page.show(); |
loadItemListener | ||
Description | ||
Listener of automatic loading data, when gridwidget's item is added automatically and trigger the keydown event, this listener will be called. | ||
Parameters | ■pcb (Optional) - Function - the callback function for user. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var GridWidget = caph.wui.widget.GridWidget; var Image = caph.wui.widget.Image; var gridWidget = new GridWidget(); var domContainerList = []; for(var i=0; i<1000; i++){ var img = new Image(); domContainerList.push(img); } var layout = {'row': 1, 'column': 15}; gridwidget.setLayOut(layout); gridwidget.addItemList(domContainerList); gridwidget.autoFlag =true; gridWidget.loadItemListener(function(){ }); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.addCls('myview'); gridwidget.removeCls('myview'); gridwidget.render(page); page.show(); |
addCls | ||
Description | ||
Adds specified css class for current widget, when css is added successfully, new style will apply on 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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.addCls('myview'); gridwidget.render(page); page.show(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); gridwidget.blur(); //call the view blur method |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); gridwidget.click(); //call the view click method |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); var dom = gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); var obj = gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); var obj = gridwidget.clone(); var isequal = gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); var parentList = gridwidget.getParentNodes(); |
getSize | ||
Description | ||
Returns the size of the container. If user don't set the size, it will return {'width':0,'height':4}. | ||
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.render(page); page.show(); var size = gridwidget.getSize(); |
setAbsolutePosition | ||
Description | ||
Sets absolute position of widget in the screen, x,y value of the top and left of the screen is (0,11). | ||
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setAbsolutePosition(700,700,1); gridwidget.render(page); page.show(); |
setCenterPosition | ||
Description | ||
Sets 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,10). | ||
Parameters | ■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. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setCenterPosition(700,700,1); gridwidget.render(page); page.show(); |
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,11). | ||
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setCenterPosition(700,700,1); var cenPos = widget.getCenterPosition(); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setHeight(500); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); gridwidget.render(page); page.show(); |
show | ||
Description | ||
Shows the widget to make it visible on the screen, registered listeners for this are invoked, if duration is greater than 10, 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, the unit is milliseconds. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); gridwidget.addEventListener('click', function() { gridwidget.disable(); }); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); gridwidget.addEventListener('click', function() { gridwidget.enable(); }); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); gridwidget.addEventListener('click', function() { page.hide(); }); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); gridwidget.focus(); //call the view focus method |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); var ctype = gridwidget.getCtype(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); var rc = gridwidget.isVisible(); |
isEnable | ||
Description | ||
Returns the current status of widget, return true when the widget is activated. | ||
Parameters | ■Void | |
Return | ■Boolean - true : if visible - false : otherwise | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); page.show(); var rc =gridwidget.isEnable(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOptions(options); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setPosition(700,700,1); gridwidget.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,11). | ||
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setPosition(700,700,1); var pos = widget.getPosition(); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setRotation(1,2,1); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setRotation(1,2,1); var rot = gridwidget.getRotation(); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setScale(2,2,1); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setScale(2,2,1); var scalePosValue = gridwidget.getScale(); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setSize(300, 600); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setWidth(500); gridwidget.render(page); gridwidget.destroy(); 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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setWidth(500); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setWidth(500); gridwidget.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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.addEventListener('click',function(){ }); gridwidget.removeEventListener('click',function(){ }); gridwidget.render(page); page.show(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.addEventListener('click',function(){ }); gridwidget.render(page); page.show(); |
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 GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.render(page); page.show(); var childList = gridwidget.getChildNodes(); |
addItem | ||
Description | ||
Add one item to the GridWidget once a time, the item is basic component which will be rendered in GridWidget. | ||
Parameters | ■itemObj - Object - The item object which will be removed from the gridWidget. e.g. Image or Panel ■itemIndex - String - object or integer type, the item added index, e.g. {row:10,colume:10} or 18. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var image0 = new Image({'width' : 223,'height' : 198,'url': ./img/photo0.jpg'}); var image1 = new Image({'width' : 223,'height' : 198,'url': ./img/photo1.jpg'}); var image2 = new Image({'width' : 223,'height' : 198,'url': ./img/photo2.jpg'}); gridWidget.addItem(image0,0); gridWidget.addItem(image1,1); gridWidget.addItem(image2,2); gridwidget.render(page); page.show(); |
setCurItem | ||
Description | ||
Set the index of item focused, the specified item will be focused. | ||
Parameters | ■index - Number - The index of the item in GridWidget, the index value is in accordance with up-down or left-right. e.g. 6. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.setCurItem(3); gridwidget.render(page); page.show(); |
getActiveItem | ||
Description | ||
Return the item which has focus, if the focus is not on GridWidget, it will return null. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var HighLight = caph.wui.widget.HighlightHelper; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.setCurItem(3); var item = gridwidget.getActiveItem(); gridwidget.render(page); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); |
removeItem | ||
Description | ||
Remove element from gridwidget according to the item object. | ||
Parameters | ■itemObj - Object - The item object which will be removed from the gridWidget. e.g. Image or Panel | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.removeItem(options_Panel[1]); gridwidget.render(page); page.show(); |
removeItemByIndex | ||
Description | ||
Remove element from gridwidget according to the item index. | ||
Parameters | ■itemIndex - Number - The item index which will be removed from the GridWidget. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); gridwidget.removeItemByIndex(2); gridwidget.render(page); page.show(); |
getBlockNum | ||
Description | ||
Get the product of layout's row and column. | ||
Parameters | ■Void | |
Return | ■blocknum - Number - The number by the row Multiply column of layout. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); var blockNum = gridwidget.getBlockNum(); gridwidget.render(page); page.show(); |
getItem | ||
Description | ||
Get item by index, users can get the specified item, the item is basic component which rendered in GridWidget. | ||
Parameters | ■itemIndex - Sring - The item index, the input type can be object or number. e.g. {row:10, column:10} or 10. | |
Return | ■itemObj - Object - The specified items which rendered in GridWidget. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); var item1 = gridwidget.getItem(2); var item2 = gridwidget.getItem({row2,column:2}); gridwidget.render(page); page.show(); |
getItems | ||
Description | ||
Get all items in GridWidget. | ||
Parameters | ■Void | |
Return | ■map - Object - Map : a map which include all items in GridWidget. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } gridwidget.addItemList(itemObjList); var items = gridwidget.getItems(); gridwidget.render(page); page.show(); |
setLayOut | ||
Description | ||
Set the layout of GridWidget, gridwidge's layout can be rendered. | ||
Parameters | ■layout - Object - object which inclued row and column, e.g. {row:10, column:10} | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var GridWidget = caph.wui.widget.GridWidget; var Panel = caph.wui.widget.Panel; var page = new UIContext(); var gridwidget = new GridWidget(options); var itemObjList = []; var panel; for ( i = 0; i <options_Panel.length; i++) { panel = new Panel(options_Panel[i]); itemObjList.push(panel); } var layout ={ row :3, column:3 }; gridwidget.setLayOut(layout); gridwidget.addItemList(itemObjList); gridwidget.render(page); page.show(); |
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 HighLight = caph.wui.widget.HighlightHelper; var GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); gridwidget.addEventListener('click', function() { gridwidget.disableHighLight(); }); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); |
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 HighLight = caph.wui.widget.HighlightHelper; var GridWidget = caph.wui.widget.GridWidget; var options = { 'frame' : { 'width' :600 'height' : 700 'layout' : { 'row' : 4, 'column' : 4 }, }, 'center-position' :{ 'x':800, 'y':550, 'z':1 }, }; var page = new UIContext(); var gridwidget = new GridWidget(options); gridwidget.setOpacity(0.5); var op = gridwidget.getOpacity(); gridwidget.render(page); gridwidget.addEventListener('click', function() { gridwidget.enableHighLight(); }); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); |