Simple app of User Customization in Netgem

I am going to explain about user customization interface and how to use drawShape() method
draw rectangle shape using canvas.drawShape() method.it takes four parameter. Canvas.drawShape(ctx, "rect", rect, this.themaData); 1.context( getContext from 2d) 2.name 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 call.it 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;
    NGM.dump(this.themaData.foo);
    panel.setData();
    panel.stateChange("enter");
}

MyFormWidget.drawPanel = function drawPanel()
{
    NGM.trace("Panel data:");
    NGM.dump(this.themaData);

    var ctx = this.getContext("2d"),
    rect = Rect.fromContext(ctx);
    Canvas.drawShape(ctx, "rect", rect, this.themaData);
    
}

{
"widgets":
{

"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": {}

}