4편 : GUI 구현

3편에서는...

3편에서는 Tile-TileState-Board 객체를 통해 게임보드에 철로타일을 놓고 없애고 해당 정보를 저장하는 기능을 구현하였다. 이때 객체지향적 관점에서 행동을 먼저 정의하고 그에 따라 데이터가 따라와야 한다는 것을 알 수 있었다.

 

기존의 GUI

기존 프로젝트에서 디자인 했던 GUI를 거의 그대로 가져오기로 했다.

메인창

위 그림은 기존 프로젝트의 GUI인데 "ADD RAIL" 버튼을 클릭하면 아래의 레일 종류를 선택하는 팝업창이 뜨고 이 창에서 레일을 선택하고 다미 메인창에서 위치를 선택하면 두번째 그림처럼 회색깔의 임시레일이 깔린다. 이때 "COMPLETE" 버튼을 클릭하면 레일이 확정되어 원래색으로 바뀌도록 만들었다.

 

GUI 수정사항

GUI는 거의 그대로 가져왔으나 크게 2가지를 수정하였다.

1. 타일 선택 창을 메인창에 패널(JPanel)로 넣음. / ADD TILE 버튼 없앰. 
2. 커서를 보드에 올려놓으면 해당 위치에 회색깔로 타일모양이 뜨고, 해당 위치를 클릭시 원래의 색의 타일이 놓여짐.

1. 은 기존의 'ADD TILE' 클릭 → 타일 선택 → 위치 선택  과정이 너무 비효율적인것 같아. 기존의 타일 선택창의 버튼을 메인창으로 옮겨 타일선택 → 위치선택으로 과정을 줄였다.

2. 는 유저 입장에서 게임을 쉽게 할 수 있도록 타일을 놓기전 타일을 놓을 경우 어떤 모양이 되는지 미리 보여주기 기능으로 개발하기로 했다.

위치 선택 버튼이 메인창으로 이동

기존 코드의 문제점

기존 코드의 경우 모든 객체들이 하나의 파일에 들어 있어, 가독성이 떨어지고 객체지향 관점에서도 좋지 못했다. 특히 GUI파트와 내부 동작 파트가 하나의 소스코드에 뒤섞여 있어 유지보수 관점에서 좋지 못했다. 

새로운 프로젝트에서는 내부 동작 파트를 완벽히 분리했으므로 기존 코드의 내부 동작 코드를 전부 지우고, 최종 event 결과를 MainSystem에 보내주는 방식으로 변경하였다. 또한 기존의 객체들을 역할에 맞게 분류하여 서로 다른 파일에 작성하였다. 아래는 GUI 파트의 클래스 다이어그램이다.

클래스 다이어그램

MainGUI는 각 버튼을 필드로 가지고 있고, 필드들을 포지셔닝하는 역할을 한다. 각 버튼은 각각 버튼을 다른 객체에 보내주는 getButton()과 getSubButton() 메서드를 가지고 있고, event에 의해 입력된 메세지와 인자를 MainSystem에 보내주는 sendMessage() 메서드를 가지고 있다. sendMessage 메서드는 인자가 필요한 경우가 있어 오버로딩 되었다.

필요한 모든 외부 이미지는 ImgStore에 저장하고, 싱글턴 패턴으로 제작하여 어디서든 이미지를 읽을 수 있게 구현하였다.