Free Flex Component - Gradient Editor

I can't take credit for this component, but I came across it and thought is was pretty useful. It was created by Mariusz Tkaczyk (http://mariosh.com/)The original post is a few months old and I don't remember ever reading about it, so I figured that many of us may have never seen it. The screenshot below is from his blog, where you can download the source.

PixelBender Filter required... I think?

If you read my blog you know that I don't currently have a Mac. This is true, however I have used enough of them to really fall in love with some of the UI details. One of them is the way in which when you minimize a window it kind of warps as it shrinks into the dock.

I don't know much about PixelBender effects, but this seems like something that could be accomplished. I am not even sure what keywords to use on Google to search for such an example. So, if you know of an example of how that effect might be accomplished in Flex using PixelBender (or without using PixelBender) I would really like to see it.

Programmatic Yahoo Skin Library update

I have added some new skins to my programmatic version of the Yahoo Skin Library. The new additions are the ComboBox, CheckBox, PanelTitleBar, PanelControlBar, PanelCloseButton, ToggleButtonBar.

The demo below is the actual Yahoo Skin Demo MXML with my CSS attached. So, you will see that not every component in it is styled correctly yet. As I add new skins to the library, this demo will be updated.

You can see the demo and download the source here

The Case Against Flex-Based App UIs...Really?

Last week, someone pointed out to me this article from intelligententerprise.com and asked for my thoughts on the author's arguments. In his article the author compares RIAs built with Flex to those built with Java Applets. While there are similarities between the two conceptually, any Flex developers who experienced building an enterprise application with AWT and Java 1.1 will surely agree that they have many differences.

So, here is my take on his "arguments".

"They almost always violate web accessibility guidelines"

No platform for web-based applications gives you accessibility entirely for free. Flash(Flex), AJAX and even web 1.0 HTML applications require effort to make them accessible. Flex gives developers an API to make applications keyboard accessible and able to be used by JAWS. If I am not mistaken, this capability existed with Flex before any AJAX framework had it. One could argue that making a straight HTML application accessible is far easier than making a Flex or AJAX application accessible. However, there are a lot of other user experience benefits that you can't get with plain old HTML.

"They create support nightmares"

He seems to be confusing AIR with Flex. Flex is a technology used to build applications. AIR is a desktop runtime used to run applications. AIR applications could be created with Flex, Flash or AJAX. Like any desktop application, pushing updates is not as simple as web-based ones. However, AIR does provide the ability for automatic updates that is easy to implement. "The potential for trouble remains" sounds to me like "There is no problem now but someday there might be"... you could say that about any technology. Flex applications that run in the browser have very little need to worry about this type of issue. Adobe frequently updates the Flash player but maintains backwards compatibility better than anyone I have ever seen. Applications built for Flash 5 will still run in the Flash Player 10. The only changes that may have caused problems are some security changes. While this is something that could break backwards compatibility, I would argue that it is worth it in those cases.

"They are prone to performance problems"

Memory leaks are just as likely in non-Flex applications. With JavaScript (AJAX) based applications it is very easy to cause memory leaks. Even Microsoft points out some patterns that cause them (http://msdn.microsoft.com/en-us/library/bb250448.aspx). Good developers can watch out for the types of coding patterns that cause memory leaks. FlexBuilder has tools to help developers identify leaks. With AJAX applications, it is more difficult.

"You can't easily modify them"

This is probably the most outrageous claim on here. He clearly doesn't understand how Flex applications are built. Changing the look and feel is one of the key features of Flex. Scalenine.com and fillcolors.com both showcase the ability to change the appearance of Flex applications in some cases very dramatically. The decision to not allow this type of "skinning" is really a business decision not a technology limitation. The demo situation he describes is rather amusing. None of the problems he describes had anything to do with Flex as the technology. Rather, they point out the vendor’s lack of a good interaction designer. He points out that the answer they wanted to hear was "You can modify the UI yourself on a role-by-role basis, and our platform is properly tiered, so we can show you how to customize it in a release-safe way." This is exactly what a well-designed/well-implemented application does allow for…regardless of technology.

Yahoo Skin Library - Programatic version example with source

I am currently working on a project on which I am using the Yahoo Flex skin library. If you haven't taken a look, I suggest you check it out. In my opinion they look a little better than the default Halo skins.

The other day, a developer asked me why changes to the fillColors style were not working. I explained that the styles could not be changed using CSS because they were graphics. This led to the question of "How can I make a red version of the primaryButton?". I got about half way through my answer of "I can create a skin graphic for you" when I realized that this was a major drawback of the graphical skin.

So I set out to create a programatic version of the Yahoo skin library.




Check out the live version with source here.
UPDATE: I changed the demo app to be the actual Yahoo Skin Library demo application. When you launch it you will see that some of the components still have the Halo skins. As I finish each component skin, this file will be updated.

My immediate need was to create a button skin which is all I have so far. It still needs to be cleaned up a bit but I figured I would post the example and source code in case anyone else ran into the same problem. I plan to create the whole set so stay tuned. If you would like to contribute some skins for the other controls, feel free to post a comment.