2010. 8. 6. 18:00 flex
[07-D2] 기본 콤포넌트(Radio Button, CheckBox, Image, LinkButton, DateField)
[07-D2] 기본 콤포넌트(Radio Button, CheckBox, Image, LinkButton, DateField)
[01] 기본 콤포넌트(Radio Button, CheckBox, Image)
- Builder setting
. project type: Flex Project
. project name: control2
1. Radio Button
>>>>> control/src/radio.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="267" width="423">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function selectFruit():void{
if( radio1.selected == true ) txtFruit.text = radio1.label;
if( radio2.selected == true) txtFruit.text = radio2.label;
if( radio3.selected == true) txtFruit.text = radio3.label;
if( radio4.selected == true) txtFruit.text = radio4.label;
if( radio5.selected == true) txtFruit.text = radio5.label;
}
public function selectFood():void{
if( rdo1.selected == true ) txtFood.text = rdo1.label;
if( rdo2.selected == true) txtFood.text = rdo2.label;
if( rdo3.selected == true) txtFood.text = rdo3.label;
if( rdo4.selected == true) txtFood.text = rdo4.label;
if( rdo5.selected == true) txtFood.text = rdo5.label;
}
]]>
</mx:Script>
<mx:Canvas x="219" y="10" width="196" height="250">
<mx:RadioButton x="29" y="10" label="사과" id="radio1" fontSize="16" selected="true" groupName="fruit"/>
<mx:RadioButton x="29" y="40" label="배" id="radio2" fontSize="16" groupName="fruit"/>
<mx:RadioButton x="29" y="71" label="바나나" id="radio3" fontSize="16" groupName="fruit"/>
<mx:RadioButton x="29" y="99" label="자두" id="radio4" fontSize="16" groupName="fruit"/>
<mx:Button x="48.5" y="162" label="과일 선택" id="btnFruit" fontSize="16" click="selectFruit();"/>
<mx:RadioButton x="29" y="127" label="복숭아" fontSize="16" groupName="fruit" id="radio5"/>
<mx:TextInput x="18" y="198" fontSize="16" id="txtFruit"/>
</mx:Canvas>
<mx:Canvas x="11" y="10" width="200" height="250">
<mx:RadioButton x="10" y="10" label="감자탕" fontSize="16" id="rdo1" groupName="food"/>
<mx:RadioButton x="10" y="40" label="추어탕" fontSize="16" id="rdo2" groupName="food"/>
<mx:RadioButton x="10" y="70" label="매운탕" fontSize="16" id="rdo3" groupName="food"/>
<mx:RadioButton x="10" y="100" label="돈까스" fontSize="16" id="rdo4" groupName="food"/>
<mx:RadioButton x="10" y="130" label="김치찌게" fontSize="16" id="rdo5" groupName="food"/>
<mx:Button x="31" y="166" label="식사 메뉴 선택" fontSize="16" id="btnFood" click="selectFood();"/>
<mx:TextInput x="20" y="202" fontSize="16" id="txtFood"/>
</mx:Canvas>
</mx:Application>
2. RadioButtonGroup
- Radio 버튼들을 그룹지어 분류가능
>>>>> control/src/radioGroup.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="543" height="414">
<mx:Script>
<![CDATA[
public function evtDev(no:int):void{
if (no == 1){
txtDev.text = rda1.label;
}else if (no == 2){
txtDev.text = rda2.label;
}else if (no == 3){
txtDev.text = rda3.label;
}else if (no == 4){
txtDev.text = rda4.label;
}else if (no == 5){
txtDev.text = rda5.label;
}
}
public function evtLang(no:int):void{
if (no == 1){
txtLang.text = rdb1.label;
}else if (no == 2){
txtLang.text = rdb2.label;
}else if (no == 3){
txtLang.text = rdb3.label;
}else if (no == 4){
txtLang.text = rdb4.label;
}
}
]]>
</mx:Script>
<mx:Canvas x="10" y="10" width="520" height="394" backgroundColor="#FEFEFE">
<mx:RadioButtonGroup id="rg2"/>
<mx:RadioButton x="33.5" y="258" label="JAVA & JSP"
groupName="rg2" fontSize="18" click="evtLang(1)" id="rdb1"/>
<mx:RadioButton x="33.5" y="283" label="C# & ASP.NET"
groupName="rg2" fontSize="18" click="evtLang(2)" id="rdb2"/>
<mx:RadioButton x="33.5" y="311" label="PHP"
groupName="rg2" fontSize="18" click="evtLang(3)" id="rdb3"/>
<mx:Label x="11.5" y="219" text="2. 선호하는 개발 언어는?" fontSize="20"/>
<mx:Label x="10" y="10" text="1. 선호하는 개발자 유형은?" fontSize="20"/>
<mx:RadioButtonGroup id="rg1"/>
<mx:RadioButton x="32" y="49" label="Web 개발자"
groupName="rg1" fontSize="18" click="evtDev(1)" id="rda1" selected="true"/>
<mx:RadioButton x="32" y="76" label="네트워크 개발자"
groupName="rg1" fontSize="18" click="evtDev(2)" id="rda2"/>
<mx:RadioButton x="32" y="107" label="게임 개발자"
groupName="rg1" fontSize="18" click="evtDev(3)" id="rda3"/>
<mx:RadioButton x="32" y="136" label="OS 유틸리티 개발자"
groupName="rg1" fontSize="18" click="evtDev(4)" id="rda4"/>
<mx:TextInput x="289" y="19" width="218" fontSize="18" id="txtDev"/>
<mx:TextInput x="283.5" y="228" width="225" fontSize="18" id="txtLang"/>
<mx:RadioButton x="32" y="165" label="안드로이드 개발자" fontSize="18" id="rda5" groupName="rg1" click="evtDev(5)"/>
<mx:RadioButton x="33.5" y="338" label="Android SDK" id="rdb4" groupName="rg2" fontSize="18" click="evtLang(4)"/>
</mx:Canvas>
</mx:Application>
3. CheckBox
>>>>> control/src/checkBox.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="444" height="238">
<mx:Script>
<![CDATA[
import mx.controls.Alert;
public function check():void{
var str:String = '';
if(chk1.selected == true){
str = 'JAVA';
}
if(chk2.selected == true){
str = str + ', JSP';
}
if(chk3.selected == true){
str = str + ', MVC';
}
if(chk4.selected == true){
str = str + ', Ajax';
}
if(chk5.selected == true){
str = str + ', Flex';
}
txtTech.text = str;
}
]]>
</mx:Script>
<mx:Canvas x="10" y="10" width="425" height="215" backgroundColor="#FFFFFF">
<mx:Label x="10" y="10" text="사용 가능한 기술을 선택해주세요." fontSize="20"/>
<mx:CheckBox x="20" y="58" label="JAVA" fontSize="18"
id="chk1" selected="true"/>
<mx:Button x="20" y="121" label="선택 입력" fontSize="18"
height="36" id="Button1" click='check();'/>
<mx:CheckBox x="97" y="58" label="JSP" fontSize="18" id="chk2"/>
<mx:CheckBox x="161" y="58" label="MVC" fontSize="18" id="chk3"/>
<mx:CheckBox x="234" y="58" label="Ajax" fontSize="18" id="chk4"/>
<mx:CheckBox x="307" y="58" label="Flex" fontSize="18" id="chk5"/>
<mx:TextInput x="136" y="123" width="278" fontSize="18" id="txtTech"/>
<mx:TextInput x="20" y="163" width="395" height="42" fontSize="18" text="기타: "/>
</mx:Canvas>
</mx:Application>
[과제] Oracle, jQuery, XML을 추가할 것.
4. Image
- 링크: 'HelloFlex/src/images' 폴더를 만들고 이미지를 저장합니다.
※ 만약 'bin-debug'폴더에 images 폴더가 복사가 안되어 있으면 수동으로
직접 'HelloFlex/bin-debug/images' 폴더를 생성합니다.
- Embed: source="@Embed(source='./images/apple002.jpg')", 이미지 자원을 SWF 파일에 Embed합니다.
>>>>> control/src/image.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<!-- web상에서 동적으로 변경되는 이미지를 출력할 경우 -->
<mx:Image x="44" y="25" width="693" height="158" buttonMode="true"
click="mx.controls.Alert.show('이미지를 클릭했습니다.');" id="img1">
<mx:source>http://www.adobe.com/ubi/globalnav/include/adobe-lq.png</mx:source>
</mx:Image>
<!-- swf파일과 함께 인식이 될 수 있는 경로에 파일이 있어야 함,
swf배포시 이미지도 같이 배포 해야함,
swf파일이 해상도가 높은 여러 이미지를 여러 상황에서 다양하게
호출할 필요가 있는 경우, swf에 이미지가 고정되어 있지 않은 경우
-->
<mx:Image x="45" y="191" width="368" height="222" id="img2"
source="./images/r12.jpg"/>
<!-- swf파일 안에 관련 리소스(이미지등)가 모두 포함이 됨,
이미지가 swf파일안에서 항상쓰여 고정할 필요가 있는 경우
-->
<mx:Image x="401" y="191" width="336" height="222" id="img3"
source="@Embed(source='./images/r4.jpg')"/>
</mx:Application>
5. LinkButton
>>>>> control/src/linkButton.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
public function goUrl(url:String):void{
var request:URLRequest = new URLRequest(url);
navigateToURL(request, "_blank"); // 새창 열기
}
]]>
</mx:Script>
<mx:Canvas x="10" y="10" width="343" height="118" backgroundColor="#D7F54D">
<mx:LinkButton x="10" y="10" label="http://www.yahoo.co.kr" width="323" fontSize="12" textAlign="left" id="lbtUrl1"
click="goUrl('http://www.yahoo.co.kr');" cornerRadius="0"/>
<mx:LinkButton x="10" y="42" label="http://www.kma.go.kr" width="323" fontSize="12" textAlign="left" id="lbtUrl2"
click="goUrl('http://www.kma.go.kr');" cornerRadius="0"/>
<mx:LinkButton x="10" y="74" label="http://www.kangcom.com" width="323" fontSize="12" textAlign="left" id="lbtUrl3"
click="goUrl('http://www.kangcom.co.kr');" cornerRadius="0"/>
</mx:Canvas>
</mx:Application>
6. DateField
>>>>> src/dateField.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="169" width="505">
<mx:Script>
<![CDATA[
public function OnChange():void{
txtDate.text = String(startDate.selectedDate.fullYear) + "/" + String(startDate.selectedDate.month+1)+ "/" + String(startDate.selectedDate.date);
}
public function OnChangeEnd():void{
txtDate.text = txtDate.text + " ~ " + String(endDate.selectedDate.fullYear) + "/" + String(startDate.selectedDate.month+1)+ "/" + String(startDate.selectedDate.date);
}
]]>
</mx:Script>
<mx:Canvas x="10" y="10" width="485" height="150" backgroundColor="#FFFFFF">
<mx:DateField x="111" y="20" id="startDate"
change="OnChange();" fontSize="18" showToday="true" formatString="YYYY/MM/DD"
/>
<mx:Text x="126" y="72" width="337" fontSize="18" id="txtDate" height="41"/>
<mx:Label x="10" y="22" text="시작 날짜: " fontSize="18"/>
<mx:Label x="247" y="22" text="종료 날짜:" fontSize="18"/>
<mx:DateField x="335" y="20" id="endDate"
change="OnChangeEnd();" fontSize="18" showToday="true" formatString="YYYY/MM/DD"/>
<mx:Label x="10" y="72" text="선택된 날짜: " fontSize="18"/>
</mx:Canvas>
</mx:Application>
'flex' 카테고리의 다른 글
| [09-D3] Container & Component 배치 (0) | 2010.08.06 |
|---|---|
| [08-D3] 기본 콤포넌트(ListBox, ComboBox, Panel, Form, ControlBar.....) (0) | 2010.08.06 |
| [06-D2] Class, MXML, Array 실습 (0) | 2010.08.06 |
| [05-D2] static, interface, extends (0) | 2010.08.06 |
| [04-D2] Package, Class, constructor(생성자), Array(배열) (0) | 2010.08.06 |
