<?xml version="1.0" encoding="utf-8"?> <!-- author: 谢忠持 Application 标签表示当前的是一个flex 程序 Application 本身是个容器,容器内的布局是 absolute,例外有horizontal,vertical可选 --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!-- states 不占用布局空间 当前的 页面 元素 在不同的状态下呈现不同的样子 --> <mx:states> <mx:State name="CartView"> <mx:SetProperty target="{products}" name="width" value="0"/> <mx:SetProperty target="{products}" name="height" value="0"/> <mx:SetProperty target="{CartBox}" name="width" value="100%"/> <mx:AddChild relativeTo="{CartBox}" position="lastChild"> <mx:DataGrid id="dgCart" width="100%"> <mx:columns> <mx:DataGridColumn headerText="Column 1" dataField="col1"/> <mx:DataGridColumn headerText="Column 2" dataField="col2"/> <mx:DataGridColumn headerText="Column 3" dataField="col3"/> </mx:columns> </mx:DataGrid> </mx:AddChild> <mx:AddChild relativeTo="{CartBox}" position="lastChild"> <mx:LinkButton label="Continue Shopping" click="this.currentState='';"/> </mx:AddChild> <mx:RemoveChild target="{linkbutton1}"/> </mx:State> </mx:states> <!-- dock = 'true' 表示 ApplicationControlBar停靠在 Application 上 x,y 代表控件的位置 left, right, top, bottom 代表离 父元素 边框的距离 类似 html中的 mergin-left.... ApplicationControlBar 是容器类 --> <mx:ApplicationControlBar height="90" width="100%" dock="true"> <mx:Canvas width="100%" height="100%"> <mx:Label x="0" y="0" text="flex"/> <mx:Label x="0" y="41" text="GROCER"/> <mx:Button y="10" label="View Chart" id="btnViewCart" right="90"/> <mx:Button y="10" label="CheckOut" id="btnCheckOut" right="10"/> </mx:Canvas> </mx:ApplicationControlBar> <mx:Label text="(C) 2006,FlexGrocer" right="10" bottom="10"/> <!-- HBox 是容器类 HBox 中的子元素 横向摆放 VBox 也是容器类 VBox 中的子元素 竖向摆放 --> <mx:HBox x="0" y="0" width="100%" height="100%" id="bodyBox"> <mx:VBox width="100%" height="100%" id="products"> <mx:Label text="Milk" id="prodName"/> <mx:Label text="$1.99" id="price"/> <mx:Button label="Add To Cart" id="add"/> </mx:VBox> <mx:VBox height="100%" id="CartBox"> <mx:Label text="Your Cart Total:$"/> <mx:LinkButton label="View Cart" click="this.currentState = 'CartView';" id="linkbutton1"/> </mx:VBox> </mx:HBox> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <!-- author: 谢忠持 实现复杂布局用的 把当前页面格式化成表格。 通过设置占用表格来设置布局 --> <mx:constraintColumns> <mx:ConstraintColumn id="col1" width="33%"/> <mx:ConstraintColumn id="col2" width="33%"/> <mx:ConstraintColumn id="col3" width="33%"/> </mx:constraintColumns> <mx:constraintRows> <mx:ConstraintRow id="row1" height="50%"/> <mx:ConstraintRow id="row2" height="50%"/> </mx:constraintRows> <mx:TextArea id="ta1" text="TextArea1" left="col1:5" right="col1:5" top="row1:10" bottom="row1:20" backgroundColor="yellow" fontSize="20"/> <mx:TextArea id="ta2" text="TextArea2" left="col1:5" right="col2:5" top="row2:10" bottom="row2:10" backgroundColor="red" fontSize="20" color="white"/> <mx:TextArea id="ta3" text="TextArea3" left="col3:5" right="col3:5" top="row1:10" bottom="row2:20" backgroundColor="green" fontSize="20" color="white"/> </mx:Application>
<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal"> <mx:ApplicationControlBar dock="true"> <mx:LinkButton label="ALL" click="this.currentState=''"/> <mx:LinkButton label="Sales" click="this.currentState='fullSales'"/> <mx:LinkButton label="Categories" click="this.currentState='fullType'"/> <mx:LinkButton label="Comparison" click="this.currentState='fullComp'"/> </mx:ApplicationControlBar> <mx:states> <mx:State name="fullSales"> <mx:SetProperty target="{rightCharts}" name="width" value="0"/> <mx:SetProperty target="{rightCharts}" name="height" value="0"/> </mx:State> <mx:State name="fullType"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{comp}" name="width" value="0"/> <mx:SetProperty target="{comp}" name="height" value="0"/> </mx:State> <mx:State name="fullComp"> <mx:SetProperty target="{sales}" name="width" value="0"/> <mx:SetProperty target="{sales}" name="height" value="0"/> <mx:SetProperty target="{type}" name="width" value="0"/> <mx:SetProperty target="{type}" name="height" value="0"/> </mx:State> </mx:states> <mx:Panel id="sales" width="100%" height="100%" title="Sales Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:VBox id="rightCharts" width="100%" height="100%"> <mx:Panel id="type" height="100%" width="100%" title="Category Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> <mx:Panel id="comp" height="100%" width="100%" title="Comarison Chart"> <mx:ControlBar> </mx:ControlBar> </mx:Panel> </mx:VBox> </mx:Application>