CAPH.WUI.WIDGET.BOOK
Book represents a container of a set of widgets. Other widget can be added to book as the item of the page animation effect.
- A user can create a 3D book on screen easily by using this widget.
- The widgets in the book will have turning the page animation effect.
- The main APIs of Book are 'addPage', 'removePage', 'addItem', 'setLayout', 'nextPage.'
Contents
- Constructor
- Methods
- removeCls
- addCls
- enableHighLight
- blur
- click
- focus
- show
- removeEventListener
- addEventListener
- getDomEl
- isEnable
- isVisible
- disable
- disableHighLight
- hide
- getChildNodes
- getCType
- clone
- equals
- getParentNode
- setOpacity
- getOpacity
- setRotation
- getRotation
- setScale
- getScale
- removePageChangeListener
- setAbsolutePosition
- getCenterPosition
- setCenterPosition
- setPosition
- getPosition
- Book
- setLayout
- setOptions
- render
- destroy
- getSize
- setHeight
- setSize
- setWidth
- getItem
- removeItem
- removeItemByIndex
- setBookmark
- getBookmark
- addPage
- addItem
- addItemList
- nextPage
- prevPage
- addPageList
- addPageChangeListener
Constructor
Book | ||
Description | ||
The constructor of book widget, in order to create book object. | ||
Parameters | ||
options | Object | the options are some properties to a json object, some options is the same as parent class view, other different as below: There has a tag ‘center-positon’, including x, y and z coordinate properties: set the x, y, z coordinates position. |
Emulator Support | Y | |
SDK Constraint | None | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.addCls('myview'); book.removeCls('myview'); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.addCls('myview'); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.enableHighLight(); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.enableHighLight(); book.render(p); p.show(); book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.enableHighLight(); book.render(p); p.show(); book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.enableHighLight(); book.render(p); p.show(); book.focus(); //call the view focus method |
show | ||
Description | ||
Shows the widget to make it visible on the screen, registered listeners for this are invoked, if duration is greater than 12, 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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('resize', function(){ //listen the resize event //console.log(widget.id + ' >>>>>>>>>>>>>>>>>>>>> resized'); }); |
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var dom = book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var rc = book.isEnable(); |
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var rc = book.isVisible(); |
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function() { book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function() { book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function() { book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function() { book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var childList = book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var ctype = book.getCtype(); |
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var obj =book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var obj =book.clone(); var isequal = book.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); var parentList = book.getParentNodes(); |
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setOpacity(0.5); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setOpacity(0.5); var op = book.getOpacity(); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setRotation(Math.PI/4, 0, 0); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setRotation(Math.PI/4, 0, 0); var rot = book.getRotation(); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setScale(0.8, 0.5, 0); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setScale(0.8, 0.5, 0); var scalePosValue = book.getScale(); book.render(p); p.show(); |
removePageChangeListener | ||
Description | ||
Remove the call back function, when the page changed. | ||
Parameters | ■Void | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addPageChangeListener(function(){console.log('pcb')}); book.removePageChangeListener(); |
setAbsolutePosition | ||
Description | ||
Sets absolute position of widget in the screen, x,y value of the top and left of the screen is (0,13). | ||
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 Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setAbsolutePosition( info.x, info.y, info.z); //call the view setAbsolutePosition method book.render(p); p.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,13). | ||
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 Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setCenterPosition (info.x, info.y, info.z); var pos = book.getCenterPosition(); book.render(p); p.show(); widget.setCenterPosition (info.x, info.y, info.z); var pos = widget.getCenterPosition() |
setCenterPosition | ||
Description | ||
Sets the center position of book 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 - Number - The x coordinate of 3D object, the unit is pixel(px), e.g. 30. ■y - Number - The y coordinate of 3D object, the unit is pixel(px), e.g. 30. ■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 etc. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setCenterPosition( info.x, info.y, info.z); book.render(p); p.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 Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setPosition( info.x, info.y, info.z); //call the view setAbsolutePosition method book.render(p); p.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,13). | ||
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 Book = caph.wui.widget.Book; var info = {'x': 300, 'y': 300 ,'z':0, width:300, height:300}; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setPosition( info.x, info.y, info.z); //call the view setAbsolutePosition method var pos = book.getPosition(); book.render(p); p.show(); |
Book | ||
Description | ||
(Constructor) The constructor of book widget, in order to create book 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: There has a tag ‘center-positon’, including x, y and z coordinate properties: set the x, y, z coordinates position. | |
Return | ■Object - instance of book | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); |
setLayout | ||
Description | ||
Set the page layout of a book. The page of the book will be splice to blocks with the number of row*column, other component can render to the blocks, If the page of the book had setLayout, user can use api of 'addItem' or 'addItemList' to add component to the page,but not 'addPage'. | ||
Parameters | ■pageIndex - Number - The page number of the book ■layout - Object - Object contain row and column, such as layout: e.g.{row:10, column:10} | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setLayout(2,{row:2,column:2}); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(); book.setOptions(options); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); p.show(); book.addEventListener('click', function() { book.destroy(); }); |
getSize | ||
Description | ||
Returns the size of the container. If user don't set the size, it will return {'width':0,'height':6}. | ||
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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var size = book.getSize(); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setHeight(300); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setSize(300, 600); book.render(p); p.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 Book = caph.wui.widget.Book; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.setWidth(300); book.render(p); p.show(); |
getItem | ||
Description | ||
Return the item in the page. The page should be set layout. | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. ■itemIndex - Number - The item index in the page. - The itemIndex should between 0 to the layout's row*column. | |
Return | ■Object - The widget which user had added to the page. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); book.setLayout(0,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(0,[image5,image3,image6,image4]); book.getItem(0,0); p.show(); |
removeItem | ||
Description | ||
Remove component from page, the component will be removed from the page after the function is called. The page should be set layout. | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. ■itemObj - Object - The object in the page which user want to removed. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); book.setLayout(0,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(0,[image5,image3,image6,image4]); book.removeItem(0,image3); p.show(); |
removeItemByIndex | ||
Description | ||
Remove component from page by index, the component will be removed from the page after the function is called. The page should be set layout. | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. ■itemIndex - Number - The item index in the page. The itemIndex should between 0 to the layout's row*column. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); book.setLayout(0,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(0,[image5,image3,image6,image4]); book.removeItemByIndex(0,1); p.show(); |
setBookmark | ||
Description | ||
Set the book to the page number. The book will turn off to the 'pageIndex' page with animation. | ||
Parameters | ■pageIndex - Number - The number of the book. the pageIndex should between 0 to the max number of the book. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); book.setLayout(0,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(0,[image5,image3,image6,image4]); var imageBB = new Image({url:'img/page'+3+'.jpg'}); book.addPage(imageBB); book.setLayout(2,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(2,[image5,image3,image6,image4]); for(var i = 3; i<31; i++){ var imageBB = new Image({url:'img/page'+i+'.jpg'}); book.addPage(imageBB); } var btn3 = new Button(); btn3.setSize(300, 94); btn3.setCenterPosition (400, 600, 5); btn3.setText("page 4"); btn3.addEventListener('click', function(){ book.setBookmark(4); }); btn3.render(p); p.show(); |
getBookmark | ||
Description | ||
Return the current page number. | ||
Parameters | ■Void | |
Return | ■index - Number - The current page number of the book. | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); book.setLayout(0,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(0,[image5,image3,image6,image4]); var imageBB = new Image({url:'img/page'+3+'.jpg'}); book.addPage(imageBB); book.setLayout(2,{row:2,column:2}); var image4 = new Image({'url':'img/page4.jpg'}); var image5 = new Image({'url':'img/page5.jpg'}); var image6 = new Image({'url':'img/page6.jpg'}); var image3 = new Image({'url':'img/page3.jpg'}); book.addItemList(2,[image5,image3,image6,image4]); for(var i = 3; i<31; i++){ var imageBB = new Image({url:'img/page'+i+'.jpg'}); book.addPage(imageBB); } var index = book.getBookmark(); p.show(); |
addPage | ||
Description | ||
Add a component to book, the component will be a page of the book. The book will have one more page. | ||
Parameters | ■pageContent - Object - The object user want to add to the book. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image = new Image({'url':'wui/widget/res/page0.jpg'}); book.addPage(image); p.show(); |
addItem | ||
Description | ||
Add component to the page of book widget, the component will be content of the book. The page should set layout. | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. ■pageItem - Object - The widget which user wants to add to the page. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.setLayout(1,{'row':2,'column':2}); book.addItemList(1,[image2,image3,image4]); book.addItem(1,image1); p.show(); |
addItemList | ||
Description | ||
Add a set of components to the page of the book, the components will be content of the book. The page should be set layout | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. ■itemObjlist - Array - It should be a array of component. e.g. [image1,image2] | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.setLayout(1,{'row':2,'column':2}); book.addItemList(1,[image2,image3,image4]); p.show(); |
nextPage | ||
Description | ||
Turn page to the next page, the current page will be turn off with an animation. | ||
Parameters | ■count - Number - The number of pages user want to turn off. ■cbk (Optional) - Function - The callback function user added, and it will be invoked when the page turned off. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.addPageList([image1,image2,image3,image4]); book.nextPage(1,function(){ }); p.show(); |
prevPage | ||
Description | ||
Turn page to the previous page, the current page will be turn off with an animation. | ||
Parameters | ■count - Number - The number of pages user want to turn off. ■cbk (Optional) - Function - The callback function user added, and it will be invoked when the page turned off. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.addPageList([image1,image2,image3,image4]); book.prevPage(1,function(){ }); p.show(); |
removePage | ||
Description | ||
Remove the page of the book, the page and the components in the page will be remove from the book. | ||
Parameters | ■pageIndex - Number - The page number of the book. The pageIndex should between 0 to the max number of the book. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.addPageList([image1,image2,image3,image4]); book.removePage(1); p.show(); |
addPageList | ||
Description | ||
Add a set of components to the book, each component will be a page of the book. The book will have more pages, and the pages have component in them. | ||
Parameters | ■pageContentlist - Array - An array of component. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.addPageList([image1,image2,image3,image4]); p.show(); |
addPageChangeListener | ||
Description | ||
add a function when page changed, it will be call. | ||
Parameters | ■pcb - Function - function type, the call back fuction which will be call when page change. | |
Return | ■Void | |
Emulator Support | Y | |
SDK Constraint | none | |
Example | ||
var UIContext = caph.wui.widget.UIContext; var Book = caph.wui.widget.Book; var Image = caph.wui.widget.Image; var Button = caph.wui.widget.Button; options = { 'center-position':{ 'x':1000, 'y':600, 'z':1 } }; var p = new UIContext(); var book = new Book(options); book.render(p); var image1 = new Image({'url':'wui/widget/res/page1.jpg'}); var image2 = new Image({'url':'wui/widget/res/page2.jpg'}); var image3 = new Image({'url':'wui/widget/res/page3.jpg'}); var image4 = new Image({'url':'wui/widget/res/page4.jpg'}); book.addPageList([image1,image2,image3,image4]); var number = 0; book.addPageChangeListener(function(){ number = 1; }); p.show(); |