별님 블로그

GUI 에 계산기 만들기 완성하기.

형태 만들기 및 간단한 작동원리는 아래 주소 참조.

http://blog.naver.com/pandekten5/220776972561 

00. 코딩하고 실행 해보자.

01. 계산기 GUI창이 뜬다.

02. 임의의 숫자버튼(여기서는 2)을 눌러서 표기되는것을 확인하자.

03. 3/2 를 누르고 결과값이 맞게 출력되는지 확인하자.

    또한, 아래 3이 저장되어서 divide 오퍼레이션을 써서 된것을 확인할 수 있다.

※. 코드

import java.awt.BorderLayout;

import java.awt.FlowLayout;

import java.awt.Font;

import java.awt.GridLayout;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JLabel;

import javax.swing.JPanel;

import javax.swing.JTextField;

class MyFrame extends JFrame implements ActionListener

{

private JPanel displayPanel;

private JPanel buttonPanel;

private JPanel debugPanel;

private JTextField display;

private JButton[] buttons; // 0 ~ 9

private JButton btnPlus;

private JButton btnMinus;

private JButton btnProduct;

private JButton btnDivide;

private JButton btnEqual;

private JButton btnCE;

private JLabel prev;

private JLabel operator;

private JLabel flag;

public MyFrame()

{

this.setSize(300, 400);

this.setTitle("GUI TEST");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// Programming Here

this.setLayout(new BorderLayout());

/*

 * 3개의 panel 객체 만들고 각자 layout 설정

 */

displayPanel = new JPanel();

buttonPanel = new JPanel();

debugPanel = new JPanel();

displayPanel.setLayout(new FlowLayout());

buttonPanel.setLayout(new GridLayout(0,4, 5, 5));

debugPanel.setLayout(new FlowLayout());

/*

 * displayPanel의 component를 만들어서 붙이기

 */

display = new JTextField(11);

display.setText("0");

display.setHorizontalAlignment(JTextField.RIGHT);

Font font = new Font("Serif", Font.BOLD, 30);

display.setFont(font);

displayPanel.add(display);

/*

 * buttonPanel에 component 만들고, 붙이기

 */

Font fontBtn = new Font("Serif", Font.BOLD, 20);

buttons = new JButton[10];

// 실제 버튼 객체 생성

for(int i=0; i<buttons.length; i++)

{

//buttons[i] = new JButton("" + i);

buttons[i] = new JButton(Integer.toString(i));

buttons[i].setFont(fontBtn);

buttons[i].addActionListener(this);

}

btnPlus = new JButton("+");

btnMinus = new JButton("-");

btnProduct = new JButton("*");

btnDivide = new JButton("/");

btnEqual = new JButton("=");

btnCE = new JButton("CE");

btnPlus.addActionListener(this);

btnMinus.addActionListener(this);

btnProduct.addActionListener(this);

btnDivide.addActionListener(this);

btnEqual.addActionListener(this);

btnCE.addActionListener(this);

// 1 2 3 +

// 4 5 6 -

// 7 8 9 *

// 0 / = CE

buttonPanel.add(buttons[1]);

buttonPanel.add(buttons[2]);

buttonPanel.add(buttons[3]);

buttonPanel.add(btnPlus);

buttonPanel.add(buttons[4]);

buttonPanel.add(buttons[5]);

buttonPanel.add(buttons[6]);

buttonPanel.add(btnMinus);

buttonPanel.add(buttons[7]);

buttonPanel.add(buttons[8]);

buttonPanel.add(buttons[9]);

buttonPanel.add(btnProduct);

buttonPanel.add(buttons[0]);

buttonPanel.add(btnDivide);

buttonPanel.add(btnCE);

buttonPanel.add(btnEqual);

/*

 * debugPanel에 debugMsg, btnDebug 만들어서 붙이기

 */

prev = new JLabel("");

operator = new JLabel("");

flag = new JLabel("");

debugPanel.add( new JLabel("PREV:"));

debugPanel.add(prev);

debugPanel.add( new JLabel("OPERATOR:"));

debugPanel.add(operator);

debugPanel.add( new JLabel("FLAG:"));

debugPanel.add(flag);

/*

 * frame에다가 panel 붙이기

 */

this.add(displayPanel, BorderLayout.NORTH);

this.add(buttonPanel, BorderLayout.CENTER);

this.add(debugPanel, BorderLayout.SOUTH);

//debugPanel.setVisible(false);

this.setVisible(true);

}

@Override

public void actionPerformed(ActionEvent e) {

for(int i=0; i<buttons.length; i++)

{

if(e.getSource() == buttons[i])

{

if(display.getText().equals("0"))

{

display.setText(""+i);

// display.setText(Integer.toString(i));

}else

{

if(operator.getText().equals(""))

{

display.setText(  display.getText() + i);

}else

{

if(flag.getText().equals(""))

{

display.setText(""+i);

flag.setText("#");

}else

{

display.setText(  display.getText() + i);

}

}

}

}

}

if(e.getSource() == btnEqual)

{

double op1, op2, result;

op1 = Double.parseDouble(prev.getText());  //문자->숫자(double)

op2 = Double.parseDouble(display.getText());

if(operator.getText().equals("+"))

{

result = op1 + op2;

display.setText("" + result);

// display.setText( String.valueOf(result));

}

if(operator.getText().equals("-"))

{

result = op1 - op2;

display.setText("" + result);

// display.setText( String.valueOf(result));

}

if(operator.getText().equals("*"))

{

result = op1 * op2;

display.setText("" + result);

// display.setText( String.valueOf(result));

}

if(operator.getText().equals("/"))

{

result = op1 / op2;

display.setText("" + result);

// display.setText( String.valueOf(result));

}

}

if(e.getSource() == btnPlus)

{

prev.setText( display.getText() );

operator.setText("+");

flag.setText("");

}

if(e.getSource() == btnMinus)

{

prev.setText( display.getText() );

operator.setText("-");

flag.setText("");

}

if(e.getSource() == btnProduct)

{

prev.setText( display.getText() );

operator.setText("*");

flag.setText("");

}

if(e.getSource() == btnDivide)

{

prev.setText( display.getText() );

operator.setText("/");

flag.setText("");

}

if(e.getSource() == btnCE)

{

display.setText("0");

prev.setText("");

operator.setText("");

flag.setText("");

}

}

}

public class Test {

public static void main(String[] args) {

MyFrame frame = new MyFrame();

}

}

계산기 만들기를 이어서 해보겠다.

이전 포스팅에서 GUI형태의 계산기 모양을 만들었으니 

이벤트처리해서 만든 계산기를 작동시켜 보겠다.

00_1. ActionListener를 확장시켜 사용한다.

00_2. Debug버튼을 눌렀을 때 작동 시킬 것이므로 다음과같이 버튼에 연결시켜준다.

00_3. 마우스오른쪽버튼'-> 'Source'-> 'Override and Implement Methods' 로 actionPerformed메소드를 오버라이드 시킨다.

01_1. 안에다 코딩을 해서 먼저 버튼을 눌렀을때 텍스트를 바꿔주도록 해보자.

01_2. 바꿔지는 것을 확인할 수 있다.

02_1. 버튼을 누를때마다 바뀌도록 해보자. 객체를 비교할때는 'void equals();' 임을 기억하자.

02_2. 계속 바뀌는 것을 확인할 수 있다.

03_1. 응용해서 버튼을 누르면 1로 바뀌게 해보자. 실제로는 button1에 연결시켜서 사용하자.

03_2. 1이 입력됨을 확인할 수 있다.

03_3. 계속 누르면 1이 계속 쓰여짐을 확인할 수 있다.

※. 코드

import java.awt.BorderLayout;

import java.awt.FlowLayout;

import java.awt.Font;

import java.awt.GridLayout;

import java.awt.event.ActionEvent;

import java.awt.event.ActionListener;

import javax.swing.JButton;

import javax.swing.JFrame;

import javax.swing.JLabel;

import javax.swing.JPanel;

import javax.swing.JTextField;

class MyFrame extends JFrame implements ActionListener {  // components는 전부 밖에서 선언해줘야 안에서 사용할 수 있으므로 좋음.

JPanel displayPanel;

JPanel buttonPanel;

JPanel debugPanel;

JTextField display;

JButton[] buttons;  // 0 ~ 9 까지 10개의 버튼을 배열로 써서 만들거임.

JButton btnPlus;

JButton btnMinus;

JButton btnProduct;  // Multiply 

JButton btnDivide;

JButton btnEqual;

JButton btnCE;

JButton btnDebug;

JLabel debugMsg;

public MyFrame()

{

this.setSize(300,400);

this.setTitle("GUI Test");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

this.setLayout( new BorderLayout() );

// 3개의 panel 객체를 만들고 각자 layout 을 설정해보겠다.

displayPanel = new JPanel();

buttonPanel = new JPanel();

debugPanel = new JPanel();

displayPanel.setLayout( new FlowLayout() );

buttonPanel.setLayout( new GridLayout(0, 4, 5, 5) );

debugPanel.setLayout(new FlowLayout());

/* display 관련 */

// display 에 있는 panel에 component를 만들어서 붙이겠다.

display = new JTextField(11);  // 글자수가 '11자'가 들어가게 하겠다.

display.setText("0");  // 초기 계산기 화면을 0으로 써놓겠다.

display.setHorizontalAlignment(JTextField.RIGHT);  // field 내 글씨를 오른쪽정렬.

Font font = new Font("Serif", Font.BOLD, 30);  // ※ Serif ; 삐침이 나와있는 글씨체. san serif ; non 삐침.

display.setFont(font);

// displayPanel 에다가 display component를 붙인다.

displayPanel.add(display);

/* 버튼 관련 */

Font fontBtn = new Font("Serif", Font.BOLD, 30);  // 버튼에도 폰트를 주고싶어서 객체생성.

// buttonPanel 에 component 만들고 붙이기.

buttons = new JButton[10];  // array 메모리만 만들어진것이다.

// 실제 버튼 객체 생성하기.

for (int i = 0 ; i < buttons.length ; i++)

{

//buttons[i] = new JButton(""+i);  // i 를 String 값으로 받고싶다.

buttons[i] = new JButton(Integer.toString(i));  // i 를 String 값으로 받고싶다.

buttons[i].setFont(fontBtn);  // 버튼의 폰트에 대한 지정

}

btnPlus = new JButton("+");

btnMinus = new JButton("-");

btnProduct = new JButton("*");

btnDivide = new JButton("/");

btnEqual = new JButton("=");

btnCE = new JButton("CE");

// 1 2 3 +

// 4 5 6 -

// 7 8 9 *

// 0 / = CE      의 형태로 만들고 싶다.

buttonPanel.add(buttons[1]);

buttonPanel.add(buttons[2]);

buttonPanel.add(buttons[3]);

buttonPanel.add(btnPlus);

buttonPanel.add(buttons[4]);

buttonPanel.add(buttons[5]);

buttonPanel.add(buttons[6]);

buttonPanel.add(btnMinus);

buttonPanel.add(buttons[7]);

buttonPanel.add(buttons[8]);

buttonPanel.add(buttons[9]);

buttonPanel.add(btnProduct);

buttonPanel.add(buttons[0]);

buttonPanel.add(btnDivide);

buttonPanel.add(btnEqual);

buttonPanel.add(btnCE);

//debugPanel 에 debugMsg 와 btnDebug 를 만들어서 붙이겠다.

debugMsg = new JLabel("Start Debug");

debugMsg.setToolTipText("Hello World");  // 마우스를 debugMsg 위에 올려놓으면 Text 가 말풍선 형태로 출력.

btnDebug = new JButton("Debug Button");

btnDebug.addActionListener(this);  // 리스너를 이벤트소스에 등록한다. (항상 이 형식으로 사용하면 된다.)

debugPanel.add(debugMsg);

debugPanel.add(btnDebug);

//btnDebug.setEnabled(false);

// frame에다가 panel들 붙이기.

this.add(displayPanel, BorderLayout.NORTH);

this.add(buttonPanel, BorderLayout.CENTER);

this.add(debugPanel, BorderLayout.SOUTH);

//debugPanel.setVisible(false);

String msg = debugMsg.getText();

System.out.println(msg);

//this.pack();

this.setVisible(true);

}// MyFrame Method

@Override

public void actionPerformed(ActionEvent e) {

if(e.getSource() == btnDebug)

{

//System.out.println("btnDebug is Clicked.!");

//debugMsg.setText("Hello World.");

if(debugMsg.getText().equals("Start Debug"))  // 객체들의 비교는 == 가 아니라 .equal 객체(String)와 객체를 비교할때.

{

debugMsg.setText("Hello World.");

}else{

debugMsg.setText("Start Debug");

}

}

//1번 버튼이라고 가정하고 0을 1로 바꿔보자.(display 값이 0이기 때문에)

// 현재 display 값이 '0'이면

// display.setText("1")

// else

// 현재 디스플레이값 display.getText() + "1"

if (display.getText().equals("0"))

{

display.setText("1");

}else

{

display.setText( display.getText() + "1");

}

}

}// MyFrame Class

public class Test {

public static void main(String[] args) {

MyFrame frame = new MyFrame();

}// main

}// Main Class

GUI형태의 계산기를 만들어보겠다. 

먼저, 형태를 만들고 이벤트를 사용하여 구동시키도록 하겠다.

00_1. 아래와같이 객체를 생성하고 그위에 판넬을 깔아주고 판넬을 각각 알맞게 레이아웃을 지정해준다. 

그 레이아웃 위에 component들을 부착(add)시킨후 실행시켜보자.

00_2. 계산기 모양의 GUI창이 나타난다.

01. 계산기 GUI창 하단에 디버그 하는곳은 안보이도록 'debugPanel.setVisivle(false);' 로 안보이게 가려준다.

    하지만, 가려주기만 했지 구동은 잘 됨을 확인하기위해 'System.out.printlk();' 을 써서 출력을 해보자.

02. 버튼을 활성/비활성화 시킬 수 도있다. 'void setEnable(ture/false);' 를 사용하여 활성/비활성화를 시도해보자.

레이아웃 중 그리드/격자레이아웃(GridLayout) 사용 방법에 대해 알아보겠음. 

ㅁ. Layout 은 다음과 같이 나뉘고 각 특성을 같으므로 적절하게 사용하면 된다. 

FlowLayout 은 가운데를 중심으로 배치.

BorderLayout 은 가운데를 중심으로 동서남북으로 배치.

GridLayout (행, 열); - 0을 기입하면 auto.!!! 

  ; (예, gridLayout(0,2) 로 만들면 2열이 넘어가는 데이터가 3열로 오면 자동으로 다음행1열로 간다. )

BoxLayout ; 한칸(행)에 하나씩 차지하도록 하는 배치.

ㅁ. 판넬로 주로 쓰이기 때문에 판넬을 만들고 default레이아웃을 생각하지말고 Layout을 만들어준다고 생각하면됨. 

00. 격자레이아웃(GridLayout) 은 격자처럼 들어가게 하는 레이아웃이다.

01. 객체생성시 new GridLayout(행, 열, 수평gap, 수직gap) 임이 적용됨을 확인할 수 있다.

※. 코드

import java.awt.GridLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

class MyFrame extends JFrame{

public MyFrame()

{

this.setSize(500,300);

this.setTitle("GUI Test");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

// this.setLayout( new GridLayout(0,3) );  // 자동행 + 3열 짜리 격자레이아웃

this.setLayout( new GridLayout(0, 3, 5, 20) );  // 행, 열, 수평gap, 수직gap

JButton button1 = new JButton("Button1");

JButton button2 = new JButton("Button2");

JButton button3 = new JButton("Button3");

JButton button4 = new JButton("Button4");

JButton button5 = new JButton("Button5");

this.add(button1);

this.add(button2);

this.add(button3);

this.add(button4);

this.add(button5);

this.pack();

this.setVisible(true);

}

}// MyFrame Class

public class Test {

public static void main(String[] args) {

MyFrame frame = new MyFrame();

}// main

}// Main Class

레이아웃 중 보더레이아웃(BorderLayout) 사용 방법에 대해 알아보겠음. 

ㅁ. Layout 은 다음과 같이 나뉘고 각 특성을 같으므로 적절하게 사용하면 된다. 

FlowLayout 은 가운데를 중심으로 배치.

BorderLayout 은 가운데를 중심으로 동서남북으로 배치.

GridLayout (행, 열); - 0을 기입하면 auto.!!! 

  ; (예, gridLayout(0,2) 로 만들면 2열이 넘어가는 데이터가 3열로 오면 자동으로 다음행1열로 간다. )

BoxLayout ; 한칸(행)에 하나씩 차지하도록 하는 배치.

ㅁ. 판넬로 주로 쓰이기 때문에 판넬을 만들고 default레이아웃을 생각하지말고 Layout을 만들어준다고 생각하면됨. 

00. 보더레이아웃(borderlayout)은 다음과 같이 구동시켰을 때, 중심으로 잡혀서 동서남북으로 나뉘어진다.

01. 센터와 동서남북으로 각 버튼을 배치시켜 보았다.

※. 코드

import java.awt.BorderLayout;

import javax.swing.JButton;

import javax.swing.JFrame;

class MyFrame extends JFrame{

public MyFrame()

{

this.setSize(500,300);

this.setTitle("GUI Test");

this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

//BorderLayout 으로 setting 하기

//BorderLayout layout = new BorderLayout();

//this.setLayout(layout);

this.setLayout( new BorderLayout() );

JButton button1 = new JButton("Button1");

JButton button2 = new JButton("Button2");

JButton button3 = new JButton("Button3");

JButton button4 = new JButton("Button4");

JButton button5 = new JButton("Button5");

this.add(button3, BorderLayout.CENTER);

this.add(button1, BorderLayout.NORTH);

this.add(button2, BorderLayout.WEST);

this.add(button4, BorderLayout.EAST);

this.add(button5, BorderLayout.SOUTH);

//this.pack();  // Frame 을 가장 tight하게 만듬.  

this.setVisible(true);

}

}// MyFrame Class

public class Test {

public static void main(String[] args) {

MyFrame frame = new MyFrame();

}// main

}// Main Class