4 # Scripting Overview {#scriptoverview}
10 - templated actor/control creation
12 - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
14 - JavaScript to support:
15 - Rapid Application Development
16 - Hybrid C++/JavaScript applications
17 - Leaverage third party JavaScript modules (backbone.js etc)
19 JSON support is built in to DALi.
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.
24 Files can be loaded inside any DALi application, or from command line using the launcher ( part of dali-demo).
27 scripting.example hello-world.json hello-world.js
30 We currently have JSON and JavaScript example files held in dali-demo/resources/scripts
32 ![ ](../assets/img/javascript-wrapping-guide/scripting-overview.png)
33 ![ ](scripting-overview.png)
37 JSON file contains different sections:
38 - **Templates** actor & control tree creation
39 - **Styles** used to style actor & control trees
41 - **Instances** of objects for path, shaderEffects, 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);
48 ### JSON templates section
56 "parentOrigin":"TOP_CENTER",
57 "anchorPoint":"TOP_CENTER",
58 "size":"{DEFAULT_MENU_USER_SIZE}",
59 "colorMode":"USE_OWN_COLOR",
63 "name":"usersBackground",
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}"
75 "parentOrigin":"TOP_CENTER",
76 "anchorPoint":"TOP_CENTER",
78 "image":{ "url":"{IMAGE_PATH}ico_man_nor.png" }
86 #### JavaScript example
90 var builder = new dali.Builder();
92 builder.loadFromFile( "my-app.json");
94 var userActorTree = builder.create( { template:"users"} );
101 Builder builder = Builder::New();
103 std::string jsonData = loadFile("my-app.json");
105 builder.LoadFromString( jsonData );
107 Actor userActorTree = builder.Create("users");
111 ### JSON styles section
122 "image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
123 "color":"{DEFAULT_MENU_ITEM_COLOR_1}"
127 "image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
132 "text":"<font size='20' weight='bold'><b>LIVE</b></font>"
139 #### JavaScript example
142 builder.applyStyle( "live-tv-focus", tvIcon );
148 builder.ApplyStyle( "live-tv-focus", tvIcon );
151 ### JSON animations section
162 "actor":"background",
163 "property":"positionX",
165 "alphaFunction":"EASE_IN_OUT"
168 "actor":"itemsBackground",
169 "property":"colorAlpha",
171 "timePeriod": {"delay": 0.25, "duration": 0.25 },
172 "alphaFunction":"EASE_IN_OUT"
175 "actor":"usersBackground",
176 "property":"colorAlpha",
178 "timePeriod": {"delay": 0.25, "duration": 0.25 },
179 "alphaFunction":"EASE_IN_OUT"
185 #### JavaScript example
190 var anim = builder.createAnimation( { animation:"animate-show", actor: myActor } );
196 Animation anim = builder.createAnimation( "animate-show", propertyMap );
199 ### JSON stage section
204 "name":"simple-table",
206 "backgroundColor": [0.5,0.5,0,1],
207 "parentOrigin": "CENTER",
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 }
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 }
227 "url": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
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
236 #### JavaScript example
239 // add all actors under stage section to the root layer
240 builder.addActors( dali.stage.getRootLayer() );
246 // add all actors under stage section to the root layer
247 builder.AddActors( Stage::GetCurrent().GetRootLayer() );
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
255 To execute JavaScript from C++
258 script = Toolkit::Script::New();
260 script.ExecuteFile( scriptFileName );
263 @class _Guide_JSON_and_JavaScript_overview