Archive for the ‘Flex’ Category

How to use JMeter to load test Flex applications

May 6, 2008

JMeter, AMF setting for HTTP SamplerFlex applications use a binary protocol called AMF. The easiest way to use JMeter with a Flex application is to use Charles (the indispensable 100% pure Java cross platform http debugging proxy). Here are the steps:

  1. Start Charles and visit the site whose Flex application you wish to load test. In Charles, you will see the entire HTTP traffic.
  2. Click on the Charles’s Sequence panel to see the ordered list of HTTP requests.
  3. Right click (on Mac control click) and save the HTTP request corresponding to a Flex AMF call to a file.
  4. On JMeter create a new HTTP sampler for this request. Set the Send a File with Request to the file that you saved on the step before. Set the MIME Type to application/x-amp (click here to see the JMeter screen)

That is really it. Just save the request using Charles, and then reference it in the JMeter HTTP Sampler. Couldn’t get much easier than this. The solution gets a bit more complicated if you need to read the requests and extract data for use in subsequent requests. To do this, you’ll have to write some code. I’ll add an entry on how to do this soon.

Where is the Flex’s fl.controls.* package?

December 22, 2007

I downloaded the Flex Builder Beta 3 today and decided to import one of the samples. But I noticed that the fl.controls.* package is not part of the distribution. It appears that you need to also have a copy of Adobe Flash CS3 to get this package. I’ve created a screen-cast that shows you how to configure your Flex Builder project to include the Flash packages. For some reason the Accordion.swc class fails to be loaded. So you may have to include individual Flash classes to avoid seeing the Accordion error in Eclipse. (During the screen-cast, I forgot that the audio was also being recorded. I turned it off sometimes in the middle, you get to enjoy Peace Train for a few seconds).

Full screen route maps with elevations

December 1, 2007

Hacking Google MapsThe route player is updated to allow full screen maps (with auto resize). In addition, it now has both the elevation/distance & elevation/time charts. To calculate the distance I used the following ActionScript method to find the distance between two geo points (see Hacking Google Maps for details):



private function distance(point1: Object,
  point2 : Object) : Number {
 var lat1 : Number;
 var lat2 : Number;
 var lon1 : Number;
 var lon2 : Number;
 if (point1 == null) return 0;

 // convert degrees to radians

 lat1 = point1.lat * Math.PI / 180.0;
 lat2 = point2.lat * Math.PI / 180.0;

 lon1 = point1.lon * Math.PI / 180.0;
 lon2 = point2.lon * Math.PI / 180.0;	

 // radius of earth in Kilometers converted to miles

 var radius : Number = 6378.1 * 0.621371192;
 var latDist : Number = lat2 - lat1;
 var lonDist : Number = lon2 - lon1;
 var sinLatDist : Number = Math.sin(latDist/2.0);
 var sinLonDist : Number = Math.sin(lonDist / 2.0);
 var a : Number = sinLatDist * sinLatDist +
    Math.cos(lat1) * Math.cos(lat2) *
    sinLonDist * sinLonDist;
 var c : Number = 2.0 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
 var distance : Number = radius * c;
 return distance;
}

Kenndey / Shannon / Hicks Roads Trail, Los Gatos, Sheldon Road Trail, Pebble Beach, 17 Miles Drive Trail, Los Gatos, San Jose Trail, Stevens Creek Reservoir Trail, Kennedy / Hicks Trail, St. Joseph Hills, Los Gatos Trail, Lake Lexington Trail

How to add a Flex control to Google Maps

November 27, 2007

Overlay Flex ControlYou can add a Flex control to a Google Map by taking advantage of DHTML DIVs and z-order tags. Here I’ve defined a Flex control to display the elevation chart associated with a route. In Flex, I specify the opacity of to be 0.5, this means that the chart will be partially transparent. The z-order of the Flex div ought to be higher than the z-order of the Google Map DIV.

Here are a few example of the Flex elevation chart control in action: Sheldon Road Trail, Kennedy/Shannon Trail, Pebble Beach bike route, & Los Gatos to San Jose bike route.

Adding the power of Flex to Google Map gives you to option of selecting the best tools for designing a rich user experience.

How to animate a Flex Slider & update Google maps

November 24, 2007

Flex Slider AnimationFlex offers a number of different animation techniques. For my Route Player application, I wanted to offer an animation speed option so that when the user clicks on the Start button, Flex Slider Animation Control the animation starts: the Flex horizontal slider moves to the right, the time-line on the elevation chart moves accordingly, and the Google map gets updated. To see what I mean, click on the thumbnail, and when the Flex application starts, click on the Start button. To make this all work, first you need to define a Flex Sequence control, and include an AnimateProperty that specifies the duration of the animation.


<mx:Sequence id="myMove" target="{slider}">
    <mx:AnimateProperty property="value"
      fromValue="{timeMin}"
      toValue="{timeMax}"
      duration="{selectedItem.data}" />
</mx:Sequence>

Next, you’ll need to extend the HSlider control and override the set value method. See the control Note19HSlider. This extension of HSlider, includes a callback function that is set to the method sliderMove, which gets called each time the value of the slider has been updated, this in turn updated the chart and the Google Map. The code for all of this is here.

(more…)

How to embed Google Maps in Flex

November 22, 2007

Embed Google Map in FlexCreate your Flex application as you would normally do, design the UI and set aside a rectangle in which you wish to display Google Maps. In the HTML wrapper for the Flex application, add a DIV for the Google map, and add JavaScript functions to show or hide this DIV. These functions will be called from Flex when you need to show or hide the map. In this example, I’ve added the Google map to a Flex Accordion control. The map is shown when you click on the tab “Google Map” and is hidden when you click on the other tabs. The trick to get this to work is to use the Flash wmode="transparent" option when the Flash object is embedded in the HTML page. The code for this example is here.

Click here to see this Flex/HTML integration in action. See also this blog entry. 

Here is the reverse idea: embedding Flash on top of Google Maps. This is a useful way of enhancing Google maps

Bike Trails in the Route Player

November 20, 2007

I updated the Route Player to take the URL to the GPX file as a parameter to the player and you’ll get the elevation and the map. Here is the bike route for the Kennedy/Shannon Road Trail. Here is the Los Gatos to San Jose trail. This player is still quite raw, the performance for relatively complicated route is spotty (e.g., the Pacific Grove / Pebble Beach route)

You’ll need to edit the GPX namespace specification before you try to use the player.

Lake Lexington Bike Trail

November 19, 2007

Lake Lexington Bike TrailThis morning, Allen and I went for bike ride around Lexington Lake. The ride started and ended at down town Los Gatos. The ride was 11.72 miles and took an hour and a half. The ride is relatively easy and quite relaxing. There are a few climbs that provide a good workout.

The Route Player that I’m writing is more functional than before. When you click on the thumbnail, you’ll see the elevation chart plus a google map displaying the route. As you hover over the elevation chart, a maker is shown on the route. The chart is in Flex and the map in DHTML. Both the Flex and the DHTML parts read the GPX file and convert the XML data into elevation chart and map route. (The slider is still not working).

Processing GPX data with Flex

November 19, 2007

GPX files that you capture from your GPS device using GPSBabel are in XML and start with the following tags:


<gpx    
  version="1.0"    
  creator="GPSBabel - http://www.gpsbabel.org"
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns="http://www.topografix.com/GPX/1/0"
  xsi:schemaLocation="http://www.topografix.com/GPX/1/0http://www.topografix.com/GPX/1/0/gpx.xsd"
  >
  ...

You wont be able to read these GPX files from Flex (2.01) without modifying the namespace definition. Here is the problem that you will run into: when you try to get all of the trkpt elements, using a construct such as gpx..trkpt (or any other method of traversing the XML, e.g., gpx.descendants("trkpt")) the ActionScript program will silently fail. The only to way to get around this is to remove the XML name space declaration

xmlns="http://www.topografix.com/GPX/1/0"

from the start of your XML file. This must be a bug in ActionScript. The same GPX file works fine when you read it from DHTML using Google AJAX mapping API.

Calling Flex from JavaScript

November 18, 2007

To call Flex from JavaScript, you need to register a Flex method using the ExternalInterface class to make this method callable from JavaScript. Here I wanted to get hold of a JavaScript variable that is defined in the HTML wrapper (in my case, this variable defined the URL of a GPX file that I wanted to process in Flex).


<mx:Application
  xmlns:mx="http://www.adobe.com/2006/mxml"
  layout="absolute"
  creationComplete="initApp();">
  <mx:Script>
	private var gpxUrl : String;
	public function setGpxDataSource(value:String):void {
 	    gpxUrl = value;
 	    loadData();
	}

        // Make the method setGpxDataSource callable from JavaScript.
	public function initApp() : void {
	    ExternalInterface.addCallback("setDataSource", setGpxDataSource);
	    var u:URLRequest = new URLRequest("javascript:getGpxUrl()");
	    navigateToURL(u,"_self");
	}
  </mx:Script>

This means that in the JavaScript portion of your application you wont be able to call the Flex method until the Flex component has been completely rendered. To get around this, after the Flex component has been completed, call a JavaScript method (using the navigateToURL method) that in turn will call Flex.

In the HTML wrapper, you need to define the JavaScript function that will call Flex. The object that you can use to invoke Flex is the object that is created via the embed/object tag. The name/id of this object is what you use to call the Flex method.


<html>
...
   <object
      classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
      id="flexRuutr" ...
     <embed name="flexRuutr" .../>
   />
...
<script>
    var gpxUrl = "http://javey.net/bike/gpx/18-nov-2007.gpx";
    function getGpxUrl() {
	flexRuutr.setDataSource(gpxUrl);
    }

</script>


Follow

Get every new post delivered to your Inbox.