Our Blog

One of the components that is very common in a mobile app is the Switcher component. The on/off switch is usually available on IOS and Android devices. This component is like a toggle button but with a skin that makes it look as a Switcher.

Switcher

Application

This is just a simple test and we have all the styles hardcoded on it.

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

   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      s|ToggleButton
      {
         skin-class: ClassReference("skins.SwitcherSkin");
         background: Embed(source='/images/switcher_bg.png');
         thumb: Embed(source='/images/switcher_thumb.png');
      }
   </fx:Style>
   <s:ToggleButton x="50" y="50" width="94" height="27"/>
</s:Application>

I have a special skin, SwitcherSkin, for the toggle button that transforms the normal toggle to a switcher.

Skin

We are extending from MobileSkin to make our skin lightweight for a mobile project. And we only have 2 elements on it: the background that has the on/off background and the thumb that moves to cover the on/off labels.

package skins
{
   import caurina.transitions.Tweener;
   import flash.display.DisplayObject;
   import spark.skins.mobile.supportClasses.MobileSkin;
   public class SwitcherSkin extends MobileSkin
   {
      protected var background:DisplayObject;
      protected var thumb:DisplayObject;
      override protected function commitCurrentState():void
      {
         super.commitCurrentState();
         invalidateDisplayList();
      }
      override protected function createChildren():void
      {
         background = addElement( "background" );
         thumb = addElement( "thumb" );
      }
      protected function addElement( style:String ):DisplayObject
      {
         var elementAsset:Class = getStyle( style );
         var element:DisplayObject;
         if( elementAsset )
         {
            element = new elementAsset();
            addChild( element );
         }
         return element;
      }
      override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
      {
         if( currentState == "up" )
         {
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:0 } );
         }
         if( currentState == "upAndSelected" )
         {
            Tweener.removeTweens( thumb );
            Tweener.addTween( thumb, { time:0.4, x:unscaledWidth - thumb.width } );
         }
      }
   }
}

To make it more interesting, I added a little tween using the Tweener library . I hope you like it. You can improve on it making the labels dynamic and the dimensions too.

The source is available for download.

Nahuel Foronda

Nahuel Foronda

10 Comments

  1. Raymond Camden
    It would be kind of cool if there was a site where these skins could be shared. From you and others I mean.
  2. Florian

    Florian

    I'm curious to know why you chose to use a custom tween engine instead of the one provided with Flex?
  3. Nahuel Foronda
    @Camden, that's good idea, now we need to see who wants to volunteer to such task :)

    @Florian, I used it because of my old habits. In Flex 3x the default Flex engine was not good. I think that now Flex 4 do fine. You can use that if you prefer.
  4. James Harvey
    @Nahuel,
    I agree with my comrade Ray, and I would gladly volunteer to contribute to such a task, as well as (if neccessary) assist and manage.
  5. Arnaud Thorel

    Arnaud Thorel

    Flex developpers need to find great component look to promote Flex Applications.


    I see in Conqu a DateTime Picker, can you explain how do you this one ?

    Thx
    Arnaud
  6. Nahuel Foronda
    Arnaud, The Date Picker it is not that simple and I monkey patched the framework to use the Scroller the way that I want. I think that Adobe is working on its own version so maybe you should wait for them.
  7. Arnaud Thorel

    Arnaud Thorel

    Thx Nahuel,

    I tried to do it by myself using list and layout (like a vertical carrousel). I also have some trouble with the Scroller, but i succeed to get the selectedIndex at the center of the picker. Skin was more easier to do (gradient on the top and on the bottom).

    Monkey Patch is a way of life. When the Flex SDK 4.0 I had to develop a messenger application in AIR using Gesture (looks like conqu - great job). But I patched list states to remove hovered state and add deleted state.
  8. This site
    I think this is one of the most significant information for me. And i’m glad reading your article.

So, what do you think ?

Subscribe to this comment thread
Leave this field empty