Flex: Country Aware States ComboBox

Alex had created some extensions to ComboBox that handled pre-population of Country and State information. They solved his problem and hopefully worked for others as well, but i just had the occasion to start using them and ran into some issues.

The first issue is that they extend ComboBox. When you need to set the value of a ComobBox you have to go through the grief of iterating over a loop. Luckily, I've already addressed the needed additions to support a ComboBox selectedValue property. So getting this up and running, at least initially, was as easy as changing ComboBox to eComboBox (you don't have to explicitely import the class if you put the definition in the same package).

The second issue is that needed states entry varies with the country. The US has its states and territories, as does Canada and probably some other countries too (If you aren't a mostly English speaking country on North America do you even exist? - just joking) so if the country input is open ended you might find yourself wanting comboboxes as well as textinputs. I originally had gone through the annoying process of maintaining two discrete comboboxes and a textinput and logic to control the visible and includeInLayout properties; that gets old quickly. Instead, I just wanted a single entry for the State information with a common property for setting and getting the selected value.

To make my life easier, I decided to just extend what Alex had created by just consolidating the XML dataProviders. For some reason, he had already included a country property so it was easy enough to group them together so as to be able to filter them later:


Flex: Drag Sortable VBox

Among my many projects, I am working on internal AIR app that includes configuring an XML document that is consumed by a separate, public-facing, flex application. One of the features of the interface is that items are dragged onto a VBox and the children are saved in the order in which they were added; a consequence of iterating over the getChildren(). When the Flex app consumes the saved objects it displays them in order. While this is nice as it is predictable, I was obliged to enable the ordering of these items. The intuitive solution, at least for my group, was determined to be a simple draggable interface. As items are added to the VBox, the expectation is that the order can be set by simply dragging the target item and dropping it in the desired location.

A Vbox is not a List and there is not a builtin support mechanism for this. And, to prevent me from simply changing my VBox to a List, List does not have a getChildren():Array method. Not saying that there is no way to get an array of objects contained within a List, but it became obvious that a simple switch would cause me potentially more grief than just adding the functionality to a VBox. That said, I couldn't find any resources that detailed what I needed to accomplish (I've been admonished in the past for re-inventing wheels, so I try to take a look at what already has been shared to save time and effort).

So, anyway, on to discussing how to make a drag sortable VBox with Flex. I've tried to make my solution as generic as possible to make it a functional drop-in to any situation by using UIComponents, however, some situations might be more easily solved by more precisely identifying the data type of your draggable objects. The drag and drop parts aren't so bad. We need to make sure that the target VBox has dragEnter and dragDrop listeners and that its children has a mouseMove listener that starts the whole thing off. The only trick here is that we need to remember the original index of the dragged item and then calculate, at drop, what the new index ought to be.

Our setup will be something of the sort:


Steve Jobs Is A Winner

I was going to write an extended bit about the latest bit of discourse between Apple and Adobe, but the schedule is not going to allow it (and, really, who wants to read it?). So, instead, I will just share the wonderful accompanying image that I forced out of an Apple phanboy (along with sizable chunks of his soul) using Adobe tools. So, with no further ado, Steve Jobs, Winner, Biggest Douche of the Universe:


ActionScript: Emerging Free Book on Bitmaps

Thibault Imbert, an Adobe Systems Engineer, is working on a new book, "What can you do with bytes?", that he'll be releasing as a downloadable pdf for free.

Thibault does a lot of interesting work with ActionScript and his site is worth frequenting (especially if you are francophone as he is also one of the few, maybe only one writing AS books in French). Anyway, he is releasing as he goes and, as of the time of this post, the first 45 pages are available.

Incidentally, I came across this while looking for a way to inject animated gifs into Flash. There is a nifty site, ajaxload, that has a free animated gif generation service for throbbers.

Flex: (Somewhat) Simple ColorMatrixFilter Example

As my Simple Actionscript Color Separator Class seemed to be popular, I thought that I would expand on the concept of color in Flash a bit by providing a demonstration of the ColorMatrixFilter. Mostly this is for my own gratification as I have been investigating bitmap manipulation with ActionScript 3.0 and color is a big part of that (There are also convolution and displacement filtering capabilities and I will eventually be posting simple examples of those).

So, the quick recap is that each pixel is made up of 4 channels: Red, Green, Blue and an Alpha channel that controls opacity. These channels are expressed as hexadecimal and aggregated together into a neat 32bit number (See the previous color post for more details). When the ColorMatrixFilter is applied, the Flash player will iterate over every pixel in a bitmap and apply the rules of the filter on an individual basis. This is particularly powerful, but, as one might expect with a ColorMatrixFilter, there is a matrix. In this case, it is a 4 x 5 matrix where each row represents a channel of the bitmap and the columns represent the channels as well as an offset. So the rows correspond to Red, Green, Blue and Alpha and the columns represent Red, Gree, Blue, Alpha and Offset.

For any given pixel, the final channel values are expressed as the sum of the products added to the offset. That probably didn't make as much sense as I might hope, so let's consider the following matrix, known as the identity matrix. This is a good place to begin as this has no impact on the final color:


Tampa Bay Area: Flex 4, Flash Builder 4 and ColdFusion Builder Meetup and Happy Hour (04MAY2010)

This Spring is really shaping up to be really good for developers in Tampa. And of the upcoming events, this is the freebie one that you'll want to definitely attend. With promises of T-Shirts, software (Adobe Flash Builder 4/ColdFusion Builder) and potentially other stuff (I'm thinking stickers and maybe posters) - oh and adult bevarages - the Central Florida Web Developers User Group is hosting a meetup on Flex 4, Flash Builder 4 and ColdFusion Builder.

Click for details and to RSVP.

Tampa Bay Area: Exploring Interactivity in Creative Suite 5 (20APR2010)

On April 20, 2010, just on the heels of the release of Adobe Creative Suite 5, the Central Florida Web Developers User Group is hosting a session on Exploring Interactivity in CS5 given by James Lockman who is reputed to be a digital workflow consultant and trainer. Ostensibly, this event should appeal to "programmers, designers, experts and people just getting started with Web Development".

More details on "Exploring Interactivity in CS5".

Flex: Using Regular Expressions For RealTime Filtering

Another bit of UI fun that came up: Suppose that you are creating a form for an organization that requires email input for a single domain, but that they have specific rules that enable us to (1) make input easier and (2) prevent input errors.

In this case, let's suppose that numbers are verboten and that the typical format of the email address is the first initial and the entire last name (or the whole first name if that is all that is given). The email account name should be over-writeable in case it is an exception to the naming convention. Also, we need to remove any additional characters that might not be email friendly. Finally, the organization wants all email addresses are expressed in lowercase. An example would be:

"John Smith" >> "jsmith"

(This was an actual set of business rules, so don't ask me how they would differentiate James Smith from John Smith)

For the interface, we'll use a single TextInput for both the first and last name and we'll use simple binding to link that into the email TextInput. For good measure, there is a Label to show the company domain name.

So, moving right along we have a simple setup like:


Tampa Bay Area: Free ColdFusion Builder and Coldbox Framework Workshop

A quick heads up. On May 8, 2010, the Central Florida Web Developer Group (Tampa Bay Area, FL) is hosting a free full day ColdFusion Builder and Coldbox Framework seminar (10:AM-5PM). This crash course is a bring your own laptop affair that threatens to be really useful. I've been meaning to use Coldbox for awhile, especially as it seems to offer some interesting features for RIA developers, and I'm hoping that this will be the nudge I need to fully embrace it. Plus, it is good to see the user group experimenting with different formats.

Anyway, as of this writing, there are 14 spots available for this free ColdFusion Builder and Coldbox Framework seminar so RSVP quickly if you want to take advantage of this opportunity.

BTW: Aaron and Derek have been using Coldbox for awhile now and are bringing a lot practical experience with the framework to the workshop.

Flex: Default List Item, Dynamically Populated ComboBox

I've been crazy busy, but here is a little GUI element that I have create for use in an AIR application designed to control a Flex app.

One of the features is the ability to create lists at configuration that are expressed as ComboBoxes in the application. When allowing the user to set the default, I thought it would be better to ensure that the input is valid by immediately populatig a ComboBox with the options. It is a very simple implementation, but I think the effect is pretty nifty:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal" viewSourceURL="srcview/index.html">

import mx.collections.ArrayCollection;
[Bindable] private var _options:ArrayCollection = new ArrayCollection();
private function optionValueChanges(values:TextInput):void {
var _use:String = values.text;
if (_use.charAt(_use.length-1) == ",") {
_use = _use.substring(0,_use.length-1);
_options = new ArrayCollection(_use.split(","));


<mx:TextInput id="tiOptions" change="optionValueChanges(tiOptions)" width="150"/>
<mx:ComboBox id="cbDefault" dataProvider="{_options}" width="200" />

To make it work, just type in a comma-delimited list of items. The little bit of conditional logic is to ignore the case when the string has a trailing ",".

View a demo of the dynamically populated ComboBox for the default selection.

More Entries

BlogCFC was created by Raymond Camden. This blog is running version Contact Blog Owner