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:

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

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

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

• 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.

debugging, flex builder