docs/content/programming-guide/script-overview.md

   1 <!--
   2 /**-->
   3
   4 # Scripting Overview  {#scriptoverview}
   5
   6 DALi has JSON to support:
   7 - layouting
   8 - theme / styling
   9 - templated actor/control creation
  10 - basic actions
  11 - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
  12
  13 JSON support is built in to DALi.
  14
  15 Files can be loaded inside any DALi application, or from command line using the launcher (part of dali-demo).
  16
  17 ~~~{.cpp}
  18 scripting.example hello-world.json
  19 ~~~
  20
  21 We currently have JSON example files held in dali-demo/resources/scripts
  22
  23 # JSON
  24
  25 JSON file contains different sections:
  26 - **Templates** actor & control tree creation
  27 - **Styles** used to style actor & control trees
  28 - **Animations**
  29 - **Instances** of objects for path, renderTasks, frameBuffers
  30 - **Stage**. A list of actors / controls that can be added to the stage
  31 - **Constants**  (e.g. positions / colors, that can be references by other parts of the JSON file);
  32 - **Actions**
  33
  34 ## Examples
  35
  36 ### JSON templates section
  37
  38 ~~~{.json}
  39
  40     “templates”:
  41     {
  42       "name":"users",
  43       "type":"Actor",
  44       "parentOrigin":"TOP_CENTER",
  45       "anchorPoint":"TOP_CENTER",
  46       "size":"{DEFAULT_MENU_USER_SIZE}",
  47       "colorMode":"USE_OWN_COLOR",
  48       "actors":
  49       [
  50         {
  51           "name":"usersBackground",
  52           "type":"ImageView",
  53           "parentOrigin":"CENTER",
  54           "anchorPoint":"CENTER",
  55           "size":"{DEFAULT_MENU_USER_SIZE}",
  56           "colorMode":"USE_OWN_COLOR",
  57           "image":{ "url":"{IMAGE_PATH}white-pixel.png" },
  58           "color":"{DEFAULT_MENU_BACKGROUND_COLOR}"
  59         },
  60         {
  61           "name":"icon",
  62           "type":"ImageView",
  63           "parentOrigin":"TOP_CENTER",
  64           "anchorPoint":"TOP_CENTER",
  65           "position":[0,41,1],
  66           "image":{ "url":"{IMAGE_PATH}ico_man_nor.png" }
  67         },
  68       ]
  69     },
  70
  71
  72 ~~~
  73
  74 #### C++ example
  75
  76 ~~~{.cpp}
  77 Builder builder = Builder::New();
  78
  79 std::string jsonData = loadFile("my-app.json");
  80
  81 builder.LoadFromString( jsonData );
  82
  83 Actor userActorTree = builder.Create("users");
  84 ~~~
  85
  86
  87 ### JSON styles section
  88
  89 ~~~{.json}
  90 “styles”:
  91   {
  92     “live-tv-focus":
  93     {
  94       "actors":
  95       {
  96         "background":
  97         {
  98           "image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
  99           "color":"{DEFAULT_MENU_ITEM_COLOR_1}"
 100         },
 101         "icon":
 102         {
 103           "image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
 104         },
 105         "label":
 106         {
 107           "colorAlpha":1,
 108           "text":"<font size='20' weight='bold'><b>LIVE</b></font>"
 109         }
 110       }
 111     },
 112   }
 113 ~~~
 114
 115 #### C++ example
 116
 117 ~~~{.cpp}
 118 builder.ApplyStyle( "live-tv-focus", tvIcon );
 119 ~~~
 120
 121 ### JSON animations section
 122
 123 ~~~{.json}
 124 "animations":
 125   {
 126     "animate-show":
 127     {
 128       "duration":0.5,
 129       "properties":
 130       [
 131         {
 132           "actor":"background",
 133           "property":"positionX",
 134           "value":30,
 135           "alphaFunction":"EASE_IN_OUT"
 136         },
 137         {
 138           "actor":"itemsBackground",
 139           "property":"colorAlpha",
 140           "value":0.85,
 141           "timePeriod": {"delay": 0.25, "duration": 0.25 },
 142           "alphaFunction":"EASE_IN_OUT"
 143         },
 144         {
 145           "actor":"usersBackground",
 146           "property":"colorAlpha",
 147           "value":0.85,
 148           "timePeriod": {"delay": 0.25, "duration": 0.25 },
 149           "alphaFunction":"EASE_IN_OUT"
 150         }
 151       ]
 152     },
 153 ~~~
 154
 155 #### C++ example
 156
 157 ~~~{.cpp}
 158 // C+++
 159
 160 Animation anim = builder.createAnimation( "animate-show", propertyMap );
 161 ~~~
 162
 163 ### JSON stage section
 164
 165 ~~~{.json}
 166
 167 “stage": [{
 168       "name":"simple-table",
 169       "type":"TableView",
 170       "backgroundColor": [0.5,0.5,0,1],
 171       "parentOrigin": "CENTER",
 172       "size":[400,500,1],
 173       "rows": 4,
 174       "columns":4,
 175       "cellPadding": [10, 5],
 176       "layoutAnimationDuration": 0.5,
 177       "layoutRows": {  // set the height of the rows
 178         "0": { "policy": "fixed", "value": 40 },
 179         "1": { "policy": "relative", "value": 0.33 },
 180         "2": { "policy": "fixed", "value": 120 }
 181       },
 182       "layoutColumns": { // set the widths of the columns
 183         "1": { "policy": "fixed", "value": 150 },
 184         "2": { "policy": "relative", "value": 0.35 },
 185         "3": { "policy": "relative", "value": 0.15 }
 186       },
 187       "actors": [{
 188           "name":"gallery-1",
 189           "type":"ImageView",
 190           "image": {
 191             "url": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
 192           },
 193           "customProperties": { // properties registered dynamically
 194             "cellIndices": [0,0],// property to specify the top-left cell this child occupies
 195             "rowSpan":4, // property to specify how many rows this child occupies, if not set, default value is 1
 196             "columnSpan":1 // property to specify how many columns this child occupies
 197             ....
 198 ~~~
 199
 200 #### C++ example
 201
 202 ~~~{.cpp}
 203 // add all actors under stage section to the root layer
 204 builder.AddActors( Stage::GetCurrent().GetRootLayer() );
 205 ~~~
 206
 207
 208 */