How To Navigate And Extend The Flex Infrastructure

20 %
80 %
Information about How To Navigate And Extend The Flex Infrastructure

Published on July 11, 2008

Author: michael.labriola

Source: slideshare.net

How to Navigate and Extend the Flex Infrastructure Michael Labriola Senior Consultant digital primates IT Consulting Group Adobe Certified Instructor – Flex Adobe Certified Expert – Flex Adobe Community Expert – Flex

Who am I? Senior Consultant @ digital primates IT Consulting Group means: I spend the majority of my day crawling through the flex infrastructure so I can teach it to others I mentor large development teams that need to learn Flex fast when management declares it as a new direction I am responsible for writing code that will someday be cloned thousands of times with little regard to the initial context

Senior Consultant @ digital primates IT

Consulting Group means:

I spend the majority of my day crawling through the flex infrastructure so I can teach it to others

I mentor large development teams that need to learn Flex fast when management declares it as a new direction

I am responsible for writing code that will someday be cloned thousands of times with little regard to the initial context

Who am I? Reverse Engineer Deciphering how someone else’s micro-controller was programmed with an oscilloscope and a lot of Mountain Dew ® Reading and rewriting 68k opcodes in hex Learning through pure induction, all day, every day

Reverse Engineer

Deciphering how someone else’s micro-controller was programmed with an oscilloscope and a lot of Mountain Dew ®

Reading and rewriting 68k opcodes in hex

Learning through pure induction, all day, every day

What is Flex? Flex is a product developed by Adobe which allows developers to create rich Internet applications that run in the flash player. Flex solves some of the frustration traditional application developers encounter when trying to create applications in Flash Flex is generally written using two languages MXML – An XML tag based language used to define the visual layout ActionScript 3 – A newer generation of the actionscript language familiar to those with a flash background

Flex is a product developed by Adobe which allows developers to create rich Internet applications that run in the flash player.

Flex solves some of the frustration traditional application developers encounter when trying to create applications in Flash

Flex is generally written using two languages

MXML – An XML tag based language used to define the visual layout

ActionScript 3 – A newer generation of the actionscript language familiar to those with a flash background

What are we going to talk about? If you give a man a fish, he will have a single meal. If you teach him to fish, he will eat all his life. Sure, this saying is overused but the concept is important I am not planning on teaching how to program a Flex component… I want to teach you how to figure it out on your own

If you give a man a fish, he will have a single meal. If you teach him to fish, he will eat all his life.

Sure, this saying is overused but the concept is important

I am not planning on teaching how to program a Flex component… I want to teach you how to figure it out on your own

What are we going to talk about? Knowing how to solve a problem is more important than having the solution I think this applies to Flex… Warning: Does not apply in every situation. Great example: lack of a parachute

Knowing how to solve a problem is more important than having the solution

I think this applies to Flex…

Warning: Does not apply in every situation. Great example: lack of a parachute

What are we going to talk about? The solutions already exist, you don’t know where to find them There is more information available in terms of code samples, design patterns and general Flex know-how in the framework *already* installed with Flex than any book, blog or doc in the world. Why aren’t you using them?

The solutions already exist, you don’t know where to find them

There is more information available in terms of code samples, design patterns and general Flex know-how in the framework *already* installed with Flex than any book, blog or doc in the world.

Why aren’t you using them?

What can we expect? We aren’t going to write code. We are going to read code We will review, read and talk about code in the framework and code that I wrote for this session… You don’t need to see me type it to make it valid I am not going to provide a bunch of rules, I am going to show you where you should look to induce these generalities

We aren’t going to write code. We are going to read code

We will review, read and talk about code in the framework and code that I wrote for this session…

You don’t need to see me type it to make it valid

I am not going to provide a bunch of rules, I am going to show you where you should look to induce these generalities

What can we expect? Questions Please ask when we are covering the topic. In this session, depth is more important than breadth. I would rather drop slides off the end and ensure you understand what I do present

Questions

Please ask when we are covering the topic.

In this session, depth is more important than breadth. I would rather drop slides off the end and ensure you understand what I do present

Sounds fine, how do we get started? Source Code For those of you that don’t know, MXML tags, such as DataGrid and Button, are really just ActionScript classes If you want to understand how to make a component that has nodes like the Tree control but moves panes like the Accordion, what better place to look but the source code for these components

Source Code

For those of you that don’t know, MXML tags, such as DataGrid and Button, are really just ActionScript classes

If you want to understand how to make a component that has nodes like the Tree control but moves panes like the Accordion, what better place to look but the source code for these components

Where do we find the source? The Flex Framework Flex ships with (almost) all of the source code available for your review You can find this code under the Flex Builder 3 installation folder at sdks3.0.0frameworksprojectsframeworksrc

The Flex Framework

Flex ships with (almost) all of the source code available for your review

You can find this code under the Flex Builder 3 installation folder at

sdks3.0.0frameworksprojectsframeworksrc

How do we get to the source? Linked Folder If you feel like being a bit clever (lazy) you can setup a linked folder in your project to the source directory. Doing so will give you quick access to the source You can also press Control-Shift-T at any time to find a class

Linked Folder

If you feel like being a bit clever (lazy) you can setup a linked folder in your project to the source directory. Doing so will give you quick access to the source

You can also press

Control-Shift-T at any time to find a class

How do we get to the source? Organization of Packages Flex packages follow a consistent setup The majority of components extended by developers reside in controls and containers

Organization of Packages

Flex packages follow a consistent setup

The majority of components extended by developers reside in controls and containers

How do we know where the code resides? The Help Files The Flex help files contain the package information

The Help Files

The Flex help files contain the package information

How do we read the code? Conventions Within the framework, coding conventions such as consistent method and variable names are routinely followed Comments and compiler metadata are used to add dialogue to the code

Conventions

Within the framework, coding conventions such as consistent method and variable names are routinely followed

Comments and compiler metadata are used to add dialogue to the code

What are the conventions? Naming Conventions MyClassName – Classes are always mixed case starting with a capital letter myMethodName() or myVariableName – Always start lower case STATIC_OR_CONST – Always upper case, underscore separated

Naming Conventions

MyClassName – Classes are always mixed case starting with a capital letter

myMethodName() or myVariableName – Always start lower case

STATIC_OR_CONST – Always upper case, underscore separated

What else do we need to read the code? Access Control internal - (default) Visible to references inside the same package private – visible to references inside the same class protected – visible to references in the same class and derived classes public – visible to references everywhere static – specifies that a properties belongs to a class, not an instance

Access Control

internal - (default) Visible to references inside the same package

private – visible to references inside the same class

protected – visible to references in the same class and derived classes

public – visible to references everywhere

static – specifies that a properties belongs to a class, not an instance

What else do we need to read the code? Namespaces Namespaces provide further granularity to the visibility of methods and properties use namespace mx_internal; mx_internal function columnItemRendererFactory()

Namespaces

Namespaces provide further granularity to the visibility of methods and properties

use namespace mx_internal;

mx_internal function columnItemRendererFactory()

Got it. What Else? MetaData Tags Reading the metadata tags can often provide as much information as the remainder of the documentation

MetaData Tags

Reading the metadata tags can often provide as much information as the remainder of the documentation

What If we don’t see what we need? Following Inheritance Control+Click or F3 causes Flex Builder to find where a given property was defined This is particularly helpful when the property or method was defined in a different class

Following Inheritance

Control+Click or F3 causes Flex Builder to find where a given property was defined

This is particularly helpful when the property or method was defined in a different class

Is this inheritance documented? Just as the help files show the package name, they also show the inheritance chain and where a property was originally declared

Just as the help files show the package name, they also show the inheritance chain and where a property was originally declared

How far does it go? While the majority of the source code is available for your review, event dispatching and some other low level items are not present as source code

While the majority of the source code is available for your review, event dispatching and some other low level items are not present as source code

That’s it? Viewing code without a concept of order is useless Flex Components startup and execute in a very specific order, often called the component instantiation lifecycle This lifecycle consists of a series of methods that are called by the Flex framework, not directly by the developer

Viewing code without a concept of order is useless

Flex Components startup and execute in a very specific order, often called the component instantiation lifecycle

This lifecycle consists of a series of methods that are called by the Flex framework, not directly by the developer

What are these methods? The lifecycle methods consist mainly of: commitProperties() createChildren() measure() updateDisplayList ()

The lifecycle methods consist mainly of:

commitProperties()

createChildren()

measure()

updateDisplayList ()

What does commitProperties do? commitProperties commits changes to a component. It is useful for: Ensuring changes happen at the same time Ensuring that properties are set in a specific order Ensuring properties are not set on child objects until the exist Reducing code duplication that can occur when dependencies between properties exist

commitProperties commits changes to a component. It is useful for:

Ensuring changes happen at the same time

Ensuring that properties are set in a specific order

Ensuring properties are not set on child objects until the exist

Reducing code duplication that can occur when dependencies between properties exist

What does createChildren do? createChildren is used to make composite components. It is responsible for: instantiating any visual child objects within the component createChildren only ensures these children are created, it does NOT deal with layout or sizing

createChildren is used to make composite components. It is responsible for:

instantiating any visual child objects within the component

createChildren only ensures these children are created, it does NOT deal with layout or sizing

What does measure do? measure helps determine the size of a component Calculates the default size/default minimum size of a component. Parent objects have the ultimate say on sizing a component. Measure provides a ‘suggestion’ to the parent of this component This method is only called if Flex needs to derive the size. It is not called if a explicit height and width are set

measure helps determine the size of a component

Calculates the default size/default minimum size of a component. Parent objects have the ultimate say on sizing a component. Measure provides a ‘suggestion’ to the parent of this component

This method is only called if Flex needs to derive the size. It is not called if a explicit height and width are set

What does updateDisplayList do? updateDisplayList is the workhorse of the Flex component Sizes and positions any items created in createChildren Also responsible for drawing items like backgrounds or other graphical elements When Flex calls updateDisplayList, it provides the width and height actually allocated for your component regardless of scaling

updateDisplayList is the workhorse of the Flex component

Sizes and positions any items created in createChildren

Also responsible for drawing items like backgrounds or other graphical elements

When Flex calls updateDisplayList, it provides the width and height actually allocated for your component regardless of scaling

Does that cover what I need to know? The order that these methods are called is still extremely important When a component is created either in MXML or ActionScript, the components constructor is always called <comp:MyComponent/> OR var comp:MyComponent = new MyComponent();

The order that these methods are called is still extremely important

When a component is created either in MXML or ActionScript, the components constructor is always called

<comp:MyComponent/>

OR

var comp:MyComponent = new MyComponent();

What about the rest of the methods? The lifecycle methods begin when a component is added to a container When using MXML to add a component, it is generally added to its parent container automatically When using ActionScript, the developer manually calls the addChild method var comp:MyComponent = new MyComponent(); addChild( comp );

The lifecycle methods begin when a component is added to a container

When using MXML to add a component, it is generally added to its parent container automatically

When using ActionScript, the developer manually calls the addChild method

var comp:MyComponent = new MyComponent();

addChild( comp );

What about the rest of the methods? The lifecycle methods will then generally execute in this order commitProperties() createChildren() measure() updateDisplayList()

The lifecycle methods will then generally execute in this order

commitProperties()

createChildren()

measure()

updateDisplayList()

So these methods are only called once? createChildren() will only be called once, however, the developer can request that the other methods are called at specific times Calling invalidateProperties() asks Flex to call commitProperties() Calling invalidateSize() asks Flex to call measure() Calling invalidateDisplayList() asks Flex to call updateDisplayList()

createChildren() will only be called once, however, the developer can request that the other methods are called at specific times

Calling invalidateProperties() asks Flex to call commitProperties()

Calling invalidateSize() asks Flex to call measure()

Calling invalidateDisplayList() asks Flex to call updateDisplayList()

Why shouldn’t I just call the actual methods? Calling the invalidate* methods asks Flex to call the lifecycle methods at the appropriate time By using the invalidate* methods you allow Flex to effectively ‘schedule’ when these methods will be called Doing so can increase the responsiveness of your application by decreasing the number of times a these methods are actually invoked

Calling the invalidate* methods asks Flex to call the lifecycle methods at the appropriate time

By using the invalidate* methods you allow Flex to effectively ‘schedule’ when these methods will be called

Doing so can increase the responsiveness of your application by decreasing the number of times a these methods are actually invoked

Ok. That’s it, right? Yes, for now. Let’s take a tour of the framework and try to solve a real world problem using your newfound knowledge

Yes, for now.

Let’s take a tour of the framework and try to solve a real world problem using your newfound knowledge

Review Time The Flex framework has a tremendous amount of code available for review It is, in my opinion, the single best way to learn Flex Understanding where to look for these solutions means you have a virtually infinite resource of solid code and design patterns

The Flex framework has a tremendous amount of code available for review

It is, in my opinion, the single best way to learn Flex

Understanding where to look for these solutions means you have a virtually infinite resource of solid code and design patterns

Where to go from here? Read my blog ‘codeSlinger’… because I said so http://blogs.digitalprimates.net/codeSlinger Everyone at digitalprimates http://blogs.digitalprimates.net/ <michigan:FlexCamp/> on July 30 th and 31st http://www.theflexgroup.org/camp/

Read my blog ‘codeSlinger’… because I said so

http://blogs.digitalprimates.net/codeSlinger

Everyone at digitalprimates

http://blogs.digitalprimates.net/

<michigan:FlexCamp/> on July 30 th and 31st

http://www.theflexgroup.org/camp/

How to Navigate and Extend the Flex Infrastructure Michael Labriola Senior Consultant digital primates IT Consulting Group Adobe Certified Instructor – Flex Adobe Certified Expert – Flex Adobe Community Expert – Flex

Add a comment

Related presentations

Related pages

webdu: How to navigate and extend the Flex infrastructure

How to navigate and extend the Flex infrastructure. 90% of the contractors and experts that we bring on board have no idea how to navigate the flex source ...
Read more

Web application development software - FAQ | Adobe Flex

Översikt Tech specs FAQ Showcase Extend. ... can help customers navigate the process of ... and hosting the Flex project infrastructure, ...
Read more

vSphere Web Client Extensions Programming Guide - VMware

The vSphere Web Client Extensions Programming Guide ... unique IT infrastructure. You can extend ... navigate through the various Flex ...
Read more

webdu: Michael Labriola (USA)

Michael Labriola (USA) ... How to navigate and extend the Flex infrastructure; The Ties that Bind us; This content requires the Macromedia Flash Player.
Read more

Cloud - Flex Manage

Let us help you navigate your path to the Cloud to empower your users, transform your core infrastructure, ... the opportunity to extend a DR strategy into ...
Read more

Increasing the size of a virtual disk (1004047) | VMware KB

The VMware Knowledge Base provides support ... you can extend and add virtual disks to a virtual machine when it ... Open VMware Infrastructure ...
Read more

7 Adding and Deleting Cluster Nodes - Oracle

Adding and Deleting Cluster Nodes on Linux ... To extend the Oracle Grid Infrastructure home to ... Clusterware standard Clusters and Oracle Flex ...
Read more

Extending partitions in Windows using DiskPart (1007266 ...

... and then extend a partition using DiskPart in ... refer the Microsoft Knowledge Base article ... Navigate to the location of the disk and ...
Read more

Backbone.js Wine Cellar Tutorial — Part 3: Deep Linking ...

... Deep Linking and Application States. December 8, ... we set up the basic infrastructure for the Wine ... var AppRouter = Backbone.Router.extend ...
Read more