December 1, 2009

I gave a presentation on Custom Components in Flex 4 at Adobe Devsummit last week in Chennai and today in Hyderabad, here’s the slidedeck where we create an Imperial StormTrooper component

August 22, 2009

Yesterday at the Bangalore Flex User Group Meeting after Khan’s excellent talk on LCDS3, Fiber and the Modeler Plugin we had some time left to so I decided to show everyone how cool and easy layouts in Flex 4 are ..

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 … read more

August 16, 2009

Layouts in Flex 4 are decoupled from containers and its quite simple to define your own layout. Yesterday I wrote ConcentricLayout.

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

 

August 2, 2009

Last week I got some Illustrator files from the designer on our team, which I had to convert into Flex 4 skins. When we had planned this, we thought this would be easy … the designer makes the skins in Illustrator, we export FXG directly from Illustrator or we import them into Catalyst, do some tweaking and then export to get FXG that we can use in SparkSkins .. unfortunately it wasn’t that simple, I’m documenting some of the gotchas and workarounds I learned for anyone else who may run into the same situation.

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

Original Graphic created in Illustrator
FXG Exported from Illustrator
FXG Exported from Catalyst

  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. read more

July 21, 2009

Flex 4 does not have an EllipticalArc primitive yet, but I needed one today .. thankfully Degrafa already has an EllipticalArc Class, I translated that to work with Flex 4.

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.