Flex and Paypal

Excellent Flex tutorial from Adobe Platform evangelist Miti Pricope on how to combine a Flex application running in Flash Player with PayPal Express Checkout. More than a tutorial, it’s a good little object lesson on things to consider in the planning stages of creating an app, ie security, appropriate architectural solutions and planning the UI. I’ve been looking to post more pointers and tutorials like this which address the trend toward developers making money out of their skills by offering applications for e-commerce sites, especially small-scale ones often run by individuals who need cheap solutions that are easy to implement.

Flex Background Colors

Here’s a Flex tip on changing default flex background colors:
When you are using a different color background to the default one in Flex, there can be a slight delay when resizing the window for the new background color to catch up. Before it catches up, the old default color is displayed. To fix this simply go into your project properties and the into the Flex compiler settings and in the ‘Additional Compiler Arguments’ add the following line:

-default-background-color #COLOR

Swapping COLOR for the code of your color. I would encourage anyone who has Flex tips no matter how obscure to let me know in the comments or by visiting the “write for us” tab in the navigation bar above.

Flex Example

dian-kerala-houseboat

Here’s a Flex example for you. Picnik, the online photo editor built in Flex, just won a ‘Webware 100’ award from CNET. It’s a Flex application that I found absolutely jump-out-the window easy to use.

I like to go into applications the first time and see how far I can get by just playing around; call it a usability test. I had the perfect little test case, a photo of my wife on a houseboat in Kerala, India, a little blurry and tilted shamefully by yours truly, apparently so lazy in the heat that I couldn’t sit up straight!

Well, Picnik to the rescue. It’s so hard to create applications that are so simple that one never has to pause and wonder how to proceed. Picnik is a Flex example that shows just how easy designers can make it. It took me 3 minutes to: Upload my photo, straighten it by drawing a line on a horizontal reference, sharpen it a little with the slider, add a title with a nice font and save it back to my hard drive and then to my Flickr account. Nice. And free, (US$24.95/year option to upgrade).

By the way, hit this link if you’re interested in looking at some Flex 3 Actionscript Examples from livedocs.adobe.com.

Adobe Flex Builder

Flex 3 Actionscript Examples

I was reading some Flex docs online the other night, and in the live docs section I noticed a link to where you could download the example scripts for many of the examples shown in the Flex docs. The zip file is available and contains some great Flex/AS projects including a Wiki Editor, Video Jukebox, Display Object Transformer and many more. Most of us would be interested in doing more than simply passively reading the Flex 3 documentation and instead taking a little time out to actually use the scripts to understand better how they work in practice, and now you can do that.

Adobe Flex Builder

Flex Thumbnail Browser Component

Regular readers of my site have probably noticed that I have been an inactive blogger over the past couple of months. There’s a very good reason for this. Since starting my own consultancy, I have been very busy! I think I may actually be working for the first time in my life – and having a helluva time doing it. What’s been keeping me so busy? FLEX! For the past four months I have had my head down in Flex Builder creating a revolutionary RIA (beta coming next month).

It’s my year anniversary working with Flex (save a two month stint with Ruby on Rails) and in that year I’ve learned a great deal. Most of my days are spent writing ActionScript 3 components and I must admit that I think I’m getting very good at it. So to ‘prove’ it and to share with the Flex community, I am offering my first Flex component for download!

ThumbBrowser is a knock off of a new widget found in iPhoto ’08. It is a small component that will collect all of your image thumnails into one component. When you move your mouse across the component, you get previews of all the thumbs in collection. You can view a demo here and download the source here.

Some quick notes:

  • The component’s dataProvider property only accepts an array of URL’s/paths to images (I hope to add XMLList soon)
  • You can set 4 styles: borderColor, borderThickness, cornerRadius, and backgroundColor
  • Component dispatches only a click event. I would like to add a progress and complete event in the next release
  • The full size image is downloaded, but the image is scaled so only a small representation of the images actually stays in memory (I think this is true, please correct me if I am wrong)
  • I will add ASDoc style comments over the next few days, and hope to submit it to FlexLib.
  • Although there is no open-source license attached to the component, please feel free to use is it as you please.
  • ThumbBrowser might make a better Adobe AIR component, as loading a large collection of images over the web could take a while.

I’d love to hear your feedback on the component, and please send suggestions as to how I might be able to make ThumbBrowser better!

Enjoy!

Adobe Flex Builder

Open Source Flex Component Library

Flex 2.0 comes with a great set of essential components for building RIA’s, but if you have the craving for more top quality components, check out flexlib.  It is an excellent open-source component library at Google Code, that contains quite a few components that could be useful in your next Flex RIA.  As you build more and more Rich Internet Applications you might find, like I admittedly did, that having access to more components could in essence expand your palate and consequently the range of things you can do with Flex. This is a terrific, comprehensive repository they have over on Google code so if you are a Flex developer you  have to take a look at.

Adobe Flex Builder

10 Ways to Skin a Flex App

ScaleNine offers a list of 10 Ways to Skin a Flex App. There are lots of great links to resources for skinning your app from CSS to programmatic skinning to 9-slice. What a terrific resource this single webpage is for any developers who work with Flex 2. Even if you are interested in only relatively minor customizations such as adding an exotic font to your app or icons which heighten the visual experience of it for users and improve the overall interface of it, you’ll find it in this listing. This would be an appropriate resource to pass around to your colleagues who also create Flex 2 apps, that is exactly what I did.

Free Themes for Flex

ScaleNine (cool site name by the way) is offering free, high-quality Themes for your Flex 2 apps. There are currently 6 themes in the collection with more coming in the near future. Update: after quite a while I went back to take a look at how actively new skins and themes for Flex 2 are being added and happily I can report that dozens and dozens of absolutely gorgeous and interesting themes are now available on the site.

There is even a provision for  learning how to create your own skins for Flex and AIR right on the sidebar that I think a lot of developers will have an interest in. But again, it will be a long time before you exhaust the possibilities for teriffic themes already available to you on the site. Adobe Flex Builder