欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flex3 界面布局教程 第二篇

 更新時(shí)間：2009年10月12日 14:43:51   作者：  
國(guó)慶期間，做了不少基于 flex 的開發(fā)工作，對(duì) flex 的布局容器有了進(jìn)一步深入的理解，也找到不少非常棒的文章，分享到這里方便一下大家。

Form 表單布局

Form容器是Flex 表單中處于最外層的容器，負(fù)責(zé)控制表單的大小，以及布局，通常表單中都是垂直布局，并且靠左對(duì)齊的。這個(gè)容器可以包含FormHeading以及FormItem。舉個(gè)簡(jiǎn)單的例子。

<!-- containers\layouts\FormComplete.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
private function submitForm():void {
// Handle the form submission.
}
]]>
</mx:Script>
<mx:Form id="myForm" width="400">
<mx:FormHeading label="Billing Information"/>
<mx:FormItem label="First Name">
<mx:TextInput id="fname" width="100%"/>

</mx:FormItem>
<mx:FormItem label="Last Name">
<mx:TextInput id="lname" width="100%"/>
</mx:FormItem>
<mx:FormItem label="Address">
<mx:TextInput id="addr1" width="100%"/>
<mx:TextInput id="addr2" width="100%"/>
</mx:FormItem>
<mx:FormItem label="City / State" direction="vertical">
<mx:TextInput id="city"/>
<mx:ComboBox id="st" width="75">
<mx:ArrayCollection>
<mx:String>MA</mx:String>
<mx:String>NH</mx:String>
<mx:String>RI</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem label="ZIP Code">
<mx:TextInput id="zip" width="100"/>
</mx:FormItem>
<mx:FormItem label="Country">
<mx:ComboBox id="cntry">
<mx:ArrayCollection>
<mx:String>USA</mx:String>
<mx:String>UAE</mx:String>
<mx:String>UAW</mx:String>
</mx:ArrayCollection>
</mx:ComboBox>
</mx:FormItem>
<mx:FormItem>
<mx:HRule width="200" height="1"/>
<mx:Button label="Submit Form" click="submitForm();"/>
</mx:FormItem>
</mx:Form>
</mx:Application>

      效果圖：

Grid布局

Grid通過(guò)網(wǎng)格的方法來(lái)放置組件，其實(shí)是把組件作為橫縱方向的一個(gè)單元來(lái)實(shí)現(xiàn)的。<mx:Grd>來(lái)創(chuàng)建一個(gè)Grid容器。<mx:GridRow>創(chuàng)建每一行，但是這個(gè)標(biāo)記必須是<mx:Grd>子標(biāo)記。同樣利用<mx:GridItem>可以創(chuàng)建每一行中的單元組件，而且這個(gè)標(biāo)記也必須為<mx:GridRow>子標(biāo)記。

 

<?xml version="1.0"?>
<!-- containers\layouts\Grid5Button.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Grid id="myGrid">
<!-- Define Row 1. -->
<mx:GridRow id="row1">
<!-- Define the first cell of Row 1. -->
<mx:GridItem>
<mx:Button label="Button 1"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="2"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Button 3"/>
</mx:GridItem>
<mx:GridItem>
<mx:Button label="Button 3a"/>
</mx:GridItem>

<mx:GridItem>
<mx:Button label="Button 3b"/>
</mx:GridItem>
</mx:GridRow>
<!-- Define Row 2. -->
<mx:GridRow id="row2">
<!-- Define a single cell to span three columns of Row 2. -->
<mx:GridItem colSpan="3" horizontalAlign="center">
<mx:Button label="Long-Named Button 4"/>
</mx:GridItem>
</mx:GridRow>
<!-- Define Row 3. -->
<mx:GridRow id="row3">
<!-- Define an empty first cell of Row 3. -->
<mx:GridItem/>
<!-- Define a cell to span columns 2 and 3 of Row 3. -->
<mx:GridItem colSpan="2" horizontalAlign="center">
<mx:Button label="Button 5"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
</mx:Application>

如圖：

Panel 容器

  這個(gè)就比較簡(jiǎn)單了。Panel具有Canvas HBox VBox的所有功能,如果Panel的layout屬性值為 absolute則Panel對(duì)子級(jí)元素的布局方式和Canvas一樣當(dāng)為 horizontal時(shí)則相當(dāng)于 HBox 為vertical時(shí)則相當(dāng)于VBox并且可以為 Panel指定標(biāo)題.

 

<?xml version="1.0"?>
<!-- containers\layouts\TileSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="Panel layout" width="100%" height="100%">
    <mx:Label name="Label1"/>
    <mx:Button label="button1"/>
</mx:Panel>

</mx:Application>

 效果如圖：

TitelWindow容器

   TitleWindow繼承自Panel,與Panel相比,它只多了一個(gè)對(duì)象,那就是關(guān)閉按鈕,通過(guò) TitleWindow close事件觸發(fā)該按鈕的單擊事件它并不會(huì)自動(dòng)將TitleWindow本身關(guān)閉,而是通過(guò)我們?yōu)樵撌录鶎懙拇a決定。

 

<?xml version="1.0"?>
<!-- containers\layouts\TileSizing.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
  <![CDATA[
         import mx.controls.Alert;
     private function closeEvent():void{
     Alert.show("you click the close","close");
     }
     ]]></mx:Script>
 <mx:TitleWindow title="Title" width="100%" height="100%" showCloseButton="true" close="closeEvent()">
 <mx:Button label="Button"/>
 </mx:TitleWindow>

</mx:Application>

效果如圖：

Title layout 容器

 所有的Titel容器中的單元組件都是具有相同大小尺寸的。這與Grid容器明顯不一樣了。這樣就會(huì)出現(xiàn)這種情況，比如擬定每一行放置3個(gè)組件，你剛好有7個(gè)組件，那么就會(huì)分成3行放置，這樣的話，最后一行就只有組件了。Title容器就具有這個(gè)特點(diǎn)。

<?xml version="1.0"?>
<!-- containers\layouts\TileSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Tile id="myFlow"
direction="horizontal"
borderStyle="solid"
paddingTop="10" paddingBottom="10"
paddingRight="10" paddingLeft="10"
verticalGap="15" horizontalGap="10">
<mx:TextInput id="text1" text="1" height="50" width="75"/>
<mx:TextInput id="text2" text="2" height="50" width="100"/>
<mx:TextInput id="text3" text="3" height="50" width="75"/>
<mx:TextInput id="text4" text="4" height="50" width="75"/>
<mx:TextInput id="text5" text="5" height="50" width="75"/>
</mx:Tile>
</mx:Application>

效果如圖：

相關(guān)文章

最新評(píng)論