Spark Container Panel

Panel容器包含标题栏、标题、边框及包含子控件的区域。通常，你可以使用Panel窗口封装你自己的容器。使用<s:Panel>定义Panel容器。

Panel的继承结构

Panel

SkinnableContainer

SkinnableContainerBase

SkinnableComponent

UIComponent

FlexSprite

Sprite

DisplayObjectContainer

InteractiveObject

DisplayObject

EventDispatcher

Object 

例 将一个Form包含在Panel中

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkPanelSimple.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark" >
<s:Panel id="myPanel" title="My Application" x="20" y="20">
    <s:Form id="myForm" width="400">
        <s:FormHeading label="Billing Information"/>
        <s:FormItem label="First Name">
            <s:TextInput id="fname" width="100%"/>
        </s:FormItem>
        <s:FormItem label="Last Name">
            <s:TextInput id="lname" width="100%"/>
        </s:FormItem>
        <s:FormItem label="Address">
            <s:TextInput id="addr1" width="100%"/>
            <s:TextInput id="addr2" width="100%"/>
        </s:FormItem>
        <s:FormItem label="City">
            <s:TextInput id="city"/>
        </s:FormItem>
        <s:FormItem label="State">
            <s:TextInput id="state"/>
        </s:FormItem>
        <s:FormItem label="ZIP Code">
            <s:TextInput id="zip" width="100"/>
        </s:FormItem>
        <s:FormItem>
            <mx:HRule width="200" height="1"/>
            <s:Button label="Submit Form"/>
        </s:FormItem>
    </s:Form>
</s:Panel>

</s:Application>

运行 

 

例 在Panel的标准栏上添加菜单及ComBox等控件 

<?xml version="1.0" encoding="utf-8"?>
<!-- containers\spark\SparkPanelCB.mxml -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
width="750">
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import mx.controls.Alert;
]]>
</fx:Script>
    <fx:Declarations>
        <fx:XMLList id="menuXML">
            <fx:menuitem label="File">
                <fx:menuitem label="New" data="New"/>
                <fx:menuitem label="Open" data="Open"/>
                <fx:menuitem label="Save" data="Save"/>
                <fx:menuitem label="Exit" data="Exit"/>
            </fx:menuitem>
                <fx:menuitem label="Edit">
                <fx:menuitem label="Cut" data="Cut"/>
                <fx:menuitem label="Copy" data="Copy"/>
                <fx:menuitem label="Paste" data="Paste"/>
            </fx:menuitem>
            <fx:menuitem label="View"/>
        </fx:XMLList>
        <fx:Array id="cmbDP">
            <fx:String>Item 1</fx:String>
            <fx:String>Item 2</fx:String>
            <fx:String>Item 3</fx:String>
        </fx:Array>
    </fx:Declarations>
<s:Panel title="Spark Panel">
    <s:layout>
    <s:VerticalLayout/>
    </s:layout>
    <s:controlBarContent>
        <mx:MenuBar height="100%"
                    dataProvider="{menuXML}"
                    labelField="@label"
                    showRoot="true"
        />
        <mx:HBox paddingBottom="5" paddingTop="5">
            <mx:ComboBox dataProvider="{cmbDP}"/>
            <mx:Spacer width="100%"/>
            <mx:TextInput id="myTI" text=""/>
            <mx:Button id="srch1"
                        label="Search"
                        click="Alert.show('Searching');"
            />
        </mx:HBox>
    </s:controlBarContent>
    <s:Button label="Button"/>
    <s:TextArea width="300" height="200"/>
</s:Panel>

</s:Application>

运行 

 

例 Panel居中

<?xml version="1.0"?>
<!-- Simple example to demonstrate Spark Panel layout container. -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
            private function showProperties():void  {
                panelPropertyArea.text = "Title: " + panel.title + "\n" +
                        "Width: " + panel.width + "\n" +
                        "Height: " + panel.height;
            }
        ]]>
    </fx:Script>

    <s:Panel id="panel" title="Spark Panel Container Example" 
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label width="100%" color="blue"
                text="Click the Button control to see panel properties."/>
            <s:TextArea id="panelPropertyArea" width="100%" height="100%"/>
            <s:Button label="Click to view Panel properties" click="showProperties();"/>
        </s:VGroup>
    </s:Panel>

</s:Application> 

运行