Now what we are going to do is we are going to learn about a very fundamental concept called data binding and what we are going to do is we are going to take a static value and we are going to actually bind that from one component to another, using a concept called Data Binding. So what I would like you to do is open up Fundamentals_wt3 and again, for now just select it, and then right click or Ctrl+click on it and choose Set as Default Application, because now we are done with wt2, we are going to first set this to wt3 and you’ll see that this is going to be the version that we will actually work with and compile with.
So then go ahead and open that up by double clicking on it, as you see there and this is just a simple application tag, again, say this is a little type in here and what I would like you to do is go to line three here, Tab over, and add in a label control. So I am just going to say, oops I have my Caps Lock on, and add in an mx label tag. So I am going to say, mx:Label, like we have done before, and I am going to assign this an ID this time. I am going to say, id=“myLabel” and this is the name that this control would now be able to be referenced when we use ActionScript, and ActionScript is the scripting language of the Flash Player and the scripting language that we are going to use here in Flex Builder 3.0. So I have assignd it an ID of myLabel and I am going to assign it some simple text that says, text =“This is a Label,” very simple and then close off your label tag, like so and what I like you now to do is just add in another Label tag.
So I am going to say, mx:Label, and I am going to set the text property, and I am going to use Data Binding to set the text property to the width of the other label control. So I am just going to say, text =, and I am going to add in a Data Binding and when I use Data Binding, I use the curly braces. So here I am going to add in a curly brace and now I am going to reference my label control that you see there in line three and that is called myLabel which is of course based off of the ID that I assigned there. So I am going to say myLabel and then I am going to say .width as you see there and then I am going to close off my Curly Braces and Close off my property using the quotation mark (“) to close off my attribute.
So width is actually going to return in pixels, the actual width of that label control. So this should be a number. Depending on the exact width of the text, this is a label, it could be 50 pixels wide or 70 pixels, but that’s what’s going to actually display in that second label and I use Data Binding to actually bind that to it. Now the very cool thing about Data Binding is if that width changes, so for example we change the text at Runtime or something like that, because it's bound to the width then that property would change as well. So that’s very powerful. So I’ll close off my label tag here, and I will just click on File>Save and that will compile it.
You should see that there are no problems and then go ahead and run it and you should see two label controls, one that says, this is a label and then the other one is set to the width in pixels of that label control. So that’s very powerful and again the very powerful thing about Data Binding is this is bound and this will even occur at Runtime. Let's test that, using another control, and what I am going to do is just directly below your label control, let's add in a little more interactive control, and this is going to be a text input, and a text input just allows the user to type in some text.
So here I am going to say mx:Textinput, I'll avoid typing, so I will just click there, and what I am going to say, is I am going to assign an id =“myInput” like you see there, and this is again how I can reference this text input control using that ID. I’ll close off my text input tag, and then I’ll add in another label control. So I’ll say, mx:label and instead of setting the text property here to an absolute, like we have
been doing, I am going to use Data Binding again and I am going to just say, add my curl
Transcription by:
Scribe4you Transcription Services