Andy Hulstkamp

about creating online experiences

08. October 2010

Creating a custom Spark GraphicElement

Mobile Flex Apps are around the corner. Hence it might be a good thing to inspect some of the more light-weighted approaches of Flex to create visual elements and components that can take part in the Spark layout process. In this last example I had a look at SpriteVisualElement.

Now, it’s time for the GraphicElement.

Custom Graphic Element

Example using custom Graphic Elements. View source is enabled.

read more

06. October 2010

Flex Tab Key Navigation for custom Spark PopUp

This took me a while to figure out.

In a project I created a custom PopUp, nothing fancy, just a couple of text inputs. When I tried to enable Tab key navigation I set the required properties but Flex would simply ignore tab key navigation to the input fields in the pop up.

The Documentation about the IFocusManager states that a pop up will get its own FocusManager and its own tab loop.

After some tracing I found that my pop up and its child weren’t included in the FocusManager as focus objects. In fact, there was no FocusManager for my pop up at all.

read more

29. September 2010

Custom Component using Flex SpriteVisualElement

In Flex 4 the standard way to create a custom control is to extend from SkinnableComponent, then implement the handling and management of events and states there and use a separate skin class for the visual representation of the component.

A class that gets less attention, but might be useful in a couple of scenarios to create a control alternatively, is the SpriteVisualElement class.

This example shows an implementation of a simple ruler by extending the SpriteVisualElement.

Flex Ruler Components

read more

30. May 2010

Flex custom Tooltips and Balloon Help

Tooltips are a good way to provide a user with additional information for controls and Flex offers Tooltips out of the box. The default Tooltips are fine but when text gets longer than just a few words usability may suffer.

For a current project, I needed more like a balloon help in place of tooltips and therefore decided not to use Flex default tooltips.

Flex Tooltips and Balloon Help

read more

29. April 2010

Getting Vector Graphics into Spark Skins

Getting Vector Graphics into Spark Skins

It was great 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 was that the Spark Button does not have an icon property compared to the Halo counterpart.

Out of the box there are basically three ways to get graphics into a Spark skin.

read more

10. April 2010

Flex 4 - change baseColor to chromeColor and useChromeColor=true

While updating the Gumbo-Components on this blog to flex 4 final I noticed that the style-property baseColor has been changed to chromeColor.

In addition to this the flag useChromeColor can be set to tell the SparkSkin to use chromeColor for colorization. For custom skins this can be set by overriding initializationComplete() in the skin.

read more

20. July 2009

Advanced FXG Spark Icon Buttons with one generic skin in Flex4 (Gumbo)

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 introduce another graphic. Not exactly generic. There are other ways to bring graphics into Spark Skins but none of them work with FXG Elements directly.

Advanced Flex Spark Buttons

read more