Invoking SOAP and RESTful Web Services using Flex 4.0

February 28, 2011

Introduction

Flex 4.0 framework facilitates to interact with various kinds of RPC services. Flex Applications can invoke traditional Web Services or Restful web services that returns XML, JSON etc. MXML’s RPC components provides access to SOAP (Simple Object Access Protocol) based web services and Restful web services using HTTP Services. Flex supports requests and responses of web services which are defined as SOAP messages. SOAP defines a standard for communicating the request and response using XML between the Service provider and consumer. The proxy service for LCDS (LiveCycle Data Services) and BlazeDS intercepts requests to web services located remotely, redirects the requests, and returns the responses to the consumers.

Working with Web Services

The RPC components and non visual components can be defined in MXML using <fx:Declarations> tag. The Web service components can be created using MMXL code or Action Script (the Object oriented language for Flex) classes also. Let us define a simple SOAP based web service using Java (JAX-WS) that is displayed in a web server to just say Hello to the received user name.

JAX-WS Web Service

package mypack;
 
	import javax.jws.WebMethod;
	import javax.jws.WebParam;
	import javax.jws.WebService;
 
	/**
	 *
	 * @author GopiKrishna_Chaganti
	 */
	// defining the web service
	@WebService()
	public class FlexWS {
 
		/**
	     * Web service operation
		 */// defining the web method for execution
	    @WebMethod(operationName = "greet")
		public String greet(@WebParam(name = "name") // parameter passed
	    String name) {
		    return "Hello "+name+", this is a SOAP Web Service!";// response returned in SOAP
	    }
	}

SOAP based web services need to define the WSDL file so that the consumers can implement the client stubs.
Let us create Flex 4 MXML code to invoke the web service:

<?xml version="1.0" encoding="utf-8"?> 
	<!--Defining the Flex app container -->
	<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/mx" minWidth="955" minHeight="600" xmlns:ns1="*"> 
 
		<fx:Declarations> 
		<!-- declaring the web service using Flex 4 spark component,
			wsdl attribute to define the location of WSDL,
			useProxy to confirm the usage of proxy -->
			<s:WebService id="srv" wsdl="http://localhost:8080/FlexWS/FlexWSService?WSDL" useProxy="false" showBusyCursor="true">
				<!--once result is received succefully, this block will be used -->
				<s:result>
					tt.visible = true;
					tt.text= event.result.toString();
					Alert.show(event.result.toString());
				</s:result>
				<!--defining the fault handler -->
				<s:fault>
					Alert.show(event.fault.faultString);
				</s:fault>
			</s:WebService>
		</fx:Declarations>
		<s:VGroup width="100%" height="100%" paddingLeft="15" paddingTop="15">
			<s:HGroup gap="10">
				<mx:FormItem label="Enter your name : " color="#EEE7E7" focusColor="#70EDEE" borderColor="#C14F4F" chromeColor="#0C0C0C" backgroundColor="#271818" dropShadowVisible="true">
					<s:TextInput id="t" color="#0C0D0D"/>
				</mx:FormItem>
			</s:HGroup>
			<s:HGroup width="312" height="62">
				<s:TextArea id="tt" width="313" height="59" verticalAlign="middle" textAlign="center"/>
			</s:HGroup>
			<s:TileGroup width="150" height="21">
				<!-- calling the appropriate method of web service -->
				<s:Button label="SOAP" click="srv.greet(t.text)" x="68" y="10"/>
			</s:TileGroup>
		</s:VGroup>
	</s:Application>

The execution is as follows: After entering the name and clicking the SOAP button the following output can be observed.

Invoing Restful Web Service

Let us modify the code to invoke the Restful web service. The Java restful web service is defined as follows:

JAX-RS Service

package mypack;
 
	import java.util.Date;
	import javax.ws.rs.Path;
	import javax.ws.rs.GET;
	import javax.ws.rs.PathParam;
	import javax.ws.rs.Produces;
	import javax.ws.rs.QueryParam;
 
	/**
	 * REST Web Service
	 *
	 * @author GopiKrishna_Chaganti
	 */
	// defining the JAX-RS resource class 
	@Path("weather")
	public class WeatherResource {
		// this method is invoked when the GET method is used to invoke the HTTP url. 
	    @GET
		@Produces
	    public String getHtml(@QueryParam("name") String name) { // Query parameter is  defined 
		    return "Hi " + name.toUpperCase() + ", you are using Restful Web Service!";
	    }

Let us modify the Flex 4 MXML as well as follows:
Add the following mxml code to the <fx:Declarations> tag.
GET and POST methods can mentioned before accessing the Restful web service using method attribute.

<s:HTTPService id="userRequest" url="http://localhost:8080/FlexWS/resources/weather"
			   useProxy="false" method="GET">
		<s:request xmlns="">
			<name>{t.text}</name>
		</s:request>
	    <s:result>
			tt.text=event.result.toString();
		</s:result>
	</s:HTTPService>

Now the output can be shown as follows: