Add up Flash (9)

Introduced

Demonstrates the application of layout controls in Flex 3.0, styling and skin applications

Layout controls-a list of commonly used layout controls in Flex

Styles-controls the styles of each control in Flex through CSS

Skin-Use the SWF developed by the Flash to make the skin of the control

Online Demo

Http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html

1. Layout Control List

Layout.mxml

<?xml version= "1.0" encoding= "Utf-8"?>
<mx:panel xmlns:mx= "Http://www.adobe.com/2006/mxml" layout= "Absolute"
title= "Layout Common Layout Control Overview" width= "476" height= "427" >

<mx:Script>
<! [cdata[

Import Mx.controls.Alert;

Private Function SubmitForm (e:mouseevent): void
{
Alert.show ("Item1:" + item1.text, "alert Box");
}

]]>
</mx:Script>

<!--
Hbox-Horizontal layout
VBox-Vertical Linear layout
-->
<mx:hbox x= "y=" "width=" 438 "horizontalgap=" "borderthickness=" 1 "borderstyle=" SOLID ">
<mx:label text= "Hbox-label1"/>
<mx:label text= "Hbox-label2"/>
</mx:HBox>

<!--
Hdividedbox-Displays the separator in a vertical direction based on the Hbox
Vdividedbox-Displays the divider horizontally, based on the VBox
-->
<mx:hdividedbox x= "y=" width= "438" borderthickness= "1" borderstyle= "SOLID" >
<mx:label text= "Hdividedbox-label1"/>
<mx:label text= "Hdividedbox-label2"/>
</mx:HDividedBox>

<!--
Panel-panels. can set its title, content, etc.
-->
<mx:panel width= "171" height= "layout=" absolute "title=," Panel-title "x=" y= "," borderthickness= "1" BorderS tyle= "SOLID" >
<mx:label text= "Panel-label1"/>
</mx:Panel>

<!--
Grid-Gridline layout control
-->
<mx:grid x= "Ten" y= "169" borderthickness= "1" borderstyle= "SOLID" >
<mx:gridrow width= "100%" height= "100%" >
<mx:griditem width= "100%" height= "100%" >
<mx:label text= "Grid-label1"/>
</mx:GridItem>
<mx:griditem width= "100%" height= "100%" >
<mx:label text= "Grid-label2"/>
</mx:GridItem>
</mx:GridRow>
<mx:gridrow width= "100%" height= "100%" >
<mx:griditem width= "100%" height= "100%" colspan= "2" horizontalalign= "Center" >
<mx:label text= "Grid-label3"/>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>

<!--
Form-for building form layouts
-->
<mx:form x= "189" y= "width=" 259 "height=" 149 "1" borderthickness= "borderstyle=" >
<mx:formheading label= "Form-head"/>
<mx:formitem label= "ITEM1:" >
<mx:textinput id= "Item1"/>
</mx:FormItem>
<mx:FormItem>
<mx:hrule height= "1" width= "100%"/>
<mx:button label= "Form-submit" click= "SubmitForm (event)"/>
</mx:FormItem>
</mx:Form>

<!--
Canvas-Absolutely positioned layout control
-->
<mx:canvas width= "438 height=" "x=" y= "221" borderthickness= "1" borderstyle= "SOLID" >
<mx:label text= "Canvas-label1"/>
<mx:label text= "Canvas-label2" x= "y="/>
<mx:label text= "Canvas-label3" x= "y=" "/>"
</mx:Canvas>

<!--
Applicationcontrolbar-Display as a bar control
-->
<mx:applicationcontrolbar x= "Ten" y= "313" width= "436" >
<mx:label text= "Applicationcontrolbar-label1"/>
</mx:ApplicationControlBar>

<!--
Controlbar-panel the bottom of the bar control
Spacer-not used for display, purely placeholder
-->
<mx:ControlBar>
<mx:label text= "Panel-controlbar-label1"/>
<mx:spacer width= "100%" x= "154" "y="/>
<mx:label text= "Panel-controlbar-label2"/>
</mx:ControlBar>
</mx:Panel>