3 # Scripting Overview {#scriptoverview}
9 - templated actor/control creation
11 - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
13 - JavaScript to support:
14 - Rapid Application Development
15 - Hybrid C++/JavaScript applications
16 - Leaverage third party JavaScript modules (backbone.js etc)
18 JSON support is built in to DALi.
20 JavaScript support is via a plugin held in dali-toolkit, which builds automatically if Google's V8 engine is installed.
21 The V8 version required by DALi can be built and installed using dali-core/scripts/dali_env script.
23 Files can be loaded inside any DALi application, or from command line using the launcher ( part of dali-demo).
26 scripting.example hello-world.json hello-world.js
29 We currently have JSON and JavaScript example files held in dali-demo/resources/scripts
31 ![ ](../assets/img/javascript-wrapping-guide/scripting-overview.png)
32 ![ ](scripting-overview.png)
36 JSON file contains different sections:
37 - **Templates** actor & control tree creation
38 - **Styles** used to style actor & control trees
40 - **Instances** of objects for path, shader-effects, render-tasks, frame-buffers
41 - **Stage**. A list of actors / controls that can be added to the stage
42 - **Constants** (e.g. positions / colors, that can be references by other parts of the JSON file);
47 ### JSON templates section
55 "parent-origin":"TOP_CENTER",
56 "anchor-point":"TOP_CENTER",
57 "size":"{DEFAULT_MENU_USER_SIZE}",
58 "color-mode":"USE_OWN_COLOR",
62 "name":"usersBackground",
64 "parent-origin":"CENTER",
65 "anchor-point":"CENTER",
66 "size":"{DEFAULT_MENU_USER_SIZE}",
67 "color-mode":"USE_OWN_COLOR",
68 "image":{ "filename":"{IMAGE_PATH}white-pixel.png" },
69 "color":"{DEFAULT_MENU_BACKGROUND_COLOR}"
74 "parent-origin":"TOP_CENTER",
75 "anchor-point":"TOP_CENTER",
77 "image":{ "filename":"{IMAGE_PATH}ico_man_nor.png" }
85 #### JavaScript example
89 var builder = new dali.Builder();
91 builder.loadFromFile( "my-app.json");
93 var userActorTree = builder.create( { template:"users"} );
100 Builder builder = Builder::New();
102 std::string jsonData = loadFile("my-app.json");
104 builder.LoadFromString( jsonData );
106 Actor userActorTree = builder.Create("users");
110 ### JSON styles section
121 "image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
122 "color":"{DEFAULT_MENU_ITEM_COLOR_1}"
126 "image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
131 "text":"<font size='20' weight='bold'><b>LIVE</b></font>"
138 #### JavaScript example
141 builder.applyStyle( "live-tv-focus", tvIcon );
147 builder.ApplyStyle( "live-tv-focus", tvIcon );
150 ### JSON animations section
161 "actor":"background",
162 "property":"position-x",
164 "alpha-function":"EASE_IN_OUT"
167 "actor":"itemsBackground",
168 "property":"color-alpha",
170 "time-period": {"delay": 0.25, "duration": 0.25 },
171 "alpha-function":"EASE_IN_OUT"
174 "actor":"usersBackground",
175 "property":"color-alpha",
177 "time-period": {"delay": 0.25, "duration": 0.25 },
178 "alpha-function":"EASE_IN_OUT"
184 #### JavaScript example
189 var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
195 Animation anim = builder.createAnimation( "animate-show", propertyMap );
198 ### JSON stage section
203 "name":"simple-table",
205 "background-color": [0.5,0.5,0,1],
206 "parent-origin": "CENTER",
210 "cell-padding": [10, 5],
211 "layout-animation-duration": 0.5,
212 "layout-rows": { // set the height of the rows
213 "0": { "policy": "fixed", "value": 40 },
214 "1": { "policy": "relative", "value": 0.33 },
215 "2": { "policy": "fixed", "value": 120 }
217 "layout-columns": { // set the widths of the columns
218 "1": { "policy": "fixed", "value": 150 },
219 "2": { "policy": "relative", "value": 0.35 },
220 "3": { "policy": "relative", "value": 0.15 }
226 "filename": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
228 "custom-properties": { // properties registered dynamically
229 "cell-indices": [0,0],// property to specify the top-left cell this child occupies
230 "row-span":4, // property to specify how many rows this child occupies, if not set, default value is 1
231 "column-spam":1 // property to specify how many columns this child occupies
235 #### JavaScript example
238 // add all actors under stage section to the root layer
239 builder.addActors( dali.stage.getRootLayer() );
245 // add all actors under stage section to the root layer
246 builder.AddActors( Stage::GetCurrent().GetRootLayer() );
251 For the JavaScript API please build dali-toolkit with YUIDOC installed. This will generate the documentation.
252 See dali-toolkit/plugins/dali-script-v8/docs/README.txt
254 To execute JavaScript from C++
257 script = Toolkit::Script::New();
259 script.ExecuteFile( scriptFileName );
262 @class _Guide_JSON_and_JavaScript_overview