eclipse swt로 간단한 계산기 만들기(1)

 

다른 프로그램들은 GUI를 만드는게 쉽던데, Java 는 별도의 툴을 사용하지 않는 이상

직접 코드로 GUI를 구현해야합니다.

 

처음부터 거대한 프로그램을 짜려면 힘들지만, 간단하게 몇 개의 프로그램을 만들어 본 후에

익숙해 지는 방법을 어느 정도 감 잡으면 UI 만드는 것은 간단할 수도 있습니다.

 

이전 강좌들에서 살펴본 layout 배치 및 button 입력으로 계산기를 만들어보도록 하겠습니다.

 

 

1. 화면

 

만들어볼 계산기 화면입니다.

 

기본적인 내용으로 심플한 계산기를 만들어볼까 합니다.

 

 

 

2. 준비

 

먼저, 소스 코드를 아래와 같이 준비합니다.

 

public static void main(String[] args) {
        Display display;
        Shell shell;

        display = new Display()

        shell = new Shell(display);
        shell.setBounds(0, 0, 480, 320);
        shell.setLayout(new FillLayout());
        shell.setText("계산기");

        // 앞으로 코드를 입력할 부분 입니다.

        shell.open();
 
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
        display.dispose();
}

 

 

3. 화면 만들기

 

이제는 main 함수에서 직접 짜기 보다는 별도의 함수를 만들어서 진행하도록 하겠습니다.

 

public static void main(String[] args) {
        .
        .
        shell.setText("계산기");

        createView(shell);

        shell.open();
        .
        .
}

private static void createView(Shell shell) {
}

 

이제는 createView에서 화면에 들어가는 버튼을 올릴 것입니다.

 

가장 기본적으로 계산기에 들어가는 버튼을 변수를 정하도록 합니다.

무식하지만 알아보기 쉽게, 버튼 마다 변수를 생성을 하도록 하겠습니다.

(변수 하나씩 연습해 본 다음, 나중엔 배열로 한번에 그리는 것도 좋을 듯 합니다.)

 

private static void createView(Shell shell) {

        Text    txtResult;
        Button  btnNumber[];
        Button  btnSum, btnMinus, btnMulti, btnDiv;
        Button  btnEqual, btnClear, btnDot;
}

 

변수를 만들었으면, 화면에 배치를 해보도록 합니다.

 

아래 그림과 같이 왼쪽에서 오른쪽으로 생성한다는 것을 먼저 기억합니다.

 

 

shell을 상속받아서 그 위에 Composite를 그릴 것입니다.

4등분으로 나눠져 있기에 구분을 해줍니다.

 

Composite comp = new Composite(shell, SWT.NONE);
comp.setLayout(new GridLayout(4, false));

 

 

4. 버튼, 텍스트 만들기

 

버튼을 만들 때는 아래와 같이 버튼을 생성하고, 크기를 정하고 이름을 적었습니다.

 

버튼 = new Button(부모객체, SWT.PUSH);
버튼.setLayoutData(new GridData);
버튼.setText("이름");

 

Composiste를 생성한 곳 아래 공통적으로 쓰일 GridData를 생성한 다음, 버튼을 생성하도록 하겠습니다.

 

먼저, 텍스트 생성입니다.

 

가로 영역 전체를 차지해야 함으로 gridData.horizontalSpan = 4; 속성을 주어서 4개의 공간을 1로 사용하도록 하였습니다.

 

그리고 계산기에 보면 커서가 오른쪽에 위치하고 있습니다. 텍스트 생성 속성에 SWT.RIGHT를 부여하였습니다.

 

GridData gridData = new GridData(GridData.FILL_BOTH);
gridData.horizontalSpan = 4;

txtResult = new Text(comp, SWT.BORDER|SWT.RIGHT);
txtResult.setLayoutData(gridData);

 

그 다음 버튼을 만들어 줍니다.

거의 노가다 작업입니다. orz

 

btnNumber = new Button[10];

GridData gData = new GridData(GridData.FILL_BOTH);

btnClear        = new Button(comp, SWT.PUSH);
btnClear        .setLayoutData(gData);
btnClear        .setText("Clear");

btnDiv          = new Button(comp, SWT.PUSH);
btnDiv          .setLayoutData(gData);
btnDiv          .setText("/");

btnMulti        = new Button(comp, SWT.PUSH);
btnMulti        .setLayoutData(gData);
btnMulti        .setText("x");

btnNumber[7]    = new Button(comp, SWT.PUSH);
btnNumber[7]    .setLayoutData(gData);
btnNumber[7]    .setText("7");

btnNumber[8]    = new Button(comp, SWT.PUSH);
btnNumber[8]    .setLayoutData(gData);
btnNumber[8]    .setText("8");

btnNumber[9]    = new Button(comp, SWT.PUSH);
btnNumber[9]    .setLayoutData(gData);
btnNumber[9]    .setText("9");

btnMinus        = new Button(comp, SWT.PUSH);
btnMinus        .setLayoutData(gData);
btnMinus        .setText("-");

btnNumber[4]    = new Button(comp, SWT.PUSH);
btnNumber[4]    .setLayoutData(gData);
btnNumber[4]    .setText("4");

btnNumber[5]    = new Button(comp, SWT.PUSH);
btnNumber[5]    .setLayoutData(gData);
btnNumber[5]    .setText("5");

btnNumber[6]    = new Button(comp, SWT.PUSH);
btnNumber[6]    .setLayoutData(gData);
btnNumber[6]    .setText("6");

btnSum          = new Button(comp, SWT.PUSH);
btnSum          .setLayoutData(gData);
btnSum          .setText("+");

btnNumber[1]    = new Button(comp, SWT.PUSH);
btnNumber[1]    .setLayoutData(gData);
btnNumber[1]    .setText("1");

btnNumber[2]    = new Button(comp, SWT.PUSH);
btnNumber[2]    .setLayoutData(gData);
btnNumber[2]    .setText("2");

btnNumber[3]    = new Button(comp, SWT.PUSH);
btnNumber[3]    .setLayoutData(gData);
btnNumber[3]    .setText("3");

btnEqual        = new Button(comp, SWT.PUSH);
btnEqual        .setLayoutData(gData);
btnEqual        .setText("=");

btnNumber[0]    = new Button(comp, SWT.PUSH);
btnNumber[0]    .setLayoutData(gData);
btnNumber[0]    .setText("0");

btnDot          = new Button(comp, SWT.PUSH);
btnDot          .setLayoutData(gData);
btnDot          .setText(".");

 

그 다음 실행을 해봅니다.

 

 

 

별 어려움 없이 화면은 나왔지만, 배치가 다른 듯 합니다.

 

처음 설정했던 이미지와 비교하면, 아래 버튼들의 영역을 변경해 줘야 합니다.

빨간색 테두리는 가로로 길게, 파란색 테두리는 세로로 늘려줘야합니다.

 

 

 

5. 버튼 영역 변경

 

지난 강의 때, griddata 의 span을 통해서 여러 영역을 하나로 사용했었습니다.

그걸 활용하도록 하겠습니다.

 

먼저 소스 내에서 다른 버튼은 놔두고 변경할 버튼 3개만 수정하도록 하겠습니다.

 

가로영역을 합칠 gDataH 와 세로영역을 합칠 gDataV를 만들어줍니다.

그 다음 변경하고자 하는 버튼의 레이아웃에 적용을 시켜 줍니다.

 

btnNumber = new Button[10];

GridData gData = new GridData(GridData.FILL_BOTH);

GridData gDataH = new GridData(GridData.FILL_BOTH);
gDataH.horizontalSpan = 2;

GridData gDataV = new GridData(GridData.FILL_BOTH);
gDataV.verticalSpan = 2;


btnClear        = new Button(comp, SWT.PUSH);
btnClear        .setLayoutData(gDataH);
btnClear        .setText("Clear");

(중략)

btnEqual        = new Button(comp, SWT.PUSH);
btnEqual        .setLayoutData(gDataV);
btnEqual        .setText("=");

btnNumber[0]    = new Button(comp, SWT.PUSH);
btnNumber[0]    .setLayoutData(gDataH);
btnNumber[0]    .setText("0");

 

그러면 처음에 구상했던대로 GUI 화면이 완성됩니다.

 

 

 

6. 전체 소스

 

public class hello {
    
    /**
     * 메인 함수이다.
     * @param args
     */
    public static void main(String[] args) {
        Display display;
        Shell shell;
               
        display = new Display();
        
        shell = new Shell(display);
        shell.setBounds(0, 0, 480, 320);
        shell.setLayout(new FillLayout());
        shell.setText("계산기");
        
        createView(shell);
  
        shell.open();
 
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) {
                display.sleep();
            }
        }
        display.dispose();
    }
    
    /**
     * 화면을 생성한다.
     * @param shell
     */
    private static void createView(Shell shell) {
        
        Text    txtResult;                              // 이미지 버튼
        Button  btnNumber[];                            // 0~9 숫자
        Button  btnSum, btnMinus, btnMulti, btnDiv;     // 차례대로 +, -, x, /
        Button  btnEqual, btnClear, btnDot;             // 차례대로 =, clear, .
        
        // Composiste 영역 생성
        Composite comp = new Composite(shell, SWT.NONE);
        comp.setLayout(new GridLayout(4, false));
        
        // Text 생성
        GridData gridData = new GridData(GridData.FILL_BOTH);
        gridData.horizontalSpan = 4;
        
        txtResult = new Text(comp, SWT.BORDER|SWT.RIGHT);
        txtResult.setLayoutData(gridData);
        
        // 버튼 생성
        btnNumber = new Button[10];
        
        GridData gData = new GridData(GridData.FILL_BOTH);
        
        GridData gDataH = new GridData(GridData.FILL_BOTH);
        gDataH.horizontalSpan = 2;
        
        GridData gDataV= new GridData(GridData.FILL_BOTH);
        gDataV.verticalSpan = 2;
        
        btnClear        = new Button(comp, SWT.PUSH);
        btnClear        .setLayoutData(gDataH);
        btnClear        .setText("Clear");
        
        btnDiv          = new Button(comp, SWT.PUSH);
        btnDiv          .setLayoutData(gData);
        btnDiv          .setText("/");
        
        btnMulti        = new Button(comp, SWT.PUSH);
        btnMulti        .setLayoutData(gData);
        btnMulti        .setText("x");
        
        btnNumber[7]    = new Button(comp, SWT.PUSH);
        btnNumber[7]    .setLayoutData(gData);
        btnNumber[7]    .setText("7");
        
        btnNumber[8]    = new Button(comp, SWT.PUSH);
        btnNumber[8]    .setLayoutData(gData);
        btnNumber[8]    .setText("8");
        
        btnNumber[9]    = new Button(comp, SWT.PUSH);
        btnNumber[9]    .setLayoutData(gData);
        btnNumber[9]    .setText("9");
        
        btnMinus        = new Button(comp, SWT.PUSH);
        btnMinus        .setLayoutData(gData);
        btnMinus        .setText("-");
        
        btnNumber[4]    = new Button(comp, SWT.PUSH);
        btnNumber[4]    .setLayoutData(gData);
        btnNumber[4]    .setText("4");
        
        btnNumber[5]    = new Button(comp, SWT.PUSH);
        btnNumber[5]    .setLayoutData(gData);
        btnNumber[5]    .setText("5");
        
        btnNumber[6]    = new Button(comp, SWT.PUSH);
        btnNumber[6]    .setLayoutData(gData);
        btnNumber[6]    .setText("6");
        
        btnSum          = new Button(comp, SWT.PUSH);
        btnSum          .setLayoutData(gData);
        btnSum          .setText("+");
        
        btnNumber[1]    = new Button(comp, SWT.PUSH);
        btnNumber[1]    .setLayoutData(gData);
        btnNumber[1]    .setText("1");
        
        btnNumber[2]    = new Button(comp, SWT.PUSH);
        btnNumber[2]    .setLayoutData(gData);
        btnNumber[2]    .setText("2");
        
        btnNumber[3]    = new Button(comp, SWT.PUSH);
        btnNumber[3]    .setLayoutData(gData);
        btnNumber[3]    .setText("3");
        
        btnEqual        = new Button(comp, SWT.PUSH);
        btnEqual        .setLayoutData(gDataV);
        btnEqual        .setText("=");
        
        btnNumber[0]    = new Button(comp, SWT.PUSH);
        btnNumber[0]    .setLayoutData(gDataH);
        btnNumber[0]    .setText("0");
        
        btnDot          = new Button(comp, SWT.PUSH);
        btnDot          .setLayoutData(gData);
        btnDot          .setText(".");
        
    }
    
}

 

 

GUI 화면을 끝냈으니, 다음엔 버튼을 클릭해서 값을 주고 받는 것을 써봐야겠습니다. ㅎㅎ

 

권한

 

강좌에 대한 내용은 에프에이리눅스(주) 에 권한이 있습니다.
본문의 이미지 및 내용은 순수 제작한 것이며, 내용 중 외부 이미지를 사용할 경우, 출처를 표기합니다.
무분별한 불펌 보다는 포럼을 홍보해주셔서 더욱 더 활성화되어 좋은 내용의 글이 올라오도록 부탁드립니다.