[02-D1] 기본 콤포넌트(mx:Label, mx:TextArea, mx:TextInput, mx:Button)

[02-D1] 기본 콤포넌트(mx:Label, mx:TextArea, mx:TextInput, mx:Button)

[01] 기본 콤포넌트(mx:Label, mx:TextArea, mx:TextInput, mx:Button)

     - mx:Label: 단순한 하나의 문장을 출력합니다.

       HTML: <SPAN>, <DIV>태그와 비슷

     - mx:Text : 여러줄의 문자열을 출력하는 용도로 사용됩니다.

                 입력 기능 없습니다.

       HTML: <SPAN>, <DIV>태그와 비슷

     - mx:TextArea: 

       UIComponent에 스크롤 기능을 추가한 ScrollControlBase 콤포넌트의 하위 콤포넌트로 

       HTML: <TEXTAREA> 태그와 같은 역활을 합니다.

     - mx:TextInput: UIComponent를 확장한 콤포넌트로 한줄의 문장만 입력 받을 수 있습니다.

       HTML: <INPUT TYPE='TEXT'> 태그와 같은 역활을 합니다.

     - eclipse setting

       project type: Flex Project

               name: control

1. 사칙 연산, 수학 함수의 사용, MXML Application 생성

   - mx:Label, mx:TextArea, mx:TextInput, mx:Button

>>>>> src/calc.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="180" width="401">

    <mx:Script>

        <![CDATA[

        public function add():void{

            // var 변수명:변수 타입

            var a:Number, b:Number, c:Number;

    

            // X (Number)txtInputB.text

            a = Number(txtInputA.text);  // 문자열을 숫자로 형변환

            b = Number(txtInputB.text);  // 문자열을 숫자로 형변환

            c = a + b;

            

            txtResult.text = "입력한 수의 합은 " + c + "입니다.";

        }           

        

        public function sub():void{

            var a:Number, b:Number, c:Number;

    

            a = Number(txtInputA.text);

            b = Number(txtInputB.text);

            c = a - b;

            

            // String(c): 문자열 형변환

            txtResult.text = "입력한 수의 차는 " + String(c) + "입니다.";

        }           

        public function mul():void{

            var a:Number, b:Number, c:Number;

    

            a = Number(txtInputA.text);

            b = Number(txtInputB.text);

            c = a * b;

            

            txtResult.text = "입력한 수의 곱은 " + String(c) + "입니다.";

        }           

        public function div():void{

            var a:Number, b:Number, c:Number;

    

            a = Number(txtInputA.text);

            b = Number(txtInputB.text);

            // 소수 첫째자리 반올림

            // c = Math.round(a / b);

             

            // 소수 둘째자리 반올림, 정수/정수 = 정수 또는 실수

            c = Math.round((a / b)*10)/10; 

            

            txtResult.text = "입력한 수를 나눈 몫은  " + String(c) + "입니다.";

        }

                   

        public function nam():void{

            var a:Number, b:Number, c:Number;

    

            a = Number(txtInputA.text);

            b = Number(txtInputB.text);

            c = Math.round(a % b); 

            

            txtResult.text = "입력한 수의 나머지는 " + String(c) + "입니다.";

        }

        

        public function avg():void{

            var a:Number, b:Number, c:Number;

    

            a = Number(txtInputA.text);

            b = Number(txtInputB.text);

            c = Math.round((a+b)/2); 

            

            txtResult.text = "입력한 수의 평균은  " + String(c) + "입니다.";

        }

        ]]>

    </mx:Script>

    <mx:Button x="38" y="62" label="+" fontSize="12" id="btnAdd" click="add();"/>

    <mx:Button x="134" y="62" label="*" fontSize="12" id="btnMul" click="mul();"/>

    <mx:Button x="182" y="62" label="/" fontSize="12" id="btnDiv" click="div();"/>

    <mx:Button x="86" y="62" label="-" fontSize="12" id="btnSub" click="sub();"/>

    <mx:Button x="230" y="62" label="나머 지" id="btnNa" fontSize="12" click="nam();"/>

    <mx:TextInput x="127" y="19" width="82" fontSize="20" id="txtInputA"/>

    <mx:TextInput x="217" y="19" width="82" fontSize="20" id="txtInputB"/>

    <mx:TextArea x="38" y="103" width="321" height="46" fontSize="20" id="txtResult"/>

    <mx:Button x="303" y="62" label="평 균" fontSize="12" id="btnAvg" click="avg();"/>

</mx:Application>

2. if~else의 사용

>>>>> src/math.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" height="224" width="391">

    <mx:Script>

        <![CDATA[

        public function check():void{

            var a:int;

            var sum:int = 0;

            var i:int;

            var str:String = "";

                        

            a = int(txtInput.text);      // 정수로 형변환

            if( a % 2 == 0){             // 짝수일 경우

                for(i=1; i<=a; i++){

                    sum = sum + i;       // 합

                } 

                str = "입력한 수 " + String(a) + "는 짝수입니다.\n";

            }else{                       // 홀수일 경우

                for(i=1; i<=a; i++){

                    sum = sum + i;       // 합

                } 

                str = "입력한 수 " + String(a) + "는 홀수입니다.\n";

            }

str = str + "1부터 " + String(a) + "까지의 합 은 " + String(sum) + "입니다.";

txtResult.text = str;

        }           

        ]]>

    </mx:Script>

    <mx:Button x="165.5" y="82" label="Click" fontSize="20" id="btnClick" click="check();"/>

    <mx:TextInput x="79" y="31" width="233" fontSize="20" id="txtInput"/>

    <mx:TextArea x="19" y="125" width="362" height="78" fontSize="20" id="txtResult"/>

</mx:Application>

3. 문자열 비교의 사용

>>>>> src/ifelse.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="482" height="160">

<mx:Style> <!-- CSS 적용 -->

.alertTitle {

fontSize: 16;

}

.alertMessage {

fontSize: 16;

}

Alert {

title-style-name: "alertTitle";

message-style-name: "alertMessage";

}

</mx:Style>

<mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            

            public function showGrade():void{

                var grade:String = txtInput.text;

                if( "A" == grade )  Alert.show("당신의 점수는 100입니다.");

                else if( "B" == grade ) Alert.show("당신의 점수는 80입니다.");

                else if( "C" == grade ) Alert.show("당신의 점수는 60입니다.");

                else if( "D" == grade ) Alert.show("당신의 점수는 40입니다.");

                else if( "F" == grade ) Alert.show("당신의 점수는 0입니다.");

                else Alert.show("다시 입력해주세요.");

            }

        ]]>

    </mx:Script>

    <mx:TextInput x="23" y="53" id="txtInput" width="255"  fontSize="20"/>

    <mx:Label x="23" y="24" text="당신의 등급(A, B, C, D, F)을 입력해주세요 :" fontFamily="Arial" fontSize="20" color="#FDFDFD"/>

    <mx:Button x="296" y="53" label="Click!" width="98" id="btnClick" click="showGrade();" fontSize="20"/>

</mx:Application>

4. switch

   -  문자열 비교 가능

>>>>> src/switchExam.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="517" height="158">

<mx:Style> <!-- CSS 적용 -->

.alertTitle {

fontSize: 16;

}

.alertMessage {

fontSize: 16;

}

Alert {

title-style-name: "alertTitle";

message-style-name: "alertMessage";

}

</mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            

            public function showGrade():void{

                var grade:String = txtInput.text;

                

                switch(grade){

                    case "AA":  // 문자열 비교 가능, 자바는 불가능

                        Alert.show("당신의 점수는 100입니다.");  

                        break;

                    case "BA":

                        Alert.show("당신의 점수는 80입니다.");                       

                        break;

                    case "CA":

                        Alert.show("당신의 점수는 60입니다.");                       

                        break;

                    case "DA":

                        Alert.show("당신의 점수는 40입니다.");                       

                        break;

                    case "FA":

                        Alert.show("당신의 점수는 0입니다.");                        

                        break;

                    default:

                        Alert.show("디시 입력해주세요.");

                        break;

                }

            }

        ]]>

    </mx:Script>

    <mx:TextInput x="23" y="53" id="txtInput" width="127"  fontSize="20"/>

    <mx:Label x="23" y="24" text="당신의 등급(AA, BA, CA, DA, FA)을 입력해주세요 :" fontFamily="Arial" fontSize="20"/>

    <mx:Button x="158" y="53" label="Click!" width="98" id="btnClick" click="showGrade();" fontSize="20"/>

</mx:Application>

5. while

>>>>> src/whileExam.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="390" height="174">

<mx:Style> <!-- CSS 적용 -->

.alertTitle {

fontSize: 16;

}

.alertMessage {

fontSize: 16;

}

Alert {

title-style-name: "alertTitle";

message-style-name: "alertMessage";

}

</mx:Style>

    <mx:Script>

        <![CDATA[

            import mx.controls.Alert;

            

            public function calc():void{

                var x:int = int(txtInput.text);

                var i:int = 1;

                var sum:int = 0;

                

                while( i <= x ){

                    sum = sum + i;

                    i++;

                }

                Alert.show("1부터 " + String(x) + "까지의 합은 " + String(sum) + "입니다.");

            }

        ]]>

    </mx:Script>

    <mx:TextInput x="23" y="53" id="txtInput" width="127"  fontSize="20"/>

    <mx:Label x="23" y="24" text="1부터 더할 숫자를 입력해주세요." fontFamily="Arial" fontSize="20"/>

    <mx:Button x="158" y="53" label="Click!" width="98" id="btnClick" click="calc();" fontSize="20"/>

</mx:Application>