Accessing Server Side Data using Flex 4.0

March 11, 2011

How to insert data to a database using Flex and JSP?

Adobe Flex Articles

In the last section we have seen how to make a request to the server and retrieve the information. This sesction
we will look at sending some parameters as well with our request.We will modify our previous application by

creating a new mxml file(SendtoJSPDemo.mxml) to capture input from the user and send it to the server.
Modify the ProductRetriver.Java class to perform the insertion operation.
Creating a Upload.jsp which gets the request from our Flex code.

SendtoJSPDemo.mxml.

<?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/mx" color="#196F82" fontWeight="bold">
		<fx:Style source="CopyofFlex4_demos2.css"/>
		<fx:Declarations>
			<s:HTTPService id="myservsd" url="http://hydhtc130252d:8080/JSPDEMONET/upload.jsp" resultFormat="text" fault="faulthand(event)"           
				result="callme(event)" >
				<s:request xmlns="">
					<PID>
						{PID.text}
					</PID>	
					<Name>
						{Name.text}
					</Name>	
					<Disc>
						{Disc.text}
					</Disc>	
				</s:request>
			</s:HTTPService>
		</fx:Declarations>
		<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent; 
			function callme(event:ResultEvent)
			{
 
				var k:String=event.result.toString();
			    msg.text=k.substr(42,k.length);
			}
			function faulthand(faulte:FaultEvent)
			{
				mx.controls.Alert.show(faulte.fault.faultString);	 
			}
		]]>
		</fx:Script> 
 
		<s:Panel x="20" y="110" width="726" height="350" chromeColor="#D5CECE">
			<s:TextInput x="141" y="88" id="PID" width="150"/>
			<s:TextInput x="141" y="158" id="Name"/>
			<s:TextInput x="141" y="219" id="Disc" width="154"/>
			<s:Button x="120" y="268" label="ok" click="myservsd.send()"/>
			<s:Label x="14" y="98" text="Productid :" width="95" color="#101212"/>
			<s:Label x="9" y="158" text="Product Code:" width="124" color="#0B0C0C"/>
			<s:Label x="10" y="219" text="Description :" color="#101212"/>
			<s:Label x="62" y="25" text="Item Detail Form" width="159" color="#090B0B"/>	
			<s:Label x="466" y="66" text="Message:" width="149" color="#0C0D0D"/>
			<s:RichText x="470"  id="msg" y="99" text="Wait....." width="208" height="157" color="#9B2929"/>
        </s:Panel>
		<s:Label x="184" y="68" text="HttpService" width="329" fontSize="35" color="#111111"/>
	</s:Application>

Explanation:

Look at the HTTPService instance that was created ,there is the
request tag which configures the data that can be posted.

<s:request xmlns="">
		<PID>
			{PID.text}
		</PID>	
		<Name>
			{Name.text}
		</Name>	
		<Disc>
			{Disc.text}
		</Disc>	
	</s:request>

Here the code shows that we are sending the parameters PID,Name,Disc so formating as XML.

The Event handler code when a result or fault event is generated by HttpService
The highlighted code below shows the string returned by our JSP code.

function callme(event:ResultEvent)
	{
		var k:String=event.result.toString();
		msg.text=k.substr(42,k.length);
	}
	function faulthand(faulte:FaultEvent)
	{
		mx.controls.Alert.show(faulte.fault.faultString);	 
	}

ProductRetriver.Java

Let us Modify the ProductRetriver.Java to add the Java code to insert data to the database using JPA and sends a boolean value true if insertion was successful otherwise
sends false.

public boolean insertProduct(Product p)
	{
		boolean b =true;
		try
		{
			em.getTransaction().begin();
 			em.persist(p);
			em.getTransaction().commit();
		}
        catch(Exception e)
		{
			em.getTransaction().rollback();
            b=false;
		}
		if(b)
			return true;
		else
			return  false;
	}

Upload.jsp.

<%@page import="a.ProductRetriever,
		a.Product,
		java.util.*"%>
	<?xml version="1.0" encoding="utf-8"?>
	<%
		Product  product = new Product();
		System.out.println("1"+request.getParameter("PID"));
		System.out.println("2"+request.getParameter("Name"));
		product.setProductId(Integer.parseInt(request.getParameter("PID")));
		product.setProductCode(request.getParameter("Name"));
		product.setDescription(request.getParameter("Disc"));
		boolean b=new ProductRetriever().insertProduct(product);
		if(b)
		{
			out.print("done saved the data about:["+product.getProductId()+","+product.getProductCode()+","+product.getDescription()+"]");
		}
	%>

Output:

Conclusion

Flex can not only connect to java but even other server-based applications like ColdFusion, PHP, ASP.NET.
You can retrieve plain text or XML data using HTTP.