2007 Max Presentation - Creating Custom Flex Components


Published on

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

No notes for slide

2007 Max Presentation - Creating Custom Flex Components

  1. 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. 2. <ul><li>How to create a custom component </li></ul><ul><li>How to do it in a style that fits with the Flex Framework </li></ul><ul><li>How to make it work well with Flex Builder </li></ul>What are we going to cover?
  3. 3. <ul><li>Examine the Carousel component </li></ul><ul><li>Talk about the decisions that influenced its design </li></ul><ul><li>Discuss the way it was built </li></ul>How are we going to do that?
  4. 4. <ul><li>We are going to review a lot of code </li></ul><ul><li>We are going to move quickly </li></ul><ul><li>We will provide time for Q&A at the end, but we can also be interactive </li></ul><ul><li>Ask questions when they occur and I will try to answer inline </li></ul>What can we expect?
  5. 5. <ul><li>You build components when you need something reusable that encapsulates behavior </li></ul><ul><li>There are generally two reasons components are built </li></ul><ul><ul><li>To tweak existing components </li></ul></ul><ul><ul><ul><li>Tweaking behavior </li></ul></ul></ul><ul><ul><ul><li>Changing default values </li></ul></ul></ul><ul><ul><ul><li>Usually involves a higher level base class, Button, Vbox, etc. </li></ul></ul></ul><ul><ul><li>To create something very different than the standard components </li></ul></ul><ul><ul><ul><li>Usually involves a lower level class such as Container or UIComponent </li></ul></ul></ul><ul><ul><ul><li>May involve going all the way to Sprite or ‘lowest’ level UI classes </li></ul></ul></ul>Why build custom components?
  6. 6. <ul><li>You have two main choices in Flex </li></ul><ul><ul><li>MXML with ActionScript </li></ul></ul><ul><ul><ul><li>Quick and easy to make basic component extensions </li></ul></ul></ul><ul><ul><ul><li>Can be used for more advanced work, but at some point loses the benefits </li></ul></ul></ul><ul><ul><li>ActionScript Only </li></ul></ul><ul><ul><ul><li>Provides additional control, especially over startup conditions </li></ul></ul></ul><ul><ul><ul><li>Everything learned about ActionScript components is applicable to MXML </li></ul></ul></ul><ul><li>We are going to discuss ActionScript components </li></ul>How do you build custom components?
  7. 7. <ul><li>You need to make a decision on a base class </li></ul><ul><li>Unless you are making something very different, you will probably start with an existing component class or the base class for Container or UIComponent </li></ul><ul><li>Carousel starts with a Container as its primary function is to contain other children </li></ul><ul><ul><li>The extremes </li></ul></ul><ul><ul><ul><li>Why didn’t we use a Canvas? </li></ul></ul></ul><ul><ul><ul><li>Why didn’t we just use UIComponent? </li></ul></ul></ul>How do we get started?
  8. 8. <ul><li>You need to understand the component lifecycle </li></ul><ul><li>A lot of interaction with the Flex framework and the other components on the screen is going to happen </li></ul><ul><li>To be a good component developer, you need to be on top of it all </li></ul>What are the next things to consider?
  9. 9. <ul><li>A series of methods called by the Flex Framework that every component experiences </li></ul><ul><li>These methods include </li></ul><ul><ul><li>The component’s constructor </li></ul></ul><ul><ul><li>commitProperties method </li></ul></ul><ul><ul><li>createChildren method </li></ul></ul><ul><ul><li>measure method </li></ul></ul><ul><ul><li>updateDisplayList method </li></ul></ul>What is the component lifecycle?
  10. 10. <ul><li>Setup initial properties </li></ul><ul><li>Do things that need to be done regardless if the component is ever shown on the screen </li></ul><ul><li>Do NOT do things like creating child components or attempting to position items… your component does not have enough information yet! </li></ul><ul><li>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 </li></ul><ul><ul><li>var blah:Button = new Button(); invokes the constructor </li></ul></ul><ul><ul><li>container.addChild( blah ); adds child to a container </li></ul></ul>Alright, what do we do in the constructor?
  11. 11. <ul><li>The one should be more obvious, it creates any visual children of the component </li></ul><ul><li>I said creates… it does NOT size or position them… ever! </li></ul><ul><li>Why? </li></ul><ul><ul><li>At this point your component does not know how much screen space it has… </li></ul></ul><ul><ul><ul><li>Why try tell your children how big they can be when you don’t have this information yet? </li></ul></ul></ul><ul><ul><ul><li>Why try to position them if you don’t know how big they are? </li></ul></ul></ul>And createChildren?
  12. 12. <ul><li>measure brings us to my favorite part: the layout manager </li></ul><ul><ul><li>The layout manager is responsible for, among other things, ensuring that the process of sizing your component is started </li></ul></ul><ul><li>The layout manager always starts on the outer most component. </li></ul><ul><ul><li>To know how much space a component needs, you need to know how much space its children need </li></ul></ul>Ok, what about measure?
  13. 13. <ul><li>To determine how much screen space they require, components call their measure( ) method </li></ul><ul><li>measure is responsible for setting four properties of the component </li></ul><ul><ul><li>measuredMinWidth </li></ul></ul><ul><ul><li>measuredMinHeight </li></ul></ul><ul><ul><li>measuredWidth </li></ul></ul><ul><ul><li>measuredHeight </li></ul></ul><ul><li>The values form the basis of a ‘suggestion’ provided by the component to its parent about how big it would like to be </li></ul>When measure gets called, what does it do?
  14. 14. <ul><li>Yep, that’s where the updateDisplayList() comes in </li></ul><ul><li>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 </li></ul><ul><ul><li>When the updateDisplayList is called on a given component, it is passed an unscaledWidth and an unscaledHeight .. </li></ul></ul><ul><ul><li>Basically, it is told ‘Regardless of what you requested, here is what you get’ </li></ul></ul><ul><li>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 </li></ul><ul><ul><li>You are always free to ignore a component’s suggestion and make it any size you would like </li></ul></ul><ul><ul><li>When a Flex container realizes it can not fit all of the components in the allotted space, it chooses to add scrollbars </li></ul></ul>A suggestion?
  15. 15. <ul><li>updateDisplayList is also responsible for positioning its children </li></ul><ul><li>The method in which the Flex containers and components position their children is implicit in their type </li></ul><ul><ul><li>VBox - Vertical </li></ul></ul><ul><ul><li>HBox – Horizontal </li></ul></ul><ul><ul><li>DateField – Horizontal </li></ul></ul><ul><li>The method in which Carousel arranges its children is based on the equation of an circle </li></ul>What else does updateDisplayList do?
  16. 16. <ul><li>commitProperties is responsible for coordinating property modifications </li></ul><ul><li>Why coordinate properties? </li></ul><ul><ul><li>There are times when we need to wait to act until more than one property is set or is ready </li></ul></ul><ul><ul><li>There are also times when we don’t want to do something complex every single time a change occurs (such as calculations). </li></ul></ul><ul><ul><li>commitProperties allows us to defer some of these things until the screen needs to be redrawn </li></ul></ul><ul><li>How? </li></ul><ul><ul><li>commitProperties , just like updateDisplayList , is ‘scheduled’ and called by the Flex framework when needed. </li></ul></ul>That leaves commitProperties
  17. 17. <ul><li>So, if these methods are only called when needed, how do we tell the framework they are needed? </li></ul><ul><li>Invalidate methods </li></ul><ul><ul><li>invalidateDisplayList() </li></ul></ul><ul><ul><li>invalidateProperties() </li></ul></ul><ul><ul><li>invalidateSize() </li></ul></ul><ul><li>These methods tell the framework to ensure the method is called at the next appropriate time. </li></ul><ul><ul><li>You may notice that there is no invalidateChildren… we only create children once, we don’t recreate them (ideally) for every property change </li></ul></ul>What do you mean ‘when needed’?
  18. 18. <ul><li>Our createChildren calls the super.createChildren() as the default way the Container creates its children works for us </li></ul><ul><ul><li>We do add a few additional pieces to cover other aspects of the component that are unique </li></ul></ul><ul><ul><li>The super.createChildren is often called last in a component… any thoughts as to why? </li></ul></ul><ul><li>Our commitProperties method is basic </li></ul><ul><ul><li>It is responsible for managing the changes to selectedChild, selectedIndex and currentPosition, which is an extremely important property in this component </li></ul></ul>So how are these used in the Carousel?
  19. 19. <ul><li>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. </li></ul><ul><ul><li>We do a lot of math, but eventually still set the same four properties </li></ul></ul><ul><li>Our updateDisplayList method does all of the real work for this visual component. It considers: </li></ul><ul><ul><li>Spacing between items </li></ul></ul><ul><ul><li>Scaling </li></ul></ul><ul><ul><li>Ensuring items follow the circle as they move </li></ul></ul>So how are these used in the Carousel?
  20. 20. <ul><li>Metadata tags provide information to the compiler and to Flex Builder </li></ul><ul><li>Most people are familiar with the basic workings of the [Bindable] metadata, but there are others that are important to developing components </li></ul><ul><li>Other useful metadata tags </li></ul><ul><ul><li>Style – Specifies style sheet properties that can be assigned in MXML. Provides information to Flex Builder used in Design View. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><ul><li>IconFile – Defines an icon for your component that appears in Flex Builder. </li></ul></ul>And all the lines that look like [Bindable]?
  21. 21. <ul><li>Flex Builder 3 offers some new advantages for the component developer </li></ul><ul><li>You can now specify </li></ul><ul><ul><li>The way the component is categorized </li></ul></ul><ul><ul><li>The standard view properties </li></ul></ul><ul><ul><li>Default code </li></ul></ul>So that’s how we work with Flex Builder?
  22. 22. <ul><li>You have all of the information now, it is just putting it in the right order </li></ul><ul><li>Here is an overview </li></ul><ul><ul><li>The user changes the selectedIndex or selectedChild </li></ul></ul><ul><ul><li>We update some internal values and ask for a commitProperties call </li></ul></ul><ul><ul><li>When we are called in commitProperties , we determine the difference between where the newly selectedItem is and where it needs to be </li></ul></ul><ul><ul><li>We start animating our way through the values from our currentPosition to our selectedIndex </li></ul></ul><ul><ul><li>As the currentPosition, we set an internal value and ask for a commitProperties call </li></ul></ul><ul><ul><li>When we are called in commitProperties , we ask flex to redraw its children </li></ul></ul><ul><ul><li>The updateDisplayList uses the currentPosition property to determine where each component should be moved and how it should be scaled </li></ul></ul>So what makes Carousel work?
  23. 23. <ul><li>Questions, comments, clarifications? </li></ul><ul><li>Contact </li></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>http://blogs.digitalprimates.net/codeSlinger/ </li></ul></ul>Q & A?
  24. 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