Wednesday, March 24, 2010 from 12:00 AM – 1:00 PM (GMT+0200) join our friend Mihai Corlan (Platform Evangelist for Adobe) while he goes through the basics of debugging a Flex and PHP application.

See how to work with: Flash Builder 4,  Xdebug and Eclipse PDT to ensure a bug free project.

The presentation will take about 45 minutes, leaving 15 minutes to answer any questions you might have on this subject.

For registration go to http://flexphpdebug.eventbrite.com.

If you ever got into the following error (see bellow after this paragraph) you must know how you can overcome it.

The error is triggered only in debugging. No trace of it in the normal run. But if you need to debug and get this error it will pause the debug session and even after lots of resume pressed you’ll won’t get over it because is a cyclic error.

undefined
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.effects::Effect/effectStartHandler()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\Effect.as:1310]
	at flash.events::EventDispatcher/dispatchEventFunction()
	at flash.events::EventDispatcher/dispatchEvent()
	at mx.effects::EffectInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:580]
	at mx.effects.effectClasses::CompositeEffectInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\CompositeEffectInstance.as:172]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:150]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]
	at mx.effects::EffectInstance/finishRepeat()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\EffectInstance.as:685]
	at mx.effects.effectClasses::SequenceInstance/play()
	[C:\autobuild\3.x\frameworks\projects\framework\src\mx\effects\effectClasses\SequenceInstance.as:156]

The error is triggered by Sequence and the code looks like this…

<mx:Sequence id="movement" repeatCount="0" startDelay="{delay}">
    <mx:Move id="movementUp" target="{this}" duration="{interval}" 
        yTo="0" />
    <mx:Move id="movementDown" target="{this}" duration="{interval}" 
        yTo="{_startYPos}" />
</mx:Sequence>

What’s the problem? After trying different things on the code I noticed that instead of setting the target property of the Sequence I did set up the target of each Move item. So by removing the target from each Move and adding one to Sequence may fix the problem.

Another thing to check is that the sequence is called only once for the target object. If the same effect is called twice or more on the same object and the previous effect did not finished their job a conflict appears. That means that starting the effect on a event that triggers more than once (ex: updateComplete, addedToStage) will end in this error also. Try use creationComplete event instead.

It is important to tell you that the Flex SDK I used to test this are 3.4 and 3.5 from Adobe Nightly Builds.

Hope this helps you.

In a current project I run on the following problem: didn’t see a blur filter applied on a background. Started debugging and even though was no error neither compile errors nor runtime. But a the Flex Builder console panel, where traces appear, a special output text warning appeared:

Warning: Filter will not render. The DisplayObject’s filtered dimensions ([width], [height]) are too large to be drawn.

This text appears only when you are debugging. Tried to find where it resides but ended in playerglobal.swc.

Then searched on the internet but didn’t find anything. But found an old bug on Adobe Jira bug base and found a bug on this issue: https://bugs.adobe.com/jira/browse/SDK-775. It says is old and closed but I’m still having it, although now it is not appearing at 1000 pixels.

By trial and error I found that the maximum allowed width and height to be able to apply the filter on a display object is 2875 pixels. So the filter will be applied on display objects with widths and heights like these: 2000 x 2875, 100 x 2875, W x 2875. But if you’ll try W x 2876 the filter will not be applied. Also applying a filter on a 2875 x 2875 pixels object will not work. It seams that the product of the width and height of the object must not be over an arbitrary value that depends on the filter’s parameters.

All these were tried using the bellow application I created especially for this problem. To use it… first create the background with different widths and heights than apply the filter on it.

If any of you got into this error also please comment or contact us… maybe we will find a way to overcome the problem or to set some limits that everyone will know.

I think many of you want to develop applications for Flash Player 10 using Flex but without a debugger this is almost impossible. So if you want the Flash Player 10 Debug version directly download this archive from Adobe.

More about this on this page where you can find many other versions of flash player: http://kb.adobe.com/selfservice/viewContent.do?externalId=tn_14266&sliceId=1.

Yesterday I’ve been working with images: loading, resizing, removing, etc. I got into a challenging issue: I had to vertically position a label after an image resize – but a resize that is triggered by setting maxWidth and maxHeight keeping also the aspect ratio.

I tried to get the new width and height after the resize event was triggered but no luck. I’ve been debugging a while and seen that the new width and the new height are in $height and $width internal variables. I had no luck getting the new width and the new height in this method triggered by the resize event.

So I started to investigate to see which event triggers the last that way making it sure all properties are updated. I created a simple application that will load an arbitrary image in mean time displaying the events triggered. There is also a button that moves the image horizontally by 50 pixels also showing the triggered events.

I found that after resize event update complete event triggers which contains the needed width and height in contentWidth and contentHeight properties.

I hope this will help you in different scenarios you’ll encounter in development.

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute"
    applicationComplete="start()" width="600" height="615">
    <mx:TextInput id="imageUrl" x="10" y="10" width="383" 
        text="http://www.flexer.info/wp-content/gallery/wallpapers/fxr_1600x1200.png"/>
    <mx:Button x="401" y="10"  label="Start" 
        click="handleButtonClick(event)"/>
    <mx:Button x="464" y="10"  label="Move it" 
        click="handleMoveButtonClick(event)"/>
    <mx:Image id="testImage" maxWidth="250" maxHeight="250" 
        x="10" y="40"
        addedToStage="handleAddedToStage(event)"
        complete="handleComplete(event)"
        creationComplete="handleCreationComplete(event)"
        currentStateChange="handleCurrentStateChange(event)"
        init="handleInit(event)"
        initialize="handleInitialize(event)"
        open="handleOpen(event)"
        preinitialize="handlePreinitialize(event)"
        progress="handleProgress(event)"
        removed="handleRemoved(event)"
        render="handleRender(event)"
        resize="handleResize(event)"
        show="handleShow(event)"
        unload="handleUnload(event)"
        updateComplete="handleUpdateComplete(event)"
        valid="handleValid(event)"
        valueCommit="handleValueCommit(event)"
        />
    <mx:TextArea x="10" y="300" width="580" height="305" 
        text="{_debug}"/>
    <mx:Script>
        <![CDATA[
            import mx.events.ResizeEvent;
            import mx.events.StateChangeEvent;
            import mx.events.FlexEvent;
 
            [Bindable]
            private var _debug:String;
 
            private function start():void
            {
                _debug = "---> application started!!!\n";
            }
 
            private function handleButtonClick(e:MouseEvent):void
            {
                testImage.source = imageUrl.text;
                _debug += "---> handleButtonClick\n";
            }
            private function handleMoveButtonClick(e:MouseEvent):void
            {
                testImage.x += 50;
                _debug += "---> handleMoveButtonClick\n";
            }
 
            private function handleAddedToStage(e:Event):void
            {
                _debug += "handleAddedToStage\n";
            }
            private function handleComplete(e:Event):void 
            {
                _debug += "adddedToStage\n";
            }
            private function handleCreationComplete(e:FlexEvent):void
            {
                _debug += "handleCreationComplete\n";
            }
            private function handleCurrentStateChange(
                e:StateChangeEvent):void
            {
                _debug += "handleCurrentStateChange\n";
            }
            private function handleInit(e:Event):void
            {
                _debug += "handleInit\n";
            }
            private function handleInitialize(e:FlexEvent):void
            {
                _debug += "handleInitialize\n";
            }
            private function handleOpen(e:Event):void
            {
                _debug += "handleOpen\n";
            }
            private function handlePreinitialize(e:FlexEvent):void
            {
                _debug += "handlePreinitialize\n";
            }
            private function handleProgress(e:ProgressEvent):void
            {
                _debug += "handleProgress\n";
            }
            private function handleRemoved(e:Event):void
            {
                _debug += "handleRemoved\n";
            }
            private function handleRender(e:Event):void
            {
                _debug += "handleRender\n";
            }
            private function handleResize(e:ResizeEvent):void
            {
                _debug += "handleResize\n";
            }
            private function handleShow(e:FlexEvent):void
            {
                _debug += "handleShow\n";
            }
            private function handleUnload(e:Event):void
            {
                _debug += "handleUnload\n";
            }
            private function handleUpdateComplete(e:Event):void
            {
                _debug += "handleUpdateComplete\n";
                _debug += "     contentHeight: " + 
                    e.currentTarget.contentHeight + "\n";
                _debug += "     x: " + e.currentTarget.x + "\n";
            }
            private function handleValid(e:FlexEvent):void
            {
                _debug += "handleValid\n";
            }
            private function handleValueCommit(e:FlexEvent):void
            {
                _debug += "handleValueCommit\n";
            }
        ]]>
    </mx:Script>
</mx:Application>

I hope you won’t be offended by the fact that I created one event method for each event type instead of having just one method and “switching” for the type inside it.

These day I’ve been fighting with this issue: trying to get the Flexer XML feed from FeedBurner into a Flex application. As many of you may know FeedBurner serves the XML with an XSL and browsers that know XSL will parse it and display it in a nicer way that a simple xml.

The problem is that I use IE 7 for development and debugging which is not the best thing to do. So I did a small application to read a feed from an specified URL.

At run-time in IE I always got this error (is displayed after clicking on Get HTTPService button with format=”xml” unchecked – ONLY IN IE) :

Error #1085: The element type “link” must be terminated by the matching end-tag “</link>”.

When I did look in the message.body property of the fault event I was shocked to see that what I get is a HTML page – NOT an XML one. HTML pages do have tags that do not close like “link” tag used to add CSS to the page.

I tried every property of HTTP service, some headers and content types, I also made a URLRequest approach but the same thing.

In the other browser the things were different. Everything was OK. I was requesting for an XML I got an XML. That is great! But I still need to make it work in IE.

It seems that IE is different… It parses everything before sending it to the flash player. I’m not a hundred percent sure if is correct what I am saying but that is how I explained it. Then a “brilliant” colleague of mine found the needed thing – in the request add format = “xml” as request. It seems that when format = “xml” is set FeedBurner sends another header back to IE browser which will tell the browser not to parse the XML with XSL. So, I did it like below (starting with line 11 in the whole code):

testGetUrl.send((useFormat.selected ? {format:'xml'} : {}))

Notice {format:”xml”} object which holds our request parameter.

Here is the whole code:

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="370" height="310">
    <mx:HTTPService id="testGetUrl" 
        fault="handleFault(event)"
        result="handleResult(event)"
        resultFormat="e4x"
        url="{geturl.text}">
    </mx:HTTPService>
    <mx:Button x="10" y="40" label="Get HTTPService" 
        click="testGetUrl.send(
            (useFormat.selected ? {format:'xml'} : {})
        )"/>
    <mx:Button x="137" y="40" label="Get URLRequest" 
        click="handleGetUrlRequest(event)"/>
    <mx:CheckBox id="useFormat" x="10" y="70" 
        label="Use format=&quot;xml&quot;"/>
    <mx:TextInput id="geturl" x="10" y="10" 
        width="350" text="http://feeds.feedburner.com/flexer/"/>
    <mx:TextArea id="geturlresp" x="10" y="96" 
        width="350" height="204"/>
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.events.FaultEvent;
 
            private function handleFault(e:FaultEvent):void
            {
                var temp:String = e.fault.faultString.toString() + 
                    "\n\n" + e.message.body.toString();
                geturlresp.text = "HTTPSERVICE FAULT!\n\n" + temp;
            }
 
            private function handleResult(e:ResultEvent):void
            {
                var temp:* = e.result;
                geturlresp.text = "HTTPSERVICE RESULT!\n\n" + 
                    e.result.toString();
            }
 
            private function handleGetUrlRequest(e:MouseEvent):void
            {
                var urlReq:URLRequest = new URLRequest(geturl.text + 
                    (useFormat.selected ? "/?format=xml" : ""));
 
 
 
                urlReq.method = URLRequestMethod.GET;
                var urlLoader:URLLoader = new URLLoader(urlReq);
                urlLoader.addEventListener(
                    Event.COMPLETE, handleUrlRequestComplete);
            }
 
            private function handleUrlRequestComplete(e:Event):void
            {
                var tmp:* = e.currentTarget.data;
                geturlresp.text = "URLREQUEST COMPLETE!\n\n" + 
                    tmp.toString();
            }
        ]]>
    </mx:Script>
</mx:Application>

I made also a URLRequest option so you can see that is something that is not happening only when using HTTPService.

Again… I want to specify that the error appears only on IE.

We may write new articles on this as we will found more about it. So keep reading us.

Although Flex Builder and Eclipse do have nice debug utilities built in, today I needed a function/method in Actionscript to display into the current application some variables’ content. So I started to implement a var_dump alike function (var_dump from PHP language).

So I started and I made the Debug class that will implement the static dump function. Looking at the PHP var_dump function I noticed two, three main problems that will appear:

1. data types – ex: array is displayed as object by typeof function/operator
2. length of objects and associative arrays – ex: length property for objects and associative arrays is undefined
3. behaviour of static methods and variables inside calsses – ex: a static variable will keep its content even new methods calls appear, so calling the static dump method will not reinitialize the static vars.

For al these problems solutions are available:

1. instead of using typeof we will use flash.utils.getQualifiedClassName static method (see also this old article) – more about typeof operator and its return values here
2. we will implement a method to count the first children in an object
3. there will be an internal recursiveDump function and a generic public dump function

Here is the application code:

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

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="500" height="400"
    creationComplete="start()">
    <mx:TextArea id="debugTA" x="10" y="10" 
        width="480" height="380"/>
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import com.flexer.Debug;
 
            private var testdata:Object;
 
            private function start():void
            {
                // even though the object is created like here
                // the order does not reflect the order of
                // creation - the order is somehow made internally 
                testdata = new Object();
                testdata["row1"] = {
                    "col1":"a",
                    "col2":{
                        "12":"12",
                        "13":[1,2,3,4]
                    },
                    "col3":"c",
                    "col4":"d"
                };
                testdata["row2"] = new XML();
                testdata["row2"] = <test><tag1 att="att">val</tag1></test>;
                testdata["row3"] = {"col1":"a","col2":"b","col3":"c","col4":"d"};
                testdata["row4"] = {"col1":"a","col2":"b","col3":"c","col4":"d"};
                testdata["row5"] = new Array();
                testdata["row5"] = ["a","b","c","d"];
                testdata["row6"] = {"col1":"a","col2":"b","col3":"c","col4":"d"};
                // calling debug.dump
                debugTA.text = Debug.dump(testdata,3,5.5);
            }
        ]]>
    </mx:Script>
</mx:Application>

The Debug class with its static methods can be downloaded at the end but now you can see the dump of the above flex code.
]]> http://www.flexer.info/2008/06/25/dump-debug-method-like-var_dump-function-in-php-and-debug-class/feed/ 8