This content requires Flash

To view this content, JavaScript must be enabled, and you need the latest version of the Adobe Flash Player.

Download the free Flash Player now!

So let's actually practice just creating a very, very simple form. So what I would like you to do is go down to your Components panel here and you will see all of the different controls that are defined in the Flex framework. So for example, radio buttons, images, data grids, labels, all this kind of thing.

So for now just grab a Label control and place that onto your main application and you will see by default it says Label, I just dragged and dropped this label you will see that I can resize this, okay. And you will also see that the Flex Properties panel opens up and you have the Text property which is whatever text is actually within that Label.

So in this case I am going to just change this to a very simple form and I am going to call this Your Name as you can see here and you will see that once I press Enter, it changes that in the actual IDE. So here is just a simple Label control that says Your Name.

Now what I would like you to do is drag in a TextInput control. So you will see here is a TextInput and this simply lets the user type in information. So I will drag a TextInput control and you will notice the blue lines there, so I can easily control alignment of my controls. So there is a TextInput control; if I want to default property here I can specify that, I can specify the maximum characters. If this is a password this means when the user will type in there an asterisk would simply appear and that makes it very easy.

So Design mode let's me view all of this in a more visual sense. You will see that when I switch back to Source mode, you will see that it automatically adds in those tags that are actually children of my Application tag. And it's also specified the x and the y positions and it has also specified the text property and also specified the width that I have set these to.

Now when you are looking a code this like one of the things you will find very useful especially if you are working in any sort of a team environment is Line Numbers and you will want to know exactly where you are, so you can refer hey this TextInput control is on line whatever. So to turn on Line Numbering in the Flex IDE you just right click and choose this little check box here that says, Show Line Numbers. That turns on Line Numbering, so you can easily refer to where you are actually within the code.

And notice it has also specified the layout is absolute here and what layout absolute means, and that's a default but you could of course take this away if you like, this means that you can specify the x and the y coordinates of this particular control and you can see here that this is specified to x=10 and y=10.

Now if you look at Design mode, notice that the x position of this is 10 and the y position of this is 10. Now within all Flex applications the (0, 0) x, y coordinate point is actually the top left hand corner and it's a little different than you maybe used to in geometry class because the Y position gets bigger as you move down, right.

And then of course in Geometry class this would be a negative number but you will see y=10 is here and then the x=10 is here. So again little bit different just something to get used to when you are dealing with the Flex environment. So now I am going back to Source mode.

So let's actually practice just creating a very, very simple form. So what I would like you to do is go down to your Components panel here and you will see all of the different controls that are defined in the Flex framework. So for example, radio buttons, images, data... click to read more