2010. 8. 6. 16:43 flex
[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>
'flex' 카테고리의 다른 글
| [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 |
| [03-D1] Flex3 API Document, Debug, ActionScript 3.0 개론 (0) | 2010.08.06 |
| [01-D1] Flex 개론, Flex 4 설치, 기본 Flex Application (0) | 2010.08.06 |
