If you were luck enough to use a multitouch application, did you ever have the idea that it would be interesting to use some circular interface components?
As interface space management is easier to achieve on large multitouch tables, I had the idea to develop a CircularSlider component, using my primitive UIGFX library, including the Pie primitive.
Let see how it works…

The component

PieButton

I needed a button with 2 properties startAngle and angle, to be able to transmit these values to the skin:

package com.lafabrick.components
{
    import spark.components.Button;

    public class PieButton extends Button
    {
        public function PieButton()
        {
            super();
        }

        private var _angle : Number;
        private var _startAngle : Number;

        public function get angle():Number
        {
            return _angle;
        }
        [Bindable]public function set angle(value:Number):void
        {
            _angle = value;
            invalidateDisplayList();
        }

        public function get startAngle():Number
        {
            return _startAngle;
        }
        [Bindable]public function set startAngle(value:Number):void
        {
            _startAngle = value;
            invalidateDisplayList();
        }

    }
}

CircularSlider

This component could not extend directly SliderBase or TrackBase because the SkinPart thumb and track, as Button, are extending the TrackBase class.
I thus used the Range class, inserted the Slider architecture, and added specific geometric codes.
Check the component’s source code

Skin implementation

The design of the Skin is similar to a skin Slider standard, except that it uses a PieButton instead of a Button:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx"
        width="100%" height="100%"
        xmlns:components="com.lafabrick.components.*"
        >
    <!-- host component -->
    <fx:Metadata>
        [HostComponent("com.lafabrick.components.CircularSlider")]
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="normal" />
        <s:State name="disabled" />
        <s:State name="inactive" />
    </s:states>

    <!-- SkinParts
    name=track, type=com.lafabrick.uigfx.components.CircularButton
    name=thumb, type=com.lafabrick.uigfx.components.CircularButton
    -->

    <components:PieButton
        id="track"
        width="100%" height="100%"
        top="0" bottom="0" left="0" right="0"
        skinClass="skins.CircularTrackButtonSkin"/>

    <components:PieButton
        id="thumb"
        angle="20"
        width="100%" height="100%"
        top="0" bottom="0" left="0" right="0"
        skinClass="skins.CircularThumbButtonSkin"/>

</s:SparkSkin>

Under « thumb » and « track » Skin, the angular values are a mapped with the PieButton HostComponent. StartAngle and angle properties of the Pie primitive are directly extended from the host component.
Here follows a sample with Track Skin:

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009"
             xmlns:s="library://ns.adobe.com/flex/spark" 

             minWidth="21" minHeight="21"
             alpha.disabled="0.5"
             xmlns:uigfx="http://uigfx.lafabrick.com"
             xmlns:primitives="com.lafabrick.uigfx.primitives.*">

    <fx:Metadata>
        [HostComponent("com.lafabrick.components.PieButton")]
    </fx:Metadata>

    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <primitives:Pie
        top="0" bottom="0" left="0" right="0"
        gap="2"
        innerOffset="-2"
        offset="-2"

        innerRadius="0.7"
        angle="{hostComponent.angle}"
        startAngle="{hostComponent.startAngle}"
        >

        <primitives:fill>
            <s:RadialGradient>
                <s:GradientEntry color="#006699" />
                <s:GradientEntry color="#009EE0" />
            </s:RadialGradient>
        </primitives:fill>

        <primitives:filters>
            <s:GlowFilter inner="true" color="#000000"
                blurX="10" blurY="10" alpha="0.4" />
        </primitives:filters>

    </primitives:Pie>

</s:SparkSkin>

Result

Let see:

Nice huh?

You can check these for more info: Link, and source code.

PS: Thanks to Hervé for review and corrections!

---

Par Fabien, Mardi 4 mai 2010 à 23:18
Nos projets, [Dev] Flash / Flex / AIR...

Tags: component, FlashBuilder, Flex, flex4, Spark, uigfx

---