CAPH.WUI.WIDGET.HIGHLIGHTHELPER
HighlightHelper represents a selector for highlight effect, it's alternative terms could be cursor or focus that can be generally controlled by user's remote control, it moves over widgets or UI templates, it always knows where it should move when any input events like up, down, left and right happens. This widget using the singleton pattern, users do not need to use the 'new' operator. It extends from BasicObject.
Methods
moveTo | ||
Description | ||
Focuses widget, when this method is invoked, the highlight effect will display on the widget. caph.wui.widget.HighlightHelper.moveTo | ||
Parameters | ■para - Object or String - The id of the widget or a widget object. ■event (Optional) - String - Key events, such as mouseover, keydown or none, this parameter is optional. 'mouseover', the type of function will be called when the mouse is over on the widget. 'keydown', the type of function will be called when the widget has highlight effect by the key is pressed down. | |
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 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.setCurItem(3); var item = gridwidget.getActiveItem(); gridwidget.render(page); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); HighLight.moveTo(gridwidget.getItem(3),true); |
getCurrentFocusedWidget | ||
Description | ||
Returns the focused widget. | ||
Parameters | ■Void | |
Return | ■itemObj - Object - The focused widget that has highlight effect. | |
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 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.setCurItem(3); var item = gridwidget.getActiveItem(); gridwidget.render(page); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); var currentWidget = HighLight.getCurrentFocusedWidget(); |
getDomEl | ||
Description | ||
Returns the highlight object which is the DOM elements corresponding to highlight effect. | ||
Parameters | ■Void | |
Return | ■highlightelement - Object - The Object gets highlight effect. | |
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 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.setCurItem(3); var item = gridwidget.getActiveItem(); gridwidget.render(page); //HighLight HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); var highlightWidget = HighLight.getDomEl(); highlightWidget.hide(); |
init | ||
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 HighLight = caph.wui.widget.HighlightHelper; var page = new UIContext(); HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); |
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 HighLight = caph.wui.widget.HighlightHelper; var page = new UIContext(); HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); var obj = HighLight.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 HighLight = caph.wui.widget.HighlightHelper; var page = new UIContext(); HighLight.init(page); page.show(); caph.wui.widget.KeyControl.init(); var obj = HighLight.clone(); var isequal = HighLight.equals(obj); |