效果截图:

wKioL1PXXQyyeMYxAADmcwGLx9A148.jpg

wKioL1PXXQ2wIzFHAADy4bMjlEY231.jpg


wKiom1PXW_WAiC6aAADOIOF99B4652.jpg

wKioL1PXXRCwHoBwAADXIxb3X4s189.jpg


主要源码:

<?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组件