Blog

  • 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

Tags: netgem , iptv