Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Here is my own version inspired by James' one. You can enable / disable tristate to get a classic checkbox with the same component, and the mechanism used is a bit different, with less boilerplate. Embedded picture is <a href="http://imgur.com/fMsjBOE" rel="nofollow">here</a>. Use at your own risks ! :)</p> <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt; &lt;s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" creationComplete="init()"&gt; &lt;fx:Script&gt; &lt;![CDATA[ import mx.events.FlexEvent; // STATES : /** The intermediate state value. */ public static const INTERMEDIATE:int = -1; /** The unchecked state value. */ public static const UNCHECKED:int = 0; /** The checked state value. */ public static const CHECKED:int = 1; // TRISTATE : private var _isTristate:Boolean; /** Whether this checkbox is tristate or a normal checkbox. */ [Bindable] public function get isTristate():Boolean { return _isTristate; } public function set isTristate(value:Boolean):void { _isTristate = value; if(!_isTristate &amp;&amp; state == INTERMEDIATE) state = UNCHECKED; } // LABEL : /** The checkbox label. */ [Bindable] public var label:String; // STATE CHANGE : private var _state:int; /** The current state of the box. */ public function get state():int { return _state; } public function set state(value:int):void { _state = value; switch(_state) { case INTERMEDIATE: if(!_isTristate) throw new Error("Setting state to INTERMEDIATE on a non tristate checkbox !"); tristateImg.visible = true; checkbox.selected = false; break; case UNCHECKED: tristateImg.visible = false; checkbox.selected = false; break; case CHECKED: tristateImg.visible = false; checkbox.selected = true; break; } } /** * Simply sets the state according to the current state. */ protected function changeState(ev:Event):void { if(isTristate) ev.preventDefault(); switch(state) { case INTERMEDIATE: state = CHECKED; break; case UNCHECKED: state = isTristate ? INTERMEDIATE : CHECKED; break; case CHECKED: state = UNCHECKED; break; } } /** * Initial state. */ protected function init():void { state = UNCHECKED; } ]]&gt; &lt;/fx:Script&gt; &lt;fx:Declarations&gt; &lt;!-- Place non-visual elements (e.g., services, value objects) here --&gt; &lt;/fx:Declarations&gt; &lt;s:layout&gt; &lt;s:BasicLayout /&gt; &lt;/s:layout&gt; &lt;s:CheckBox id="checkbox" label="{label}" change="changeState(event)"/&gt; &lt;s:Image id="tristateImg" mouseEnabled="false" mouseChildren="false" source="@Embed('assets/icons/tristate_checkbox.png')" x="2" y="5" /&gt; &lt;/s:Group&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload