This is by far the biggest topic in the course and it covers lots of subtopics as there are a lot of ways of creating and extending components. On the other side there are different types of components – visual or non-visual, but also components for data and components, let’s roughly call it a behavior.

Visual Components – Composition

The easiest way for creating custom components is to compose already existing components into a composite view. And there are various way to do that, but before we jump to these, I’ll show you what’s my understanding on the concept of code behind.

DOWNLOAD CODE BEHIND SAMPLE

When doing composite components always keep in mind that there are different ways to layout and position the components:

• absolute positioning
• relative positioning
• and even enhanced constraints

DOWNLOAD ABSOLUTE VS. RELATIVE LAYOUT SAMPLE
DOWNLOAD ENHANCED CONSTRAINTS SAMPLE

The enhanced constraints sample is prepared by Fabian Vercuiel as part of his talk on Flex Layouts given at the regular Flex-Bulgaria User-group meetings.

Visual Components – Containers

There are different types of containers you can use in Flex 3:

• layout containers
• list containers
• repeater (which is not a container)

DOWNLOAD LAYOUT CONTAINERS SAMPLE
DOWNLOAD LIST COMPONENTS SAMPLE (REPEATER SAMPLE ALSO INCLUDED)

Visual Component – Extending UIComponent

In order to extend UIComponent we need to know a few things:

• the UI component life-cycle
• the invalidation mechanism
• the LayoutManager phased mechanism

DOWNLOAD UICOMPONENT SAMPLE

States & Transitions

We’ll make a parallel between the Go4 State-pattern and States in Flex, but we’ll also take a look at the states architecture in Flex. Then we’ll get acquainted with the Transition’s mechanism in Flex. As we look at the sample we’ll run into an issue when we’re interrupting a transition. I’ll propose a possible solution in the same sample.

DOWNLOAD STATES AND TRANSITIONS SAMPLE
DOWNLOAD INTERRUPTIBLE TRANSITION SAMPLE

Flex 4 Gumbo Transitions are introducing the autoReverse-property.

Non-Visual Components – Effects

The intent is to get to know the Effects architecture, the various types of effects (composite effects, tweening effect and action effects), but also to take a look at what other possibilities we can get if we decide to extend some Flex effects.

Non-Visual Components – Validators & Formatters

I’ll start with describing the Flex Validator component and the plan is to end with some suggestion how to adjust the user interaction logic of the validator in order to fulfill some specific UX needs.
Formatters are just briefly mentioned.

Deferred Instantiation and How To Make Template Components

We can take advantage by configuring a component with MXML and controlling the instantiation of this pre-configured with deferred instantiation. I’ll propose a flex pattern for using deferred instances for factory-classes.

DOWNLOAD DEFERRED INSTANTIATION SAMPLE

Data Descriptors

In the end of this topic we’ll make an overview of Flex Data Descriptors.

What’s left out of this topic?

I haven’t talked anything about Skinning and Styling Flex components – skinning and styling is yet another way to extend and customize components. But here I’ll provide you with a road-map on how to use the skinning and styling abilities build-in Flex

1. Setup of build-in style-properties (a.k.a. Styling)

The most easiest way for simple skin application is to modify the style-properties of the Flex-components. You just need to play around with the Flex Styles Explorer (v3) and copy the styles into your CSS-files.

2. Completely changing the appearance of a component (a.k.a. Skinning)

Skinning involves 2 different processes – preparation of new visual assets and the application of these assets as skins (achieved again through styling). To learn how to combine these two processes read about Designing Flex 3 skins and styles using Creative Suite 3 and Flex Builder 3.
A theme is a collection of related styles – usually a theme changes the looks of a large set of Flex controls. If you need an inspiration browse the ScaleNine collection of Flex themes.

3. Programmatic Skinning (using the drawing API to prepare visual assets and effects run-time)

In some peculiar cases (like this one Flex 3 Designer ScrollBar – Fixed Size ScrollThumb) simply preparing visual assets won’t be enough. Some coding is needed to achieve the desired appearance and behavior. Again programmatic skins are applied through styling, but instead of Embed-directives you should use ClassReference-directives.

Keep in mind that in the new version of Flex, the current process of skinning and styling would be quite obsolete or at least different!

Flex 4 Sneakpeak

If you’re interested in what’s Flex 4 going to be, don’t forget to check out this video: