UI customization in Netgem App using Thema

Posted By : Raman Joshi | 20-Aug-2014

netgem

In this blog we understand about the UI customization in Netgem App using Thema. The User Interface customization is done with the help of Thema .json files. You can change or add the properties of any widgets by using Thema file.

What is Thema?

Thema is a .json file that aggregates all the editable User Interface theme components. The JSON hierarchy will reflect the GUI. At each level of the structure you can put values to configure a visual element:

Fonts

- Font families : normal, bold or pictograms (a .ttf font file is required for each family. These files are set into clients/files)

- Font size

Colors

- Hexadecimale colors (e.g., #FFF or #E2007A)

- RGBA colors (e.g., rgba(206,0,122,0.5), where the last value represents the transparency or alpha and it goes from 0 ”transparent” to 1 ”opaque”

- Gradients colors (ex: ”0-#FFFFFF—1-#000000”)

- Gradient orientation:

A linear gradient has 4 relative coordinates x1,y1,x2,y2 (ex: ”0,0,1,0” is a linear gradient from the top to the bottom of the shape)

A radial gradient has 3 relative coordinates x,y,r (ex: ”0,0,1” is a radial gradient centered in the top fet corner of the shape)

Size and Position

- You can define size and position for any UI element, using ”x”, ”y”, ”w”, ”h”

- You can define a shape for any UI element, using [x,y,w,h]

Custom Any custom value to define specific behaviour

How to organise Thema?

You can design a Thema as a JSON tree in which the first branches is called the sections and each section represent a specific part of the application.

You have to define Thema file in the index.html file when starting your application. For which you have to write this code.

First you have to make one widget for which you want to use Thema file.

 "widgets": {  
      ...  
      "progressBar": {  
           "create": CanvasWidget,  
           "param": {  
               "w": 640,  
               "h": 150,  
               "zIndex": 7,  
               "defaultState": "exit",  
               "bounds":{"x":340, "y":200 ,"w":640 ,"h":150},  
               "draw": GridEPG.waitingMessageDraw,  
           },  
       },  
   }

For example, here is the default thema section for progress bars :

 "progressBar":{  
    "bg" : {  
        "fill"          : "0-#001B3c|1-#0073AD",  
        "stroke"        : "rgba(0,0,0,0)",  
        "stroke_width"  : 0,  
        "rx"            : 7,  
        "h"             : 14  
    },  
    "fg" : {  
        "fill"          : "0-#F6E5AD|1-#FDB813",  
        "stroke"        : "rgba(0,0,0,0)",  
        "stroke_width"  : 0,  
        "rx"            : 5,  
        "h"             : 10,  
        "padding"       : 2,  
        ":download":{  
            "fill":"0-#666666|1-#333333"  
        },  
        ":warning":{  
            "fill":"0-#FFCC99|1-#EE7700"  
        },  
        ":free":{  
            "fill":"0-#7AF64C|1-#369B1A"  
         },  
         ":alert":{  
            "fill":"0-#666666|1-#990000"  
         }  
    },  
    "loading

In this example four states are defined for the foreground of progress bar("fg") which is download, warning, free, alert.

A state is defined like this : ”:<name of the state >”

Inside the state declaration, override all or part of the widget’s thema.

In the tutorial ’Progress Bars’, the states are retrieved in the drawing function :

this.drawNewProgressBar(ctx, pbarBounds,

{"custo":custoBg},

{"ratio":0.33, "custo":custoFg.getState("download")}

);

On the customization object, call the getState method with the corresponding name as single parameter to get the merged customization object.

Thanks