Skip to main content

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. AsThis antutorial example,will be based on an Industrial solution will be used.template.

Creating a Data binding source

First,

createOpen aScene newComposer Dataand bindingchoose sourceto using the Courier Editor.

Openopen the Industrial solution from the Samples and Templates section of Scene ComposerComposer's Startup panel.

panel by double clicking.
    The solution will be loaded, which may take some time
    drawing-7-1716528195.pngdrawing-5-1738927675.png

     

    From 

    In the Scene Composer menu bar click [ File > Define application specification ] on the Scene Composer menu bar,to open the "Courier Editor Parameters" dialog,dialog.
    and
      "Courier Editor Parameters" dialog will be opened.
      drawing-5-1738927658.png

       

       

      In the "Courier Editor Parameters" select [ Edit... ] to start CourierEditor.
      drawing-7-1717649746.png

      A

      CourierEditor window opens.will Frombe theopened.
      drawing-5-1738927644.png

       

       

      In CourierEditor menu bar, click [ File > New ]. 
      drawing-7-1716528511.png

      The "New File" dialog box will open,be soopened. set
      drawing-5-1738927628.png

       

       

      Set the savedestination destinationfolder and namefilename 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.
        drawing-7-1717653737.pngdrawing-5-1738927747.png

         

        These steps create a new Data binding source.

        drawing-7-1728625396.png

        Add Data binding items (data name/type) to the created Data binding source.
          To Clickdo so, switch to the Binding Sources tab and click the [ + ] button on the Bindingtop Sourcesleft tab.to add a binding source.
            "[0] bindingSource" is added.
            added
            drawing-7-1728625479.pngdrawing-5-1738928212.png

             

             

            [0] Click on bindingSource"[0] bindingSource" to view its details on the contentright side and set the name to "Industrial".
              The name of "[0] bindingSource" will be set to "Industrial"
              drawing-7-1716528779.pngdrawing-5-1738928531.png

               

               

              Click the [ + ] button fornext itemsto "items" and click [ Add new item ]. in the context menu.
                "[0] item" is added.
                drawing-7-1728625573.pngdrawing-5-1738928720.png

                 

                 

                SetSelect data binding item "[0] item" to:view its details on the right side and configure the following name and type:
                name = Temp
                type = ::FeatStd::Int32
                drawing-7-1728625669.png
                • Data binding item will be configured accordingly.
                drawing-5-1738929282.png

                 

                 

                In the menu bar of the CourierEditor select [ File > 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. SaveThe byCourierEditor selectingcan [be Fileclosed. > Save ] from the menu bar.

                  Please refer to Courier Editor for more information on how to create data binding sources.

                  Linking Data binding source to Scene Composer

                    In the Data binding source with Scene Composer.Composer Openmenu thebar "Courier Editor Parameters" dialog fromchoose [ File > Define Application Specification ] onto open the Scene"Courier ComposerEditor menuParameters" bar.dialog.
                      The Courier Editor Parameters dialog will be opened.
                      drawing-5-1738930343.png

                       

                       

                      In the SpecificationCourier FileEditor SelectionParameters anddialog Search Path dialog, setclick the save[ destination... for] 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 File:steps ],above andis clickconfigured.

                         

                        Finish your configuration by clicking [ OK ].
                        drawing-7-1728625810.png
                          The Data binding source is now linked to Scene Composer.

                          Configuring Data binding using the Scene Composer

                          SetIn upScene Composer, many Control properties can be configured for data binding. Each property on which data binding tocan anybe propertyperformed usingoffers the Scene Composer. Configure data binding using thea bind button on the far right of any propertyside in the Properties panel.

                          For more information about data binding, please refer to Data Binding.

                            In the scene tree of the Scene1_Main scene, select [ GauegeTemperatureGaugeTemperature ], and in the properties panel, click the [ Control > Value ] bind button.
                              The Define Data Binding dialog opens.will be opened.
                              drawing-5-1738931716.png

                               

                               

                              Select "Industrial > Temp (FeatSte:FeatStd::Int32)" from the data item and click [ OK ].
                              drawing-7-1716529487.png

                              When data binding is set, the color of the bind button changes to blue.
                              drawing-5-1738931734.png

                               

                              drawing-7-1718182367.png

                               

                              Operation confirmation using Live Preview panel

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

                              Display

                              theIn liveScene previewComposer panelmenu frombar choose [ View > Live Preview ] onto display the Scenelive Compsoerpreview menupanel. bar, and setSet 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 ].
                                drawing-7-1716529638.pngdrawing-7-1716529638.png

                                 

                                 

                                Set the Needle"Tmp (Variant)" value to your desired value. Confirm
                                that theThe position of the thermometer needle displayed in the sceneScene editorEditor 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" 
                                drawing-5-1738932960.png

                                 

                                drawing-7-1716529776.png

                                 

                                Back to top