Open a FORM using custom class in NETGEM STB SDK

Posted By : Deepak Gupta | 07-Feb-2014

In this blog I will explain  how to open the FORM using a custom class . i will share the code to open the form and important problem for opening this form .

Step to open form is given below:-

Form looks what you see by this blog

First create two file . First file of extension js and second of json. I create two file with name MyClass2.js and MyClass2.json. In MyClass2.json create the layout (css) for the form.

code of MyClass2.json:-

{
	"widgets": {
                     "streamCtrl": {
            "create": "StreamControl",
            "param": {
                "zIndex": 5,
                "speed": 300,
                "defaultState": "exit",
                "states":     { 
                   "enter" : {"x": 0, "y":0, "w": 1280, "h": 720, "a": 255 },
                   "full" : {  "x": 320, "y": 180, "w": 640, "h": 440, "a": 255  },
                   "exit"  : { "x": 640, "y": 360, "w":   0, "h":   0, "a": 255 }
                },
                "event": {
                    "*": "onStreamEvent"
                },
                "json": "streamControlDefautJSON"
            }
        },
 "info": {
            "create": "PainterWidget",
            "param": {
                "w"         : 560,
                "h"         : 550,
                "zIndex"    : 15,
                "speed"     : 300,
                "options"   : ["tmpBuffer"],
                 "bounds"    : {"x": 380, "y": 85},
				 "states": { 
                   "enter" : {"x": 350, "y":85, "w": 560, "h": 550, "a": 255 },
                   "exit" : {"x": 350, "y":85, "w": 560, "h": 550, "a": 0 }
                },
                "elements": [
                    { "type": "rect", "id": "panel", "bounds": {"x":  0,"y":  0,"w": 560,"h":550}, "custo": "panel" },
					{ "type": "rect", "id": "panel", "bounds": {"x": 30,"y": 30,"w": 500,"h":40}, "custo": "panel" },
					{ "type": "text", "id": "status",  "bounds": {"x":50,"y": 35,"w": 400,"h":30}, "custo": "title" },
					{ "type": "text", "id": "duration",  "bounds": {"x": 200,"y": 35,"w": 260,"h":30}, "custo": "title" },
					{ "type": "rect", "id": "panel", "bounds": {"x": 30,"y": 200,"w": 500,"h":240}, "custo": "panel" },
					{ "type": "text", "id": "information",  "bounds": {"x": 50,"y":210,"w": 460,"h":127}, "custo": "textarea" },
					{ "type": "image", "id": "myimg","bounds": {"x": 30,"y":270,"w": 460,"h":100} },
					{ "type": "text", "id": "email",  "bounds": {"x": 30,"y":100,"w": 410,"h":30}, "custo": "textarea" },
					{ "type": "text", "id": "password",  "bounds": {"x": 30,"y":150,"w": 410,"h":30}, "custo": "textarea" },
					{ "type": "rect", "id": "panel", "bounds": {"x": 30,"y": 475,"w": 500,"h":40}, "custo": "panel" },
                   	{ "type": "text", "id": "date",  "bounds": {"x": 130,"y": 480,"w": 110,"h":30}, "custo": "title" },
					{ "type": "image", "id": "ok", "scaleType": "aspectFit",   "bounds": {"x": 290,"y": 487,"w": 41,"h":16}},
					{ "type": "text", "id": "goBack",  "bounds": {"x": 350,"y": 480,"w": 100,"h":30}, "custo": "title" }

                ]
            }
        },

		                 "passwordInput": {
                                             "create": "InputWidget",
                                             "param": {
                                                        "w": 355,
                                                        "h": 40,
                                                         "speed": 300,
                                                         "zIndex": 17,
                                                         "bounds": { "x": 520, "y": 233 },
                                                         "maxLength": 30,
                                                         "delay": 1000,
                                                         "key":  ["default"],
				         "hidden": true,
                                                        "scrollList": [6, 205, 30, 150]
                                                       }
                                            },

                          "userNameInput": {
                                             "create": "InputWidget",
                                             "param": {
                                                        "w": 355,
                                                        "h": 40,
                                                         "speed": 300,
                                                         "zIndex": 17,
                                                         "bounds": { "x": 520, "y": 183 },
                                                         "maxLength": 60,
                                                         "delay": 1000,
			                     "key":  ["default"],
                                                         "scrollList": [6, 205, 30, 150]
                                                       }
                                            }
                   }}

 

  1. "create": "StreamControl",=> it create controller which controll the video’s stream
  2. param=> it create parameter for the view of form
  3. zindex=> it shows zindex for the widget panel when it open
  4. speed => it is the speed for opening that panel
  5. defaultState => it is by default not shown without any action
  6. enter, exit,full => it is layout state when exit or enter or full
  7. x,y,w,h =>x cordinate,y cordinate ,width and height
  8. "options" : ["tmpBuffer"],=>this saves few memory for the graphics
  9. inputwidget=>this create a input fields
  10. hidden:true=>this is used for password field’s text

 

Now its time to use this layout in our .js file

 

code of MyClass2.js:-

 function MyClass2(config, options)
{
                this.super(config, options);
	    this._lastFocusedInput = null;
}

//Above code are constructor of class
MyClass2.inherits(FormWidget);

//Above code inherits superclass

FormWidget.registerType("class2", MyClass2, "./MyClass2.json");

//Above code register the json file in our own class

MyClass2.prototype.onEnter = function onEnter(_data)
{
        var widgets = this.widgets,

//holds the all json widget object in a variable

        info = widgets.info,

//here above and below code  access the widget

        userNameInput = widgets.userNameInput,
        passwordInput = widgets.passwordInput,
        infoData = [];
	 	info.setData({			 
            status:"My Form",
			duration:"", 
			information:"Enter the name  and password and play video if you are valid user ",
			myimg:"./myimages.jpg",
   			email:"Email",
			password:"Password",
			date:"OK Enter",
			goBack:"Cancel",
			ok:"./back.png",
        });

//here set the data for the info widget that will be shown on widget

    info.stateChange("enter");

//for open the widget

    userNameInput.setData();
    passwordInput.setData();

//set the blankdata for the input fields 
	userNameInput.stateChange('enter');
	passwordInput.stateChange('enter');

//showing of fields on form widget 
    this.setInputFocus(userNameInput);
  //set focus on fields
};

status,duration,information,myimg,email,password,date,goBack,ok these are also id of the layout which are defined in the json file for their corresponding data or image given in the above .

 

Function for focusing the field of form:-

 

 

MyClass2.prototype.setInputFocus = function setInputFocus(newInput)
{
    var widgets = this.widgets,
        oldInput = this._lastFocusedInput;
    
    if (newInput === oldInput) return;
    
    if (oldInput) {
        oldInput.setFocus(false);
        this._lastFocusedInput = null;
    }
    
    newInput.setFocus(true);
    this._lastFocusedInput = newInput;
};

IMPORTANT CONFIGURATION FOR OUR FORM-:

In index.html====>

 

 

Calling MyClass2.js in our main class:-

 

 


FormWidget.registerTypeStandard("MyFormWidget");
function MyFormWidget(_json, _options)
{
    this.super(_json, _options);
    this._userData = _options.userData; // use UserData as you want
}
MyFormWidget.prototype.onEnter = function onEnter(_data)
{
	this.formOpenChild("class2", "formOpenChild");

//open the form of our class
};

Thanks Deepak Gupta

About Author

Author Image
Deepak Gupta

Deepak is a bright Groovy and Grails developer

Request for Proposal

Name is required

Comment is required

Sending message..