이 계산 기 는 두 부분 으로 구성 되 어 있 습 니 다.하나의 프론트 인터페이스의 MXML 파일,하나의 백 스테이지 컨트롤 러 의 AS 파일 입 니 다.mxml 파일 은 계산기 의 인터페이스 를 표시 하고 as 파일 은 사용자 가 보 낸 정 보 를 처리 하 며 결 과 를 계산 합 니 다.이 튜 토리 얼 에서 우 리 는 주로 학습:[list]The Application class The Panel container The Label element The Grid container The Button element[/list]ActionScript 의 주요 학습 내용:[list]A class definition Properties Methods The if-else and switch-case control structures[/list]===============================================calculator.mxml 로 저 장 된 빈 mxml 파일 입 니 다.표준 에 맞 는 flex 파일 은 MX 라 이브 러 리 xmlns:mx="http://www.macromedia.com/2003/mxml따라서 calculator.mxml 에 다음 코드 를 기록 합 니 다.따라서 우 리 는 먼저 Panel 패 널 을 만 들 고 tittle 속성 을 설정 해 야 합 니 다.Calculator 는 응용 프로그램 영역 에 추가 합 니 다
======================계산기 디 스 플레이 를 만 듭 니 다.집중 속성 사용:[list]id:Label 의 표지,Flash 의 Instance Namewidth:Label 의 너비,단위:픽 셀 text:Label 의 내용 textAlign:정렬 방식:left|center[/list]는 Panel 영역 에 다음 코드 를 추가 합 니 다
<mx:Panel title="Calculator">
</mx:Panel>
주의:여기 서 우 리 는 Label 의 text 속성 을 설정 하지 않 았 습 니 다.우 리 는 나중에 배경 프로그램 을 통 해 라벨 라벨 의 내용 을 동적 으로 표시 해 야 하기 때문에=======================전체 flex 프로그램의 다양한 요 소 를 찾 을 수 있 습 니 다.Grid 라벨 은 세 가지 요소 로 구성 되 어 있 습 니 다.[list]Grid:HTML 과 유사 한태그 GridRow:HTML 과 유사 한태그 GridItem:HTML 과 유사 한
태그[/list]는 여기에 5 줄 4 열의 Grid 를 추가 합 니 다.그 중에서 첫 줄 과 마지막 행동 3 열 을 추가 합 니 다.코드 는 다음 과 같 습 니 다
Grid 가 추 가 된 후의 효 과 는:=======================계산기 버튼 을 추가 합 니 다.여기 서 우 리 는 단추 의 세 가지 속성 을 사용 할 것 입 니 다.[list]label:단추 에 표 시 된 텍스트 width:단추 너비 click:단 추 를 누 를 때 응답 하 는 이벤트[/list]는 Flex 에서 모든 button 컨트롤 에 같은 형식 을 가지 고 있 습 니 다.우리 위 에서 만 든 18 개의 GridItem 에 1,2,3 을 순서대로 추가 합 니 다.4,5,6,7,8,9,0,.,+,-,*,/,=,Clear,C/E 이 버튼 들 은 다음 과 같다.Row 1
완료 후 파일 을 저장 하고 button 을 추가 한 효 과 는 다음 과 같다===================================================================Calculator Controller.as 로 저장 하기 위해 Calculator Controller 의 클래스 를 만 듭 니 다
public var calcView:Object;
private var reg1:String="";
private var reg2:String="";
private var result:Number;
private var currentRegister:String="reg1";
private var operation:String="none";
private var r1:Number;
private var r2:Number;
숫자 에 들 어 가 는 기능 addNumber()
public function doOperation():Void
{
r1=Number(reg1);
r2=Number(reg2);
switch (operation)
{
case "add":
result=r1+r2;
resetAfterOp();
break;
case "subtract":
result=r1-r2;
resetAfterOp();
break;
case "multiply":
result=r1*r2;
resetAfterOp();
break;
case "divide":
result=r1/r2;
resetAfterOp();
break;
default:
//do nothing
}
}
"C/E"의 기능 clearEntry()
public function addNumber(n:String):Void
{
if (operation=="none" && currentRegister=="reg2")
{
reg1="";
setCurrentRegister();
}
this[currentRegister]+=n;
setDisplay(currentRegister);
}
"Cle."ar"의 기능 clearAll()
public function clearEntry():Void
{
this[currentRegister]="";
setDisplay(currentRegister);
}
"더하기,빼 기,곱 하기,나 누 기"의 기능 set Operation()
public function clearAll():Void
{
reg1="";
reg2="";
setCurrentRegister();
setOperation("none");
setDisplay(currentRegister);
}
디 스 플레이 의 기능 set Display()
public function setOperation(operation:String):Void
{
this.operation=operation;
setCurrentRegister();
}
기타
private function setDisplay(register:String):Void
{
calcView.calcDisplay.text = this[register];
}
=======================계산기 버튼 을 추가 합 니 다.여기 서 우 리 는 단추 의 세 가지 속성 을 사용 할 것 입 니 다.[list]label:단추 에 표 시 된 텍스트 width:단추 너비 click:단 추 를 누 를 때 응답 하 는 이벤트[/list]는 Flex 에서 모든 button 컨트롤 에 같은 형식 을 가지 고 있 습 니 다.
===================================================================Calculator Controller.as 로 저장 하기 위해 Calculator Controller 의 클래스 를 만 듭 니 다