Medium 9780596516215

Programming Flex 3: The Comprehensive Guide to Creating Rich Internet Applications with Adobe Flex

Views: 1697
Ratings: (0)

If you want to try your hand at developing rich Internet applications with Adobe's Flex 3, and already have experience with frameworks such as .NET or Java, this is the ideal book to get you started. Programming Flex 3 gives you a solid understanding of Flex 3's core concepts, and valuable insight into how, why, and when to use specific Flex features. Numerous examples and sample code demonstrate ways to build complete, functional applications for the Web, using the free Flex SDK, and RIAs for the desktop, using Adobe AIR. This book is an excellent companion to Adobe's Flex 3 reference documentation. With this book, you will:

  • Learn the underlying details of the Flex framework
  • Program with MXML and ActionScript
  • Arrange the layout and deal with UI components
  • Work with media
  • Manage state for applications and components
  • Use transitions and effects
  • Debug your Flex applications
  • Create custom components
  • Embed Flex applications in web browsers
  • Build AIR applications for the desktop

Flex 3 will put you at the forefront of the RIA revolution on both the Web and the desktop. Programming Flex 3 will help you get the most from this amazing and sophisticated technology.

List price: $43.99

Your Price: $35.19

You Save: 20%

 

22 Slices

Format Buy Remix

1. Introducing Flex

ePub

Flex is a collection of technologies that enables you to rapidly build applications deployed to Flash Player, a runtime environment for delivering sophisticated user interfaces and interactivity. Flex leverages existing, matured technologies and standards such as XML, web services, HTTP, Flash Player, and ActionScript. Even though Flex allows you to create complete rich Internet and desktop applications, it does so in a relatively simple and intuitive manner. Although Flex does allow you to get under the hood for more granular control over all the elements, it significantly lowers the learning curve in that it allows you to compose applications rapidly by assembling off-the-shelf components, including UI controls, layout containers, data models, and data communication components.

In this chapter, well introduce Flex and Flex technologies in more detail so that you can better understand what Flex is and how you can best get started working with it. Youll learn what elements a Flex application uses and how they work together. Well also compare and contrast Flex with other technologies for creating both standard and rich Internet applications (RIAs). Additionally, well review the changes and additions to Flex 3 from earlier versions.

 

2. Building Applications with the Flex Framework

ePub

The majority of this book is dedicated to programming Flex applications, with detailed discussions of working with MXML and ActionScript. However, to meaningfully use most of what we discuss in the chapters that follow, youll need to know how to create a Flex project, how to compile the project, and how to deploy that project so that you can view it.

In this chapter, well discuss important topics like the tools needed to create Flex applications and how to create new projects for Flex applications. Well look at elements comprising a Flex project and discuss compiling and deploying Flex applications.

To work with Flex and build Flex applications, youll need tools. At a minimum, you must have a compiler capable of converting all your source files and assets into the formats necessary to deploy the application. That means you need to be able to compile MXML and ActionScript files into an .swf file.

There are two primary tools you can use that include the necessary compilers:

 

3. MXML

ePub

MXML is a declarative markup language used to create the user interface and to view portions of Flex applications. As the name implies, MXML is an XML-based language. If youre familiar with XML or even HTML, many of the basic MXML concepts we discuss in this chapter will already be familiar to you in a general sense. In this chapter, well look at all the basics of working with MXML, including the syntax and structure of the language, the elements of which MXML is composed, creating interactivity in MXML, and how you can use MXML to build applications.

If youve ever worked with XML or HTML, the structure of MXML will be familiar to you. Even if XML and HTML are unfamiliar to you, you will likely find MXML fairly intuitive. MXML uses tags to create components such as user interface controls (buttons, menus, etc.), and to specify how those components interact with one another and with the rest of the application, including data sources. In the following sections well look at how to write MXML code.

 

4. ActionScript

ePub

ActionScript is the programming language that you can use along with MXML to create sophisticated Flex applications. Although MXML is an important part of a Flex application, it is mostly used for creating the user interface, and it can go only so far in creating a complete application. For data models and sophisticated client-side business logic, youll need to use ActionScript as well.

Flex applications require ActionScript 3.0, which represents a significant maturation from earlier versions of the language. ActionScript 3.0 is compliant with the ECMA-262 specification and leverages parts of the pending ECMAScript Edition 4 specification. ActionScript 3.0 supports a wide range of features, including formalized classes, interfaces, packages, runtime exception handling, runtime data types, reflection, regular expressions, E4X (XML), and more.

ActionScript is a standards-based, object-oriented language. Because ActionScript is an object-oriented language, it can be viewed as a collection of APIs generally in the form of classes. There are three tiers of ActionScript APIs:

 

5. Framework Fundamentals

ePub

When you build a Flex application, you create an .swf file. Users can then run the application using Flash Player, just as they would any other .swf file that was created by any other means (e.g., by using the Flash authoring tool). Flex .swf files have two distinct characteristics:

When building Flex applications, the developer has access to and uses a vast library of ActionScript classes known as the Flex framework. The parts of the framework the developer uses are compiled into the resultant .swf file.

At runtime, the Flex framework code that is compiled into the .swf dictates a particular way in which the application will load, initialize, and run.

The Flex framework has been designed in such a way that it just works without you, the developer, needing to know too much about it. Yet, having a better understanding of the inner workings of the Flex framework will aid you in many ways. For example, the Flex framework provides built-in preloading functionality, and it uses a default progress indicator (unless you tell it otherwise). That means you get these capabilities for free, and they will work without any extra effort on your part. However, you can also customize the progress indicator, as well as customize what happens while the application is downloading and/or initializing, to suit your needs. Without a better understanding of the Flex framework, customizing Flex in this way may be difficult. This is also true of other scenarios, including customizing component creation policies, localizing applications, and using shared libraries.

 

6. Managing Layout

ePub

One of the key features of Flex is its ability to simplify application layout. Traditional application development requires writing layout code, or working with layout components in a nonintuitive manner. With MXML and Flexs layout containers, you can lay out most applications without having to write a single line of custom layout code.

In this chapter, we will provide an overview of Flex layout containers and discuss the layout rules they use. We will also cover how to work with containers and children, how to nest containers, and how to build fluid interfaces.

Container components are the basis of how Flex provides layout logic. At the most basic level, the Application class is a container, and subitems within the Application class (tag) are called children. In MXML, placing nodes within a container declaration signifies that the objects are instantiated and are added to the container as children, and the container automatically handles their positioning and sizing.

 

7. Working with UI Components

ePub

The Flex framework consists, in large part, of components. Within the framework there are many types of components, from data components to layout components to user interface (UI) components. You can read about each type of component in the appropriate chapters throughout this book. In this chapter, we focus on UI components. UI components are visual components that display something to the user and/or prompt the user to interact with the application.

Although theres no formal classification for the majority of the UI components in the Flex framework, it is useful to categorize them just for the purposes of discussion. Weve organized our discussion of the Flex framework UI components based on the categories listed in Table7-1.

Table7-1.UI component categories

Category

Components

Buttons

Button, LinkButton, RadioButton, CheckBox

Value selectors

HSlider, VSlider, NumericStepper, ColorPicker, DateField, DateChooser

Text components

Label, Text, TextInput, TextArea, RichTextEditor

List-based controls

 

8. Customizing Application Appearance

ePub

The Flex framework has a great deal of functionality built into it, making it relatively easy to start building applications. All of the user interface components and layout containers greatly simplify the process of creating a new application because you can utilize all the functionality of the components without having to write all the code to make them work. As great as that is, it would be nearly useless in most cases if you couldn't customize the appearance of the components. Yet, as well see in this chapter, customization of the appearance of Flex components is another built-in feature.

There are essentially two ways you can customize the appearance of components:

Apply styles.

Change skins.

Styles are settings such as color, font face, border settings, row height, and so on. These are settings that you can customize entirely programmatically both at compile time and at runtime. Styles allow you to customize a great deal of the appearance of components, yet they can go only so far. For example, if you want to change the background color of a button, you can do that using styles, but if you want to completely change the shape of a button (e.g., from a rounded rectangle to a trapezoid), you need to use a different technique in which you change the skins of the component. Skins can be graphical elements (e.g., PNG files) or programmatic elements (classes), and they allow you to not only customize the existing elements of a component, but also completely change which elements are used. Therefore, using custom skins allows you to alter the appearance of a component so completely that it is unrecognizable from its original default appearance. You can use both styles and skins at the same time (although oftentimes applying a skin will cancel out certain style settings).

 

9. Application Components

ePub

As the scope of your applications grows, sooner or later you will need a better way to organize all their different components. One principle that is known to be effective in this task is the component-based development principle.

This chapter focuses on application components. Application components are logically modular elements (not to be confused with Flex modules) within an application that you typically define using MXML and that behave in a manner similar to the components we have been exposed to throughout this book.

Component-based development allows a developer to divide an application into components. Doing so provides several benefits:

It helps to promote many object-oriented design principles, including code reuse, loose coupling, encapsulation, and reduced bugs.

It allows you to simplify a large problem into smaller ones.

It allows different team members to focus on their own components, which allows teams to be more efficient.

Traditionally when developers think of components, they think of prepackaged components that have been developed by a third party. In component-based development, third-party components are important, but so are user-developed components. Instead of allowing application development using just third-party components, an effective component-based development platform should allow you to mix third-party and user-developed components. In earlier chapters, we discussed how Flex and MXML allow rapid application development using several components. In this chapter, well discuss the reasons application components are important and useful. Well also discuss how to write application components.

 

10. Framework Utilities and Advanced Component Concepts

ePub

As youve already learned in earlier chapters, the Flex framework provides a large library of components, including layout containers and UI controls. However, in addition to the components themselves, the framework also provides libraries that offer you advanced features and functionality when working with those components. In this chapter, well look at the features and functionality these libraries provide. Specifically, well discuss tool tips, pop ups, cursor management, drag-and-drop, the ability to customize list-based items, and focus management and keyboard control.

When an application contains graphics, it can often be helpful to users if you provide text-based descriptions to accompany the graphics. This is especially beneficial when the meaning of a particular UI element is not immediately obvious. It can also be useful for low-sighted and non-sighted users who rely on screen readers. Rather than cluttering the user interface with many text-based descriptions of graphics, however, many applications use tool tips, which are blocks of text that appear when the user moves the mouse over a visual element. In the following sections youll learn how to work with Flex tool tips.

 

11. Working with Media

ePub

A picture is worth ten thousand words, and with Flex you have the ability to add pictures as well as animation, audio, and video to your applications. Flash Player has its roots in graphics and animation, and over time it has grown into a strong development runtime for interactive custom user interfaces. Flash Player has a long history in handling rich media on the Web, and Flex can leverage that strength and provide a truly engaging user experience. Flash Player not only handles many of the bitmap graphics formats that traditional web browsers do, but it also has native support for vector-based graphics, animation, audio, and video.

This chapter covers loading and embedding assets, streaming media, supported media types, and working with the different media types.

You can incorporate media into an application in one of two ways: at runtime or at compile time. Adding media at compile time is called embedding, because the content is compiled into the SWF. Adding media at runtime is called loading, because the content exists as separate files from the application that must be loaded into the Flex application when they are requested.

 

12. Managing State

ePub

In Flex terminology, a state is a collection of changes (called overrides) to a view. The overrides can comprise additions or removals of components as well as changes to their properties and behaviors. Every Flex application (and every Flex component) has at least one state, referred to as its base state. Flex states enable you to more easily change the view for an application, whether at a macro or a micro level. For example, you can define two states that act as screens in an application (e.g., a login screen and a menu screen). Using states for screens is an example of a macro-level use. At the micro level, you can use states to manage cascading forms and even different views for components (e.g., rollover changes).

The Flex framework provides an entire library for states and state management. You can create and manage states from MXML or ActionScript. Furthermore, you can use states in conjunction with other Flex features, such as transitions and history management, to create robust, responsive, and engaging applications and user interfaces with relative ease. In this chapter, youll learn how to work with Flex states.

 

13. Using Effects and Transitions

ePub

Flex applications always consist of one or more user interface and/or container components. At a minimum, a Flex application has an application container, but usually it has many additional components. Although the default behavior for components is fairly static, you can liven up an application with the use of effects. An effect is an action that takes place, such as moving, fading, or zooming into or out of a component. An effect can even be a nonvisual behavior, such as playing a sound. Using effects, you can create applications that are more visually (and audibly) interesting. Perhaps more importantly, you can use effects to direct focus and help users better understand how to use applications.

Another way in which you can use effects is to create transitions between states. In Chapter12, you learned about creating state views. However, so far youve learned how to create only sudden state changes. Using effects as transitions, you can create more interesting and seamless changes between states. For example, rather than an added component suddenly appearing, it can fade in. Not only does this generally create a more visually engaging user experience, but also effects can be used to show emphasis and to highlight change.

 

14. Working with Data

ePub

Although some Flex applications use data more extensively than others, nearly all use data to some extent. The Flex SDK is a robust set of tools for working with data. This chapter examines how to work with data on the client side without an extensive discussion of client/server data communication, which is covered in Chapter16. Rather, this chapter focuses primarily on the following topics: modeling data and data binding.

When working with data, you generally want to store it in some sort of data repository within memory. These repositories are known as data models. In the first section of this chapter, well look at each of the three basic ways to store data in data models.

You can use ActionScript for all your data management needs, but then youre not really using the power of the Flex framework. To simplify linking data from a data model to a control or from one control to another control or component you can use a powerful feature called data binding.

Once you know the basics of working with data in a Flex application, youll have a foundation for sending and receiving data. That topic is discussed further in Chapter16.

 

15. Validating and Formatting Data

ePub

When working with data, youll frequently need to ensure that the data adheres to certain rules. When the data is from user input, this is called validation. When the data is being displayed or needs to be in a particular form before storing it or sending it to a service method, this is called formatting. The Flex framework provides mechanisms for both of these types of operations. In this chapter, we will look at both validating and formatting data.

When you work with user input, you frequently may want to validate that input before submitting it for some sort of course of action, either client-side or server-side. For example, if you want to submit form data to a server script that inserts the data to a database, you may need to verify that the values are in the correct format so that you can insert them (e.g., a numeric value needs to be a number and a date needs to be formatted in a way that your script can parse it into the format you require for the database). Often it is advisable to add both client-side and server-side validation. The server-side validation ensures that no strange or incorrect values were inserted at the time the request was made, and the client-side validation makes sure the data is valid before even making a request. Only client-side validation is within the scope of Flex coding, and therefore we will look at how to validate data client-side using Flex.

 

16. Client Data Communication

ePub

Flex applications are capable of many types of data communication, from the simple to the complex. Often when we think of data communication in Flex applications we think of client/server communications such as remote procedure calls (RPCs). However, some types of data communication occur entirely on the client side, and these types are the subject of this chapter.

At a minimum, all Flex applications require a client-side element in the form of a .swf file running in Flash Player. Some Flex applications even use several .swf files running in one or more instances of Flash Player on the client machine. The client-side portion of a Flex application is capable of several types of client data communication intended for a variety of purposes.

There are three main ways in which a Flex application can run data communications on the client:

A local connection allows two .swf files to communicate as long as they are running on the same client machine at the same time. The .swf files can be running in two different instances of Flash Player. They can even be running in different host environments. For example, one .swf can be running in a web browser while another is running embedded within an executable running on the desktop. The .swf files can even communicate while served from different domains if configured correctly.

 

17. Remote Data Communication

ePub

Remote data communication occurs at runtime. It does not reside strictly in the client, but requires network connections to send and receive data between the client and the server. Flex applications support a variety of remote data communication techniques built on standards. There are three basic categories of Flex application remote data communication:

This category consists of several overlapping techniques. Utilizing the Flex framework HTTPService component or the Flash Player API URLLoader class, you can send and load uncompressed data such as text blocks, URL encoded data, and XML packets. You can also send and receive SOAP packets using the Flex framework WebService component. And you can use a technology called Remoting to send and receive AMF packets, which use a binary protocol that is similar to SOAP (but is considerably smaller). Each technique achieves the similar goal of sending requests and receiving responses using HTTP or HTTPS. See http://www.jamesward.org/census for a comparison of various methods for loading data at runtime over HTTP.

 

18. Application Debugging

ePub

One of the strengths of Flex is its modern debugging capabilities. Debugging client-side code in web applications has traditionally been cumbersome. The Flash Debug Player, provided with Flex, allows developers the ability to debug applications in the same way they have been accustomed to with other modern development platforms.

In this chapter, we will cover runtime errors, debugging applications using FDB, debugging applications using the Flex Builder debugger, remote debugging, and tracing and logging.

The Flash Debug Player is at the core of the debugging capabilities provided to Flex. The Debug Player provides several benefits specific to developers and is required for most types of debugging you will need to do. The browser plug-in and standalone editions of the Debug Player are included in the free SDK in the /runtimes/player folder, and in the <Path to Flex Builder 3>/Player folder if you are using Flex Builder 3. Also, if you installed Flex Builder, the Debug Player browser plug-in is typically installed during the install process. You can always check to ensure that you have the latest edition of the Debug Player by visiting http://www.adobe.com/support/flashplayer/downloads.html.

 

Load more


Details

Print Book
E-Books
Slices

Format name
ePub
Encrypted
No
Sku
9781449391089
Isbn
9781449391089
File size
0 Bytes
Printing
Not Allowed
Copying
Not Allowed
Read aloud
No
Format name
ePub
Encrypted
No
Printing
Allowed
Copying
Allowed
Read aloud
Allowed
Sku
In metadata
Isbn
In metadata
File size
In metadata