Home >
Connecting to data with Flex 4 and Flash Builder is now easier than ever. In this post, we'll walk through a simple scenario that will connect a Flex application to a web service, and we will barely write any code.
The first thing to do is start out with a new, blank Flex project in Flash Builder. In this example, we will be connecting to the public "Zip Code Information Lite" web service from StrikeIron. With your blank project, the first thing that you will need to do is create the web service. You can use the built-in data wizards to automatically generate web service objects, along with their input parameter and return value class. First, go to the "Data" menu, and select the "Connect to WebService..." menu option.
Once you do that, the "New Flex Service" wizard will begin. You will need to enter a service name (note: this will be used as the class name), and a WSDL url. In this case, the wsdl value is http://wslite.strikeiron.com/zipcodeinfolite01/ZIPCodeInfoLite.asmx?WSDL
When you click on the "Next" button, it will analyze the WSDL to introspect information about your web service. You will need to specify the port and operations to generate code for. In this case, select the "ZipCodeInforLiteSoap" port, and the "GetZipCodeInfo" operation. This will automatically generate everything that you need to utilize this web service operation within your own application.
Once the import/code generation wizard is complete, you will be able to see the service defined in the "Data/Services" pane within Flash builder. From here, you will be able to see the data types that are associated with the service, and the functions which have been exposed through the previous wizard. If you browse through the generated code, you may notice that all of the value-object classes for return and input values have been generated for you.
Next, I went ahead and added a TextInput, a Button, and a TextArea to the application. The TextInput will be used to enter a zip code to be used as the input parameter to the zip code web service. The Button instance will invoke the service, and the TextArea will be used to display the service result.
Next, just drag the "GetZipCodeInfo" function from the "Data/Services" pane onto the TextArea instance, as shown below.
This will invoke the "Bind to Data" wizard, where you will specify which service and operation will be used in the data binding. You will need to make sure the "GetZipCodeInfo" operation is selected, and you will need to select the field of the result object which will be used in the data binding. In this case, select the "ServiceResult" object.
This action will generate code that instantiates the web service within your application, and binds the result of the "GetZipCodeInfo" function to the TextArea's text property. If you look at the generated code, you'll see that the service result is invoked on on the creationComplete event. We don't want this to happen. Instead, move this code so that it is invoked on the Button's click event. I also added the ObjectUtil class's toString() function to show the full structure of the ServiceResult object within the TextArea instance.
The only other code i added was to set the defaultButton value for the application (used so that the user can just type the zip code and hit "enter" to invoke the service), and code to set focus on the TextInput on the application's creationComplete event.
You can test it out below. Just enter a US zip code and click the button.
The source of the main applicaiton is below. There are additional source files included in the full project, however those were automatically generated by the data service wizards, and can be recreated by following the steps in this post.
___________________________________
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
The first thing to do is start out with a new, blank Flex project in Flash Builder. In this example, we will be connecting to the public "Zip Code Information Lite" web service from StrikeIron. With your blank project, the first thing that you will need to do is create the web service. You can use the built-in data wizards to automatically generate web service objects, along with their input parameter and return value class. First, go to the "Data" menu, and select the "Connect to WebService..." menu option.
Once you do that, the "New Flex Service" wizard will begin. You will need to enter a service name (note: this will be used as the class name), and a WSDL url. In this case, the wsdl value is http://wslite.strikeiron.com/zipcodeinfolite01/ZIPCodeInfoLite.asmx?WSDL
When you click on the "Next" button, it will analyze the WSDL to introspect information about your web service. You will need to specify the port and operations to generate code for. In this case, select the "ZipCodeInforLiteSoap" port, and the "GetZipCodeInfo" operation. This will automatically generate everything that you need to utilize this web service operation within your own application.
Once the import/code generation wizard is complete, you will be able to see the service defined in the "Data/Services" pane within Flash builder. From here, you will be able to see the data types that are associated with the service, and the functions which have been exposed through the previous wizard. If you browse through the generated code, you may notice that all of the value-object classes for return and input values have been generated for you.
Next, I went ahead and added a TextInput, a Button, and a TextArea to the application. The TextInput will be used to enter a zip code to be used as the input parameter to the zip code web service. The Button instance will invoke the service, and the TextArea will be used to display the service result.
Next, just drag the "GetZipCodeInfo" function from the "Data/Services" pane onto the TextArea instance, as shown below.
This will invoke the "Bind to Data" wizard, where you will specify which service and operation will be used in the data binding. You will need to make sure the "GetZipCodeInfo" operation is selected, and you will need to select the field of the result object which will be used in the data binding. In this case, select the "ServiceResult" object.
This action will generate code that instantiates the web service within your application, and binds the result of the "GetZipCodeInfo" function to the TextArea's text property. If you look at the generated code, you'll see that the service result is invoked on on the creationComplete event. We don't want this to happen. Instead, move this code so that it is invoked on the Button's click event. I also added the ObjectUtil class's toString() function to show the full structure of the ServiceResult object within the TextArea instance.
The only other code i added was to set the defaultButton value for the application (used so that the user can just type the zip code and hit "enter" to invoke the service), and code to set focus on the TextInput on the application's creationComplete event.
You can test it out below. Just enter a US zip code and click the button.
The source of the main applicaiton is below. There are additional source files included in the full project, however those were automatically generated by the data service wizards, and can be recreated by following the steps in this post.
<?xml version="1.0" encoding="utf-8"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/halo"
xmlns:zipcodeservice="services.zipcodeservice.*"
defaultButton="{ searchButton }"
creationComplete="inputString.setFocus()">
<fx:Script>
<![CDATA[
import mx.utils.ObjectUtil;
import mx.controls.Alert;
]]>
</fx:Script>
<fx:Declarations>
<s:CallResponder id="GetZIPCodeInfoResult"/>
<zipcodeservice:ZipcodeService id="zipcodeService"
fault="Alert.show(event.fault.faultString)"
showBusyCursor="true"/>
</fx:Declarations>
<s:TextInput
id="inputString"
top="10" left="10"/>
<s:Button
id="searchButton"
enabled="{ inputString.text.length > 0 }"
label="Get Info"
top="10" left="205"
click="GetZIPCodeInfoResult.token = zipcodeService.GetZIPCodeInfo(inputString.text);"/>
<s:TextArea
id="resultTextArea"
top="40" left="10" right="10" bottom="10"
editable="false"
text="{ObjectUtil.toString( GetZIPCodeInfoResult.lastResult.ServiceResult )}"/>
</s:Application>
Andrew Trice
Principal Architect
Cynergy Systems
http://www.cynergysystems.com
Tag Cloud
Podcasts & Screencasts
@InsideRIA on Twitter
Follow InsideRIA on Twitter
Facebook Application Development
Yes They do make life of a developer very easy but I feel they still won't be much useful if you are using any framework cairngorm ,Mate etc.
But it is still very good saves a lot of time in testing services and configuring return type.
Sumit is right, but also. How does it handle RESTful Services? do I have to greate a new service for each controller/action?
Agreed, this does not replace the need for an MVC, however this can definitely be used in conjunction with an MVC framework, and can rapidly accelerate development. For restful services, you can generate a single service, then create function/operations for multiple urls within that services. It's pretty straightforward, and easy to use.
Sumit, the code generated by the wizard (which was already introduced n Flex 3) can in fact be used with MVC frameworks such as Cairngorm, see this:
http://flexonjava.blogspot.com/2008/12/integrating-cairngorm-with-fb3-data.html
and this
http://flexonjava.blogspot.com/2009/04/consuming-web-services-with-flex-using.html
Although I agree it implementing it requires some work.
Thanks
will surely try hands on that.
but still it is a little complex then creating ur own.
But Feature is great.
An alternate option is to generate an input form by right clicking on the service and chosing generate form- it automatically wires up the text input and submit button to service invocation.
We feel that the code generated can be tweaked/moved around by experts to use with various frameworks. There are a couple of enhancements to the code generation that may ease your moving the generated code to MVC frameworks. Feel free to vote on these if it would help so that this can be considered in a future release ...
Model locator: https://bugs.adobe.com/jira/browse/FB-18654
Customizing the package for generated VO objects: https://bugs.adobe.com/jira/browse/FB-16080
You have several sentences in your article that start with "In this case..." but you don't offer any insight into how you knew/decided that this was the right information to enter in that slot. One of the issues I have had with wizards that build code for you is that the creators assume that the wizard is so self-explanatory that they don't need to explain where all these values come from.
I usually wind up learning to create the things wizards are supposed to automate by hand, which I suspect often results in lighter and more maintainable code, but the reason I do it has nothing to do with whether or not the code is better if I write it--I simply can't figure out what the dang wizard _wants_ in those blanks.
The first time I tried to import a JBoss WS I ran into a problem with marshalling the web service input parameters. The problem was that Flex generated a class for a simple string input argument and Flex didn't know how to marshall the class to string. It would end up marshalling something like: [object ClassName] I was able to work around by overriding the toString method in the generated class and returning the arg0 member variable.