http://www.hulstkamp.com andy hulstkamp blog about rich internet applications, flex, flash, java, webapps, web, code, experiments Fri, 14 Aug 2009 13:41:13 +0000 http://backend.userland.com/rss092 en I was experimenting a little with the PopUpAnchor in Spark Flex 4 and came up with a new custom component for ratings. The new component has the following characteristics: Show a placeholder-icon that reflects the current rating and serves as an interactive element to open the ratings ratings pop up for adjustment both ... http://www.hulstkamp.com/2009/07/09/custom-popup-rating-component-in-spark-flex-4-gumbo/464 For the past couple of days I've had a look at creating Spark Icon Buttons. In this post I've created an FXG Icon Button with some transitions, leveraging pseudo selectors for states. The Icon was 'hardcoded' into the skin. For another Icon I would need to duplicate the skin and ... http://www.hulstkamp.com/2009/06/20/advanced-fxg-spark-icon-buttons-with-one-generic-skin-in-flex4-gumbo/439 It was funny to see how many examples of Spark Icon Buttons have shown up in the past few days. Andy mcintosh did an example here, Ben another one here, I did one myself here. While all were using a slightly different approach the motivation behind them was probably, that ... http://www.hulstkamp.com/2009/06/20/getting-vector-graphics-into-spark-skins/433 update: Check this example for a more advanced and generic approach Here's an example of a Spark Icon Button done in Flex 4. There are smooth transitions on the background gradient between the up and over states. From the over state to the down state the shadows are removed smoothly. Each ... http://www.hulstkamp.com/2009/06/18/spark-icon-button-with-gradient-effects-and-filter-animation-colorized-by-styles-flex-4-gumbo/403 When working with huge amounts of data on DataGroup, SkinnableDataContainer and all its Subclasses you will notice degradation in performance. Manipulating Data becomes slower, the UI on the Groups become less responsive, startup suffers, footprint is huge.  By default, Felx 4 creates an ItemRenderer for each data-item resulting in this ... http://www.hulstkamp.com/2009/06/15/working-with-huge-amount-of-data-in-flex-4-gumbo/382 Here are some notes I took while investigating and reading about Spark Containers. VerticalLayout.variableRowHeight and HorizontalLayout.variableColumnWidth properties are set to true by default. This might affect performance in a bad way, since Flex has to determine the size of each child. Setting theses properties to false in conjunction with rowHeight / ... http://www.hulstkamp.com/2009/06/14/random-notes-on-datagroup-in-flex-4-gumbo/371 Here's an example of how to enhance the default Spark CheckBox. This example uses a mark for the unchecked states and one for the checked states. Some simple transitions are used to make things a little bit nicer. The skin uses two additional properties (symbolColorChecked,  symbolColorUnchecked) for the color of the ... http://www.hulstkamp.com/2009/06/13/custom-spark-checkbox-component-in-flex-4-gumbo/361 Changing the look of a spark component mainly comes down to customizing the skin-class, but there are situations where this might not be enough. In a project I'm working on, we wanted to have a smooth transition when a text-input gets or loses focus. The default Spark TextInput and the associated ... http://www.hulstkamp.com/2009/06/01/customize-the-spark-textinput-component-in-flex-4-gumbo-adding-focus-and-transitions/344 Part of the FXG 1.0 specification in Flex 4 makes it possible to define elements inside a library. The elements can then be re-used in a FXG document: As of now there is no way to create these symols ... http://www.hulstkamp.com/2009/05/28/creating-fxg-library-elements-at-runtime-in-flex-4-gumbo/337 Here's a simple rating component done in Flex 4 (Gumbo). The skin uses two library definitions. One symbol for the active and one for the passive rating. The symbols are then placed in a passive and an active Group. A mask is used to show/hide the active group based on the ... http://www.hulstkamp.com/2009/03/12/skinning-and-creating-custom-rating-component-in-flex-4-gumbo/329