advertisement

2007 Max Presentation - Creating Custom Flex Components

44 %
56 %
advertisement
Information about 2007 Max Presentation - Creating Custom Flex Components

Published on June 16, 2008

Author: michael.labriola

Source: slideshare.net

Description

Slides from Max2007 presentation on creating custom components in Adobe Flex
advertisement

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?

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

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?

Examine the Carousel component

Talk about the decisions that influenced its design

Discuss the way it was built

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?

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

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 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

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 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

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 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?

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?

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

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?

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

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?

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

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?

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?

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?

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

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?

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

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?

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

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?

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

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

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.

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’?

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

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 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

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?

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

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]?

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.

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?

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

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?

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

Questions, comments, clarifications? Contact [email_address] http://blogs.digitalprimates.net/codeSlinger/ Q & A?

Questions, comments, clarifications?

Contact

[email_address]

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

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

Add a comment

Related pages

Flex Tutorials | Lynda.com

Learn how to use Flex, ... Flex 4.5 and PHP: Creating Data-Driven Applications ... Sign up and receive emails about lynda.com and our online training library:
Read more

Create a Flex component - IBM

This combination of features makes Flex a compelling choice for creating ... Flex component. Reasons to create custom ... max bounds for a component.
Read more

Creating a Visual Experience : 360|Flex : 2007

Creating Flex 2 Skins. ... Presentation on Skinning and Styling. ... Create custom easing functions. Flex.org Showcase.
Read more

EasyCFM.COM - View Tutorial

This is where we will store all the custom flex components that we will ... Creating our first custom component ... Remember flex is the presentation ...
Read more

Simple Flex Tutorial - Pete Freitag

Simple Flex Tutorial. ... I've been learning Flex for a presentation at my local CFUG, ... hi how can i create an array of custom components dynamically?
Read more

Building a Custom Add-in for Outlook 2007 Using Windows ...

... 3.0 and Microsoft Windows Presentation ... Creating Custom Task Panes in the 2007 ... Office is a critical component of the 2007 ...
Read more

Creating Custom SmartArt Layouts with Office Open XML for ...

Creating Custom SmartArt Layouts with Office Open ... Office 2007 | Office 2010 ... and walk through the core basics of creating a custom ...
Read more

Adobe MAX—The Creativity Conference. Get Early Bird Prices.

Adobe MAX — The Creativity ... Maira is currently creating an illustrated column for The New Yorker based on travels to museums and libraries.
Read more