[Flex 3.0] Adobe Flex3 실전 트레이닝북 동영상 - LESSON 4: 간단한 컨트롤 사용하기
FLEX/Adobe Flex3 실전 트레이닝북 2010. 7. 12. 21:50-------------------------------------------------------------------------------------
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
creationComplete="lab1.text=caption1;lab2.text=caption2;">
<mx:Script>
<![CDATA[
/// Parse에게 CDATA 밑에 있는것은 해석 하지 말라고 알려 주는것
[Bindable]
public var caption1:String = "Caption1";
[Bindable]
public var caption2:String = "Caption2";
]]>
</mx:Script>
<mx:Label id="lab1" x="90" y="61" text="Label1"/>
<mx:Label id="lab2" x="90" y="87" text="Label2"/>
<mx:Button x="90" y="113" label="Button" click="caption1='okok';caption2='nono'"/>
<!--
mx:Binding 태그는 해당 변수와 해당 레이블에 값을 연결할수 있다.
구지 해당 값을 변경하지 않아도 mapping이 되어 있기 때문에 변수 값을 바꾸어도 레이블에 값을 변경할수 있다.
단, 해당 변수의 [Bindable]로 선언 해주어야 된다.
-->
<mx:Binding source="caption1" destination="lab1.text" />
<mx:Binding source="caption2" destination="lab2.text" />
<!--
mx:Binding 태그를 사용하지 않아도 직접 선언할수도 있다.
<mx:Label id="lab1" x="90" y="61" text="{caption}"/>
중괄호를 사용하여 선언하면 Binding 한다는 의미가 된다.
-->
</mx:Application>
------------------------------------------------------------------------------------------------------
[EComm.mxml]
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Model id="groceryInventory">
<groceries>
<catName>Dairy</catName>
<prodName>Milk</prodName>
<imageName>assets/acc.png</imageName>
<cost>1.20</cost>
<listPrice>1.99</listPrice>
<isOrganic>true</isOrganic>
<isLowFat>true</isLowFat>
<description>Direct from California where cows are happiest!</description>
</groceries>
</mx:Model>
<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:State name="expanded">
<mx:AddChild>
<mx:VBox x="200" width="100%">
<mx:Text text="{groceryInventory.description}" width="50%"/>
<mx:Label text="Certified Organic"/>
<mx:Label text="Low Fat"/>
</mx:VBox>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:ApplicationControlBar dock="true" width="100%" height="90">
<mx:Canvas width="100%" height="100%">
<mx:Label x="0" y="0" text="Flex"/>
<mx:Label x="0" y="41" text="GROCER"/>
<mx:Button label="View Cart" id="btnViewCart" right="90" y="0"/>
<mx:Button label="Checkout" id="btnCheckout" right="10" y="0"/>
</mx:Canvas>
</mx:ApplicationControlBar>
<mx:Label text="(c) 2006, FlexGrocer" bottom="10" right="10"/>
<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:Image source="assets/acc.png" scaleContent="true"
mouseOver="this.currentState='expanded'" mouseOut="this.currentState=''"/>
<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>
<!--
image 태크 사용시 source를 사용하면 해당 swf에는 같이 포함이 되지 않는다.
그래서 해당 swf파일 실행시 이미지 다운로드 파일은 따로 다운로드 받는다.
그런데 swf 컴파일시 해당 이미지를 같이 컴파일 하는 방법도 있다. source에 @Embed('assets/......')로 써주면 된다.
<mx:Image source="@Embed('assets/acc.png')" />
하지만 @Embed를 사용하면 해당 이미지에 대한 크기가 swf에 같이 포함이 되기 때문에 swf가 단순 source를 사용할때보다 이미지 파일만큼 커진다.
-->
</mx:Application>