03
Mar 10

Always Call Super in Item Renderer’s Override Methods

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.


02
Mar 10

useHandCursor = Pain in the arse!

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.


18
Feb 10

Is flex timer Accurate?

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


18
Feb 10

Geometry 3 points in line test

inLine

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 &amp;&amp; ((x1 &gt; 0 &amp;&amp; x2 &lt; 0) || (x1 &lt; 0 &amp;&amp; x2 &gt; 0)
|| (y1 &lt; 0 &amp;&amp; y2 &gt; 0) || (y1 &lt; 0 &amp;&amp; y2 &gt; 0)))
return false;
else if(!y2)
return !y1;
else if(!x2)
return !x1;
else
return x1 / x2 == y1 / y2;
}

17
Feb 10

Did Google copy flex charts from wordpress??

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:

  1. 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.
  2. 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.

google-stats.jpg

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:

wp-stats.png

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.


26
Sep 09

User Interface Design Principles

1. The Client Is Not The User

The client may think she knows what the user wants, but she cannot. This is because the client is not the user.

This brings me to the second principle:

2. Don’t Give The Client What She Thinks The User Wants

If the client does not know what the user wants and you give her what she is asking for, you are doing her a disservice. You will ultimately be delivering an application that does not meet user’s needs. Your client may initially be happy that you have given her exactly what she asked for but will she remain happy when the product is rejected by users?

I have seen too many designers and developers who are aware of these two principles but proceed to reach the wrong conclusion from it. Namely, that they know the user better. Which brings us to our next principle, which is, simply:

Continue reading →


25
Sep 09

doing nothing!

I got the Swine flu :(

well was browsing through a few examples and saw a datagrid pagination example.

check it out  here.


25
Sep 09

Encrypt in Flex and Decrypt in ColdFusion

A thread has been going on for a bit today over on the Flex Coders list. How do you encrypt data in Flex, pass it to ColdFusion and then decrypt it? I struggled with this very same question quite a while ago; and sort of came up with an answer after a lot of trial and error. This post is me finally documenting my answer.

First, there are two open source AS3 libraries that you can use to deal with data encryption in Flex: ASCrypt3 and Crypto. ASCrypt3 was my attempt at converting an ActionScript 2 library to an ActionScript 3 code base. I understand that Crypto was created from the ground up to make use of AS3 enhancements to make things more performance. Both libraries offer plenty of ways to encrypt, or decrypt data in Flex.

I’m going to assume that we want to use AES (Rijndael) to encrypt the data in Flex before sending it to ColdFusion. Unfortunately, I was never able to get the ASCrypt3 code base working with CF properly. People have told me they’ve used it successfully for Java. I have used Crypto to successfully pass encrypted data back and forth between ColdFusion and Flex, though.

First we need to create our key, and specify some settings. Load the Crypto demo. Click “Secret Key” from the TabNavigator and set these steps:

  1. Encryption: AES
  2. Mode: ECB
  3. PaddingPKCS#5
  4. Prepend IV to Cipher: Leave Unchecked
  5. Key Format:Hex
  6. Plain Text: Text
  7. Cipher Text: Hex

Once your settings are set, click “Generate 128 bits” to generate a key. If you create your own key using alternate means, that’s fie but you’ll have to be sure it is 128 bits and in Hex format; or things may go awry when switching between systems.

Type your text: “This is a Test”, then click the Encrypt button. Doing this on the fly, my key was “e1787cfc32d25355f267c53837c6062e” and the cipher text was “182f2031903e0a63ed77881b1561954c”.

I’ll assume you know of some manner to get this data from Flex to ColdFusion (or, really any other backed you desire).

On the ColdFusion side, there is a great knowledge base article about dealing with encryption, so you might want to start there. To decrypt, we are dealing with a handful of built in functions:

  • BinaryDecode: Converts a string to a binary object. We use it to turn our Hex Key into binary format.
  • ToBase64: This calculates a string representation of a binary object. We are using BinaryDecode to turn our Binary String Hex Key into a string.
  • Decrypt: This one performs the decryption algorithm

The actual code will be something like his:


<cfset HexKey = “e1787cfc32d25355f267c53837c6062e”>
<cfset myKey = ToBase64(BinaryDecode(HexKey, “Hex”))>
<cfset Encrypted = “182f2031903e0a63ed77881b1561954c”>
<Cfset Decrypted = Decrypt( Encrypted, MyKey, ‘AES’,'Hex’)>

First we take the HexKey, binaryDecode it and Base64 it. Then we feed those values along with our encrypted text into the Decrypt function. Finally, output the results:


<cfoutput>
#decrypted#
</cfoutput>

There is a lot of conversion going on, but I’m not quite sure why it’s needed. I was able to get this working using Crypto and CF, but never ASCrypt3 and CF. I suspect the problem was in the encoding of the key + result; but never had a chance to explore it in further depth. Can anyone explain?

Your mission, if you choose to accept it is to write the CF code to encrypt data before sending it to Flex. It shouldn’t take long.

If you need do something ‘real world’ you’ll have to download Crypto and figure out how to call the encryption algorithms within Flex. :-)

read original here


10
Jul 09

Dynamically add remove columns in a datagrid

i had a hard time figuring out how to add remove columns  dynamically from a datagrid and after lots of code iterations i have reached a workable scenario. i still need to add other important functionalities. close headerrenderer for each column, delete entire row functionality , user defined default state … etc

check out the code:

will be posting the demo app shortly

(make a new dynamicGridColum.mxml component and add in an application tag)

Continue reading →


27
May 09

Welcome !

Welcome to flexevent


Pages: 1 2 3 4 5 6 Next