4 # Scripting Overview {#scriptoverview}
6 DALi has JSON to support:
9 - templated actor/control creation
11 - DALi GUI builder generates JSON files. Allows UI designers to create / modify the application look and feel.
13 JSON support is built in to DALi.
15 Files can be loaded inside any DALi application, or from command line using the launcher (part of dali-demo).
18 scripting.example hello-world.json
21 We currently have JSON example files held in dali-demo/resources/scripts
25 JSON file contains different sections:
26 - **Templates** actor & control tree creation
27 - **Styles** used to style actor & control trees
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);
36 ### JSON templates section
44 "parentOrigin":"TOP_CENTER",
45 "anchorPoint":"TOP_CENTER",
46 "size":"{DEFAULT_MENU_USER_SIZE}",
47 "colorMode":"USE_OWN_COLOR",
51 "name":"usersBackground",
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}"
63 "parentOrigin":"TOP_CENTER",
64 "anchorPoint":"TOP_CENTER",
66 "image":{ "url":"{IMAGE_PATH}ico_man_nor.png" }
77 Builder builder = Builder::New();
79 std::string jsonData = loadFile("my-app.json");
81 builder.LoadFromString( jsonData );
83 Actor userActorTree = builder.Create("users");
87 ### JSON styles section
98 "image":{ "filename":"{IMAGE_PATH}live_tv_background.png" },
99 "color":"{DEFAULT_MENU_ITEM_COLOR_1}"
103 "image":{ "filename":"{IMAGE_PATH}icn_live_tv_foc.png" }
108 "text":"<font size='20' weight='bold'><b>LIVE</b></font>"
118 builder.ApplyStyle( "live-tv-focus", tvIcon );
121 ### JSON animations section
132 "actor":"background",
133 "property":"positionX",
135 "alphaFunction":"EASE_IN_OUT"
138 "actor":"itemsBackground",
139 "property":"colorAlpha",
141 "timePeriod": {"delay": 0.25, "duration": 0.25 },
142 "alphaFunction":"EASE_IN_OUT"
145 "actor":"usersBackground",
146 "property":"colorAlpha",
148 "timePeriod": {"delay": 0.25, "duration": 0.25 },
149 "alphaFunction":"EASE_IN_OUT"
160 Animation anim = builder.createAnimation( "animate-show", propertyMap );
163 ### JSON stage section
168 "name":"simple-table",
170 "backgroundColor": [0.5,0.5,0,1],
171 "parentOrigin": "CENTER",
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 }
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 }
191 "url": "{DALI_IMAGE_DIR}gallery-large-1.jpg"
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
203 // add all actors under stage section to the root layer
204 builder.AddActors( Stage::GetCurrent().GetRootLayer() );