RSS

Accessing Server Side Data using Flex 4.0

March 11, 2011

Adobe Flex

«»

Introduction

Flex provides 3 classes to communicate with servers namely HttpService,WebService and RemoteObject HTTPService component of Flex 4 can be used with any kind of server-side technology, including PHP pages, ColdFusion Pages, JavaServer Pages (JSPs), Java servlets. This article aims at discussing the httpservice component with JSP for the following task.

  • To send a request to retrive data from Database
  • To send a request with parameters to insert data into the database.

To send a request to retrive data from Database

First let us look at the HttpService tag

1
2
3
4
5
6
7
8

<S:HTTPService
		id="No default."
		method="GET|POST|HEAD|OPTIONS|PUT|TRACE|DELETE"
		resultFormat="object|array|xml|e4x|flashvars|text"
		url="No default."
		fault="No default."
		result="No default."
	>

Explanation

  • id-refers to the name of the HttpService instance.
  • Method-Mentions the way how the request is send to the server.
  • resultFormat-configured to specify the format the way the result is expected
  • URL-The URL to which the request is send
  • Fault-A event handling mechanism which makes a call to the handlercode if there is a exception.
  • result-A event handling mechanism which makes a call to the handlercode when the result is recieved from the server.

Example:

The Example shows a Flex application which invokes a JSP page that retrives data from database. The data is formated by JSP code as XML and sent to the flex application and displayed on
a dataprovider.

Files in the project

  1. FlexJSPdemo.mxml:The Flex application that invokes a JSP page
  2. Itemlist.jsp :The JSP page that retrieves data from database using JPA and formats the result in XML format
  3. Product.java :The Entity class that is mapped to Product Table in the database using JPA.
  4. ProductRetriever.java:The Java class that is contacted by JSP to interact with database using JPA.

FlexJSPDemo.mxml 

1
2
3
4
5
6
7
8
9
10
11
12

<?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="myserv" url="http://localhost:8080/JSPDEMONET/ItemList.jsp"/>
		</fx:Declarations>
		<s:Panel x="26" y="97" width="705" height="350" title="Using the HttpService">
			<mx:DataGrid dataProvider="{myserv.lastResult.Data.Item}" width="508" height="158" enabled="true" color="#3B8FA1" x="81" y="40"/>
			<s:Button label="Fetch Data" click="myserv.send()" x="248" y="235"/>
		</s:Panel>

ItemList.jsp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<%@page import="a.ProductRetriever,
		a.Product,
		java.util.*"%>
	<?xml version="1.0" encoding="utf-8"?>
	<Data>
		<%
		ProductRetriever srv = new ProductRetriever();
		List list = null;
		list = srv.getData();
		for (int i=0; i<list.size(); i++)
		{
			Product  product = (Product)list.get(i);
			%>
			<Item itemid='<%= product.getProductId()%>'>
			<name><%= product.getProductCode() %></name>
			<description><%= product.getDescription() %></description>
			</Item>
		<%}% > </Data>

Product.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

/*
	* To change this template, choose Tools | Templates
	* and open the template in the editor.
	*/
 
	package a;
 
	import java.io.Serializable;
	import javax.persistence.Basic;
	import javax.persistence.Column;
	import javax.persistence.Entity;
	import javax.persistence.Id;
	import javax.persistence.NamedQueries;
	import javax.persistence.NamedQuery;
	import javax.persistence.Table;
 
	/**
	*
	* @author RekhaKG_Nair
	*/
	@Entity
	@Table(name = "PRODUCT")
	@NamedQueries({@NamedQuery(name = "Product.findAll", query = "SELECT p FROM Product p"), @NamedQuery(name = "Product.findByProductId", query = "SELECT p FROM		Product p WHERE p.productId = :productId"), @NamedQuery(name = "Product.findByProductCode", query = "SELECT p FROM Product p WHERE p.productCode =			:productCode"), @NamedQuery(name = "Product.findByDescription", query = "SELECT p FROM Product p WHERE p.description = :description")})
		public class Product implements Serializable {
			private static final long serialVersionUID = 1L;
			@Id
			@Basic(optional = false)
			@Column(name = "PRODUCT_ID")
			private Integer productId;
			@Column(name = "PRODUCT_CODE")
			private String productCode;
			@Column(name = "DESCRIPTION")
			private String description;
 
			public Product() {
			}
 
			public Product(Integer productId) {
				this.productId = productId;
			}
 
			public Integer getProductId() {
				return productId;
			}
 
			public void setProductId(Integer productId) {
				this.productId = productId;
			}
			public String getProductCode() {
				return productCode;
			}
			public void setProductCode(String productCode) {
				this.productCode = productCode;
			}
 
			public String getDescription() {
				return description;
			}
 
			public void setDescription(String description) {
				this.description = description;
			}
 
			@Override
			public int hashCode() {
				int hash = 0;
				hash += (productId != null ? productId.hashCode() : 0);
				return hash;
			}
			@Override
			public boolean equals(Object object) {
				// TODO: Warning - this method won't work in the case the id fields are not set
				if (!(object instanceof Product)) {
					return false;
				}
				Product other = (Product) object;
				if ((this.productId == null && other.productId != null) || (this.productId != null && !this.productId.equals(other.productId))) {
					return false;
				}
				return true;
			}
			@Override
			public String toString() {
				return "a.Product[productId=" + productId + "]";
			}
		}

ProductRetriever.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

package a;
 
	import java.util.List;
	import javax.persistence.EntityManager;
	import javax.persistence.EntityManagerFactory;
	import javax.persistence.Persistence;
	import javax.persistence.Query;
 
	/*
	* To change this template, choose Tools | Templates
	* and open the template in the editor.
	*/
 
	/**
	*
	* @author RekhaKG_Nair
	*/
	public class ProductRetriever {
		EntityManagerFactory emf;
		EntityManager em;
		public  ProductRetriever()
		{
			emf   = Persistence.createEntityManagerFactory("JSPDEMOPU");
			em=emf.createEntityManager();
		}
		public List getData()
		{
			Query q=em.createNamedQuery("Product.findAll");
			return q.getResultList();
		}
	}

Persistence.xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<?xml version="1.0" encoding="UTF-8"?>
	<persistence version="1.0" xmlns="http://java.sun.com/xml/ns/persistence" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/persistence http://java.sun.com/xml/ns/persistence/persistence_1_0.xsd">
		<persistence-unit name="JSPDEMOPU" transaction-type="RESOURCE_LOCAL">
			<provider>org.eclipse.persistence.jpa.PersistenceProvider</provider>
			<class>a.Product</class>
			<exclude-unlisted-classes>true</exclude-unlisted-classes>
			<properties>
				<property name="eclipselink.jdbc.password" value="rekha"/>
				<property name="eclipselink.jdbc.user" value="rekha"/>
				<property name="eclipselink.jdbc.driver" value="org.apache.derby.jdbc.ClientDriver"/>
				<property name="eclipselink.jdbc.url" value="jdbc:derby://localhost:1527/JPA"/>
			</properties>
		</persistence-unit>
	</persistence>

Output:

email

«»

Comments

comments

Related posts:

  1. Invoking SOAP and RESTful Web Services using Flex 4.0
  2. New Features in Flex 4.0
  3. Flex 3.0 Applications with BlazeDS in Eclipse
  4. Accessing Web Services from JSF applications
  5. Accessing objects in JNDI using Spring

About krishnas

View all posts by krishnas →