# Examples of using Data binding

This page shows how to create a data binding source using Courier Editor and how to configure data binding using Scene Composer. This tutorial will be based on an [<span style="color: rgb(230, 126, 35);">Industrial solution</span>](https://doc316en.candera.eu/books/sample-solutions/page/industrial-solution) template.

---

#### Creating a Data binding source

1. Open Scene Composer and choose to open the Industrial solution from the Samples and Templates section of Scene Composer's Startup panel by double clicking. 
    - The solution will be loaded, which may take some time
    
    <div drawio-diagram="7912"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738927675.png" alt=""/>  
    </div>
2. In the Scene Composer menu bar click \[ File &gt; Define application specification \] to open the "Courier Editor Parameters" dialog.  
    
    - "Courier Editor Parameters" dialog will be opened.
    
    <div drawio-diagram="7911"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738927658.png" alt=""/></div>
3. In the "Courier Editor Parameters" select \[ Edit... \] to start CourierEditor. 
    - CourierEditor window will be opened.
    
    <div drawio-diagram="7910"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738927644.png" alt=""/></div>
4. In CourierEditor menu bar, click \[ File &gt; New \]. 
    - The "New File" dialog box will be opened.
    
    <div drawio-diagram="7909"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738927628.png" alt=""/></div>
5. Set the destination folder and filename for the new data binding source and click \[ Save \]. 
    - The data binding source file "Industrial.xcdl" will be saved to the specified location.
    - The data binding source file is now ready to be configured with data binding items.
    
    <div drawio-diagram="7913"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738927747.png" alt=""/></div>
6. Add Data binding items (data name/type) to the created Data binding source. To do so, switch to the Binding Sources tab and click the \[ + \] button on the top left to add a binding source. 
    - "\[0\] bindingSource" is added
    
    <div drawio-diagram="7914"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738928212.png" alt=""/></div>
7. Click on "\[0\] bindingSource" to view its details on the right side and set the name to "Industrial". 
    - The name of "\[0\] bindingSource" will be set to "Industrial"
    
    <div drawio-diagram="7917"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738928531.png" alt=""/></div>
8. Click the \[ + \] button next to "items" and click \[ Add new item \] in the context menu. 
    - "\[0\] item" is added.
    
    <div drawio-diagram="7918"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738928720.png" alt=""/></div>
9. Select data binding item "\[0\] item" view its details on the right side and configure the following name and type:  
    name = Temp  
    type = ::FeatStd::Int32 
    - Data binding item will be configured accordingly.
    
    <div drawio-diagram="7920"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738929282.png" alt=""/></div>
10. In the menu bar of the CourierEditor select \[ File &gt; Save \] to save the data binding source file. 
    - The data binding source file will be saved.
    - The creation of the data binding source is now complete.
    - The CourierEditor can be closed.

<p class="callout info">Please refer to [<span style="color: rgb(230, 126, 35);">Courier Editor</span>](https://doc316en.candera.eu/books/courier/page/courier-editor) for more information on how to create data binding sources.</p>

---

#### Linking Data binding source to Scene Composer

1. In the Scene Composer menu bar choose \[ File &gt; Define Application Specification \] to open the "Courier Editor Parameters" dialog. 
    - The Courier Editor Parameters dialog will be opened.
    
    <div drawio-diagram="7923"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738930343.png" alt=""/></div>
2. In the Courier Editor Parameters dialog click the \[ ... \] button to select the path to the data binding source file "Industrial.xcdl" file. 
    - The file which you have just created using CourierEditor in the steps above is configured.
3. Finish your configuration by clicking \[ OK \]. 
    - The Data binding source is now linked to Scene Composer.

---

#### Configuring Data binding using the Scene Composer

In Scene Composer, many Control properties can be configured for data binding. Each property on which data binding can be performed offers a bind button on the right side in the Properties panel.

<p class="callout info">For more information about data binding, please refer to [<span style="color: rgb(230, 126, 35);">Data Binding</span>](https://doc316en.candera.eu/books/scene-design/page/databinding-ui).</p>

1. In the scene tree of the Scene1\_Main scene, select \[ GaugeTemperature \], and in the properties panel, click the \[ Control &gt; Value \] bind button. 
    - The Define Data Binding dialog will be opened.
    
    <div drawio-diagram="7924"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738931716.png" alt=""/></div>
2. Select "Industrial &gt; Temp (FeatStd::Int32)" from the data item and click \[ OK \]. 
    - When data binding is set, the color of the bind button changes to blue.
    
    <div drawio-diagram="7925"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738931734.png" alt=""/></div>

---

#### Operation confirmation using Live Preview panel

You can check the operation of data binding settings in the live preview panel.

1. In Scene Composer menu bar choose \[ View &gt; Live Preview \] to display the live preview panel. Set the \[ On/Off \] button at the top right of the panel to "On". 
    - The Live Preview window will be opened.
    - After turning the live preview on, the button will display in green font \[ ON \].
    
    <div drawio-diagram="7931"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738933037.png" alt=""/></div>
2. Set the "Tmp (Variant)" value to your desired value. 
    - The position of the thermometer needle displayed in the Scene Editor changes to match the value you have set.
    - The value of the Control property "Value" will be updated to the value entered in the "Live Preview"
    
    <div drawio-diagram="7930"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1738932960.png" alt=""/></div>

---