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:

[More]

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:

[More]

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:

[More]

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:

[More]

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">

<mx:Script>
    <![CDATA[
        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:Script>

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

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.

Maybe it is because I am enamoured with the world's ugliest, but potentially coolest mouse, or maybe it's that my own mouse is developing quirks that cause me to believe that it is not long for this world, but I've been looking at acquiring a new primary HID. Along those travels, I came across a very old discussion comparing the Keyboards vs Mice. Apparently, Apple spent $50,000,000 in the late '80s, and that's when $50 million was worth something, to study the Apple Human Interface. The result was the discovery of two facts:

• Test subjects consistently report that keyboarding is faster than mousing.
• The stopwatch consistently proves mousing is faster than keyboarding.

Like many things tech, and especially since Apple is involved, opinions run strongly in many directions. My own concerns are my own requirements for interfacing with the hunk of plastic, silicon and dopants at my desk and what sort of experience do I offer users in the applications that I create, web or otherwise.

I gotta imagine that there are thresholds and conditions that would impact the truth of those two "facts". One person mentioned in the article says that "there are NO command key equivalents in my product, Smart Labels, except for Undo, Cut, Copy and Paste". The reasoning is that, even though the user may perceive there to be a value in using additional shortcuts, he won't allow it. That seems extreme. What happens when the desired action is hidden behind several layers of menuing or if the action is contextual and you are already using the mouse to highlight the text (modifying case through shortcuts would be very preferable to highlighting and hunting). My own inclination is to add keyboard shortcuts when time or interface will allow me. That doesn't always work and I have lost some recent battles at work to implement minimalistic interfaces that use only keyboard shortcuts.

In that case, it was a dialog box, created by a mouse event that just contained a single text input with listeners for ENTER and ESCAPE. My reasoning was that the act of calling the dialog would provide the context for the input, hence no label, and that ENTER and ESCAPE are natural behaviors. As I said, I lost and now the little interface that could have been was obliged to support a Label, a submit Button, a Cancel button (as the corner "X") and an instruction line. My opinion is that, styling aside, the interface is uglier and code is heavier. (Apparently, I might be a little bitter about this)

Anyway, where are the lines between performance and usability? I've been perusing user experience resources and the focus has been on eliminating the need for a user to think. And, for casual use software, that makes a lot of sense. However, for productivity software where a user will spend much of the day, I gotta imagine that the kind and thoughtful UI developer is going to allow for improvements in performance that occur through user training - though that means a lot more than just adding keyboard shortcuts.

For those that may not be aware, Flash & Flex Developer Magazine has moved to a free, online distribution model. This is a plus because they used to be quite expensive. I'm not the biggest fan of their site layout, it used to be torturous to navigate it, but they seem to be improving it.

And, as a bonus, they have a flash and flex community section that allows you to add your own blog, along with whatever description you care to give yourself (here is the ShortFusion blog profile). They also have areas to promote usergroups and events.

[More]

I gave my first real presentation last night, Flex Time¹. About 10 people showed up and only one left in the middle. To be fair, he did say something about having to "meet a stripper in 10 minutes" (that's what I heard), so how can you compete with that? Otherwise, it was a good crowd of varying backgrounds with thoughtful questions. We even had an iPhone developer show up hoping to get insight into how to use Flash in place of Object C development, so Adobe's iPhone announcement is reverberating beyond just its core fans.

[More]

I was checking out shu, a niche packager of AIR applications to extend the functionality and improve the installation experience (maybe), and caught myself before going off on a rant. The short story of that is shu may be a great solution for your particular needs, especially if those needs include calling external applications, accessing MySql, though not through ODBC, using custom DLLs for your app, and other fun things.

One of those other fun things that got me thinking was the ability to do screen captures. In a late Friday moment of being simple, I thought, "how hard is that"? So, in five minutes I wrote an AIR application that does screen capture with no extras needed.

Several minutes after that, I realized that I cheated. Damn damn damn.

My Screen Capture Cheat

What I created so quickly was just a Clipboard grabber, a cut-n-paste trick. For Windows users, not so sure how it is for you Mac Hippies or Suspendered Linux Folk, just do a <control>-PrtScrn and the hard part of screen capture is done for you. Now all you need to do is to create a Bitmap out of the BitmapData that found its way into your clipboard and you can do whatever you need to with it. It's fun and easy and you can try it yourself:

[More]

I finally managed to steal a bit of time to work on a small little intro project for Air. I have already made a couple of little apps, but I somehow didn't feel complete because I hadn't spun my own Air-based browser ... I think it might qualify as the "Hello World" for Air.

Anyway, having taken the 2 minutes needs to create a project, throw the HTML, TextInput and Button needed, I had a little browser going. Of course I started with Google because I live my life as a cliche, but I decided to see how well it worked with web based mail. I particularly remember having issues with Hotmail and Chrome when it first came out, but those seemed to have gone away - so how would my Air application behave?

[More]