Component Styles Video at Inductive University

Transcript

(open in window)

[00:00] Many components support the styles feature. This is a feature that allows you to define a set of visual styles that will change based upon a single driving property. That way, you don't just set up several property bindings on the same value. Let's do a couple of examples. The first one numeric label here, of course, I can bind the value property to a tag. Let's say I take my level tag, drag it right down, I can see it's value coming through on the component. Now what I want to do is change the background color, the foreground color, the border and the font all based on the same tag value. Without styles, I have to go down to every property and bind them to an expression or some binding type involving the level tag in order to get the appropriate value to come back. With styles, I can define all this in a single location. So I can right click on the component and go down to customizers. And if its support styles, I can select the style customizer. The first thing I do is set up the driving property which property is going to drive the entire style the component which in my case is the value property sentence linked to the tag already. Then I can select all the properties that I want to change like the background color, the border, the font and the foreground color. Then down below, I can add one or more styles of values here. So I'm add, use the green plus icon, add a couple of rows. The first one, since it's numeric value, it's going to be if the value is greater than equal to zero, it's going to be this style here. So I may make it maybe a red background color and a white foreground color and I can change the border, and I can change the font, then at the value here, and the second one is if it is greater than or equal to 11, I want to be another different set, I move here I want that to be green, and the foreground color to be black there, hey, I want the border to be something like a bevel raised add another row down at the bottom. And this one is if it's going to be greater than equal to 90. I want to be in the state here, where I can actually select this to be to be yellow, foreground color to be black and so on. Now they got my style setup. I'll go ahead press ok, I'll see the style is coming through on the component as it moves to those different states. If you look here, you'll see that there are properties like the border, the font foreground color and background color that are bold, letting me know that they're using styles with little color wheel here to show that is actually bound. It is bound here because styles is changing the value, you don't want to also go and bind this to an expression or to a tag, because styles will change the value for you automatically. So I can basically change all those properties from one location using the stylus customizer. Let's do another example here on the label. The label typically doesn't have a good driving property. So what we can do is we can right click, and we can add a custom property to the component. So that a custom property I can call this property state that's integer. So when I press OK, I'll see it down here to the bottom, I can actually then of course, link that to a tag like drag my state tag down to it, and then I can go on, configure the styles right click go down to customizers and style customizer, of course I can drive the style off the state property, that I just added. and then I can attract anything that I want. background color, border, I can affect the font, the foreground color, and I can also maybe change the text here. I can add a few rows down below some if the value zero. I want to be red, with a white foreground color and the border to be an edge border here, and the text to say on. If it's a value of one, oh sorry, the text there will be off, if the value is one I want the text to be on. And I want the background color to be green. And I want the foreground color to be black. And maybe I want the border here to be a bevel. And I could do the same thing for the last day two. where I can actually set this to say faulted. And it can feel the background color, maybe I want that to be red, and the foreground color to be white. Now the styles feature, one thing you can do is actually animate. So you can actually go between many different styles on the same state. So I can actually animate this, I can add one or more rows here, and I can set what I want that role to be. So here I want this to be say faulted, as well. I want that to be a yellow with a black foreground color. And I want the border on both of these to maybe be a bevel here, so that can actually see that and I can add many steps here and each step can have different duration and milliseconds. As you can see that the sample here it's actually going between those two states. So soon as I press OK, I'll see it coming through on this component. So if I go and change the state over here to let's say, you know, two, it's going to go between that blinking in there and again, all the properties here are bold letting me what's to use in styles.

Many components support the styles feature. This is a feature that allows you to define a set of visual styles that will change based upon a single driving property. That way, you don't just set up several property bindings on the same value. Let's do a couple of examples. The first one numeric label here, of course, I can bind the value property to a tag. Let's say I take my level tag, drag it right down, I can see it's value coming through on the component. Now what I want to do is change the background color, the foreground color, the border and the font all based on the same tag value. Without styles, I have to go down to every property and bind them to an expression or some binding type involving the level tag in order to get the appropriate value to come back. With styles, I can define all this in a single location. So I can right click on the component and go down to customizers. And if its support styles, I can select the style customizer. The first thing I do is set up the driving property which property is going to drive the entire style the component which in my case is the value property sentence linked to the tag already. Then I can select all the properties that I want to change like the background color, the border, the font and the foreground color. Then down below, I can add one or more styles of values here. So I'm add, use the green plus icon, add a couple of rows. The first one, since it's numeric value, it's going to be if the value is greater than equal to zero, it's going to be this style here. So I may make it maybe a red background color and a white foreground color and I can change the border, and I can change the font, then at the value here, and the second one is if it is greater than or equal to 11, I want to be another different set, I move here I want that to be green, and the foreground color to be black there, hey, I want the border to be something like a bevel raised add another row down at the bottom. And this one is if it's going to be greater than equal to 90. I want to be in the state here, where I can actually select this to be to be yellow, foreground color to be black and so on. Now they got my style setup. I'll go ahead press ok, I'll see the style is coming through on the component as it moves to those different states. If you look here, you'll see that there are properties like the border, the font foreground color and background color that are bold, letting me know that they're using styles with little color wheel here to show that is actually bound. It is bound here because styles is changing the value, you don't want to also go and bind this to an expression or to a tag, because styles will change the value for you automatically. So I can basically change all those properties from one location using the stylus customizer. Let's do another example here on the label. The label typically doesn't have a good driving property. So what we can do is we can right click, and we can add a custom property to the component. So that a custom property I can call this property state that's integer. So when I press OK, I'll see it down here to the bottom, I can actually then of course, link that to a tag like drag my state tag down to it, and then I can go on, configure the styles right click go down to customizers and style customizer, of course I can drive the style off the state property, that I just added. and then I can attract anything that I want. background color, border, I can affect the font, the foreground color, and I can also maybe change the text here. I can add a few rows down below some if the value zero. I want to be red, with a white foreground color and the border to be an edge border here, and the text to say on. If it's a value of one, oh sorry, the text there will be off, if the value is one I want the text to be on. And I want the background color to be green. And I want the foreground color to be black. And maybe I want the border here to be a bevel. And I could do the same thing for the last day two. where I can actually set this to say faulted. And it can feel the background color, maybe I want that to be red, and the foreground color to be white. Now the styles feature, one thing you can do is actually animate. So you can actually go between many different styles on the same state. So I can actually animate this, I can add one or more rows here, and I can set what I want that role to be. So here I want this to be say faulted, as well. I want that to be a yellow with a black foreground color. And I want the border on both of these to maybe be a bevel here, so that can actually see that and I can add many steps here and each step can have different duration and milliseconds. As you can see that the sample here it's actually going between those two states. So soon as I press OK, I'll see it coming through on this component. So if I go and change the state over here to let's say, you know, two, it's going to go between that blinking in there and again, all the properties here are bold letting me what's to use in styles.

We are experiencing playback issues from our video hosting provider. Please check back shortly.

LESSON LIST