I’ve made a video with my little workflow that you can watch it here (I couldn’t believe how easy it was).

You can also see the running demo (and download the source files) here.

Next open Visual Web Developer and open a Web Site in the same location as the Flex Builder project.  Open web.config and make sure you have <compilation debug=”true”> (this inserts debugging symbols for the .NET code).

Now we need to use the same ASP.NET Developer Server for both the Flex Builder and Visual Web Developer. Since by default both tools try to start one instance we need a little trick to do that:

Start the MXML project through Flex Builder; this will start ASP.NET Developer Server usually on port 3000. Then go to Visual Web Developer; on Project Property Page (Right Click on the Project in the Solution Explorer) click Start Options and select Use Custom Server and enter http://localhost:3000/testDotNet/

Start also the .NET project just to connect the Visual Web Developer to the ASP.NET Developer Server instance. Now you will be able to debug both Flex and .NET code:

For tooling I will be using Flex Builder and Visual Web Developer 2008 Express Edition (VWD).

First let’s create a simple ASP.NET Web Service project using VWD:

I slightly modified the HelloWorld method in Service.cs to receive a parameter:

[WebMethod]

public string HelloWorld(String name) {

    return "Hello " + name + "! Nice talking to you!";

}

Now let’s get into Flex Builder and try to get something from the .NET Server. First we will create a new Flex Project on top of the .NET one. To do that click on New->Flex Project and choose ASP.NET as the server technology:

Make sure the location is the same as the VWD .NET project. Now run the default MXML file to start the ASP.NET Developer Server.

Next we will generate the glue code for calling the Web Service using the Import Web Service Wizard. Choose Data -> Import Web Service (WSDL) from the Flex Builder menu. On the first page the main source folder is selected by default. You can leave it like this. On the second page you need to choose the WSDL URI. When you launched the MXML application the ASP.NET Developer Server should have started by default on port 3000 (see the tray icon). In this case the WSDL URL should be something like http://localhost:3000/testDotNet/Service.asmx?WSDL.

The third page should look like this:

Now you should have some typed AS classes that provide easy access the .NET Web Service methods. The cool thing about this is that Flex Builder knows now how to do autocompletion on Web Service calls. So making a little application that will showcase this is just too easy:

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import generated.webservices.HelloWorldResultEvent;

            import generated.webservices.Service;

            public function sayHello():void {

                var service:Service = new Service();

                service.addhelloWorldEventListener(

                    function (event:HelloWorldResultEvent):void {

                        Alert.show(event.result);

                    });

                service.helloWorld(myName.text);

            }

        ]]>

    </mx:Script>

    <mx:TextInput x="176" y="171" id="myName"/>

    <mx:Text x="70" y="173" text="Enter Your Name"/>

    <mx:Button x="344" y="171" label="Click to receive greeting" click="sayHello()"/>

</mx:Application>

This might be a little bug, but I found a workaround. I manually edited .actionScriptProperties file and in the <application> section added the FDMSBridge.as:

<?xml version="1.0" encoding="UTF-8"?>

<actionScriptProperties mainApplicationPath="testBlaze.mxml" version="3">

<compiler additionalCompilerArguments="-services "C:/work/wksp/samples/testBlaze/WebContent/WEB-INF/flex/services-config.xml" -locale en_US" copyDependentFiles="true" enableModuleDebug="true" generateAccessible="false" htmlExpressInstall="true" htmlGenerate="true" htmlHistoryManagement="true" htmlPlayerVersion="9.0.28" htmlPlayerVersionCheck="true" outputFolderPath="bin-debug" rootURL="http://localhost:8080/testBlaze" sourceFolderPath="flex_src" strict="true" useApolloConfig="false" verifyDigests="true" warn="true">

<compilerSourcePath/>

<libraryPath defaultLinkType="1">

<libraryPathEntry kind="4" path=""/>

<libraryPathEntry kind="1" linkType="1" path="flex_libs"/>

</libraryPath>

<sourceAttachmentPath/>

</compiler>

<applications>

<application path="FDMSBridge.as"/>

<application path="testBlaze.mxml"/>

</applications>

<modules/>

<buildCSSFiles/>

</actionScriptProperties>

Now the FDMSBridge.as should be compiled as a normal Flex application:

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.