Flex and ActionScript Development Tips

Focus Flex App on start up

2011-10-18T16:43:00.000-07:00

When a flex application loads it doesn't actually have focus until the user clicks on it.

So even though you can call setFocus() on a TextInput or Button and visually it appears that your control has focus (blue border), if you try to type you'll notice that nothing happens. This can be quite frustrating for a user.

One way to solve this is to edit the html file that loads your application (e.g. the index.template.html), and call the JavaScript focus() function on the flash element. I found this website explains it quite nicely:
http://www.appfoundation.com/blogs/giametta/2007/07/09/internet-explorer-setting-focus-on-flex-apps-flash-player/.

If for prefer to keep all your code in ActionScript you can accomplish the same thing by doing this:

ExternalInterface.call("function() { var app = document.getElementById('"+id+"'); app.tabIndex = 0; app.focus(); }");

I usually put that line of code inside my applicationComplete event handler.

One other thing to note is that if you call setFocus on a component that isn't finished being initialized it won't always work. For best results call setFocus() in a creationComplete event handler.

I added the app.tabIndex = 0 after finding that the focus didn't work on Safari. This came from stackoverflow.

FXG Scale Grid

2011-10-11T16:26:00.000-07:00

When working with FXG an important concept to understand is the Scale Grid. The scale grid determines how your FXG graphic scales. If your FXG element is used without an explicit width or height (e.g. <fxg:rounded_box/>) then the scale grid is not used. But if for example you define your FXG to have a width of 200 pixels and then in your MXML you use the FXG element and set its width to "100%" (e.g. <fxg:rounded_box width="100%"/>) or something other than 200 you'll see the graphic get scaled. The scale grid becomes important when you want to preserve aspect ratios (e.g. on rounded corners).

Here is the typical example used to illustrate the problem:

Here is the FXG source code (rounded_box_scale9.fxg) used to create this graphic. Notice the scaleGridLeft, scaleGridTop, scaleGridRight, and scaleGridBottom properties, these are what control the scaling.


<s:Graphic xmlns:s="http://ns.adobe.com/fxg/2008" version="2.0" 
	scaleGridTop="20" scaleGridLeft="20" scaleGridRight="130" scaleGridBottom="21">
	
	<s:Rect height="41" width="150" radiusX="20">
		<s:fill>
			<s:LinearGradient rotation="90">
				<s:GradientEntry color="#FFFFFF"/>
				<s:GradientEntry color="#C0C0C0"/>
				<s:GradientEntry color="#FFFFFF"/>
			</s:LinearGradient>
		</s:fill>
		<s:stroke>
			<s:SolidColorStroke color="#AAAAAA" weight="2"/>
		</s:stroke>
	</s:Rect>
	
</s:Graphic>

And here is the associated MXML (the rounded_box fxg doesn't have the scaleGrid properties):


<s:VGroup x="10" y="10" gap="10">
	<fxg:rounded_box/>
	<fxg:rounded_box width="100"/>
	<fxg:rounded_box width="200"/>
	<fxg:rounded_box_scale9 width="100"/>
	<fxg:rounded_box_scale9 width="200"/>
</s:VGroup>

I found this website quite useful in illustrating some of the scale grid limitations:http://www.adobe.com/devnet/flex/articles/mobile-skinning-part1.html.

And here is Adobe's page on FXG:
http://help.adobe.com/en_US/flex/using/WSda78ed3a750d6b8f26c150d412357de3591-8000.html.

But to summarize, here are the limitations I've found with scale grids:

Scale grid values must be inside the boundaries of the graphic and must not overlap
(that is, left boundary < scaleGridLeft < scaleGridRight < right boundary).
Scale grids will not work if the graphic contains any Group elements.
Scale grids will not work if elements have alpha applied. Instead, apply alpha to the stroke and fill elements.
Scale grids will not work with filters (e.g. DropShadow, GlowFilter, etc). Instead add the filters inside the MXML.

I'm sure there are more restrictions, but these are what I've found so far.

Flex 4 Path Builder

2011-09-21T14:41:00.000-07:00

Updated on November 17th with a new version.

I got a little carried away making an application that lets you manipulate Flex Path objects. This application lets you easily design a path by double clicking to make each end point in your path. You can select each individual line, move, or curve segment and manipulate the end points () and the curve control points (). Click on the screenshot above to see it in action. I'm sure there will be bugs, so use at your own risk. There is no undo support either.

To use this tool, you can start by adding different kind of path segments - move, lines, and curves - by clicking on one of the 6 buttons along the top in the blue titlebar. This will cause the path segment to be appended to the currently displayed path. Each path segment also shows up in the list on the left side. Click on an individual path segment in this list to highlight it in the path. The red end points () are draggable - move them around to adjust the path. Note that the following path segment will be moved to start wherever the current path segment ends.You can also click and drag the circle control points () to adjust the quadratic and cubic Bezier Curves.
Alternatively you can use the new "Path Designer" option (which is explained in the top panel on the left side). The path designer lets you double click on the white graph area to create each segment of your path. Here are the instructions:

To create a line: Double-click on the graph
To create a straight line (horizontal, vertical, or at 45°): Shift + double-click on the graph
To create a quadradic curve: Ctrl(⌘) + double-click on the graph (you can edit the control point later)
To create a cubic bezier curve: Ctrl(⌘) + shift + double-click on the graph
If you check the Use relative positions checkbox the path segments will use relative positions instead of absolute (lower case letters like "l", "m", "c", "q", etc)
If you check the Snap To Grid checkbox, then the end points are all shifted to fit on a grid defined by the number of pixels you choose. This is a nice way to easily get nice round numbers like 20, 50, 100.

If you have an existing path you can paste the data string (e.g. "M 100 100 L 150 150 H 200") into the textbox at the top and click Update. This will render your path on the screen and allow you to manipulate it.

I've also added support for ActionScript GraphicsPath commands to be pasted in the same textbox in this format:
"1 2;10 10 20 20"
The first set of numbers before the semi-colon are the commands (defined by the constants in GraphicsPathCommand). The second set of numbers after the semi-colon are the coordinates of each path segment. In your program you can use a trace statements like this on your GraphicsPath object to output the correct format:

trace(path.commands.join(" ") + ";" + path.data.join(" "));

And finally, if you have a path created in ActionScript using a Graphics object or a GraphicsPath object like this:


var g:Graphics = uiComponent.graphics;
g.moveTo(10, 10);
g.lineTo(50, 10);
g.moveTo(50, 50);
g.lineTo(10, 50);

You can copy that code and paste it into the same textbox at the top. It will pick out the move, line, and quad curve commands. This will only work if you use all numbers in your code - no variables or constants.

The Translate X/Y option lets you move every single point on the screen by the given x and y offset values. This includes the control points. So think of it as shifting the entire path. Note that the points can't be moved into negative values (even though they are allowed), so unexpected things will happen if you try to do this.

On the right side of the app (not shown in the screenshot) there is an edit panel which lets you type in the exact numeric values that you want for each point in the selected path segment. This way you can easily tweak your path to look just right.

Below the Edit Panel is the Stroke & Fill Properties panel. This lets you define the path stroke and fill properties.

Below that is the MXML and FXG output windows which let you copy the MXML/FXG source code used to render the path, so you can paste it into your own application. If you are using FXG, then in Flash Builder choose "File > New > File". Then enter in the filename you want like "mypath.fxg". In the editor paste in the FXG, it has all the declaration xml that you should need.

Feedback welcome, have fun playing.

I haven't enabled view-source for this project yet, hopefully one day.

Can't type into Flex textbox on Mac Safari 5.1!

2011-08-29T11:01:00.000-07:00

I recently ran into a problem on Mac Safari 5.1 where I couldn't type into any text boxes in my Flex App. Very frustrating! Anyway, I finally found a simple solution from the Adobe Forums.

First this problem only happens with the Debug Flash Player.

The fix is very simple - in Safari under the Develop menu (if you don't see the Develop menu it can be shown by going to Preferences > Advanced and checking the Show Develop menu in menu bar checkbox), change the User-Agent to Firefox or something other than the default. This will cause the page to reload, and should allow you to type again.

Bizarre.

Flash Builder 4.5 Mobile Application for Acer Iconia A500 Tablet

2011-06-27T14:49:00.000-07:00

This blog post will discuss making a simple mobile application using Flash Builder 4.5. I will be targeting the Acer Iconia A500 Tablet because it is currently the only mobile device that I have access to, but it should be relevant to other mobile devices too. The Acer Iconia A500 Tablet runs on Google Android 3.0 (Honeycomb). For a full review of the tablet, read this article. It sells for around $450 for the 32GB version.

Step 1 - configure the tablet

On the tablet go to Settings - Applications - Development
Check the USB Debugging option. This allows Flash Builder to debug applications straight on to the tablet through USB. Next, connect the tablet to your computer using the USB cable provided.

Step2 - create a mobile project

Inside Flash Builder, create a new Flex Mobile Project.
Give it a name like TabletApp. Click Next.

Select the desired target platform(s). For the Acer Iconia and other Andoid tablets, check the Google Android checkbox. You can choose the mobile app template to use here as well.
Important: your mobile application might need to have access to the internet, the file system, the gps, etc. Under the Permissions tab, choose the Google Android platform, and check any of the permissions that your application needs.
For my sample application I chose the INTERNET, WRITE_EXTERNAL_STORAGE, and ACCESS_FINE_LOCATION (GPS) permissions.

Click next. Set up the build path if necessary, or leave it to the default values.

Once the project is created, Flash Builder will open the two main files - TabletApp.mxml (the main application file), and TabletAppHomeView.mxml (the default home view component). Add in some components to the home view like a button or a label.

Step 3 - Run the application on the tablet

Now, to test our your application on the Acer Iconia Tablet, make sure it is connected by USB, and that you followed the step above on the tablet to enable USB debugging.

Under the Run menu, choose Debug Configurations.... Add a new Mobile Application launch configuration. Choose your project and application, and the target platform (Google Android in this case).

Under where it says "Launch method", choose the On device radio button. If you have trouble connecting, then read the Device connection help page.

If all works as planned, you should see on the tablet the simple application that you created.

Step 3b - Run the application on the desktop

If you want to test out your application without running it on the tablet, you can run it on the desktop by choosing the other radio button option - On desktop. There is a list of pre-configured devices, but the Acer Iconia tablet isn't in the list. So click Configure... and then Add to add it to the list. Here are the specs:

I've put together a simple app that shows some of the properties available to mobile applications. Click the screenshot below to see the full size.

You can download the project file here. In Flash Builder choose "File - Import...", and then choose "Flash Builder - Flash Builder Project", and select the downloaded fxp file.

Simple Animating Preloader and Throbber/Spinner

2011-05-19T17:44:00.000-07:00

This is my fourth post on Flex preloaders. It shows how you can use a throbber or spinner as a
simple yet effective preloader. The throbber can also be used in your application in other places whenever you want to indicate that something is happening.

In the example below I've included two kinds of throbbers:

SimpleThrobber (extends Sprite) - ActionScript/Flash only, no Flex dependencies (good for preloaders)
Throbber (extends SkinnableContainer) - advanced throbber, skinnable and style-able

I've also included two skins to go with the Throbber class - ThrobberCirclesSkin and ThrobberLinesSkin.

Both throbbers work roughly the same way. The animation is performed every X milliseconds, and the lines or circles are drawn in a rotating manner so that the throbber animates. Both throbbers support an array of colors which define the appearance of the throbber, and a delay property which determines the speed of the animation.

Anyway, check out the code below (right click View Source to see the source), there is some documentation to explain the various styles, properties, and functions.

The other blog posts I've written on preloaders and spinners/throbbers can be found here:

As mentioned in the comments, the just released Flex 4.5 SDK now contains a similar Spark BusyIndicator component. There is a nice blog post on it here.

Spark Forms, Validation, and Errors

2011-03-24T12:50:00.000-07:00

One of my previous posts on Always showing error tips (validators) presented one way of trying and improve the built-in validation error handling in Flex. It was a nice idea, but as many people have pointed out in the comments there are too many different use cases that causes the error tips to not show up properly.

Below is another alternative approach, and one that I hope is less of a hack.

I've created a class called InputControl which is very similar to the Flex 3 FormItem. It has a label property, and can contain one or more child elements.

What this control does that makes it useful is to listen for when the errorString property changes on an input control (such as a TextInput), and instead of displaying the default Flex error toolTip, it shows that errorString in a label that is always visible. It also immediately clears the input's errorString property so that the default error toolTip is not displayed.

The InputControl class is skinnable, and I've created two different skins. The default one InputControlSkin has the same layout as the FormItem (label on the left) and displays the error string on the right of the input.

The second skin is called InputControlVerticalSkin which displays the label, input, and error message in a vertical layout. This skin is more suited for large inputs like a TextArea.

There are definitely a few issues with this approach:
- longer error messages either don't show up properly or are truncated
- form label alignment is not customizable

Feel free to modify my code to make it work differently. Most properties are hard coded in the skins, and I didn't spend the time to extract them out into styles.

Here it is in action, right click to view source:

State Transitions

2011-03-15T16:13:00.000-07:00

I've put together a little example of how you can use transitions to animate between the states in your application component.

There are many websites explaining Flex 3 states as well as the new and improved Flex 4 states.

If you don't already use states, I would highly recommend you become familiar with them. They are very powerful, and make it much easier to create complex user interfaces.

Transitions are effects that are played when your component changes from one state to another state. They are a nice way to smoothly animate changing content, for example fading out content being hidden, or resizing containers that have new elements being added.

In the example below, I've created an application that has 5 states:

Normal - default state
Resize - resizes the main panel using a Resize effect
Fade - fades in/out a Label using a Fade effect
AnimateColor - animates a gradient color using the AnimateColor effect
Easing - uses a Bounce easer with a Move transition

I've noticed that certain effects like Resize don't work properly with other effects like Fade. I haven't spent the time to try and figure out why not.

Anyway, here is the example. Right click to view source.

Animated Scrolling List

2011-01-26T16:53:00.000-08:00

In Flex 4, the Spark List has a function called ensureIndexIsVisible(index). This function immediately scrolls the list to that index if it is not visible.

I've added a slight modification to this to animate the scrolling over half a second to make it much smoother. The animation is done using an AnimateProperty instance on the list's data group, and setting the property to verticalScrollPosition.

Here it is in action, as usual right click to view source:

For simplicity I am only scrolling the vertical scrollbar. If you are using a horizontal or tiled list, you'll want to animate the horizontal scrollbar too. In the tile case, you could use a Parallel instance to animate both the horizontal and vertical scrollbars.

Grayscale Preloader

2011-01-14T12:34:00.000-08:00

Following on from my last post on grayscale images, I've made another preloader to illustrate how you can animate an image from grayscale to colour.

The preload consists of an image and a loading label. The image starts off gray, and as the preloader progress value increases it gradually becomes coloured. The alpha value also increases from 0.5 at the start to 1 at the end. To spice it up a little I also added in a GlowFilter and a DropShadowFilter.

Here it is in action, click the RELOAD button to show the preloader again.

For another example of a custom preloader, check out this blog post on Another Custom Preloader.

Grayscale Images, ProgressBar, Rating Control

2011-01-07T15:19:00.000-08:00

I've been learning some neat tricks for working with images and graphics. One of them is how to take a color image (or a graphic like an ellipse that you've drawn using MXML/FXG) and make it grayscale.

Obviously if you have the image, you could just as easily open it up in your favorite image editor like Photoshop and make a grayscale copy of the image and save it to your Flex project.

Anyway, here is how you can do it dynamically. I've shown two different ways of doing it. Again I want to emphasize that all the images and graphics below are in color, they are simply modified at run time to appear in grayscale.

The first way is to set the UIComponent.blendMode or GraphicElement.blendMode property to "luminosity" on the image or graphic. This method works by blending the colours in the image with the color "behind" the image (usually the background color of the parent container or application). So if the color behind the image is white or light gray, then the image will become gray. If the color behind is green, then the image will be colourized to green. See the bottom part of example #6 where 4 red circles are drawn with various background colours.

The second way is to use a ColorMatrixFilter on the BitmapImage which converts the color image into grayscale.

To illustrate this, I've created 6 examples:

Normal color image
Color image turned into grayscale using the blendMode="luminosity" property
Color image turned into grayscale using a ColorMatrixFilter
Combination of a grayscale image (as the background) with part of the color image as the foreground. To draw only part of the color image, set the fillMode="clip" property on the image, and then set the width and height properties and then the image will be clipped.
A custom ProgressBar
A sample non-interactive rating control, as well as some luminosity examples

For more information on making skins for progress bars, see these two articles:
Creating a Custom Track Skin on an MX ProgressBar and Creating a Custom Bar Skin on an MX ProgressBar.

And finally, here are the examples. As always right click to view the source code.

The rating control in example #6 actually uses a Star graphic that is drawn with FXG (Adobe help on Using FXG). You could just as easily do this in MXML or simply use an image from your computer. I've noticed that Flash Builder doesn't really support FXG files properly (no autocomplete or new file wizards), so it's not that easy to create them unless you know the specifications well.

The rating control could easily be extended to be a fully functional user interactive rating control. You could also use the technique shown in example #4 to display fractional rating values (e.g. 2.5 out of 5).

Drawing 3D Shapes in Flex

2010-12-22T10:30:00.000-08:00

I found this great 3-part article by Lee Burrows on how to draw semi 3D shapes in Flex:

Part 1

Part 2

Part 3

I highly recommend that you check them out.

Expanding on those examples I've changed them slightly in the following ways:

Instead of rotating the shape based on mouse position, the rotation now happens when you drag your mouse

Added a 3D Triangle and a 3D Arrow (combines a triangle and a cube)

Added a 3D shape with 6 different hockey logos, one on each side

All credit goes to Lee for his excellent examples. If you want to understand the math behind it all, then definitely read his article. My examples don't have much in the way of comments.

View Source is available for all the following examples, right click below to access the source.

Example #1 - Simple Rotating Cube:	Example #2 - Rotating Triangle:
Example #3 - Rotating Arrow (with highlighting):	Example #4 - Cube With Image/Bitmap Fill:

You might notice a few tiny problems with the arrow. When rotating it in certain directions some lines show through that shouldn't be visible. It is most likely due to combining the two shapes (one cube and one triangle) to form the arrow.

Also, the mouse dragging to rotate works as expected until you've rotated the shape 180 degrees, then it becomes backwards. I haven't spent the time to try and fix this.

The fourth example uses Lee's Shape3D class which encapsulates the 3D functionality in one simple class. It is much cleaner this way.

YouTube Videos in Flex

2010-11-25T17:27:00.000-08:00

Here is an example of how to get YouTube videos to be shown inside your Flex Application.

The first thing to do is add an SWFLoader to your mxml file. The source property of the SWFLoader gets set to the url of the video that you want to show inside Flex.
But you can't just use any YouTube url like this one:

http://www.youtube.com/watch?v=owGykVbfgUE

Instead you use a url in this form:

http://www.youtube.com/v/VIDEO_ID?version=3

The id of the video you want to play (e.g. owGykVbfgUE) must replace the VIDEO_ID portion of the url. This url actually redirects to an SWF file somewhere.

The version=3 parameter is very important. This tells YouTube to load the ActionScript 3.0 version of the SWF file. Without this parameter it defaults to the AS2 version which doesn't not play nicely with AS3. I found that I could watch one video, but after that no other videos could be played (I found this blog post that explains why if you're interested). I also found this YouTube reference which is where I learned about using the version=3 parameter.

There are a few other parameters that you can use like:

autoplay=1 - starts the video immediately without the user having to press play
fs=1 - allows full screen
rel=1 - shows related content after the video has finished playing

For a full list of the parameters go here

And finally, when you want to play another video, make sure you call the swfLoader.unloadAndStop() function otherwise you can get multiple videos playing at the same time, very confusing.

Keep in mind that when you run this locally you will see a lot of SecurityExceptions in your console, this is expected and normal.

And one last thing, some videos you will not be able to play inside Flex due to copyright restrictions. The owners of youtube videos must be able to specify whether the video can be played from a different website using an embedded player.

Here is the example in action (right click to view-source):

Displaying Html text in Labels

2010-10-27T13:18:00.000-07:00

Displaying html content inside Flex labels is not as straight forward as it was in Flex 3 by simply setting the htmlText property. Here are the 3 Spark controls used for displaying text:

Label - lightweight plain text only
RichText - as the name says it provides support for rich text.
Also allows html content to be imported (anchor tags <a> don't work)
RichEditableText - provides the same rich text support as the RichText control.
Allows editing and anchor html tags work properly

Here is a list of the supported HTML tags: <div>, <p>, <a>, <span>, <img>, <br>.

As noted above, if you want to use anchor <a> tags, you must use a RichEditableText control. In this case you'd most likely want to also set the editable="false" property.
The anchor href property can be set to a relative path like

<a href="index.html">index</a>

Or an absolute one like

<a href="http://google.com" target="_blank">google</a>

Note that you can set the target property to control whether the link is opened in a new window or not.
If you want to listen for when the user clicks on an anchor it is possible, but involves a lot more work. Basically you import the html string into a TextFlow object. Then you iterate through all the child elements until you find the LinkElement (which represents the anchor tag), and then add a FlowElementMouseEvent.CLICK event listener.

Here is some sample code that I use to achieve this:

/**
 * Converts the html string (from the resources) into a TextFlow object
 * using the TextConverter class. Then it iterates through all the 
 * elements in the TextFlow until it finds a LinkElement, and adds a 
 * FlowElementMouseEvent.CLICK event handler to that Link Element.
 */
public static function addLinkClickHandler(html:String, 
        linkClickedHandler:Function):TextFlow {
  var textFlow:TextFlow = TextConverter.importToFlow(html, 
    TextConverter.TEXT_FIELD_HTML_FORMAT);
  var link:LinkElement = findLinkElement(textFlow);
  if (link != null) {
    link.addEventListener(FlowElementMouseEvent.CLICK, 
          linkClickedHandler, false, 0, true);
  } else {
    trace("Warning - couldn't find link tag in: " + html);
  }
  return textFlow;
}

/**
 * Finds the first LinkElement recursively and returns it.
 */
private static function findLinkElement(group:FlowGroupElement):LinkElement {
  var childGroups:Array = [];
  // First check all the child elements of the current group,
  // Also save any children that are FlowGroupElement
  for (var i:int = 0; i < group.numChildren; i++) {
    var element:FlowElement = group.getChildAt(i);
    if (element is LinkElement) {
      return (element as LinkElement);
    } else if (element is FlowGroupElement) {
      childGroups.push(element);
    }
  }
  // Recursively check the child FlowGroupElements now
  for (i = 0; i < childGroups.length; i++) {
    var childGroup:FlowGroupElement = childGroups[i];
    var link:LinkElement = findLinkElement(childGroup);
    if (link != null) {
      return link;
    }
  }
  return null;
}

A simple control that I've created and use frequently is called HtmlLabel which extends the RichEditableText class to provide simple support for html text:

<?xml version="1.0" encoding="utf-8"?>
<s:RichEditableText xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  focusEnabled="false"
  selectable="false"
  editable="false">

  <fx:Script>
    <![CDATA[
      import flashx.textLayout.conversion.TextConverter;

      override public function set text(value:String):void {
        super.textFlow = TextConverter.importToFlow(value, 
          TextConverter.TEXT_FIELD_HTML_FORMAT);
      }
    ]]>
  </fx:Script>

</s:RichEditableText>

Spell Checking

2010-10-27T09:38:00.000-07:00

Here is a short example of how to get the Adobe Squiggly spell checking tool installed. Squiggly can be downloaded here.

Squiggly files:

AdobeSpellingConfig.xml - put this file in your project's src folder. It defines the locations of the dictionaries and which language(s) to use.
en_US.aff, en_US.dic - these are the dictionary files. You'll need different ones for different languages of course. By default they go in the src/dictionaries/en_US folder.
AdobeSpellingEngine.swc - the main engine library - required, goes in project lib folder.
AdobeSpellingUI.swc - the ui library for Flex 3/MX components (e.g. <mx:TextArea>)
AdobeSpellingUIEx.swc - the ui library for Flex 4/Spark components (e.g. <s:TextArea>)

** Only use one of AdobeSpellingUI.swc or AdobeSpellingUIEx.swc.

To integrate Spell Checking into a Spark TextArea (id="textArea"), all you have to do is add one line:

SpellUI.enableSpelling(textArea, "en_US");

I did notice one problem with using Squiggly with Spark controls. The default Cut/Copy/Paste/Select All context menu items were not available anymore. I found a workaround for this by getting the contextMenu (which gets set on the RichEditableText control, not the TextArea) and setting clipboardMenu = true. See the example below for more details (right click to View Source).

Squiggly is still in prerelease, so a few bugs are expected. There is a forum here for discussions on Squiggly, and to report problems.

Flex 4 Tree Lines

2010-09-09T18:15:00.000-07:00

I've updated my previous blog post on Tree Lines to include a Flex 4/Spark version which uses the MXTreeItemRenderer class.

For more documentation on how to use it see the blog post linked above.

I've also updated the AdvancedDataGrid example to show tree lines in the tree:

Detecting browser height

2010-08-27T17:04:00.000-07:00

Here is an example of one way to find out the height of the browser window from inside Flex. It is very easy to find this out if your have your Flex application set to height="100%". But if you use a fixed height like height="300" then stage.stageHeight and app.height both return 300.

This example uses the ExternalInterface to determine the height of the browser by calling the eval javascript function (it is a built-in function).

E.g.

var browserHeight:Number = ExternalInterface.call("eval", "window.innerHeight");

Different browsers (NS, FF, Chrome, IE, Safari) obviously don't all support this call. So far the window.innerHeight property works on all of them except IE. For IE you can use this one (IE 7 and above I think?):

var browserHeight:Number = ExternalInterface.call("eval", "document.documentElement.clientHeight");

And if your browser is older you can try this one:

var browserHeight:Number = ExternalInterface.call("eval", "document.getElementsByTagName('body')[0].clientHeight");

Browsers will also handle errors differently, so if you try to use one of those JavaScript functions in one browser you might get undefined return, and in another browser you might get an error dialog box.

Here is an example of this in action, it opens in a new browser window to show it properly.
If it was embedded on this page using an <iframe> tag then the size returned is that of the iframe, not the browser.

- Browser Height Example -

Obviously if you were interested in the browser width then you could do exactly the same thing but replace innerHeight with innerWidth and clientHeight with clientWidth.

Comments welcome.

Synchronized Scrollbars

2010-08-11T15:36:00.000-07:00

I recently had a need for two side-by-side TextAreas whose vertical scrollbars were synchronized. So if you drag the left scrollbar, the right one updates, and vice versa.

I've written a utility class called LinkedScrollers that synchronizes the scrolling of two Scrollers. It has 5 public properties:

enabled (defaults to true) - set to false to allow scrollbars to move independently
scroller1 - the first Scroller
scroller2 - the second Scroller
component1 - the first SkinnableComponent, e.g. List, TextArea
component2 - the second SkinnableComponent (List, TextArea, etc)

Originally I wanted to bind the scrollers directly to my LinkedScrollers in MXML like this:

<spark:LinkedScrollers scroller1="{list.scroller}" scroller2="{textArea.scroller}"/>

But unfortunately the scroller property on List/TextArea is not bindable, so that didn't work. You can still use the scroller1 and scroller2 in ActionScript (e.g. in the application's creationComplete handler) to set the scrollers.

So another solution is to set the component1 and component2 properties to the two SkinnableComponents that you want to link (Lists, TextAreas, etc). It should work for any SkinnableComponent that contains a "scroller" skin part.
E.g.

<spark:LinkedScrollers component1="{list}" component2="{textArea}"/>

Here it is in action, view source enabled (right click on the example below):

As you might guess, this follows on from my previous post on Spark TextArea With Line Numbers.

Spark TextArea with Line Numbers

2010-07-16T10:46:00.000-07:00

Here is a skin that you can use on the Spark TextArea class to show line numbers down the left side of the text.
The line numbers use the same size font as the TextArea.

It is very simply to use, simply set the skinClass property in mxml like this:

<s:TextArea skinClass="flex.utils.spark.TextAreaLineNumbersSkin"/>

If you want a horizontal scroll bar on the TextArea, then set lineBreak="explicit" and the horizontal scrollbar will appear.

Here is an example of it in action (right click to view source).

It would be very easy to modify this skin to make it resizable by adding a resize handle in the bottom right corner. Look at the source code from my previous blog post on Resizable Controls, specifically the flex.utils.spark.resize.ResizableTextAreaSkin class, it uses a custom skin for the Scroller, which adds the resize handle.

Flex 4 Spark Resizable Controls

2010-06-28T16:48:00.000-07:00

Please go here for Flex 3 Resizable Containers.

I've created a bunch of skins for many of the common Spark components that allows them to be resized. Each of these skins contains a resizeHandle that when dragged allows the control to be resized. There are two resize handle classes that you can use, the default is called flex.utils.spark.resize.ResizeHandleLines. You can replace every occurrence of that class with flex.utils.spark.resize.ResizeHandleDots if you prefer.

Here are a list of resize skins:

ResizableTextAreaSkin (skin for spark.components.TextArea)
ResizableDropDownListSkin (skin for spark.components.DropDownList)
ResizableComboBoxSkin (skin for spark.components.ComboBox)
ResizablePanelSkin (skin for spark.components.Panel)
ResizableTitleWindowSkin (skin for spark.components.TitleWindow)
ResizableDraggableTitleWindowSkin (draggable skin for spark.components.TitleWindow)
ResizableScrollerSkin (skin for spark.components.Scroller)
ResizableTitledBorderBoxSkin (skin for flex.utils.spark.TitledBorderBox)
ResizableLabel (extends spark.components.Label, not a skin)

With the exception of the ResizableLabel class, all the others are Skins, and as such can be used very simply by setting the skinClass="flex.utils.spark.resize.___Skin" property to the appropriate skin.

Another option is to create a CSS style for ALL spark.components.Scroller classes to use the flex.utils.spark.resize.ResizableScrollerSkin class like this:

<fx:Style>
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
@namespace spark "flex.utils.spark.*";
@namespace resize "flex.utils.spark.resize.*";

/* Make all Scroller's use the resizable scroller skin. */
s|Scroller {
skin-class: ClassReference("flex.utils.spark.resize.ResizableScrollerSkin");
}
</fx:Style>

** Note that I've renamed the Flex3 package flex.utils.ui.resize.* to the new Flex4/Spark package name flex.utils.spark.resize.*.

The most used skin is the ResizableScrollerSkin, it is used on TextAreas, Lists, DataGrids, Trees, ComboBoxes, DropDownLists, and anything else that uses a Scroller component. The way it works is to use a skin for the Scroller that adds the resize handle and uses custom HScrollBar and VScrollBar classes which leave room for the resize handle (the simplest way I could think to do it). Each of the resizable skins uses the ResizeManager class to handle the mouse events and resize the appropriate control.

The resizable ComboBox and DropDownList skins are slightly different in that they both save the size of the drop down list since it gets destroyed and re-created each time. It also sets the popUpWidthMatchesAnchorWidth="false" after resizing since the width no longer matches the anchor.

I've also added support for restricting the resize in only the vertical or horizontal direction. There are many ways you can do this, you can either set a style on the resize component:

.resizePanel {
resize-direction: vertical; /* or horizontal */
}

Or you can call a static method on the ResizeManager class:

ResizeManager.setResizeDirection(resizePanel, "vertical"); // or "horizontal"

Or if you can access the ResizeManager class (usually stored in the skin class), then you can set the resizeDirection property on the manager like this:

resizeManager.resizeDirection = "vertical"; // or "horizontal";

There are constants defined in the ResizeManager class for "vertical", "horizontal", and "both" (default).

September 30th, 2010 Update:
I've added a new skin called ResizableDraggableTitleWindowSkin that uses the MoveManager class to allow dragging the TitleWindow around the screen. It also adds a small drag handle in the titlebar too.
The same could be done for other classes (e.g. Panel) by following the same procedure. All that is required is a dragComponent (the component that listens for mouse drag events) and a moveComponent (the component that gets moved - in this case it is the TitleWindow).

Here is an example of most of the skins, view-source enabled.

TitledBorderBox (Flex 4/Spark)

2010-06-01T14:02:00.000-07:00

I've re-written my original TitledBorderBox class (Flex 3) to use Spark/Flex 4 components. It is slightly simpler, and hopefully more lightweight. It extends the SkinnableContainer class, and uses it's own skin (flex.utils.ui.TitledBorderBoxSkin).

Here are the properties on the component:

backgroundAlpha - the background alpha for the box (default: 1)
backgroundColor - the background color for the box (default: white)
backgroundVisible - if the background should be shown (default: true)
borderAlpha - the border alpha for the box (default: 1)
borderColor - the border color for the box (default: black)
borderWeight - the thickness of the border (default: 1)
borderVisible - if the border should be shown (default: true)
cornerRadius - the corner radius for rounded corners (default: 0)
dropShadowVisible - if a drop shadow is shown (default: false)
titleStyleName - the style name for the title label (default "windowStyles")
title - the title to show in the border

It also supports most of the layout properties too as styles (paddingLeft/Right/Top/Bottom, gap/horizontalGap/verticalGap, horizontal/verticalAlign, etc) for convenience.

The way the border is drawn is to simply draw a line over top of the border, but underneath the title that is the same color as the background. If you set borderVisible="false", then it will attempt to find the background color of the parent and use that instead.

Here it is in action (view source enabled, right click):

Highlight The ScrollBar Track

2010-05-14T18:04:00.000-07:00

I'm not sure what this feature is called, but have you seen in Google Chrome when you search the current web page for a certain phrase, the vertical scroll bar will be highlighted showing you all the locations of that phrase? See the screenshot on the right for an example of what I mean. In front of the track, but behind the scrollbar thumb are lines showing you were the search results are located. It's a nice little feature that I find quite helpful.

I've implemented the same thing in Flex for showing the scrollbar track highlighting when words in a TextArea are highlighted, and when items are selected in a List (it should work for a DataGrid too, but I haven't tested it).

The nice thing about my implementation is that it is very simple to set up. All you have to do is set the verticalScrollBarStyleName property on your List, DataGrid or TextArea, and then create your CSS to set the trackSkin style to one of my two custom skins and it will all work.
E.g.

<mx:Style>
.highlightList {
track-skin: ClassReference("skins.HighlightListScrollTrackSkin");
}
.highlightTextArea {
trackSkin: ClassReference("skins.HighlightTextAreaScrollTrackSkin");
}
</mx:Style>

<mx:List verticalScrollBarStyleName="highlightList"/>

The text highlighting in the TextArea is done using some useful code that I found on this blog:
How to Highlight the Text in Flex.
I slightly modified the com.components.BlockTextArea class to make it work with my skins.HighlightTextAreaScrollTrackSkin class.

Here's the example (right click to View Source):

You can also set two more styles if you want to customize the color and alpha transparency of the highlighting:
highlight-color and highlight-alpha. Just add it to the css classes shown above.

Prompting Controls (Spark/Flex 4)

2010-04-21T13:08:00.000-07:00

Here are a few useful controls written in Flex 4 for displaying prompt text, and for showing an icon in a button.

The IconButton class extends the defaults Flex 4 Button class, and adds the icon style as well as the labelPlacement (left, right, top, bottom) and paddingLeft, paddingTop, paddingRight, and paddingBottom styles.

I also made a simple extension of the TextInput class which shows a prompt text when the text input is empty and not in focus, it is called PromptingTextInput.

The third example is called ClearTextInput, it extends PromptingTextInput to show a small clear button (which is a IconButton) on the right hand side of the text input whenever there is text inside the text input.

The fourth example is what I call a PromptingList. It shows a prompt text whenever the list is empty. This is useful if you have a list that gets populated from a remote service (e.g "Loading..."), or if your list gets items added to it by the user, or by dragging items into the list (as in the example below).

Each of the prompting controls supports a style called promptStyleName which lets you set the styleName for the prompt Label.

** Note that the package structure has been renamed to flex.utils.spark.* for all Spark controls.

Here it is:

Divider Background Color

2010-04-20T14:14:00.000-07:00

Here is a simple component that extends the Flex 3 mx.containers.DividedBox class to provide two styles for filling in the background behind each divider.

My component is creatively called flex.utils.ui.DividedBox. It has all the same properties and styles as its parent, plus these two styles:

dividerBackgroundColor - the background color behind each divider, defaults to #000000.
dividerBackgroundAlpha - the alpha value for the background color, defaults to 1.

Here it is in action (View Source enabled):

Tree Item ToolTips

2010-03-31T16:57:00.000-07:00

Here is how you can set custom tooltips in Flex 3 on each item in a Tree.

First, you have to set the following properties on the Tree:

showDataTips="true" - causes tooltips to be shown
dataTipFunction="myDataTipFunction" - sets the function which returns the tooltip for each item
itemRenderer="ToolTipItemRenderer" - tells the tree to use our custom renderer (which extends the default TreeItemRenderer)

The itemRenderer isn't necessary unless you want to have control over where the tooltip is positioned (see below).

Also note that if you set the dataTipField property on the tree instead of the dataTipFunction then your tooltips will only show up when the tree item isn't fully visible due to scrollbars. By setting the dataTipFunction it forces the tooltips to always show when the mouse is over the tree node.

Now, on to the next problem. By using the method above the tooltips are always displayed. But the default position for the tooltip is right on top of the tree node, which is annoying. So this is why we use our own custom item renderer so that we can position the tooltip below or above the node (or anywhere you want it).

Here is an example with View Source enabled:

Custom Components Live Preview (Design Mode)

2010-03-17T11:22:00.000-07:00

If you have created your own component and you drag it onto your Flex app in Design Mode and it appears as a tiny almost invisible square on your screen, then watch the video below to see how you can get it working properly (like the default controls do).

I found this awesome video tutorial on YouTube that explains how you can create what is called a Live Preview of your component so that your custom component actually appears with the right appearance and dimensions.

Be sure to check out the author's blog at blog.flashgen.com.

The end result that I learned from this video is that if you have a Flex Project which contains your custom component, and you try to use it in an MXML file then it won't work properly. If the custom component is in a separate Flex Library Project (or SWC) then it will work properly.

DragHandle, ResizeHandle

2010-03-04T19:31:00.000-08:00

Here are two customizable drag and resize handles:

You can set the following properties:

rows - sets the number of rows of dots
columns - sets the number of columns of dots
dotSize - sets the dot size (defaults to 2)
dropShadowEnabled - sets whether a drop shadow is used (defaults to false)
dropShadowColor - sets the drop shadow color
keepOnTop - if true then the handle will be on top of the other sibling components
positionResizeHandle - If true then the resize handle will be positioned in the bottom right corner of the parent (ResizeHandle only)

* Note: if you explicitly set the width and height of the DragHandle or ResizeHandle, then the rows and columns properties are ignored. In this case as many dots are rendered as will fit into that area.

You can set the following styles too:

backgroundColor, backgroundAlpha - sets the background color alpha for the drag/resize handle
dragHandleColor, dragHandleAlpha - sets the color and alpha value for the drag handle
resizeHandleColor, resizeHandleAlpha - sets the color and alpha value for the resize handle

These two components are used in all the Resizable Containers.

Image CheckBox and RadioButton

2010-02-04T18:44:00.000-08:00

Here are two custom components that extend the CheckBox and RadioButton classes to render an image in between the checkbox/radiobutton icon and label.

The main property to set is imageSource which acts just like the Image.source property.

The image position depends on the labelPlacement property (left, right, top, bottom) and the horizontalGap style.

You can also set the imageWidth and imageHeight properties to scale the image down. If you only set one of those properties then the other one is calculated to keep the image's width and height ratio the same.

Note that the ImageCheckBox actually extends my flex.utils.ui.CheckBox class and not the expected mx.controls.CheckBox class.

The flex.utils.ui.CheckBox class supports backgroundColor and backgroundAlpha styles, and as a result the background is always painted. But the default alpha value is 0, so usually you won't see the background unless you set the background color and alpha. The reason for this is that the default mx.controls.CheckBox class has a gap between the checkbox icon and the label (which is the horizontalGap style). This gap causes mouse out events to fire when your cursor moves from the icon or label into this gap. As a result the checkbox tooltip will disappear, and the checkbox will not have the rollover styles. So by painting an invisible background color over the whole area of the checkbox this problem doesn't occur. Same thing applies with the RadioButton class.

Drawing Dashed Lines, Arcs, and Cubic Curves

2010-01-29T12:02:00.000-08:00

The ActionScript Graphics class supports drawing solid lines and quadratic curves. But there isn't native support for dashed lines or cubic (Bezier) curves.

I've created a sample application that shows the three line types: straight, quadratic curve and cubic curve. It also lets you choose between showing a solid line, a dashed line, or both. The line thickness can also be adjusted.

I also got a little carried away and added the quadratic and cubic control points as buttons that you can drag around the canvas to change the curve.

Most of the drawing functionality for these examples is in the GraphicsUtils.as class that contains the following static functions:

drawLine() - draws a straight line, either solid (using Graphics.lineTo() function) or dashed
drawQuadCurve() - draws a quadratic curve, either solid (using Graphics.curveTo() function) or dashed
drawCubicCurve() - draws a cubic curve (two control points), either solid or dashed. The curve is an approximation done by dividing the curve into many small segments and drawing straight lines
drawCircle() - draws a circle, either solid (using Graphics. drawCircle() function) or dashed
drawArc() - draws an arc, either solid or dashed

The dashed lines are drawn by dividing the line into many small segments to draw the dashes. By default a dash length of 10 pixels is used, but that is customizable.

The equations used to calculate the values at any point along the line for the three cases were found on the Wikipedia entry for Bézier curves.

Flex Context Menus

2010-01-26T11:40:00.000-08:00

I've had some frustration with Flex ContextMenus, so I thought I'd write an entry about the basics of creating context menus, adding items, listening for context menu events, and a few restrictions on context menus.

Every InteractiveObject (e.g. Application, Panel, Button, etc) contains a contextMenu property. For most components it will be null and you'll have to create a new menu and assign it to that property. So you can have different context menus for different components.

Here is a simple example of a context menu set on the application:

Here is a short snippet from the above example showing you have to create a ContextMenu, hide the built-in menu items, and listen for menu events.

private function initContextMenu():void {
    // 1. Create the context menu if it doesn't exist
    // it will exist for the application, but won't for most other components
    if (!contextMenu) {
        this.contextMenu = new ContextMenu();
    }

    // 2. Hide the built-in menu items 
    // (you can't remove the basic 3 or 4 items like: Settings, About, etc)
    contextMenu.hideBuiltInItems();
    
    // 3. Add menu items, you can optionally set the menu item enablement and
    // visibility in the ContextMenuItem constructor
    var firstItem:ContextMenuItem  = new ContextMenuItem("Hello there!", true);
    contextMenu.customItems.push(firstItem);
    var secondItem:ContextMenuItem = new ContextMenuItem("Disabled");
    contextMenu.customItems.push(secondItem);
    var thirdItem:ContextMenuItem = new ContextMenuItem("Hidden");
    contextMenu.customItems.push(thirdItem);
    
    // 4. Listen for menu events
    // this event happens when the context menu is about to show
    contextMenu.addEventListener(ContextMenuEvent.MENU_SELECT, 
        function(event:ContextMenuEvent):void {
            // add logic here to determine the visibility or enablement
            secondItem.enabled = false;
            thirdItem.visible = false;
        });
    
    // 5. Handle menu item click events
    var handler:Function = function(event:ContextMenuEvent):void {
        Alert.show("You clicked on the menu item '" + 
                    event.currentTarget.caption + "'");
    };
    firstItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handler);
    secondItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handler);
    thirdItem.addEventListener(ContextMenuEvent.MENU_ITEM_SELECT, handler);
}

There are many restrictions to Flex ContextMenus, some of which will drive you crazy. Read carefully, it will save you time later.

Maximum of 15 custom menu items in the menu
No sub-menus allowed
No icons in menus
Menu items must be 100 characters or less
Control characters, newlines, and other white space characters are ignored
MANY reserved words including (but not limited to):
- Save
- Zoom In
- Zoom Out
- 100%
- Show All
- Quality
- Play
- Loop
- Rewind
- Forward
- Back
- Movie not loaded
- About
- Print
- Show Redraw Regions
- Debugger
- Undo
- Cut
- Copy
- Paste
- Delete
- Select All
- Open
- Open in new window
- Copy link
- Copy Link Location
- Del

I'm not quite sure why there are so many restrictions, but I'm sure Adobe has a good reason for it!

More details about the restrictions can be found on the ContextMenuItem page.

There are a few other solutions for people who want more control over the menus. These usually involve adding right click listeners in JavaScript on top of the Flex application and passing that event into Flex to position and show a custom menu instead of the usual Flex context menu.
Here is one such solution: Custom Context Menu.
These solutions can work quite effectively, but since they depend on the browser they can be quite buggy.

Pass ...rest as a parameter to another function

2009-11-04T10:07:00.000-08:00

I recently needed to have a function that accepted a variable number of parameters. This can easily be accomplished using the function myFunction(...rest) syntax. This way I can pass in no parameters (in which case rest is an empty array), one parameter, or multiple parameters.

But, then I wanted to pass those same parameters on to another function that also accepted a variable number of parameters (e.g. ExternalInterface.call(jsFunctionName, ...args)). If you simply call the other function and pass in rest as a parameter then it won't work as expected. E.g.

    public function sayHello(...rest):void {
        // this won't work as expected
        callMe(rest);
    }
    
    private function callMe(...rest):void {
        trace(rest.length + ": ['" + rest.join("' | '") + "']");
    }

What happens in callMe(...rest) is rest is an array that actually contains only one item - another array which has the rest parameters that were originally passed into sayHello(...rest).
So if you made a call like this:

sayHello("Hello", "World", "!");

Then the traced output would be 1: ['Hello,World,!'].
Notice that there is only 1 parameter!

The way to get around this is to use Function.apply(null, args) to call the function instead, like this:

    public function sayHello2(...rest):void {
        // use Function.apply to pass in the rest parameters properly
        var func:Function = callMe; 
        func.apply(null, rest);
    }

So if you made this call now:

sayHello2("Hello", "World", "!");

Then the traced output would be 3: ['Hello' | 'World' | '!'].
Now there are 3 parameters as expected.

I found some help on this topic from The Joy Of Flex Blog by David Colleta.

LineChart with CheckBox Legend (Filter Series)

2009-10-23T14:09:00.000-07:00

The following example shows a LineChart with a custom Legend that has CheckBoxes next to each LegendItem which allows you to filter the Chart to only show certain series (in this case lines).

I've created a custom class called CheckBoxLegend which extends Legend. It sets the legendItemClass to be the flex.utils.ui.charts.CheckBoxLegendItem class which extends the default LegendItem to add the CheckBox on the left side of the legend item.

Clicking on the legend item toggles the CheckBox and updates the Chart to show or hide the corresponding series. The series is hidden by setting the alpha value to 0.

Here is a snippet of how you use it in MXML:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
xmlns:charts="flex.utils.ui.charts.*">

<mx:LineChart id="linechart" ... />
<charts:CheckBoxLegend dataProvider="{linechart}"
color="#000000" direction="horizontal"/>

</mx:Application>

Here is the example, right click to view source:

Note that the minimum and maximum values of the vertical axis don't get updated when you uncheck one or more series. The Axis calculates these values but doesn't take into account the visibility of the Series. So I've added a new Update Vertical Axis Min/Max CheckBox that will go through all the y axis number values and calculate the minimum and maximum values for the visible series. I haven't tested this out on complicated datasets or different chart types, but hopefully it will be a good starting point.

Originally I played around with actually removing the series from the chart (instead of hiding it), but that caused more problems because when you remove a series the chart will automatically re-color any of the remaining series (unless you specified the stroke/color/fill styles) and the legend gets re-populated without the unchecked series. So it was easiest to just hide the series.

Elevation Map using USGS and Yahoo Maps

2009-10-22T14:17:00.001-07:00

** January 2012 Update
Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)

This example combines two different services:

Flex Yahoo Maps - shows an interactive map component similar to Google Maps (Flex 3).

USGS Elevation Service - gets the elevation at a given Latitude and Longitude.

The Flex application below has the Yahoo Maps component on top and an AreaChart below which will show the elevation.
Click on the map to add a marker. When you click again in a different location another marker is added, and the elevation chart at the bottom will show the elevation profile for the two points. If you want a more fine-grained elevation profile you can use the drop-down menu above the elevation chart to adjust how frequently the elevation is looked up (every KM, every 500m, every 200m). Keep in mind that the more elevations you look up the slower it is.

You can also search for an address too using the search bar. The elevation at the search location will be displayed in the toolbar to the right of the search button. You can also show kilometer markers as well by checking the Show KM Markers checkbox in the top toolbar.

Feel free to use this code for your own purposes. All you have to do is sign up for a Yahoo Maps key here:
https://developer.apps.yahoo.com/wsregapp/
And then edit the ElevationMapFunctions.as file and put your key in the APPID constant.
Here is the Yahoo Maps API.

There are also a few custom markers included in the source code that you can use and/or modify for your own needs.

Use the mouse scroll wheel to zoom in or out (or use the +/- control on the map).

This is a very simple example and a lot more could be done with it. It's really just to show how to get elevation data from the USGS Web Service, and how to add markers to a Yahoo Map.

** November 2009 Update
I've updated the example to include another custom marker - the TitleMarker. This marker shows a label on the marker when it is collapsed. I've also added the option of Showing KM Markers which are displayed as TitleMarkers.
I also separated the Elevation code into separate packages, and added some operations to allow querying for multiple elevations in sequence. When an elevation is returned from the USGS web service it is cached in the ElevationService class to speed things up.

** January 2010 Update
I've restricted the number of elevations that can be looked up at one time to 30. This is to prevent someone trying to lookup the elevation every 200m between Canada and Europe. If you download the source code, and get your own yahoo maps application id then you can do what you like!

** January 2012 Update
Yahoo has officially shut down support for Flex maps, so this example no longer works. For other options try the Google Flash Maps component (which is also deprecated now too)

Helper Classes in ActionScript

2009-09-25T10:51:00.001-07:00

I've had a few people ask me recently if you can have multiple classes defined in the same file in ActionScript. This is something that Java developers are probably very familiar with.

Well the answer is yes, you can. They are called Helper Classes, but they are defined a little bit differently from how you might expect, and from how it is done in Java.

Here's a simple example of a helper class:

package helper
{
    public class MainClass
    {
        public function MainClass() {
            var helperCls:HelperClass1 = new HelperClass1();
        }
    }
}
    
import mx.controls.TextInput;

class HelperClass1 extends TextInput 
{
    public function HelperClass1() {
    }
}

Notice that the helper class is defined outside of the package wrapper. And yes, multiple helper classes are allowed in the same file. One thing that surprised me was how the helper class has its own separate section for imports that are also outside of the package block.

Note that helper classes are only available to the main class, and cannot be accessed outside of that file. Even a subclass can't use helper classes belonging to its superclass.

Here is another website which has some more information on this topic:
Class syntax in ActionScript 3.0.

Image Splitter in AIR

2009-09-10T13:14:00.000-07:00

I haven't played with Adobe AIR much, and thought I'd give it a try. I have a whole bunch of sprites - images that contain many different smaller images all side by side - that I wanted to split up into separate images.

So I decided to use Adobe AIR to solve this simple problem. The WindowedApplication lets you choose an input image file and an output directory. The image is loaded into the window and then you can choose the column width and row height for how you want to split the image up. Alternatively you can specify the number of rows and columns. This will draw a gray grid on top of the input image showing you how the image will be split up.

Click on the images on the right side of the page to see the full size image. The top screenshot shows the input image being split into 6 columns and 4 rows. The middle screenshot shows how the background color can be made transparent. And the bottom example shows the output images.

You can also choose between using the JPEGEncoder or the PNGEncoder (PNG supports transparency). If you choose PNG then you can also optionally choose a color that you want to make transparent (e.g. the background color). You can click on the input image to choose the color you want transparent, or you can use the ColorPicker.

There is a filename prefix textbox too for choosing how you want the output files named. After the prefix a number will be appended (e.g. mario1.png, mario2.png) for each output image. Output images will not overwrite existing images unless you check the Overwrite checkbox.

Feel free to modify for you own use. Because it's an AIR application I've only attached screenshots.

- DOWNLOAD SOURCE ZIP FILE -

- VIEW SOURCE -

Input Image

Transparent background

Output Images

Tour de Flex and Flex Component Explorer

2009-08-11T10:28:00.000-07:00

If you haven't already seen this awesome Flex website then check it out.

Tour de Flex

It has examples (including source code) of all the common Flex 3 components (DataGrid, Tree, Button, Canvas, etc) as well as a TON of other examples (269 at the last count) from various open source projects including Flex Yahoo Maps, advanced Data Visualizations (3D charts, gantt charts, calendar views, etc), Cloud APIs (searching Amazon, eBay, Flickr, etc) and much more.

There is also the original Adobe Flex 3 Component Explorer which contains examples of just the core Flex 3 components.

For examples on styling components check out the Flex 3 Style Explorer site. I also find this list of all the styles for each Flex component useful: Flex 3.0 CSS Properties List.

Counting Words, StringWordValidator

2009-08-07T11:13:00.000-07:00

I was recently required to limit the number of words in a TextArea. It's easy to limit the number of characters by using the TextArea.maxChars property, but how do you restrict the number of words?

The way I solved this problem was to make a new class that extends mx.validators.StringValidator and adds the following properties:

maxWords - the maximum number of words allowed
minWords - the minimum number of words allowed
tooManyWordsError - the error string to be displayed when too many words are entered
tooFewWordsError - the error string when not enough words are entered
trim - trims the input string before the validation occurs

Here is the utility function I wrote for counting how many words are in a string:

    /**
     * Splits the text into words and returns the number of words found.
     * If the text is null or blank (trimmed) then 0 is returned.
     * The regular expression used is /\s+/g which splits the text into
     * words based on whitespace.
     */
    public static function countWords(txt:String):uint {
        var count:uint = 0;
        if (txt != null) {
            txt = StringUtil.trim(txt);
            if (txt.length > 0) {
                count = txt.split(/\s+/g).length;
            }
        }
        return count;
    }

And here is it in action (view source). The validator will run when the TextArea loses focus (that is the default behavior), so try typing in one word and then pressing tab. You can also adjust the minimum and maximum number of words allowed and the validation will be updated immediately.

StringWordValidator source

ErrorTipManager source (see previous blog post on Always showing error tips)

I also included the ResizableTextArea class too just for fun.

Always showing error tips (validators)

2009-08-06T14:43:00.001-07:00

Many people have complained about how Flex 3's error validation messages are not shown unless you hover your mouse over the input field that is invalid. See the image on the right and you'll probably know what I'm talking about. If not, then when you use a mx.validators.Validator on an input field such as a TextInput or TextArea and the user enters invalid data then the input control gets a red border indicating an error. But the error message (e.g. "This field is required") is ONLY displayed when the user hovers the mouse over the input field.

After reading a few other posts on the subject, including a bug report that is in the Adobe Bug Tracker I decided to see if I could come up with a nice easy solution.

I made a new class called ErrorTipManager that has a bunch of public static functions that lets you easily attach your validators (or your own validation functions). The code is documented, so view the sample below and right click view source to get the source code. The error tips should stay in the correct position even when the input moves (from a window resize or layout).

A lot of credit goes to Aral Balkin's blog entry on Better form validation in Flex. I also got help from this blog on how to show error tooltips.

Note that if you use the ErrorTipManager as described above and you set the validator.enabled = false; then the error tip will still be displayed. The validator does not fire an event when the enabled value changes, so it isn't possible to automatically update the visibility of the error tip. Instead you can do it manually by calling ErrorTipManager.hideErrorTip(validator.source, true). See the source code of the example above - I've added in a CheckBox that controls the second validator's enabled state.

August 26th, 2009 update
Fixed a problem where the error tip wasn't being position properly.

November 2nd, 2009 update
Added two new functions to ErrorTipManager for handling error tips in popup windows:

registerValidatorOnPopUp(validator, popUp, hideExistingErrorTips) - registers the validator and adds move and resize listeners on the popUp. It can also hide any existing error tips (this is a good idea because the existing error tips appear on top of the popUp window which doesn't look good).
unregisterPopUpValidators(popUp, validateExistingErrorTips) - unregisters all the validators associated with the popUp and removes the move and resize listeners that were added to the popUp. It can also validate all the remaining validators which will cause the error tips to re-appear now that the popUp has closed.

March 24th, 2010 update
Fixed a problem where the error tip wasn't being positioned properly when the parent container was scrolled. It will also hide the error tip if the source component gets scrolled out of the view. I also now move the error tip in front of other error tips when it gets positioned.

July 14th, 2010 update
Added two more event listeners in the ErrorTipManager to listen for when the input is hidden (visible="false") and when it gets removed from its parent (input.parent.removeChild(input)).
This still does not solve the problem where the error tip remains visible when the parent is hidden or removed (e.g. if the input is inside a TabNavigator and the tab changes). In this case I'd suggest manually hiding or removing the error tip. Listen for the appropriate event like "change" and then call ErrorTipManager.hideErrorTip(input).

March 2011 update
I've posted an alternate approach to displaying validation error messages that doesn't involve the rather hacky approach above. You can view the blog post here.

DataGridColumn header tooltips

2009-07-29T15:35:00.000-07:00

I really thought that something as simple as putting a tooltip on a DataGridColumn header would be easy to do in Flex.

If you want to make your own headerRenderer, then it is obviously very simple to just set the toolTip property in your renderer. But I was curious if it could easily be done with out a custom header renderer. My solution was to create a new class which extended DataGridColumn and adds three new properties: headerToolTip, headerToolTipPosition, and headerTextTruncate (which adds the "..." if the headerText is too long to fit).

Here is the simplified version of the MXML code:

<mx:DataGrid x="10" y="10" width="500" height="130" dataProvider="{employees}">
  <mx:columns>
    <ui:DataGridToolTipColumn headerText="Phone" dataField="phone" width="90"
      headerToolTip="Phone Number (tooltip above)" headerToolTipPosition="above"/>
  </mx:columns>
</mx:DataGrid>

The headerToolTipPosition property can have the following values:

above - positions the tooltip above the header

below - positions the tooltip below the header

left - positions the tooltip to the left of the header

right - positions the tooltip to the right of the header

inline - positions the tooltip on top of the header

default - positions the tooltip slightly below and to the right of the header (this is the default value if headerToolTipPosition isn't specified.

And here is the example (right-click View Source for the full source code):

Feel free to use this code or modify it to your own needs.

** Updated on September 16^th 2009

Fixed it so that setting headerWordWrap="true" now works as expected.

When the headerToolTip isn't defined then no tooltip is shown.

Added a new property: headerTextTruncate which will truncate the headerText and add the ellipsis ("...") if the headerText doesn't fit inside the renderer. Note that this property doesn't work if the headerWordWrap property is set to true.

Loading Remote SWFs and parameters

2009-06-30T17:22:00.000-07:00

Here is another example of one SWF loading another SWF and how parameters can be passed through the url.

The main application (called Loader1) has a panel which displays information about the current application, parameters, url etc.

The main application loads a remote application SWF (called Loader2) which also has the same panel displaying information about the application, parameters, url, etc. The differences are highlighted in bold.

Here is the code for loading a remote swf - notice how parameters are passed into the url:

private function loadRemoteSWF():void {
    var remoteSwfUrl:String = 
        "http://keg.cs.uvic.ca/flexdevtips/loaders/Loader2.swf?loaderurl=hello";
    var loader:SWFLoader = new SWFLoader();
    loader.addEventListener(Event.COMPLETE, remoteSWFLoaded);
    loader.load(remoteSwfUrl);
}

private function remoteSWFLoaded(event:Event):void {
    var loader:SWFLoader = event.currentTarget as SWFLoader;
    ui.addChild(loader.content); // ui is a UIComponent
}

In the remote application you can access the parameters that were passed in from the main application through the SWFLoader by the parameters property, but you MUST be inside the remote application MXML (e.g. in this case in Loader2.mxml), otherwise if you use Application.application.parameters this will refer to the parameters from the main application and not the ones that were passed in using the SWFLoader.

Source Code:

Loader1 (Main Application), or right click View Source
Loader2 (Remote SWF Application)

Default stylesheet in an SWC (Flex Library Project), and embedded font rotation

2009-06-22T12:33:00.001-07:00

For ages now I've been trying to figure out how I can use a StyleSheet from inside my Flex Library Project in ActionScript. I kept reading that it is very resource intensive to be calling UIComponent.setStyle(...) at runtime, so I wanted to set all my styles using a StyleSheet. The LiveDocs on the subject seem to say that there are two ways to load a StyleSheet:

From inside MXML in your Application using the <Style source="assets/styles.css"/> tag
By loading an external stylesheet SWF file (compiled from a CSS file) using the
StyleManager. loadStyleDeclarations(url)

Then I finally found the solution in this article (right near the bottom of the page in the comment by Henk). And that pointed me to this LiveDoc - Applying styles to your custom component which solved the problem. Scroll most of the way down until you get to the part called "Applying styles from a defaults.css file".

If you don't want to read the articles above, here is my brief summary.

Using a StyleSheet in your FlexLibrary Project:

create a StyleSheet in the src directory of your project, and call it defaults.css
open the project Properties > Flex Library Build Path and check the src/defaults.css file under the Assets tab
define your styles inside the defaults.css StyleSheet

Restrictions:

You can include only a single style sheet in the SWC file
The file must be named defaults.css
The file must be in the top-most directory of the SWC file

*Note: it appears that having a defaults.css file in your Flex Application project (swf) also works without having to specify the stylesheet in the mxml (e.g. <mx:Style source="defaults.css"/> is not needed).

Using Embedded Fonts inside Flex Library Project/SWC:
If you want to use an embedded font inside your library project you have two ways of doing this:

Embed the font inside an ActionScript file like this (the font is inside the project src/assets directory):
[Embed(source='/assets/verdana.ttf', fontName='localVerdana', mimeType='application/x-font')] public var verdanaFont:Class; ... setStyle("fontFamily", "localVerdana");
Or put your embedded ttf font in your project's src directory and embed the fond using the defaults.css file (the font must be in the src directory for this to work - see this Adobe Bug for more details):
defaults.css:
@font-face {
  font-family: localVerdana;
  font-weight: normal;
  src: url("verdana.ttf");
}
.label {
  /* must use embedded font for label rotation to work */
  font-family: localVerdana;
  /* must specifically set the font weight */
  font-weight: normal;
}

Note that if you want to set the DisplayObject.rotation property then you have to use an embedded font otherwise it doesn't work.

Here is a simple example of font/label rotation (right click "View Source" for the code).
In this example I actually included three fonts - Verdana plain, Verdana bold, and Comic Sans.

* Note that fonts can greatly increase the size of your SWF. The three fonts that I used above are all about 150 KB each. One way to reduce the size of your SWF is to restrict the unicode character range (meaning that only part of the font set is included in your SWF). Here is the LiveDoc on Using Fonts and Setting Character Ranges.

Ben Stucki's blog helped me figure out how to embed a bold and plain font in CSS.

Error: Could not find resource bundle rpc

2009-06-20T21:51:00.000-07:00

I ran into this runtime error "Error: Could not find resource bundle rpc" when running my application which loads a remote SWF file. After a few futile Google searches (which turned up this bug report) I realized that I had compiled the remote SWF using the Flex 2.0.1 compiler instead of the default Flex 3.2. Once I changed my remote SWF to be compiled using the 3.2 compiler (this can be done under the project
Properties > Flex Compiler > Use default SDK (currently "Flex 3.2") then it all worked as expected. So I'm guessing that Flex 3 and Flex 2 SWFs don't play nicely...

Creating a BevelFilter

2009-06-17T13:22:00.000-07:00

It is remarkably simple to add a bevel filter to any DisplayObject using the filters property. You can also apply a bevel filter to a BitmapData object by calling the applyFilter() function.

The two classes that you can use are: BevelFilter or GradientBevelFilter. In the example below I use the BevelFilter because it is slightly more simple. Almost all the properties are the same, except that the GradientBevelFilter class lets you choose more than 2 colors, as well as the ratios and alpha values. Here is a GradientBevelFilter example.

Here is an example that lets you set all the BevelFilter properties and see how it affects the image on to which the filter is applied.

Most of the properties are quite self explanatory. The quality property can be set using constants defined in the BitmapFilterQuality class (high = 3, medium = 2, and low = 1). But the documentation also says that the allowed quality values are from 0 - 15, but you decrease the performance by setting the quality value higher than 3.
There are also constants for the bevel type using the BitmapFilterType class.

Adobe LiveDocs:

I'm also using the BindingUtils class to bind the bevel filter properties to the inputs (so that when the inputs change, the filter properties change too).

Unable to export SWC oem

2009-06-16T17:42:00.001-07:00

Ever seen this error? I just came across it today. Thankfully the solution is very simple, but it took a few minutes of Google searches to find the solution.

The problem is caused by having invalid assets selected in your Flex Library Project. Probably you've removed one or more asset files, but the project properties didn't get updated.
To fix this open your project Properties > Flex Library Build Path > Assets, then de-select all your assets, and then re-select the assets. Click OK and it should update your project properties with the correct assets.

Credits go to this useful website: FlexGarden.net

Full Screen support in Flex

2009-06-13T21:07:00.001-07:00

I recently learned that you can make your Flex application full screen. Here are the steps to accomplish it:

First edit your project's html-template/index.template.html file and add the following allowFullScreen property to the JavaScript code:

else if (hasRequestedVersion) {
  AC_FL_RunContent(
    ...
    "allowFullScreen","true",
    ...
);

You can also add the <param name="allowFullScreen" value="true"/> to the <object> tag, and allowFullScreen="true" to the <embed> tag for compatibility.

Next in your ActionScript code when the application has finished loading (when the stage isn't null) you can make your application full screen like this:

Application.application.stage.displayState = StageDisplayState.FULL_SCREEN;

I found this out from the The Adobe Flex 3 Programming ActionScript 3 PDF on page 547.

Flex Amazon Image Search

2009-06-11T16:59:00.000-07:00

Here's a sample application that queries the Amazon Web Services to retrieve images for CDs, DVDs, books, video games, software, etc. E.g. if you want to find the album cover for a music CD.

Here is my example - it lets you search for music, dvds, books, etc by title (and an artist for music cds, and an author for books) and then shows the resulting images ordered into 5 different image sizes. Double click an image to open the jpg in a new window.
** As Amazon keeps updating their web service this example will stop working. Please view the source code to see how it used to work!

Here are the steps to get it working in your Flex Builder:

Download the source code from the example above (Right click "View Source", then click the download link in the bottom left corner of the page)
Sign up for an Amazon Web Service Account
Copy your Access Key ID and put it in the services/AmazonItemSearch.as file
Full details and the API for the Amazon Web Services are located here

I found this website which helped me get started:
Finding cover art with Flex and Amazon WebServices.

** August 24th, 2009 Update **
As of August 15th Amazon now requires that all requests are signed. The example above has been updated to include this change, so you can View Source to see the code.

Here are some links that I found very useful in fixing the problem:

Getting Started - submitting your first request
Example REST Requests (steps on how to sign the request)
Signed Request Helper:
Use 00000000000000000000 for the access key and 1234567890 for the secret key.
Then copy the following text into the Unsigned URL textbox:
http://webservices.amazon.com/onca/xml?Service=AWSECommerceServic
e&AWSAccessKeyId=00000000000000000000&Operation=ItemLookup&ItemId
=0679722769&ResponseGroup=ItemAttributes,Offers,Images,Reviews&Ve
rsion=2009-01-06&Timestamp=2009-01-01T12:00:00Z

** One final note
When signing the request, I tried using the com.adobe.crypto.HMAC and com.adobe.crypto.SHA256 classes that come with the as3corelib project to create the signature, but it didn't work because the signature needs to be Base64 encoded. So instead I modified those two classes very slightly to make it work.

I also included a TestSignature.mxml application which was useful to make sure that the signature matched what the Signed Request Helper output.

Repairing my Creative Zen Vision:M 60GB (not Flex related)

2009-06-04T12:10:00.001-07:00

I've spent many hours this year trying to fix my Creative Zen Vision:M 60GB. It died in January after I connected it to my laptop to charge it up (using a cheap adapter that I bought on ebay). Ever since it wouldn't turn on, just had a solid blue light (or a blinking blue light when it was plugged in to the computer or wall charger). And it was not recognized by the computer either.

My first thought was that the motherboard had died (probably because of my cheap usb adapter cable), but motherboards are quite expensive to replace, so instead I bought a new battery (off ebay too!) just to make sure. When the battery arrived I installed it and nothing changed - exactly the same scenario. So then I went back on ebay and bought a motherboard (not as expensive as I thought - only $20 USD plus shipping). The motherboard arrived this week and I took the old one out and put the new one in. See below for links on how to disassemble the ZVM. It isn't that difficult as long as you have a tiny Phillips screw driver, and steady hands.

After the new motherboard was installed I first connected it to the computer with the real cables that came with the player and charged it up. The computer instantly recognized mp3 player, and installed the drivers for it. But when I went to the properties in Windows Explorer it said it was only 50mb (instead of 60gb!). After searching google it appears that many other people have had this scenario. The reason for it is the firmware isn't correctly loaded, or is out of date, or the hard drive is faulty.

When I turned on the mp3 player the screen then showed an error message saying incorrect firmware version (0.0.15) and gave me the option to clean , format, reload firmware, and reboot. Cleaning did nothing - the screen said "scan disk..." forever. So I tried to reload the firmware. I downloaded the latest version from the Creative support website (linked at the top) and ran the exe (version 1.21.02), but every time it said "Your player is not connected. Please connect your player." even though my player was connected AND was recognized by Windows Explorer. A few people mention that this error happens on Windows XP when you have Windows Media Player 11 installed, so I rolled back to Windows Media Player 10 and still the same problem.

So, next step was to find a way to get the firmware onto the player with out using Creative's default firmware updater. I came across a support forum on www.epizenter.net mentioning that some people had hacked/cracked the Zen Vision:M firmware and had been able to change the fonts, colors, themes etc. So after days of searching I finally found some tools which helped me fix my zen. I haven't been able to find an original version of my 60gb firmware, so instead I'm using a modified version that uses a different font (Comic Sans MS). It works, so I don't care :)

Here are the steps I followed:

Download the hacked Firmware Updater (it is for the ZVM 30gb but also works with the 60gb)
Download the modified firmware nk.bin and put it in this directory (on Windows) C:\CtJbFW\newbin
Connect your zen, and run the updater. All being well it will update the firmware and reboot your zen and it will work!

Links:

I've recently bought the new Creative Zen X-Fi2 mp3 player, with the touchscreen interface. At first it was a little sluggish (the touchscreen), but Creative has released a few patches that greatly improve the performance.

Blogger source code syntax highlighting

2009-05-27T15:03:00.000-07:00

If you've read my last few blog posts you might have noticed that my code snippets now have syntax highlighting that looks similar to Flex Builder.

I've found many people asking how to get syntax highlighting to work on source code that is pasted into Blogger. Most solutions use CSS and Javascript to accomplish that with varying levels of success. I've chosen to go a different route and am using a parser to turn ActionScript text into html which I then paste right into a blog post (under "Edit Html").

I'm using a slightly modified version of this amazing free parser called Java2Html created by Markus Gebhard (GNU License). It is a Java Swing application (or Applet) that takes in input text and outputs html which you can easily copy and paste into a blog. The original version (which I believe is last updated in 2006) has three different style options - Eclipse, Kawa, and Monochrome. I've added a fourth option FlexBuilder that uses the default syntax highlighting styles found in ActionScript.

If you want to try out my version, I've posted the applet here: java2html

Here are some of the options you can use (in the panel on the right side):

Style - choose one of the 4 code styles (use FlexBuilder for ActionScript)

Line numbers - shows line numbers in the html

Table border - draws a 2 pixel gray border around the code block

Background color - if checked then a white background color is set on the code block

Include <html> and <body> tags - if false then the output html doesn't inclde the <html> and <body> tags, only the content.

Use <br> at the end of lines - if false then the html won't contain <br> tags

Include new lines ("\n") - if false then the html won't contain new line characters. Turn this off if you want to paste your code into Blogger since it treats new lines as breaks!

CSS Class - by default the code block is wrapped inside a <div class="java"> tag. This option configures the class="java" part.

Again I can't take much credit for this. All I've really done is add a few of the options mentioned above and changed the parser slightly to work with ActionScript keywords (such as function, var, etc).

Here is an example of a very simple code snippet with and without styling:

private function get string():String {
var str:String = "String";
return str;
}

private function get string():String {
    var str:String = "String";
    return str;
}

One more thing, I haven't tested the various Target options, I only use the default "XHTML 1.0 Transitional (inlined fonts)".

Sorting string characters alphabetically

2009-05-26T10:51:00.000-07:00

In Java if you want to sort the characters in a String alphabetically it is very easy:

String test = "sorting";
char[] chars = test.toCharArray();
Arrays.sort(chars);
System.out.println(new String(chars)); // prints out "ginorst"

But how can we do this in Flex/ActionScript? Perhaps there is an easier way than this, but here are my utility functions that sorts the characters in a String by putting each character into an array, sorting the array, then joining the array back into a String.

/**
 * Converts the string's characters into an array.
 * @param string the string to convert into an array
 * @param unique if true then only unique characters are added to the array
 * @param ignoreCase only applies if the unique property is set to true
 */
public static function toCharArray(string:String, unique:Boolean = false, 
       ignoreCase:Boolean = false):Array {
    var array:Array = new Array();
    if ((string != null) && (string.length > 0)) {
        // for tracking unique letters
        var seen:Object = new Object();
        // add each character to the array
        for (var i:int = 0; i < string.length; i++) {
            var char:String = string.charAt(i);
            if (unique) {
                // unique characters only, possibly ignoring case 
                // use the character code as the key (could just use the letter too) 
                var key:String = (ignoreCase ? char.toUpperCase() : char);
                key = key.charCodeAt(0).toString(10);
                if (!seen.hasOwnProperty(key)) {
                    seen[key] = true;
                    array.push(char);
                }
            } else {
                array.push(char);
            }
        }
    }
    return array;
}

/**
 * Sorts the characters in the string alphabetically. 
 * @param ignoreCase if false (default) upper case letters come first then lowercase
 * @param descending if true then the String is sorted in reverse
 * @param unique if true then only unique characters are sorted and returned
 */
public static function sort(string:String, ignoreCase:Boolean = false, 
            descending:Boolean = false, unique:Boolean = false):String {
    // no point in sorting
    if ((string == null) || (string.length <= 1)) {
        return string;
    }
    var chars:Array = toCharArray(string, unique, ignoreCase);
    var options:uint = 0;
    if (ignoreCase) {
        options = options | Array.CASEINSENSITIVE;
    }
    if (descending) {
        options = options | Array.DESCENDING;
    }
    chars.sort(function(s1:String, s2:String):int {
        return ObjectUtil.stringCompare(s1, s2, ignoreCase);
    }, options);
    
    var sorted:String = chars.join("");
    return sorted;
}

Feel free to comment if you know of a simpler way to sort characters in a String.

Using Flex and AMFPHP without a services-config.xml file

2009-05-20T12:53:00.001-07:00

I've been working a bit with amfphp, sending data between Flex and PHP using the RemoteObject class. Initially I put the generic services-config.xml file in my application's src directory:

<services-config>
    <services>
        <service id="amfphp-flashremoting-service" 
            class="flex.messaging.services.RemotingService" 
            messageTypes="flex.messaging.messages.RemotingMessage">
            <destination id="amfphp">
                <channels>
                    <channel ref="my-amfphp"/>
                </channels>
                <properties>
                    <source>*</source>
                </properties>
            </destination>
        </service>
    </services>
    <channels>
        <channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
            <endpoint uri="http://localhost/amfphp/gateway.php"
                      class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
    </channels>
</services-config>

And changed my project properties to add this line to the Flex Compiler page:
-services services-config.xml

But I just came across this post which shows how to get around having to have an XML file by defining the channel at runtime.

So here is my simplified Flex code:

import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.rpc.remoting.RemoteObject;
import mx.messaging.ChannelSet;
import mx.messaging.channels.AMFChannel;


var url:String = "http://localhost/amfphp/gateway.php";
var channel:AMFChannel = new AMFChannel("my-amfphp", url);
var channelSet:ChannelSet = new ChannelSet();
channelSet.addChannel(channel);
var ro:RemoteObject = new RemoteObject("amfphp");
ro.channelSet = channelSet;
// Specify the PHP class
ro.source = "TestService";
ro.addEventListener(FaultEvent.FAULT, function(event:FaultEvent):void {
    trace("Fault: " + event.fault);
});
ro.addEventListener(ResultEvent.RESULT, function(event:ResultEvent):void {
    trace("Result: " + event.result);
});
// the TestService class must have a public helloWorld function
ro.helloWorld();

You could also do the same in MXML:

<mx:ChannelSet id="channelSet">
    <mx:channels>
        <mx:AMFChannel uri="http://localhost/amfphp/gateway.php"/>
    </mx:channels>
</mx:ChannelSet>
<mx:RemoteObject source="TestService" destination="amfphp" 
                 channelSet="{channelSet}" id="remoteObject"
                 fault="trace('Fault: '+event.fault)" 
                 result="trace('Result: '+event.result)"/>

And the corresponding PHP code (put the php file inside your webroot/amfphp/services directory):

<?php

class TestService {
    public function helloWorld() {
        return "Hello from PHP";
    }
}

So what are the benefits of this approach? Well, I'm not sure. In my case it was better because I have one logging class that does all the remoting, and is used by many different Flex applications. So instead of having to duplicate the services-config.xml file in every flex application this way I could define my endpoint url (http://localhost/amfphp/gateway.php) in one place.

Here is another site that is useful when getting started with amfphp:

amfphp video tutorials

FlashVars - passing parameters into Flash/Flex

2009-04-29T11:36:00.000-07:00

I'm sure most people are familiar with how to pass parameters into Flex using FlashVars. If you edit your project's html-template/index.template.html file and add in the flashVars parameter into the JavaScript like this:


...
} else if (hasRequestedVersion) {
 // if we've detected an acceptable version
 // embed the Flash Content SWF when all tests are passed
 AC_FL_RunContent(
   "src", "FlashVarsTest",
   "width", "100%",
   "height", "100%",
   "align", "middle",
   "id", "FlashVarsTest",
   "quality", "high",
   "bgcolor", "#ffffff",
   "name", "FlashVarsTest",
   "allowScriptAccess","always",
   "type", "application/x-shockwave-flash",
   "flashVars", "hello=world&another=one",
   "pluginspage", "http://www.adobe.com/go/getflashplayer"
 );
  }...

This adds two parameters which can be accessed from inside Flex using the Application.application.parameters variable. E.g. Application.application.parameters.hello gives you the value "world".

But if you don't want to use JavaScript (which I wouldn't recommend, but is necessary in a few cases) then you can use the old loading method (also included in the index.template.html file) like this. The important thing to note is that Internet Explorer loads the parameters in differently than all other browsers (that I've tested).


<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
   id="FlashVarsTest" width="100%" height="100%"
   codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
   <param name="movie" value="FlashVarsTest.swf" />
   <param name="quality" value="high" />
   <param name="bgcolor" value="#ffffff" />
   <param name="flashVars" value="FlashParameters=Internet Explorer only"/>
   <param name="allowScriptAccess" value="always" />
   <embed src="FlashVarsTest.swf" quality="high" bgcolor="#ffffff"
    width="100%" height="100%" name="FlashVarsTest" align="middle"
    play="true"
    loop="false"
    allowScriptAccess="always"
    type="application/x-shockwave-flash"
    flashVars="FlashParameters=FireFox,Safari,Chrome"
    pluginspage="http://www.adobe.com/go/getflashplayer">
   </embed>
 </object>

And the same thing applies to the other tags: bgcolor, width, height. Internet Explorer reads in the values that are in the <object> tag, while all other browsers (FireFox, Chrome, Safari, ...) read in the values from inside the <embed> tag. So you have to make sure to duplicate all the values.

Tree Lines

2009-04-24T16:54:00.001-07:00

In Flex I've seen how you can configure Trees by changing the disclosure (expand/collapse) icon, the folder/leaf icons, background colors, indentation, etc. But I've never seen the option for rendering tree lines like you can in Java, C# and most other languages.

I've created a custom TreeItemRenderer that does renderer tree lines. It has these properties:

<ui:TreeItemLinesRenderer
Styles
lineAlpha="1"
lineColor="#808080"
lineThickness="1"
lineStyle="dotted"/>

And here is an example of it in action (right click to view source):

If you know of any other solutions out there I'd be interested to see them.

** September 28th 2009 Updated **
I've added another example application showing how to render tree lines in an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API

Flex 4/Spark Version
Here is a very similar version written in Flex 4. It uses a lot of the same code, but uses a Spark item renderer instead. There is probably a much nicer way to do this using the new Spark Path or Line controls, but since the code was already written I went with this solution.

An example of tree lines in an AdvancedDataGrid with a Flex 4 itemRenderer is on my newer blog post.

AdvancED Flex 3 Book

2009-04-22T15:19:00.000-07:00

Does anyone own this book? It covers some good material but the code samples in it are terrible! I've never seen so many typos and so much code that does not even compile.

Here's my favorite code example from the book, see if you can count how many different compile errors and warnings you get from this snippet (page 172 of the book, copyright 2008, ...):

private var myVariable:String;
public get myVariable():void {
    return myVariable;
}
[Bindable]
public set myVariable(value:String) {
    myVariable = value;
}

It seems like after almost every page I read in it I have to type the code into Flex Builder to verify that in fact no, you can't do it that way because it doesn't even compile.

Anyways, hopefully not too many people buy this book... Or maybe by the next edition they will have fixed up the many errors.

Another Flex/ActionScript book that I bought and think quite highly of is this one:

Number and NaN

2009-04-21T10:33:00.000-07:00

What is the output of the following code?

var n1:Number = null;
var n2:Number;
trace(n1);
trace(n2);

I have Java background, so the whole NaN concept still confuses me sometimes. I would have expected that assigning null to a Number would be the same as not assigning anything to the Number. But no! When you assign n1 to null, it actually is the same as assigning it the value 0! Although the Flex compiler will actually give you a warning if you try this. If you leave a Number unassigned like n2, then it has the value NaN. Or if you try to cast a String or Object into a Number and it fails then the Number will also be NaN.

And one last note - don't set the horizontalGap or verticalGap (or any other style used by layouts) to NaN otherwise the BoxLayout will not work at all. Took me a while to figure out why my VBox wasn't laying out all the components properly!

Tree Icon Spinner (not using animated gif)

2009-04-16T16:11:00.000-07:00

I've been disappointed that Flex doesn't natively support animated gifs. I especially wanted to use them inside Flex Trees when I'm loading the children dynamically. So instead of trying to get animated gifs to work (see this example if you are interested) I created a relatively simple Spinner class that draws a circular spinner using just Flex Graphics. The spinner is animated using a Timer. If you set the startImmediately property to true then the animation starts when the spinner component is added to a parent component. And it is always stopped when it gets removed from its parent.
There are also the start(), stop() and running functions to control the spinner manually.

The spinners have a few styles that you can set to customize the appearance:

<ui:Spinner
  Properties
delay="100"
startImmediately="false"
Styles
backgroundAlpha="1"
backgroundColor="NaN"
spinnerColor="#829AD1"
spinnerHighlightColor="#001A8E"
spinnerThickness="3"
spinnerLineThickness="2"
spinnerType="gradientcircle"/>

I've created an example of the four types of spinners in four Trees. Each tree node loads its children after a 2 second delay during which time the spinner is shown, so try expanding each tree (right click to view source):

Let me know if you like them!

Also, make sure you do call stop() on the spinner when you don't need it anymore... otherwise you might notice your Flex app starts to run very slowly like mine did...

** September 28th 2009 Updated **
I've added another example application showing how to show the spinner inside an AdvancedDataGrid control.

Flex Example Application

AdvancedDataGrid API

AdvancedDataGridGroupItemRenderer API

Titled Border Box and Titled Border Panel

2009-04-01T16:42:00.000-07:00

** There is a Flex 4/Spark version of this control which can be found here.

I've written two new components called TitledBorderBox and TitledBorderWindow that both render a solid border around the component with a title textfield at the top. They are similar to TitledBorder in Java, and the <Fieldset> tag in HTML.

Skip straight to the examples - here are three TitledBorderBox components that illustrate the three layouts (vertical, horizontal, and absolute) and various title styles (right-click to View Source):

And here is an example of the TitledBorderWindow that illustrate how the border and background changes with the various properties (right-click to View Source):

Here are the properties and styles:

<ui:TitledBorderBox
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderAlpha="1"
borderColor="#000000"
borderThickness="1"
cornerRadius="0"
horizontalGap="8"
paddingLeft="5"
paddingTop="5"
paddingRight="5"
paddingTop="5"
verticalGap="6"
titleStyleName="windowStyles"/>

<ui:TitledBorderWindow
  Properties
layout="vertical|horizontal|absolute"
title=""
borderDropShadow="false"
Styles
backgroundAlpha="0"
backgroundColor="0xffffff"
borderColor="#000000"
borderThickness="1"
borderAlpha="1"
cornerRadius="0"/>

Set the cornerRadius style to have rounded corners. The TitledBorderWindow also supports the roundedBottomCorners boolean style too if you only want rounded corners at the top. And both components can have an optional drop shadow filter as well.

The TitledBorderWindow extends TitleWindow (which extends Panel) so it has all the same properties and styles. The styles that have changed from the Panel/TitleWindow defaults are listed above. I've also added support for adding custom buttons to the titleBar (next to the closeButton).

Update (April 14th 2009): The TitledBorderWindow class wasn't properly laying out the ControlBar like the Panel class does, so I've added a fix for it.

Update (March 17th 2010): scrollbars weren't correctly on the TitleBorderBox class when you use either the horizontal or vertical layout (and you restrict the size of the box). I've fixed up the borderMetrics function to property return the size of the border and now the scrollbars work properly. I also noticed that the background color didn't work if you set the layout to absolute, and that is fixed too.

Update (June 1st, 2010): I've made a Flex 4/Spark version which can be found here.

Showing the preloader again after loading is finished

2009-03-31T12:27:00.000-07:00

This is probably not very important for most people, but when I was designing my custom preloader I found it quite difficult to get it looking exactly right - the positioning, font sizes, image location, etc. And so I was constantly reloading to see the preloader appear again.

So I wrote this simple test to show the preloader again after the application has loaded. This way you can control how long the preloader is visible for, and you don't have to add all these large images to make it slow to load.

** Here is the link to my previous blog post on Custom preloaders. It also contains some useful links to other websites and tutorials on custom preloaders.

Right Click to View Source:

Setting default styles for custom components

2009-03-23T17:08:00.000-07:00

When creating custom components (e.g. extending Canvas) we sometimes want to define new style properties on our components. When I first started with Flex I would always call the setStyle() function from the constructor of my custom component. Then I noticed that if I tried to set my style property from inside MXML it didn't work.

So far I've come across two ways of solving this problem.

Default Style Sheet - defaults.css (blog post)
Class Construct

This blog post talks about the class construct idea:
Flex 3:

private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
    if (!StyleManager.getStyleDeclaration("StyledRectangle")) {
        // no CSS definition for StyledRectangle, so create and set default values
        var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
        myRectStyles.defaultFactory = function():void {
            this.fillColors = [0xFF0000, 0x0000FF];
            this.alphas = [0.5, 0.5];
        }
        StyleManager.setStyleDeclaration("StyledRectangle", myRectStyles, true);
    }
    return true;
}

Flex 4:

private static var classConstructed:Boolean = classConstruct();
private static function classConstruct():Boolean {
    if (!FlexGlobals.topLevelApplication.styleManager.
            getStyleDeclaration("myComponents.StyledRectangle")) {
        // No CSS definition for StyledRectangle,  so create and set default values
        var myRectStyles:CSSStyleDeclaration = new CSSStyleDeclaration();
        myRectStyles.defaultFactory = function():void {
            this.fillColors = [0xFF0000, 0x0000FF];
            this.alphas = [0.5, 0.5];
        }
        FlexGlobals.topLevelApplication.styleManager.
            setStyleDeclaration("myComponents.StyledRectangle", myRectStyles, true);
    }
    return true;
}

** Very important - in Flex4 you set the fully qualified class name (including package) in the style manager, this is different from Flex 3. It won't work if you only set it to the class name "StyledRectangle".

For a while that satisfied my needs, but then I recently came across a problem with the above code (which by the way was copied from the Adobe LiveDocs). If you scroll to the bottom you'll actually notice that someone else posted this same problem that I'm about to mention.

If you specify some styles using a StyleSheet, then the above code no longer works because no the StyleManager.getStyleDeclaration("StyledRectangle") doesn't return null, and so the default styles aren't set unless you specifically set them in your stylesheet.

To illustrate this problem I've gone overboard and created 5 examples to show you the evolution of my learning (Source code is available for all examples, just right click View Source. You can also click on the mxml link for each to jump directly to the mxml html view).

Example #1 (CustomComponents1.mxml) I created a simple extension of the `Canvas` class which is called `GradientCanvas1` that draws the background as a gradient using the colors and alpha values defined in the two styles
Example #1B (CustomComponents1B.mxml) The problem with the `GradientCanvas1` class is that it ignores the style values that I specify in the MXML, e.g. `fillColors="[0xff0000,0x0000ff]"`.
Example #2 (CustomComponents2.mxml) To solve the problem mentioned in Example #1B I've created another class called (creatively) `GradientCanvas2` that uses the class construct idea mentioned at the top of this blog entry. This static class construct sets up the default style values and now setting style properties in MXML works.
Example #2B (CustomComponents2B.mxml) The problem with the `GradientCanvas2` class is that if you use a stylesheet to define some (but not all) of the styles on the `GradientCanvas2` class then the class construct no longer works because the `StyleManager.getStyleDeclaration("GradientCanvas2")` doesn't return null anymore, and so our default styles aren't used.
Example #3 (CustomComponents3.mxml) And finally, the solution that I'm using (might still be problems with it). In the class `GradientCanvas3` the class construct now creates a new CSSStyleDeclaration for the class if it is null, and then defines the default styles on the defaultFactory, and that is it (the livedocs say something about the defaultFactory will only be defined if styles are set in MXML components, but I haven't been able to find a case where the defaultFactory wasn't null).

If anyone has different opinions about this stuff please let me know.

Another Custom Preloader

2009-03-19T14:05:00.000-07:00

I've been playing around with preloaders a bit recently, and thought I'd share my custom preloader. I originally found this very useful article:
http://www.pathf.com/blogs/2008/08/custom-flex-3-lightweight-preloader-with-source-code/

My CustomPreloader class is copied from the example above, and modified to be more easily customizable (I hope!). The colors and sizes are mostly defined at the top of the class.

The important functions inside CustomPreloader are as follows (they are all near the top of the class):

clear() - draws the background color/gradient

createAssets() - creates the assets (logo, progress bar, loading textfield) and positions them on the stage

draw() - draws the progress bar as the application is loading

Here is a screenshot of the preloader, click on the image to view the flex application in a new window:

** I've subsequently written a test application which is very useful when designing your custom preloader, check it out here: Showing the preloader again after loading.

Quick links:

CustomPreloader (View Source HTML)

CustomPreloader.as (direct download)

More Custom Preloaders and Tutorials

Wisebisoft Custom Flex 3 Preloader (Example)

A Preloader Museum

JesseWarden: Making A Cooler Flex Preloader (Example)

Totally Custom Preloader

Cool Loading Animated Gifs

Ted On Flash: Flex 2 Preloaders

Flex Converter: Currency, Weight, Temperature...

2009-03-18T14:14:00.000-07:00

I've written a little Flex app that handles converting between a variety of formats:

Currency (using the www.webservicex.net Currency Convertor service)

Weight (Pounds/KG)

Distance (Kilometers/Miles)

Temperature (°C/°F)

Pace (minutes per km/mile)

Baking measurements (tablespoons, teaspoons, cups, ml)

The currency conversion can be quite slow because it is using the free web service mentioned above. All the other conversions are simply mathematical.

See the example below (right click to view source):

Resizable Containers (Flex 3)

2009-03-17T17:10:00.000-07:00

Please go here for Flex 4 Spark Resizable Controls.

I previous posted a blog on a Resizable Movable Panel control which was an extension of the TitleWindow class which let the user drag the panel titlebar to move it around the screen, and drag a small resize handle in the bottom right corner to resize the panel.

I've made some updates to this class, and further extended it to support not just Panel/TitleWindow containers, but also Box (VBox/HBox), Canvas, and TextArea (similar to what Google Chrome does).

The main class that does all the work is called ResizeManager. It adds a small resize component in the bottom right corner of the container that when dragged resizes the container.

Here is an example (right click to view source). Let me know what you think!

Important: the resize containers do not resize properly if you set the resizeEffect property.

For a similar project that is devoted to movable windows, check out the MDI project which is now part of the FlexLib project.

November 30th 2009 Update: I've updated the MoveManager adding two new fields. Setting the MoveManager.constrainToParentBounds to true will cause the component's movement to be restricted to the parent's bounds. You can also set your own custom bound's constraint by setting the constrainToBounds property to a Rectangle. The way this works is by passing that bounding Rectangle into the move component's startDrag(false, bounds) function.

December 23rd 2009 Update: I've updated the MoveManager and ResizeWindow classes to fix a problem that occurred when movable="true" and resizable="true" and no dragComponent was set. Now the move and resize should work properly.

January 5th 2010 Update: I've updated the MoveManagerand ResizeManagerclasses to use custom cursors for moving and resizing. You can also set the MoveManager.moveIcon and ResizeManager.resizeIcon properties to use your own custom icons, or just edit those classes directly and change the [Embed(source="...")] metadata tags.
The move cursor is only shown when the mouse is down. The resize cursor is shown when the mouse is over the resize handle and when the resize is happening. There might be some problems with the resize cursor getting stuck always on, but hopefully it's a good starting point.

March 4th 2010 Update: I've separated the move/drag and resize handles into separate stand-alone components: DragHandle and ResizeHandle. The colors of the handles can be customized using styles. You can also control how many rows and columns of dots are shown in the handles. Alternatively you can explicitly set a width and height for the drag/resize handles and the number of dots will be calculated automatically to fill the space. The size of the dots is configurable too.

I also added a new properties to the resize components - bringToFrontOnResize, and bringToFrontOnMove (ResizableWindow only). These properties determine whether the components should be brought to the front to be on top of the other siblings. By default these properties are false. It only makes sense to set these values to true if the parent container is using an absolute layout.

I've put up a blog post about the DragHandle and ResizeHandle if you're interested.

September 15th 2010 Update: I added a new component - ResizableButton. There were a few things that had to be changed to make it resizable and movable since it is not a Container. The main difference is that the Button class by default has the mouseChildren property set to false, which prevents the move and resize handles from getting mouse events.

VPN Blocking port 80 (not Flex related)

2009-03-11T10:39:00.000-07:00

This post has nothing to do with Flex, but caused me to waste many hours yesterday so I thought I'd post it in case it helps someone else.

I recently uninstalled Cisco VPN (on my Windows XP machine), and after rebooting I could no longer use port 80. At first I thought I couldn't access the internet at all. Then I realized that I had an IP address, and I could ping google. Then I realized I could still FTP (port 21 and 22), and then I tried accessing a website that uses port 8080 and it worked. So I realized my problem was that port 80 was being blocked. After a little searching I came across this blog that helped solve me problem:

http://beer234.blogspot.com/2008/10/port-80-blocked-windows-xp.html

The gist of it is that if VPN isn't properly uninstalled then it leaves behind a firewall that blocks port 80. I have no clue why mine wasn't uninstalled properly. Anyways, if for some reason the link to the blog above doesn't work, here are the steps:

Restart the Windows XP PC in Safe Mode (press some combination of Shift, F5, F8 when booting up your computer)
Run Regedit.exe to open the registry editor
Navigate to HKEY_LOCAL_MACHINE\System\CurrentControlSet\Services\vsdatant
Select start in the right pane and modify the value to 3 (mine was set to 2)
Restart the PC and port 80 should no longer be blocked and you can use http with any browser

Amazing that so many hours could be wasted and all it took was changing a 2 to a 3 in the registry!

Filtering and Highlighting Lists and DataGrids

2009-03-06T16:19:00.001-08:00

I've written a FilterBox control that filters the data inside List and DataGrid components, and another one that highlights items.

See the example below for filtering and highlighting a List. I've included a few extra item renderers for showing checkboxes, and for highlighting DataGrid columns.
(View source enabled)

There are some limitations, such as it only highlights the first occurrence of the text. And I probably could have used data binding instead of passing in a function to the TextHighlighter, but hey - it's a work in progress.

If you use the FilterBox control, you might notice that it depends on a ButtonBox component. This is my implementation of a CheckBoxList, which has the same basic functionality as a List, but maps each data item in the list to a CheckBox, and doesn't re-use item renderers the way Lists do. This way you don't have to have a selectedField property in your data. I've noticed that the ButtonBox control doesn't scale very well if you have more than a few hundred items in the list.

Custom item renderers for Lists, ComboBoxes, and DataGrids

2009-02-20T17:24:00.000-08:00

If you haven't already read these articles on creating custom item renderers then do so now, they will save you a lot of time. I wish I had found them a few days ago!

http://blogs.adobe.com/aharui/2007/03/thinking_about_item_renderers_1.html

http://blogs.adobe.com/aharui/2007/04/more_thinking_about_item_rende.html

Who thought that creating a CheckBox list would be so difficult? I've actually ended using a custom CheckBoxList class that just puts CheckBox components directly into a VBox instead of using a List with a CheckBox itemRenderer because I was having too many difficulties getting it to work.

Most of my problems are cause by two things:

When filtering and scrolling the list I found that the checkboxes would lose their selected state. I know the renderers are recycled, but I still couldn't get it to work consistently.

I had difficulty changing the selected property of my data items through ActionScript code (e.g. select all, select none, etc). I couldn't get the renderers to update properly and have the right checked value.

Most likely it is just my lack of understanding...

Flex AutoComplete/Chooser component

2009-02-13T16:05:00.000-08:00

I have been trying to use the AutoComplete component from Adode for a few weeks now, and it has been rather painful. I keep finding problems with it, and it has been frustrating my users a lot. There is a modified version by Jens Krause that is much better.

But I still wasn't satisfied, so I started looking around for another auto-complete component, and came across this Chooser made by Hillel Coren. Check it out, it's very powerful and best of all it's freely available.

Calling functions on applications loaded using SWFLoader

2009-02-05T17:00:00.000-08:00

Following on from my last post on passing parameters to an application that is loaded using SWFLoader, this post will show you how to call a function on an application.
Here is the code to load swf:

var loader:SWFLoader = new SWFLoader();
loader.addEventListener(Event.INIT, swfLoaded);
loader.load("AnotherSWF.swf");

And here is the code to handle adding the new swf content application:

private function swfLoaded(event:Event):void {
  var content:DisplayObject = loader.content;
  // Or if you don't have the loader:
  // content = event.target.content;
  // add loaded SWF to a UIComponent to show it on the screen
  uicomponent.addChild(content);
  var sysmgr:SystemManager = (content as SystemManager);
  // must wait for the swf application to finish loading
  // otherwise the application is null
  sysmgr.addEventListener(FlexEvent.APPLICATION_COMPLETE, swfAppComplete); 
}

And here is the code to call a function on the swf application:

private function swfAppComplete(event:FlexEvent):void {
  var sysmgr:SystemManager = (event.currentTarget as SystemManager);
  var swfApp:Application = (sysmgr.application as Application);
  // call your function here, maybe add error checking
  if (swfApp.hasOwnProperty("helloWorld")) {
    var helloWorld:Function = (swfApp["helloWorld"] as Function);
    helloWorld("hi");
  }
}

Note that the SWFLoader has 2 events that could be used:

Event.COMPLETE ("complete") - dispatched when the content loading is done

Event.INIT ("init") - dispatched when the properties and functions of the loaded SWF are accessible

If you want more reading on this subject, here is another good blog on Nested SWF communication.

Passing parameters to a loaded SWF application

2009-02-04T14:12:00.000-08:00

Today I was trying to figure out how to load an SWF that contained another Flex Application and embed it into my main application. This is the code that does it:

var loader:SWFLoader = new SWFLoader();
loader.addEventListener(Event.COMPLETE, function(event:Event):void {
    var content:DisplayObject = loader.content;
    uicomponent.addChild(content);
});
loader.load("SWFLoaderApp.swf");

Then once I figured that out, I wanted to know how to pass parameters into the loaded SWF, and here is how that can be done. Change the load line to:

loader.load("SWFLoaderApp.swf?test=hi");

Then in your SWF application code, you should be able to get those parameters like this:

if (application.loaderInfo != null) {
    var url:String = application.loaderInfo.url;
    var qm:int = url.lastIndexOf("?");
    if (qm != -1) {
        var query:String = url.substr(qm + 1);
        var params:Array = query.split("&");
        for (var i:int = 0; i < params.length; i++) {
            var param:String = params[i];
            var nameValue:Array = param.split("=");
            if (nameValue.length == 2) {
                var key:String = nameValue[0];
                var val:String = nameValue[1];
                trace(key + "=" + val);
            }
        }
    }
}

** Update:
After some more testing I noticed that the above code doesn't always reliably work. And here is what I think is happening. When you start up your main application, the Application.application property is set. Then when you load an SWF using the above code, it shares this same application. So, the better way to get at the parameters passed in through the SWFLoader url is to simply get the parameters property right from your second (loaded) application like this:

// inside your loaded swf application
var params:Object = parameters;
trace("test=" + params["test"]);

From reading the documentation on the mx.core.Application page:

There are two sources of parameters: the query string of the Application's URL, and the value of the FlashVars HTML parameter (this affects only the main Application).

I found this blog quite helpful too in solving this problem:
http://rahulmainkar.blogspot.com/2007/11/swfloader-and-nested-application.html.

Accessing proxied object

2009-01-28T15:49:00.000-08:00

When receiving objects back from a server, they are usually wrapped up as a ObjectProxy. I wanted to know how I could access the protected object property on the ObjectProxy, so here's how you do it:

import mx.utils.ObjectProxy;
import mx.utils.object_proxy;
import mx.rpc.events.ResultEvent;

private function resultHandler(event:ResultEvent):void {
    var proxy:ObjecyProxy = ObjectProxy(event.result);
    var obj:Object = proxy.object_proxy::object;
}

I found the solution from this useful website:
http://www.docsultant.com/site2/articles/flex_internals.html

FormItem label verticalAlign

2009-01-19T11:45:00.000-08:00

As far as I've seen the label on FormItem's are always vertically aligned at the top. I have no idea why the Adobe guys didn't add the expected "verticalAlign" style to let the programmer choose where the label is positioned.

Anyways, I've extended the default mx.containers.FormItem control to add support for this style:

public class FormItemVerticalAlign extends FormItem 
{   
    override protected function updateDisplayList(w:Number, h:Number):void {
        super.updateDisplayList(w, h);   
        // vertically align (top by default)
        var verticalAlign:String = getStyle("verticalAlign");
        if (verticalAlign == "middle") {   
            itemLabel.y = Math.max(0, (h - itemLabel.height) / 2);
        } else if (verticalAlign == "bottom") {
            var padBottom:Number = getStyle("paddingBottom");
            itemLabel.y = Math.max(0, h - itemLabel.height - padBottom);
        }
    }  
}

E.g.

HTTPService performance of the various result formats

2009-01-07T18:19:00.000-08:00

Today I was reading about the various result formats options available for using with HTTPService requests. These formats are:

object (default) - the resulting xml is returned as an ObjectProxy, or an ArrayCollection of ObjectProxy objects
- See my post about the ObjectProxy class and how to access the proxied object
array - the root object is returned as the first item in an Array
xml - returns the well formed xml (as an XMLNode object)
e4x - returns the response as an XML object
flashvars - result is formatted into name=value pairs like "name=value&on=true"
text - returns the response as a String object

Have you ever wondered which one is the fastest?

I ran some tests on an XML file that had 22,000 lines, and here are the results:

object: 610ms
array: 600ms
xml: 244ms
flashvars: 121ms
text: 51ms
e4x: 113ms

And here is the code I used to calculate the times:

private var startTime:int;

private function loadXMLFile(format:String):void {
    var service:HTTPService = new HTTPService();
    service.url = "huge.xml";  // located in the project src directory
    service.resultFormat = format;
    service.headers["Pragma"] = "no-cache";  // no caching of the file
    service.headers["Cache-Control"] = "no-cache";
    service.addEventListener(ResultEvent.RESULT, resultHandler);
    startTime = getTimer();
    var token:AsyncToken = service.send();
    token.resultFormat = format;
}
   
private function resultHandler(event:ResultEvent):void {
    var time:int = getTimer() - startTime;
    trace(event.token.resultFormat + ": " + time + "ms");
}

Notes: there are static constants for the 6 result formats in HTTPService.
I haven't done any calculations on how long it would take to parse the XML vs. working with the ObjectProxy objects. And obviously if you are working with other files types besides XML then the results will be different.

Out of curiosity I also tested how long it would take to load the same file using a different method using the URLLoader and URLRequest classes. The result was usually around 80ms, but that was just to return the contents of the file. When converted into an XML object it was closer to 120ms.

Resizable Movable Panel

2008-12-12T14:30:00.000-08:00

Following on the examples I found at this blog http://blogs.adobe.com/flexdoc/2007/03/creating_resizable_and_draggab.html

** I've posted an updated version here that has more advanced resize/move support.

I created my own resizable window component which extends TitleWindow. It renders a small resize handle in the bottom right corner of the panel which the user can drag to resize the window. To make the window resizable, set the resizable property to true.

The window can also be dragged by the titlebar to move it (assuming that it is the child of a container that uses an absolute layout). To make the window movable, set the movable property to true. Then you'll see a drag handle in the titlebar.

The example below uses the PopUpManager to show the window as a popup (which lets the user move the panel around the screen). You can view the source from the context menu. This window also listens for Enter and Escape keyboard events which both hide the popup. The window is hardcoded to have a min width and height of 20, and a max width/height of the application's width/height.

Dynamically changing the browser title in ActionScript

2008-12-11T19:22:00.000-08:00

Many of you have probably set the Application.pageTitle property. But as the documentation says, that property can only be set in MXML. So how do you change it dynamically in ActionScript?

One way that I found is to use the ExternalInterface class and use JavaScript like this:

ExternalInterface.call("eval(window.document.title = 'New Title')");

Obviously you'd want to escape any single quotes in the new title.

One other way I found to do this is using the BrowserManager(if you have it enabled):

var browser:IBrowserManager = BrowserManager.getInstance();
browser.init("", "New Title");
// or this way:
browser.setTitle("New Title");

Hope this helps!

Flex application slows down over time

2008-12-10T16:04:00.000-08:00

I have been working on a simple Flex application that draws many rectangles in one of five different colors on a Canvas. I created a Sprite object which I used to do the drawing. At first I was drawing each rectangle like this:

var g:Graphics = sprite.graphics;
g.beginFill(0xff0000, 1);
g.drawRect(0, 0, 20, 20);
g.endFill();

But I noticed when I was drawing hundreds of rectangles over time (using a Timer object to paint new rectangles every few hundred milliseconds) this got to be pretty slow.
So my next attempt to improve performance was to cache a BitmapData object for each rectangle (they are all the same size) of a certain color:

// initialize the cache in the constructor
var cache:Dictionary = new Dictionary();

// paint each rectangle:
var color:uint = 0xff0000;
var data:BitmapData = cache[color];
if (data == null) {
    data = new BitmapData(20, 20, false, color);
    cache[color] = data;
}
g.beginBitmapFill(data);
g.drawRect(0, 0, 20, 20);
g.endFill();

This definitely improved the performance a lot, now I can draw hundreds of rectangles, but I still noticed that the rendering would slow down after a few minutes. Thankfully I came across this posting on Nabble: http://www.nabble.com/-INFO--FLEX-Effects-slowing-down-with-time-td20770945.html

Perhaps this is obvious to most people, but I was never calling graphics.clear()! So over time my sprite's graphics object was getting filled with thousands of rectangles to paint. As soon as I added sprite.graphics.clear() to my updateDisplayList() function it worked perfectly.