Archive

Archive for June, 2008

Identifying visual elements in Flex

June 16th, 2008 No comments

I recently started working on a project to internationalize a large Flex App. One of the problems of internationalizing UIs is that in different languages the same text might grow not only horizontally but also vertically (e.g.: In Chinese the default height is often 16 pixels and not 10 or 12 as in most European languages). So if you have an application that didn’t take that into account (my case) you need to rethink the layout to accommodate this expansion. But my very first problem when I started to look into that application was that I had no clue where where each visual element is defined and:

  • the application is BIG
  • The guys that wrote it are on a time zone 10 hours away

So I was basically on my own to identify visual elements, figure out what the actual layout is and where it is defined.

So I came up with this trick to get a sense on how this application is built:

In the capture phase, the visual events in AS3 are dispatched from the root ancestor to the target. This means that the Application container receive all events. So I registered a listener on the Application container that analyzes these events, finds the actual target and then displays the entire display stack that contains the target object. This helped me identify what AS class represents which visual element and in what container this element is placed.

Here’s is my little bit of code that does this:

public function initTrace(app:WindowedApplication):void {
    app.addEventListener(MouseEvent.MIDDLE_CLICK,middleClickHandler,true);
}
public function middleClickHandler(event:MouseEvent) {
    var tm:Object = event.target;
    var tab:String = "";
    traceObj(tab,tm);
    var tmParent:DisplayObject = tm as DisplayObject;
    while (tmParent != null) {
        tab += "  ";
        traceObj(tab,tmParent);
        tmParent = tmParent.parent;
    }
}
public function traceObj(tab:String,obj:Object):void {
    trace(tab + getQualifiedClassName(obj));
    if (obj is UIComponent) {
        var tmUI:UIComponent = obj as UIComponent;
        trace(tab+tmUI.getStyle("fontFamily") + ":" + tmUI.getStyle("fontSize"));
    }
}

You just need to call the initTrace method on Application.applicationComplete:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    layout="absolute" applicationComplete="initTrace(this)">
Categories: debugging, flex Tags:

Debugging Flex and PHP with Flex Builder and Zend Studio

June 6th, 2008 2 comments

So I am a big fan of debugging. I know that for most people this isn’t exactly what they get out of the bed in the morning, but nevertheless I know that this prevents them going to sleep in the evening. My first thing when I look into a technology and it’s tools ecosystem is “how will I debug this?”. I find more useful to spend some time configuring my environment for debug earlier in the project rather than later, when things might get hotter.

These days I was looking into Flex and PHP and naturally I started by trying to configure my environment so I can debug this. My goal was to be able to to debug both Flex code and PHP code, to track the dataflow through a server request. I’ve tried different solutions, and here is the simpler one:

Solution

First installed Zend Studio for Eclipse (http://www.zend.com/en/products/studio/downloads). Make sure you install also the Zend Studio Toolbar for your browser.

Next installed the Flex Builder Plugin from (http://www.adobe.com/cfusion/tdrc/index.cfm?product=flex_eclipse) and choose as Eclipse location the folder where you installed Zend Studio (Usually c:\Program Files\Zend\Zend Studio for Eclipse – 6.0.0\ for my Windows machine). You might get the following warning:

image

You just need to follow the 3 steps and it should be fine.

The next thing is to install the Zend Debugger server. I found a good tutorial here so I will not get into much detail.

Now we will create a combined Flex + PHP Project:

  • New -> Flex Project
  • Choose PHP as Application Server Type

image

image

I will use the following MXML File:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="initApp()">
    <mx:Script>
        <![CDATA[
            import mx.rpc.events.ResultEvent;
            import mx.rpc.http.HTTPService;
            var gateway:HTTPService = new HTTPService();

            function initApp() {
                gateway.url = "hello.php";
                gateway.method = "POST";
                gateway.useProxy = false;
                gateway.addEventListener(ResultEvent.RESULT, resultHandler);

            }
            function sendRequest():void {
                gateway.request =  {"name":enteredName.text};
                gateway.send();


            }

            function resultHandler(e:ResultEvent):void {
                myText.text = e.result.toString();
            }
        ]]>
    </mx:Script>
    <mx:Button x="301.5" y="10" label="Send" click="sendRequest()"/>
    <mx:Text id="myText" x="10" y="62" width="493" height="181" fontFamily="Arial" fontSize="36"/>
    <mx:Label x="10" y="12" text="Enter Your Name:"/>
    <mx:TextInput id="enteredName" x="121" y="10"/>
</mx:Application>

and a little hello.php.

<?php
    $name = $_POST['name'];
    echo "Hello $name !";
?>

As a little note, I create the PHP files directly in the bin-debug folder which is a link to the real folder on your local Web Server.

Now to debug the whole thing:

  • From the Flex perspective I choose Debug As -> Flex Application.
  • On the browser go on the Zend Studio Toobar and click on Debug.
  • If there are checked menu items uncheck them first.
  • Check the All Pages on this site

image

  • put some breakpoints both in flex and in php code:

image image

  • Now when you click the Send button in the application you will hit both breakpoints.

I will try to get this working also with Flex Builder and PDT and post an eventual solution. I managed to get something working with Zend Server Debugger with it’s too unstable to call it a solution.

Categories: debugging, flash builder Tags: