Subtitles of the Movie

In this video we're going to create our first Flex Builder project for AIR and we'll also go over the Flex Builder Interface. Since we're using Zend Studio for Eclipse as our Eclipse installation we're presented with a PHP Development Perspective by default. To change this you can use the buttons in the upper right-hand corner and the arrow in the upper right-hand corner which displays buttons that are too large to be displayed in line. As you can see there's an option for Flex Development here. If you don't have a Flex Development option, click Window, open Perspective, and then Other, then choose Flex Development from the list and click OK. To create a new project choose File, New and then Flex Project. For the project name type helloWorld. For the application type, make sure you've selected Desktop Application Runs in Adobe AIR. Leave the default location selected and click Finish. Your project will be generated and opened in the Design View. If you're open in this view, the Source View or Code View by default, click the Design button to switch to Design Mode. If you haven't used an Integrated Development Environment, or IDE, before this can look a little bit daunting and complex. Let's break down the Eclipse Interface and go over it one pane at a time. In the upper left you'll see the Flex Navigator Pane. This pane will contain all of your projects in a folder tree-type view. In our base folder, which is named the same as our project we have several subfolders. The most important one is the src, or source folder. This contains our MXML files by default, which were generated when we created our project using the New Project Wizard. There's a helloWorld-app.xml file and this contains details about how the application runs in Adobe AIR, like the initial window size and how the window looks. There are also some other generated files down here, the ActionScript Properties, Flex Properties, and. Project. These files contain information for Flex Builder about the project. The bin-debug folder is where your application will be compiled to when you're debugging and testing it. Below the Flex Navigator Pane is the Components and Outline Pane. As you can see, there are a lot of things listed, also organized into folders. The Controls folder contains the visual controls that you can use in Flex and AIR applications. We'll go over these in more detail, but to add them to your application in Design View you can simply click and drag them out onto the design area of your application. The folder beneath the Controls folder is the Layout folder. It contains different visual controls that will line up your application or organize other visual components placed within these different layout components. We'll also talk about these in much greater detail as we progress through the video series. The Navigators are used to page through data or to construct wizards, or other applications where you need to view only one portion of content at a time. The Adobe AIR folder contains the controls that are available only to Adobe AIR applications. You can't use these in Flex applications that run in the browser. Finally, the Charts folder contains components for displaying data in a visual way using Charts. Flex includes many charts out of the box as you can see, and these can be configured in all sorts of different ways. In the upper right corner we have the States Pane. The States Pane is used to define different view states for your application. View states are used to add and remove components many at a time. We'll talk about these much more in depth as we move along. Next, we have the Flex Properties Pane. This pane is very important. It shows the editable properties of whatever is selected in this main Design Pane. Since we don't have any components on our application yet we have the whole application itself selected. You can choose the alignment options for the application and other controls as well. You can also use CSS to specify different styles. You can use the Text Controls to set cascading properties for fonts. For example, if you have the whole application selected, changing the font here will change it for the application and all the components contained within. We also have options for the different colors and Alphas for the background of our application. We'll talk about styling in great detail in future videos. The center pane at the bottom of the window is the Problems Pane. This Pane will display the line numbers and details about problems that may come up in your code. You'll probably use this area pretty frequently and it'll point you in the right direction when you're having problems.