Your SlideShare is downloading. ×
2007 Max Presentation - Creating Custom Flex Components
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.

Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

2007 Max Presentation - Creating Custom Flex Components


Published on

Slides from Max2007 presentation on creating custom components in Adobe Flex

Slides from Max2007 presentation on creating custom components in Adobe Flex

Published in: Technology

  • Be the first to comment

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

No notes for slide


  • 1. 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
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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?
  • 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
  • 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’?
  • 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?
  • 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?
  • 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]?
  • 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?
  • 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?
  • 23.
    • Questions, comments, clarifications?
    • Contact
      • [email_address]
    Q & A?
  • 24. 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