CAPH.WUI.WIDGET.IMAGEGALLERY
ImageGallery represents a container of a set of widgets, the container can display some widgets in two-dimensional and three-dimensional, the container layout can be set vertical or horizontal or rectangular, the animation of this widget can be 3d or 2d.
Contents
- Constructor
- Methods
- setAbsolutePosition
- setCenterPosition
- setPosition
- setDimension
- setFrame
- addItemList
- setLayOut
- getCenterPosition
- getPosition
- equals
- removeCls
- addCls
- enableHighLight
- render
- show
- addEventListener
- removeEventListener
- blur
- click
- focus
- getDomEl
- isEnable
- destroy
- disable
- disableHighLight
- hide
- getChildNodes
- clone
- getParentNode
- isVisible
- setHeight
- setOpacity
- getOpacity
- setRotation
- getRotation
- setScale
- getScale
- setSize
- setWidth
- getCType
- prev
- next
- addTrans3DListener
- setCurItem
- getLayout
- getActiveItem
- getCurItems
- getBlockNum
- getItem
- getKeyByValue
- jump
- getSize
- setOptions
- ImageGallery
Constructor
ImageGallery | ||
Description | ||
The constructor of imageGallery component, in order to create imageGallery object. | ||
Parameters | ||
option | Object | some options is the same with arguments of parent class box, other different as below: * frame.displayNum : (String) * frame.dimension : (String) * frame.layout : (Json object) * item.item_width : (Number-unit) pixel * item.item_height : (Number-unit) pixel * item.margin : (Number-unit) pixel |
Emulator Support | Y | |
SDK Constraint | None | |
Example | ||
caph._setBasePath('../../../build'); var ImageGallery = caph.wui.widget.ImageGallery; var options = { 'frame' : { 'width' : 800, 'height' :700, 'layout' : { 'type': 'horizontal', // type : vertical or horizontal or grid, 'row' : 1, 'column' : 12 }, 'displayNum' : 'max', // min:6,max :12 for 3d; 'dimension': '3d' }, 'center-position' :{ 'x':330, 'y':320, 'z':1 }, 'item' : { 'item_width' : 150, 'item_height' : 170, 'margin' : '10 10' } }; var imageGallery = new ImageGallery(options); |
Methods
setAbsolutePosition | ||
Description | ||
Sets absolute position of widget in the screen, x,y value of the top and left of the screen is (0,18). | ||
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 ImageGallery = caph.wui.widget.ImageGallery; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setAbsolutePosition (info.x, info.y, info.z); imageGallery.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,12). | ||
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 ImageGallery = caph.wui.widget.ImageGallery; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setCenterPosition (info.x, info.y, info.z); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setPosition (info.x, info.y, info.z); imageGallery.render(page); page.show(); |
setDimension | ||
Description | ||
Sets the dimension of imageGallery, the animation of imageGallery will be 3d or 2d. | ||
Parameters | ■dimension - String - String 3d or 2d. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var img_options = []; for (var i = 0;i<15;i++ ){ //Let's say options is given options.push({ 'width' : 190, 'height' : 198, 'url' : './img/'+i+'.jpg' }); }; var page = new UIContext(); var imageGallery = new ImageGallery(options); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.setDimension('2d'); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
setFrame | ||
Description | ||
Set options, the imagegallery will change the size or layout. | ||
Parameters | ■frameOpt - String - "e.g. : frameOpt : { 'width' : 100, 'height' : 100, 'layout' : { 'type' : 'horizontal', // vertical or horizontal or grid, 'row' : 1, 'column':2 } } | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var img_options = []; for (var i = 0;i<15;i++ ){ //Let's say options is given options.push({ 'width' : 190, 'height' : 198, 'url' : './img/'+i+'.jpg' }); }; var frameOpt:{ 'width' : 100, 'height' : 100, 'layout' : { 'type' : 'horizontal', 'row' : 1, 'column':12 } } var page = new UIContext(); var imageGallery = new ImageGallery(options); imagegallery.setFrame(frameOpt); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
addItemList | ||
Description | ||
Adds many items to the ImageGallery once a time. | ||
Parameters | ■itemObjList - Array - object array type, the object list which added on the imageGallery.Such as [image1,image2,panel3,...] | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var img_options = []; for (var i = 0;i<15;i++ ){ //Let's say options is given options.push({ 'width' : 190, 'height' : 198, 'url' : './img/'+i+'.jpg' }); }; var page = new UIContext(); var imageGallery = new ImageGallery(options); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
addItem | ||
Description | ||
Adds one item to the ImageGallery once a time, the item is basic widget which will be rendered in ImageGallery. | ||
Parameters | ■itemObj - Object - The item which will be added, e.g. Image Object. ■itemIndex - String - The item added index, e.g. {row:10, column:10} or number. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var img_options = []; for (var i = 0;i<15;i++ ){ //Let's say options is given options.push({ 'width' : 190, 'height' : 198, 'url' : './img/'+i+'.jpg' }); }; var page = new UIContext(); var imageGallery = new ImageGallery(options); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItem(itemObjList[0],0); imageGallery.addItem(itemObjList[1],1) var itemList = itemObjList.slice(2,15); imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
setLayOut | ||
Description | ||
Sets the layout of ImageGallery, the layout of ImageGallery can be rendered. | ||
Parameters | ■layout
- String - object which includes type, row and column, e.g. {'type':'grid', row:10, column:10}. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext;
var ImageGallery = caph.wui.widget.ImageGallery; var img_options = []; for (var i = 0;i<15;i++ ){ //Let's say options is given options.push({ 'width' : 190, 'height' : 198, 'url' : './img/'+i+'.jpg' }); }; var layout = { 'type' : 'horizontal', 'row' : 1, 'column' : 12 } var page = new UIContext(); var imageGallery = new ImageGallery(options); imagegallery.setLayOut(layout); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); 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,18). | ||
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 ImageGallery = caph.wui.widget.ImageGallery; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setCenterPosition (info.x, info.y, info.z); var pos = imageGallery.getCenterPosition() imageGallery.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,18). | ||
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 ImageGallery = caph.wui.widget.ImageGallery; var info = {'x': 300, 'y': 300 ,'z':0}; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setPosition (info.x, info.y, info.z); var pos = imageGallery.getPosition(); imageGallery.render(page); page.show(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say optins is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var obj = imageGallery.clone(); var isequal = imageGallery.equals(obj); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.addCls('myview'); imageGallery.removeCls('myview'); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.addCls('myview'); imageGallery.render(page); page.show(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.enableHighLight(); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.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 17, 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); widget.removeEventListener('click', function(){ //listen the remove event }); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.blur(); //override 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.click(); //call the view click 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.focus(); //override the view focus 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var dom = imageGallery.getDomEl(); //call the view getDomEl method |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var rc = imageGallery.isEnable(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function() { imageGallery.destroy();//call the view destroy 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function() { imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function() { imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function() { imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); imageGallery.addEventListener('click', function() { imageGallery.hide(); }); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var childList = imageGallery.getChildNodes(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var obj = imageGallery.clone(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var parentList = imageGallery.getParentNodes(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.render(page); page.show(); var rc = imageGallery.isVisible(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setHeight(300); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setOpacity(0.5); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setOpacity(0.5); var op = imageGallery.getOpacity(); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setRotation(Math.PI/4, 0, 0); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setRotation(Math.PI/4, 0, 0); var rot = imageGallery.getRotation(); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setScale(0.8, 0.5, 0); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setScale(0.8, 0.5, 0); var scalePosValue = imageGallery.getScale(); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setSize(300, 600); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); imageGallery.setWidth(300); imageGallery.render(page); page.show(); |
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var ctype = imageGallery.getCtype(); imageGallery.render(page); page.show(); |
prev | ||
Description | ||
Focuses and magnifies the previous item, the previous item will transfer and magnify. | ||
Parameters | ■imageGallery - Object - The ImageGallery Object. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); for (var i = 0; i < imageGallery.getBlockNum(); i++) { var img = document.createElement('img'); img.id = 'img_'+i; img.className = 'hImgH3D'; img.src = 'img/'+i+'.jpg'; img.tabIndex = i; itemObjList[i].getDomEl().appendChild(img); } var len = imageGallery.getBlockNum(); for (var i = 0; i < len; i++) { (function(i) { itemObjList[i].getDomEl().childNodes[0].addEventListener('click', function() { imageGallery.prev(itemObjList[i], imageGallery); }); })(i); } imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
next | ||
Description | ||
Focuses and magnifies the next item, the next item will transfer and magnify. | ||
Parameters | ■imageGallery - Object - The ImageGallery Object. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); for (var i = 0; i < imageGallery.getBlockNum(); i++) { var img = document.createElement('img'); img.id = 'img_'+i; img.className = 'hImgH3D'; img.src = 'img/'+i+'.jpg'; img.tabIndex = i; itemObjList[i].getDomEl().appendChild(img); } var len = imageGallery.getBlockNum(); for (var i = 0; i < len; i++) { (function(i) { itemObjList[i].getDomEl().childNodes[0].addEventListener('click', function() { imageGallery.next(itemObjList[i], imageGallery); }); })(i); } imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
addTrans3DListener | ||
Description | ||
Listens the transfer animation in 3D mode, this listener will be triggered after completion of 3d animation. | ||
Parameters | ■pcb (Optional) - function - The callback function for users, userss can do someting in this function. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); imagegallery.addTrans3DListener(function(){}); page.show(); |
setCurItem | ||
Description | ||
Magnifies the specified item by the index of the item. | ||
Parameters | ■index - Number - The index of the item in ImageGallery, 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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
getLayout | ||
Description | ||
Returns the layout of ImageGallery. | ||
Parameters | ■Void | |
Return | ■layout - Object - The layout of the widget, including row, column and type which may be vertical, horizontal or grid. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); var layout = imagegallery.getLayout(); |
getActiveItem | ||
Description | ||
Return the item which is amplifying. | ||
Parameters | ■Void | |
Return | ■Object - Object - The item which is amplified. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); var obj = imagegallery.getActiveItem(); |
getCurItems | ||
Description | ||
Returns all the current items in ImageGallery. | ||
Parameters | ■Void | |
Return | ■imageObjs - Array - an array which includes all the current items in ImageGallery . | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); var objs = imagegallery.getCurItems(); |
getBlockNum | ||
Description | ||
Returns the number of ImageGallery by the row and column of layout. | ||
Parameters | ■Void | |
Return | ■blockNum - Number - the number of ImageGallery by the row and column of layout. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); var blockNum = imagegallery.getBlockNum(); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
getItem | ||
Description | ||
Returns the item by index, The specified item can be got, the item is basic widget which rendered on ImageGallery. | ||
Parameters | ■itemIndex - Number - The item index. e.g. 10. | |
Return | ■imageObj - Object - The specified items which rendered on ImageGallery. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); var obj = imagegallery.getItem(0); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
getKeyByValue | ||
Description | ||
Returns the key by value, The index of item can be got in the ImageGallery. | ||
Parameters | ■itemObj - Object - The widget which user want to get. | |
Return | ■imageObj - Object - The specified items which rendered on ImageGallery. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; //Let's say img_options is given for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); var obj = imagegallery.getKeyByValue(itemObjList[3]); imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
jump | ||
Description | ||
Shows the several previous or next items, the chosen item will be transferred and magnified. | ||
Parameters | ■itemObj - (Object) - the item which will be added ,e.g. Image ■imageGallery - Object - The ImageGallery Object. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var itemObjList = []; var box; for ( var i = 0; i < img_options.length; i++) { box = new Box(img_options[i]); box.addCls('boxcls'); itemObjList.push(box); } imageGallery.addItemList(itemObjList); for (var i = 0; i < imageGallery.getBlockNum(); i++) { var img = document.createElement('img'); img.id = 'img_'+i; img.className = 'hImgH3D'; img.src = 'img/'+i+'.jpg'; img.tabIndex = i; itemObjList[i].getDomEl().appendChild(img); } var len = imageGallery.getBlockNum(); for (var i = 0; i < len; i++) { (function(i) { itemObjList[i].getDomEl().childNodes[0].addEventListener('click', function() { imageGallery.jump(itemObjList[i], imageGallery); }); })(i); } imageGallery.render(page); imageGallery.setCurItem(3); page.show(); |
getSize | ||
Description | ||
Returns the size of the container. If user don't set the size, it will return {'width':0,'height':10}. | ||
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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); //Let's say options is given var imageGallery = new ImageGallery(options); var size = imageGallery.getSize(); imageGallery.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 ImageGallery = caph.wui.widget.ImageGallery; var page = new UIContext(); var imageGallery = new ImageGallery(); //Let's say options is given imageGallery.setOptions(options); imageGallery.render(page); page.show(); |
ImageGallery | ||
Description | ||
(Constructor) The constructor of imageGallery component, in order to create imageGallery object. | ||
Parameters | ■options (Optional) - Object - some options is the same with arguments of parent class box, other different as below: * frame.displayNum : (String) * frame.dimension : (String) * frame.layout : (Json object) * item.item_width : (Number-unit) pixel * item.item_height : (Number-unit) pixel * item.margin : (Number-unit) pixel | |
Return | ■Object - instance of imageGallery | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
caph._setBasePath('../../../build'); var ImageGallery = caph.wui.widget.ImageGallery; var options = { 'frame' : { 'width' : 800, 'height' :700, 'layout' : { 'type': 'horizontal', // type : vertical or horizontal or grid, 'row' : 1, 'column' : 12 }, 'displayNum' : 'max', // min:6,max :12 for 3d; 'dimension': '3d' }, 'center-position' :{ 'x':330, 'y':320, 'z':1 }, 'item' : { 'item_width' : 150, 'item_height' : 170, 'margin' : '10 10' } }; var imageGallery = new ImageGallery(options); |