"basicPanel":{
        "rx"            : 100,
        "fill"          : "0-#FF00FF|1-#000000",
        "fill_coords"   : "0,0,1,0",
        "stroke"        : "0-#000000|1-#FFFFFF",
        "stroke_coords" : "0,0,1,0",
        "stroke_width"  :  2,
        "stroke_pos"    : "outside",
        "shadow"        : "0-rgba(0,0,0,.2)|1-rgba(0,0,0,.5)",
        "shadow_coords" : "0,0,0,1",
        "shadow_dx"     : 3,
        "shadow_dy"     : 3
    },

"basicPanel":{
        "rx"            : 100,
        "fill"          : "0-#FFFFFF|1-#000000",
        "fill_coords"   : "0,0,1,0",
        "stroke"        : "0-#000000|1-#FFFFFF",
        "stroke_coords" : "0,0,1,0",
        "stroke_width"  :  2,
        "stroke_pos"    : "outside",
        "shadow"        : "0-rgba(0,0,0,.2)|1-rgba(0,0,0,.5)",
        "shadow_coords" : "0,0,0,1",
        "shadow_dx"     : 3,
        "shadow_dy"     : 3
    },

MyFormWidget.prototype.onEnter = function onEnter(_data)
{
    var w = this.widgets;
    w.basicPanel.setData();
    w.basicPanel.stateChange("enter");
    w.defaultPanel.setData();
    w.defaultPanel.stateChange("enter");
    w.focusPanel.setData();
    w.focusPanel.stateChange("enter");
    w.almostDefaultPanel.setData();
    w.almostDefaultPanel.stateChange("enter");
    w.anotherBasicPanel.setData();
    w.anotherBasicPanel.stateChange("enter");
    w.sizeAndPosPanel.setData();
    w.sizeAndPosPanel.stateChange("enter");
    w.funkyPanel.setData();
    w.funkyPanel.stateChange("enter");
    w.exampleTitle.setData({"display":false});
    w.exampleTitle.stateChange("enter");
    
}
/*
 * When thema is defined, you can use Canvas.drawShape() in your draw callBack.
 * 
 * This function allows you to easily draw different types of shapes into a drawing context.
 * You don't have to parse the custo manually: as it is normalized you just have to get it from a thema and to pass it to the funtion.
 * The parameters are:
 * 
 * ctx: a CanvasRenderingContext2D object
 * shape: a String identifying a type of shape, basically "rect" or "circle"
 * coords: an Array containing a list of coordinates
 * - "rect" shape type, coords needs to have 4 or 8 elements (the 4 last values can be all booleans or all numbers): x, y, w, h, rounded_topleft, rounded_topright, rounded_bottomright, rounded_bottomleft
 * - "circle" shape type, coords needs to have 3 elements: x, y, radius
 * - "polygon" shape type, coords needs to have a number of elements multiple of 2: x1, y1, x2, y2, x3, y3, ...
 * - "polygon:relative" as shape type, the first couple of coords indicates the coordinates of the first point of the polygon, and the following couples of coordinates are relative each to the previous one:
 * custo: an Object representing a normalized shape customization
 * 
 * the function name that is used below is used in the MyFormWidget.json file in the draw key
* you can see the code below this code 
 */
function drawBasicPanel()
{
    var ctx    = this.getContext("2d"),
       custo  = this.themaData,
    // Use Context Width and Height (minus shadow size or it won't be displayed)
    //ctx.viewportWidth gives the width define in the json of MyFormWidget.json
    //custo.shadow_dx gives the coordinate define in the theme.json
        w      = ctx.viewportWidth - custo.shadow_dx,
        h      = ctx.viewportHeight - custo.shadow_dy;
       Canvas.drawShape(ctx, "rect", [0, 0, w, h], custo);
   }


//drawshape() method is used for drawing the shape 
function drawDefaultPanel()
{
    var ctx = this.getContext("2d"),
        custo  = this.themaData,
        w = ctx.viewportWidth - custo.shadow_dx,
        h = ctx.viewportHeight - custo.shadow_dy;
    Canvas.drawShape(ctx, "rect", [0, 0, w, h], custo);
    
    
}

function drawFocusPanel()
{
    var ctx = this.getContext("2d"),
        custo  = this.themaData,
        w = ctx.viewportWidth - custo.shadow_dx,
        h = ctx.viewportHeight - custo.shadow_dy;
    Canvas.drawShape(ctx, "rect", [0, 0, w, h], custo);
}

function drawAlmostDefaultPanel()
{
    var ctx = this.getContext("2d"),
        custo  = this.themaData,
        w = ctx.viewportWidth - custo.shadow_dx,
        h = ctx.viewportHeight - custo.shadow_dy;
    Canvas.drawShape(ctx, "rect", [0, 0, w, h], custo);
}

function drawAnotherBasicPanel()
{
    var ctx = this.getContext("2d"),
        custo  = this.themaData,
        w = ctx.viewportWidth - custo.shadow_dx,
        h = ctx.viewportHeight - custo.shadow_dy;
    Canvas.drawShape(ctx, "rect", [0, 0, w, h], custo);
}

function drawSizeAndPosPanel()
{
    var ctx   = this.getContext("2d"),
        custo = this.themaData,
        shape = custo.shape;
    Canvas.drawShape(ctx, "rect", shape, custo);
}

function drawFunkyPanel()
{
    var ctx           = this.getContext("2d"),
        custo         = this.themaData;
    
    var custoBG       = custo.bg;
    Canvas.drawShape(ctx, "rect", custoBG.shape, custoBG);
    
    var custoReflection = custo.reflection;
    Canvas.drawShape(ctx, "rect", custoReflection.shape, custoReflection);
    
    var custoGlossy       = custo.glossy;
    Canvas.drawShape(ctx, "rect", custoGlossy.shape, custoGlossy);
    
    var custoShiny       = custo.shiny;
    Canvas.drawShape(ctx, "rect", custoShiny.shape, custoShiny);
    
    var custoBadge  = custo.badge;
    Canvas.drawShape(ctx, "circle", custoBadge.shape, custoBadge);
    
    var custoStar  = custo.star;
    Canvas.drawShape(ctx, "polygon", custoStar.shape, custoStar);
    
}

//drawText method is used for drawing the shape 

function drawExampleTitle(displayExampleTitle)
{
    var ctx    = this.getContext("2d"),
        custo  = this.themaData,
        infoRect = new Rect(70, 660, 1140, 30),
        help = "Press v  to display example caption.";
        ctx.beginObject();
        ctx.clear();
    
    if (displayExampleTitle.display){
        help = "Press v  to hide example caption.";
        Canvas.drawText(ctx, "Example 1  Basic Shape", new Rect(100,90,320,180), custo);
        Canvas.drawText(ctx, "Example 2  Use Default Values", new Rect(480,90,320,180), custo);
        Canvas.drawText(ctx, "Example 3  Use Many Default Values", new Rect(860,90,320,180), custo);
        Canvas.drawText(ctx, "Example 4  OverWritting Default Values", new Rect(100,290,320,180), custo);
        Canvas.drawText(ctx, "Example 5  Refering Local Values", new Rect(480,290,320,180), custo);
        Canvas.drawText(ctx, "Example 6  Defining Size and Positions", new Rect(860,290,320,180), custo);
        Canvas.drawText(ctx, "Example 7  Funky Panel ;)", new Rect(480,480,320,180), custo);
    }
    
    Canvas.drawText(ctx, help, infoRect, custo);
    
    ctx.drawObject(ctx.endObject());
}

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


MyFormWidget.prototype.onKeyPress = function onKeyPress(_key)
{
    NGM.trace("myForm received a key: " + _key);
    
    switch (_key) {
        case "KEY_IRENTER":
        var w = this.widgets;
            w.exampleTitle.setDataAnimated(w.exampleTitle.data.display ? {"display":false} : {"display":true});
            return true;
            break;
    }
    
    return false;
}

 "basicPanel": {
            "create": "CanvasWidget",
            "param": {
                "w": 320,
                "h": 180,
                "fill":"#000000",
                "speed": 300,
                "zIndex": 1,
                "defaultState": "exit",
                "states": {
                    "enter" : { "x": 100, "y": 90, "w": 320, "h": 180, "a": 255 },
                    "exit"  : { "x": 100, "y": 90, "w": 0, "h": 0, "a": 0 }
                },
                "draw": "drawBasicPanel"
            }
        },.....