Form Form Layout
The Form container is the outermost container in the Flex form, which controls the size of the form, as well as the layout, which is usually vertical in the form and left-aligned. This container can contain formheading and formitem. give a simple example.
| <!--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= ">"
<mx:formheading label= "Billing Information"/>
<mx:formitem label= "A-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= ">"
<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= "/>"
</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= "1" height= "/>"
<mx:button label= "Submit Form" click= "SubmitForm ();" />
</mx:FormItem>
</mx:Form>
</mx:Application>
|
Effect Chart:
Grid Layout
grid is used to place components in a mesh, which is actually a unit of vertical direction. <mx:Grd> to create a Grid container. <mx:GridRow> create each row, but the tag must be a <mx:Grd> child tag. You can also use <mx:GridItem> to create cell components in each row, and this tag must also be a <mx:GridRow> child tag.
| <?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 "the" the "a" 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 the A-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>
|
As shown in figure:
Panel Container
This is relatively simple. Panel with Canvas hbox VBox all functions , if the panel 's layout property value is absolute , the panel 's child-level elements are laid out and Canvas When it is horizontal , the equivalent of hbox to vertical is the equivalent of VBox and can be Panel To specify the title .
<?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>
|
effect as shown:
Titelwindow Container
Titlewindow inherited from the panel , compared to the panel , It's just one more object , and that's the closing button , through Titlewindow Close Event triggers the Click event of the button it does not automatically close the Titlewindow itself, but it is determined by the code we write for the event.
<?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>
|
Effect as shown:
Title Layout container
All the cell components in the Titel container are of the same size size. This is obviously different from the Grid container. This happens, for example, to put 3 components in each row, you just have 7 components, then it will be divided into 3 rows, so that the last line is only components. The Title container has this feature.
<?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>
|
Effect as shown:
