2007 Max Presentation - Creating Custom Flex Components

2007 Adobe Systems Incorporated. All Rights Reserved.1

Michael LabriolaSenior Consultant >> Adobe Certified Instructor

Adobe Community Expert >> Flex Community Champion

digital primates IT Consulting Group

Creating Custom Flex Components

MAX 2007CONNECT. DISCOVER. INSPIRE.


How to create a custom component

How to do it in a style that fits with the Flex Framework

How to make it work well with Flex Builder

What are we going to cover?


Examine the Carousel component

Talk about the decisions that influenced its design

Discuss the way it was built

How are we going to do that?


We are going to review a lot of code

We are going to move quickly

We will provide time for Q&A at the end, but we can also be interactive

Ask questions when they occur and I will try to answer inline

What can we expect?


You build components when you need something reusable that encapsulates behavior

There are generally two reasons components are built To tweak existing components

Tweaking behavior

Changing default values

Usually involves a higher level base class, Button, Vbox, etc.

To create something very different than the standard components

Usually involves a lower level class such as Container or UIComponent

May involve going all the way to Sprite or ‘lowest’ level UI classes

Why build custom components?


You have two main choices in Flex MXML with ActionScript

Quick and easy to make basic component extensions

Can be used for more advanced work, but at some point loses the benefits

ActionScript Only

Provides additional control, especially over startup conditions

Everything learned about ActionScript components is applicable to MXML

We are going to discuss ActionScript components

How do you build custom components?


You need to make a decision on a base class

Unless you are making something very different, you will probably start with an existing component class or the base class for Container or UIComponent

Carousel starts with a Container as its primary function is to contain other children

The extremes

Why didn’t we use a Canvas?

Why didn’t we just use UIComponent?

How do we get started?


You need to understand the component lifecycle

A lot of interaction with the Flex framework and the other components on the screen is going to happen

To be a good component developer, you need to be on top of it all

What are the next things to consider?


A series of methods called by the Flex Framework that every component experiences

These methods include The component’s constructor

commitProperties method

createChildren method

measure method

updateDisplayList method

What is the component lifecycle?


Setup initial properties

Do things that need to be done regardless if the component is ever shown on the screen

Do NOT do things like creating child components or attempting to position items… your component does not have enough information yet!

The constructor is called whenever the component is created. The other methods we will discuss do not occur until a component is added to a container

var blah:Button = new Button(); invokes the constructor

container.addChild( blah ); adds child to a container

Alright, what do we do in the constructor?


The one should be more obvious, it creates any visual children of the component

I said creates… it does NOT size or position them… ever!

Why? At this point your component does not know how much screen space it has…

Why try tell your children how big they can be when you don’t have this information yet?

Why try to position them if you don’t know how big they are?

And createChildren?


measure brings us to my favorite part: the layout manager

The layout manager is responsible for, among other things, ensuring that the process of sizing your component is started

The layout manager always starts on the outer most component.

To know how much space a component needs, you need to know how much space its children need

Ok, what about measure?


To determine how much screen space they require, components call their measure() method

measure is responsible for setting four properties of the component measuredMinWidth

measuredMinHeight

measuredWidth

measuredHeight

The values form the basis of a ‘suggestion’ provided by the component to its parent about how big it would like to be

When measure gets called, what does it do?


Yep, that’s where the updateDisplayList() comes in

If all of the components collectively request 2000 pixels wide, but you only have 1000 on the screen… well something has to make this work

When the updateDisplayList is called on a given component, it is passed an unscaledWidth and an unscaledHeight..

Basically, it is told ‘Regardless of what you requested, here is what you get’

While the Flex containers never choose to size one of their children smaller than the minimum requested size, you can do whatever you would like

You are always free to ignore a component’s suggestion and make it any size you would like

When a Flex container realizes it can not fit all of the components in the allotted space, it chooses to add scrollbars

A suggestion?


updateDisplayList is also responsible for positioning its children

The method in which the Flex containers and components position their children is implicit in their type

VBox - Vertical

HBox – Horizontal

DateField – Horizontal

The method in which Carousel arranges its children is based on the equation of an circle

What else does updateDisplayList do?


commitProperties is responsible for coordinating property modifications

Why coordinate properties? There are times when we need to wait to act until more than one property is set or is

ready

There are also times when we don’t want to do something complex every single time a change occurs (such as calculations).

commitProperties allows us to defer some of these things until the screen needs to be redrawn

How? commitProperties, just like updateDisplayList, is ‘scheduled’ and called by the Flex

framework when needed.

That leaves commitProperties


So, if these methods are only called when needed, how do we tell the framework they are needed?

Invalidate methods invalidateDisplayList()

invalidateProperties()

invalidateSize()

These methods tell the framework to ensure the method is called at the next appropriate time.

You may notice that there is no invalidateChildren… we only create children once, we don’t recreate them (ideally) for every property change

What do you mean ‘when needed’?


Our createChildren calls the super.createChildren() as the default way the Container creates its children works for us

We do add a few additional pieces to cover other aspects of the component that are unique

The super.createChildren is often called last in a component… any thoughts as to why?

Our commitProperties method is basic It is responsible for managing the changes to selectedChild, selectedIndex and

currentPosition, which is an extremely important property in this component

So how are these used in the Carousel?


Our measure method is unique. We need to consider how much space our container requires based on children being positioned around an circle in simulated 3D space.

We do a lot of math, but eventually still set the same four properties

Our updateDisplayList method does all of the real work for this visual component. It considers:

Spacing between items

Scaling

Ensuring items follow the circle as they move

So how are these used in the Carousel?


Metadata tags provide information to the compiler and to Flex Builder

Most people are familiar with the basic workings of the [Bindable] metadata, but there are others that are important to developing components

Other useful metadata tags Style – Specifies style sheet properties that can be assigned in MXML. Provides

information to Flex Builder used in Design View.

Inspectable – Defines attributes that can be used by developers. It also limits values for properties. Flex Builder uses this information to provide possible values in code and design view.

IconFile – Defines an icon for your component that appears in Flex Builder.

And all the lines that look like [Bindable]?


Flex Builder 3 offers some new advantages for the component developer

You can now specify The way the component is categorized

The standard view properties

Default code

So that’s how we work with Flex Builder?


You have all of the information now, it is just putting it in the right order

Here is an overview The user changes the selectedIndex or selectedChild

We update some internal values and ask for a commitProperties call

When we are called in commitProperties, we determine the difference between where the newly selectedItem is and where it needs to be

We start animating our way through the values from our currentPosition to our selectedIndex

As the currentPosition, we set an internal value and ask for a commitProperties call

When we are called in commitProperties, we ask flex to redraw its children

The updateDisplayList uses the currentPosition property to determine where each component should be moved and how it should be scaled

So what makes Carousel work?


Questions, comments, clarifications?

Contact [email protected]

http://blogs.digitalprimates.net/codeSlinger/

Q & A?


Michael LabriolaSenior Consultant >> Adobe Certified Instructor

Adobe Community Expert >> Flex Community Champion

digital primates IT Consulting Group

Creating Custom Flex Components

MAX 2007CONNECT. DISCOVER. INSPIRE.

2007 Max Presentation - Creating Custom Flex Components

Technology

Transcript of 2007 Max Presentation - Creating Custom Flex Components