Creating sub menus in Netgem STB sdk

Posted By : Deepak Kumar | 13-May-2014

netgem

This blog will describe how to create application sub-menus in Netgem.

In Netgem we generally create child forms as sub menus.So let's have a look on steps,we need to do this.

step 1: Create a Parent class and set its inheritence to FormWidget.

	function Parent(_json, _options)
	{
	    this.super(_json, _options);
	    this._userData = _options.userData; 
	}
	Parent.inherits(FormWidget);

step 2 : Create Child Class and set its inheritence to FormWidget.

	function Child(config, options)  
	{  
	    this.super(config, options)  
	}  
	Child.inherits(FormWidget);

Step 3 : Now you have to register your child class with FormWidget System.You need to pass an ID, Child Class Name ,and path to its json configuration file.

	FormWidget.registerType("class1", Child, "Child.json");

You can also call FormWidget.registerTypeStandard() function.

Step 4: FormWidget.formOpenChild() method instantiates a formwidget and set it as child.

	return this.formOpenChild("class1", , "formOpenChild");

Step 5 : Now we can set state for parent form according to our need.Normally when a child form enters in focus state,parent form loses its focus.We can do this by using onBlur() and onFocus() function.

	Parent.prototype.onBlur = function onBlur(param)  
	{  
	    NGM.trace("Parent blur: " + param);  
	    this.widgets.infoPanel.stateChange("blur");  
	}  

	Parent.prototype.onFocus = function onFocus(param)  
	{  
	    NGM.trace("Parent focus: " + param);  
	    this.widgets.infoPanel.stateChange("enter");  
	}

Step 6 : Now we can handle different key Event . In this application , when a Parent form recieves KEY_IRENTER event it simply opens its child form or submenu form .And if Child form recieves KEY_IRBACK it simply closes.

	Parent.prototype.onKeyPress = function onKeyPress(_key)
	{
	 
	    switch (_key) {
	        case "KEY_IRENTER":
	            return this.formOpenChild("class1", , "formOpenChild"); 
	    }
	    return false;
	}

	Child.prototype.onKeyPress = function onKeyPress(_key)
	{
	    switch (_key) {
	        case "KEY_IRBACK":
	            return this.formClose("formClose");
	    }
	    return false;
	}

step 7 : Below is the json file content for parent Form.

	{
	 
	    "widgets": {
	        "infoPanel": {
	            "create": "CanvasWidget",
	            "param": {
	                "w": 640,
	                "h": 360,
	                "speed": 600,
	                "zIndex": 1,
	                "defaultState": "exit",
	                "states": {
	                    "enter" : { "x": 320, "y": 180, "w": 640, "h": 360, "a": 255 },
	                    "exit"  : { "x": 640, "y": 360, "w":   0, "h":   0, "a": 255 },
	                    "blur"  : { "x": 320, "y": 180, "w": 640, "h": 360, "a": 92 }
	                },
	                "draw": "infoPanelDraw"
	            }
	        }
	    }
	 
	}

Here is the final output of this application.