Simple app of User Customization in Netgem

Posted By : Gaurav Tiwari | 17-Feb-2014

I am going to explain about user customization interface and how to use drawShape() method
draw rectangle shape using canvas.drawShape() takes four parameter. Canvas.drawShape(ctx, "rect", rect, this.themaData); 1.context( getContext from 2d) of the shape 3.bounds 4.thema object, or you can specify particular property of thema file.

we need to create the html file such as index.html
When we start the application ,there is NGM.application.start() method start the application and initiate the main form.
copy the following code in index.html



Below shown is the overview of the Display Screen.

In this blog drawShape() method access the panel from the MyFormWidget.json ,and set the data using setData() method and change the state of panel. Thema data panel section inherits from drawShape so can be used with Canvas.drawShape.

MyFormWidget.prototype.onEnter = function onEnter(_data)
    var panel = this.widgets.panel;

MyFormWidget.drawPanel = function drawPanel()
    NGM.trace("Panel data:");

    var ctx = this.getContext("2d"),
    rect = Rect.fromContext(ctx);
    Canvas.drawShape(ctx, "rect", rect, this.themaData);
MyFormWidget.json file is used to give the shape and size of the panel , it define the method which is used such as drawpanel by using draw key in MyformWidget.json copy the following code in MyformWidget.json


"panel": {
            "create": "CanvasWidget",
            "param": {
                "w": 640,
                "h": 300,
                "speed": 300,
                "zIndex": 15,
                "defaultState": "exit",
                "states": {
                    "enter" : { "x": 310, "y": 170, "w": 440, "h": 200, "a": 255 },
                    "exit"  : { "x": 640, "y": 360, "w":   0, "h":   0, "a": 255 }
                "draw": "drawPanel"

The goal is to define thema files for drawing function and organizing them corresponding to your application structure json files. and MyThema.json file and will defined panel used which method to draw ,such as in this file it used drawShape() method.

    "foo": {
        "bar": 42
    "panel<@drawShape": {}


About Author

Author Image
Gaurav Tiwari

Gaurav is a bright Java and Grails developer and have worked on development of various SaaS applications using Grails framework.

Request for Proposal

Name is required

Comment is required

Sending message..