FlexOut

Flex component lifecycle and event flow explained

Vikram singh — Thu, 10 Jun 2010 07:38:32 +0000

Learned something new from Ted today
Read original post by Ted here

Flex is an event driven programming model and everything happens due to an event. Looking at the MXML code can confuse most of the developers unless they haven’t looked at the internal class of flex components. If we were to compare Flex, HTML and FLASH in terms of component instantiation.

HTML instantiates top to bottom
Flash executes across frames starting at Frame zero.
Flex on the other had is a bit different.

When I started learning Flex, I struggled with understanding event flow and instantiation in MXML. I was puzzled because I really didn’t understand how event chain started and what happened inside a component to make it finally render on screen. Initially I used to run into numerous runtime null point exception since i used to think i could access a property of an object thinking it would have been created.

Anyhow the key is understanding the event basics and seeing the initialization and event flow, Lets look at a sample application that i have written to explain this. The structure of the application cann be understood by the following diagram.

With this Demo app there is no visual clue that you will get as an output to understand the event flow and instantiation step. its the TRACE statements that are important to explain how the event flow and instantiation happens. Below is the code for the same.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

< ?xml version="1.0" encoding="utf-8"?>
<application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" preinitialize="preinit(event)"
initialize="init(event)" creationComplete="handlecc(event)">
<script>
< ![CDATA[
import flash.utils.getTimer;
import mx.events.FlexEvent;
//preinit trace function
private function preinit(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> preinitialize "+event.currentTarget)
}
//init trace function
private function init(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> initialize "+event.currentTarget)
}
//creation complete trace function
private function handlecc(event:FlexEvent):void{
trace(String(flash.utils.getTimer())+"ms >> creationComplete "+event.currentTarget)
}
]]>
script>
<hbox name="hbox" preinitialize="preinit(event)"initialize="init(event)" creationComplete="handlecc(event)">
<canvas name="can" preinitialize="preinit(event)" initialize="init(event)" creationComplete="handlecc(event)">
<button name="cbt1" preinitialize="preinit(event)" initialize="init(event)" creationComplete="handlecc(event)"/>
<button name="cbt2" preinitialize="preinit(event)"initialize="init(event)" creationComplete="handlecc(event)"/>
canvas>

<vbox name="vbox" preinitialize="preinit(event)"initialize="init(event)" creationComplete="handlecc(event)">
<button name="btn1" preinitialize="preinit(event)"initialize="init(event)" creationComplete="handlecc(event)"/>
<button name="btn2" preinitialize="preinit(event)"initialize="init(event)" creationComplete="handlecc(event)"/>
vbox>
hbox>
application>

Download the source here
I have also Monkey-patched the following classes

VBox
HBox
Button

In all the above classes I have added a trace statement at measure() updateDisplayList() and createChildren(). you can see get these files in the source attached.

The component lifecycle happens in the following order. Note: i am not explaining what these methods do, but in what order are they executed to give you the final result.

preInitialize()
createChildren()
initialize()
measure()
updateDisplayList()
creationComplete()

The order of instantiation can be understood by the trace log if you compiled and debugged the demoApp

250ms >> preinitialize test0
259ms >> preinitialize test0.hbox
262ms >> preinitialize test0.hbox.can
265ms >> preinitialize test0.hbox.can.cbt1
266ms >> create Children – test0.hbox.can.cbt1
273ms >> initialize test0.hbox.can.cbt1
275ms >> preinitialize test0.hbox.can.cbt2
276ms >> create Children – test0.hbox.can.cbt2
277ms >> initialize test0.hbox.can.cbt2
278ms >> initialize test0.hbox.can
279ms >> create Children – test0.hbox.can
281ms >> preinitialize test0.hbox.vbox
283ms >> preinitialize test0.hbox.vbox.btn1
284ms >> create Children – test0.hbox.vbox.btn1
285ms >> initialize test0.hbox.vbox.btn1
287ms >> preinitialize test0.hbox.vbox.btn2
288ms >> create Children – test0.hbox.vbox.btn2
289ms >> initialize test0.hbox.vbox.btn2
290ms >> initialize test0.hbox.vbox
291ms >> create Children – test0.hbox.vbox
292ms >> initialize test0.hbox
293ms >> create Children – test0.hbox
294ms >> initialize test0
310ms >> measure – test0.hbox.can.cbt1
312ms >> measure – test0.hbox.can.cbt2
313ms >> measure – test0.hbox.vbox.btn1
313ms >> measure – test0.hbox.vbox.btn2
315ms >> measure – test0.hbox.can
315ms >> measure – test0.hbox.vbox
317ms >> measure – test0.hbox
344ms >> updateDisplayList – test0.hbox
348ms >> updateDisplayList – test0.hbox.can
350ms >> updateDisplayList – test0.hbox.vbox
351ms >> updateDisplayList – test0.hbox.can.cbt1
356ms >> updateDisplayList – test0.hbox.can.cbt2
358ms >> updateDisplayList – test0.hbox.vbox.btn1
359ms >> updateDisplayList – test0.hbox.vbox.btn2
364ms >> creationComplete test0.hbox.can.cbt1
365ms >> creationComplete test0.hbox.can.cbt2
366ms >> creationComplete test0.hbox.vbox.btn1
367ms >> creationComplete test0.hbox.vbox.btn2
368ms >> creationComplete test0.hbox.can
370ms >> creationComplete test0.hbox.vbox
371ms >> creationComplete test0.hbox
373ms >> creationComplete test0

Just by looking at the trace log and the application structure image you can slowly start making out a pattern (preorder traversal). preInitialize() is called first for the App then the first child(in our case only child HBOX) then its first child which is the CANVAS and finally the first child of canvas that is C BUTTON 1 after this the createChildren() and initialize() of the innermost left child is called then moving on to its sibling the preInitialize(), createChildren() and initialize() is called. This is followed till all the children have completed the preInitialize(), createChildren() and initialize() steps.

After this the measure() of all the child’s are called in a bottom up approach with left child priority.

After this the updateDisplayList() of all the children’s are aclled in a top down approach with left child priority.

Finally the creationComplete() of all the children are called again in bottom up approach with left child priority. Thus explaining why creationComplete() of the parent component is called at the very end. the more you look at the log trace the more you will understand the flow. Hope this effort of my explaining the instantiation process helped you out.

Download the source here

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

UI patterns

Vikram singh — Fri, 04 Jun 2010 11:26:35 +0000

User needs: these are the UI patterns that the user uses as a tool to understand and interact with the data that has to be conveyed to the user. In short we can say these are the gadget which helps the user to understand raw data by converting them into something meaningful. I have categorized the UI patterns in the order of “user needs and actions”.

Navigating around
· Accordion
· Headerless Menu
· Breadcrumbs
· Directory Navigation
· Doormat Navigation
· Double Tab Navigation
· Faceted Navigation
· Fly-out Menu
· Home Link
· Icon Menu
· Main Navigation
· Map Navigator
· Meta Navigation

Download detailed document: here

· Minesweeping
· Panning Navigator
· Overlay Menu
· Repeated Menu
· Retractable Menu
· Scrolling Menu
· Shortcut Box
· Split Navigation
· Teaser Menu
· To-the-top Link
· Trail Menu
· Navigation Tree

Basic interactions
· Action Button
· Guided Tour
· Paging
· Pulldown Button
· Slideshow
· Stepping
· Wizard

Searching
· Advanced Search
· Autocomplete
· Frequently Asked Questions (FAQ)
· Help Wizard
· Search Box
· Search Area
· Search Results
· Search Tips
· Site Index
· Site Map
· Footer Sitemap
· Tag Cloud
· Topic Pages

Dealing with data
· Carrousel
· Table Filter
· Collapsible Panels
· Details On Demand
· Collector
· Inplace replacement
· List Builder
· List Entry View
· Overview by Detail
· Parts Selector
· Tabs
· Table Sorter
· Thumbnail
· View

Personalizing
· Customizable Window
· Login
· Registration

Shopping
· Booking
· Product Comparison
· Product Advisor
· Product Configurator
· Purchase Process
· Shopping Cart
· Store Locator
· Testimonials
· Virtual Product Display

Making choices
· Country Selector
· Date Selector
· Language Selector
· Poll
· Rating

Giving input
· Comment Box
· Constraint Input
· Form

Miscellaneous
· Footer Bar
· Hotlist
· News Box
· News Ticker
· Send-a-Friend Link

Application needs: Patterns that help the application, or you the designer, communicate better with the user

Drawing attention
· Captcha
· Center Stage
· Color Coded Section
· Premium Content Lock
· Grid-based Layout
· Liquid Layout
· Outgoing Links
· Alternating Row Colors

Feedback
· Input Error Message
· Processing Page

Simplifying interaction
· Enlarged Click area
· Font Enlarger

Download detailed document: here

source : http://www.welie.com

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Diagonol barChart

Vikram singh — Tue, 18 May 2010 07:51:30 +0000

Its not the most practical component though but for a slick “Reports UI” I had to develop a diagonal bar chart component that can be used to display a barchart 45degrees to the horizontal axis. At first i thought of solving this by using a conventional Flex Barchart but it turned out to be too much of effort in styling the barchart to look like the Screenshot, So i went ahead and wrote diagonal barChart from scratch.

Limitations :
1) Chart not re-sizable
2) Chart written with embedded font (otherwise label cant be rotated).
3) Chart cannot be configured with direction, barThickness and barGap.

Features:
1) “n” Diagonal bars can be drawn on screen : i have tested it with 1000 but 50 bars are more practical.
2) top 10 bars drawn + Others : this feature enables you to see top 10 bars with the rest of the bars clubbed into others
3)sorted/unsorted bars by value.

well do try it out and if you like the widget do let me kno.

Source here

Demo here

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Random color generator

Vikram singh — Tue, 18 May 2010 07:03:53 +0000

I am sure there were many times in the past that you would have wanted to have a function that could return you random colors. Well at least i have faced this problem many times, Mostly when i am giving a demo for a new component which deals with various color ranges.

Following is the code to generate Random colors:

1
2
3
4
5
6
7
8
9

private var redBias:Number = 0xFF;
private var greenBias:Number = 0xFF;
private var blueBias:Number = 0xFF;

private function getRandomColor():uint{
var ct:ColorTransform = new ColorTransform(1,1,1,1,Math.random()*redBias, Math.random()*greenBias, Math.random()*blueBias);
var color:uint = ct.color;
return color;
}

you can also modify the above code to return you a range in a specific color range this can be done by making any 2 colors constant instead of using a random number. Well then enjoy the code and do post in any new cool things that you can do with this piece of code.

for more know-how read the following post : ColorTransform

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Inspectable : metatag that makes your code fool proof

Vikram singh — Mon, 10 May 2010 09:31:45 +0000

If you are building a custom components which will be used by other developers style wont it be cool for them to see the bindable properties in a popup selectable values (i.e. true/false) via code completion in Flex Builder. Plus it could also to show in the Properties Panel in design view and the teammate has the ability to choose a property value.

in short making your component FOOOL proof . Well then “Inspectable” is your best friend.

Usage:

1 2	[Inspectable( defaultValue=false,verbose=1, category="Other", enumeration="true,false")] [Bindable] public var aintThisCool : Boolean;

If your like what you have read and want to learn more follow the link:Flex Metatags

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Always Call Super in Item Renderer’s Override Methods

Vikram singh — Wed, 03 Mar 2010 05:13:48 +0000

Today I came across a bug where I was using an item renderer in a data grid and the row didn’t highlight when you mouse over it and wouldn’t get selected when you clicked on it (ie, moused over or clicked on the column, not the entire row). The item renderer consisted of 2 Label component.

At first, it was tough to see what the problem could have been. The item renderer is very simple, I have used more complicated item renderers elsewhere that don’t have this problem.

That’s when I noticed that my data setter override didn’t look quite right:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

override public function set data(value:Object):void{

_data = value;
if(value){
if(parseInt(value["growth"])>0)
this.setStyle("color",LOW_STATE);
else if(parseInt(value["growth"])== 0)
this.setStyle("color",NORMAL_STATE);
if(parseInt(value["growth"])<0)
this.setStyle("color",HIGH_STATE);

this.text = value["growth"]+"%";
}
}

I was this close to trying to hack in something using the mouseover and mouseclick handlers, when I realized I just needed to do this little change : “super.data = value”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

override public function set data(value:Object):void{
// the missing line that made all the difference
super.data = value;

_data = value;
if(value){
if(parseInt(value["growth"])>0)
this.setStyle("color",LOW_STATE);
else if(parseInt(value["growth"])== 0)
this.setStyle("color",NORMAL_STATE);
if(parseInt(value["growth"])<0)
this.setStyle("color",HIGH_STATE);

this.text = value["growth"]+"%";
}
}

Apparently something in the super class’s data setter does something vitally important, and you really shouldn’t skip that. If you do, BAD stuff will happen.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

useHandCursor = Pain in the arse!

Vikram singh — Tue, 02 Mar 2010 12:27:34 +0000

I was creating a UIcomponent called the “FilterIndicator” which looks like a button but has a button inside itself to remove the button all-together from the stage. FilterIndicator by default will have a toggle behavior differenciated by the background color: if the filter is active the bgColor is green but if the filter is applied it becomes red. the whole component extends Canvas.

The task was to show a hand cursor whenever the user moves his mouse over this component. So far it had turned out to be a pain in the ass till i found the solution.

Well the problem with useHandcursor started when i tried to show cursor on the canvas. firstly this was not working when i did try this out with various combination i found out that MouseChildren = “false” property actually controls the behavior of useHandcursor.

solution :
useHandCursor=”true” buttonMode=”true” mouseChildren=”false”

IMPORTANT: mouseChildren=”false” might cause the mouseclick of the subsequent below components to not fire at all.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Is flex timer Accurate?

Vikram singh — Thu, 18 Feb 2010 12:08:06 +0000

Would you would expect timers in ActionScript 3.0 to be accurate??

“yes, of course!” But there’s a problem:

If you set a Timer to go off indefinitely (i.e., with a repeatCount of 0), it appears that the timer doesn’t start the next interval until the listener function returns. So if you don’t correct for this, then your timer function will creep by the duration of the listener function. If your listener function does something that’s potentially lengthy, you might want to execute it with a callLater() so that the timer isn’t affected. But the timer will still creep unless you apply a correction. Here’s some sample code that demonstrates the effect, side-by-side with a correction.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="{onCreationComplete(event)}">
mx><mx :Script>
< ![CDATA[
import mx.utils.StringUtil;
import mx.events.FlexEvent;
private const BASE_INTERVAL:Number = 1000;
private var _creepingTimer:Timer = new Timer(BASE_INTERVAL);
private var _steadyTimer:Timer = new Timer(BASE_INTERVAL);
private var _startTime:Date;

private function onCreationComplete(e:FlexEvent) : void
{
_creepingTimer.addEventListener(TimerEvent.TIMER, onCreepingTimer);
_creepingTimer.start();
_steadyTimer.addEventListener(TimerEvent.TIMER, onSteadyTimer);
_steadyTimer.start();
_startTime = new Date();
}

private function onCreepingTimer(e:TimerEvent) : void
{
var now:Date = new Date();
var deltaMS:int = now.time - _startTime.time;
uiCreepingLog.text += StringUtil.substitute("\r{0}", deltaMS);
}

private function onSteadyTimer(e:TimerEvent) : void
{
var now:Date = new Date();
var deltaMS:int = now.time - _startTime.time;
uiSteadyLog.text += StringUtil.substitute("\r{0}", deltaMS);
var offset:int = deltaMS % BASE_INTERVAL;
_steadyTimer.delay = offset < 500 ? BASE_INTERVAL - offset : BASE_INTERVAL;
}

]]>
mx>
<mx :HBox width="100%" height="100%">
<mx :TextArea id="uiCreepingLog" width="50%" height="100%" text="Creeping timer:"/>
<mx :TextArea id="uiSteadyLog" width="50%" height="100%" text="Steady timer:"/>
mx>

read the orignal post at : joy of flex

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Geometry 3 points in line test

Vikram singh — Thu, 18 Feb 2010 10:41:29 +0000

GeometryMath.isLine() static function tests 3 Points and returns true if these points are in line. Optional 4th parameter defines if you require point2 to be in the middle between 1 and 3. Function is not based on vector algorithm, but on triangle equation. This simple function was developed in order to optimize number of points necessary to draw some paths. To draw a line, you do not need all the points, you can omit all the middle points that are on the same line and the result looks the same – optimizes performance or storage.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

public static function isLine(point1:Point, point2:Point,
point3:Point, orderSensitive:Boolean = true):Boolean
{
var x1:Number = point1.x - point2.x;
var x2:Number = point2.x - point3.x;
var y1:Number = point1.y - point2.y;
var y2:Number = point2.y - point3.y;

if(orderSensitive && ((x1 > 0 && x2 < 0) || (x1 < 0 && x2 > 0)
|| (y1 < 0 && y2 > 0) || (y1 < 0 && y2 > 0)))
return false;
else if(!y2)
return !y1;
else if(!x2)
return !x1;
else
return x1 / x2 == y1 / y2;
}

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Did Google copy flex charts from wordpress??

Vikram singh — Wed, 17 Feb 2010 09:44:30 +0000

Google just did a makeover on their Google Analytics package, completely revamping their UI. We won’t get to play with it for a while, though, because they’re slowing rolling out the new version across all their myriad users. Undoubtedly this strategy has two business-centric side effects:

With a slow rollout, they can fix any bugs in the application which they might have overlooked. By the time the 95% start to use it, the 5% will have made it perfect.
They can make it sure it scales. As they add site after site, they can accurately measure how much of their distributed grid will have to power the new, heavier UI.

I don’t have access to a live version, but this screenshot looks a lot the newly announced free stat tracking app from WordPress. For comparison, here’s a screenshot from their web page:

I won’t argue that they’re the same, but the style is similar–and WordPress came way first. Copying or unconscious emulation? You decide.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.