Spring Application Picture

Well I managed to get the database to talk to me again so here’s the picture of the app I promised -

Seam app

Flex Front End For Seam & JBoss

This covers the front end of the server side app I talked about in my previous post.

The demo Oracle database I’d linked my Seam app to had a little table with addresses so I decided to display them in a datagrid and use a Google Map display to go to any address selected in the datagrid.

I swiped the Google Map code from some experiments I’d done with that API so it also has a function that will display the lat,long for a position clicked in the map. It doesn’t really serve any purpose here so consider it a little extra demo.

Here’s the code:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="com.google.maps.controls.*" applicationComplete="ro.getResultList()">
<mx:RemoteObject id="ro" destination="seam-userDB"/>
<mx:Script>
<![CDATA[

import com.google.maps.LatLng;
import com.google.maps.Map;
import com.google.maps.MapEvent;
import com.google.maps.MapType;
import com.google.maps.MapMouseEvent;
import com.google.maps.InfoWindowOptions;
import com.google.maps.controls.MapTypeControl;
import com.google.maps.controls.ZoomControl;
import com.google.maps.services.ClientGeocoder;
import com.google.maps.services.GeocodingEvent;
import com.google.maps.overlays.Marker;
import com.google.maps.overlays.MarkerOptions;

import mx.controls.Alert;

private function onMapReady(event:Event):void {
this.map.setCenter(new LatLng(40.736072,-73.992062), 14, MapType.NORMAL_MAP_TYPE);
this.map.addEventListener(MapMouseEvent.CLICK, onMapClick);
this.map.addControl(new ZoomControl());
this.map.addControl(new MapTypeControl());
}

private function onMapClick(event:MapMouseEvent):void {
map.openInfoWindow(event.latLng, new InfoWindowOptions({title: "Location", content: event.latLng.toString()}));
}

private function mapGoto():void {
// Geocoding example
var geocoder:ClientGeocoder = new ClientGeocoder();

geocoder.addEventListener(
GeocodingEvent.GEOCODING_SUCCESS,
function(event:GeocodingEvent):void {
var placemarks:Array = event.response.placemarks;
if (placemarks.length > 0) {
map.setCenter(placemarks[0].point);
var marker:Marker = new Marker(placemarks[0].point);

marker.addEventListener(MapMouseEvent.CLICK, function (event:MapMouseEvent):void {
marker.openInfoWindow(new InfoWindowOptions({content: placemarks[0].address}));
});
map.addOverlay(marker);
}
});
geocoder.addEventListener(
GeocodingEvent.GEOCODING_FAILURE,
function(event:GeocodingEvent):void {
Alert.show("Sorry Couldn't find that place!");
trace(event);
trace(event.status);
});
geocoder.geocode(address.text);
}
]]>
</mx:Script>

<mx:Style>
Alert
{
fontFamily:"Times New Roman";
fontSize:14;
}
</mx:Style>

<mx:Panel title="Matt's Maps" width="100%" height="100%" fontSize="14" fontFamily="Times New Roman" fontWeight="bold">
<maps:Map xmlns:maps="com.google.maps.*" id="map" mapevent_mapready="onMapReady(event)" width="100%" height="100%" key="ADD YOUR GOOGLE MAP KEY HERE"/>
<mx:ControlBar>
<mx:DataGrid id="dg" dataProvider="{ro.getResultList.lastResult}" width="100%" height="100%" itemClick="mapGoto()"/>

<mx:Button label="Get Data" click="ro.getResultList()"/>

</mx:ControlBar>
<mx:Label id="address" text="{dg.selectedItem.custStreetAddress1} {dg.selectedItem.custCity} {dg.selectedItem.custState}"/>
</mx:Panel>

</mx:Application>

The Application node includes the google namespace and instructs the app to call the remote object’s getResultList method.

The next line defines the remote object and links it to the destination we declared on the server.

The onMapReady method is called when the map ready event is fired and sets the map to center in Manhattan NY, adds zoom and map type controls.

The onMapClick method is the little piece I added to show the lat,long of a point clicked in the map.

mapGoto is where all the real work is done. This adds two geocode event listeners. One for success (in which case the map is moved to the location and a marker added, together with a click event listener to pop up the address in a window if it’s clicked). One for failure (in which case an alert is shown).

After those event listeners are registered, the method calls the geocoder with an address. The geocoder is responsible for translating an address into a map location.

That concludes the embedded ActionScript code, the remainder is more presentation.

There’s a small style definition to use Times New Roman as the font at 14 point size and then the screen layout.

All of that should be pretty self-evident with the dataProvider for the data grid specified as the last result of the remote object method call and the address label being constructed from the address elements of the selected line in the data grid.

I was planning to include a screenshot of the running app but unfortunately the demo database I was hooked up to wasn’t under my control and it’s currently offline. If I can get it going, I’ll add a screenshot – until then, you’ll have to take my word for it!

JBoss, Seam and BlazeDS

Back when I still had a working Flex Builder, I wanted to do some further prototyping using BlazeDS so I decided to try and get it working in a JBoss (V 4.2.4)install I had going with a Seam (V 2.0.2) app. If you install the Eclipse plugin for Seam, you get the option to generate a “Seam Entity” for a given database table which builds out a simple CRUD app for you. I wanted to see if I could install BlazeDS and use it to hook the Seam generated ejb up to a Flex front end.

Here’s what I had to do:

Create a flex directory under the WEB_INF directory of the web project Seam created. Copy over the four config.xml files you find under the tomcat\webapps\blazeds\WEB-INF\flex directory of your BlazeDS install. (There are template versions under resources\config).

In the services-config.xml, swich the login-command from server=”Tomcat” to server=”JBoss”.

In the remoting-config.xml. comment out or remove all the tutorial destinations and add one for your Seam bean. mine looks like this:

<destination id="seam-userDB">
  <properties>
    <source>org.domain.seamflex.session.DemoCustomersList</source>
  </properties>
</destination>

(my project name is seamFlex)

In your Seam-ejb project, add the library jars found in resources\lib of the BlazeDS install (except for the commons* ones – you should already have those). This is a bit of a kitchen sink approach and you might be able to trim this down if you care to.

You also need to add some configuration to your web.xml :

<listener>
<listener-class>flex.messaging.HttpFlexSession</listener-class>
</listener>
<!-- MessageBroker Servlet -->
<servlet>
<servlet-name>MessageBrokerServlet</servlet-name>
<servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
<init-param>
<param-name>services.configuration.file</param-name>
<param-value>/WEB-INF/flex/services-config.xml</param-value>
</init-param>
<init-param>
<param-name>flex.write.path</param-name>
<param-value>/WEB-INF/flex</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>MessageBrokerServlet</servlet-name>
<url-pattern>/messagebroker/*</url-pattern>
</servlet-mapping>

when I tried to run with just this, I ran into initialization issues and after hunting around, I came up with the following fix:

<!-- added this filter for flex stuff -->
<filter>
<filter-name>Seam Context Filter</filter-name>
<filter-class>org.jboss.seam.web.ContextFilter</filter-class>
</filter>
<filter-mapping>
<filter-name>Seam Context Filter</filter-name>
<servlet-name>MessageBrokerServlet</servlet-name>
</filter-mapping>
<!-- end of flex stuff -->

Finally, copy your Flex app folder into the WebContent directory and things should all work fine. I’ll write more about the Flex app I developed for this in my next post.

Posted in BlazeDS, Flex. Tags: , , . 9 Comments »
Follow

Get every new post delivered to your Inbox.