Category: flex

Flex Tip: Two really useful tools

I was just introduced to two incredibly useful tools.

FlexPMD helps to improve code quality by auditing any AS3/Flex source directory and detecting common bad practices.

fxSpy allow you to inspect and dynamically change most properties and styles of the visual components in your Flex application. You can – for example – try out a specific width or a background color for your component before changing it in your code.

If you haven’t yet seen them I highly recommend checking them out.

Best,
Hillel

Import, Export, Copy & Paste Flex DataGrid

In addition to searching, two common features implemented in DataGrids are import/export and copy/paste. There are a number of great solutions already out there. The purpose of this post is to show how we can bring them together (along with some additional code/tweaks) to provide the user with a DataGrid which plays nicely with their favorite spreadsheet application.

Overview of demo

  • There are three ways to copy the selected items from the left DataGrid: using the “Copy” button, pressing Ctrl+C or right clicking and then selecting “Copy Item(s)”.
  • The copied data is stored in tab separated format, when pasting it into a spreadsheet it will retain its column structure.
  • To paste data into the right DataGrid give it the focus by clicking on it and then press Ctrl+V.
  • Click “Import” to upload either a CSV (comma sperated) or TSV (tab separated) file.
  • Click “Export” to generate a CSV file of the data in the DataGrid.

Import/Export

In Flex 3, in order to upload a file you need a small script on the server (in Flex 4/Flash 10 the client is able to handle this locally). Included in the source you’ll find two PHP files: csvImport.php and csvExport.php. To support exporting the data from the DataGrid I’m leveraging a nice algorithm written by Sasa Radovanovic explained in this post.

This solution is meant to work with plain text csv and tsv files, if you need to support Excel (.xls) files I’d recommend checking out as3xls.

Copy/Paste

One of the limitations of the Flash Player is that (for security reasons) we’re unable to access data from the user’s clipboard. This makes pasting rather tricky. Manish Jethani has documented a clever solution in this post where he uses a hidden text field to allow the user to paste data into a DataGrid.

Field Mapper

This component provides the user with a way to map the columns in the data to the properties of the objects. It will attempt to determine if the first row of the data looks like it should be a header row and will then try to automatically map the fields.

Hope you find this useful,
Hillel

Flex AutoComplete: Documentation

Well, it only took me a year but I finally got around to writing up some documentation.

I hope to continue to improve it over time, any feedback you have is greatly appreciated.

Best,
Hillel

Resource Bundles in Flex (new thoughts on the topic)

This is the follow up to a post I wrote a little while ago.

Eliminate the Metadata tag

In the past I was accessing the resource bundle directly in the class. This meant that in I had to add the Metadata tag in every file. A better approach is to create a static class which calls ResourceManager.getInstance(). This way only this class needs to have the Metadata for the bundles. Here’s the static class I’m using.

package 
{
	import mx.resources.ResourceManager;
	
	[ResourceBundle("People")]
	[ResourceBundle("Groups")]
	[ResourceBundle("Framework")]
	public class ResourceUtils
	{
		public static function getString( module:String, key:String, failSilently:Boolean = false ):String
		{
			var value:String = ResourceManager.getInstance().getString( module, key );
			
			if (!value)
			{
				value = ResourceManager.getInstance().getString( "Framework", key );				
			}
			
			if (!value && !failSilently)
			{
				throw new Error( "Error: failed to find value for " + key + " in " + bundleName + " resource bundle" );
			}
			
			return value ? value : "";
		}
	}
}

The application that I’m working on is divided into a number of modules, each has their own resource file. To support this, when requesting a string you also specify the module. If the value isn’t found in the module resource file, then we check the overall framework resource file.

Throw an error if a value isn’t found

I find that I pretty often mistype a key for a string. The default behavior in Flex is to return null, I prefer throw an error in this case as it makes tracking down any missing values much easier. I’ve added the failSilently flag for cases where they may not be a value.

Here’s an example of how you’d use it

<mx:Label text="{ ResourceUtils.getString( Consts.MODULE_PEOPLE, 'addButton' ) }"/>

Static classes for resources in general

This idea of using static classes to reference resources also works well for images. I just saw this in a book I’m reading AdvancED Flex Application Development. It’s a nice, clean approach.

package
{
	[Bindable]
	public class AssetLib
	{
		[Embed(source="buttonUpSkin.png")]
		public static var buttonUpImage:Class;

		[Embed(source="buttonDownSkin.png")]
		public static var buttonDownImage:Class;
	}
}

Hope you find this useful,
Hillel

Flex AutoComplete: Version 1.0

It’s been about a year since first creating the component. I’ve been using it extensively in the applications I work on and it’s been downloaded thousands of times. At this point I’m pretty confident in saying that it works reliably.

Latest version

If you’re already using the component you probably noticed that there’s now a “Latest version” link (rather than the old Demo and Download links). I’ve decided to set up a permanent page on my blog for the component. The important info (ie, the component’s license) is currently scattered amongst the past posts, this way I can keep everything together in one place.

Here’s what’s changed in this release

  • Added support for XMLListCollections: You can now use either an ArrayCollection or an XMLListCollection as the dataProvider.
  • ListBuilder is now a first class component: I’ve refactored the code to support using the ListBuilder on it’s own.
  • Added browserFilterFunction: I’ve added a browserFilterFunction which enables applying a separate filter which is applied to the results shown in the browser. I sometimes show a mix of items in the component. I use this to offer multiple browse options in the actionMenu in the AdvancedAutoComplete.
  • Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any issues people have found.

Thanks to e/o who’s spotted bugs, suggested improvements and just been supportive in getting the component to this state. There’s no doubt in my mind that sharing the component with the Flex community has made it far better than it otherwise would have been.

Best,
Hillel

Flex Issue: Using “Copy” as label for ContextMenu item

It looks like Flex won’t allow you to use “Copy” as the label of a ContextMenu item. If you try to do so, no error is generated but the menu item isn’t added to the menu. I spent way too long trying to figure out why my code wasn’t working, hopefully this saves you the trouble.

Update: As per the comment below by JabbyPanda, here’s the full list of restricted words.

Best,
Hillel

Random assortment of Flex tips

The challenge in learning a new language is that you don’t know what you don’t know. Very often when I look at older code I’ve written I realize that there’s a far better way of solving the problem, I just wasn’t aware of it at the time.

The purpose of this post is to cover a bunch of random things about Flex that I’ve learned along the way. For many of you I’m sure this list will be more of a review, but if you’re new to Flex hopefully you’ll find something which you didn’t know you were looking for.

mx_internal

Essentially, it’s a namespace (similar to public, private, protected and internal) used by the framework to protect code.

Some properties and methods in the framework need to be accessible from other places while still being hidden from the casual user. Using ‘protected’ would require that the class is a subclass, and ‘internal’ requires that it’s in the same package. This way any class can access a ‘hidden’ property or method of another class.

While this can be used to hack the framework, in general using the mx_internal namespace to access hidden properties should be avoided as it’s very easy to cause unexpected side effects (the property/method is probably hidden for a reason).

more info…

callLater()

Let me start by saying if using this function is fixing your problem but you’re not sure why you’re probably doing something else wrong. The callLater function is used to tell the Flash Player to call the function on the next frame.

Here’s a valid use of this function. If you set the dataProvider property of a list and then want to set an item as being selected you’d want to use the callLater. This gives the Flash Player a chance to setup the new dataProvider before you select your item.

So… why is this. When you set most properties the values aren’t actually set right away. The component will generally store the new value and mark that it’s been changed. It will then wait until the next validation to actually set the new value.

Using the callLater gives the component a chance to validate itself first. Because of this, you can often call validateNow instead of using a callLater but by doing so you’re forcing the class validate sooner than it’d like which could introduce performance issues.

This topic touches upon a key Flex idea, work with the framework not against it. The framework has a specific order in which things happen, the more familiar you are with how the framework operates the better off you’ll be.

more info…

initialize vs creationComplete

This topic is a good follow up to the last one. To really understand the difference you need to study up on the component lifecycle . In a nutshell initialize is called when the component’s children exist but aren’t yet measured/positioned, while creationComplete is called once the component has finished setting itself up.

The take away point here is you want to avoid placing code which will change the size/layout of a component’s children in the creationComplete handler. Doing so will force the Flash Player to size/layout the children a second time (which decreases the performance).

It’s good to be able to spot this issue by looking at how your application renders itself. Ideally, when the window is shown it should already be fully created but if you use creationComplete event handler on a slower machine you can visibly see the application resize its children.

more info…

masks

When I started to learn Flex I read all of the Flex books I could get my hands on, what I was missing however were the ActionScript books. Being an expert in Flex requires two sets of knowledge: the Flex Framework as well as a good understanding of ActionScript.

I obviously can’t cover all the cool things that you can do with ActionScript in this post but one item that I find handy is the mask property. This can be used to define a section of a component to be visible. Before I knew about masks I was adding white boxes to my applications to cover up the parts that I wanted to hide. Masks are a much more elegant solution to this problem.

more info…

suspendBackgroundProcessing

One of the greatest aspects of Flex is how easy it is to create really cool effects (as a side point, remember to use them where they make sense… every item on the screen doesn’t need to slide into place). The catch is sometimes the effects can get slowed down by other things happening in the background. I find that hurky-jurky effects can be somewhat painful to watch.

A possible solution is to set the suspendBackgroundProcessing property to true. This will tell the Flash Player to focus all of it’s resources on making the effect run smoothly. Another technique which I’ve found sometimes helps is to delay the effect slightly.

more info…

relatedObject

There are a number of different event types in Flex which each have their own special properties. It’s a good idea to glance at the full list to see what’s out there but here’s one property which I find particularly useful.

The FocusEvent class has a property called relatedObject which will tell you where the focus is going to/coming from. This can be really handy when creating focus event handlers.

more info…

ObjectUtil.toString()

Next to the trace function, this is the single most important function for debugging. This will dump an object to a string. While debugging I’ll very often write something like.

trace( ObjectUtil.toString( myVariable ) );

more info…

DefaultListEffect

This one’s just eye candy. Using this effect will cause the list to fade in/out items which are added or removed. When using this effect you need to remember to set variableRowHeight property on the List component to true.

more info…

That about wraps it up. Hopefully you learned something new while reading the post, or at the very least feel good about yourself because you were already familiar with everything mentioned here.

Best,
Hillel

Flex AutoComplete: Version 0.98.2

Note: The interface for the component has been changed a fair bit in this version. If you’re upgrading, please refer to this post to determine the changes you’ll need to make.

Latest version

I’ve found that I very often need to use the component as a basic autocomplete combobox, without all the extra jazz. To simplify things, I’ve split the component into two classes: AutoComplete and AdvancedAutoComplete.

I’ve moved a lot of the extra features (such as browsing and ordering) to the AdvancedAutoComplete component. The demo and documentation provide breakdowns of which features are where.

The catch with this approach is if you need one of the features from the advanced component you have to take them all. It looks like Gumbo will implement changes to the component framework which will enable implementing a better solution. I’m planning to rework the component once it’s officially released.

Additionally, I’ve changed the names of a number of properties to better follow the conventions used throughout the Flex framework.

Old Name New Name
isMultiSelect allowMultipleSelection
multiSelectLayout selectionLayout
isStrict allowNewValues (note: logic is reversed)
areNewItemsEditable  allowEditingNewValues
isBrowseable showBrowseButton
isOrderable showOrderButtons
styleName selectedItemStyleName (note: now a style)

Here’s what’s new…

  • Created inlineButton feature: You can now set a button to appear at the end of the combobox.
  • Added Actions Menu: I’ve used the new inlineButton feature to implement an actions menu in the AdvancedAutoComplete component. The feature is enabled by setting a value for the actionsMenuDataProvider property. I’ve added the option to the advanced tab in the demo.
  • Support for skins: The selected items have been changed to buttons which has enabled me to rework the MacMail and Facebook styles as skins. I’ve created a CustomSkin example application which demonstrates how to create your own skin. If you end up creating any nice skins please send them my way. One note here, if you’re using the source you’ll need to include the defaults.css file in your app.
  • Added autoSelectEnabled property: One of the most common questions posted is how to prevent the component from automatically selecting a match. You used to have to create a function which always returned false for the isEqualFunction property. You can now simply set autoSelectEnabled to false. If you’d like to implement a custom function you can set it in the autoSelectFunction property.
  • Bug fixes and tweaks: As always, I’ve gone through all of the comments and fixed any bugs which people have spotted.

Lastly, I wanted to thank Demetri for convincing me to create it, creating the icons and guiding the UI decisions along the way and Tarak for allowing me to share it (and introducing me to Flex). Thanks guys!

Flex AutoComplete: Version 0.98.1

At this point I’m spending most of my time cleaning up the code. I started working on the component about six months ago and I find that when I look back on some of the older parts of the code I realize I’ve learned far better ways of handling things.

Latest version

Here’s what’s new:

  • Added browserFields property: This property enables you to specify which fields to display in the browser DataGrid.
  • Reworked selectedItems: Adding/removing items from the selectedItems property will now update the values displayed in the AutoComplete.
  • Added “search” method: If you’re using the component with a dynamic dataProvider, you can use the search function to display the dropDown if there are any matches.
  • New demo: I’ve added two more tabs to the demo to show other examples of the component in action.
  • Bug fixes: As always, I’ve gone through all the comments on the blog and made sure any issues found have been resolved.

I can’t thank the community enough for the enormous amount of support I’ve received. I’ve learned a tremendous amount from the fixes people have submitted. Please keep it coming…

Thanks,
Hillel

Flex AutoComplete: Bug fixes

The last version of the component had a number of major changes, as a result a couple of bugs slipped in. Thanks to e/o who posted comments documenting the issues on the blog.

Latest version

Keep the feedback coming,
Hillel