XML communication between Tapestry and Flex

Posted on August 11th, 2010 by Iti Agarwal No Comments

How to get your swf talking to your tapestry application using xml:

In this writeup, we will look at how we can send xml data using tapestry pages and use this in a swf object.

We will consider the following are already in place:

1. A tapestry application that needs to send the xml

2. A swf object which needs to use the xml.

There are 2 things that you will need now:

1. The tapestry page which will send xml data

To send xml from tapestry page we need the following:

1. A usual Tapestry style Java class with a special modification:

</pre>
</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">@ContentType("application/xml")// this will define that this class in xml type</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">public class ICanSendXML {</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">@Property</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private String property1;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">@Property</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private String property2;</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><p>

2. The tapestry style ICanSendXML.tml file which looks something like this:

</pre>
</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><?xml version="1.0"?></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">
<properties></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">
<property1>${property1}</property1></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">
<property2>${property2}</property2></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></properties></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><p>

2. The flex that calls this page to read the xml.

This can be achieved in the following manner:

1. Declare an Http Service which calls our tapestry page:

</pre>
</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><mx:HTTPService</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">id="xmlFromTapestry"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">url="http://localhost:8080/myTapestryAppThatSendsXML/ICanSendXML"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">resultFormat="e4x"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">result="loadPropertiesResultHandler(event);"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">fault="loadPropertiesFaultHandler(event);"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">/></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><p>

2. call this httpService on some event such as creationComplete

</pre>
</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="components.*" layout="absolute"</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">creationComplete="loadProperties()"></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><mx:Script></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private function loadProperties():void{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">xmlFromTapestry.send();</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"></mx:Script></div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><p>

3. Handle the success and failure events:

</pre>
</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private function loadPropertiesResultHandler(event:ResultEvent):void{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">// now do something with the xml</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">var properties:XML = XML(event.result);</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">.....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">.....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">.....</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">private function loadGroupFaultHandler(event:FaultEvent):void</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">{</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">Alert.show(event.fault.message, "Could not load properties.");</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;">}</div>
<div id="_mcePaste" style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;"><p>

Thats it.

Many a times we may need to use a flex component in our Tapestry based application. In such a scenario, we will need a neat way to send data from the Tapestry page to the embedded Flex object. For example, we may need too use Tapestry's localization capabilities in the Flex application. A very simple way of achieving it can be using XML.

A tapestry page can be used to send xml data which can then be read in the flex application. This can greatly simplify things in comparison to web-services and also make it much cleaner than using external interfaces. In this blog, we will look at how we can harness this.

We will consider the following are already in place:

1. A Tapestry application that needs to send the xml

2. A Flex application that needs to use the xml.

There are 2 things that you will need now:

1. A Tapestry page which will send xml data

To send xml from tapestry page we need the following:

1. A usual Tapestry style Java class with a special modification:

@ContentType("application/xml")// this will define that this class in xml type
public class ICanSendXML {
  @Property
  private String property1;
  @Property
  private String property2;
  ....
  ....
  ....
  ....
}

2. The tapestry style ICanSendXML.tml file which looks something like this:

<?xml version="1.0"?>
 <properties>
  <property1>${property1}</property1>
  <property2>${property2}</property2>
  <localizedString1>${message:aLocalizedStringMessage}</localizedString1>
  ....
  ....
  ....
 </properties>

2. A Flex application that calls this page to read the xml.

This can be achieved in the following manner:

1. Declare an Http Service which calls our tapestry page:

<mx:HTTPService id="xmlFromTapestry" url="http://localhost:8080/myTapestryAppThatSendsXML/ICanSendXML" resultFormat="e4x" result="loadPropertiesResultHandler(event);" fault="loadPropertiesFaultHandler(event);" />

2. call this httpService on some event such as creationComplete

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:components="components.*" layout="absolute" creationComplete="loadProperties()">
<mx:Script>
  private function loadProperties():void{
    xmlFromTapestry.send();
  }
</mx:Script>

3. Handle the success and failure events:

private function loadPropertiesResultHandler(event:ResultEvent):void{
  // now do something with the xml
  var properties:XML = XML(event.result);
  .....
  .....
  .....
}
private function loadPropertiesFaultHandler(event:FaultEvent):void
{
  Alert.show(event.fault.message, "Could not load properties.");
}

Thats it.

Filed under: Flex, tapestry, Uncategorized

« Processing Custom Annotations Content and Metadata Extraction with Apache Tika »

Swarm of XeBees

XML communication between Tapestry and Flex

How to get your swf talking to your tapestry application using xml:

1. A Tapestry page which will send xml data

1. A usual Tapestry style Java class with a special modification:

2. The tapestry style ICanSendXML.tml file which looks something like this:

2. A Flex application that calls this page to read the xml.

1. Declare an Http Service which calls our tapestry page:

2. call this httpService on some event such as creationComplete

3. Handle the success and failure events:

Leave a Reply

Swarm of XeBees

XML communication between Tapestry and Flex

How to get your swf talking to your tapestry application using xml:

1. A Tapestry page which will send xml data

1. A usual Tapestry style Java class with a special modification:

2. The tapestry style ICanSendXML.tml file which looks something like this:

2. A Flex application that calls this page to read the xml.

1. Declare an Http Service which calls our tapestry page:

2. call this httpService on some event such as creationComplete

3. Handle the success and failure events:

Leave a Reply

Tags