La Fabrick » component

UIGFX practice : a CircularSlider component

Fabien — Tue, 04 May 2010 21:18:39 +0000

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:



    
    
        [HostComponent("com.lafabrick.components.CircularSlider")]

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:




    
        [HostComponent("com.lafabrick.components.PieButton")]

Result

Let see:

Nice huh?

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

PS: Thanks to Hervé for review and corrections!Autres articles sur le même sujet

Librairie lafabrick : parce que je le vaut bien

Fabien — Thu, 06 Dec 2007 14:37:45 +0000

Le développement du simulateur Climatus demande une bonne dose d’architecture pour ne pas ce noyer dans les classes. Et quoi de mieux qu’un petit framework pour structurer tout ça ?!

J’ai donc démarré le développement d’une librairie de composants, avec un ensemble de classes pour la gestion de mes vues, que j’utilise directement dans le simulateur. 3 composants principaux pour l’instant, dérivés de TitleWindow :

DraggableWindow et ResizableWindow : un TitleWindow draggable et resizable (on s’en serait douté !), inspiré de plusieurs travaux sur des composants Flex glané sur le web. La notion de Skin à une place importante, et, je l’espère, moins limitative que certain exemple que l’on peux trouver… et d’autres petites « features » que je vous laisse découvrir !
ExpandedWindow est le concentré des 2 autres, avec une gestion d’évenements « minimize » et « maximize », à la manière de l’évenement « close » du TitleWindow.

Je vous propose de découvrir cette petite librairie, via le googleCode « lafabrick » (pour changer !)

UPDATE
Un petit exemple, avec les sources.

N’hésitez pas à me faire part de vos réactions, remarques et idées qui me permettront d’améliorer et d’étoffer cette librairie.Autres articles sur le même sujet

TileUI : un bureau « réaliste » en AS3

Erick — Tue, 07 Aug 2007 07:06:20 +0000

Inspiré du projet BumpTop, et dans le même genre que les travaux de Thomas Brault ( et surtout de ) , voici une présentation du projet TileUI.

Prenez un bol de Flex , ajoutez une goutte de physique , une pointe de 3D. Secouez pendant une douzaine de jours…

Plus d’infos ici
Démo : www.tileui.comAutres articles sur le même sujet

PixFormat, le prochain compagnon de votre backOffice !

Erick — Mon, 28 May 2007 11:38:57 +0000

:: PixFormat :: est un « mini » éditeur graphique en ligne, dont la particularité est d’être distribué sous la forme d’un composant Flex.

Il permet :

l’upload/download d’image,
le redimensionnement / cadrage
l’ajout de formes vectorielles
l’ajout de textes
la gestion de « calques »
contraste/ luminosité / teinte
….

Le tout fonctionnant grâce la lib GD de PHP.

Seul hic : il est vendu 29$…

29$ ou 29 jours de dév… à vous de choisir !!!

Autres articles sur le même sujet