Flex | Marcus Schiesser

Splitting CSVs in Actionscript (the Excel way)

Ever needed to split CVSs in Actionscript? Tried using String.split()?

Using a CSV from Excel I had the problem that String.split() does not support to use the delimiter inside of the value fields (Excel puts double quotes around fields that contain the delimiter).

After playing with some regular expressions I made a textSplit() method that let’s you specify such a quoting character (I called it textDelimiter). Here it is (helpers included):

private static function substituteTextDelimiter(value:String, textDelimiter:*):String {
	if(value.charAt(0)==textDelimiter && value.charAt(value.length-1)==textDelimiter) {
		var valueWithOutDelimiters:String = value.substr(1, value.length-2);
		var returnValue:String = valueWithOutDelimiters.replace(textDelimiter+textDelimiter, textDelimiter);
		return returnValue;
	} else {
		return value;
	}
}

private static function removeDelimiter(value:String, delimiter:*):String {
	if(value.charAt(value.length-1)==delimiter)
		return value.substr(0, value.length-1);
	else
		return value;
}		

public static function textSplit(str:String, delimiter:* = ",", textDelimiter:* = '"'):Array {
	var regex:String = '"([^"]|"{2,})*"(;|$)|[^;]*(;|$)';
	regex.replace('"', textDelimiter);
	regex.replace(';', delimiter);
	var values:Array = str.match(new RegExp(regex, "g"));
	for(var i:int=0; i<values.length; i++) {
		values[i] = removeDelimiter(values[i], delimiter);
		values[i] = substituteTextDelimiter(values[i], textDelimiter);
	}
	return values;
}

private static function substituteTextDelimiter(value:String, textDelimiter:*):String {

if(value.charAt(0)==textDelimiter && value.charAt(value.length-1)==textDelimiter) {

var valueWithOutDelimiters:String = value.substr(1, value.length-2);

var returnValue:String = valueWithOutDelimiters.replace(textDelimiter+textDelimiter, textDelimiter);

return returnValue;

} else {

return value;

}

private static function removeDelimiter(value:String, delimiter:*):String {

if(value.charAt(value.length-1)==delimiter)

return value.substr(0, value.length-1);

else

return value;

}

public static function textSplit(str:String, delimiter:* = ",", textDelimiter:* = '"'):Array {

var regex:String = '"([^"]|"{2,})*"(;|$)|[^;]*(;|$)';

regex.replace('"', textDelimiter);

regex.replace(';', delimiter);

var values:Array = str.match(new RegExp(regex, "g"));

for(var i:int=0; i<values.length; i++) {

values[i] = removeDelimiter(values[i], delimiter);

values[i] = substituteTextDelimiter(values[i], textDelimiter);

}

return values;

}

And here you can find the test case I used:

var a:Array = textSplit('a;b;"c";"""";"a;b"""', ";");
// a has the value ['a', 'b', 'c', '"', 'a;b"']

1 2	var a:Array = textSplit('a;b;"c";"""";"a;b"""', ";"); // a has the value ['a', 'b', 'c', '"', 'a;b"']

Multi-level markers using Google Maps for Flash

You are using the MarkerManager for Google Maps for Flash to set different amounts of markers depending on the selected zoom level? You don’t want to specify the zoom level for each marker?
Setting the zoom level makes sense if you have aggregated markers that relate to a couple of markers in a higher zoom level. But it does not if you have a huge list of unordered markers with no one of them being more special than the other.
For the later case I was missing a method that let me just add a marker and the MarkerManager would take care of at which zoom level to display the marker (so that at higher zoom levels more markers are displayed than in lower ones).
The solution I thought of is to take care of that there are not too many markers in one grid cell, so I wrote a calcMinZoomLevel method that just returns the minimum zoom level so that adding the marker to that level it would be the only marker in the grid cell.

Here it is:

private function calcMinZoomLevel(marker:Marker):Number {
  var mPoint:LatLng = marker.getLatLng();
  for(var zoom:Number = 1; zoom<this.maxZoom_; zoom++) {
    var gridPoint:Point = this.getTilePoint_(mPoint, zoom, new Point(0, 0));
    var cell:Array = this.getGridCellNoCreate_(gridPoint.x, gridPoint.y, zoom);
    if(cell==null)
      return zoom;
  }
  return maxZoom_;
}

private function calcMinZoomLevel(marker:Marker):Number {

var mPoint:LatLng = marker.getLatLng();

for(var zoom:Number = 1; zoom<this.maxZoom_; zoom++) {

var gridPoint:Point = this.getTilePoint_(mPoint, zoom, new Point(0, 0));

var cell:Array = this.getGridCellNoCreate_(gridPoint.x, gridPoint.y, zoom);

if(cell==null)

return zoom;

}

return maxZoom_;

}

And here’s a nice example including the full source under the BSD license:

Start Flash

Try changing the zoom level and watch markers be added and removed.

Google Maps API for Flex

As I pointed out before, it’s unfortunately not possible to use Flex components as info windows for Google Maps.
Another issue is that the map is not available as a Flex component itself, therefore it’s a bit complicated to use it in Flex.
So I thought to address these issues in a little Google Maps API for Flex that you can download here under BSD license.
With openFlexInfoWindows I also added a method that allows you to use multiple Flex components as info window at once – nicely seperated in tabs.
Find an example below:

Start Flash!
Source Code

Adding custom info windows to Google Maps in Flex

I just tried to create a custom info window for a Google Map using the Google Maps API For Flash. Unfortunately it does not seem to work as expected by setting the customContent property in an object of type InfoWindowOptions. Therefore I wrote this little workaround that creates a popup window:

private function createInfoWindow(map:Map, marker:Marker, infoWindow:Class):IFlexDisplayObject {
  var popup:IFlexDisplayObject = PopUpManager.createPopUp(map, infoWindow);
  var globalPos:Point = map.localToGlobal(map.fromLatLngToViewport(marker.getLatLng()));
  popup.move(globalPos.x - popup.width/2, globalPos.y - popup.height - marker.getDisplayObject().height);
  return popup;
}

private function createInfoWindow(map:Map, marker:Marker, infoWindow:Class):IFlexDisplayObject {

var popup:IFlexDisplayObject = PopUpManager.createPopUp(map, infoWindow);

var globalPos:Point = map.localToGlobal(map.fromLatLngToViewport(marker.getLatLng()));

popup.move(globalPos.x - popup.width/2, globalPos.y - popup.height - marker.getDisplayObject().height);

return popup;

}

3D-Album component for Adobe Flex

You know PicLens? If not I highly recommend taking a look at that marvelous picture search tool.

Especially interesting is the 3D view of the pictures – you can easily navigate through a whole bunch of pictures by using your mouse.

I thought it would be nice to integrate such a picture view in your own Flex application, so I played around a bit with the 3D album tutorial from Bartek Drozdz and after a couple of days finished a nice little component that could be easily embedded in your own applications.

To show you how easy it is to integrate the component, just watch the examples below. Also find here the complete source-code with examples – licensed under the friendly BSD license.

Update: You want to participate in the development of the component? There’s a Google code page for this 3D album component available now.

Start Fruit Example

Want some fruits? – Source Code

Start Flickr Search Example

Flickr search – Source Code