Create a Simple List and Different Layout using ScrollListWidget in Netgem

Posted By : Gaurav Tiwari | 18-Feb-2014

netgem

I am going to explain about how create simple list and different layout using ScrollListWidget .
we need to create the html file such as index.html
When we start the application ,there is NGM.application.start() method call.it start the application and instantiate the main form.
copy the following code in index.html

Here we create an array and add the data in arrayList, set the data using setData() function and change the state of the widgets so it can show the list. and we set the layout1,but on pressing key function ,you can interact the application , there are three layout of the list use in this application when you pressed 1 ,then layout1 is show, press 2 then layout2 is show,press 3 then layout3 is show, press 0 it hide the list from the screen. copy the following code into MyListFormWidget.js file

Below shown is the overview of the Display Screen of layout1.


MyListFormWidget.prototype.onEnter = function onEnter(_data){
    NGM.trace("Enter with data: " + _data); 
    var list = this.widgets.list;
    var listItems = [];
    for (var i = 1, n = this._userData.length; i <= n; i++)
	{
	listItems.push({"text": "Item " + i});
	}
         list.setData(listItems);
         list.stateChange("layout1");
}

MyListFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
    var list = this.widgets.list;
    switch (_key) {
        case "KEY_LEFT":
            list.scrollPrev();
            return true;
        case "KEY_RIGHT":
            list.scrollNext();
            return true;
        case "KEY_TV_1":
            list.stateChange("layout1");
            return true;
        case "KEY_TV_2":
            list.stateChange("layout2");
            return true;
        case "KEY_TV_3":
            list.stateChange("layout3");
            return true;
        case "KEY_TV_0":
            list.stateChange("exit");
            return true;
    }

    return false;
	}

In the json file we have one widget that is "ScrollListWidget" and id is "list", in this file you have to specified the parameter of each widget. in this list we set the three layout they will call on the different key press. copy the following code into MyListFormWidget.json file

Below shown is the overview of the Display Screen of layout2.

Below shown is the overview of the Display Screen of layout3.

{
    "widgets": {
        "list": {

            "param": {
                "zIndex"        : 5,
                "itemInitFunc"  : "Canvas.newScrollListItemText",
                "itemWidth"     : 200,
                "itemHeight"    : 200,
                "itemAnchor"    : {"x":100,"y":100},
                "nbItem"        : 9,
                "focusIndex"    : 4,
                "options"       : ["noloop"],
                "globalStates": {
                    "enter"     : { "x": 640, "y": 320, "w": 1280, "h": 720, "a": 255, "default": true }
                },
                "defaultState": "exit",
                "states": {
                    "layout1": {
                        "speed": 300,
                        "items": [
                            { "x": -880, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x": -660, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x": -440, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x": -220, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x":    0, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x":  220, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x":  440, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x":  660, "y": 0, "w": 200, "h": 200, "a": 255 },
                            { "x":  880, "y": 0, "w": 200, "h": 200, "a":   0 }
                        ]
                    },
                    "layout2": {
                        "speed": 300,
                        "items": [
                            { "x": -280, "y": 100, "w": 120, "h": 120, "a":   0 },
                            { "x": -260, "y": 100, "w": 140, "h": 140, "a": 255 },
                            { "x": -240, "y": 100, "w": 160, "h": 160, "a": 255 },
                            { "x": -200, "y": 100, "w": 180, "h": 180, "a": 255 },
                            { "x":    0, "y": 100, "w": 200, "h": 200, "a": 255 },
                            { "x":  200, "y": 100, "w": 180, "h": 180, "a": 255 },
                            { "x":  240, "y": 100, "w": 160, "h": 160, "a": 255 },
                            { "x":  260, "y": 100, "w": 140, "h": 140, "a": 255 },
                            { "x":  280, "y": 100, "w": 120, "h": 120, "a":   0 }
                        ]
                    },
                    "layout3": {
                        "speed": 300,
                        "items": [
                            { "x": -200, "y": 220, "w": 220, "h": 220, "a":   0 },
                            { "x": -200, "y": 220, "w": 220, "h": 220, "a":   0 },
                            { "x": -200, "y": 220, "w": 220, "h": 220, "a":   0 },
                            { "x": -200, "y": 220, "w": 220, "h": 220, "a":   0 },
                            { "x":  -60, "y": 200, "w": 200, "h": 200, "a": 255 },
                            { "x":    0, "y": 190, "w": 190, "h": 190, "a": 200 },
                            { "x":   50, "y": 180, "w": 180, "h": 180, "a": 150 },
                            { "x":   90, "y": 170, "w": 170, "h": 170, "a": 100 },
                            { "x":  120, "y": 160, "w": 160, "h": 160, "a":   0 }
                        ]
                    },
                    "exit": {
                        "speed": 300,
                        "items": [
                            { "x": -880, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x": -660, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x": -440, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x": -220, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x":    0, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x":  220, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x":  440, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x":  660, "y": 0, "w": 200, "h": 200, "a":   0 },
                            { "x":  880, "y": 0, "w": 200, "h": 200, "a":   0 }
                        ]
                    }
                },

                "scrollbar": {
                    "align"         : "center",
                    "speed"         : 300,
                    "w"             : 320,
                    "h"             : 20,
                    "sideSize"      : 18,
                    "itemSize"      : 8,
                    "zIndex"        : 1,
                    "defaultState"  : "enter",
                    "bounds"        : {"x": -160, "y": 320}
                }
            }
        }
    }
}

Thanks Gaurav Tiwari