[英]how to create a text stepper control in flex?
我在Flex 3中需要一個類似於NumericStepper的控件,但是它可以顯示任意字符串。 是否存在此控件? 如果沒有,您對創建它有什么建議,或者您會推薦哪些參考?
為了方便起見,我將其稱為TextStepper。 我希望這是一種緊湊的方式來顯示字符串選擇列表,用戶可以通過單擊上/下按鈕來循環選擇這些字符串。 緊湊表示控件沒有下拉或彈出窗口:更改所選索引的唯一方法是單擊上/下按鈕(這將更新文本輸入值)。 值循環意味着我真的想將基礎dataProvider視為循環緩沖區。 因此,上/下單擊以模數方式修改selectedIndex。
這個想法是使用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>
StringStepper的來源:
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();
}
}
}
我通過將TextInput
覆蓋在NumericStepper
(絕對位置)上來創建其中一個(作為MXML組件),以便TextInput
覆蓋NumericStepper
的輸入部分。
dataProvider是字符串的ArrayCollection
,並且使用NumericStepper
的值來訪問ArrayCollection中的索引。
NumericStepper
的change事件將TextInput
的文本更改為dataProvider的索引n處的內容。 我為組件提供了一個editable屬性,該屬性將TextInput
設置為editable,並將新字符串插入當前索引處的dataProvider中。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.