Basic Scroll List

Posted By : Mohit Virmani | 31-Dec-2013

netgem

Basic Scroll List

In this blog, you will learn how to create a Netgem Channel to draw different items layout and scolling in between them using a ScrollList.

Below shown is an image of the output on screen.

Firstly, we need to create a new file named index.html and the below code has to be copied to index.html, which is used to start the application using the function NGM.application.start().

Here NGM.application.start() would load the corresponding js, here MyFormWidget.js .

Firstly, we'll define the widgets for the items to be drawn and then scrolled.

Below code goes to a new json file which needs to be created, named MyFormWidget.json


{
    "widgets": {
        "list": {
            "create": "ScrollListWidget",
            "param": {
                "onFocus": "onListFocus",
                "itemWidth": 200,
                "itemHeight": 200,
                "focusIndex": 3,
                "nbItem": 8,
                "zIndex": 1,
                "defaultState": "exit",
                "states": {
                    "enter": {
                        "speed": 300,
                        "items": [
                              { "x":-120, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 100, "y": 260, "w": 200, "h": 200, "a": 255 },
                              { "x": 320, "y": 260, "w": 200, "h": 200, "a": 255 },
                              { "x": 540, "y": 260, "w": 200, "h": 200, "a": 255 },
                              { "x": 760, "y": 260, "w": 200, "h": 200, "a": 255 },
                              { "x": 980, "y": 260, "w": 200, "h": 200, "a": 255 },
                              { "x":1100, "y": 260, "w": 200, "h": 200, "a": 0 }
                        ]
                    },
                    "exit": {
                        "speed": 300,
                        "items": [
                              { "x":-120, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 100, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 320, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 540, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 760, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x": 980, "y": 260, "w": 200, "h": 200, "a": 0 },
                              { "x":1100, "y": 260, "w": 200, "h": 200, "a": 0 }
                        ]
                    }
                }
            }
        }
    }

}

The above json would declare space for the items and initialize the widgets with the declared parameters.

Next, we'll describe the MyFormWidget.js to define the onEnter and onExit functions for the channel.

Thus, the below code needs to be copied to MyFormWidget.js


FormWidget.registerTypeStandard('MyFormWidget');

function MyFormWidget(_json, _options)
{
    this.super(_json, _options);
}
MyFormWidget.inherits(FormWidget);


MyFormWidget.prototype.onEnter = function onEnter(_data)
{
    var widgets = this.widgets,
        list = widgets.list;
    var data = [];
    
    data.push({
        init: {
            func: MyFormWidget.initListItem,
            param: {
                text: 'Square',
                shape: 'rect',
                coords: [10,10,180,180],
                custo: {
                    fill: '#c00',
                    stroke: 'black',
                    stroke_width: 2
                }
            }
        }
    });
    
    data.push({
        init: {
            func: MyFormWidget.initListItem,
            param: {
                shape: 'rect',
                coords: [10,50,180,100],
                custo: {
                    fill: '#0c0',
                    stroke: '#c00',
                    stroke_width: 2,
                    rx: 24
                }
            }
        }
    });
    
    data.push({
        init: {
            func: MyFormWidget.initListItem,
            param: {
                text: 'Circle',
                shape: 'circle',
                coords: [100,100,90],
                custo: {
                    fill: '0-rgba(0,255,0,0)|1-rgba(0,255,0,0.8)'
                }
            }
        }
    });
    
    data.push({
        init: {
            func: MyFormWidget.initListItem,
            param: {
                shape: 'polygon',
                coords: [10,190, 100,10, 190,190],
                custo: {
                    stroke: '0-black|1-yellow',
                    stroke_width: 2
                }
            }
        }
    });
    
    data.push({
        init: {
            func: MyFormWidget.initListItem,
            param: {
                shape: 'polygon:relative',
                coords: [10,10, 0,180, 180,-50, 0,-50],
                custo: {
                    fill: '0.4-rgba(0,0,255,0.2)|1-#00c',
                    fill_coords: '0,0,1,0',
                    stroke: '0.4-rgba(0,0,255,0.2)|1-#00c',
                    stroke_coords: '1,0,0,0',
                    stroke_width: 4
                }
            }
        }
    });
    
    list.setData(data);
    list.stateChange('enter');
}


MyFormWidget.prototype.onExit = function onExit()
{
    var widgets = this.widgets;
    
    widgets.list.stateChange('exit');
}

Since the ScrollListWidget doesn't have any draw method defined in JSON config file, thus the drawing methods must be defined on each item.

Here, each item of the list, must be an object having membed named "init", which would furthur should contain 2 members, func: the function to initialize an item, defined here by MyFormWidget.initListItem param: any type of data to pass to the initialize function.

Next we'll define onKeyPress events, and onListFocus using the follwing function in the MyFormWidget.js


MyFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
    NGM.trace('myForm received a key: ' + _key);
    var list = this.widgets.list;

    switch (_key) {
        case 'KEY_LEFT':
            return list.scrollPrev();
        case 'KEY_RIGHT':
            return list.scrollNext();
    }
    
    return false;
}

MyFormWidget.prototype.onListFocus = function onListFocus(focus, data)
{
    NGM.trace('myForm focus: ' + focus);
    NGM.dump(data);
}

Next we'll define the initListItem function in MyFormWidget.js

Here, the initialize method is called on canvas instance, in whcih we'll get somecanvas context and also, we'll be defining a draw function taking an argument focus, to get to know, if the item is focussed or not.

Next, the draw function, we drwa different shapes and text according to focus and data received.


MyFormWidget.initListItem = function initListItem(data)
{
    NGM.trace('MyFormWidget.initListItem');
    
    // canvas properties
    var ctx = this.getContext('2d'),
        w = ctx.viewportWidth,
        h = ctx.viewportHeight,
        themaData = this.themaData;
    
    // define the draw method
    this.draw = function draw(focus) {
        ctx.beginObject();
        ctx.clear();
        
        if (focus) {
            // add a shape under the focused item
            Canvas.drawShape(ctx, 'rect', [0, 0, w, h], {
                fill: '#0cc',
                rx: 20
            });
        }
        
        // draw the shape given by data
        Canvas.drawShape(ctx, data.shape, data.coords, data.custo);
        
        // draw text if defined
        if (data.text) {
            Canvas.drawText(ctx, data.text, new Rect(20, 75, w - 40, 50), themaData.text);
        }
        
        ctx.drawObject(ctx.endObject());
    }
}

Thus, the above tutorial explains creation of Scroll List using JSON declaration and setting the data into Scroll List with the help of user-defined functions. Also, we initialize the ScrollList using the function initListItem in MyFormWidget.js to get different items on screen and enabling us to navigate between those items.

You can download the source code for the above tutorial from here.

Thanks

Mohit Virmani