욱'S 노트

IntelliJ 플러그인 개발 - UI 만들기 본문

Tool/IntelliJ

IntelliJ 플러그인 개발 - UI 만들기

devsun 2015. 1. 9. 17:24

계속 무작정 따라하기 식으로 진행하겠다. 왜냐? 나도 인텔리J를 사용한지 얼마되지 않았으니까...

구글에서 intellij plugin development를 검색해보면 jetbrains사의 위키로 연결된다. 근데 당연히 있어야 할 UI Component들에 대한 설명이 거의 없다.

아놔 짜증나서 한 두시간 헤맸더니 결론은 심플했다. 그렇다. IntelliJ의 UI는 기본적으로 Swing으로 되어 있었던 것이다. OTL...

Swing으로 개발을 할려니까 짜증나서 좀 검색해보니 Swing UI를 쉽게 개발할 수 있는 UI Designer란 놈이 존재한단다. 한 30분 사용해보고 삽질을 좀 해보니 의외로 짱 간단하게 UI를 개발할 수 있었다. 그럼 시작해보자.

소스 디렉토리에서 New > GUI Form을 선택해서 다음과 같이 생성해보자. 세개를 만들자.

이름은 GeneralForm, SexForm, PersonForm이라고 하자. 각 Form을 생성할 때 마다 아래와 같은 다이얼로그가 나타나는데 Base layout manager는 IntelliJ에서 제공하는 것을 쓰도록 하자. 잠깐 써보니까 UI 구성하기가 제일 편했다.



생성이 완료되면 아래와 같이 패키지구조가 생기면서 각각 클래스 파일 하나와 디자인 요소들이 정의된 form xml 파일이 보이게 된다.

form xml를 더블클릭하면 다음과 같은 UI가 나타날것이다.



팔레트에서 컨트롤들을 당겨서 적절히 배치하자. 그리고 컴포넌트 트리에서 해당 컨트롤들의 프로퍼티를 적절히 지정하자.

각 프로퍼티들에 대한 설명은 생략하겠다. 왜냐하면 나도 잘 모른다.

일단 적당히 만들었으면 오른쪽마우스를 클릭하여 Preview라는 메뉴를 선택해보자. 감동하게 된다. 인텔리J 무료가 아닌것을 제외하곤 좀 짱인듯 하다.

이클립스빠였는데 좀 그렇다. 여하튼 아래와 같이 걍 Application이 생긴다. 



그러면 이제 성별을 나타내는 SexForm을 후딱 만들어주시라. 방법은 생략하겠다.

마지막으로 Form을 재활용하는 방법을 소개하겠다. 이거 찾는다고 한 두시간 헤맸다.

팔레트에서 마우스 우클릭으로 그룹을 추가해보자.

그룹을 추가한 다음 Add Component to Palette를 선택하자.

아래와 같은 팝업이 나타난다. 적절한 Form을 선택한 다음에 Ok버튼을 누르면 해당 그룹에 Form이 추가된것을 알 수 있다.




해당 폼은 다른 Component처럼 다른 Form에 추가될 수 있다. 아래는 PersonForm의 최종 작업 결과이다.


결론은 Swing 컴포넌트들의 속성을 잘알면 아주 빠르게 Swing 어플리케이션을 개발 할 수 있다.

 


Comments