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 similarly for the analog clock.

Application specification

The data-source is defined in the 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.

1. In the menu bar go to [File] >[Define application specification].
   • The "Courier Editor Parameters" dialog will pop up. See image below
     
   • This dialog requires two paths.

     File	This is the path to the XHCDL file where the binding sources are stored
     Include Path	This is root path to the source of CGI Studio Courier.

     
2. Enter the paths as given in the 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	\cgi_studio_courier\src

Add Data-Binding to the DigitalClock Control

1. 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

2. Either in Scene Editor or in Scene Tree panel select the DigitalClock control and view the configurable properties in 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 its right side. Its tooltip says "Bind property to a data source item".
     
3. 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" the datatype "Variant" is preselected.
     
     
4. From the list of Data items choose the Time binding source and click [OK].
   • The Data Binding has been configured successfully.

     To find the binding source more easily, the dialog offers a search field.

     
5. 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.

---