Flex
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 2
by Joseph Balderson - 18-Nov-09
Reader Level: 
In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.
In a Community MX exclusive, the following is an excerpt from Chapter 2: The Flex 3 Ecosystem:
Before diving into the specifics of any technology, it helps to know the terrain. You may have heard terms such as the Flash Player, Flash runtime, Flex, Flex framework, virtual machine, Flash Platform, Flex ecosystem, and various Adobe server products. The previous chapter defined a few aspects of this ensemble of technologies but perhaps not enough for the uninitiated to get a grasp of how they are related. What else is there? And how do they all fit together? This chapter will attempt to categorize and enumerate as many aspects of the ensemble of Adobe and related technologies that we call “the Flex ecosystem” as possible. These technologies are divided into the following categories:
- Runtimes
- Languages
- Development tools
- Frameworks and APIs
- Data communications
- Servers
In Part 2 of this excerpt, we will continue our coverage of the Flex and Flash Platform development ecosystem of technologies, with Frameworks and APIs, Data Communications and Servers.
The Flex 3 Ecosystem Series:
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 1
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 2
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 1
by Joseph Balderson - 25-Aug-09
Reader Level:
In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.
In a Community MX exclusive, the following is an excerpt from Chapter 2: The Flex 3 Ecosystem:
Before diving into the specifics of any technology, it helps to know the terrain. You may have heard terms such as the Flash Player, Flash runtime, Flex, Flex framework, virtual machine, Flash Platform, Flex ecosystem, and various Adobe server products. The previous chapter defined a few aspects of this ensemble of technologies but perhaps not enough for the uninitiated to get a grasp of how they are related. What else is there? And how do they all fit together? This chapter will attempt to categorize and enumerate as many aspects of the ensemble of Adobe and related technologies that we call “the Flex ecosystem” as possible. These technologies are divided into the following categories:
- Runtimes
- Languages
- Development tools
- Frameworks and APIs
- Data communications
- Servers
In Part 1 of this excerpt, we will cover the history of Flex, followed by an in-depth coverage of the runtimes, languages and development tools associated with Flex development and the Flash Platform.
The Flex 3 Ecosystem Series:
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 1
Professional Adobe Flex 3: The Flex 3 Ecosystem - Part 2
Professional Adobe Flex 3: Why Flex?
by Joseph Balderson - 20-Aug-09
Reader Level:
In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.
The following article is an excerpt from Chapter 1: Why Flex?:
It seems like nearly every programming book I have ever read starts off with the obligatory “Introduction to [whatever]” chapter, which basically regurgitates the essentials that everyone knows, and hence is the one chapter nearly every reader skips. In this first chapter of the book, I thought we’d start things off with a different approach, one that takes you, the reader, through the reasons that you might want to use Flex, what Flex is for, bursting some myths about Flex and the Flash platform, and, finally, ending up with a “Top 10” of Flex’s strong points. Enjoy!
Professional Adobe Flex 3: Creating an ActionScript Application
by Joseph Balderson - 27-Jul-09
Reader Level: 
In May 2009, Wrox released a ground-breaking book: Professional Adobe Flex 3, written by Joseph Balderson, Peter Ent, Jun Heider, Todd Prekaski, Tom Sugden, Andrew Trice, David Hassoun and Joe Berkovitz, (ISBN 0470223642). This a landmark publication consists over 1400+ pages of Flex reference material, covering a multitude of topics ranging from beginner to advanced, from the fundamentals of the Flash Platform technology ecosystem to the intricacies of the most advanced Flex-related frameworks and server products, in a breadth and depth found nowhere else.
In a Community MX exclusive, the following is an excerpt from Chapter 6: Using Flex Builder 3. In this tutorial you will build a simple ActionScript application, and learn all about the undocumented [SWF] metadata tag to configure the Flash Player publishing properties.
Flex Power Tools: Using Flex Builder and FDT in The Same Workflow
by Joseph Balderson - 02-Jul-09
Reader Level: 
In my everyday programming as a Flex and Flash Platform developer, it's up to me to keep tabs on the best tools to enable me to do my work with the greatest ease and with the most efficiency. In other words, call it lazy or efficient, I just want to be able to code with the greatest of ease so I can focus more on building and less on typing.
In this tutorial, we're going to solve the challenging task of getting two of the most impressively featured Flex IDEs, Flex Builder and FDT, to work seamlessly in the same workflow, in the same eclipse installation, and even in the same project. The Flex coding workflow holy grail, one might say. So that when you're coding a Flex project, you have a choice of using the incredible code intelligence features of FDT, or the native features of Flex Builder, in the same project.
Note: this is an advanced tutorial, so you need to be familiar with using Eclipse-based tools.
Look Ma, FDT compilation with Flex Builder design view!
Flex Power Tools: Using Markers In Flex Builder 3 - Part 1
by Joseph Balderson - 02-Feb-09
Reader Level:
In this instalment of the Flex Power Tools series, we'll take a look at using markers in Flex Builder 3, to increase coding efficiency and manage your project development. In the following tutorials, you will learn to build a simple RSS reader using blog feeds from all of my fellow authors on the upcoming book Professional Flex 3 by Wrox publishing. In doing so you will learn navigate the project code, annotate the code with to do actions, and abstract part of the code into a Flex component.
In this first part, you'll learn how to navigate through the code using the Marked Occurrences and Bookmarks tools in Flex Builder. In Part 2, you'll mark to do items on the project using the Tasks tool, and complete the RSS component for the project.
The Flex Power Tools Series:
Flex Power Tools: Explorers
Flex Power Tools: Word Wrap for Flex Builder (and Eclipse)
Flex Power Tools: Using Markers in Flex Builder 3 - Part 1
Flex Power Tools: Word Wrap for Flex Builder (and Eclipse)
by Joseph Balderson - 16-Jan-09
Reader Level:
Have you ever used Flex Builder (or Eclipse) and wondered why this @#$%! application does not have word wrap?! Although true word wrap in Eclipse cannot be done, take heart, there is a solution. This brief tutorial will show you how to install and use the Ahtik Eclipse Virtual Word Wrap plugin for Flex Builder 3.
The Flex Power Tools Series:
Flex Power Tools: Explorers
Flex Power Tools: Word Wrap for Flex Builder (and Eclipse)
Flex Power Tools: Using Markers in Flex Builder 3 - Part 1
Creating a Flex Application with Source View
by Joseph Balderson - 12-Jan-09
Reader Level:
Creating a Flex application with Source View is simple, but may not be entirely obvious for the beginner. This Flex 3 tutorial will show you how to create a simple RSS reader in Flex using feeds from all of my fellow authors on the upcoming book Professional Flex 3 by Wrox Publishing, compiled with a source view page accessible through the Flash Player right-click menu. As a bonus, you'll even learn how to substitute a custom URL for the default view source location.
Flex Builder 3 Tip: Migrating a Workspace
by Joseph Balderson - 22-Dec-08
Reader Level:
Every once and a while there comes a situation where you need to migrate a whole workspace full of Flex projects over to another drive, or another directory. Flex Builder only supports importing projects, not workspaces, so this is not as easy as it sounds. This brief tutorial shows you how to do it simply and headache-free. We'll also cover some gotchas and best practices for managing Flex Builder projects.
Customizing the Flex HTML Wrapper: Adding a Cache Buster Script
by Joseph Balderson - 10-Dec-08
Reader Level: 
When Flex Builder compiles an application, it uses a template to create the default HTML wrapper for the SWF file to enable a web browser to show the Flex application correctly. This template can be customized to include specific functionality to the Flex application. In this tutorial, you'll learn how to modify the Flex Builder html template to include a "cache busting" script.
Developing a Flex-free AS3 Project for Flash Player 10 in Flex Builder 3
by Joseph Balderson - 12-Nov-08
Reader Level:
So you're developing an ActionScript 3.0 project, without using Flash components or the Flex framework, aimed at Flash Player 10. You could do it in Flash authoring, or you could do it in a third party code editor. But did you know you can also do this in Flex Builder?
This tutorial aims to show you that Flex Builder is not just for Flex projects: it can be used for pure ActionScript 3.0 projects, without accidentally using any classes or features of the Flex framework, compiled and deployed for Flash Player 10.
Developing for Flash Player 10 in Flex Builder 3
by Joseph Balderson - 05-Nov-08
Reader Level:
As a Flex developer, keeping up with new advances in Flash Player 10 is essential. Thus, it's nice to be able to build to the latest Flash Player, without waiting for the next major release of Flex Builder. This article will show you how to get Flex Builder 3's code assist to recognize Flash Player 10 classes, and to compile for and check for the presence of the Flash 10 Player, without a lot of mucking about with configuration files.
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
by Joseph Balderson - 25-Aug-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
Flex comes with its own video player component, the VideoDisplay class, which serves as a simple video player, but it does not possess the capability of the Flash CS3 FLVPlayback component. In this tutorial we will build upon techniques in previous articles, such as editing Flash class files in Flex and using the Flex Component Kit. Using this as a starting point, you will learn how to use the Flash CS3 FLVPlayback component in a Flex application, including some best practices and crucial gotchas to avoid in this conversion and a detailed authoring & compilation diagram to make it all clear.
The Final Flex Application with FLVPlayback Component, Authoring & Compilation Diagram
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
by Joseph Balderson - 01-Aug-08
Reader Level: 
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
In this tutorial we will examine creating a custom Flex component in Flash CS3 using the Flex Component Kit for Flash CS3. You will learn how to design a Flex button having custom states and timeline animation. A flash-flex component takes advantage of the best of both worlds: Flex state-based events and component-based API, combined with Flash timeline animation.
We will also be taking a look at a few best practices for using both Flash CS3- and Flex-compiled files in the same project workflow. And as a bonus, we'll end up with an advanced look at incorporating Flex states with the StateChangeEvent class and the undocumented MovieClip.addFrameScript method.
Introducing The Flex MonkeyButton
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
by Joseph Balderson - 09-Jul-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
In the last article, we looked at how to use Flex Builder as the ActionScript 3 editor for a Flash-compiled project. But as some of you may have discovered, there is something missing from that workflow: if you are using any Flash CS3 components, Flex Builder is unable to recognize those component classes, which negates one of the principle advantages of using Flex Builder, which is its code assist. In this article, we will take a look at how to get Flex Builder to recognize the Flash CS3 Component classes for editing ActionScript 3 files in Flash CS3 projects.
How do we get Flex Builder's code assist to recognize Flash CS3 Component classes?
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
by Joseph Balderson - 25-Jun-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
In this article, we will delve into Flash-Flex integration on a more intimate level, using both Flash and Flex in a completely integrated development workflow. Using David Stiller's Click-and-Paint tutorial as a basis for our enhanced application, we will convert a timeline-based Flash project into a class-based project, but using Flex Builder as the code editor. Essentially using the Flash IDE as the assets editor and SWF compiler, and Flex Builder as the ActionScript 3 editor (without using the Flex compiler).
In this article, you will learn how to set up a Flex project workspace to enable the editing of Flash IDE-compiled ActionScript 3 class files. In doing so, you will no doubt discover why Flex Builder is a much more powerful tool for ActionScript class editing than the Flash Actions panel. As one of my Flash colleagues is fond of saying, "Once you go Flex, you never go back." :) But this isn't about making converts to either Flash or Flex development. Whatever your specialty, this series is here to show you that with a little ingenuity, you can have your cake and eat it too.
Flash Actions panel or Flex Builder: for code editing, there is no contest.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 5: Building the DragPanel Component
by Joseph Balderson - 13-Jun-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
Flex presents developers with a suite of tools which makes coding applications for the Flash Player a real treat. However, there are times you want to create a skin in Flash, and port it into a Flex application. Not merely embedding image assets via CSS, but utilizing flexible, complex skin assets.
In the previous article, we skinned our Flex component, tested its button states and the scale-9 properties of the background skin. In this final article in the scale-9 skinning trilogy (parts 3-5), we will finish coding the full functionality of our drag-and-resize component. You will learn how to:
- Output realtime event results to a textfield in the component;
- Code a drag control which allows a Flex component to be moved on stage constrained to a defined boundary;
- Calculate the minimum dimensions of a component using a scale-9 skin;
- Apply complex boundary calculations for a component resize handler;
- Update the dimensions of a resizable component at runtime;
- Build a custom DragPanel component with a skinned scale-9 background and functional drag and resize handles.
The final skinned and functional DragPanel component with calculation diagram.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
by Joseph Balderson - 04-Jun-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
Flex presents developers with a suite of tools which makes coding applications for the Flash Player a real treat. However, there are times you want to create a skin in Flash, and port it into a Flex application. Not merely embedding image assets via CSS, but utilizing flexible, complex skin assets.
In the previous article, we designed a composite Flex component skin in Flash CS3 which stretches according to its scale-9 dimensions. In this article you will learn how to:
- configure a a multi-version working folder directory, which can be used for both Flex Builder 2 and Flex Builder 3 workspace and project folders;
- skin a custom composite Flex component using a Flash skin SWF;
- add controls to test the scale-9 functionality and button states of the skin;
- use a composite (sequenced) effect
- troubleshoot a scale-9 asset out of alignment in a live application.
In the next and final article in this introductory skinning trilogy (Parts 2-4), we will finish coding the full functionality of our drag-and-resize component.
Before and after the component skinning process.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
by Joseph Balderson - 15-May-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
Flex presents developers with a suite of tools which makes coding applications for the Flash Player a real treat. However, there are times you want to create a skin in Flash, and port it into a Flex application. Not merely embedding static images into your Flex application, but utilizing flexible, responsive skin assets.
In this first article, we will design a skin in Flash CS3 for a Flex component, which is able stretch intelligently using a concept known as scale-9. We will look at several techniques for designing assets in Flash using scale-9 effectively, avoiding certain important gotchas along the way. We will also demonstrate how one Flash skin file may be applicable to multiple Flex components. In the following article we will implement this skin for a Flex custom panel component with drag and resize handles.
The completed Flash-Flex component skin.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flex-Flash Integration, Part 2: Flex 2 Component Skinning
by Joseph Balderson - 01-May-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
This article offers a clearly understandable tutorial on skinning Flex 2.01 components with Flash CS3. Later in this series we will move on to more advanced component skinning available in Flex 3.
The completed application with custom-skinned buttons.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flash-Flex Integration - Part 1: Workflows
by Joseph Balderson - 26-Mar-08
Reader Level:
Sometimes, when you're coding a Flex application, don't you just wish you could use a Flash animation, right there? And in Flash, don't you sometimes wish you could use that one class in Flex, or that one component, which would make your life so much easier? It is at such times that a developer encounters the limitations of their tools, be it in Flex or in Flash. This series aims to explore the possibilities inherent in an integrated Flash-Flex workflow, bridging the gap between the two technologies, enabling a greater range of development options.
In this first article, we will introduce the topic by looking at where certain Flash and Flex development scenarios might need to converge into an integrated Flash-Flex workflow. We'll also look some typical strategies to meet the needs of certain Flash Platform development methodologies.
A bird's eye view of the Flash-Flex Workflow.
The Flash-Flex Integration Series:
Flash-Flex Integration - Part 1: Workflows
Flash-Flex Integration - Part 2: Flex 2 Component Skinning
Flash-Flex Integration - Part 3: Flex Component Skinning with Scale-9
Flash-Flex Integration - Part 4: Skinning the Scale-9 Flex Component
Flash-Flex Integration - Part 5: Building the DragPanel Component
Flash-Flex Integration - Part 6: Editing Flash Code in Flex Builder
Flash-Flex Integration - Part 7: Coding With Flash Components in Flex Builder
Flash-Flex Integration - Part 8: Creating Custom Flex Components with Flash CS3
Flash-Flex Integration - Part 9: Using The FLVPlayback Component in Flex
Flex Power Tools: Explorers
by Joseph Balderson - 17-Mar-08
Reader Level:
Whether you are learning Flex and looking for examples to try out, or you are an experienced developer looking for ways to shave extra time off your development cycle, you've come to the right place. In this article we will review my favourite Flex Explorers: Flex applications which allow you to explore various techniques for building Flex applications.
From component explorers which show you sample code, style explorers which help you configure the CSS to style your application, or more exotic utilities which enable you explore visual effects or data transfer benchmarks, Flex Explorers are a developers' best kept secret. Now you don't have to spend hours hunting for them all : this article reviews over 20 Flex 2 and 3 explorer utilities and resources — a must have for any serious Flex developer. In addition, we'll show you a trick to load and use your explorers right from inside Flex Builder.
The Flex Power Tools Series:
Flex Power Tools: Explorers
Flex Power Tools: Word Wrap for Flex Builder (and Eclipse)
Flex Power Tools: Using Markers in Flex Builder 3 - Part 1
Flex 101: Part 15 - Simple Controls
by Joseph Balderson - 30-Jan-08
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will depart from the event system and look at building applications by examining the use of various components in the Flex Framework. We will build an application using a grouping of components that might be called simple controls: Label, Button, CheckBox and Image. Along the way we will take a look at a few best practices for building Flex applications.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 14 - Using the Event Subclasses
by Joseph Balderson - 11-Jan-08
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will continue our examination of the Flex 2 event system by taking a look at some of the event subclasses available in Flex 2, and how they can help us build more precise event handling. We will examine at event type constants, and how they are used to declare listeners in ActionScript 3.0. The article will conclude with a look at when and when not to use an event subclass in your application.
Using event subclasses.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Designing Look and Feel with the Flex 2 Skins Template
by Steve Schelter - 13-Dec-07
Reader Level:
Flex Builder 2 has many powerful ways of customizing the appearance of its components. Each component has many style attributes that can be tweaked to drastically change the look-and-feel of your application. Sometimes, however, you may find that these attributes are insufficient in giving you the complete look you are going for. In addition to styling with attributes, you can also define skins. Skins are treated as concrete assets that represent the entire appearance of a component. They're usually the easiest and most controlled solution for maximum visual control. In this lesson, we will look into skins and skin templates for our Flex 2 components.
This lesson adds to the discussion of component styling as started from the previous article, Designing Look and Feel with the Flex 2 Style Explorer.
Flex 101: Part 13 - Declaring Events in AS3
by Joseph Balderson - 14-Nov-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will continue our examination of the Flex 2 event system by declaring events in ActionScript instead of using the MXML tag event handlers. By the end of this article you'll build an example for controlling the event subscription for a series of buttons. Bonus: an advanced example is provided which makes use of the Repeater component.
Assigning ActionScript-declared events at runtime in Flex 2.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 12 - Using the Flex 2 Debugger
by Joseph Balderson - 06-Nov-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will continue our look at the Event class by examining how to use Flex Builder 2 debugger.
Introspecting the Event class object with the Flex 2 Debugger.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 11 - The Event Class
by Joseph Balderson - 29-Oct-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will take a look at using the Event class to create more effective event-based communication between objects, as well as a brief lesson on Flex application usability.
Displaying component events through the Event class object.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Designing Look and Feel with the Flex 2 Style Explorer
by Steve Schelter - 02-Oct-07
Reader Level: 
The Flex Builder is a great IDE for rapidly developing and designing applications. It also comes with its own tools for quickly stylizing components. However, like all things, there's a good approach, and a bad approach. When stylizing through Flex Builder's design mode, you are actually applying the styles to the application's mxml tags directly. This makes it difficult to reuse and update styles effectively.
Just like with HTML, the best approach is to use CSS, and, fortunately, Adobe has been so gracious as to offer the same opportunity for styling in Flex. We don't get nearly as much visual leverage when working with CSS, however, since Flex Builder offers no special tools for generating them. This is where the Adobe consulting team comes to the rescue, with a powerful CSS generator tool called the Flex 2 Style Explorer.
Flex 101: Part 10 - Databinding Custom Components
by Joseph Balderson - 25-Sep-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will look at using databinding to exchange data between custom MXML components. We will also touch on the OOP topics of encapsulation and coupling — the good and the not so good ways of creating component relationships with databinding.
An example of databinding between ImageChooser and ImageLoader MXML components.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
by Steve Schelter - 25-Sep-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the sixth lesson of this series, we will define custom effect triggers to our component for applying animated effects.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Flex 101: Part 9 - Custom MXML Components
by Joseph Balderson - 18-Sep-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we take a look at we will look at creating our own MXML components to use in an application. We will also examine custom MXML component properties, and using databinding with custom MXML components.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 8 - AS3 in MXML
by Joseph Balderson - 11-Sep-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we take a look at combining ActionScript 3 and MXML together in the same document. We will examine how to define methods and properties in the MXML, and how to make bindable custom properties. And finally, we'll look at how to include external ActionScript code into an MXML document.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
by Steve Schelter - 10-Sep-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the fifrth lesson of this series, we will add styles to our component for customizing its look and feel.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Flex 101: Part 7 - Events
by Joseph Balderson - 07-Sep-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we examine the basics of the Flex Event model.
The completed "spaceship chaser" application.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 6 - Components and Databinding
by Joseph Balderson - 04-Sep-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. Just to name a few. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will take a look at the Flex component hierarchy, and use databinding to pass information between components.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
by Steve Schelter - 29-Aug-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the fourth lesson of this series, we will look into the steps involved in exposing properties for manipulating our component.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Flex 101: Part 5 - Using MXML
by Joseph Balderson - 28-Aug-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the Flex product line, the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will learn the basics of MXML syntax and the mx namespace, as well as a workflow optimization for distributing Flex code.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 4 - Building in Design Mode
by Joseph Balderson - 22-Aug-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the Flex product line, the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will look at building a small Flex 2 application. You will learn how easy it is to build an application using Flex Builder 2 in Design mode, requiring a minimum of code. We will also examine a few best practices and shortcuts in using Flex Builder 2 for applications development.
Approximate download size: 900k
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
by Steve Schelter - 20-Aug-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the third lesson of this series, we will use event dispatching to allow our component to talk to others.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Flex 101: Part 3 - Using Flex Builder 2
by Joseph Balderson - 17-Aug-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the Flex product line, the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will look at the Flex IDE, Flex Builder 2. You will learn all the installation details for Flex Builder 2, examining the parts of the Flex Builder 2 workbench, creating a workspace and a project, and finally you will create your first Flex 2 application.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 2 - What's New in Flash Player 9
by Joseph Balderson - 15-Aug-07
Reader Level:
Learning Flex 2 can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the Flex product line, the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will look at what's new in ActionScript 3.0 and the Flash 9 player, how Flex compiles applications, and where Flex fits in with traditional Flash Development.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Flex 101: Part 1 - Introducing Adobe Flex 2
by Joseph Balderson - 07-Aug-07
Reader Level:
Learning Flex 2 can be can seem overwhelming at first glance, considering all the elements that go into the making of a Flex application, from the Flex product line, the development IDE, the source files, the runtime and the APIs, not to mention the abundance of documentation, examples and blog entries to choose from, not all of which are intended for novices. This series aims to take some of the mystery and confusion out of learning Flex 2, providing both a beginner's overview of building applications in Flex, as well as some in-depth examination of the basics for intermediate Flex developers.
In this article, we will look at the evolution and history of Flex, what is Flex as a technology and its range of products.
The Flex 101 Series:
Flex 101: Part 1 - Introducing Adobe Flex 2
Flex 101: Part 2 - What's New In Flash Player 9
Flex 101: Part 3 - Using Flex Builder 2
Flex 101: Part 4 - Building in Design Mode
Flex 101: Part 5 - Using MXML
Flex 101: Part 6 - Components and Databinding
Flex 101: Part 7 - Events
Flex 101: Part 8 - AS3 in MXML
Flex 101: Part 9 - Custom MXML Components
Flex 101: Part 10 - Databinding Custom Components
Flex 101: Part 11 - The Event Class
Flex 101: Part 12 - Using the Flex 2 Debugger
Flex 101: Part 13 - Declaring Events in AS3
Flex 101: Part 14 - Using the Event Subclasses
Flex 101: Part 15 - Simple Controls
Flex 101: Part 16 - Layout Containers Coming Soon
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
by Steve Schelter - 01-Aug-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the second lesson of this series, we will set up the foundation for a custom component.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
by Steve Schelter - 23-Jul-07
Reader Level:
When working in the Flex 2 environment, there are many times where you might find yourself in need of a component that does not exist. The Flex SDK offers plenty of extensibility for building custom UI components that can plug seamlessly into the existing framework. In the first lesson of this series, we will cover a brief overview of the life-cycle of a custom UI component.
The Creating Custom UIComponents in Flex 2 Series:
Creating Custom UIComponents in Flex 2: Lesson 1 - Overview
Creating Custom UIComponents in Flex 2: Lesson 2 - Basic Setup
Creating Custom UIComponents in Flex 2: Lesson 3 - Dispatching Events
Creating Custom UIComponents in Flex 2: Lesson 4 - Property Exposure
Creating Custom UIComponents in Flex 2: Lesson 5 - Styles
Creating Custom UIComponents in Flex 2: Lesson 6 - Effect Triggers
Flex Community MX RSS Reader - Part 2
by Chaz Chumley - 18-Jul-07
Reader Level:
XML (eXtensible Markup Language) has been around for quite awhile and is used from anything as common as RSS feeds to sharing data with web services. Working with XML is actually not that difficult. Consuming XML within Flex is even easier with the use of the HTTPService object.
Building upon our last article, we will add some interactivity to our Flex CommunityMX RSS Reader by actually looking at how to retrieve an use an XML feed with a DataGrid, as well as explore using bindings to bind a TextArea to the columns of the DataGrid so that we can display all the results from our XML DataSet and filter on a selection to preview the contents of an article.
The Flex Community MX RSS Reader Series:
Flex Community MX RSS Reader - Part 1
Flex Community MX RSS Reader - Part 2
TodCon 2007 Session: Hurry Up and Code: Power Shortcuts for Flash and Flex Developers
by Joseph Balderson - 28-Jun-07
Reader Level:
In the high pressure world of RIA development, being efficient at churning out code, over time, can mean the difference between late nights and project overruns or peace of mind. Learning to type 50 WPM is not the only way to code faster. Learn some important secrets to being more efficient in your coding, increasing productivity in both Flash and Flex development environments.
This is presentation made at TodCon 2007 in Las Vegas, June 12, 2007.
TodCon 2007 Session: Introduction to Design Patterns for Flash and Flex
by Joseph Balderson - 26-Jun-07
Reader Level:
Whether you consider yourself to be a Flash developer or a Flex programmer, eventually you will discover that projects have become too complex, too feature-rich, to rely exclusively on the Flash timeline, or on Flex MXML markup. Taking your project that extra step may require using ActionScript class files and structured Object-Oriented Programming.
However, using OOP principles without a plan, without a way of structuring your classes, can very quickly lead to convoluted and unmanageable code. The solution is to use a tool called Design Patterns.
This session will dispel the myth that design patterns are only for geeks with PHDs, and explain how and why to use them in both Flash and Flex projects. Participants will come away with powerful tools to simplify and organize their coding projects to be better suited for efficiency and team development.
This is a presentation made at TodCon 2007 in Las Vegas, June 12, 2007.
Flex Community MX RSS Reader - Part 1
by Chaz Chumley - 25-Jun-07
Reader Level:
If you have an RSS Reader then you might already know that Community MX provides a RSS feed located here, which you can subscribe to. Also, whenever you perform a search on a particular topic with the Community MX site you have an option to view the results as a RSS feed at the bottom of your search results.
We are going to take this RSS feed and build a RSS Reader in Flex that, by default, will return the last 30 days of content. We will provide the user with a search capability to filter the results from Community MX which will display in a data grid the Title, Category and Publish Date. The data grid will give the user the ability to sort the columns headers as well as rearrange the column orders. Once the user highlights and selects an article, we will display the description of that article along with the link to where the full article can be found.
We will be doing this in a series of steps. So let's get started by creating our Flex project, which we will call "CMXRss". If you are unfamiliar with how to create a Flex project please refer to the following articles:
Flex 2.0 - Part 1: Exploring the IDE
Flex 2.0 - Part 2: Building a Simple Application
The Flex Community MX RSS Reader Series:
Flex Community MX RSS Reader - Part 1
Flex Community MX RSS Reader - Part 2
Data Binding in Flex 2 - Part 2: Binding in AS3
by Steve Schelter - 29-May-07
Reader Level:
Data binding is a central part of the Flex 2 framework, and there are many techniques for implementing it into your application. This lesson will cover the AS 3.0 side of data binding.
The Data Binding in Flex 2 Series:
Data Binding in Flex 2 - Part 1: Overview
Data Binding in Flex 2 - Part 2: Binding in AS3
Data Binding in Flex 2 - Part 1: Overview
by Steve Schelter - 15-May-07
Reader Level:
Data binding is a central part of the Flex 2 framework, and there are many techniques for implementing it into your application. This lesson will cover the basics behind what data-binding is and what makes it essential to component-driven architectures.
The Data Binding in Flex 2 Series:
Data Binding in Flex 2 - Part 1: Overview
Data Binding in Flex 2 - Part 2: Binding in AS3
Flex 2 - Part 2: Building a Simple Application
by Chaz Chumley - 29-Nov-06
Reader Level:
In our last article we took a look at the Adobe Flex Builder 2.0 IDE. In our last article we took a look at the Adobe Flex Builder 2.0 IDE. We discovered that, built upon the Eclipse platform, most Open Source, Actionscript and ColdFusion developers can now take advantage of using the same integrated development environment to develop most any application. Yet just how easy is it to develop a Flex application within the IDE? We will look at just that as we develop our very first Flex application. You may be pleasantly surprised at just how easy it is.
Flex 2.0 - Part 1: Exploring the IDE
by Chaz Chumley - 09-Nov-06
Reader Level:
If you have been doing ColdFusion development for awhile then you have probably experimented with or created ColdFusion Flash Forms. That being the case then you have been working with Flex Lite. However, as you have probably discovered, Flash Forms can be difficult to work with, even harder to debug and all around not fun. Until now. The buzz around Adobe Flex 2.0 has caused ColdFusion developers to stand up and take notice. The Interface itself is built on the Eclipse platform and makes developing Flex applications and components very easy and fun.
This article is the first in a series that will take you thru the Flex interface, developing Flex applications and components, tips and tricks, and best practices for using Adobe Flex 2.0.
Part 1 starts with a guided tour thru the Flex interface and how you setup your first Flex Application.
Macromedia Announces Flex
by Ray West - 17-Nov-03
Reader Level:
Not going to MAX? We have the lowdown on the latest announcement from Macromedia. Learn the early scoop on Macromedia Flex (previously Royale).
