Flex4 Spark 简单组件示例

示例MXML如下，简单解释则直接写在注释中。

<?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"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="100%" height="100%">
<fx:Script><![CDATA[
  [Bindable]
  private var _textForBindable:String = "";//变量绑定
  
  [Bindable]
  private var _testNum:Number = Number.NaN;//变量绑定，初始化为NaN
]]></fx:Script>
<!--RadioButtonGroup 不是可视化对象，放在 fx:Declarations 标签中-->
<fx:Declarations>
  <s:RadioButtonGroup id="ABC"/>
  <s:RadioButtonGroup id="DE"
    selectedValue="{_textForBindable.length % 2 == 0 ? 'D' : 'E'}"/>
</fx:Declarations>
  <s:Panel width="100%" height="100%" title="Spark简单组件示例">
    <s:layout>
      <s:HorizontalLayout paddingLeft="5" paddingTop="5"/>
    </s:layout>
    <s:VGroup>
	  <!--TextArea TextInput 使用绑定变量-->
      <s:TextArea id="textArea" width="200" height="50"
        text="@{_textForBindable}"/>
      <s:TextInput id="textInput" width="200" text="@{_textForBindable}"/>
	  <!--HSlider（水平滑块）控件 ，此处也进行了数据绑定，VSlider同。-->
      <s:HSlider id="hSlider" minimum="0" maximum="11"
        liveDragging="true" width="200" value="@{_testNum}"/>
      <s:VSlider id="vSlider" minimum="0" maximum="11"
        liveDragging="true" height="50" value="{_testNum}"/>
	  <!--
		Button：
		1、数据绑定字符串。
		2、Math是核心类无需导入。
		3、颜色属性根据后面的ToggleButton而变化。
		4、单击事件修改绑定变量的值。
	  -->
      <s:Button label="{_textForBindable}" width="200"
        color="{tB.selected ? 0xFF0000 : 0}"
        click="_testNum = Math.min(_textForBindable.length,11)"/>
      <s:CheckBox id="checkBox" selected="{_testNum % 2 == 0}"
        label="TestCB"/>
    </s:VGroup>
    <s:VGroup>
      <s:RadioButton label="A" value="A"
        group="{ABC}"/>
      <s:RadioButton label="B" value="B"
        group="{ABC}"/>
      <s:RadioButton label="C" value="C"
        group="{ABC}"/>
      <s:RadioButton label="D" value="D"
        group="{DE}"/>
      <s:RadioButton label="E" value="E"
        group="{DE}"/>
	  <!-- 
		ToggleButton 组件定义切换按钮。单击该按钮会在弹起状态和按下状态之间进行切换。如果在按钮处于弹起状态时单击该按钮，则它会切换到按下状态。必须再次单击该按钮才可将其切换回弹起状态。
	  -->
      <s:ToggleButton id="tB" label="TestButton!"/>
	  <!--
		NumericStepper 控件允许从有序集中选择编号。NumericStepper 提供与 Spinner 组件相同的功能，但增加了一个 TextInput 控件，这样可以直接编辑组件的值，而无需使用控件的箭头按钮来对其进行修改。
		下面两个控件也进行了双向数据绑定。
		-->
      <s:NumericStepper id="numericStepper" value="{_testNum}"
        minimum="0" maximum="11" stepSize="1"/>
      <s:Spinner id="spinner" value="{_testNum}"
        minimum="0" maximum="11" stepSize="1"/>
    </s:VGroup>
  </s:Panel>
</s:Application>

1、实例中组件基本都继承自SkinnableComponent 。SkinnableComponent 类定义可设置外观的组件的基类。SkinnableComponent 类所使用的外观通常是 Skin 类的子类。

2、ToggleButton/CheckBox/RadioButton都扩展自ToggleButtonBase，其具有选中或者选不中的动作。