[00:00] In this lesson we'll learn about the Style Customizer feature, which many Vision components use. The Style Customizer is useful because it allows one to define a set of visual styles that will change based upon one single driving property, rather than having to set up multiple individual property bindings to that one same value. For a first simple example, let's consider as our data source the simple memory tag named data. Of course, in general, this could be any type of dynamically updating tag. We've also toggled the toolbar icon to allow bidirectional read-write to tags. We want to bind this tag to the numeric text field, so we will scroll down in its properties a bit, and then drag the data tag down to its integer value property to bind it. Now we can change the tag value to whatever we want, let's say 45, and it will be reflected in the component display. Now suppose we want to style this component based on the current value of the data tag. For example, let's say we want to update the Foreground and Background Colors, the Border, and the Font, all based on the same tag value. Without the Style Customizer, what we'd have to do is individually bind the Border, Foreground Color and Background to an expression or some binding type involving the data tag. And as far as the Font goes, it doesn't even offer us a binding option, so we'd have to configure that manually as desired.

[01:33] Four separate properties individually bound or configured. It would work like this, but that's not very efficient. By contrast, with the Style Customizer, we can configure all these properties in a single location. So we'll head up to our component of interest, t he numeric text field, since it supports styling, we'll right click and select Customizers > Style Customizer. The first thing we'll do is select the Driving Property. This is the one single value which will determine all the styling. We'll select the Value (Integer) property, since that's the one we've already bound to our tag of interest. Next, we'll select one or more of the Styled Properties and using the right arrow, transfer them from the Available Properties into the Used Properties pane.

[02:17] So we'll select the Background, the Border, the Font, and the Foreground Color as the four properties we'd like to style based on the Value driving property. Finally, at the bottom in the Styles section, we can add one or more value ranges for the driving property. So we will click A dd three times to add three such ranges. When the driving property is greater than or equal to each value, the component will be styled as specified. You can think of these as a series of if-elseif conditions. Finally, let's set up the desired styling for various ranges of the driving property, the integer value. For starters, let's define some ranges of interest. How about perhaps >= 0 is some normal operation style, >= 60 is some early warning style, and >= 90 is maybe some error case style. Then we can expand each of these cases using its dropdown and add the desired styling. So for normal operation, we'll maybe set the Background to green, the Foreground Color will leave as its default black, we'll set the border to No Border, and maybe we will bump up the Font a little bit to 14.

[03:42] Then notice how there's this helpful preview to show what our styling will look like. Then for the early warning case, maybe we'll set the Background to yellow, the Foreground Color to red, we'll set the border to maybe bevel lowered and the font, maybe we'll bump it up to 16 and make it italic.

[04:07] And finally, for the error case, maybe we'll make the Background red. we'll set the Foreground Color to a nice white contrast, set the Border to maybe bevel raised, and for the Font, let's bump that up to maybe an 18 point font and bold italic. Okay, so now we've defined all of our styles. Let's test our styling changes. We can already see the component has updated to reflect the normal operation styling, since the tag value is >=0. So we'll change the tag value to maybe 65 to see the early warning styling for >= 60. And then we'll change it to say 92 to see the error case styling for >= 90. So all four style properties for this component are being controlled by the one value of the driving property, Value, which in turn is bound to this data tag. Down in the Property Editor, we can see which properties these are by the bolding and the presence of this little style icon, here on the Border, and then farther down, on the Font, Foreground Color, and Background.

[05:22] And as a general good practice. now you probably won't want to individually bind any of these properties, so as to avoid any conflicts or overrides. For a second example, let's consider the example of a Label component. As before we'll do Customizers > Style Customizer. A label doesn't allow for a good numerical driving property like the numeric text field did, although it does allow for using the text value itself. But we can create our own custom property and use that instead. So we will right click again and this time select Customizers > Custom Properties. Here we'll add a property and use the default type Integer, and we'll give it the name state to correspond to our second tag.

[06:08] We're done, so we can click OK. Then over in its Property Editor, if we scroll down to the bottom, we see the new custom property state, and we can drag the state tag down to it to bind the label's custom property to the state tag. Then as we did with the other component, now we can style this label component off of this one custom property we just added. So let's go up and right click Customizers > Style Customizer again. And now we see our added custom property state added as a driving property. So we'll select it, then add some properties we want to style, such as the Background Color, the Border, the Fill, Background, Font, Foreground, Color, and the Text. And finally, in the Style section, let's add three possible states we want to style for. We'll say that 0 is off, 1 is on, and 2 is faulted. Now we can style each of these states.

[07:12] So for the off state, let's make the Background Color red, and we'll check the Fill Background just to enable it. We'll make the Foreground Color, actually, we'll leave it at its default of black. We'll change the Text to off. We'll set the Border to maybe bevel lowered, and we'll make the Font bold. And since the driving property is bound to a tag whose value is already 0, we can see right away how this will look. Then for the on state, we'll set the Background Color this time to green, check the Fill Background, leave the Foreground Color at its default black, we'll change the text to on. we'll make the border bevel lowered also. And again, we will bold the Font. And finally, for the faulted state, this time we'll make the Background Color, let's say black.

[08:11] We'll check the Fill Background, we'll make the Foreground Color white, We'll change the Text to faulted, and this time maybe we'll do the Border as no border and will make the Font bold, but maybe bump it up to 16 point. Finally, one more neat feature about this Style Customizer is that it supports animation, which just means going between different styles on a fixed interval for a specific state. So for this last faulted state will click Animate, and now we can add one or more animation style rows. So we'll add one, and then we'll add a contrasting style, maybe as follows. For the Background Color, we'll set it to yellow, then leave the Foreground Color as a contrasting black. We'll check the Fill Background as for the others. For the Text, we'll set that to faulted also.

[09:13] And then we'll use the same no border style, and the same 16 point bold font. And now we also have a Step Duration parameter in milliseconds. We'll leave it as 1000 for a uniform 1-second blinking, but it can differ if we want. But we can already see what this is gonna look like in the preview. So we'll close this Style Customizer by clicking OK. As before, let's test our styling changes by using the state tag. The state is 0, so we already see our off-state style. We'll change the state tag to 1 to see the on style. And then we'll change the stay tag to 2 to see the blinking faulted style. And as before, we see the driven styles, they are bolded and have the styling icon. And in this case, we can even see the two colors alternating values in the Property Editor.

[10:07] So in this lesson, we've seen how we can use the Style Customizer to specify one driving property, which will then format multiple attributes all at once, such style attributes as colors, fonts, and borders, for example, or even other properties such as text.