效果截图:
主要源码:
<?xml version="1.0" encoding="utf-8"?> <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:comp="comp.*" width="100%" height="100%"> <s:layout> <s:VerticalLayout paddingLeft="20" paddingTop="20"/> </s:layout> <fx:Script> <![CDATA[ ]]> </fx:Script> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations> <mx:ToggleButtonBar dataProvider="viewstack"/> <mx:ViewStack id="viewstack" width="100%" selectedIndex="2"> <s:NavigatorContent width="100%" height="100%" label="At frequency of..."> <s:HGroup paddingBottom="20" paddingLeft="20" paddingTop="20" verticalAlign="middle"> <s:Label text="Every"/> <s:DropDownList selectedIndex="0"> <s:dataProvider> <s:ArrayCollection> <fx:String>30 minutes</fx:String> <fx:String>1 hour</fx:String> <fx:String>2 hours</fx:String> <fx:String>3 hours</fx:String> <fx:String>4 hours</fx:String> <fx:String>6 hours</fx:String> <fx:String>8 hours</fx:String> <fx:String>12 hours</fx:String> <fx:String>24 hours</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Spacer width="10" height="10"/> <s:Label text="Start at"/> <s:DropDownList width="80" selectedIndex="0"> <s:dataProvider> <s:ArrayCollection> <fx:String>0</fx:String> <fx:String>5</fx:String> <fx:String>10</fx:String> <fx:String>15</fx:String> <fx:String>20</fx:String> <fx:String>25</fx:String> <fx:String>30</fx:String> <fx:String>35</fx:String> <fx:String>40</fx:String> <fx:String>45</fx:String> <fx:String>50</fx:String> <fx:String>55</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Label text="minutes after the hour"/> </s:HGroup> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="Every day at..."> <s:HGroup paddingBottom="20" paddingLeft="20" paddingTop="20" verticalAlign="middle"> <s:Label text="Run at *"/> <s:DropDownList> <s:dataProvider> <s:ArrayCollection> <fx:String>1 AM</fx:String> <fx:String>2 AM</fx:String> <fx:String>3 AM</fx:String> <fx:String>4 AM</fx:String> <fx:String>5 AM</fx:String> <fx:String>6 AM</fx:String> <fx:String>7 AM</fx:String> <fx:String>8 AM</fx:String> <fx:String>9 AM</fx:String> <fx:String>10 AM</fx:String> <fx:String>11 AM</fx:String> <fx:String>12 AM</fx:String> <fx:String>1 PM</fx:String> <fx:String>2 PM</fx:String> <fx:String>3 PM</fx:String> <fx:String>4 PM</fx:String> <fx:String>5 PM</fx:String> <fx:String>6 PM</fx:String> <fx:String>7 PM</fx:String> <fx:String>8 PM</fx:String> <fx:String>9 PM</fx:String> <fx:String>10 PM</fx:String> <fx:String>11 PM</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Spacer width="10"/> <s:DropDownList width="80" selectedIndex="0"> <s:dataProvider> <s:ArrayCollection> <fx:String>0</fx:String> <fx:String>5</fx:String> <fx:String>10</fx:String> <fx:String>15</fx:String> <fx:String>20</fx:String> <fx:String>25</fx:String> <fx:String>30</fx:String> <fx:String>35</fx:String> <fx:String>40</fx:String> <fx:String>45</fx:String> <fx:String>50</fx:String> <fx:String>55</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Label text="minutes after the hour"/> </s:HGroup> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="On selected days..."> <s:HGroup paddingBottom="20" paddingLeft="20" paddingTop="20" verticalAlign="middle"> <s:Label text="Run at"/> <s:DropDownList selectedIndex="0"> <s:dataProvider> <s:ArrayCollection> <fx:String>12:00 AM</fx:String> <fx:String>12:15 AM</fx:String> <fx:String>12:30 AM</fx:String> <fx:String>12:45 AM</fx:String> <fx:String>01:00 AM</fx:String> <fx:String>01:15 AM</fx:String> <fx:String>01:30 AM</fx:String> <fx:String>01:45 AM</fx:String> <fx:String>02:00 AM</fx:String> <fx:String>02:15 AM</fx:String> <fx:String>02:30 AM</fx:String> <fx:String>02:45 AM</fx:String> <fx:String>03:00 AM</fx:String> <fx:String>03:15 AM</fx:String> <fx:String>03:30 AM</fx:String> <fx:String>03:45 AM</fx:String> <fx:String>04:00 AM</fx:String> <fx:String>04:15 AM</fx:String> <fx:String>04:30 AM</fx:String> <fx:String>04:45 AM</fx:String> <fx:String>05:00 AM</fx:String> <fx:String>05:15 AM</fx:String> <fx:String>05:30 AM</fx:String> <fx:String>05:45 AM</fx:String> <fx:String>06:00 AM</fx:String> <fx:String>06:15 AM</fx:String> <fx:String>06:30 AM</fx:String> <fx:String>06:45 AM</fx:String> <fx:String>07:00 AM</fx:String> <fx:String>07:15 AM</fx:String> <fx:String>07:30 AM</fx:String> <fx:String>07:45 AM</fx:String> <fx:String>08:00 AM</fx:String> <fx:String>08:15 AM</fx:String> <fx:String>08:30 AM</fx:String> <fx:String>08:45 AM</fx:String> <fx:String>09:00 AM</fx:String> <fx:String>09:15 AM</fx:String> <fx:String>09:30 AM</fx:String> <fx:String>09:45 AM</fx:String> <fx:String>10:00 AM</fx:String> <fx:String>10:15 AM</fx:String> <fx:String>10:30 AM</fx:String> <fx:String>10:45 AM</fx:String> <fx:String>11:00 AM</fx:String> <fx:String>11:15 AM</fx:String> <fx:String>11:30 AM</fx:String> <fx:String>11:45 AM</fx:String> <fx:String>12:00 PM</fx:String> <fx:String>12:15 PM</fx:String> <fx:String>12:30 PM</fx:String> <fx:String>12:45 PM</fx:String> <fx:String>01:00 PM</fx:String> <fx:String>01:15 PM</fx:String> <fx:String>01:30 PM</fx:String> <fx:String>01:45 PM</fx:String> <fx:String>02:00 PM</fx:String> <fx:String>02:15 PM</fx:String> <fx:String>02:30 PM</fx:String> <fx:String>02:45 PM</fx:String> <fx:String>03:00 PM</fx:String> <fx:String>03:15 PM</fx:String> <fx:String>03:30 PM</fx:String> <fx:String>03:45 PM</fx:String> <fx:String>04:00 PM</fx:String> <fx:String>04:15 PM</fx:String> <fx:String>04:30 PM</fx:String> <fx:String>04:45 PM</fx:String> <fx:String>05:00 PM</fx:String> <fx:String>05:15 PM</fx:String> <fx:String>05:30 PM</fx:String> <fx:String>05:45 PM</fx:String> <fx:String>06:00 PM</fx:String> <fx:String>06:15 PM</fx:String> <fx:String>06:30 PM</fx:String> <fx:String>06:45 PM</fx:String> <fx:String>07:00 PM</fx:String> <fx:String>07:15 PM</fx:String> <fx:String>07:30 PM</fx:String> <fx:String>07:45 PM</fx:String> <fx:String>08:00 PM</fx:String> <fx:String>08:15 PM</fx:String> <fx:String>08:30 PM</fx:String> <fx:String>08:45 PM</fx:String> <fx:String>09:00 PM</fx:String> <fx:String>09:15 PM</fx:String> <fx:String>09:30 PM</fx:String> <fx:String>09:45 PM</fx:String> <fx:String>10:00 PM</fx:String> <fx:String>10:15 PM</fx:String> <fx:String>10:30 PM</fx:String> <fx:String>10:45 PM</fx:String> <fx:String>11:00 PM</fx:String> <fx:String>11:15 PM</fx:String> <fx:String>11:30 PM</fx:String> <fx:String>11:45 PM</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Spacer width="10"/> <s:Label text="on days *"/> <comp:DropDownListEx width="230"> <comp:dataProvider> <s:ArrayCollection> <fx:Object index="0" name="Sun"/> <fx:Object index="1" name="Mon"/> <fx:Object index="2" name="Tues"/> <fx:Object index="3" name="Wed"/> <fx:Object index="4" name="Thur"/> <fx:Object index="5" name="Fri"/> <fx:Object index="6" name="Sat"/> </s:ArrayCollection> </comp:dataProvider> </comp:DropDownListEx> </s:HGroup> </s:NavigatorContent> <s:NavigatorContent width="100%" height="100%" label="On specified days of the month"> <s:HGroup paddingBottom="20" paddingLeft="20" paddingTop="20" verticalAlign="middle"> <s:Label text="Run at"/> <s:DropDownList selectedIndex="0"> <s:dataProvider> <s:ArrayCollection> <fx:String>12:00 AM</fx:String> <fx:String>12:15 AM</fx:String> <fx:String>12:30 AM</fx:String> <fx:String>12:45 AM</fx:String> <fx:String>01:00 AM</fx:String> <fx:String>01:15 AM</fx:String> <fx:String>01:30 AM</fx:String> <fx:String>01:45 AM</fx:String> <fx:String>02:00 AM</fx:String> <fx:String>02:15 AM</fx:String> <fx:String>02:30 AM</fx:String> <fx:String>02:45 AM</fx:String> <fx:String>03:00 AM</fx:String> <fx:String>03:15 AM</fx:String> <fx:String>03:30 AM</fx:String> <fx:String>03:45 AM</fx:String> <fx:String>04:00 AM</fx:String> <fx:String>04:15 AM</fx:String> <fx:String>04:30 AM</fx:String> <fx:String>04:45 AM</fx:String> <fx:String>05:00 AM</fx:String> <fx:String>05:15 AM</fx:String> <fx:String>05:30 AM</fx:String> <fx:String>05:45 AM</fx:String> <fx:String>06:00 AM</fx:String> <fx:String>06:15 AM</fx:String> <fx:String>06:30 AM</fx:String> <fx:String>06:45 AM</fx:String> <fx:String>07:00 AM</fx:String> <fx:String>07:15 AM</fx:String> <fx:String>07:30 AM</fx:String> <fx:String>07:45 AM</fx:String> <fx:String>08:00 AM</fx:String> <fx:String>08:15 AM</fx:String> <fx:String>08:30 AM</fx:String> <fx:String>08:45 AM</fx:String> <fx:String>09:00 AM</fx:String> <fx:String>09:15 AM</fx:String> <fx:String>09:30 AM</fx:String> <fx:String>09:45 AM</fx:String> <fx:String>10:00 AM</fx:String> <fx:String>10:15 AM</fx:String> <fx:String>10:30 AM</fx:String> <fx:String>10:45 AM</fx:String> <fx:String>11:00 AM</fx:String> <fx:String>11:15 AM</fx:String> <fx:String>11:30 AM</fx:String> <fx:String>11:45 AM</fx:String> <fx:String>12:00 PM</fx:String> <fx:String>12:15 PM</fx:String> <fx:String>12:30 PM</fx:String> <fx:String>12:45 PM</fx:String> <fx:String>01:00 PM</fx:String> <fx:String>01:15 PM</fx:String> <fx:String>01:30 PM</fx:String> <fx:String>01:45 PM</fx:String> <fx:String>02:00 PM</fx:String> <fx:String>02:15 PM</fx:String> <fx:String>02:30 PM</fx:String> <fx:String>02:45 PM</fx:String> <fx:String>03:00 PM</fx:String> <fx:String>03:15 PM</fx:String> <fx:String>03:30 PM</fx:String> <fx:String>03:45 PM</fx:String> <fx:String>04:00 PM</fx:String> <fx:String>04:15 PM</fx:String> <fx:String>04:30 PM</fx:String> <fx:String>04:45 PM</fx:String> <fx:String>05:00 PM</fx:String> <fx:String>05:15 PM</fx:String> <fx:String>05:30 PM</fx:String> <fx:String>05:45 PM</fx:String> <fx:String>06:00 PM</fx:String> <fx:String>06:15 PM</fx:String> <fx:String>06:30 PM</fx:String> <fx:String>06:45 PM</fx:String> <fx:String>07:00 PM</fx:String> <fx:String>07:15 PM</fx:String> <fx:String>07:30 PM</fx:String> <fx:String>07:45 PM</fx:String> <fx:String>08:00 PM</fx:String> <fx:String>08:15 PM</fx:String> <fx:String>08:30 PM</fx:String> <fx:String>08:45 PM</fx:String> <fx:String>09:00 PM</fx:String> <fx:String>09:15 PM</fx:String> <fx:String>09:30 PM</fx:String> <fx:String>09:45 PM</fx:String> <fx:String>10:00 PM</fx:String> <fx:String>10:15 PM</fx:String> <fx:String>10:30 PM</fx:String> <fx:String>10:45 PM</fx:String> <fx:String>11:00 PM</fx:String> <fx:String>11:15 PM</fx:String> <fx:String>11:30 PM</fx:String> <fx:String>11:45 PM</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> <s:Spacer width="10"/> <s:Label text="on the *"/> <comp:DropDownListEx width="230"> <comp:dataProvider> <s:ArrayCollection> <fx:Object index="0" name="1st"/> <fx:Object index="1" name="2nd"/> <fx:Object index="2" name="3rd"/> <fx:Object index="3" name="4th"/> <fx:Object index="4" name="5th"/> <fx:Object index="5" name="6th"/> <fx:Object index="6" name="7th"/> <fx:Object index="7" name="8th"/> <fx:Object index="8" name="9th"/> <fx:Object index="9" name="10th"/> <fx:Object index="10" name="11th"/> <fx:Object index="11" name="12th"/> <fx:Object index="12" name="13th"/> <fx:Object index="13" name="14th"/> <fx:Object index="14" name="15th"/> <fx:Object index="15" name="16th"/> <fx:Object index="16" name="17th"/> <fx:Object index="17" name="18th"/> <fx:Object index="18" name="19th"/> <fx:Object index="19" name="20th"/> <fx:Object index="20" name="21st"/> <fx:Object index="21" name="22nd"/> <fx:Object index="22" name="23rd"/> <fx:Object index="23" name="24th"/> <fx:Object index="24" name="25th"/> <fx:Object index="25" name="26th"/> <fx:Object index="26" name="27th"/> <fx:Object index="27" name="28th"/> <fx:Object index="28" name="29th"/> <fx:Object index="29" name="30th"/> <fx:Object index="30" name="31st"/> </s:ArrayCollection> </comp:dataProvider> </comp:DropDownListEx> <s:Label text="of every month"/> </s:HGroup> </s:NavigatorContent> </mx:ViewStack> <mx:HRule width="100%" height="20"/> <s:CheckBox label="Enable Recovery Point Objective (RPO)" selected="true"/> <s:HGroup width="100%" paddingLeft="20" paddingTop="10" verticalAlign="middle"> <s:Label text="RPO"/> <s:DropDownList selectedIndex="8"> <s:dataProvider> <s:ArrayCollection> <fx:String>30 minutes</fx:String> <fx:String>1 hour</fx:String> <fx:String>2 hours</fx:String> <fx:String>3 hours</fx:String> <fx:String>4 hours</fx:String> <fx:String>6 hours</fx:String> <fx:String>8 hours</fx:String> <fx:String>12 hours</fx:String> <fx:String>24 hours</fx:String> </s:ArrayCollection> </s:dataProvider> </s:DropDownList> </s:HGroup> </s:Group>
说明:
代码中使用的自定义DropDownListEx组件见本人的另一篇博客:DropDownListEx组件
转载于:https://blog.51cto.com/xiweicheng/1532351