One more thing…

One thing I omitted from my previous post is I developed this app when I still had my Flex Builder trial. This is important because when you’re using remote objects in Flex Builder, you specify the server you’re going to connect to as part of your project setup and this gets compiled into the swf that’s created.

Obviously that’s not going to help you if you’re not using Flex Builder (and having your server pre-defined at compile time is a bit of an issue if you’re a “real” developer working with dev, test & prod environments).

I was thinking about digging through the documentation to figure something out but Christophe Coenraets came to the rescue with a post on externalizing your service configuration that has it covered.

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!

Getting Started with Flex

Flex Builder, the official IDE can be downloaded from here. It’s an Eclipse based tool you can either get as a plugin if you’re already using Eclipse or as a custom Eclipse build.

The downside is that you only get a sixty day trial for free unless you qualify for the education license terms. Adobe has also recently allowed unemployed developers to use Flex Builder for free with similar limitations to the educational license. You can find out more about that program here

You don’t have to use Flex Builder though. You can download the SDK from here and use your favourite editor and compile from the command line. If you decide to go that way, I suggest you check out the Google Maps Flex API docs for a useful tutorial.

An alternative free IDE (for Windows anyway – it’s built on a Visual Studio shell) is FlashDevelop. I’ve started using this since my trial expired and so far I like it. I’ll write another post on how to setup and use it.

For books, you can download a pdf of “Getting Started with Flex 3” here but if you want to get more involved, you should get a copy of Adobe Flex 3 Training from the Source

A good place to start for websites is the Adobe Flex Developer site.