docs/content/shared-javascript-and-cpp-documentation/script-overview.md

   1 <!--
   2 /**-->
   3
   4 # Scripting Overview  {#scriptoverview}
   5
   6 DALi has:
   7 - JSON to support:
   8  - layouting
   9  - theme / styling
  10  - templated actor/control creation
  11  - basic actions
  12  - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
  13
  14 - JavaScript to support:
  15  - Rapid Application Development
  16  - Hybrid C++/JavaScript applications
  17  - Leverage third party JavaScript modules (backbone.js etc)
  18
  19 JSON support is built in to DALi.
  20
  21 JavaScript support is via a plugin held in DALi Toolkit, which builds automatically if Google's V8 engine is installed.
  22 The V8 version required by DALi can be built and installed using dali-core/scripts/dali_env script.
  23
  24 Files can be loaded inside any DALi application, or from command line using the launcher ( part of dali-demo).
  25
  26 ~~~{.cpp}
  27 scripting.example hello-world.json hello-world.js
  28 ~~~
  29
  30 We currently have JSON and JavaScript example files held in dali-demo/resources/scripts
  31
  32 ![ ](../assets/img/javascript-wrapping-guide/scripting-overview.png)
  33 ![ ](scripting-overview.png)
  34
  35 # JSON
  36
  37 JSON file contains different sections:
  38 - **Templates** actor & control tree creation
  39 - **Styles** used to style actor & control trees
  40 - **Animations**
  41 - **Instances** of objects for path, renderTasks, frameBuffers
  42 - **Stage**. A list of actors / controls that can be added to the stage
  43 - **Constants**  (e.g. positions / colors, that can be references by other parts of the JSON file);
  44 - **Actions**
  45
  46 ## Examples
  47
  48 ### JSON templates section
  49
  50 ~~~{.json}
  51
  52     “templates”:
  53     {
  54       "name":"users",
  55       "type":"Actor",
  56       "parentOrigin":"TOP_CENTER",
  57       "anchorPoint":"TOP_CENTER",
  58       "size":"{DEFAULT_MENU_USER_SIZE}",
  59       "colorMode":"USE_OWN_COLOR",
  60       "actors":
  61       [
  62         {
  63           "name":"usersBackground",
  64           "type":"ImageView",
  65           "parentOrigin":"CENTER",
  66           "anchorPoint":"CENTER",
  67           "size":"{DEFAULT_MENU_USER_SIZE}",
  68           "colorMode":"USE_OWN_COLOR",
  69           "image":{ "url":"{IMAGE_PATH}white-pixel.png" },
  70           "color":"{DEFAULT_MENU_BACKGROUND_COLOR}"
  71         },
  72         {
  73           "name":"icon",
  74           "type":"ImageView",
  75           "parentOrigin":"TOP_CENTER",
  76           "anchorPoint":"TOP_CENTER",
  77           "position":[0,41,1],
  78           "image":{ "url":"{IMAGE_PATH}ico_man_nor.png" }
  79         },
  80       ]
  81     },
  82
  83
  84 ~~~
  85
  86 #### JavaScript example
  87
  88 ~~~{.js}
  89
  90 var builder = new dali.Builder();
  91
  92 builder.loadFromFile( "my-app.json");
  93
  94 var userActorTree = builder.create( { template:"users"} );
  95
  96 ~~~
  97
  98 #### C++ example
  99
 100 ~~~{.cpp}
 101 Builder builder = Builder::New();
 102
 103 std::string jsonData = loadFile("my-app.json");
 104
 105 builder.LoadFromString( jsonData );
 106
 107 Actor userActorTree = builder.Create("users");
 108 ~~~
 109
 110
 111 ### JSON styles section
 112
 113 ~~~{.json}
 114 “styles”:
 115   {
 116     “live-tv-focus":
 117     {
 118       "actors":
 119       {
 120         "background":
 121         {
 122           "image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
 123           "color":"{DEFAULT_MENU_ITEM_COLOR_1}"
 124         },
 125         "icon":
 126         {
 127           "image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
 128         },
 129         "label":
 130         {
 131           "colorAlpha":1,
 132           "text":"<font size='20' weight='bold'><b>LIVE</b></font>"
 133         }
 134       }
 135     },
 136   }
 137 ~~~
 138
 139 #### JavaScript example
 140
 141 ~~~{.js}
 142 builder.applyStyle( "live-tv-focus", tvIcon );
 143 ~~~
 144
 145 #### C++ example
 146
 147 ~~~{.cpp}
 148 builder.ApplyStyle( "live-tv-focus", tvIcon );
 149 ~~~
 150
 151 ### JSON animations section
 152
 153 ~~~{.json}
 154 "animations":
 155   {
 156     "animate-show":
 157     {
 158       "duration":0.5,
 159       "properties":
 160       [
 161         {
 162           "actor":"background",
 163           "property":"positionX",
 164           "value":30,
 165           "alphaFunction":"EASE_IN_OUT"
 166         },
 167         {
 168           "actor":"itemsBackground",
 169           "property":"colorAlpha",
 170           "value":0.85,
 171           "timePeriod": {"delay": 0.25, "duration": 0.25 },
 172           "alphaFunction":"EASE_IN_OUT"
 173         },
 174         {
 175           "actor":"usersBackground",
 176           "property":"colorAlpha",
 177           "value":0.85,
 178           "timePeriod": {"delay": 0.25, "duration": 0.25 },
 179           "alphaFunction":"EASE_IN_OUT"
 180         }
 181       ]
 182     },
 183 ~~~
 184
 185 #### JavaScript example
 186
 187 ~~~{.js}
 188 // JavaScript
 189
 190 var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
 191 ~~~
 192
 193 ~~~{.cpp}
 194 // C+++
 195
 196 Animation anim = builder.createAnimation( "animate-show", propertyMap );
 197 ~~~
 198
 199 ### JSON stage section
 200
 201 ~~~{.json}
 202
 203 “stage": [{
 204       "name":"simple-table",
 205       "type":"TableView",
 206       "backgroundColor": [0.5,0.5,0,1],
 207       "parentOrigin": "CENTER",
 208       "size":[400,500,1],
 209       "rows": 4,
 210       "columns":4,
 211       "cellPadding": [10, 5],
 212       "layoutAnimationDuration": 0.5,
 213       "layoutRows": {  // set the height of the rows
 214         "0": { "policy": "fixed", "value": 40 },
 215         "1": { "policy": "relative", "value": 0.33 },
 216         "2": { "policy": "fixed", "value": 120 }
 217       },
 218       "layoutColumns": { // set the widths of the columns
 219         "1": { "policy": "fixed", "value": 150 },
 220         "2": { "policy": "relative", "value": 0.35 },
 221         "3": { "policy": "relative", "value": 0.15 }
 222       },
 223       "actors": [{
 224           "name":"gallery-1",
 225           "type":"ImageView",
 226           "image": {
 227             "url": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
 228           },
 229           "customProperties": { // properties registered dynamically
 230             "cellIndices": [0,0],// property to specify the top-left cell this child occupies
 231             "rowSpan":4, // property to specify how many rows this child occupies, if not set, default value is 1
 232             "columnSpan":1 // property to specify how many columns this child occupies
 233             ....
 234 ~~~
 235
 236 #### JavaScript example
 237
 238 ~~~{.js}
 239 // add all actors under stage section to the root layer
 240 builder.addActors( dali.stage.getRootLayer() );
 241 ~~~
 242
 243 #### C++ example
 244
 245 ~~~{.cpp}
 246 // add all actors under stage section to the root layer
 247 builder.AddActors( Stage::GetCurrent().GetRootLayer() );
 248 ~~~
 249
 250 # JavaScript
 251
 252 For the JavaScript API please build dali-toolkit with YUIDOC installed. This will generate the documentation.
 253 See dali-toolkit/plugins/dali-script-v8/docs/README.txt
 254
 255 To execute JavaScript from C++
 256
 257 ~~~{.cpp}
 258 script = Toolkit::Script::New();
 259
 260 script.ExecuteFile( scriptFileName );
 261 ~~~
 262
 263 @class _Guide_JSON_and_JavaScript_overview
 264
 265 */