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
Flex AutoComplete: Documentation
July 24, 2009
1 Comment | 
flex | Tagged: autocomplete, flex | 
Permalink
Posted by Hillel
Resource Bundles in Flex (new thoughts on the topic)
July 6, 2009This 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
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
1 Comment | flex | Tagged: flex, resource bundles | Permalink
Posted by Hillel
Flex AutoComplete: Version 1.0
July 3, 2009It’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.
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
109 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
Flex Issue: Using “Copy” as label for ContextMenu item
June 30, 2009It 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
6 Comments | flex | Tagged: flex | Permalink
Posted by Hillel
Random assortment of Flex tips
June 7, 2009The 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).
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.
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.
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.
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.
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.
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 ) );
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.
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
2 Comments | flex | Tagged: flex | Permalink
Posted by Hillel
Flex AutoComplete: Version 0.98.2
May 11, 2009Note: 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.
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!
275 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
Flex AutoComplete: Version 0.98.1
April 7, 2009At 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.
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
119 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
Flex AutoComplete: Bug fixes
March 23, 2009The 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.
Keep the feedback coming,
Hillel
68 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
Flex AutoComplete: New batch of changes
March 12, 2009If you’ve come straight to this post I’d recommend checking out the previous posts for this component for more info on using it.
Here’s what’s new:
- Ability to add new items: You can now select items which aren’t in the data provider. To enable this feature you need to set the isStrict property to false. I’ve also added an allowDuplicates flag which controls whether or not you can add an item more than once
- Added style property: I’ve added a style property which lets you control how the selected items are displayed. There are currently 3 choices: Mac Mail, Facebook and underlined.
- Created some documentation: It’s not great but at least it’s a start. You can find it in the zip file in the doc folder
- A bunch of other small tweaks and bug fixes: I’ve tried to incorporate the changes suggested in comments in the blog but I’m sure I missed some things. Please let me know if you suggested a change which didn’t make it in and I’ll get it in a future release.
- Changed component name to AutoComplete: I’ve decided that for clarity’s sake it’s better to call it AutoComplete (rather than Chooser). I’m sorry for the refactoring this will require (hopefully it should be pretty minimal)
I’ve put the codebase on Google Code. If you’re interested in getting involved in the project please let me know.
Thanks,
Hillel
40 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
Flex AutoComplete: Almost there… (or so I thought)
February 1, 2009If you’ve come straight to this post I’d recommend checking out the first and second posts for this component for more info on using it.
Here’s what’s new:
- Created new demos: I’ve added two more demos which demonstrate some common ways to use the component. The source for the demos is included in the zip.
- Added support for a horizontal multiselect: The previous version of the component had a multiSelect mode but it took up a fair amount of screen real estate. I’ve added a multiSelectLayout property which can be set to either “vertical” or “horizontal”. Vertical makes it behave the same as it used to, while horizontal enables you to select multiple items within the TextInput component. I’ve added this option to the demo. I’m still working on this feature, in the next version I’d like to change the style to make it look like the multiselect in Facebook and Mac Mail
- Improved support for selecting items not in the dataprovider: The best practice to accomplish this is to add a keyDown listener to the component. If the user clicked enter then check if the text property is set and the selectedItem property is null
- Fixed minor bugs: I’ve gone through all the comments on the blog and tried to address any open issues. I’m sure I’ve missed some things, if you’ve made a suggestion in the past which didn’t make it in to this release please re-suggest it and I’ll try to get it into the next version
One last thing, I’ve added the component to the Adobe Flex Exchange. It’s a relativley new component so it doesn’t have any rating or reviews. If you’re using this component and find it useful it’d be very much appreciated if you could rate it on the site (or even better… write a review).
Thanks very much,
Hillel
92 Comments | flex | Tagged: autocomplete, flex | Permalink
Posted by Hillel
