Home > debugging, flash builder > Debugging Flex and PHP with Flex Builder and Zend Studio

Debugging Flex and PHP with Flex Builder and Zend Studio

June 6th, 2008

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:
  1. September 9th, 2010 at 21:35 | #1

    I’ve been using NetBeans, but I think I’m going to give Zend a demo.

  2. eprevot
    July 13th, 2011 at 18:46 | #2

    I don’t understand how this could work because when I hit Zend toolbar’s debug button, the page is refreshed, this breaks the debug for flex

Comments are closed.