Home > flex, flex builder > Using Import Web Service wizard to connect Flex to .NET

Using Import Web Service wizard to connect Flex to .NET

July 28th, 2008

Since I was deeply involved in Flex Builder support for working with .NET I thought that it would be a good idea to write some articles on how you can use these technologies together. I will create a “Hello World” project but the focus will be on how you can better make use of the available tools.

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:

image

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:

image

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.

image

The third page should look like this:

image

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>

mpricope flex, flex builder

  1. Hugues
    November 29th, 2008 at 08:50 | #1

    Excellent! Thanks :)

  2. Sumendra Kumar
    December 10th, 2008 at 23:12 | #2

    Cool Title…really helped me…

  3. Brian
    March 20th, 2009 at 11:55 | #3

    Any chance of you creating an example of binding a flex datagrid the same way? Better yet, an editable datagrid?

    Thanks for this example! You rock!

  4. June 1st, 2009 at 14:15 | #4

    Sweet man, i couldnt figure out why my project didnt work thanks to this simple example i understood why =P

    Thanks!

  1. No trackbacks yet.