Flex 4中如何创建特定显示效果Spark Panel的例子

 

下面是完整代码(或点击这里察看)：
下面是main.mxml：

<?xml version="1.0" encoding="utf-8"?>
<s:Application name="Spark_Panel_showEffect_test"
        xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/halo">
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
 
    <fx:Declarations>
        <s:Parallel id="showEff">
            <s:Rotate3D angleYFrom="-90" angleYTo="0" />
            <s:Fade alphaFrom="0.0" alphaTo="1.0" />
        </s:Parallel>
 
        <s:Parallel id="hideEff">
            <s:Rotate3D angleYFrom="0" angleYTo="-90" />
            <s:Fade alphaFrom="1.0" alphaTo="0.0" />
        </s:Parallel>
    </fx:Declarations>
 
    <mx:ApplicationControlBar width="100%" cornerRadius="0">
        <s:Button id="btn"
                label="Toggle Panel visibility"
                click="panel.visible = !panel.visible;" />
    </mx:ApplicationControlBar>
 
    <s:Group width="100%" height="100%">
        <s:Panel id="panel"
                title="Panel title"
                showEffect="{showEff}"
                hideEffect="{hideEff}"
                horizontalCenter="0" verticalCenter="0">
            <s:layout>
                <s:VerticalLayout />
            </s:layout>
            <mx:Form>
                <mx:FormItem label="From:" width="100%">
                    <s:DropDownList id="fromEmail"
                            requireSelection="true"
                            width="100%">
                        <s:ArrayList source="[e-mail]" />
                    </s:DropDownList>
                </mx:FormItem>
                <mx:FormItem label="To:" width="100%">
                    <s:TextInput id="toEmail" width="100%" />
                </mx:FormItem>
                <mx:FormItem label="Message:" width="100%">
                    <s:TextArea id="message" width="100%" />
                </mx:FormItem>
                <mx:FormItem horizontalAlign="right" width="100%">
                    <s:Button label="Send" />
                </mx:FormItem>
            </mx:Form>
        </s:Panel>
    </s:Group>
 
</s:Application>

 

本文转自：http://blog.minidx.com/2009/10/31/3009.html