- Shopping Bag ( 0 items )
Want a NOOK? Explore Now
Design and create functional applications that interact with remote data sources. You get a thorough introduction to the latest Flash Builder tools learning how you can use the built-in wizards, MXML or pure ActionScript 3 to build information-rich applications for the browser or AIR applications. Hand’s on tutorials guide you through each iteration including building user interaction, charting, incorporating audio and video, customizing the UI; and a code repository provides re-usable code that you can modify and deploy in your own applications.
*Hand's on approach with projects and code provided *Color illustrations, tips and tricks deliver nuanced interface solutions *Code repository provided for re-use in personal projects
In this section you will learn to build a Flex application. You will discover that Macromedia Flex Markup Language (MXML) is a great markup language to quickly create a working application. The application will load data from RSS and will display information accordingly. To get to this result, we need some theory about the Flex framework and to get acquainted with the Flash Builder IDE. Are you ready?
The Flex Framework
It all began when somebody at Adobe woke up and said: "Sometimes I feel I am resolving similar problems each time I work on a new project." After some mumbling, a friend replied: "Why don't we put in the same place a set of solutions to the repetitive problems you solve each time?" At that moment Flex was born. Flex is not a "place"—it is a framework. Although there is some dispute on the definition of the word framework, I like mine: Something that helps to connect different components of a project; it can encompass libraries, patterns, and a scripting language. Flex is all of this: it embeds a library of components (visual and nonvisual) and a scripting language (ActionScript 3), and implements a set of patterns to adopt in different situations. There are a few reasons for this:
It is easier to develop.
It favors the team to work consistently.
It aggregates objects/components into something useful.
It reduces repetitive tasks.
It favors the creation of reusable code.
It decouples dependencies between components.
In this section I will give you a brief introduction of the Flex framework. Although you will create applications with Flash Builder most of the time, it is nonetheless important to know what is under the hood.
Overview
Flex has born-to-build interactive applications that run on browsers (via plug-ins), desktop (via Adobe AIR), and mobile applications, thanks to the recent addition of the new Flash player on smart phones and mobile devices. Although it is a general-purpose framework it is best suited for data-driven applications, which gather data from remote web services and display interactive visuals.
There are two languages to create Flex applications: MXML and ActionScript 3. MXML is an eXtensible Markup Language (XML)-based language, used to define the layout of the user interface and its behaviors, whereas ActionScript 3 is the core scripting language, mainly adopted to define the logic. To create an application we create a set of files that are fed into the Flex compiler, which generates an SWF file that is visualizable in every browser with the Flash player installed (Figure 1.1).
MXML is similar in concept to HyperText Markup Language (HTML)—there are tags and properties. Tags can be embedded in other tags according to a semantics defined in a Document Type Definition (DTD). This is an advantage, especially for designers, because tag-based languages look more friendly and are easy to work with. For example, if you come from web development, it should be easy to grasp the following piece of code.
<Canvas backgroundColor="#ffffff"> <Button label="Click me"/> </Canvas>
You should find out pretty soon that there is a canvas with a white background containing a button of which the label is "Click me."
Besides two languages, the Flex framework also includes a set Of graphical components like buttons, labels, and menu/text controls, plus a set of smart containers to organize the layout of the application. You can experience the set of components by visiting http://examples.adobe.com/flex3/componentexplorer/explorer. html. The development kit also includes a debugger to assist you in bug hunting.
Installing the Flex SDK
The Flex SDK can be downloaded from http://opensource. adobe.com/wiki/display/flexsdk/Download+Flex+4. You can choose from an already compiled version or download the source code and compile it on your own. In any case, you should end up with a folder structured like Figure 1.2.
Let's have a look at the main folders. The Bin folder contains executables. For example, to compile a Flex application you just need to type the following:
${flexsdkfolder}/bin/mxmlc MyFile.mxml
This generates an SWF file that you can visualize in the standalone Flash player or embed in an HTML page. The Frameworks folder (and especially its subfolder Lib, short for Libraries) includes all the files needed to create, run, and debug Flex and Adobe AIR applications. There you can find libraries for text, utilities, JavaScript bridges, etc. The Samples folder contains commented source code of examples built by Adobe.
Flash Builder
To ease the development of applications, Adobe has created Flash Builder. It is an Eclipse-based plug-in that includes many features to speed up development, debugging, and profiling. It features:
Code completion
Syntax highlight
Design view (styling skinning)
Interactive debugger and stepper
Refactoring
Profiler
Remote data wizard
Wizards to configure local backends
Introspection of data services
Downloading and Installing Flash Builder
You can obtain a free version of Flash Builder for evaluation from http://www.adobe.com/go/try_flashbuilder.
Since Flash Builder is based on Eclipse there are two installers available: standalone and plug-in. The standalone version includes everything you need to run Flash Builder since it embeds a basic version of Eclipse. If you have already installed Eclipse (e.g., you use it to develop Java applications) you can download the plug-in version. In both cases, you will end up with what you need to work with Flash Builder. The installation process is automated so we can go straight to the illustration of the IDE.
Overview of Flash Builder
When you open Flash Builder it should look like Figure 1.3. At the top we have a set of buttons that we illustrate in the next section. If you are not an Eclipse user it is important to familiarize yourself with the notions of perspective. A perspective is a particular configuration of windows and panels. If you have a background in Flash it is pretty similar to the concept of workspace in Flash Pro CS5. Flash Builder, unless modified, opens in the Flash perspective, usually adopted to develop.
On the left there is the package explorer. This panel allows You to browse the structure of your project, add/change libraries, include/delete assets, add new files, etc. This tree reflects the structure of the folder that contains our project.
Below is the Outline panel, the role of which is to show the hierarchical structure of the application. We will describe it more deeply in the "Using the Design View" section. The code viewer window takes much of the space available because it contains a tabbed view of the source code files to edit. At the bottom there is a tabbed view with contextual information, which changes according to the state of the application. For example, it shows problems during the compilation, errors in the console, network traffic, etc.
We now have enough information to create our first project from scratch.
Creating an Empty Application
From the File menu we select "New Flex Project." This opens up a wizard window that allows us to define our first project. At the top we have to provide a name. The second important choice is the application type (see Figure 1.4). Here we choose Web.
Then we can specify the SDK to be used in the project. This is a choice we can also modify later. If we want to take advantage of the new features introduced in the last release of Flex, we choose Flex 4. Now we move to the next step. Here we keep the default value for the output folder and click Finish. As you can see from Figure 1.5, the Flash Builder has already created a bunch of folders for us.
This is a pretty standard organization of folders, well known by Flex developers. The src folder contains MXML and ActionScript source files. It is important to note that the src folder does not exactly reflect the organization of the folders of your project. In fact, if you check out your workspace, there is no folder named Default Package.
You might also notice that Flex 4 is not present in the project folder. This item in the project is used to specify the library path. If you open the node, it will show the list of libraries (automatically linked) that are needed to run the Flex application (Figure 1.6).
The folder Bin-debug is where the compiled application, the built-in debug mode, is stored. The Flex compiler does not simply create an SWF file, but it outputs also its hosting HTML page already set up, which already embeds the Flex application. To do so, it uses the files in the HTML-template folder. If you know HTML and CSS (Cascading Style Sheets) you can customize the HTML page generated by Flex.
Finally there is a Lib folder, where we can import/store third-party libraries needed to run our application.
How to Run/Debug
We can visualize our Flex application in two modes: run and debug (Figure 1.7). Run just compiles the source code, generates accessory files, and runs the default browser opening the corresponding HTML page.
Debug does the same job as run, but the resulting application is compiled in debug mode. In this mode you can interact at runtime with the application, check the value of variables, step through the source code, and hunt possible bugs.
Using the Design View
When you open an MXML source file you will notice that there are two options in the upper left corner: source and design (Figure 1.8). The source view allows you to see the MXML code and the design view shows its visual counterpart.
At the moment the application is empty because we just have one element (line 2), which is the stage of our Flex application. Let's populate it with a button. We move to the design view and we drag a button component from the list on the bottom right to the design view. A visual component is placed on the stage (Figure 1.9).
If we double-click it we can change it's label. If we switch back to the source view we can check the corresponding generated code (line 9). See Figure 1.10.
As you can see, creating the visuals of a Flex application is a matter of drag and drop. Components can be placed and modified in a WYSIWYG (what you see is what you get) way. The corresponding code looks clean and ready to be further modified by a developer.
The Application Tag
We said MXML is an XML-based language. One of the rules of XML languages is to have a root tag, which is a tag that wraps every other tag. That is used by the interpreter to start rendering the application. If you are familiar with HTML you know that the root tag of each page is
Section 1 Your first Information Rich Application Project 1: Music Store Brower Section 2: Building User Interaction Project 2: Tweets on a Map Section 3 Charting and Multimedia Project 3: YouTube Inspector Section 4 Building AIR Applications Project 4: Flickr with Cache
Section 5 Customizing the User Interface Project 5: Customizing Projects
Companion website: datavisualizationflashbuilder.com
Overview
Design and create functional applications that interact with remote data sources. You get a thorough introduction to the latest Flash Builder tools learning how you can use the built-in wizards, MXML or pure ActionScript 3 to build information-rich applications for the browser or AIR applications. Hand’s on tutorials guide you through each iteration including building user interaction, charting, incorporating audio and video, customizing the UI; and a code repository provides re-usable code that you can modify ...