GettingStartedControls Part 5

Data-bound clock

In this step we will add a new Control that represents a clock. This clock works via data-binding. The Player that comes with CGI Studio provides one sample data-source that represents the current UTC time. This value will be bound to the clock Control. Scene Composer offers an analog and a digital clock control. In this example digital clock will be used. Note that the following steps work similarsimilarly for the analog clock.

Application specification

Because theThe data-source is defined in the Player,Player. Therefore a connection between the Player and the Scene Composer Solution has to be defined. The following approach needs to be followed if data-binding should be used.

Go

In the menu bar go to "File[File] -> [Define application specification"specification]. A

windowThe "Courier Editor Parameters" dialog will pop upup. thatSee image below
This dialog requires two paths:paths. Include Path:Path

This is root path to the source of CGI Studio Courier.

After entering

Enter the paths theas pop-upgiven window should look similar toin the following:table below and press [OK].

The specification is saved. The Output panel will show whether the validation is valid (Validation finished!) or not (Validation failed!).
File
../../../../cgi_studio_player/src/Player/xhcdl/PlayerDataBinding.xhcdl Include Path
C:\CGI\cgi_studio_courier\src

Press "OK" to save the specification. In the "Output"-panel a message will be shown if the specification is valid or not.

Clock Control

Drag the Control called "Digital Clock" into the home scene. The Control has some properties for customization. For instance the clock can be configured to show full 24 hours or just 12 hours with an "a.m." and "p.m." label. The text of those labels can be changed as well. The properties of the control look similar to this:

Add Data-binding

To add data-binding goBinding to the ClockDigitalClock Control

In the Solutions Explorer double-click SceneHome, which can be found under path given in the table below. 

Scene Tree panel displays the scene tree of SceneHome. There is a DigitalClock control under the root node (SceneHome > DigitalClock).
Scene Editor displays the editable scene. There is a DigitalClock control in the top center above the gauge.
Open Scene
Solution Explorer Path
SceneHome
Solution > Scenes > SceneHome
Either in Scene Editor or in Scene Tree panel select the DigitalClock control and view the configurable properties click onin the Properties panel.

In the Properties panel under [Control] there is a Time property. The Time property has a button with a chain icon on theits right side. Its tooltip says "Bind property to a data source item". Click on this button.

The Define Data Binding dialog will be opened. In the top of this dialog you can see that for the property "Time" to open the Time"Define Data Binding" dialog. For the property "Time" the datatype "Variant"Variant" is preselected,preselected. now From the Bindinglist Sourceof canData beitems chosen. Choosechoose the Time binding source and click "OK"[OK].

The Data Binding has been configured successfully.

To find the binding source more easily, the dialog offers a search field. Define Data Binding dialog looks like this:

You can now generate a new asset library and try it out in the Player.

Conclusion

This concludes the Getting Started Controls tutorial. However, by providing your own custom images and further modifying the layout of the controls, you can create even more visually stunning solutions. The GettingStartedControls sample provided in CGI Studio is just one example of what can be achieved using this tutorial as a basis.