personal weblog of a tech addict
Posts tagged Flex
Upgrading Flash Builder
Mar 1st
Whether you’re upgrading because you’re using BETA versions that change rather frequently or upgrading to the next major release, you don’t want to lose all your hard work invested in configuring your setup. Here’s how I handle it and hopefully it’s useful to you. If you have other cool ways to persist workflows between upgrades, please share them.
Workspaces
I’ve created a workspaces folder in a custom directory on my HD where I store all the workspaces I like to use with Eclipse-based IDEs. I separate them by IDE and then by purpose. So for Flash Builder, my workspace hierarchy is like this:
/workspaces
/_fb4
/air
/as
/flash
/flex
This is where all of my IDE preferences and workbench layout settings are stored. Centralizing them here allows me greater flexibility when upgrading since I never have to worry about any changes to installation procedures overwriting my custom settings. Nevertheless, I backup my workspaces prior to upgrading and since their small text files it only takes a second to archive.
Documents Directory
On OSX, the Flash Builder installer creates an Adobe Flash Builder 4 directory in your Documents directory. The installation instructions advise you to uninstall any previous versions of Flash Builder before installing the new version. Following this advice will delete this folder if it already exists. So, be sure to back this up prior to uninstalling your current version. That way you can cherry pick anything you need after installing the new version.
Applications Directory
You should also backup up your program installation in your Applications directory for the same reasons as with the folder in your Documents directory. If you’ve heavily modified your install with additional plugins, etc., this is vital!
Plugin Restoration
Where are all my cool plugins? They got wiped during the upgrade process but if you followed my advice and backed everything up, you’ll be back up and running in a minute or two. There are generally (2) locations where plugin info is stored for Flash Builder. If you pull the data from your backups and place them in the following locations, you should have full access to all your plugins post-upgrade (provided they still work with the latest release)
#1 – /Documents/Adobe Flash Builder 4/.metadata/.plugins
#2 – /Applications/Adobe Flash Builder 4/plugins
Although this post is slanted more towards upgrading on OSX, it should be similar for other operating systems. Any issues, let me know…
Using a Custom AdvancedDataGridHeaderRenderer to Display a Custom Image
Feb 9th
You decide to use an AdvancedDataGrid to display your data and for one of the columns you would prefer to use an icon instead of a text label to indicate the kind of data this column represents.
First step is building the renderer. You can use either MXML or ActionScript but for this example we’ll use ActionScript.
package labs.otuome.ui.renderers { import mx.controls.Button; import mx.controls.advancedDataGridClasses.AdvancedDataGridHeaderRenderer; /** * Custom header renderer for displaying * a graphical image in the column header. * @author Hasan Otuome */ public class StatusHeaderRenderer extends AdvancedDataGridHeaderRenderer { ///////////////////////////////////////////////////////////////////////////////////////// // PRIVATE PROPERTIES ///////////////////////////////////////////////////////////////////////////////////////// private var _btn:Button; private const LEFT_PADDING:int = 12; ///////////////////////////////////////////////////////////////////////////////////////// // PUBLIC PROPERTIES ///////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////// // PUBLIC METHODS ///////////////////////////////////////////////////////////////////////////////////////// /** * Constructor */ public function StatusHeaderRenderer() { super(); } ///////////////////////////////////////////////////////////////////////////////////////// // OVERRIDES ///////////////////////////////////////////////////////////////////////////////////////// /** * Override to add the custom component. */ override protected function createChildren():void { super.createChildren(); _btn = new Button(); _btn.width = 16; _btn.height = 16; _btn.setStyle( 'skin', StatusMarkerHeaderIconSkin ); addChild( _btn ); } /** * Override to layout the children * @param unscaledWidth * @param unscaledHeight */ override protected function updateDisplayList( unscaledWidth:Number, unscaledHeight:Number ):void { _btn.x = LEFT_PADDING; super.updateDisplayList( unscaledWidth, unscaledHeight ); } ///////////////////////////////////////////////////////////////////////////////////////// // PRIVATE METHODS ///////////////////////////////////////////////////////////////////////////////////////// } }
Here we’ve added a 16×16 button with a custom skin that will serve as our column header and we adjust the position of the custom skin so that it displays where we’d like it to.
Now, we can provide this class name to our AdvancedDataGridColumn that we wish to customize. We do this by assigning our custom class to the headerRenderer property of the AdvancedDataGridColumn. This property can be set via MXML or ActionScript. I’ll show an example in ActionScript as that approach is slightly more involved.
import mx.core.ClassFactory; myADGColumn.headerRenderer = new ClassFactory( StatusHeaderRenderer );
Here we’ve used ClassFactory to get an instance of our custom renderer and we’ve assigned that instance to our chosen data grid column. Now, all that’s left to do is compile our application to see the result.
Introducing Opticon Runtime Debugger
Jan 9th
![]()
Opticon is a runtime debugging console useful for Flash/Flex developers. It’s simple to start using in your projects. To use, follow these steps after installing the application:
1. Launch the application
2. Click the Settings button
3. Click on the SWC icon to add the OpticonConnector to your project’s build path
4. Replace your trace statements with one of the following:
- a) Opticon.log(‘message to display’)
- b) Opticon.warning(‘warning to display’)
- c) Opticon.error(‘error to display’)
Download available from:
Adobe AIR Marketplace
RIAForge
Some might ask why? This idea first appeared when AIR was Apollo and was born out of necessity (I always forget some trace statements during cleanup). Could I use global find and replace? Sure, when I’m developing with Eclipse-based IDEs but that’s not always the case.
Why not use one of the other great tools out there? After 2 years in the shadows, it’s ready to be shared with the world and, because I have a vision of where I’d like to take this so hopefully you’ll come along for the ride.
Where can I submit any bugs I find? I’ll have the bug reporting mechanism in place shortly. You’ll be notified via the application or you can subscribe to this post to be notified once that goes live.
My version doesn’t include the connector. What can I do? This happened as a result of a build error. Visit this link to download the connector Get Opticon Connector.
Double-headed Arrows with GraphicsUtil
Dec 7th
I recently ran across this awesome utility class, GraphicsUtil, created by Noel Billig. It allows the ability to draw lines with an arrow on one end using the drawing API in AS3. This proved useful for a project I was working on. In addition to its default behavior however, I needed the utility class to provide the ability to draw lines with arrows on both ends. Well thanks to Noel’s clean code, I was able to easily modify the base class to do just that by adding the following static method:
/** * Draws a double-headed arrow. Pass in ArrowStyle * objects for both arrows to override the default settings. * @param graphics * @param start * @param end * @param startStyle * @param endStyle */ public static function drawArrows( graphics:Graphics, start:Point,end:Point, startStyle:Object=null, endStyle:Object=null ):void { // variables used for arrow 1 var startArrowStyle:ArrowStyle; var startHalfWidth:Number; var vect1:Point; var startNorm:Point; var start1:Point; var start2:Point; var end1:Point; var end2:Point; var startHeadPnt:Point; var startHeadPntNorm:Point; var startEdge1:Point; var startEdge2:Point; var startShaftCenter:Point; var startInter1:Point; var startInter2:Point; var startEdgeCenter:Point; var startEdgeNorm:Point; var startEdgeCntrl1:Point; var startEdgeCntrl2:Point; // variables used for arrow 2 var endArrowStyle:ArrowStyle; var endHalfWidth:Number; var vect2:Point; var endNorm:Point; var end3:Point; var end4:Point; var start3:Point; var start4:Point; var endHeadPnt:Point; var endHeadPntNorm:Point; var endEdge1:Point; var endEdge2:Point; var endShaftCenter:Point; var endInter1:Point; var endInter2:Point; var endEdgeCenter:Point; var endEdgeNorm:Point; var endEdgeCntrl1:Point; var endEdgeCntrl2:Point; if (start.equals(end)) return; ///////////////////////////////// start arrow config \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ if (startStyle == null) { startArrowStyle = new ArrowStyle(); } else if (startStyle is ArrowStyle) { startArrowStyle = startStyle as ArrowStyle; } else { startArrowStyle = new ArrowStyle( startStyle ); } vect1 = end.subtract( start ); startHalfWidth = (startArrowStyle.headWidth != -1) ? startArrowStyle.headWidth / 2 : startArrowStyle.headLength / 2; //Figure out the line start/end points startNorm = new Point( vect1.y, -vect1.x ); startNorm.normalize( startArrowStyle.shaftThickness/ 2 ); start1 = start.add( startNorm ); start2 = start.subtract( startNorm ); end1 = end.add( startNorm ); end2 = end.subtract( startNorm ); //figure out where the arrow head starts startHeadPnt = vect1.clone(); startHeadPnt.normalize( startHeadPnt.length - startArrowStyle.headLength ); startHeadPnt = startHeadPnt.add( start ); //calculate the arrowhead corners startHeadPntNorm = startNorm.clone(); startHeadPntNorm.normalize( startHalfWidth ); startEdge1 = startHeadPnt.add( startHeadPntNorm ); startEdge2 = startHeadPnt.subtract( startHeadPntNorm ); //Figure out where the arrow connects the the shaft, then calc the intersections startShaftCenter = Point.interpolate( end, startHeadPnt, startArrowStyle.shaftPosition ); startInter1 = GeomUtil.getLineIntersection( start1, end1, startShaftCenter, startEdge1 ); startInter2 = GeomUtil.getLineIntersection( start2, end2, startShaftCenter, startEdge2 ); //Figure out the control points startEdgeCenter = Point.interpolate( end, startHeadPnt, startArrowStyle.edgeControlPosition ); startEdgeNorm = startNorm.clone(); startEdgeNorm.normalize( startHalfWidth * startArrowStyle.edgeControlSize ); startEdgeCntrl1 = startEdgeCenter.add( startEdgeNorm ); startEdgeCntrl2 = startEdgeCenter.subtract( startEdgeNorm ); ///////////////////////////////// end arrow config \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ if (endStyle == null) { endArrowStyle = new ArrowStyle(); } else if (endStyle is ArrowStyle) { endArrowStyle = endStyle as ArrowStyle; } else { endArrowStyle = new ArrowStyle( endStyle ); } vect2 = start.subtract( end ); endHalfWidth = (endArrowStyle.headWidth != -1) ? endArrowStyle.headWidth / 2 : endArrowStyle.headLength / 2; //Figure out the line start/end points endNorm = new Point( vect2.y, -vect2.x ); endNorm.normalize( endArrowStyle.shaftThickness / 2 ); start3 = start.add( endNorm ); start4 = start.subtract( endNorm ); end3 = end.add( endNorm ); end4 = end.subtract( endNorm ); //figure out where the arrow head starts endHeadPnt = vect2.clone(); endHeadPnt.normalize( endHeadPnt.length - endArrowStyle.headLength ); endHeadPnt = endHeadPnt.add( end ); //calculate the arrowhead corners endHeadPntNorm = endNorm.clone(); endHeadPntNorm.normalize( endHalfWidth ); endEdge1 = endHeadPnt.add( endHeadPntNorm ); endEdge2 = endHeadPnt.subtract( endHeadPntNorm ); //Figure out where the arrow connects the the shaft, then calc the intersections endShaftCenter = Point.interpolate( start, endHeadPnt, endArrowStyle.shaftPosition ); endInter1 = GeomUtil.getLineIntersection( end3, start3, endShaftCenter, endEdge1 ); endInter2 = GeomUtil.getLineIntersection( end4, start4, endShaftCenter, endEdge2 ); //Figure out the control points endEdgeCenter = Point.interpolate( start, endHeadPnt, endArrowStyle.edgeControlPosition ); endEdgeNorm = endNorm.clone(); endEdgeNorm.normalize( endHalfWidth * endArrowStyle.edgeControlSize ); endEdgeCntrl1 = endEdgeCenter.add( endEdgeNorm ); endEdgeCntrl2 = endEdgeCenter.subtract( endEdgeNorm ); ///////////////////////////////// draw the graphics \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ // draw 1st arrow graphics.moveTo( start1.x, start2.y ); graphics.lineTo( startInter1.x, startInter1.y ); graphics.lineTo( startEdge1.x, startEdge1.y ); graphics.curveTo( startEdgeCntrl1.x, startEdgeCntrl1.y, end.x, end.y ); graphics.curveTo( startEdgeCntrl2.x, startEdgeCntrl2.y, startEdge2.x, startEdge2.y ); graphics.lineTo( startInter2.x, startInter2.y ); graphics.lineTo( start2.x, start2.y ); graphics.lineTo( start1.x, start1.y ); // draw 2nd arrow graphics.moveTo( end3.x, end4.y ); graphics.lineTo( endInter1.x, endInter1.y ); graphics.lineTo( endEdge1.x, endEdge1.y ); graphics.curveTo( endEdgeCntrl1.x, endEdgeCntrl1.y, start.x, start.y ); graphics.curveTo( endEdgeCntrl2.x, endEdgeCntrl2.y, endEdge2.x, endEdge2.y ); graphics.lineTo( endInter2.x, endInter2.y ); graphics.lineTo( end4.x, end4.y ); graphics.lineTo( end3.x, end3.y ); }
Those are the basics. It can be tweaked to taste, etc. Kudos to Noel for the such a useful class…
ZamfBrowser – ZendAMF Service Browser
Nov 13th
One of my colleagues at Almer/Blank, Omar Gonzalez, just released a very promising project into the open source community today, ZamfBrowser. This AIR application is a lifeline for all the developers who have embraced ZendAMF since its release yet have longed for that familiar service browser paradigm we grew used to with AMFPHP. Well, wait no longer. ZamfBrowser performs server introspection to give you access to your ZendAMF services and it even features test retention by remembering the last arguments used for method testing between sessions. This is definitely an application worth a look if you plan on doing any AMF development.
Using the Flex IViewCursor to Manage an ArrayCollection
Nov 12th
One of the nice things about the Flex framework is the various utility classes that make it so much easier for you to accomplish your development tasks than you’d be able to without them. One such class, in my opinion, is mx.collections.IViewCursor. What this class does is to define an interface for enumerating a collection view (ie, ArrayCollection) both forwards and backwards. Using this construct, you can avoid having to use for.. loops to examine the collection.
Here’s a quick example of a fictitious auto maker that’s tasked us to update some info related to one of its auto dealers after receiving the quarterly sales report:
var carDealers:ArrayCollection; var dealerCursor:IViewCursor; var vehicleCursor:IViewCursor; var affectedDealer:CarDealer; var targetVehicle:Car; var targetVehicleIndex:Number; var dealerIdFromSale:String = 'XXXXXXXX-XXXX-XXXX-XXXXXXXXXXX'; var vinNumberFromSale:String = 'XXXXXXXXXXXXXXXXX'; dealerCursor = carDealers.createCursor(); // iterate through the list of dealers while (!dealerCursor.afterLast) { if (dealerCursor.current.dealerId == dealerIdFromSale) { affectedDealer = CarDealer( dealerCursor.current ); // create a cursor to iterate over the dealer's inventory vehicleCursor = affectedDealer.inventory.createCursor(); // iterate over the inventory while (!vehicleCursor.afterLast) { if (vehicleCursor.current.VIN == vinNumberFromSale) { // a match was found so now we need the // index of this vehicle in the ArrayCollection targetVehicle = Car( vehicleCursor.current ); targetVehicleIndex = affectedDealer.inventory.getItemIndex( targetVehicle ); // since the sale was successful, we can safely // remove the vehicle from this dealer's inventory affectedDealer.inventory.removeItemAt( targetVehicleIndex ); } vehicleCursor.moveNext(); } } dealerCursor.moveNext(); }
In a few lines of code, we’re able to create some very readable and manageable logic to complete the task of updating the inventory. And, you may notice that we also iterated over not one, but two ArrayCollection instances with our mighty IViewCursor. One additional thing to note is the use of the moveNext() method. It’s important that you instruct the cursor that it’s OK to advance even though you’ve found what you’re looking for; otherwise, plan on some serious hang time. I mean it is still a while..loop after all!
AMFPHP Fatal Errors After PHP 5.3 Upgrade (Part 2)
Oct 16th
As promised in Part 1, I’m documenting yet another issue that must be addressed in your AMFPHP installation upon upgrading to PHP 5.3. This issue stems from the usage of the [code lang="php"]eregi_replace[/code] function that has been deprecated in PHP 5.3. If you run into a fatal error in your AMFPHP application with the message [code]Function eregi_replace() is deprecated[/code], you have (2) options:
- Modify your PHP configuration to disable the warnings
- Replace the deprecated code with the new, recommended equivalent
I’d advise against #1 since you will also lose warning and error notices that could be helpful to you during development. And, by choosing #2 you will be bringing the AMFPHP code into compliance with a change that is also backwards-compatible with previous versions of PHP since the replacement function you’re going to use has been around since PHP 4.
So, to update your AMFPHP source, you need to modify [code]MethodTable.php[/code] which can be found @ [code]/path/to/amfphp/core/shared/util/MethodTable.php[/code]. Open up this file in your favorite text editor (ie, TextMate
) and jump to line 505. Once there, you need to replace these three lines:
$comment = eregi_replace(”\n[ \t]+”, “\n”, trim($comment)); $comment = str_replace(”\n”, “\\n”, trim($comment)); $comment = eregi_replace(”[\t ]+”, ” “, trim($comment));
with these equivalent lines of code:
$comment = preg_replace(”'\n[ \t]+'U”, “\n”, trim($comment)); $comment = str_replace(”\n”, “\\n”, trim($comment)); $comment = preg_replace(”'[\t ]+'U”, ” “, trim($comment));
Save and close the file, fire up your service browser and you should now be good to go with no more fatal errors in your AMFPHP applications produced by this deprecated function. Happy coding!
AMFPHP Fatal Errors After PHP 5.3 Upgrade (Part 1)
Oct 14th
If you experience the following error in your AMFPHP-based applications:
PHP Fatal error: Uncaught exception ‘VerboseException’ with message ‘date(): It is not safe to rely on the system’s timezone settings. You are *required* to use the date.timezone setting or the date_default_timezone_set() function. In case you used any of those methods and you are still getting this warning, you most likely misspelled the timezone identifier. We selected ‘America/Los_Angeles’ for ‘PDT/-7.0/DST’ instead’ in /path/to/amfphp/core/amf/app/Gateway.php:213\nStack trace:\n#0 [internal function]: amfErrorHandler(2, ‘date(): It is n…’, ‘/path/to/amfphp…’, 213, Array)\n#1 /path/to/amfphp/core/amf/app/Gateway.php(213): date(‘D, j M Y ‘)\n#2 /path/to/amfphp/gateway.php(154): Gateway->service()\n#3 {main}\n thrown in /path/to/amfphp/core/amf/app/Gateway.php on line 213, referer: http://www.yourdomain.com/path/to/amfphp/browser/servicebrowser.swf
You can fix it by uncommenting and defining the [code]date.timezone[/code] line in your php.ini configuration file. For my local environment that would look like the following:
date.timezone = "America/Los Angeles"
This, unfortunately, is just one of the things that breaks upon upgrading to PHP 5.3. Stay tuned as I try to catalog them along with the fixes…:)
Adobe Stepping Up Its Game
May 15th
The next version of Flash Player will offer a lot of enhancements to the user experience and it seems Adobe listened to the developer community on a few of the features. Here’s one that is sure to be huge:
“File Reference runtime access — Bring users into the experience by letting them load files into your RIA. You can work with the content at runtime and even save it back when you are done through the browse dialog box. Files can be accessed as a byteArray or text using a convenient API in ActionScript without round-tripping to the server. You no longer have to know a server language or have access to a server to load or save files at runtime.”
Don’t even wait on player version saturation to start noticing the explosion of web-based Flash apps taking advantage of this feature. You can review all of the release notes and even download the beta at Adobe Labs….:D
Getting Some …rest
May 8th
Thought I’d blog about this since I haven’t seen this posted before and it comes up from time to time. With AS3, we got access to a new function parameter, the …rest parameter, which allows us to pass in a dynamic list of parameters for usage by our functions. Here’s an example:
// Method in SomeClass public function someMethod(...rest):void { for (var i:uint=0; i < rest.length; i++) { trace(rest[i]); } }
That will trace out each …rest parameter that you pass to the method call like so:
// Usage from SomeOtherClass var sc:SomeClass = new SomeClass(); sc.someMethod(arg1, arg2, arg3, arg4);
This allows a lot of flexibility because those arguments can be simple (String, Number, etc) or complex (Array, Object, etc). But, what if someMethod() is part of SWC library that you may or may not have access to and you want to capture those …rest arguments and pass them to SWC class?
Well, the easiest way that I’ve found is to use the built-in arguments object in your local code and then pass that to the SWC class that’s expecting the …rest array. Here’s what I mean:
// Usage from LocalClass public function someMethod(arg1:String, arguments:Object=null):void { var sc:SomeClass = new SomeClass(); sc.someMethod(arguments); }
This way you can expose LocalClass.someMethod(), accept the concrete parameters that it expects and pass on the dynamic parameters that SomeClass.someMethod() expects.



