IntelliJ Plugin 만들기(2) - Action 정의하기 & UI 만들기

안녕하세요! 이번 포스팅에서는 내가 원하는대로 UI를 만들고 단축키를 눌렀을 때, UI가 나오게 하는 예제를 만들어보도록 하겠습니다.

모든 코드는 Github에 올려두었습니다!

 

---

 

목차

1. IntelliJ Plugin 만들기(1) - 프로젝트 생성하기, pom.xml 살펴보기, Action 정의하기
2. IntelliJ Plugin 만들기(2) - Action 정의하기 & UI 만들기
3. IntelliJ Plugin 만들기(3) - 플러그인 추출하고 배포하기

 

---

 

Action 정의

1. Action 정의하기

plugin.xml

<action id="myForm" class="action.MyForm">
	<keyboard-shortcut keymap="$default" first-keystroke="ctrl shift Z"/>
</action>

저번 포스팅과 마찬가지로 Action을 먼저 정의해줍니다.

xml 파일에 직접 action을 정의해도 되고, 전 포스팅에서 소개해 드린 Plugin Dev Kit을 이용해도 되지만,

 

Plugin Dev Kit을 이용해서 단축키를 지정하면 잘 지정이 안 되는 것 같아서

plugin.xml에 직접 작성해주었습니다.

 

2. Class 파일 추가하기

action.MyForm.java

public class MyForm extends AnAction {

  @Override
  public void actionPerformed(AnActionEvent e) {

  }
}

action의 class에 명시된 경로(action.MyForm)에 클래스 파일을 만들어주고,

AnAction을 상속 받은 후에 필수로 구현해야 하는 메소드인 actionPerformed()를 오버라이드 해줍니다.

 

---

 

UI 만들기

다음으로 화면에 띄울 UI를 만들어보겠습니다.

소스코드로 직접 UI를 작성해도 되지만,

Swing UI Designer를 사용하면 간편하게 폼을 만들 수 있기 때문에, 위 방법을 추천합니다!

 

1. Form 생성하기

마우스 우클릭 - Swing UI Designer - GUI Form을 누른 후에

Form Name을 입력하시면 됩니다. 저는 TestForm이라는 이름으로 만들었습니다.

Base layout manager는 dafult 값인 GridLayoutManager로 설정했습니다.

Form이나 Layer은 각각의 장단점이 있기 때문에 취향에 맞게 설정하시면 됩니다. 😸

확인 버튼을 누르면 class 파일과 form 파일이 생기는 것을 확인할 수 있습니다.

UI 구성은 form 파일에서, 각종 이벤트 동작 설정은 class 파일에서 이루어집니다.

 

2. Form 파일 수정하기

Palette에서 필요한 것을 끌어와서 UI를 구성하면 됩니다.

이벤트에 쓰일 변수명은 filed name을 수정하여 지정할 수 있습니다.

 

원하는 폼을 만든 후에, 마우스 우클릭 - Preview를 통해 폼이 원하는대로 만들어졌는지 확인합니다.

 

3. Class 파일 수정하기

TestForm.java

public class TestForm {

  private JDialog dialog = new JDialog();

  private JButton search;
  private JTextField textField;
  private JPanel panel;
  private JLabel label;

  public void onShowing(){
    dialog.add(panel, BorderLayout.CENTER);
    dialog.pack();
    dialog.setLocation(200, 200);
    dialog.setVisible(true);
  }
}

UI에서 filed name을 지정해주면 name 이름의 변수가 만들어져있습니다.

 

맨 처음 실행할 때에 필요한 JDialog를 추가해주고,

단축키를 누르게 되면 UI를 보여줄 메소드인 onShowing()을 구현해주었습니다.

 

TestForm.java

public class TestForm {

  private JDialog dialog = new JDialog();

  private JButton search;
  private JTextField textField;
  private JPanel panel;
  private JLabel label;

  public void onShowing(){
    dialog.add(panel, BorderLayout.CENTER);
    dialog.pack();
    dialog.setLocation(200, 200);
    dialog.setVisible(true);

    search.addActionListener(event -> onClick()); // 추가
  } 

  // 추가
  private void onClick() {
    label.setText(textField.getText());
  }
}

addActionListener()을 사용하면 특정 이벤트에 대한 메소드를 지정할 수 있습니다.

 

onClick()이라는 메소드를 실행하게 한 후,

레이블의 텍스트를 입력한 텍스트로 바꿔주는 코드를 작성했습니다.

 

action.MyForm.java

public class MyForm extends AnAction {

  @Override
  public void actionPerformed(AnActionEvent e) {

    TestForm testForm = new TestForm();
    testForm.onShowing();

  }
}

action에 명시해준 클래스 파일로 돌아와서 폼을 보여주는 역할을 하는 onShowing()을 추가해줍니다.

 

---

 

완성

버튼을 누르면 label이 바뀌는 것을 확인할 수 있습니다.

 

---

 

정리

intelliJ Plugin은 저도 잘 아는 부분이 아니라 포스팅을 하며 잘못된 부분이나 수정할 부분이 있을 수도 있습니다. 혹시 발견하게 되신다면 언제든지 댓글로 알려주신다면 감사하겠습니다! 😊 다음 포스팅에서는 플러그인을 추출하고 배포하는 방법에 대해 포스팅을 해보도록 하겠습니다!

읽어주셔서 감사합니다!