Thanks, Mister!

Flex Chart DataTip Renderer

thanksmister — Wed, 18 Jan 2012 19:06:25 +0000

Some code to create custom DataTip renderers for Flex charts using Spark components and containers. Below is a screen shot of the custom DataTip and the source code to create it.

Main.mxml



	
	
	
	
		
	
	
	
		
	
		
			
				
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
					
				
			
		

		
		
	
	
	
		
		
			
			
			
				
			
			
			
			
				
			
			
			
			
				
			
			
			
			
				
			
			
			
			
				
			
			
			
			
				
					{lineStroke}
					{lineStroke}

DataTipSkin.mxml

-Mister

Flex Spark Rounded Image and Image Button Controls

thanksmister — Tue, 17 Jan 2012 19:28:26 +0000

I had the pleasure recently of collaborating with Ken Rogers (@pixels4nickels) on a couple of components. I had the need, and probably everyone has at one time or another, of having a image with rounded corners. My other desire was to have an image behave like a button.

So we came up with two components, one is called RoundedImage, this does pretty much what it advertises. It extends the Flex Spark Image control to set a corner radius of the loaded image. The other component is called ImageButton. This extends the Spark Button control and loads an image to create a button with rounded corners, pretty straight forward.

What makes these components nice is that they maintain the aspect ratio of the loaded image by simply setting either a height or width. So if you have a large image and want to scale it proportionally, you just set the width, the height will be scaled maintaining the aspect ratio. If you set both height and width values the loaded image will stretch to fit the dimensions.

Here is a screen shot of the results when setting with, height, or both:

You can take a look at the code for the Rounded Image and the Image Button at the following Gist links:

Michael Ritchie Gist: https://gist.github.com/1627989
Ken Rogers Gist: https://gist.github.com/1625442
Flex FXP File: http://thanksmr.com/examples/imagebuttons/ImageButtons.fxp

Big thanks to Ken for his help working out all the kinks and keeping it simple!

-Mister

Determining local timezone in ActionScript (AIR, Flex, AS3)

thanksmister — Thu, 06 Oct 2011 22:35:49 +0000

I made a little utility class that determines the local timezone (PST, EST, MST, CST, etc.). The guts of the utility are three methods, one for determining if the local machine is currently observing daylight savings time, another determines the GMT time from the the local machines current Date, and one for looking up the timezone abbreviation by GMT time. This is sort of a conglomerate of code that I could find on different posts and leveraged them to achieve my own goals.

Determining if the daylight savings time is currently being observed.

**
* Determines if local computer is observing daylight savings time for US and London.
* */
public static function isObservingDTS():Boolean
{
     var winter:Date = new Date(2011, 01, 01); // after daylight savings time ends
     var summer:Date = new Date(2011, 07, 01); // during daylight savings time
     var now:Date = new Date();

     var winterOffset:Number = winter.getTimezoneOffset();
     var summerOffset:Number = summer.getTimezoneOffset();
     var nowOffset:Number = now.getTimezoneOffset();

     if((nowOffset == summerOffset) && (nowOffset != winterOffset)) {
          return true;
     } else {
          return false;
     }
}

Creating the GMT from a Date object and adjusting for daylight savings time.

/**
* Method to build GMT from date and timezone offset and accounting for daylight savings.
*
* Originally code befor modifications:
* http://flexoop.com/2008/12/flex-date-utils-date-and-time-format-part-i/
* */
private static function buildTimeZoneDesignation( date:Date, dts:Boolean ):String
{
     if ( !date ) {
          return "";
     }

     var timeZoneAsString:String = "GMT";
     var timeZoneOffset:Number;

     // timezoneoffset is the number that needs to be added to the local time to get to GMT, so
     // a positive number would actually be GMT -X hours
     if ( date.getTimezoneOffset() / 60 > 0 && date.getTimezoneOffset() / 60 < 10 ) {
          timeZoneOffset = (dts)? ( date.getTimezoneOffset() / 60 ):( date.getTimezoneOffset() / 60 - 1 );
          timeZoneAsString += "-0" + timeZoneOffset.toString();
     } else if ( date.getTimezoneOffset() < 0 && date.timezoneOffset / 60 > -10 ) {
          timeZoneOffset = (dts)? ( date.getTimezoneOffset() / 60 ):( date.getTimezoneOffset() / 60 + 1 );
          timeZoneAsString += "+0" + ( -1 * timeZoneOffset ).toString();
     } else {
          timeZoneAsString += "+00";
     }

     // add zeros to match standard format
     timeZoneAsString += "00";
     return timeZoneAsString;
}

Finally, parsing the abbreviation from a simple lookup Array object.

/**
* List of timezone abbreviations and matching GMT times.
* Modified form original code at:
* http://blog.flexexamples.com/2009/07/27/parsing-dates-with-timezones-in-flex/
* */
private static var timeZoneAbbreviations:Array = [
     /* Hawaii-Aleutian Standard/Daylight Time */
     {abbr:"HAST", zone:"GMT-1000"},
     {abbr:"HADT", zone:"GMT-0900"},
     /* Alaska Standard/Daylight Time */
     {abbr:"AKST", zone:"GMT-0900"},
     {abbr:"ASDT", zone:"GMT-0800"},
     /* Pacific Standard/Daylight Time */
     {abbr:"PST", zone:"GMT-0800"},
     {abbr:"PDT", zone:"GMT-0700"},
     /* Mountain Standard/Daylight Time */
     {abbr:"MST", zone:"GMT-0700"},
     {abbr:"MDT", zone:"GMT-0600"},
     /* Central Standard/Daylight Time */
     {abbr:"CST", zone:"GMT-0600"},
     {abbr:"CDT", zone:"GMT-0500"},
     /* Eastern Standard/Daylight Time */
     {abbr:"EST", zone:"GMT-0500"},
     {abbr:"EDT", zone:"GMT-0400"},
     /* Atlantic Standard/Daylight Time */
     {abbr:"AST", zone:"GMT-0400"},
     {abbr:"ADT", zone:"GMT-0300"},
     /* Newfoundland Standard/Daylight Time */
     {abbr:"NST", zone:"GMT-0330"},
     {abbr:"NDT", zone:"GMT-0230"},
     /* London Standard/Daylight Time */
     {abbr:"BST", zone:"GMT+0100"},
     {abbr:"GMT", zone:"GMT+0000"}
];

/**
* Goes through the timze zone abbreviations looking for matching GMT time.
* */
private static function parseTimeZoneFromGMT(gmt:String):String
{
     for each (var obj:Object in timeZoneAbbreviations) {
          if(obj.zone == gmt){
               return obj.abbr;
          }
     }
     return gmt;
}

This utility is obviously not robust enough to do world timezones, but its enough of a framework to work with if you want to expand past just US timezones (and London). I am sure there are a lot of different ways this could be improved, so please share resources or ideas if you have them. You can get the code for the complete utility from GitHub:

TimzeZoneUtil.as

Thanks!

-Mister

Truncate Spark Label in the middle and showTruncationTip

thanksmister — Fri, 26 Aug 2011 23:07:39 +0000

Found a little handy customization of the Spark Label control that truncates the label in the middle with a (…). However it didn’t show the full label text on roll over when setting the showTruncationTip=”true” property of the control. I added a few little lines of code to fix it.

The code stores the original value in a variable called “_trueText”, so that just needs to be the value you pass to the toolTip when showTruncationTip=”true”. You need to override the mx_internal function to accomplish this.

override mx_internal function setIsTruncated(value:Boolean):void
		{
			if (_isTruncated != value)
			{
				_isTruncated = value;
				if (showTruncationTip)
					toolTip = _isTruncated ? _trueText : null;
				dispatchEvent(new Event("isTruncatedChanged"));
			}
		}

Then you need to add one little bit of code in the truncateTextMiddle method that will tell the control that the text is indeed truncated, setIsTruncated(true); should be at the end of that method around line 153 in the code snippet below:

	public function truncateTextMiddle(fullText:String, widthToTruncate:Number) : String
		{
			if (!(fullText) || fullText.length < 3 || !this.parent)
			{
				// skip any truncating if no styles (no parent),
				// or text is too small
				return fullText;
			}
			
			// add paddings for some font oversize issues
			var paddingWidth:Number =
				UITextField.mx_internal::TEXT_WIDTH_PADDING +
				this.getStyle("paddingLeft") + this.getStyle("paddingRight");
			
			// Skip if width is too small
			if (widthToTruncate < paddingWidth + 10) return fullText;
			
			// Prepare measurement object
			// We create new TextField, and copy styles for it from this object
			// We cannot re-use internal original text field instance because
			// it will cause event firing in process of text measurement
			var measurementField:TextField = new TextField();
			
			// Clear so measured text will not get old styles.
			measurementField.text = "";
			
			// Copy styles into TextField
			var textStyles:UITextFormat = this.determineTextFormatFromStyles();
			measurementField.defaultTextFormat = textStyles;
			var sm:ISystemManager = this.systemManager;
			if (textStyles.font)
			{
				measurementField.embedFonts = sm != null && sm.isFontFaceEmbedded(textStyles);
			}
			else
			{
				measurementField.embedFonts = false;
			}
			if (textStyles.antiAliasType) {
				measurementField.antiAliasType = textStyles.antiAliasType;
			}
			if (textStyles.gridFitType) {
				measurementField.gridFitType = textStyles.gridFitType;
			}
			if (!isNaN(textStyles.sharpness)) {
				measurementField.sharpness = textStyles.sharpness;
			}
			if (!isNaN(textStyles.thickness)) {
				measurementField.thickness = textStyles.thickness;
			}
			
			// Perform initial measure of text and check if need truncating at all
			
			// To measure text, we set it to measurement text field
			// and get line metrics for first line
			measurementField.text = fullText;
			var fullTextWidth:Number = measurementField.getLineMetrics(0).width + paddingWidth;
			if(fullTextWidth > widthToTruncate){
				// get width of ...
				measurementField.text = "...";
				var dotsWidth:Number = measurementField.getLineMetrics(0).width;
				
				// Find out what is the half of truncated text without ...
				var halfWidth : Number = (widthToTruncate - paddingWidth - dotsWidth) / 2;
				
				// Make a rough estimate of how much chars we need to cut out
				// This saves steps of character-by-character preocessing
				measurementField.text = "s";
				var charWidth:Number = measurementField.getLineMetrics(0).width;
				var charsToTruncate:int = Math.round(
					((fullTextWidth - paddingWidth) / 2 - halfWidth) /
					charWidth) + 2;
				
				// allow some distortion to account fractional widths part
				halfWidth = halfWidth - 0.5;
				
				// Below algorithm makes rough middle-truncating
				// Then it is corrected by adding or removing
				// characters for each part until reach required
				// width for each half. Algorith does checks
				// (min max and loop ciodnitions) so that string
				// cannot be less then one character for each half
				
				// see if right part of text approximately fits into half width
				var rightPart:String;
				var widthWithNextChar:Number;
				
				var len:int = fullText.length;
				var currLoc:int = Math.min(len/2 + charsToTruncate + 1, len-1);
				measurementField.text = fullText.substr(currLoc);
				var rightPartWidth:Number = measurementField.getLineMetrics(0).width;
				
				if (rightPartWidth > halfWidth) {
					// throw away characters until fits
					currLoc++;
					while (rightPartWidth > halfWidth && currLoc < len) {
						measurementField.text = fullText.charAt(currLoc);
						rightPartWidth -= measurementField.getLineMetrics(0).width;
						currLoc++;
					}
					rightPart = fullText.substr(currLoc - 1);
				} else {
					// try to add characters one-by-one and
					// see if it still fits
					widthWithNextChar = 0;
					do {
						currLoc--;
						rightPartWidth += widthWithNextChar;
						measurementField.text = fullText.charAt(currLoc);
						widthWithNextChar = measurementField.getLineMetrics(0).width;
					} while (rightPartWidth + widthWithNextChar <= halfWidth && currLoc > 0);
					rightPart = fullText.substr(currLoc + 1);
				}
				
				// Do the same with left part, but compare overall string
				// Overall is needed because character-by character
				// would not give us correct total width of string -
				// somehow overall text is measured with sapcers etc. and
				// also there are rounding issues.
				// This way, and by putting left part calculating as last, we allow
				// left part might be larger (may become more than half).
				
				// allow some distortion in widths fractions
				widthToTruncate = widthToTruncate - 0.5 - paddingWidth;
				
				currLoc = Math.max(len/2 - charsToTruncate, 1);
				measurementField.text = fullText.substr(0, currLoc) +
					"..." + rightPart;
				var truncatedWidth:Number = measurementField.getLineMetrics(0).width;
				if (truncatedWidth > widthToTruncate) {
					// throw away characters until fits
					currLoc--;
					while (truncatedWidth > widthToTruncate && currLoc > 0) {
						measurementField.text = fullText.substr(0, currLoc) +
							"..." + rightPart;
						truncatedWidth = measurementField.getLineMetrics(0).width;
						currLoc--;
					}
					currLoc++;
				} else {
					// try to add characters one-by-one and
					// see if it still fits
					do {
						currLoc++;
						measurementField.text = fullText.substr(0, currLoc) +
							"..." + rightPart;
						widthWithNextChar = measurementField.getLineMetrics(0).width;
					} while (widthWithNextChar <= widthToTruncate &&
						currLoc < len-1);
					currLoc--;
				}

				setIsTruncated(true);
				
				return fullText.substr(0, Math.max(currLoc,1)) +
					"..." + rightPart;
			}
			return fullText;
			
		}

The original post can be found here.

-Mr

Custom Android TitleBar with Drop Shadow

thanksmister — Mon, 06 Jun 2011 10:33:07 +0000

Recently I ran into a little challenge with some designs for an Android application. The designs called for a drop shadow to appear on the application TitleBar and the footer bar. The drop shadow effect should appear on top of the scrolling list items. However, I learned that with the Android ListView component there is already an effect called the fading edge. An additional problem is producing a realistic drop shadow effect that appears to float over the items below it rather than take up space between the TitleBar and the ListView.

The first problem, the built in fading edge effect of the ListView makes the list item appear to fade from the screen as it scrolls to the top or bottom of the list. In general this is a nice effect as the ListView produces it’s own shadow and fade as the list is scrolled under the TitleBar. However, this effect clashes with a custom drop shadow effect on the TitleBar because when list items are pressed or selected they produce a slight glow and blur effect at the top/bottom of the list just below the drop shadow. There are two properties of the ListView component that need to be turned “off” for the effects to be removed:

https://gist.github.com/997273

The fadingEdge=”none” setting removes the blurring and fading of list items as they scroll off screen and the cachColorHint=”#0000000″ removes the list from turning black while scrolled even though the background maybe set to be transparent (you can also set a custom list item drawable background to take care of this problem). There is an interesting article about why this effect is part of the ListView component that can be read on the Android Developer blog.

So now you have a list that has no shadow, fade, or blur effects. To get the shadow to appear to float above the scrolling content I created a a nice drop shadow PNG file in Photoshop with transparent background. I then used the Android Draw 9-Patch tool to make the shadow file scale horizontally across the top and bottom of the application. You now get the following results:

To get the shadow to “float” on top of the ListView, I used a Relative layout to position the items. I also used my own custom TitleBar and ListAdapter in the application to get the desired appearance, as well as added a static footer graphic. What you get a nice drop shadow on the top and bottom of the application that is always on top of the list. This approach as the advantage that the list is underneath the drop shadow not just position below it as it might be if you used a LinearLayout.

You can download the full project code on GitHub.

-Mr

Remove Underline from Clickable text in TextView on Android

thanksmister — Fri, 20 May 2011 11:53:01 +0000

Been working with the Android SDK (v 2.2) lately and needed to a clickable text area in an TextView but one without any underlined links (so it doesn’t appear like a hyperlink). I also wanted to capture the click event and launch my own Activity within the same Activty, rather than use something as complicated as Linkify for this use case.

This example builds the text value for a TextView component dynamically using a SpannableStringBuilder. To create the span for a given length of text, I created a custom class file that extends ClickableSpan. This custom class overrides the the “updateDrawState” method and removes the underline. This seems pretty straight forward, but it was not easy assembling all the pieces from various examples to get the results I desired.

Here is a image preview of the application output:

Full Code: https://gist.github.com/249970d811d84a529d37.

Spark Button and ButtonBar with icons and rollover states

thanksmister — Thu, 28 Apr 2011 18:18:44 +0000

The Flash Builder Spark Button control doesn’t come with an icon property out of the box. So you have to extend the Button class and add your own. I created a Spark Skin to add two icons to the Button control, one for the up/disabled state and one for the over/down states.

The Spark ButtonBar control does accommodate an icon, but there is no way to change the icon when the selected index changes. So to change the icon of the selected item, I built a Spark Skin for the ButtonBarButton and the ButtonBar to accomplish the job. Here is the running example of the buttons in action:

IconButtons.swf

The code of the IconButton class and the IconButtonSkin mxml file that accompanies the class:

https://gist.github.com/946886

And the code of the IconButtonBarButton class and the IconButtonBarSkin and IconButtonBarButtonskin mxml

https://gist.github.com/947130

You can also download the IconButtons Flash Builder Project.

-Mr

AS3 P2P Helper Class

thanksmister — Fri, 15 Apr 2011 18:05:10 +0000

This is just a simple class I created to allow to clients (AIR Desktop, AIR Mobile) to send and receive commands from each other using Flash Player 10 P2P (Peer to Peer). This class is used to drive a AIR application running on a large wall mounted flat screen monitor from an Android mobile device. These are two different applications but are talking to each other through this common library while connected on the same network.

There is a great little starter video by Paul Trani with CS5. Peter Elst is also working on a P2P library called Cocoon that allows more robust communication. Also check out Renaun Erickson’s post for setting up your Mac as a hub for local P2P connections without WiFi.

Full code: https://gist.github.com/673f0a77f701d4ae98a7

-Mister

Upload to S3 with cURL and AIR NativeProcess

thanksmister — Thu, 17 Mar 2011 03:04:30 +0000

This application demonstrates how to upload files to Amazon S3 (part of Amazon Web Services) with cURL from an Adobe AIR application using the AIR 2 NativeProcess API. This application uses the AIR 2.0 or higher SDK, Flash Builder 4, and the cURL native application for uploading files.

To use this application also depends on the as3corelib, as3awss3lib, and as3crypto libraries. You will also need an Amazon S3 developer account and have cURL installed on your system.

Why upload with cURL instead of AIR? Part of the problem with uploading through an AIR application, or any Flash application, is the size limit of the uploads (I think something like 100MB is the recommended size). What happens when you want to upload gigabytes of data? Offloading the uploading of large files to a native process solves this problem. You can also spawn multiple instances of the native process to do multiple uploads. This makes sure your AIR application continues to be responsive and performs well while the uploads happen in the background. Using something like cURL means you have a cross-platform native process that can be installed along with your application.

The main guts of the application revolve around assembling the correct cURL arguments to upload the files to the S3 service. This also requires properly creating an policy expected by S3 to complete the upload process. Here is the core code for creating the S3 policy file and the arguments for cURL:

/**
* Uploads a file to S3 using cURL using the AIR NativeProcess API.
*
* @param file File object
* */
protected function saveFile(folderid:String, file:File):void
{
createProgressPanel(); // add our progress bar

var cURL:File = File.applicationDirectory;

if (Capabilities.os.toLowerCase().indexOf("win") > -1) {
cURL = cURL.resolvePath("bin/curl.exe");
} else if (Capabilities.os.toLowerCase().indexOf("mac") > -1) {
cURL = cURL.resolvePath("/usr/bin/curl");
}

var contentType:String = "multipart/form-data";
var arguments:Vector. = getArguments("PUT", folderid, file, contentType);

var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.arguments = arguments;
nativeProcessStartupInfo.executable = cURL;

process = new NativeProcess();
process.addEventListener(ProgressEvent.STANDARD_INPUT_PROGRESS, onInputProgress);
process.addEventListener(ProgressEvent.STANDARD_OUTPUT_DATA, onStandardOutputData);
process.addEventListener(ProgressEvent.STANDARD_ERROR_DATA, onStandardErrorData);
process.addEventListener(NativeProcessExitEvent.EXIT, onStandardOutputExit);

process.addEventListener(IOErrorEvent.STANDARD_OUTPUT_IO_ERROR, onOutputIOError);
process.addEventListener(IOErrorEvent.STANDARD_ERROR_IO_ERROR, onStandardIOError);

process.start(nativeProcessStartupInfo);
}

/**
* Create the native process starupt info arguments. Be sure to check the cURL documentation
* for more functions on upload: http://curl.haxx.se/docs/manual.html
*
* @param method POST or GET arguements
* @param bucketname The S3 bucket name for upload target
* @param file File to upload
* @param contentType The mime type for the upload
* @param secure Boolean value for usting https or http
* @return Vector.
* */
protected function getArguments(method:String, bucketname:String, file:File, contentType:String = "multipart/form-data", secure:Boolean = false):Vector.
{
var protocol:String = (secure)? "https":"http";
var path:String = protocol + "://" + bucketname + "." + AMAZON_ENDPOINT
var policy:String = getPolicy(bucketname, contentType);

var arguments:Vector. = new Vector.();
arguments.push("-#"); // gives us a ### % ouput for progress from cURL
arguments.push("-F key=" + file.name );
arguments.push("-F AWSAccessKeyId=" + this.accessKey );
arguments.push("-F policy=" + policy );
arguments.push("-F signature=" + getSignature( policy) );
arguments.push("-F Content-Type=" + contentType);
arguments.push("-F file=@" + file.nativePath);
arguments.push(path);

return arguments;
}

/**
* Creates the policy file for the S3 upload. For more information on AWS policy files:
* http://aws.amazon.com/articles/1434. The paramater content-length-range restricts
* the file upload size. Remove it if you want to have no restrictions on upload size.
* */
protected function getPolicy(bucketname:String, contentType:String):String
{
// date has to be some time in the future so uploads don't expire in progress
var obj:Object = {"expiration": "2015-06-15T12:00:00.000Z",
"conditions": [
{"bucket": bucketname},
["starts-with", "$key", ""],
["starts-with", "$Content-Type", ""],
["content-length-range", 0, 1048576]
]
}

var json:String = JSON.encode(obj);
var encoded: String = Base64.encode(json);

return encoded;
}

/**
* Craete the signature for S3. For more information on S3 signatures:
* http://aws.amazon.com/articles/1434
* */
protected function getSignature(policy:String):String
{
var policyBytes:ByteArray = new ByteArray();
policyBytes.writeUTFBytes(policy);

var secretAccessKeyBytes:ByteArray = new ByteArray();
secretAccessKeyBytes.writeUTFBytes(this.secretAccessKey);

var hmacBytes:ByteArray = hmac.compute(secretAccessKeyBytes, policyBytes);

return Base64.encodeByteArray(hmacBytes);
}

The tricky part was getting upload feedback from cURL in a format that we could use to display the upload progress. You might notice in the code above that we add an argument to cURL to output a % for uploads in progress. We need to parse this information when it comes back in from the ProgressEvent.STANDARD_ERROR_DATA event of the NativeProcess:

/**
* Handles writing within the process such as percent complete.
* */
protected function onStandardErrorData(event:ProgressEvent):void
{
var output:String = ( process.standardError.readUTFBytes(process.standardError.bytesAvailable) );
var regex:RegExp = /([0-9\.]+)/;
var exec:String = regex.exec(output);

if(exec) {
var arry:Array = exec.split(",");
var percent:Number = Math.round(Number(arry[0])); // save percent complete

if(percent > percentComplete) {
percentComplete = percent;
progressBar.setProgress(percentComplete, progressBar.maximum);
}
}
}

The AIR application installer file and the full code for this example can be found at the GitHub repository:

AWSS3cURL

Additional Resources
Amazon Dev Article on Form Post Upload
Amazon S3 Forum discussion on cURL
cURL
Amazon S3 Manager

- Mister

Custom AIR Applicaton Updater for Flex 4 with Spark Skins

thanksmister — Fri, 21 Jan 2011 06:00:59 +0000

In a previous post I laid out the code for a custom application updater for AIR projects. I have since updated that project to work with Flex 4, including Spark controls and skins. It’s currently skinned to look like the default updater in Flash Builder.

I ran into a strange issue when moving the project from Flex 3 to Flex 4 (SDK 4.1) and wasn’t initially able to read the update.xml file that lives on the server. I had to change both the namespace and add “versionNumber” to the xml file to work with an AIR 2.5 project.

update.xml



  2.0.0
  app:/server/UpdateTester.air

The entire project is on GitHub. Just download and import it into Flash Builder 4. Remember the application won’t actually update from the IDE, so it will give an error if you try to actually download the update.

CustomApplicationUpdate

-Mister