Thanks, Mister! » Component

Screen Capture with AIR 2 NativeProcess

Mister — Tue, 25 May 2010 01:20:57 +0000

Prior to AIR 2 the only way to capture the screen was to use something like Marapi Java Bridge that acts as a conduit between your application and the native system. However, AIR 2 now lets us call

With AIR 2 Beta and the upcoming AIR 2 release, you can now use the command-line tool “screencapture” that comes with Mac OS. Nothing extra needs to be bundled with the application for this to work on a Mac, but on Windows, you need an additional piece of code to execute the screen capture process.

The process of doing a screen capture is pretty easy. You first create a File object that points to the location of the “screencapture” command line on the Mac:

1 2	var file:File = File.applicationDirectory; file = file.resolvePath("usr/sbin/screencapture");

Then create a NativeProcessStartupInfo object that will be used when we start the NativeProcess.The arguments property of the NativeProcessStartupInfo takes a list of arguments that will be passed to the command line tool when its started. For a complete list of arguments used by the screencapture command line tool, type “screencapture –help” in the terminal window. For this example I wanted to push out a file named “screencap.png” to the desktop from a selection of the screen. Optionally, you could capture the image to the clipboard and paste it directly.

1
2
3
4
5
6
7

var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
var args:Vector. = new Vector.();
args[0] = "-i";
args[1] = "screencapture.png";

nativeProcessStartupInfo.arguments = args;
nativeProcessStartupInfo.executable = file;

Now we can start the native process:

1 2	process = new NativeProcess(); process.start(nativeProcessStartupInfo);

The screencapture command tool will be launched and you will see the selection cursor on your screen. After you make a selection, the file will automatically be saved to the desktop as “screencapture.png”.

Here is the complete project code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()">

[CDATA[

private var process:NativeProcess;

private function init():void
{
launchNativeProcess();
}

private function launchNativeProcess():void
{
if(NativeProcess.isSupported) {

var file:File = File.applicationDirectory;

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

var args:Vector.<String> = new Vector.<String>();
args[0] = "-i";
args[1] = "screencapture.png";

var nativeProcessStartupInfo:NativeProcessStartupInfo = new NativeProcessStartupInfo();
nativeProcessStartupInfo.arguments = args;
nativeProcessStartupInfo.executable = file;
nativeProcessStartupInfo.workingDirectory = File.desktopDirectory;

process = new NativeProcess();
process.start(nativeProcessStartupInfo);

}
}
]]>

To get something like this to work on Windows, you need to know a little bit of C or C# so you can call your own service and launch the screen print functionality on Windows. For more about using the NativeProcess in AIR 2 for both Windows and Mac, you check out this Adobe article.

Smooth Scrolling HorizontalList

Mister — Wed, 04 Mar 2009 05:06:04 +0000

This example is based on Alex Harui’s Smooth Scrolling List. It just changes the code to work with the HorizontalList control rather than the List control. The SmoothHorizontalScrollingList class extends the HorizontalList control adding the needed functionality to allow smooth scrolling:

Example

Source file: smoothscrollinghorizontallist.zip

Below is the full code for the example.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96

package com.custom.controls
{
import flash.display.DisplayObject;
import flash.events.Event;
import flash.events.MouseEvent;

import mx.controls.HorizontalList;
import mx.core.ScrollPolicy;
import mx.effects.easing.*;
import mx.events.ScrollEvent;
import mx.events.ScrollEventDetail;

/**
* List that uses smooth scrolling
*/
public class SmoothHorizontalScrollingList extends HorizontalList
{

private var fudge:Number;

public function SmoothHorizontalScrollingList()
{
super();
offscreenExtraRowsOrColumns = 2;
}

override protected function configureScrollBars():void
{
super.configureScrollBars();
if (horizontalScrollBar)
horizontalScrollBar.lineScrollSize = .125; // should be inverse power of 2
}

override public function get horizontalScrollPosition():Number
{
if (!isNaN(fudge))
{
var vsp:Number = super.horizontalScrollPosition + fudge;
fudge = NaN;
return vsp;
}
return Math.floor(super.horizontalScrollPosition);
}

override protected function scrollHandler(event:Event):void
{
// going backward is trickier. When you cross from, for instance 2.1 to 1.9, you need to convince
// the superclass that it is going from 2 to 1 so the delta is -1 and not -.2.
// we do this by adding a fudge factor to the first return from horizontalScrollPosition
// which is used by the superclass logic.
var last:Number = super.horizontalScrollPosition;
var vsp:Number = this.horizontalScrollBar.scrollPosition;
if (vsp < last)
{
if (last != Math.floor(last) || vsp != Math.floor(vsp))
{
if (Math.floor(vsp) < Math.floor(last))
{
fudge = Math.floor(last) - Math.floor(horizontalScrollBar.scrollPosition);
trace(last.toFixed(2), vsp.toFixed(2), fudge);
}
}
}

super.scrollHandler(event);
var pos:Number = super.horizontalScrollPosition;
// if we get a THUMB_TRACK, then we need to calculate the position
// because it gets rounded to an int by the ScrollThumb code, and
// we want fractional values.
if (event is ScrollEvent)
{
var se:ScrollEvent = ScrollEvent(event);
if (se.detail == ScrollEventDetail.THUMB_TRACK)
{
if (horizontalScrollBar.numChildren == 4)
{
var downArrow:DisplayObject = horizontalScrollBar.getChildAt(3);
var thumb:DisplayObject = horizontalScrollBar.getChildAt(2);
pos = (thumb.y - downArrow.height) / (downArrow.y - thumb.height - downArrow.height) * this.maxHorizontalScrollPosition;
// round to nearest lineScrollSize;
pos /= horizontalScrollBar.lineScrollSize;
pos = Math.round(pos);
pos *= horizontalScrollBar.lineScrollSize;
//trace("faked", pos);
}
}
}
var fraction:Number = pos - horizontalScrollPosition;
fraction *= this.columnWidth;
//trace("was", listContent.y.toFixed(2));
listContent.move(viewMetrics.left + listContent.leftOffset - fraction, listContent.y);
//trace("now", listContent.y.toFixed(2), fraction.toFixed(2), listItems[0][0].data.lastName);
}
}
}

The following code is an example of how to use the custom control in a Flex application:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:controls="com.custom.controls.*" creationComplete="init()" height="383" width="388">
<mx:Script>
[CDATA[
import mx.collections.ArrayCollection;

[Bindable]private var _dataProvider:ArrayCollection;

private function init():void
{
_dataProvider = new ArrayCollection();
_dataProvider.addItem({title:"Louis Leakey"});
_dataProvider.addItem({title:"Mary Leakey"});
_dataProvider.addItem({title:"Richard Leakey"});
_dataProvider.addItem({title:"Margaret Mead"});
_dataProvider.addItem({title:"Jane Goodall"});
_dataProvider.addItem({title:"Ruth Benedict"});
_dataProvider.addItem({title:"Franz Boas"});
_dataProvider.addItem({title:"Claude Levi Strauss"});
_dataProvider.addItem({title:"Noam Chomsky"});
_dataProvider.addItem({title:"James Deetz "});
_dataProvider.addItem({title:"Sir Arthur Evans"});
_dataProvider.addItem({title:"Pere Bosch-Gimpera"});
_dataProvider.addItem({title:"Kathleen Kenyon"});
_dataProvider.addItem({title:"Colin Renfrew"});
_dataProvider.addItem({title:"Mortimer Wheeler"});
_dataProvider.addItem({title:"Leonard Woolley"});
_dataProvider.addItem({title:"Lewis Binford"});
_dataProvider.addItem({title:"Howard Carte"});
_dataProvider.addItem({title:"Donald Johansen"});
_dataProvider.addItem({title:"Phil Harding"});
_dataProvider.addItem({title:"Alfred Foucher"});
_dataProvider.addItem({title:"Heinrich Schliemann"});
_dataProvider.addItem({title:"Mick Aston"});
_dataProvider.addItem({title:"Barry Cunliffe"});
_dataProvider.addItem({title:"Churchill Babington"});
_dataProvider.addItem({title:"Vere Gordon Childe"});
_dataProvider.addItem({title:"Gustaf VI Adolf"});
}

public function getTitle(data:Object):String
{
return data.title;
}
]]>
mx:Script>

<mx:HBox width="100%" height="200">
<controls:SmoothHorizontalScrollingList
dataProvider="{_dataProvider}"
width="100%" height="100%">
<controls:itemRenderer>
<mx:Component>
<mx:Text text="{outerDocument.getTitle(data)}"/>
mx:Component>
controls:itemRenderer>
controls:SmoothHorizontalScrollingList>
mx:HBox>
mx:Application>

Good, but…

What I would like to do is make it so the list scrolls smoothtly without the the horizontal scroll bars visible. However, I can’t yet figure out how to do this by changing just the horizontalScrollPosition, it seems to revert back to the default behavior for scrolling or blows up when you scroll from the right back to the left. I quickly began to see that to get a smooth scrolling list within Flex you would have to use an VBox or HBox container with a repeater. This method is outlined by Peter Ent “itemRenderers: Part 4: States and Transitions”.

Update

Found an interesting post for overriding the scrollToIndex method of the HorizontalList control to allow for animated scrolling using external buttons, the only issue is that I couldn’t scroll from the end of the list back to the beginning. I also found a blog post about built in animation effects for Flex 3 List controls using mx.effects.DefaultTileListEffect. However, it seems you need to use this only for a List or TileList component rather than a HorizontalList: itemsChangeEffect=”{mx.effects.DefaultListEffect}” . I have not tried this method yet to animate a list, but it may prove promising if its actually what it claims to be.

Another Solution

Ben Clinkinbeard of “returned undefined;” blog and UM fame posted a great little example of a Smooth Scrolling List that takes a List control and wraps it in a Canvas container to achieve the smooth scrolling effect. This technique has the benefit of keeping the functionality of the list but also allowing you to smoothly scroll the list by using and external tween. It should be easy to convert this to a horizontal list and retain the smooth scrolling effect. Of course, the downside to this method is that you have to render the entire list, which wouldn’t be very pleasant for large data sets, but for my needs this works great since my data set is very small. I have also experienced some resize issues when deleting items from the list. Here is an example of a Smooth Scrolling HorizontalList using a modified version of Ben’s technique:

The code for the SmoothScrollingHorizontalList class:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

/**
* Original code from Ben Clinkinbeard (http://www.returnundefined.com/2009/03/smooth-scrolling-flex-list);
* */
package com.benclinkinbeard.controls
{
import mx.controls.HorizontalList;
import mx.core.Container;
import mx.core.ScrollPolicy;
import mx.core.mx_internal;
import mx.events.FlexEvent;

public class SmoothScrollingHorizontalList extends HorizontalList
{
public function SmoothScrollingHorizontalList()
{
super();

// required to ensure all renderers get created
setStyle( "paddingRight", -1 );

// parent container will handle scrolling
horizontalScrollPolicy = ScrollPolicy.OFF;

addEventListener( FlexEvent.UPDATE_COMPLETE, handleUpdateComplete );
}

private function handleUpdateComplete( event:FlexEvent ):void
{
var combinedRendererWidth:Number = 0;

// iterate over list of renderers provided by our List subclass
// but since HorozintalList does not have variable column widths, we use columnWidth
for each( var renderer:Object in renderers )
{
combinedRendererWidth += columnWidth;
}

// list needs to be at least 10 pixels wide to show results
// and always needs to be 10 pixels wider than the combined width of the renderers
width = combinedRendererWidth + 10;

// need to shrink list height when canvas has a scrollbar so the scrollbar doesn't overlap the list
height = ( Container( parent ).maxHorizontalScrollPosition > 0 ) ? parent.height - 16 : parent.height;

// set the row height to height of list
rowHeight = height;
}

// array of renderers being used in this list
public function get renderers():Array
{
// prefix the internal property name with its namespace
var rawArray:Array = mx_internal::rendererArray;
var arr:Array = new Array();

// the rendererArray is a bit messy
// its an Array of Arrays, except sometimes the sub arrays are empty
// and sometimes it contains entries that aren't Arrays at all
for each( var obj:Object in rawArray )
{
var rendererArray:Array = obj as Array;

// make sure we have an Array and there is something in it
if( rendererArray && rendererArray.length > 0 )
{
// if there is something in it, the first item is our renderer
// but this doesn't seem to be the case for HorizontalList because obj[0] is always empty?
//arr.push( obj[ 0 ] );
arr = rendererArray;
}
}

return arr;
}
}
}

The source code for the example: smoothscrollinghorizontallist2.zip

-Mister

Flex :: ImageCache, a cheap way to cache images

Mister — Fri, 30 Jan 2009 04:55:53 +0000

In a previous post about Ely’s SuperImage, I mentioned that we decided to implement a simpler method for caching images within a Flex application. ImageCache is a simple class file that extends the Image control by adding the ability for the control to cache bitmap data. Unlike SuperImage, ImacheCache can handled SWF files, it just lacks all the bells and whistles of SuperImage, though image flicker is eliminated.

Using ImageCache

ImacheCache is just two class files. ImageCache.as which extends the Image control and ImageCachUtility.as which is a Singleton class that used by Imagecache to store and retrieve the BitmapData for cached images. Bitmap data is stored in a regular ArrayCollection object and retrieved by using the full path to the image (because image names can be duplicates but paths should be unique). Once the amount of cached images reaches the cache limit, the controls works on first in first out, dropping off older cached images as it caches new ones and staying within the cache limit. SWF fiels are not actually cached and will load as normal. You just use ImageCache like you would the Image control within your project:

1	<controls:ImageCache cacheLimit="200" id="image" source="{data.url}" width="100" height="100" complete="imageComplete()" ioError="imageError()" xmlns:controls="com.thanksmister.controls.*"/>

Cache Limit

ImageCache has a property called “cacheLimit” which tells the control how many images to cache. Because caching images can reduce the performance of your application. The larger the cache limit value, the more memory your application will use because it is storing all the Bitmap data in memory. If you want to reset the image cache, create an instance of the ImageCacheUtility and call the method “clear()”. ImageCache has been used and tested extensively for large media sites. Below is a screen shot of images from Flickr, the list on the left uses the standard Image control, the list on the right uses the ImageCache control. It seems that there may be some security issue when loading Flickr images without doing a proxying the images. Run the example locally or proxy Flickr images for best results.

Example

Code

You can download the code for the above project here. You will need your own Flickr API key to make the application work.

-Mister

Scrolling List Control with Tweener

Mister — Mon, 26 Jan 2009 06:24:21 +0000

I was on a simple little side task last week, to create a scrolling effect using the Flex control and also remove the default scroll bars. I didn’t want to do the usual trick, scrolling a HBox with items added to it using a repeater, or whatever. I wanted to animate the scrolling that occurs within an actual List control but give it a little easing effect. The call went out to Twitter for suggestions, and within minutes Jesse Warden responded with with “use the tween class dude” and also my friend Jerry Don reminded me of a new smooth scrolling List created by Alex Harui. This helped to point me in the right direction.

Scrollbars and Mouse Wheel

The first objective was to remove the default List scroll bar because I wanted to use buttons to scroll the list from the top to bottom and vice versa with just one click of a button. Ok, no problem, verticalScrollPolicy=”off” just hides the scroll bar, however it also removes the ability to scroll the list with the mouse wheel. Now I had to hack into the List control to add this functionality back. This part was not too hard, I found a good code example, though it was in German, and repurposed it for my needs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

/**
* Override the mouseWheelHandler so if the verticalScrollPolicy is "off"
* we use the MouseEvent.delta value to manually update the List control
* scroll position when there is no ScrollBar.
*
* */
override protected function mouseWheelHandler(event:MouseEvent):void
{
if(verticalScrollPolicy == ScrollPolicy.OFF && maxVerticalScrollPosition != 0){
var len:Number = dataProvider.length;
var delta:Number = Number(event.delta);
var pos:Number = verticalScrollPosition;
var newpos:Number = verticalScrollPosition;

if(delta < 0){
delta = Math.abs(delta);
if(pos + delta >= maxVerticalScrollPosition) {
newpos = maxVerticalScrollPosition;
} else {
newpos = pos + Math.abs(delta);
}
} else {
if( ((pos - delta) <= 0 ) || pos == 0){
newpos = 0;
} else {
newpos = pos - delta;
}
}

verticalScrollPosition = newpos;
}

super.mouseWheelHandler(event);
}

Tween List

I then through on some buttons that would scroll the list from the current position to either the start or the end. Now began the work with to add the easing function so the list would scroll fast at the start of the scroll and then slow down just before reaching the end or beginning of the list, depending on which way you want to scroll. I started with the built in mx.effects.Tween class which really proved to be the least effective. One problem with the List control is that its not incremental, it scrolls by row, making for a choppy scroll experience. So instead of being able to scroll in smaller increments, you have to scroll by whole numbers, which doesn’t allow enough runway to make the list easing effect noticeable. Using the regular Tween and a mx.effects.easing.Circle effect might look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

private function tweenDown():void
{
var pos:Number = list.verticalScrollPosition;
var end:Number = list.maxVerticalScrollPosition;
var tween:Tween = new Tween(this, pos, end, 1400, 10, tweenUpdateHandler, tweenEndHandler);
tween.easingFunction = Circular.easeOut;
}

private function tweenUpdateHandler(value:String):void
{
list.verticalScrollPosition = Math.round(Number(value));
}

private function tweenEndHandler(value:String):void
{
trace('tween end value: ' + value);
}

Notice that you need to round the value returned in the tweenUpdateFunction, if you don’t, then your list will get hosed because the list can’t handle values like

tween value: 0.03486542280255378
tween value: 0.01960467102681207
tween value: 0.01022360862317484
tween value: 0.0032527319110684516
tween value: 0.0001680006720050642

Smooth Scrolling List

This is where I thought Alex’s smooth scrolling list would come into play because it allows for or smooth scrolling by increments. In theory, you shouldn’t have to round up the number, you should be able to apply the values directly to the verticalScrollPosition property of the list. Alex’s prototype is suppose to allow this, which it does to some extent. The prototype list can handle it when you scroll down, but not back up to the top, it breaks down. So this doesn’t really solve the problem of smoothly scrolling the list when updating the verticalScrollPosition with a Tween effect. However, his list does have some value as it allows for smooth scrolling when you use the mouse wheel.

Example

Below is the example and code. Don’t expect the mouse wheel to work if you are on Mac OS X, because its not supported in the Flash Player. If you are interested in a work around for the mouse wheel issue, check out this the piexelbreaker.com post for a workaround. Of course the mouse wheel works fine in Adobe AIR. Also, the longer the list of data, the better the animation effect because there is more data to show the full effect. The effect could still be improved, but until Adobe releases a new set of List components that scroll properly, this is as good as it may get. Let me know if anyone has any other suggestions.

Download the ScrollTweenEffect.zip file for the source code.

UPDATE

A friend suggested I look at the Flex mx.effects.AnimateProperty to animate the scrollbar for the List. He pointed to me to a blog post by Thomas Decaux. I will try to work up an example using his approach to compare the two.

- Mister

SuperImage Redux

Mister — Mon, 19 Jan 2009 01:20:12 +0000

I have been meaning for so long to post this code. Some time ago I had the pleasure of working with John Yanarella from Universal Mind. John was helping my employer at the time to put together an application that allows users to upload, manage, and share media assets. We needed an efficient way to cache and display images to optimize the performance of loading and viewing a large number of thumbnails.

SuperImage

Last year Ely Greenfield posted on his blog QuietlyScheming a way to end images from flickering when you display them in a Flex List control. Ely created a new component called SuperImage that replaces the Flex Image control. SuperImage fixes a few issues with the current Image control layout in addition to adding the ability to cache loaded images to stop them from constantly reloading (causing the flicker when scrolling a list).

SuperImage Update

In our project we wanted use SuperImage, but what we wanted was for SuperImage to behave more like the Flex Image control. Specifically we wanted the control to broadcast the same standard events as the Image control; ioError, securityError, imageComplete, progress, completem, completeEffect. The new SuperImage also implements IDataRenderer, IDropInListItemRenderer, and IListItemRenderer interfaces. John Yanarella did a great job cleaning up the SuperImage control and add the missing functionality. We ended up not using the SuperImage and instead used a simpler implementation for caching the Image control.

Example

Below is an example similar to Ely’s SuperImage that demonstrates the problem (on the left) with the Image control and the fix (on right) using the updated SuperImage. This example also shows a text dump of events broadcast from the new SuperImage control.

Limitations

One thing the updated SuperImage still lacks is the ability to display loaded SWF files. Since our company never used the code in any project and it was based on Ely’s code, I thought it only fair to repost the update and the code for everyone to use as needed. If anyone has an further updates to the code or suggestions to fix the SWF loading issue, please post them here and I will continue to update the component.

Code

You can download the code for the above project here. You will need your own Flickr API key to make the application work. Be sure to also read Ely’s original post to see the other benefits of SuperImage. Many thanks to John Yanarella who actually did the coding on the project, I finally posted it as I promised him many months ago .

-Mister

Custom RichTextEditor

Mister — Thu, 24 Apr 2008 23:18:08 +0000

One of the longest running post on my blog has been about creating XHTML output from the Flex RichTextEditor control. I always thought it would would be nice if someone took all the comments and suggestions for that post and created a customized control that outputs proper XTHML. Well, Axel Jenson has created such a custom control. I want to send many thanks to all those who posted over the past year and to Axel for stepping up and creating this custom control for Flex. Give the component a try and let Axel know what you think.

-Mr

Error #2025 – Clash between Flex 2 & Flash CS3

Mister — Tue, 26 Jun 2007 14:50:13 +0000

I got my new copy of Flash CS3 and proceeded to make a new preloader for my Flex application. I made a document Class for my CS3 file and attached a CS3 ProgressBar component. I had a public function in the Document Class for setting the progress of the Flex preloading. I dropped the SWF file into my Flex document and set up all the preloading code. If you set a preloader in Flex it will load that file in the first frame before it loads the rest of the Flex application. You can do progressive preloading the same way you would in Flash. The CS3 preloader worked like a charm because with CS3, I can now (though still not elegantly) talk to the functions inside the loaded SWF file. Here is the CS3 Document Class code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

package com.preloader
{
import flash.display.MovieClip;
import fl.controls.ProgressBar;
import fl.controls.ProgressBarMode;

public class WelcomeScreenClass extends flash.display.MovieClip
{
private var progressBar:ProgressBar;

public function WelcomeScreenClass()
{
progressBar = new ProgressBar();
progressBar.indeterminate = false;
progressBar.mode = ProgressBarMode.MANUAL;
progressBar.setSize(150, 22);
progressBar.move(10, 50);
progressBar.setStyle("barPadding", 3);
progressBar.setProgress(50, 100);

addChild(progressBar);
}

public function setLoaderProgress(loaded:Number, total:Number):void
{
progressBar.setProgress(loaded, total);
trace("loaded: " + loaded + " of total: " + total);
}
}
}

This all sounds good so far, a decent marriage between Flash and Flex, weeee!! About a week later I noticed a bug in my Flex application. Every time you hit the Tab key on any dialog created with the PopUpManager or even the Alert, I would get the following error code:

1
2
3
4
5
6
7
8
9
10
11
12

ArgumentError: Error #2025: The supplied DisplayObject must be a child of the caller.
at flash.display::DisplayObjectContainer/getChildIndex()
at mx.core::Container/getChildIndex()
at mx.containers::Panel/getChildIndex()
at fl.managers::FocusManager/::getChildIndex()
at fl.managers::FocusManager/::sortByDepth()
at fl.managers::FocusManager/::sortByTabIndex()
at Array$/Array::_sort()
at Array/http://adobe.com/AS3/2006/builtin::sort()
at fl.managers::FocusManager/::sortFocusableObjectsTabIndex()
at fl.managers::FocusManager/::sortFocusableObjects()
at fl.managers::FocusManager/::keyDownHandler()

This particular bug is very vague and a search of the Internet yielded nothing that seem to fit my situation. I am using Cairngorm with Modules and my suspicion was that I had created a shared code typology. Modules are cool because they can reduce your initial application load, but they are a real pain in the ass to manage because you run into these strange bugs that always seem related to a race condition with loading one Class or Manager into one module. I spent a few days tracking down this issue, testing each module, commenting out code. I finally created a new project without any modules, determined that it was the shared code typology issue. I still had the same issue.

Something about the error dawned on me, the “fl.managers”. This is a CS3 code package that Flex does not have. I then decided to remove my CS3 prelaoder, and guess what, the bug went away. I had inadvertently created my own bug by using CS3 with the new ProgressBar component. This component most likely extends UIComponent, which contains the FocusManager, and therefore, causes the issue with the FocusManager in Flex. According to shared code typology 101, the first instance of the loaded manager wins.

The solution was to yank out the CS3 ProgressBar component and just create my own progress bar using the Flash drawing tools. This was a tough error, and probably not the first one that will be encountered as Flash and Flex start mingling more in the near future.

-mr

Flex List Control with Editable InputText ItemRenderer

Mister — Wed, 13 Jun 2007 15:52:04 +0000

I think the title of this post says it all. I needed a InputText for the label of images in my TitleList control. I wanted users to click on the text and edit it in place. I started out creating a simple ItemRenderer with a InputText and skinned the InputText to look like a regular label until you click to edit the information. I then decided to go a little further and make a custom control based on InputText which did all the style changes and kept broadcast a change event only when the text actually changes. I also removed the extension from any titles (like myimage.jpg becomes myimage instead).

This was all fine and dandy until I used the component within the TileList. You see, the List controls allow Alphanumeric keys as a form of navigation. This is really cool because if you have images and titles below them, you can skip from image to image by typing the first letter of the image title. However, this conflicted with the InputText. Each time I clicked on a title to edit and started to type, the TitleList would navigate based on the character I typed. This was not so cool.

I ended up with a simple solution:

event.stopImmediatePropagation();

I used stopImmediatePropogation to prevent my keyDown events on the InputText from bubbling up to the List control. Problem solved! Here is a working example, right-click on the Flex application to get the code (I can’t tell you how many people post messages about how to get the Flex source code from examples, I mean, if you have to ask….).

ItemRendererEditor Example and Source

- Mister