Create Scrollist in Netgem
Posted By : Deepak Gupta | 14-Feb-2014
How to create Scrollist in Netgem
the image that you will see by this tutorial:-
First of all I will tell u how scrollist application is created in netgem .In this app there are two file MyListFormWidget.json And MyListFormWidget.js,MyListFormWidget.js contains the function which are called implicitly and others which are called explicitly called in the json and js. MyListFormWidget.json file contains the layout or css in the json format and calling function of the MyListFormWidget.js file in it.
First of all I am going to talk about MyListFormWidget.json file. I think that this file must be understand first .Below line is the code of the mylistformwidget.json:-
{
"widgets": {
"categoryList": {
//widget is for the main item list
"create": "ScrollListWidget",//create a item list vertically
"param": {
"onFocus" : "onFocusCategoryList",
//it is the function name that is in the
//MyListFormWidget.js file it is called when focus comes on item list or not comes
//it is called on every time the focus is lose or gain on the items
"itemInitFunc" : "Canvas.newScrollListItemText",
//it is inbuit function
"itemWidth" : 435,
//it is width of the item tab
"itemHeight" : 33,
//it is height of the item tab
"itemInterval" : 8,
//it distance between the tabs
"zIndex" : 1,
"bounds" : { "x": 90, "y": 120, "w": 435, "h": 210 },
"options" : ["itemsAutoLayout"],
"defaultState" : "exit",
"scrollbar": {
"align" : "center",
"speed" : 300,
"w" : 20,
"h" : 210,
"sideSize" : 18,
"itemSize" : 8,
"zIndex" : 1,
"bounds" : { "x": 535, "y": 120 }
}
//it is layout of the scroll button which are appear on the right
}
},
//ends of the item list widget
//start of the crousel list which are appear on the scrolling the item list
//it is appear horizontallly on the screen
"carouselList": {
"create": "ScrollListWidget",
"param": {
"onFocus" : "onFocusCarouselList",
"itemWidth" : 352,
"itemHeight" : 256,
"focusIndex" : 4,
"nbItem" : 9,
"zIndex" : 8,
"options" : ["noloop"],
"defaultState" : "exit",
"states": {
"enter": {
"speed": 300,
"items": [
{ "x": 90, "y": 416, "w": 220, "h": 160, "a": 0 },
{ "x": 90, "y": 416, "w": 220, "h": 160, "a": 0 },
{ "x": 90, "y": 416, "w": 220, "h": 160, "a": 255 },
{ "x": 190, "y": 396, "w": 264, "h": 192, "a": 255 },
{ "x": 464, "y": 356, "w": 352, "h": 256, "a": 255 },
{ "x": 826, "y": 396, "w": 264, "h": 192, "a": 255 },
{ "x": 970, "y": 416, "w": 220, "h": 160, "a": 255 },
{ "x": 970, "y": 416, "w": 220, "h": 160, "a": 0 },
{ "x": 970, "y": 416, "w": 220, "h": 160, "a": 0 }
]
//it is layout of the every carousel item
},
"exit": {
"speed": 300,
"items": [
{"x": -440, "y": 512, "w": 440, "h": 320, "a": 0 },
{"x": -440, "y": 512, "w": 440, "h": 320, "a": 0 },
{"x": -440, "y": 512, "w": 440, "h": 320, "a": 0 },
{"x": -272, "y": 540, "w": 528, "h": 384, "a": 0 },
{"x": 290, "y": 640, "w": 704, "h": 512, "a": 0 },
{"x": 1024, "y": 540, "w": 528, "h": 384, "a": 0 },
{"x": 1280, "y": 512, "w": 440, "h": 320, "a": 0 },
{"x": 1280, "y": 512, "w": 440, "h": 320, "a": 0 },
{"x": 1280, "y": 512, "w": 440, "h": 320, "a": 0 }
]
}
},
//end of the carousel widgets
//start of the each carousel item layout internally
"itemWidget": {
"create": "PainterWidget",
"param": {
"elements": [
{ "type": "panel", "id": "tile", "bounds": {"x": 6,"y": 0,"w":338,"h":252}, "custo": "panel" },
{ "type": "rect", "id": "area", "bounds": {"x":22,"y": 16,"w":306,"h":166}, "custo": "area" },
{ "type": "text", "id": "title", "bounds": {"x":22,"y":198,"w":310,"h": 40}, "custo": "title" }
]
//all the element in the carousel panel
//first draw a panel
//second draw a rectangle shape in the panel
//fourth is the text layout inside the rectangle
}
},
"scrollbar": {
"align" : "center",
"w" : 200,
"h" : 20,
"sideSize" : 18,
"itemSize" : 8,
"zIndex" : -1,
"bounds" : { "x": 540, "y": 620 }
}
}
},
//this start of the info panel which are righttop corner on screen
"info": {
"create": "PainterWidget",
"param": {
"w" : 530,
"h" : 210,
"zIndex" : 9,
"speed" : 300,
"options" : ["tmpBuffer"],
"bounds" : {"x": 670, "y": 122},
"elements": [
{ "type": "rect", "id": "panel", "bounds": {"x": 0,"y": 0,"w": 520,"h":200}, "custo": "panel" },
{ "type": "text", "id": "title", "bounds": {"x": 20,"y": 20,"w": 480,"h": 40}, "custo": "title" },
{ "type": "text", "id": "desc", "bounds": {"x": 20,"y": 60,"w": 480,"h":140}, "custo": "textarea" }
]
}
},
"buttonList": {
"create": "PainterWidget",
"param": {
"w" : 780,
"h" : 30,
"zIndex" : 1,
"speed" : 300,
"options" : ["tmpBuffer"],
"bounds" : {"x": 250, "y": 660},
"elements": [
{ "type": "text", "id":"text", "bounds": {"x": 0,"y": 0,"w":780,"h":30}, "custo" : "label" }
]
}
}
}
}
Moving forward to the MyFormWidget.js file . This file is too important as prevoius one, because it contains all the function that are used in the MyFormWidget.json and also their functionally like onFocusCategoryList In this file we call widgets which are defined in the prevous file.Below line is the code of the myListFormWidget.js:
FormWidget.registerTypeStandard("MyListFormWidget");
function MyListFormWidget(_json, _options){
this.super(_json, _options);
/*
* First, we create a dummy data structure that will be navigable via the lists.
*/
this.data = [
{"label":"Sports", "items": ["Football", "Basketball", "Soccer", "Tennis", "Boxing", "Golf"]},
{"label":"News", "items": ["World news", "Politics", "Business", "Sport", "Tech", "Health", "Justice"]},
{"label":"Technology","items": ["Culture", "Entertainment", "Gaming", "Gadgets", "Science", "Software"]},
{"label":"People", "items": ["News", "Photos", "Red carpet", "Style", "Babies", "TV Watch", "Games", "Celebs", "Video"]},
{"label":"Weather", "items": ["Forecasts", "Severe Weather", "Maps", "Video", "Travel", "On TV"]}
];
}
//above code is json object in which item list are and corresponding carousel lis are defined
MyListFormWidget.inherits(FormWidget);
//this function is called upon entering of the channel, and it’s the first function tha would be called
MyListFormWidget.prototype.onEnter = function onEnter(_data){
var buttonList = this.widgets.buttonList;
buttonList.setData({
"text" : "" + PICTO_OK + " Validate item"
//picto is used for the representing a simple word or text or character in cool manner
});
buttonList.stateChange("enter");
//will see on the screen means enter on the screen
var list = this.widgets.categoryList,
data = this.data,
listItems = [];
for (var i = 0, n = data.length; i < n; i++)
listItems.push({"text":data[i].label, "subitems":data[i].items});
list.setData(listItems);
//set data for the item list and their related carousel list
list.stateChange("enter");
//enter on the screen
}
MyListFormWidget.prototype.onExit = function onExit()
{
}
//here we perfrm the different function on pressing the different key
MyListFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
var widgets = this.widgets;
switch (_key) {
case "KEY_UP":
widgets.categoryList.scrollPrev();
return true;
case "KEY_DOWN":
widgets.categoryList.scrollNext();
return true;
case "KEY_LEFT":
widgets.carouselList.scrollPrev();
return true;
case "KEY_RIGHT":
widgets.carouselList.scrollNext();
return true;
//scrollNext(),scrollPrev() are inbuilt function and we can understand the purpose to use this by // their name
case "KEY_IRENTER":
if (this.selectedItem)
statusMessage.add("You have validated this item: " + this.selectedItem.title, 4000);
//this is like the alert function in the netgem
return true;
}
return false;
}
//this fnction is called when item list is focussed
MyListFormWidget.prototype.onFocusCategoryList = function onFocusCategoryList(_focus, _data)
{
var widgets = this.widgets;
//this variable takes two value true or false
if (_focus) {
var item = _data.item;
var subitems = item.subitems,
listItems = [];
for (var i = 0, n = subitems.length; i < n; i++)
listItems.push({"title":subitems[i]});
widgets.carouselList.animatedSetData(listItems, "exit", "enter");
//here data is set on the item list like the title of the carousel list
//it set data in some animated form
// but it in the setdata data are set normally
} else {
widgets.carouselList.animatedClearData();
//clear the data from the item list
}
}
//this functionis called when the focus is on the carousel list
MyListFormWidget.prototype.onFocusCarouselList = function onFocusCarouselList(_focus, _data)
{
var widgets = this.widgets;
if (_focus) {
var item = _data.item;
this.selectedItem = item;
widgets.info.setDataAnimated({
"title":item.title,
"desc":"Here you could place a custom description retrieved from the data structure for the item " + item.title + ".",
});
} else {
this.selectedItem = null;
widgets.info.stateChange("exit");
}
}
Thank you Deepak Gupta !
Request for Proposal
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Deepak Gupta
Deepak is a bright Groovy and Grails developer