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] } } }}
- "create": "StreamControl",=> it create controller which controll the video’s stream
- param=> it create parameter for the view of form
- zindex=> it shows zindex for the widget panel when it open
- speed => it is the speed for opening that panel
- defaultState => it is by default not shown without any action
- enter, exit,full => it is layout state when exit or enter or full
- x,y,w,h =>x cordinate,y cordinate ,width and height
- "options" : ["tmpBuffer"],=>this saves few memory for the graphics
- inputwidget=>this create a input fields
- 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
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Deepak Gupta
Deepak is a bright Groovy and Grails developer