[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 &amp; JSP" 

            groupName="rg2" fontSize="18" click="evtLang(1)" id="rdb1"/>

        <mx:RadioButton x="33.5" y="283" label="C# &amp; 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>