Flex组件

日期选取组件用于显示日历和进行某天的选择，使用的是AS中的Date类。
创建DateChooser组件
下面的例子创建了一个日历组件，并且选中日期为2004年12月22号：

1:  <mx:DateChooser id=’date1’ >
2: <mx:selectedDate>
3: <mx:Date month=’12’ date=’12’ year=’2004’ />
4: </mx:selectedDate>
5: </mx:DateChooser>

我们还可以通过脚本的方式来设置选中日期

1: <mx:Script>
2: <![CDATA[
3: function initDC()
4: {
5: date1.selectedDate= new Date (2004, 12, 12);
6: }
7: ]]>
8: </mx:Script>
9: <mx:DateChooser id=’date1’ initialize=’initDC();’ />

DateChooser组件使用了AS的Date类的一些方法
可以使用get和set方法来获取选中的日期值以及设置日期值。下面的例子比较详细的描述了DateChooser组件的使用。

1:  <mx:Script>
2: <![CDATA[
3: function useDate(eventObj)
4: {
5: //Access the Date object from the event object.
6: day.text=eventObj.target.selectedDate.getDay();
7: date.text=eventObj.target.selectedDate.getDate();
8: month.text=eventObj.target.selectedDate.getMonth();
9: year.text=eventObj.target.selectedDate.getFullYear();
10: wholeDate.text=eventObj.target.selectedDate.getFullYear() +
11: ’/’ + (eventObj.target.selectedDate.getMonth()+1) +
12: ’/’ + eventObj.target.selectedDate.getDate();
13: }
14: ]]>
15: </mx:Script>
16: <mx:DateChooser id=’date1’ change=’useDate(event)’ />
17: <mx:Form>
18: <mx:FormItem label=’Day’ >
19: <mx:TextInput id=’day’ width=’100’ />
20: </mx:FormItem >
21: <mx:FormItem label=’Day of month’ >
22: <mx:TextInput id=’date’ width=’100’ />
23: </mx:FormItem >
24: <mx:FormItem label=’Month’ >
25: <mx:TextInput id=’month’ width=’100’ />
26: </mx:FormItem >
27: <mx:FormItem label=’Year’ >
28: <mx:TextInput id=’year’ width=’100’ />
29: </mx:FormItem >
30: <mx:FormItem label=’Date’ >
31: <mx:TextInput id=’wholeDate’ width=’300’ />
32: </mx:FormItem >
33: </mx:Form>

这个例子通过响应组件的change事件来获取选中的日期信息，相信大家也不难看懂。

禁用某个日期段的选取
假如要禁用周一到周四的日期选择，可以使用

1: <mx:DateChooser id=’date1’ >
2: <mx:disabledDays>
3: <mx:Array>
4: <mx:String>1</mx:String>
5: <mx:String>2</mx:String>
6: <mx:String>3</mx:String>
7: <mx:String>4</mx:String>
8: </mx:Array>
9: </mx:disabledDays>
10: </mx:DateChooser>

更简单的写法为：

1: <mx:DateChooser id=’date1’ disabledDays=’[1,2,3,4]’ />

或者

1: <?php <mx:Script>
2: <![CDATA[
3: function initDC()
4: {
5: date1.disabledDays=[1,2,3,4];
6: }
7: ]]>
8: </mx:Script>
9: <mx:DateChooser id=’date1’ initialize=’initDC();’ />

个人觉得第三种方法比较通用，可以对日历进行初始化的设置。
注意：正确的说法应该是禁用第2～5列的日期。

更改星期名称
默认的日历星期名显示为英文，如果要更改成中文名称，可以用：

1: <mx:DateChooser id=’date1’ change=’useDate(event);’ >
2: <mx:dayNames>
3: <mx:Array>
4: <mx:String>日</mx:String>
5: <mx:String>一</mx:String>
6: <mx:String>二</mx:String>
7: <mx:String>三</mx:String>
8: <mx:String>四</mx:String>
9: <mx:String>五</mx:String>
10: <mx:String>六</mx:String>
11: </mx:Array>
12: </mx:dayNames>
13: </mx:DateChooser>

请注意，如果没有其它设置，数组的第一个元素就表示一周的第一天。当然，最简洁的还是AS的实现方法，而且更加灵活。

1:  //设置星期显示名称
2: date1.dayNames=[’日’, ’一’, ’二’, ’三’, ’四’, ’五’, ’六’];
3: //把周一作为每周的第一天
4: date1.myDC.firstDayOfWeek = 1;
5: //设置日历头部样式为绿色
6: date1.setStyle(’headerColor’, 0x00ff00);
7: //设置字体样式为斜体
8: date1.setStyle(’fontStyle’, ’italic’);
9: //设置日历的选择范围2004.1.1～2004.12.23
10: date1.selectableRange =
11: { rangeStart: new Date(2004,1,1), rangeEnd: new Date(2004,12,23) };

DateChooser组件的常用属性和事件还有

01 :
02 : dayNames //星期的名称显示
03 : disabledDays //不可用的星期
04 : disabledRanges //不可用的日期范围
05 : displayedMonth //当前显示的月份
06 : displayedYear //当前显示的年份
07 : firstDayOfWeek //每周的第一天( 0～6 0表示dayNames中的第一个元素，依次类推 )
08 : headerStyle. //头部样式
09 : todayStyle. //今天的样式
10 : weekDayStyle. //周末的样式
11 : monthNames //月份的名称显示
12 : selectableRange //可以选择的日期范围 由rangeStart 和 rangeEnd 指定
13 : selectedDate //选中的日期
14 : showToday //是否高亮显示今天的日期
15 :
16 : change //选中日期的事件响应
17 : scroll //移动的事件响应

通过对这些属性的设置你可以定义更强大的日历组件了。

HSlider和VSlider

Flex提供了水平和垂直两种滑动杆。
基本使用方法：

01: mx:HSlider 创建水平滑动杆
02: mx:VSlider 创建垂直滑动杆
03: 设置滑动范围：minimum和 maximum属性
04: 设置滑杆的初始值：value属性
05: 设置最小滑动间隔为可以设置snapInterval属性（如snapInterval='2'）
06: 创建滑杆的标签可以用labels数组（Flex会均分显示标签位置）
07: 默认创建的滑动杆都有ToolTip，需要禁止可使用：showToolTip='false'
08: 如果需要每隔一段距离显示标记，可以设置tickInterval属性（如tickInterval='25'）
09: 可以同时使用两个箭头标记：thumbCount（1或2，默认值为1）
10: 使用双箭头的时候设置初始值需要用values数组（如values='[ 20 , 80 ]'）
11: 可以利用键盘的左右（或上下）方向键来移动滑杆
12: HOME键和END键（或PageDown和PageUp键）分别定位到最小值和最大值

滑杆的change事件

1: <mx:Script>
2: <![CDATA[
3: function sliderChange(event:Object)
4: {
5: thumb.text=event.target.value;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider change=’sliderChange(event)’ />
11: <mx:TextArea id=’thumb’ />
12: </mx:Panel>

默认，只有当释放滑杆的时候，change事件才会响应，所以上面的例子TextArea框中的值只有释放滑杆的时候才会变化。如果设置liveDragging属性为True的话，就可以做到拖动滑杆的时候就可以响应change事件了。

1: <mx:Script>
2: <![CDATA[
3: function sliderChangeLive(event:Object)
4: {
5: thumbLive.text=event.target.value;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider liveDragging=’true’ change=’sliderChangeLive(event)’ />
11: <mx:TextArea id=’thumbLive’ />
12: </mx:Panel>

使用2个滑杆
下面的例子很好的演示了如何两个滑杆，请注意thumbIndex属性的用法

1: <mx:Application xmlns:mx=’http://www.macromedia.com/2003/mxml’ >
2: <mx:Script>
3: <![CDATA[
4: function sliderChangeTwo(event:Object)
5: {
6: thumbTwoA.text=event.target.values[0];
7: thumbTwoB.text=event.target.values[1];
8: thumbIndex.text=event.thumbIndex;
9: }
10: ]]>
11: </mx:Script>
12: <mx:Panel>
13: <mx:HSlider thumbCount=’2’ change=’sliderChangeTwo(event)’ />
14: <mx:TextInput id=’thumbTwoA’ />
15: <mx:TextInput id=’thumbTwoB’ />
16: <mx:TextInput id=’thumbIndex’ />
17: </mx:Panel>
18: </mx:Application>

定制ToolTip
默认的提示框会显示当前的值，我们可以自定义自己的提示信息，看下面的例子。

1: <mx:Script>
2: <![CDATA[
3: function myToolTipFunc(val:String):String
4: {
5: return ’Current value: ’ + val;
6: }
7: ]]>
8: </mx:Script>
9: <mx:Panel>
10: <mx:HSlider toolTipFormatFunction=’myToolTipFunc’ />
11: </mx:Panel>