Sunday, July 20, 2008

Extracting content from HTML based on JSP server response in Adobe Flex

Using HTTPService component of Adobe Flex we can send a request to a page on the server. Most of pages on the server are developed using either server side scripting languages or static HTML pages that return content in form of HTML to the client. Here we show how to extract the content from HTML response returned by the server and also how to send parameters to the server scripts.

After an RPC component calls a service, the data that the service returns is placed in a lastResult object. By default, the resultFormat property value of HTTPService components and WebService component operations is object, and the data that is returned is represented as a simple tree of ActionScript objects. Flex interprets the XML data that a web service or HTTP service returns to appropriately represent base types, such as String, Number, Boolean, and Date. To work with strongly typed objects, you must populate those objects using the object tree that Flex creates. WebService and HTTPService components both return anonymous Objects and Arrays that are complex types. If makeObjectsBindable is true, which it is by default, Objects are wrapped in mx.utils.ObjectProxy instances and Arrays are wrapped in mx.collections.ArrayCollection instances.

I created a JSP and a Flex application, which will invoke the JSP on the server side and extract the content from the response in HTML format. The JSP returns HTML tags as response. We can modify the type of the lastResult object returned by the HTTPService object by modifying the resultFormat property of the HTTPService component.

In this example we will pass a parameter to the JSP and convert the response from the JSP to Object of the type XML by setting the resultFormat property of the HTTPService object to e4x and then extract the content from the <Body> element.

Create a JSP page

This JSP page takes the name as a parameter and responds a message with the input parameter.

First.jsp

<html>

<head><title>First Page</title></head>

<body>

<%

out.println(”Hi ” + request.getParameter(”name”));

%>

This is from the JSP.

</body>

</html>

Create Flex application

This application sends an HTTP service request to the JSP page. Once the JSP page responds, the response is converted into Object of the type XML by setting the resultFormat property of the HTTPService component to e4x. We parse the result object and retrieve the content in the <BODY> tag and display it. You can also observe that we are passing a parameter to the JSP in the send() method of the HTTPService component.

RPS.mxml

<?xml version=”1.0″ encoding=”utf-8″?>

<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”>

<mx:Script>

<![CDATA[

import mx.rpc.events.ResultEvent;

import mx.controls.Alert;

private function handleHttpService(event:ResultEvent):void

{

Alert.show(event.result.toString(), "Complete Response");

Alert.show(event.result.body.toString(), "Content in Body element");

}

]]>

</mx:Script>

<mx:HTTPService id=”httpObj” url=”http://localhost:8400/sujit/first.jsp”

resultFormat=”e4x”

showBusyCursor=”true”

result=”handleHttpService(event)”

/>

<mx:Button id=”httpService” label=”Http Service” click=”httpObj.send({name: ‘Sujit’});” />

</mx:Application>

Snapshot of the application displaying the extracted content from server response

HTMLResponseExtracted

0 comments: