Apache flex 如何在flex中创建文本步进控件?
我需要Flex3中的控件,它类似于NumericStepper,但可以显示任意字符串。该控件是否存在?如果没有,您对创建它有什么建议,或者您会推荐哪些参考资料Apache flex 如何在flex中创建文本步进控件?,apache-flex,text,custom-controls,numericstepper,Apache Flex,Text,Custom Controls,Numericstepper,我需要Flex3中的控件,它类似于NumericStepper,但可以显示任意字符串。该控件是否存在?如果没有,您对创建它有什么建议,或者您会推荐哪些参考资料 为了方便起见,我称之为文本步进器。我希望这是一种紧凑的方式来显示字符串选择列表,用户可以通过单击向上/向下按钮来循环。紧凑意味着控件没有下拉或弹出方面:更改选定索引的唯一方法是单击向上/向下按钮(更新文本输入值)。值循环意味着我真的希望将底层数据提供程序视为循环缓冲区。因此,向上/向下以模方式单击ModifyselectedIndex。我
为了方便起见,我称之为文本步进器。我希望这是一种紧凑的方式来显示字符串选择列表,用户可以通过单击向上/向下按钮来循环。紧凑意味着控件没有下拉或弹出方面:更改选定索引的唯一方法是单击向上/向下按钮(更新文本输入值)。值循环意味着我真的希望将底层数据提供程序视为循环缓冲区。因此,向上/向下以模方式单击ModifyselectedIndex。我们的想法是使用
valueFormatFunction
:
<?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" minWidth="955" minHeight="600" xmlns:local="*">
<local:StringStepper horizontalCenter="0" verticalCenter="0" width="200">
<local:dataProvider>
<s:ArrayCollection>
<fx:String>Hello!</fx:String>
<fx:String>I love you.</fx:String>
<fx:String>Won't you tell me your name?</fx:String>
</s:ArrayCollection>
</local:dataProvider>
</local:StringStepper>
</s:Application>
我通过将TextInput
覆盖在NumericStepper
(绝对定位)上创建了其中一个组件(作为MXML组件),以便TextInput
覆盖NumericStepper
的输入部分
数据提供程序是字符串的ArrayCollection
,而NumericStepper
的值用于访问ArrayCollection中的索引
NumericStepper
的更改事件将TextInput
的文本更改为数据提供程序索引n处的任何内容。我为组件提供了一个可编辑属性,该属性将TextInput
设置为可编辑,并将新字符串插入当前索引处的数据提供程序中 马克西姆,这对Flex 3有什么变化?对于Flex 3,Robusto的评论中描述了最简单的方法。Flex3中的NumericStepper在我看来是不可自定义的。
package
{
import mx.collections.ArrayCollection;
import mx.events.CollectionEvent;
import spark.components.NumericStepper;
public class StringStepper extends NumericStepper
{
public function StringStepper()
{
enabled = false;
valueFormatFunction = defaultValueFormatFunction;
valueParseFunction = defaultValueParseFunction;
}
private var _dataProvider:ArrayCollection;
public function get dataProvider():ArrayCollection
{
return _dataProvider;
}
public function set dataProvider(value:ArrayCollection):void
{
if (_dataProvider == value)
return;
if (_dataProvider)
_dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE,
dataProvider_collectionChangeHandler);
_dataProvider = value;
commitDataProvider();
if (_dataProvider)
_dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE,
dataProvider_collectionChangeHandler);
}
/**
* Same event as for <code>value</code>.
*/
[Bindable("valueCommit")]
public function get selectedItem():Object
{
return _dataProvider && value <= _dataProvider.length - 1 ? _dataProvider[value] : null;
}
public function set selectedItem(value:Object):void
{
if (!_dataProvider)
return;
value = _dataProvider.getItemIndex(value);
}
private function defaultValueFormatFunction(value:Number):String
{
return _dataProvider && value <= _dataProvider.length - 1 ? _dataProvider[value] : String(value);
}
private function defaultValueParseFunction(value:String):Number
{
if (!_dataProvider)
return 0;
var n:int = _dataProvider.length;
for (var i:int = 0; i < n; i++)
{
var string:String = _dataProvider[i];
if (string == value)
return i;
}
return 0;
}
private function commitDataProvider():void
{
if (!_dataProvider)
{
minimum = 0;
maximum = 0;
enabled = false;
return;
}
enabled = true;
minimum = 0;
maximum = _dataProvider.length - 1;
}
private function dataProvider_collectionChangeHandler(event:CollectionEvent):void
{
commitDataProvider();
}
}
}