Subtitles of the Movie

To actually make your application do something or show something you'll need to add some visual controls. Let's begin by dragging out a Label Control from the Components Pane on the lower left. Drag the Label onto your application and drop it in place. Then in the Flex Properties Pane on the right side scroll up and find the Text entry box. Change the Text to Hello world, then press Enter or Tab to apply the text. Scroll down to the Text section of the Flex Properties Pane and you'll see that you can choose from a few different default Fonts and set the font Size and Style. You can set the Font size, Font weight, and color. Once you've made some changes and you're comfortable using these controls, click the green Run arrow to launch the application. You may be prompted to save your resources first. Since you'll almost always want to save your changes before running, you can choose: Always save resources before launching, to avoid having to click OK in the future. When your application launches you should see something similar to this. It's pretty basic but it is the helloWorld application. Close the application and go back to the Flex Properties Pane inside of Flex Builder. Scroll down and look at the Constraints section in the bottom. Along the top click the center and then along the side click the center checkbox, then click the green Run arrow again to launch the application. It should now be automatically saved and then it will build and launch. As you can see, our Text moves around and is anchored because of the constraints we selected. Now that we've added a control to the application and changed some of the properties of it, let's take a look at the Source view and see what's contained within our main MXML file, helloWorld.mxml. On line 1 you'll notice this XML version tag. This simply specifies that the document conforms to the XML standard, version 1.0 and that the encoding of the document is UTF-8. This tag will be included in all MXML files you create. Next, we have the WindowedApplication tag. This tag will appear in every main application mxml file for AIR projects. In Flex it's simply mx application. The next portion of the WindowedApplication tag tells us a little bit more about what the mx colon means. As you can see, it's specified as http:double front /www.adobe.com/2006/mxml. This is simply a standard and it needs to be defined in all of your MXML files. It'll be generated by default. Next, we have the Layout attribute of the WindowedApplication tag. By default it's set to absolute. The other options for this tag are vertical and horizontal. Absolute means that you'll need to specify an X and Y coordinate for all the component you add. This means you will get full control of where your components appear. If you have a simple application or you want things lined up automatically, you can change this to vertical and all your components will line up vertically in the center of the application. If set to horizontal, the components will also line up along the center, but along the horizontal axis. On line 3 we have the Label Control that we dragged out from the Design view. Again, mx is specified as the namespace, and the name Label is specified. If you mouse over it and leave your cursor there for a moment you'll see that it's part of the package mx. controls. Label. The namespace specifies what package of code it's in within the Flex Framework, and Label is the Class name. The Class contains all the code that defines how a label looks and how it acts and how it behaves. We'll talk much more about this later but all you need to know right now is that the namespace and colon are there and they mean that this is a built-in component that's part of MXML, and it's called the Label, and it's an instance of the Label Class. The next attribute we have is Text. The Text attribute of the Label Control specifies what it actually says. Like all the other tags in MXML, it's specified within quotes. Next, we have font family which can be one of the default included fonts. Then we have the fontSize, the fontWeight, and the color. The color is specified as a hexadecimal number. If you've used CSS or XTML before, you're probably familiar with this. You'll almost always want to specify these using a Color Picker like we did in the Design view, unless you've decided on a specific color scheme, in which case you'll want to use the exact same color every time. The horizontalCenter and verticalCenter attributes signify the constraints that we set earlier in the Design view by clicking in the check boxes that were aligned along the X and Y axis. This simply specifies that the controls should be anchored at a certain point. Since our Label tag only takes up one line we have the opening portion of the tag here, and then at the end of the line the short hand closing, which is a/and then a greater than symbol. If your tags take up more than one line, like the application tag, that line will end in a single greater than sign and then you'll use the full closing tag at the end. In this case, a less than sign, a/, and then the tag with the namespace once again followed by one greater than sign.