Create and Debug your first Application with Netgem

Posted By Ajit Jati | 14-Nov-2013

Create and Debug your first Application with Netgem

After successfully setting up the netgem environment , one should seek to learn the first hello world program on tv as well as on debugging from monitor.
This blog will drive you through the steps to create your first netgem application.

  • We will start our application with NGM.application.start().it will load the corresponding js file automatically related to the main form.so replace the index.html with the following code.
<html><head>
<meta http-equiv="cache-control" content="no-cache">
<script src="lib:/module/public/std.js"></script>
<script>navigator.report_catch = 1</script>
<script>
NGM.application.start({
    MainForm: "MyListFormWidget",
	 Thema: {"file": "myThema.json"}  
});
</script>
<script>NGM.trace("Hello world")</script>
</head></html>

Note :You must enable the setting navigator.report_catch to display exception information on your monitor. For debug purpose we must disable http cahe i.e content="no-cache".

NGM.trace() method displays messages in monitor.

  • Now Myformwidget.js will be loaded.The first function will be called in it is onEnter.So replace the with the following code.
FormWidget.registerTypeStandard("MyFormWidget");


function MyFormWidget(_json, _options)
{
    this.super(_json, _options);
    this._userData = _options.userData; // use UserData as you want
}
MyFormWidget.inherits(FormWidget);

MyFormWidget.prototype.onEnter = function onEnter(_data)
{
    var ctx = canvas.getContext("2d");
    ctx.clear();
    ctx.fillStyle = "white";
    ctx.fillText(50, 40, "Hello world");
    canvas.animation.setEnable().move(320, 240).start();
    canvas.animation.show(1000).start();
    this._canvas = canvas;
}

MyFormWidget.prototype.onExit = function onExit()
{
}

MyFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
    NGM.trace("myForm received a key: " + _key);
    return false;
}
        
  • In the onEnter function,we will craete a pure javascript canvas object with specified parameters(width = 320, height =260 etc)and initialize graphic buffer as well.
  • Bydefault Canvas is disable and hidden , we have to enable it by setEnable.
  • canvas.animation.show(1000).start() will start the buffer with fade effect after 1 sec.
  • this._canvas = canvas makes sure no more reference on it will cause destruction.

Finally you can see something like this picture with some effects on your tv. Cheers :))

Request for Proposal

Recaptcha is required.

Sending message..