Posts Tagged ‘styling

27
Mar
09

Easy tweaking of Flex component skins

We run a dark grey theme for our Print application. This has required quite a lot of tweaking to get it right and despite using the css way of configuring and skinning all components, Adobe did not have dark palettes in mind when they designed the Halo theme.

printuiexample

E.g.: to get the selected and rollover color right for lists, we had to extend and hack the Activator class because default color handling mixes the theme color with white to get the different shades needed. Which look quite odd in a dark theme. Continue reading ‘Easy tweaking of Flex component skins’

28
Oct
08

Trackless Slider component

The Slider component is fairly easy to style. But as with many of the flex components, I seem to quickly reach the point where I can’t get it to look exactly as I want it to. Rumours say that this will be rectified in version four, but in the meantime there are workarounds and hacks.

I wanted a Slider component with a background of bars growing in height – like a volume slider. Attaching a png with the bars was easy (yes, I know – it can be scaled. But for this project, scaling was not necessary and I couldn’t justify spending hours on gold-plating it). Removing the tracks wasn’t that easy as it can’t be done through a simple style property.

The solution is a custom skin. But as the Slider component uses the track to calculate some of its properties, and places other graphics according to track size and position, it needs to be measurable. I just drew an invisible rectangle. Overriding the methods that calculate width and height will probably be more efficient, but shouldn’t matter, unless you have dozens on screen simultaneously.

Here’s the skin class – use mySlider.setStyle(“trackSkin”, SliderTrackSkinInvisible) to set it.

package no.papirfly.msp.skins
{
    import flash.display.Graphics;

    import mx.core.IFlexDisplayObject;
    import mx.skins.halo.SliderTrackSkin;

    public class SliderTrackSkinInvisible extends SliderTrackSkin implements IFlexDisplayObject
    {

        public function SliderTrackSkinInvisible()
        {
            super();
        }    

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);

            this.graphics.clear();
            var gr:Graphics = this.graphics;
            gr.beginFill(0x00FF00, 0);
            gr.drawRect(0,0, unscaledWidth, height);
            gr.endFill();
        }
    }
}