Here’s the slide deck from beginning of the lecture which tries to define what an RIA is and explores the architecture a typical RIA platform …

Shortcuts

Here are some Flash Builder Keyboard shortcuts I use very frequently, if you have suggestions on others that are especially handy, please let me know …

* CMD on OSX = CTRL on Windows

Customize

If you press CMD+3 and type “keys”, you’ll see the keyboard customization preferences panel for Flash Builder, I recommend spending some time customizing Builder for your own needs, for example I use CMD+1 and CMD+2 to switch between Develop/Debug perspectives. I barely use the NumPad on my keyboard so I’ve customized it to be all keyboard shortcuts, pressing CMD+0 inserts snippets

Snippets

Having a good snippets plugin can greatly improve a developer’s productivity, I love how Snippets work in TextMate, I’m still searching for a good solution for this in Flash Builder, till now I’ve been using CFEclipse’s SnipTreeView but the problem is it only works with AS3 code and can’t handle MXML. I was so desperate one day that I figured out that it fails because the CFEclipse InsertSnippetAction class on Line No 71 assumes that the editor is an ITextEditor, while this is true for most Eclipse editors, the MXML editor is actually made of 2 editors a Design Editor and an ITextEditor, so the type cast on Line 71 fails … I never got to building CFEclipse on my own though. But, it looks like Lee Brimelow did, he has released a fix which makes SnipTreeView work with MXML editor, unfortunately though Lee’s fix doesn’t work for me because of a Java version issue on OSX Leopard.

Another handy Mac only tool is TextExpander. It sometimes breaks your formatting in eclipse, but that has gotten better with Flash Builders new auto formatting improvements.

Multi Clipboard

A multi-clipboard tool is another must have for all developers, I use Jumpcut on OSX and it is a big big productivity boost to not have switch between files and applications when copying and pasting. I don’t know any good equivalent for Windows, so if you know of one, please let me know.

Finally, I have to thank Chetan Sachdev because he got me hooked to optimizing my workflow using the keyboard while we were working together on a project earlier this year.

I would love to know if you have any other handy tips on Going Commando.

Here are two quick layouts we wrote during the meeting as I showed everyone how easy it is to write a custom layout …

Random Layout

Step Layout

These layouts are currently somewhat crude but the idea was to convey how easy it is to write your own layouts … here the code for RandomLayout … just one simple function …

Of course, these layout algorithms can get more complex … here’s the StepLayout code …

For more elaborate examples you may want to checkout the ConcentricLayout example I posted last week or Ryan Campbell’s very cool 3D Layouts. Evtim, an engineer on the Flex SDK team also has some detailed posts on how to write Layouts on his blog.

Flex 4 is awesome.

UPDATE: You can view the complete source of the above example here or download it from here.

ConcentricLayout arranges layout elements in such a way that their centers are aligned and their size sequentially decreases. The width of each layout element is less than the previous element by a value specified using the horizontalGap property and the height of each layout element is less than the previous element by a value specified using the verticalGap property. If the element has an explicit width or an explicit height it still aligns its center but is not resized. You can tell the layout to force a resize of all elements and ignore their explicitly specified size using the forceResize flag

Here’s a quick example:

View Source

Download Source

Most of the problems we had were related to gradients, here are some snapshots …

1. The first strip is original graphic created in Illustrator
2. The second strip FXG Exported from Illustrator
3. The third strip is original Illustrator file imported into Catalyst and then FXG exported from Catalyst

Clearly, all of them are different. While this difference may not feel significant when looked at in this isolated manner, if you have many gradients in your design it can significantly affect the fidelity of the design.

Here’s the code generated by Illustrator’s FXG export feature ..

Here’s the code generated by first importing the Illustrator file into Catalyst and then exporting FXG ..

Note that the colors exported by each are different.

Suggestion: Illustrator’s FXG export should have a way to add namespace prefixes while exporting, would be helpful

At this point, I asked about this problem on an Adobe forum and one of the team members replied and suggested I should … In Illustrator, convert colors to SRGB and turn off color management. So I did that.
Here’s the original followed by what it looks like with the new settings …

So, our designer will have to redo some work in the new settings to create the original look, that’s fine, as long as we can get the exact same look in out final Flex application. But that didn’t work out either ..

1. The original graphic with the new color settings applied
2. FXG exported from illustrator
3. FXG exported from Catalyst
4. The original graphic without the new color settings

Here’s the code of FXG exported from Illustrator …

Here’s the code of FXG exported from Catalyst …

Note that this time both the FXGs are exactly the same except they still don’t look like the desired look drawn in Illustrator. Even if we use different color settings.

Now I noticed that Illustrator also allows exporting to SVG so I exported my original graphic as SVG …

1. Original
2. SVG exported from Illustrator

So that’s not perfect either but its much closer than any of the FXG output above …

When I looked at the code of the exported SVG …

Clearly there is more color detail in there, it has 10 gradient stops as opposed to only 3 in the FXG output we got, this explains lower fidelity of our FXG output .. so I translated this SVG manually to FXG ..

Here’s the original followed by the final FXG I created manually …

Not perfect, but fairly close.

Suggestion: Illustrator and Catalyst FXG export should not drop gradient stops

Since, Catalyst is still in beta, I think Adobe will probably fix this by the time it releases but till then you can use the SVG workaround if you run into a similar situation.

I had to convince our designer to settle at “fairly close” for now, but if this Designer-Developer Workflow thing has to work, we need to get better at generating the exact look a designer draws in his/her design tool, at the click of a button.

EllipticalArc is a FilledElement so it can have a Fill and a Stroke just like other FilledElements Rect, Ellipse etc.

View Example

View Source

I haven’t yet implemented some of the layout related functionality that other primitives like Rect, Ellipse etc implement … but it seems to work fine with basic layouts, which is what I needed for now. The class is hosted on Google code under the Apache 2.0 License, just in case someone wants to improve it.

Thank you to the Degrafa team for sharing their amazing work that saves me loads of time every now and then.

FlexMania is a Brazilian online event organized by Igor Costa. The event is focused on the Flash Platform and has a great collection of Flash/Flex/AIR related talks.

Although, most of the talks are in portuguese, there are some interesting english sessions as well like Laura Arguello on Mate Framework, Stephen Downs (a.k.a Tink) on Efflex and Iiley Chen on AsWing

I will also be presenting in english, my talk is “A Flex 4 Component’s Lifecycle” on Monday, July 6th at 15:30 GMT.

SLIDES AND CODE: The slides and code from the talk can be found here

Here are the slides and experimental code from the talk …

Here’s the code we played with to understand how frame rates work in the flash player …

Here’s the code we wrote with to understand the Elastic Racetrack …

Here’s the experiment to understand marshaled slices …

Download Slides
Download Source Code

The presentation was slightly long and I’ve already heard that some people found it boring but I hope that wasn’t the case for everyone

I would like to thank all the awesome people in the Flash/Flex community who have helped me understand all this by publishing some great articles and blog posts … here are just some of the articles that I’ve found very useful …

Ted Patrick on the Elastic Racetrack
Sean Christmann’s Updated ‘Elastic Racetrack’ for Flash 9 and AVM2
Ely Greenfrield on Building a Flex Component [PDF] (Thanks Ted Patrick for making it available on his blog)
“Diving Deep With the Flex Component Lifecycle,” by Brad Umbaugh and RJ Owen
White Paper by the guys at Development Arc on Component Lifecycle

Please do let me know what you thought of my talk and how I can improve it.

The talk will be an in depth walk through of the life cycle of a component in Flex 4. The Flex 4 component model (Spark) is built on top of Flex 3 component model (Halo), so we will also take a detailed look at the Flex 3 lifecycle.

I am not planning to do a feature by feature overview of new features in Flex 4, so it would help if you already know a little bit about that. These articles are a good place to start ..

Matt Chotin on What’s new in Flex 4 Beta
Joan Lafferty on Differences between Flex 3 and Flex 4 beta

Check out the event page for registration and other details.

Look forward to seeing you all there.

UPDATE: I’ve posted the slides and code from the talk here

Since I needed these in several skin files I did not want to deal with clunky Path elements which would’ve looked something like this..

So I created a quick AIR application …. that that converts the elements into AS3 classes that extend from spark.primitives.Path and look something like this …

This way all my path data sits in one place I can use this library of visual elements in a reusable way across several applications and changing something would be really easy. Also, unlike the generated code from Flash Catalyst (Thermo) all my components are not inside Groups which are fairly heavy components.

Watch this quick video of a detailed demo of how to use the tool …

If you think this is something useful for you to ….

Download and Install

Since I did this in very little time the code is quick and dirty but it works and is available under the Apache 2.0 License on Google Code so feel free to to modify for your own needs.

View Source at Google Code

An after thought was that this should probably not be called FXG to Component since the generated classes do not inherit from UIComponent but instead from Path which is a GraphicElement. Anyways, who cares as long as it does what its supposed to do.

Please do let me know if you find this useful.

Peter Elst highlighted this presentation on his blog, but I think its important enough to be highlighted again …

Flash Player Internals,
presented by Jim Corbett and Lee Thomason at Adobe MAX.

Someone recently asked me how to go about understanding the Flex Component Lifecycle .. my usual answer to this is to go read the documentation, then the source of UIComponent and a few basic components like Label, Button etc. .. I also sometimes point people to the Building A Flex Component [PDF] presentation from Ely Greenfield which I’ve found useful in the past … this time though, I was also reminded of some recent presentations I had seen on the subject and found interesting .. so I thought I’ll share them here as well ..

Diving Deep With the Flex Component Lifecycle,
presented by Brad Umbaugh and RJ Owen at 360 | Flex, San Jose.

 
Creating New Components in Flex 3,
presented by Deapa Subramaniam at MAX 2008

Also, while we’re on the subject, if you’re in Bangalore you should consider attending this Friday’s Bangalore Flex User Group meeting where Chetan Sachdev will be presenting a talk on Custom Components and the Component Lifecycle.

Register here

• Flex 4 (Gumbo)
• BlazeDS .NET
• Flex plugin for Visual Studio
• Flash Catalyst (Thermo)
• Flash Player 10 (Astro)
• Alchemy etc.

More details about the event here.

If you’re planning to attend, please RSVP here … also if you’re there do catch up with me and say hi

What is Stax ?

According to the Stax website … Stax is “The fastest way for developers to build, manage and scale Java applications on EC2″ .. here are the notable features ….

Application Templates

Once you’ve installed the Stax command line tools its a breeze to get started with building your application. Stax comes with various pre-configured application templates to get you started .. the most notable for me among the templates was the Flex/BlazeDS template that can be created as follows ..

$ stax create -t flex myflexapp

The -t in the command line tells stax to
generate using the flex template

Check out the 2 minute guide to create and deploy a Flex/BlazeDS Hello World app that uses remoting .. it really did take 2 minutes.

Stax also has application templates for Struts, Wicket, JSP, Jython, JRuby (on Rails) and ColdFusion
 

No proprietary APIs

Stax does not make you use any proprietary API, so your application code is totally independent of the environment and you can choose to move to a different deployment environment whenever you like.
 

Simulated local development environment

The Stax command line tool has a run command that lets you run/test you application locally during development using a local pre-configured instance of tomcat.

$ stax run

And when you’re done developing just say ..

$ stax deploy -u staxusername -p staxpassword

Snapshots and Roll-Back

Stax lets you create snapshots of applications or databases so you can revert to previous snapshots at any time. Every time you hit the deploy command a snapshot is created and you can revert to it anytime.

Reporting and Monitoring

Stax also has real time reporting to monitor your application’s health, resource utilization and performance

All the Elastic Cloud goodness

And last but certainly not the least Stax lets you leverage all the Elastic Cloud goodness offered by Amazon EC2 .. scale on demand, clustered servers for load balancing, pay for only what you use etc.

Stax is currently in closed beta and they’ve not announced their pricing, but its definitely worth a look the next time you’re starting a new project.