Sunday, September 25, 2011

Skinning - Flex 3 vs Flex 4

Skinning UI Components has largely been a necessity in the world of Web 2.0. Every application needs to look different and feel different. In such a scenario, Flex had brought the concept of skinning, that lent a fresh and different look to each component with the help of skin classes.

In Flex 3, the skin was tightly bound to the component. So, the entire look and feel was intertwined with the functionality of the component. However, in Flex 4 Adobe has made a refreshing change, separating functionality and display. The display aspects is moved from the component code to the skin class.

What it means for us is that in Halo components the look and feel of the component is directly connected to the methods of the component whereas, in spark components, the look and feel have been separated from the functional behaviour of the component. The impact this makes is that no matter how you skin the component in Flex 3, they'll always be similar in the way they look and feel. On the other hand in Flex 4, two components can be drastically different in the way they look and feel and yet have the same functionality.

The other beautiful thing that comes out of the separation is that developers and designers are no longer dependent on each other. The developer has the freedom to write the logic without worrying about the appearance and the designer can create the UI without worrying about the effects into the code logic. With Flash Catalyst the creation of UI has become even more simpler. As a direct result of this, the requirement changes that were previously so hard to accommodate due to monkey patching are done very simply in Flex 4.


No comments :