2007 Max Presentation - Creating Custom Flex Components

Michael Labriola Senior Consultant >> Adobe Certified Instructor Adobe Community Expert >> Flex Community Champion digital primates IT Consulting Group MAX 2007 CONNECT. DISCOVER. INSPIRE. Creating Custom Flex Components

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_address] http://blogs.digitalprimates.net/codeSlinger/ Q & A?

2007 Max Presentation - Creating Custom Flex Components

Recommended

More Related Content

What's hot (6)

Viewers also liked (8)

Similar to 2007 Max Presentation - Creating Custom Flex Components (20)

More from michael.labriola (10)

Recently uploaded (20)

2007 Max Presentation - Creating Custom Flex Components