Adobe FLEX 3 Flex Application FLEX 3 FLEX

Adobe FLEX 3

Flex Application의 흐름 FLEX 3

FLEX 3 컴포넌트 제작 text. Input 컴포넌트에 자주 사용되는 기능을 추가해보자(컴포넌트) 소스 1 <Comp: Label. Text. Input txt. Label="성명 : "/> 소스 2 <mx: Script> <![CDATA[ [Bindable] public var txt. Label : String; ]]> </mx: Script> <mx: Label text="{txt. Label}"/> <mx: Text. Input/> 결과

FLEX 3 스타일 적용 CSS를 사용하여 스타일을 적용하여 보자. <mx: Style> Application{ font-size : 20; background-color : #E 40 F 00; }. btn 1{ font-size : 12; text-align : left; color : #d 2 d 2 d 2; } </mx: Style> Application{ font-size : 20; background-color : #E 40 F 00; }. btn 1{ font-size : 12; text-align : left; color : #d 2 d 2 d 2; } <mx: Style source="global. css"> MXML 파일 내 <mx: Style> 태그 사용 CSS 파일 사용

Flash를 이용한 이미지 추가 <mx: Script> <![CDATA[ [Embed(source='Asset/symbol. Test. swf', symbol='ex. Btn')] [Bindable] public var img. Cls: Class; ]]> </mx: Script> <mx: Image source="{img. Cls}"/> FLEX 3

CSS를 통한 Font Embed FLEX 3 <mx: Style> @font-face { src: url(". . /assets/Myriad. Web. Pro. ttf"); font. Family: my. Font. Family; advanced. Anti. Aliasing: true; unicode. Range: U+0041 -U+005 A, /* Upper-Case [A. . Z] */ U+0061 -U+007 A, /* Lower-Case a-z */ U+0030 -U+0039, /* Numbers [0. . 9] */ U+002 E-U+002 E; /* Period [. ] */ } Text. Area { font. Family: my. Font. Family; font. Size: 32; } </mx: Style> <mx: Panel title="Embedded Font Character Range"> <mx: Text. Area width="400" height="150"> <mx: text> The Text Uses Only Some of Available Characters 0 1 2 3 4 5 6 7 8 9. </mx: text> </mx: Text. Area> </mx: Panel> 참고 URL : http: //livedocs. adobe. com/flex/3/html/index. html? content=fonts_01. html

Flash를 통한 Font Embed FLEX 3 <mx: Style> @font-face { src: url("Asset/Font/font. swf"); font. Family: "휴먼매직체"; } </mx: Style> <mx: Panel title="Embedded Font"> <mx: Text. Area width="400" height="150" font. Family="휴먼매직체"> <mx: text> 만나서 반갑습니다. ABCD abcd </mx: text> </mx: Text. Area> </mx: Panel> 참고 URL : http: //livedocs. adobe. com/flex/3/html/index. html? content=fonts_01. html

Chart FLEX 3

FLEX 3 Column Chart <mx: Column. Chart id="column" height="100%" width="45%" padding. Left="5" padding. Right="5" show. Data. Tips="true" data. Provider="{medals. AC}" > <mx: horizontal. Axis> <mx: Category. Axis category. Field="Country"/> </mx: horizontal. Axis> <mx: series> <mx: Column. Series x. Field="Country" y. Field="Gold" display. Name="Gold" /> <mx: Column. Series x. Field="Country" y. Field="Silver" display. Name="Silver" /> <mx: Column. Series x. Field="Country" y. Field="Bronze" display. Name="Bronze" /> </mx: series> </mx: Column. Chart> <mx: Legend data. Provider="{column}"/>

FLEX 3 Line Chart <mx: Line. Chart id="linechart" height="100%" width="45%" padding. Left="5" padding. Right="5" show. Data. Tips="true" data. Provider="{expenses. AC}"> <mx: horizontal. Axis> <mx: Category. Axis category. Field="Month"/> </mx: horizontal. Axis> <mx: series> <mx: Line. Series y. Field="Profit" form="curve" display. Name="Profit"/> <mx: Line. Series y. Field="Expenses" form="curve" display. Name="Expenses"/> <mx: Line. Series y. Field="Amount" form="curve" display. Name="Amount"/> </mx: series> </mx: Line. Chart> <mx: Legend data. Provider="{linechart}"/>

Pie Chart FLEX 3 <mx: Pie. Chart id="chart" height="100%" width="100%" padding. Right="5" padding. Left="5" show. Data. Tips="true" data. Provider="{medals. AC}" > <!---> <mx: series> <mx: Pie. Series name. Field="Country" label. Position="callout" field="Gold" label. Function="display. Gold" > <mx: filters> <mx: Array/> </mx: filters> </mx: Pie. Series> </mx: series> </mx: Pie. Chart> <mx: Legend data. Provider="{chart}"/>

FLEX 3 차트 꾸미기 - 그라데이션 <mx: Column. Series x. Field="Country" y. Field="Gold" display. Name="Gold" > <mx: fill> <mx: Linear. Gradient angle="90"> <mx: entries> <mx: Array> <mx: Gradient. Entry color="white" ratio="0. 0" alpha="1. 0" /> <mx: Gradient. Entry color="halo. Blue" ratio="1. 0" alpha="1. 0" /> </mx: Array> </mx: entries> </mx: Linear. Gradient> </mx: fill> </mx: Column. Series>

FLEX 3 차트 꾸미기 – 수치값 표현 label. Position=“위치값“ • Inside • none • outside