Flex4 Spark 简单组件示例

来源：互联网发布：java 静态代码块编辑：程序博客网时间：2024/06/06 07:00

示例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，其具有选中或者选不中的动作。

0 0