Versions Compared


  • This line was added.
  • This line was removed.
  • Formatting was changed.


Property to Property Binding

A property binding is a very simple type of binding. It simply binds one component's property to another. When that property changes, the new value is pushed into the property that the binding is set up on.  

titleWhy aren't all properties listed?

You may notice that the list of properties available to bind to is smaller than the list of all properties. While nearly all properties can be bound, only some properties can be bound to. Only properties that fire a propertyChangeEvent may be bound to.

For example, I have bound the Value (Integer) property of a Numeric Text Field to the value property of a slider.

Image Removed

Style Customizer

Many Vision components support the Style Customizer, which lets you define a set of visual styles that change based on a single Driving Property. Typically, you'll have a property on your component that you want to use as a driving property (like a discrete state), which then drives multiple visual properties, like the font, border, and foreground color, to change to a specific style that was setup per state beforehand. Style Customizer lets you define these relationships all at once, and lets you preview them too! Without styles, you would have to go to every property and bind them all individually.


Scroll html ignore

NameProperty BindingComponent Styles


Notice how changing the value of the slider, will then adjust the value of the numeric text field as well. The Numeric Text Field is changing to match the value set by the slider. This can be useful to provide visual feedback to what a user is doing. The operator would input something, and they would see another component adjust to match the setting they just changed. Notice though how If I were to change the value of the Numeric Text Field, the Slider will not update. Bindings are one direction only by default.

Image Removed


Bidirectional Property Bindings

Property Bindings have the ability to become Bidirectional, meaning instead of having the binding go one way only, it will work both ways, even with just the one binding. Take the previous example with the Numeric Text Field and Slider again. When changing the value of the Slider, the Numeric Text Field would update, but updating the value of the Numeric Text Field would not update the slider. If we reopen the binding on the Value (Integer) property of the Numeric Text Field, we can see in the bottom left corner a checkbox for bidirectional.

Image Removed


If we check, and save the binding, it will now be a bidirectional binding. Notice now how changing the value of the Numeric Text Field will also update the Slider component.


Image Removed

Scroll html ignore
NameProperty Binding - Bidirectional


Style Customizer Window

The Style Customizer window has multiple parts to it.

  • Driving Property - The value of the selected property will be used to determine the style used. Only certain properties on the component can be used as drivin properties, but the most common are discrete state properties. Custom Properties can also be used here.
  • Styled Properties - Here you can select which properties will be used in the styles. Any properties that are in the left panel are available to be used in the styles, while properties in the right panel are already being used in the style. Properties can be moved between the panels by selecting it and clicking the appropriate arrow button.
  • Styles - The list of styles that will be available for this component. Each style has a Value property on the left. When the value of the Driving Property is greater than or equal to the value of a style, that style will be applied to the component. Each style gives a preview of what it looks like, and can be expanded to edit the properties within that style. You will notice in the example below that the properties being used in the Styled Properties are the Background Color, Border, Foreground Color, and Text, which corresponds to the properties we have available within each style in the Styles area. Each style can also be animated by clicking the animation checkbox. This allows you to add different steps to the style, where each step of the style can have its own unique style. Each step also gains a Step Duration (ms) property that is used to determine how long the step is active for. This is typically used to create a flashing effect, where the component will flash between two different colors.

Image Added

Value Conflict

You can bind a property that is already being used by a style, but a warning icon will appear on the property, and the property name turns red in the In the Property Editor. This means there is a conflict between the binding on the property, and the style on the component. As a general practice, only the style or binding should write to the property, not both. 

Image Added

Style Customizer Example

The best example of the Style Customizer in action is the Multi-State Indicator, as this component uses the style customizer to work properly and switch between different states, so it can be used as an example already built in. However, the many other components can use the Style Customizer, so this example will set up styles for a Cylindrical Tank.

  1. Add a Cylindrical Tank component to the window, and right click on it and go to Customizers > Style Customizer.
  2. Select a Driving Property. Here, the Value is a good choice as we can change the tank to flash when the contents get too high.
  3. We can then select the Styled Properties. I have selected the Border, Liquid Color, and Show Value.

    Image Added

  4. Lastly, we need to set up the different styles. I have added three styles, and set the values to be 0.00, 50.00, and 90.00.
    1. For the style at 0 and above, I have left everything at the default, so that the tank looks normal.
    2. For the style at 50 and above, I have added a large yellow border. This way, it is obvious the tank is filling up.
    3. For the style at 90 and above, I have animated the style, and created two steps, to alert the user that the tank is almost full.
      1. The first step has a duration of 500ms, a red border, an orange liquid color, and I have opted to show the value of the tank.
      2. The second step has a duration of 1000ms, an orange border, a red liquid color, and is also showing the value of the tank.
  5. Once we have saved our style, we can try it out by changing the value of the tank.

    Image Added