I soon realized the wrapper SWF had become 160KB in size…
Clearly, something was wrong, so I investigated.

As it turned out, I had been referencing the loaded modules by their document classes. I wasn’t really concerned about abstraction, since I had a very specific implementation in mind for the wrapper. However, the wrapper was compiling not only the concrete classes, but all of the concrete references made by those concrete classes. This can increase exponentially when some of those concrete references also happen to be embedded assets.

Since all the module SWFs used a single method call to both retrieve the model and initialize themselves, I decided to set up a quick interface, recompile the modules, and then reference the modules via the interface within the wrapper. Sure enough, the payload for the wrapper dropped from 160KB to a much healthier 4KB.

Just one of those things that makes sense in retrospect, but is only ever realized once you fall into the situation.

Anyway, click the link above to see it in action!

Under normal circumstances, the solution should be as simple as:

However, this failed to account for nested delimiters. For example, A,B,(C,D) would split into A B (C D), instead of the more desired result of A B (C,D). Standard string manipulation indiscriminately splits regardless of the existence of parenthesis, or any grouping operators for that matter.

My next attempt was to solve this using regex. This worked for a little while, before I realized yet another challenge: Greedy regex will fail in the presence of sibling groups, while lazy regex will fail in the presence of nested groups. What we need here is something far more specific...we need to count parenthesis. This is the solution I came up with:

The only characters I'm interested in are the delimiter and the open/close grouping operators. (If you wanted to make this function a little more adaptable, you can easily swap the hard-coded ",", ")", and "(" values with parameters passed into the function.) All I'm doing is locating the next position of each of the three characters, and figuring out which one is closest to where the starting substring index is. Based on a simple depth counter, I can determine if a comma lives outside of all the groups in the expression, and choose to either ignore it or use it as a delimiter. As an added bonus, since I'm counting parenthesis anyway, I can also make sure the syntax is written correctly, and throw errors when something unexpected comes up. Anyway, since thing this is pretty useful and very self-sustained, I decided to throw it up here to share. Let me know if it helps you out!

One more thing: Keep in mind this function is only designed to handle depth 0 delimiters, so if you need to build a nested list of values, you'd have to run this recursively with each individual grouping.

1. Don't observe hot keys when typing in a text field.
2. Group multiple hot keys such that they can be collectively prioritized or enabled/disabled (this is especially crucial for modal popups).
3. Implement easy-to-use behavior to common components.
4. Keep references weak.

I'm quite satisfied with the results so far, and feel confident that my system will be adaptable to these use-cases and more. Nonetheless, I'd like to push out a pre-release for other developers to test and play with (and perhaps give me feedback as well).

The formal release for the hot key system will include more thorough documentation and meta-data tags for Flex Builder.

Hot Key Demonstration
Source Files

 UPDATE: It's been brought to my attention that the CTRL buttons aren't working for people, and I'm pretty sure it has to do with differences between Mac and PC (it's only working for Mac right now). Apparently keycodes output different values via different OSes, so I'll probably have to switch over to charcode.  I'll explore this further...

Before you begin, log into your mailserver and see what options it provides for handling incoming mail. Most mailservers have the option to forward it, but if yours allows you to filter the forward feature, then you're in luck; You get to follow the first (and easier) guide. If you're like me, then you'll be stuck with the second guide.

For those whose mailserver can filter forwards:

1. In your mailserver, forward all incoming mail to a new Gmail account, except mail from the Gmail account itself. This step is key.
2. In your Gmail account, go to settings > Forwarding and POP/IMAP, and check the Forward a copy of incoming mail... radio button.
3. Enter your POP3 address in the text field, and set the drop-down menu to archive.
4. You're all done!

For those whose mailserver can't filter forwards:

1. In your mailserver, forward all incoming mail to a new Gmail account.
2. In your Gmail account, go to settings > Forwarding and POP/IMAP, and check the Enable POP for all mail radio button.
3. Configure your Email client to read from your Gmail account instead of your POP3 account.
4. In your POP3 account settings, you should have an option to set a different outgoing E-mail address than your incoming address. (I use Entourage, which lets you define this in your Account Settings tab under Personal Information. I also use a Blackberry, which calls this field Reply to under Set up Internet E-mail). Set your outgoing address to be your original POP3 account, so you can reply to your incoming mail under the same address that is originally used to send to you in the first place. Keep in mind you must do this for all E-mail clients that you use to communicate through.
5. You're all done!

With either guide, you'll be set up such that you can send and receive E-mail through your original POP3 account, and still take advantage of Gmail's spam filter system. Don't forget to disable the filter systems already set up on your mail client, you won't be needing them anymore.

[flash http://www.youtube.com/v/6NcIJXTlugc&rel=1 w=425 h=355]

It also turns out that someone built an RIA that imitates this application, which you can check out for free here:
http://rsizr.com/

Rsizr is also planning to release a Flash app that can present any image on your site with the scalability demonstrated in the seam carving presentation (although from my experience, it might not run quite as smoothly).

Anyway, for some news...

My blog has just been added to the Macromedia XML News Aggregator, which means I'm going to have to start creating actual content for this page again. Yep...aside from that and the self-employed details, that's pretty much it for the news here. Stay tuned for more posts! :]

This is a little disconcerting, to say the least, but it has been brought to Adobe's attention and will be resolved by the next player update.

In the meantime, how do us Mac-savvy developers cope with this? Here's my solution:

1. Go here.
2. Check the box under the terms of use.
3. Scroll down to the recent nightly builds of the Flex 3 SDK.
4. Download the latest one.
5. Unzip the file, and navigate to runtimes > player > mac.
6. Open the Install Flash Player 9 UB.dmg and run the installer.

This will correct that issue for both the standard and debugger players.

What Code-Behind Is

Code-behind is a practice whose origins lie in ASP.NET, but is easily transferable to other declarative-style markup languages (like Flex, for example ). It is specifically used for UI components: where a combination of functional logic and visual composition, effects, and states are combined into one. Sounds kinda like MXML, doesn't it?

Why Code-Behind Is Useful

In rapid-prototyping and large team environments, the extra degree of encapsulation by code-behind proves to be invaluable to the production process. For rapid-prototyping, it is important to build a working system quickly and effectively. In many cases, the look and feel of the product might not even be planned at all, let alone finalized, and ability to defer such superfluous elements until later is almost always ideal. For large team environments, many people of different skill-sets might have their hand in your code. Encapsulating elements into a "visual sandbox" that can be delegated to designers will help you, the developer, keep control over everything else under the hood. Both of these scenarios are made possible through code-behind.

How Code-Behind Works

Code-behind is a solution targeted at encapsulating form and function into two separate entities that are each part of a greater whole. Under this approach, any UI component can be viewed as two layers.

The function layer provides the component's control logic; Making it responsible for the internal workings of the component, as well as the necessary method/property exposure for the component to be compatible with the underlying application framework. Think of the function layer as the concrete foundation of a house. The foundation represents the base for the rest of the component to sit on, and also provides access to utilities, such as the underground plumbing network that transfers water to and from the house: a network shared by other houses in the neighborhood as well.

If the function layer represents the foundation, then the form layer would be the house itself. The house's priority isn't to connect to other houses or even the surrounding property. Its purpose is to be used by its residents and, hopefully, look pretty while doing so. It also shields from the weather, but just like the tenants that come and go, these are all external forces that are of no concern to the community's infrastructure. All metaphors aside, the form layer is simply the look and feel of the UI component.

An application may have many custom UI elements, but the convention for each one should be the same.

• The form layer extends the function layer.
• The application holds dependencies at the function layer.
• The application instantiates at the form layer.

The diagram below depicts the relationship of these layers under the conventions listed.

Of course, the diagram is an over-simplification of this code-behind model, and in many cases you can further abstract the application's dependencies to a more common base class. The one-to-one relationship between form and function layers, however, are very common. It is possible to have a one-to-many relationship from function to form, especially in cases where you might change the look-and-feel of a component at runtime, but there should never be a one-to-many relationship from form to function. As you'll soon see, the form will always be dependent to its own corresponding function.

Ok, so here's an example component built with code-behind.

[flash http://www.schelterstudios.com/images/blog/codebehind_flex.swf w=400 h=205]

This component is made from two files: RegistrationForm.mxml and RegistrationFormBase.as
As you might have guessed, the mxml file is the form layer, while the as file is the function layer. This should always be the approach to code-behind in Flex, since MXML is a declarative language built specifically for composition, while Actionscript is a strict language that can better utilize superior OOP convention.

Check out RegistrationForm.mxml and RegistrationFormBase.as in the source below:

view source

A few details of particular significance:

1. RegistrationForm is a component wrapped the custom RegistrationFormBase tags.
2. Components in the form layer that have function applied to it must have the same names in both files. When declared in the function layer, these components must have the public namespace (for binding purposes).
3. The childrenCreated() method is overridden in the function layer, to set up data binding and event handling to the components.
4. States should be listed as constants in the function layer, and then pointed to in the form layer, so that way the function layer can integrate state-swapping logic, while the form layer declaratively composes those states.

In addition to these points, the function layer also leaves many options open for property/method exposure, as shown with the user and pass properties listed in RegistrationFormBase.as.

Well, that about covers it for a brief overview. There are many different topics to discuss about code behind and its usage with many different interface design challenges, so please leave comments if you'd like to ask any questions!