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.
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
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.
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.
privatefunction getRandomColor():uint{ var ct:ColorTransform = new ColorTransform(1,1,1,1,Math.random()*redBias, Math.random()*greenBias, Math.random()*blueBias); varcolor:uint = ct.color; returncolor; }
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
If you are building a custom components which will be used by other developers <mxml> 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.
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:
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 publicfunctionsetdata(value:Object):void{ // the missing line that made all the difference super.data = value;
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.
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.
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.
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
publicstaticfunction 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;
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.
. Well then “Inspectable” is your best friend.
