ShortFusion Blog - Flex

Flex: Country Aware States ComboBox

Fri, 11 Jun 2010 14:20:00 -0500

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]

Flex: Drag Sortable VBox

Wed, 09 Jun 2010 16:42:00 -0500

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]

ActionScript: Emerging Free Book on Bitmaps

Tue, 20 Apr 2010 12:20:00 -0500

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

Fri, 16 Apr 2010 10:05:00 -0500

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]

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

Fri, 09 Apr 2010 11:27:00 -0500

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.

Flex: Using Regular Expressions For RealTime Filtering

Wed, 07 Apr 2010 21:53:00 -0500

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]

Flex: Default List Item, Dynamically Populated ComboBox

Tue, 06 Apr 2010 12:02:00 -0500

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:

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.

Keyboard vs Mouse

Tue, 19 Jan 2010 13:51:00 -0500

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.

Simple Actionscript Color Separator Class

Thu, 17 Dec 2009 15:47:00 -0500

I saw a blog post discussing how to grab the separate composite colors from a unit in ActionScript. This has probably been addressed and solved many times, but there does not seem to be a built-in object to take care of this bit of functionality. You'd think that mx.utils.ColorUtil would be a natural place to find such things, but not so much. So while the author chose to go with string manipulation, I figure it would be a good opportunity to do a little binary work and create a simple little class to keep everything tidy. The general scheme is to perform a Right Shift and then an And. The color information is either 24 or 32 bit with the extra 8 bits in the latter describing the opacity of the pixel. Shifting makes the desired color channel the least significant amount and the logical and with 0xFF will remove any other remaining information. So, to get the channels, it would work out like the following: [More]

Flex - Template System Using Regular Expressions & Simple OOP

Wed, 16 Dec 2009 12:53:00 -0500

I think it goes without saying that we all want to be regular expression hipsters like Ben Nadel ... maybe it's just me? Anyway, there have been many occasions when a regular expression would have been the best tool for the job, but I wimped out and went with more cumbersome string manipulations with code. For a recent messaging system using templates, I started down that road but, luckily found a compelling reason to force myself to use the ActionScript RegEx class. So the quick skinny is that I have a template with placeholders that I need to substitute completely before moving on. For the purposes of discussion, the reasons for the system will be unexplored and I'll try to leave everything simple enough to allow easy re-purposing. The placeholder for the substitution needs to be fairly unique so that we don't collide with something that ought to be displayed. In this case, we'll denote all of the substitution values with the following form: [More]

Actionscript Apps for Android

Mon, 14 Dec 2009 10:09:00 -0500

Since I have recently hopped onto the Android bandwagon, I've been perusing the market. After installing the working Tricorder everything does some weak by comparison, but I did press on. Surprisingly, I found two ActionScript related apps for Android lately:

ActionScript Reference for Android
Flubble

ActionScript Reference for Android

This ought to be rather self-explanatory. Jonathan Dunlap has whipped together a little android app that offers the AS3 helpdocs. Nothing earth shattering, but a nice way to spelunk the docs. I'm thinking that it'll be my go-to app when I have to kill some time.

Flubble

I haven't quite figured out what to make of Flubble yet. Ostensibly, it is a stubbing app for ActionScript classes. I haven't used this for an actual project yet, but I have run some tests and received my class files both as AS3 and XML. The XML is an interesting option that threatens to have some potential, though I haven't worked out quite how I would use it. It looks to be a nifty little app and I hope that I can fit it into the workflow in some way. Of course, there are a lot of generic supporting apps to be found (text editors, ftp clients, ftp server (odd), flash card makers and the like), but for some reason I was surprised to find an app like Flubble. It does get the wheels turning about what sort of apps could be created for the platform.

Flex Builder Coldfusion wizard visual query builder not working solution

Sun, 01 Nov 2009 00:45:00 -0500

This has been haunting me this entire week, particularly since I found the solution more than once but chose to forget it. Thankfully we started this blog to help us provide the answer for the things we forget. So, if the visual query builder does not show up when you try to edit a master page or edit detail page while using the Coldfusion Flex or Ajax application wizard, HERE IS THE SOLUTION: Start Flex Builder as an ADMINISTATOR! (Windows Vista or 7) I hope I will remember the next time... To reiterate, starting flex builder 3 as an administrator fixes the issue where the Visual query builder does not seem to work while trying to edit master page.

Flex - Rounded Corner Component with Tiled Bitmap Background

Thu, 22 Oct 2009 12:45:00 -0500

Lately, I have been getting more involved into working with the visual aspect of Flex. Up to now, I had been able to pass off the styling to Alex after working on the functionality or have just worked on projects where the visuals weren't a concern. Anyway, it is often good to get opportunities to explore. So, the simple thing that I needed to do was to create a rectangular component based on mx:Canvas with a tiling background and rounded corners. Figuring this ought to be a straightforward thing to do, I blithely set about it. First snag: Flex doesn't seem to offer a straightforward way of identifying a repeatable background for the Canvas class. Quick searching revealed that one can do this with Degrafa, but I didn't want to go that route. (Not that Degrafa isn't tremendous, it just seems like a lot of overhead just to tile a background image.) There is another solution for setting a tiled image as a background. That is a really nice solution, but, for my immediate purposes, has distracting elements like loading the image at run-time. Run-time loading could be an incredibly useful feature, and it is worth noting, but if you have a small, single image you want to use, it is nicer to just embed it and not have dependencies at deployment. The core of the solution is to use lower level AS3 functions to draw a rectangled that is filled with the bitmap of choice. So, a quick bit of code that shows the embedded image written as a tiled background for the component: [More]

Flash & Flex Developer Magazine Is Free With Community Resources

Tue, 20 Oct 2009 11:27:00 -0500

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]

Question about Flash Cross-Compile to iPhone

Wed, 14 Oct 2009 10:07:00 -0500

I mentioned in my last post that an iPhone developer attended a Flex presentation that I gave. He was hoping to get some info on how he might use Flash as a means of producing apps instead of Objective C. Not sure what development environments exist for iPhone development presently, but the idea of using Flash is obviously titillating to some. [More]