论坛风格切换切换到宽版
  • 17238阅读
  • 0回复

Flashbuilder4 正式版 Spark ComboBox 组件 自动提示功能 [复制链接]

上一主题 下一主题
 

发帖
1077
只看楼主 倒序阅读 使用道具 楼主  发表于: 2010-04-02
— 本帖被 jinwyp 执行置顶操作(2010-06-18) —
官方的文档
英文 http://help.adobe.com/en_US/Flex/4.0/UsingSDK/WS70f0d54f063b9b081aac8d1d1247252e4a0-8000.html
中文 官方AS3.0 的文档 http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/components/ComboBox.html#eventSummary

演示
英文 http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/ComboBox.html?filter_flex=4&filter_flashplayer=10&filter_air=1.5


ComboBox 控件是基于 DropDownListBase 控件
与DropDownList  控件不同的是 ComboBox 有一个输入框

看一下ComboBox 简单的例子
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- dpcontrols\spark\SparkCBSimple.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <s:layout>
  7.         <s:VerticalLayout paddingTop="5" paddingLeft="5"/>
  8.     </s:layout>
  9.     <s:Label text="The selected index is: {myCB.selectedIndex}"/>
  10.     <s:Label text="The selected item is: {myCB.selectedItem}"/>
  11.     <s:ComboBox id="myCB" width="140">
  12.         <s:dataProvider>
  13.             <mx:ArrayList>
  14.                 <fx:String>Red</fx:String>
  15.                 <fx:String>Orange</fx:String>
  16.                 <fx:String>Yellow</fx:String>
  17.                 <fx:String>Blue</fx:String>
  18.                 <fx:String>Green</fx:String>
  19.             </mx:ArrayList>
  20.         </s:dataProvider>
  21.     </s:ComboBox>
  22. </s:Application>




属性介绍
1 myCB.selectedIndex 下拉框选项的坐标值, 例如下拉框中的第一个下拉框里面的值是0.  默认时(什么都不选时)是-1
2 myCB.selectedItem  下拉框选中的值.
3 ComboBox.CUSTOM_SELECTED_ITEM     在输入框中人工输入的值.  此时selectedIndex = -3
4 ComboBox.itemMatchingFunction 属性 默认输入框有自动匹配下拉框中值得功能。

通过设置监听器设置事件处理

  1. myCB.textInput.addEventListener('change', myChangeHandler);



设置labelToItemFunction 属性 达到把新输入的加到下拉框中去
默认 labelToItemFunction 属性 只能 把文本 数值 加入到下拉框中,如果需要把一个类加入需要自己改写labelToItemFunction

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- dpcontrols\spark\SparkCBAddItem.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <s:layout>
  7.         <s:VerticalLayout paddingTop="5" paddingLeft="5"/>
  8.     </s:layout>
  9.     <fx:Script>
  10.         <![CDATA[
  11.             import spark.events.IndexChangeEvent;
  12.             
  13.             // 通过change 事件把输入的数据加到下拉框中 一般通过回车或Tab 触发change 事件  Event handler to determine if the selected item is new.
  14.             protected function myCB_changeHandler(event:IndexChangeEvent):void
  15.             {
  16.                 // Determine if the index specifies a new data item.
  17.                 if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
  18.                     // 如果输入的数据不是下拉框里面的值,就加入到下拉框中 Add the new item to the data provider.
  19.                     myCB.dataProvider.addItem(myCB.selectedItem);
  20.             }
  21.         ]]>
  22.     </fx:Script>
  23.     
  24.     <s:Label text="The selected index is: {myCB.selectedIndex}"/>
  25.     <s:Label text="The selected item is: {myCB.selectedItem}"/>
  26.     <s:ComboBox id="myCB" width="140" change="myCB_changeHandler(event);">
  27.         <s:dataProvider>
  28.             <mx:ArrayList>
  29.                 <fx:String>Red</fx:String>
  30.                 <fx:String>Orange</fx:String>
  31.                 <fx:String>Yellow</fx:String>
  32.                 <fx:String>Blue</fx:String>
  33.                 <fx:String>Green</fx:String>
  34.             </mx:ArrayList>
  35.         </s:dataProvider>
  36.     </s:ComboBox>
  37. </s:Application>



上面的例子是加入一个文本或数值,当然combobox还可以加入一个类,即对于一个对象可以显示多个值,请看以下例子
对于一条数据需要显示  firstName lastName 通过 labelFunction  和自定义的myLabelFunc 函数实现

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!-- dpcontrols\spark\SparkCBAddItemObj.mxml -->
  3. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  4.     xmlns:s="library://ns.adobe.com/flex/spark"
  5.     xmlns:mx="library://ns.adobe.com/flex/mx">
  6.     <s:layout>
  7.         <s:VerticalLayout paddingTop="5" paddingLeft="5"/>
  8.     </s:layout>
  9.     <fx:Script>
  10.         <![CDATA[
  11.             import spark.events.IndexChangeEvent;
  12.             
  13.             // Define a custom function for the labelFunction property
  14.             // to display an Object in the ComboBox control.
  15.             public function myLabelFunc(item:Object):String {
  16.                 return item.firstName + " " + item.lastName;
  17.             }
  18.             
  19.             // Define a custom function for the labelToItemFunction property
  20.             // to convert the new value to an Object of the correct format
  21.             // for storage in the data provider of the control.
  22.             public function myLabelToItemFunc(value:String):Object {
  23.                 var tempObj:Object = new Object();
  24.                 var spaceChar:int = value.indexOf(' ');                
  25.                 tempObj.firstName = value.substr(0, spaceChar);
  26.                 tempObj.lastName = value.substr(spaceChar+1, value.length);
  27.                 return tempObj;
  28.             }            
  29.             
  30.             // Event handler to determine if the selected item is new.
  31.             protected function myCB_changeHandler(event:IndexChangeEvent):void
  32.             {
  33.                 // Determine if the index specifies a new data item.
  34.                 if(myCB.selectedIndex == spark.components.ComboBox.CUSTOM_SELECTED_ITEM)
  35.                     // Add the new item to the data provider.
  36.                     myCB.dataProvider.addItem(myCB.selectedItem);
  37.             }
  38.         ]]>
  39.     </fx:Script>
  40.     
  41.     <s:Label text="The selected index is: {myCB.selectedIndex}"/>
  42.     <s:Label text="The selected item is: {myCB.selectedItem.firstName + ' '
  43.              + myCB.selectedItem.lastName}"/>
  44.     <s:ComboBox id="myCB" width="140"
  45.         labelFunction="myLabelFunc"
  46.         labelToItemFunction="myLabelToItemFunc"
  47.         change="myCB_changeHandler(event);">
  48.         <s:dataProvider>
  49.             <mx:ArrayList>
  50.                 <fx:Object firstName="Steve" lastName="Smith"/>
  51.                 <fx:Object firstName="John" lastName="Jones"/>
  52.                 <fx:Object firstName="Mary" lastName="Moore"/>
  53.             </mx:ArrayList>
  54.         </s:dataProvider>
  55.     </s:ComboBox>
  56. </s:Application>





主要代码在myCB_changeHandler 这个时间函数里面  comboxbox 有一个change事件.

Combobox 代码本身就自带 输入时自动提示功能  
下面演示的代码 在 输入一个下拉框中没有的值    按回车或Tab键就会把该值加入到下拉框中 myCB.dataProvider.addItem(myCB.selectedItem);

Combobox 的几个已有功能属性
    itemMatchingFunction="null"   默认值为null 即开启自动完成功能
    labelToItemFunction="null"    默认值为null 既可以把string 或int 类型 的值加入到下拉列表中,例如上例的addItem  但如果想把object 加入到下拉列表中,就要自己写labelToItemFunction
    maxChars="0"        输入框里的最大字符,0为不限制.
    openOnInput="true"     输入字符时,下拉框自动打开.
    restrict=""   限制输入的字符.  例如"1234567890" 为只可以输入数字


范例中表示如何自定义显示下拉框的值和在下拉框值中插入object

范例中 myLabelFunc(item:Object):String  函数演示了自定义的用于显示下拉框列表的功能.  下拉框显示了2个值firstName and lastName.
return item.firstName + " " + item.lastName;

myLabelToItemFunc(value:String):Object   函数演示了自定义的把用户输入文字添加到下拉框列表里Object的功能. 此次是把一个Object 添加到下拉框列表里.


Spark ComboBox 默认的键盘交互


当下拉框合上时的热键

Editing prompt area
Opens the drop-down list. The drop-down list it scrolls to and highlights the closest match in the item list.

Enter
Commit the highlighted data item, if one is highlighted. If no data item is highlighted, commit the value of the prompt area.

Up Arrow
Moves selection up one item.

Down Arrow
Moves selection down one item.

Control + Down Arrow
Opens the drop-down list.

Page Up
Moves the selection up one page. If the selectedIndex is currently -1, do nothing.

Page Down
Moves the selection down one page. If you are at the end of the list, do nothing.

Home
Moves selection to the top of the drop-down list.

End
Moves selection to the bottom of the drop-down list.


当下拉框展开时的热键

Editing prompt area
Scrolls to and highlights the closest match in the item list.

Enter
Close the drop-down list. Commit the highlighted data item, if one is highlighted. If no data item is highlighted, commit the value of the prompt area.

Up Arrow
Moves selection up one item but does not commit the selection until the drop-down list closes.

Down Arrow
Moves selection down one item but does not commit the selection until the drop-down list closes.

Control + Up Arrow
Closes the drop-down list and commits the selection.

Escape
Closes the drop-down list but do not commit the selection.

Page Up
Moves the selection to the top of the data items currently displayed but does not commit the selection until the drop-down list closes.

Page Down
Moves the selection to the bottom of the data items currently displayed but does not commit the selection until the drop-down list closes.

Home
If selectedIndex = -1, do not change the currently selected data item. Otherwise, moves selection to the first data item in the drop-down list. Does not commit the selection until the drop-down list closes.

End
Moves selection to the last data item in the drop-down list. Does not commit the selection until the drop-down list closes.

当下拉框合上时的鼠标功能
Click in the prompt area
Puts focus in the prompt area. If it was not previously in focus, then all of text in the prompt area is selected.

Click in open button
Opens the drop-down list, removes the focus ring from the ComboBox control, removes focus from the prompt area, and highlights the closest match to the input string.

当下拉框展开时的鼠标功能
Click in the prompt area
Puts focus in the prompt area. If it was not previously in focus, then all of text in the prompt area is selected.

Click in open button
Closes the drop-down list and commit the selection. Removes focus from the ComboBox and control and from the prompt area.
快速回复
限100 字节
如果您在写长篇帖子又不马上发表,建议存为草稿
 
上一个 下一个