Customizing the Flex Framework aka “How to get what you need.”
-
Upload
belle-bradshaw -
Category
Documents
-
view
32 -
download
0
description
Transcript of Customizing the Flex Framework aka “How to get what you need.”
2007 Adobe Systems Incorporated. All Rights Reserved.1
Deepa Subramaniam
Software Engineer
Adobe, MAX, 2007
Customizing the Flex Framework
aka“How to get what you need.”
2007 Adobe Systems Incorporated. All Rights Reserved.2
Performance and Customization was on the forefront of our mind when designing the Flex framework.
Don’t like one of our components? Write your own!
Customization “Buckets”
UI
Data Management
Data Display
Control Behavior
How was Flex built for customization?
2007 Adobe Systems Incorporated. All Rights Reserved.3
For the most part, MXML tags map to an ActionScript class
Every tag attribute turns into a property, style, event handler on the object
<mx:Button label=“Submit” />
Some tags have no class mapping and are hard-coded into the compiler:<mx:Script/>
<mx:Metadata/>
<mx:Style/>
Every MXML file corresponds to a new ActionScript class where the name of the MXML file is the name of the ActionScript class
You can see the ActionScript code that is generated with the compiler option: keep-generated-actionscript = true
MXML objects with id’s correspond to member variables of that ActionScript class
Recipe Example (source/asToMXML)
ActionScript classes to MXML tags
2007 Adobe Systems Incorporated. All Rights Reserved.4
How often have we seen UIs like this!
Skinning and Styling infrastructure built into the framework at the component level
Effect infrastructure built into the framework at the component level
Use these mechanisms to change your application/component look and feel
Bucket 1: Customizing UI
2007 Adobe Systems Incorporated. All Rights Reserved.5
Styles are applied to individual components or across broad sets of components
<mx:Label color=“0xFFCC00” />, setStyle(‘color’, 0xFFCC00), External CSS Stylesheets, <mx:Style/>
You can only get so far with styling – at some point you will need to turn to skinning.
Skinning: Modifying appearance of a component by substituting in images, SWF files, or class files with drawing commands
Skins represent the look of a component in its different states
For more information, attend Peter Flynn’s session – Building Stunning Applications with Flex and CS3
Styling & Skinning
2007 Adobe Systems Incorporated. All Rights Reserved.6
Effect classes live in mx.effects.* package
Effects are paired with triggers which initiates a Flex effect on a target component
Default effects library include effects like: Wipe, Fade, Zoom, Glow, etc.
Effects are split into 2 categories:Simple effects that do not require an effect to play over a period of time (ie:
Pause, Sound, etc) – These effects extend mx.effects.Effect
Effects that play out over a period of time, like an animation (ie: Resize, Zoom) – These effects extend mx.effects.TweenEffect
Effects Architecture
2007 Adobe Systems Incorporated. All Rights Reserved.7
1. Can composite effects together via the mx:Parallel and mx:Sequence tags
2. Can subclass existing effects like a custom Wipe or a custom Zoom
3. Can write a new effect by extending one of the effect base classes (Effect or TweenEffect) Would require creating a custom effect factory class and a custom effect instance
class
Effect factory class manages the creation/destruction of the effect instance(s)
I want to create a custom “Shake” effect - similar to the Mac login effect when you enter an invalid username/password. How will I do this?
Shake Effect Example – source/shakeCompositeEffect
Writing Custom Effects – Shake Effect
2007 Adobe Systems Incorporated. All Rights Reserved.8
Customizations can be built directly into the data management classes.
Custom dataDescriptor
Custom collection
Bucket 2: Customizing Data Management
2007 Adobe Systems Incorporated. All Rights Reserved.9
Hierarchical data-aware controls include: Tree, Menu, MenuBar, AdvancedDataGrid
These controls support arbitrary data
Data Descriptors are used to walk the dataProvider and “describe” it to the control.
Describes information like:
1. Is this node a branch or a leaf? – isBranch()
2. What attribute on a node describes child collection (the sub collection) – getChildren()
Can use a custom data descriptor to do things like the following:
1. Lazy loading of data/load on demand: Build up the sub collection when a folder is pressed in the getChildren() call of your data descriptor.
2. Hierarchical data does not fit the format supported by the default descriptor (ie: children field does not exist).
Would extend DefaultDataDescriptor.
Data Descriptors for hierarchical data-aware controls
2007 Adobe Systems Incorporated. All Rights Reserved.10
Managing data in Flex is easy Can use underlying ActionScript objects like Array, XML, XMLList as dataProviders
to your data-aware controls.
Can use Flex classes to create collections: ArrayCollection, XMLListCollection, etc.
2 interfaces for creating collections IList: Simple interface for indexed access to linear data
ICollectionView: More advanced interface to access data that is not guaranteed to be linear
Data aware controls can take input from a dataProvider that is any of the objects mentioned above, or a derivative of those objects
Managing data sets
2007 Adobe Systems Incorporated. All Rights Reserved.11
2 unique data fetches result in a single set of data that my DataGrid needs to display
Scenario: User IDs + Credit Scores = ?
User IDs:1982871276725109231487230989
Credit Scores: 760650840580619765623810
I could pull down 1000 User objects and 1000 Credit Score objects and then take the 2 collections returned and merge them into a single collection of 1000 objects and then display, like, 12 in my DataGrid.
Uhm. Yuck.
That is a very wasteful and poorly performing way of doing, what is basically, a join operation on the client.
2007 Adobe Systems Incorporated. All Rights Reserved.12
I’ll write a custom collection that does the merging of the data on the client – this is a much better performing solution!
90% of the time – I can write a custom implementation of IList since I know the following point is true:
My data allows me indexed access to a linear collection
The 3 key points in doing the merge of n separate collections on the client are:
1. A getItem() on the merged collection does a getItem() on the sub collections and builds up the merged object
2. An add/remove/setItem() on the merged collection does the add/removeItem() on the sub collections.
3. Integrate the notification between the sub collections and the merged collection so the merged collection knows to update when one of the sub collections changes
Custom IList example – source/mergedList
Solution: Write a custom collection!
2007 Adobe Systems Incorporated. All Rights Reserved.13
Three (long) or four (short) bullets go here to describe the image, diagram or screenshot in the pod above
Bucket 3: Customizing data display
ItemRenderers for List-based controls
Custom Validators
Custom Formatters
2007 Adobe Systems Incorporated. All Rights Reserved.14
Allows you a way to customize the view of the data for data-aware controls. Drop-in item renderer: A component that implements IDropInListItemRenderer is
specified<mx:DataGrid dataProvider=“{data}”>
<mx:DataGridColumn dataField=“image” itemRenderer=“mx.controls.Image” />
</mx:DataGrid>
In-line item renderer – Specify an inline component that is used as the renderer.
mx:Component tag defines a new scope in the MXML file local to the item renderer.<mx:DataGridColumn dataField=“image”>
<mx:itemRenderer>
<mx:Component>
<mx:VBox width=“100%” height=“140”>
<mx:Button label=“{data.label}” labelPlacement=“outerDocument.placement”/>
</mx:VBox>
</mx:Component>
</mx:itemRenderer>
Or specify an ActionScript or MXML Component as an item renderer
Read Alex Harui’s blog for insights into renderers: http://blogs.adobe.com/aharui/
Item Renderers
2007 Adobe Systems Incorporated. All Rights Reserved.15
Validators – set of classes in the Flex framework to validate user input Common validators include EmailValidator, PhoneValidator, ZipCodeValidator
Validators are bound to source objects and told which property on that object to validate
Validation is triggered by an event, by default valueCommit
Base class to extend when writing a custom validator: mx.validators.Validator
Formatters – allows formatting of data for display purposes, or to send back to the server, etc. Common formatters include DateFormatter, CurrencyFormatter, NumberFormatter
Formatters are applied to controls
Formatting occurs by calling the Formatter.format() method.
Base class to extend when writing a custom formatter: mx.formatters.Formatter
Custom Validator example – source/customWordValidator
Validators and Formatters
2007 Adobe Systems Incorporated. All Rights Reserved.16
You can always extend existing framework controls to customize behavior. We are not going to talk about this now.
Instead – lets look at a powerful technique where, at runtime, we can customize the behavior of objects based on the metadata that decorates them.
In other words….Custom Metadata!
Bucket 4: Customizing control behavior
2007 Adobe Systems Incorporated. All Rights Reserved.17
Metadata provides information to the MXML compiler about how your component is usedIe: [Style(name="horizontalGap", type="Number", format="Length",
inherit="no")]
Metadata decorates ActionScript classes and MXML files
For the most part, metadata is used only at compile time and is stripped out of the SWF (by the linker) at optimization time so that SWF size is smaller. By default, compiler keeps some metadata in the swf: Bindable, Managed,
ChangeEvent, …
However, you the developer, can control this!
What is Metadata?
2007 Adobe Systems Incorporated. All Rights Reserved.18
Flex 2: had to set compiler option to instruct the compiler which metadata tags should be preserved in the swfmxmlc -keep-as3-metadata or <keep-as3-metadata/> tag in flex-config.xml
This was problematic: Users need to know what custom metadata to preserve when using a 3rd party library.
So……
Flex 3: SWC libraries now declare what metadata the linker should preserve when linking in code from that library. When a library is used to build an app, the app preserves the union of metadata from all the libraries that contributed code to the app.
Custom Metadata Tag Example – source/customMetadata
Instructing the compiler to preserve metadata
2007 Adobe Systems Incorporated. All Rights Reserved.19
Custom metadata scenario = Happy QE
My company has a homegrown testing library.
As developers write custom components, they add “testing directives” into their ActionScript and MXML code that instruct the test harness what test methods to call.
These “testing directives” are custom metadata tags that decorate testable objects
All QE has to do is run the test harness and those components decorated with testing metadata get their test methods invoked automatically!
Example
2007 Adobe Systems Incorporated. All Rights Reserved.20
Sometimes you find bugs in the framework…
There are a few options available to you for how you can choose to “patch” the framework for your immediate use.
Patching the framework
2007 Adobe Systems Incorporated. All Rights Reserved.21
First and foremost – file a bug (and enhancement requests too)http://bugs.adobe.com
Vote on bugs – voting promotes the issue internally so that it is more likely to be fixed for the next drop
Option 1: Extend the offending control and insert your fix
Option 2: Copy the class into a separate package and use your “fixed” version of the component
Option 3: Edit the offending source code directly in the mx.* directory ……..WAIT!
Fixing bugs in the framework
2007 Adobe Systems Incorporated. All Rights Reserved.22
We (and you) do not want a lot of “one offs” of the framework floating around
Your going to want to manage your changes with patches
1. Keep track of your patches so that integrating with future drops of the framework is easy
2. Submit your patch code back to Adobe via the bugbase
Patch Management Software Manages diffs of code so that modifications can be tracked and conflicts resolved
when the source code changes
Using your framework patches (risky business):
1.Edit the source code directly – newer source files take precedence over older source files
2.Can rebuild the framework with your patches to produce a whole new framework.swc
We provide Ant tasks in {FB}/sdks/3.0.0/frameworks to do so: ant clean main
Patching the framework
2007 Adobe Systems Incorporated. All Rights Reserved.23
Flex offers developers plenty of ways to customize application and component development
Go beyond the obvious!
Read framework code – question why we do what we do!
Flex BootCamp: Wednesday 9 -12
Slides, codes, thoughts up on my blog:
http://www.iamdeepa.com/blog
Conclusion