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.
2007 Adobe Systems Incorporated. All Rights Reserved.2
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?
2007 Adobe Systems Incorporated. All Rights Reserved.3
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?
2007 Adobe Systems Incorporated. All Rights Reserved.4
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?
2007 Adobe Systems Incorporated. All Rights Reserved.5
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?
2007 Adobe Systems Incorporated. All Rights Reserved.6
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?
2007 Adobe Systems Incorporated. All Rights Reserved.7
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?
2007 Adobe Systems Incorporated. All Rights Reserved.8
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?
2007 Adobe Systems Incorporated. All Rights Reserved.9
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?
2007 Adobe Systems Incorporated. All Rights Reserved.10
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?
2007 Adobe Systems Incorporated. All Rights Reserved.11
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?
2007 Adobe Systems Incorporated. All Rights Reserved.12
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?
2007 Adobe Systems Incorporated. All Rights Reserved.13
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?
2007 Adobe Systems Incorporated. All Rights Reserved.14
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?
2007 Adobe Systems Incorporated. All Rights Reserved.15
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?
2007 Adobe Systems Incorporated. All Rights Reserved.16
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
2007 Adobe Systems Incorporated. All Rights Reserved.17
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’?
2007 Adobe Systems Incorporated. All Rights Reserved.18
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?
2007 Adobe Systems Incorporated. All Rights Reserved.19
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?
2007 Adobe Systems Incorporated. All Rights Reserved.20
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]?
2007 Adobe Systems Incorporated. All Rights Reserved.21
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?
2007 Adobe Systems Incorporated. All Rights Reserved.22
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?
2007 Adobe Systems Incorporated. All Rights Reserved.23
Questions, comments, clarifications?
Contact [email protected]
http://blogs.digitalprimates.net/codeSlinger/
Q & A?
2007 Adobe Systems Incorporated. All Rights Reserved.24
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.