In this first task, you will be creating a Flex application. To do that, you must first create a project in Flex Builder. A project is nothing more than a collection of files and folders that will help you organize your work. All the files you create for the FlexGrocer application will be in this project. You'll also see that you have two choices when working with an application file. You can be in either Source mode or Design mode. In most cases, the view you choose will be a personal preference, but there are times when some functionality will be available to you only when you are in a particular view.
Also in this task, you will run the Flex application. You'll discover how the MXML code you write is turned into a SWF file that is viewed in a browser.
Start Flex Builder 2 by choosing Start > Programs > Adobe > Flex Builder 2.
This is most likely the way you will start Flex Builder. There is a possibility that you had Eclipse already installed on your computer and then added the Flex functionality using the plug-in configuration. In this case, you will need to open Eclipse as you have before.
Choose File > New > Flex Project. Select the Basic option; then click Next.
You will be creating only one project for this application, but there are many options from the New menu choice. You'll explore many of these options throughout the book and one of them later in this lesson.
For the Project name, enter FlexGrocer.
The project name should reflect the files contained in the project. As you continue your work with Flex Builder, you'll soon have many projects, and a project name will be important to remind you which files are in each project.
Uncheck the Use default location check box, and for the Folder location enter driveroot:/flex2tfs/flexGrocer. Click Next.
Do not accept the default for this entry. The default uses your My Documents directory and places files very deep in the directory structure. For simplicity's sake, you are putting your working files right on the root drive.
driveroot is a placeholder for the root drive of the operating system you are using, Windows or Mac. Replace driveroot with the appropriate path. Also, note that the directory name is case-sensitive.
For the Main application file enter DataEntry.mxml.
By default, Flex Builder will use an application name that is the same as your project name. You do not want that in this case. Flex Builder automatically creates the main application file for you and includes the basic structure of a Flex application file.
MXML is a case-sensitive language. So be sure to follow the case of filenames in tags shown in this book. At the end of this lesson, there will be a short discussion on how object-oriented programming affects some of the case usage for filenames, tags, and properties.
Click Finish and see the project and application file that were created. The default application file contains some elements you need to understand. The first line of code (<?xml version="1.0" encoding="utf-8"?>) is an XML document type declaration. Because MXML is an XML standard language, the document declaration must be included.
Here you see your first Flex application. Currently the application is displayed in Source mode. Later in this lesson, you will also look at this application in Design mode.
The second line of code (<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">) defines a Flex main application page. The <mx:Application> tag represents the outside container, or holder of all the content in the Flex application. You can have only one <mx:Application> tag per Flex application.
Inside the <mx:Application> tag, the attribute/value pair that appears to hold a URL xmlns:mx="http://www.adobe.com/2006/mxml" is defining a namespace for your Flex tags. This code defines the mx prefix to be associated with a set of tags. The value of the attribute that looks like a URL is actually what is referred to as a Universal Resource Identifier (URI) in XML terminology. In a configuration file, flex-config.xml, an association is made between this URI and what is called a manifest file. The manifest file contains all the legal tags that can be used with the mx prefix. In a standard Flex Builder installation, the file is found at this location: installationdirectory\Adobe\Flex Builder 2\Flex SDK 2\frameworks\mxml-manifest.xml.
Part of that file is shown in the following example.
Finally, layout="absolute" defines how this application page will lay out its children or what is on the page. With an absolute layout you specify x,y values to position all children of the application. Other valid choices for the layout's value are vertical and horizontal. A vertical layout means all children of the application run vertically down the application's page, and horizontal means they run horizontally across the application's page. As you continue to develop in Flex you will use a combination of the layouts to gain the look you want.