从零开始写一个IDEA插件（三）——创建我们自己的Tool Window

前言

上篇《从零开始写一个IDEA插件（二）------ 环境准备》我们已经可以正常运行我们的插件项目，但是里面什么也没有。这篇开始我们就要开始往里面添加内容了，首先我们要先把主要的界面完成，也就是下面这部分：

ToolWindow

什么是ToolWindows

Tool windows 是IDEA里面的一类子窗口，它可以有自己的工具栏、UI内容等等，它的激活按钮可以显示在主界面的左侧、右侧或者下方。比如在主界面的下方有我们经常用到的Run、Version Controll、Terminal；左方的Project这些都是属于Tool window 。 我们可以有2种方式来调用tool window ，一种是类似Terminal这类，有一个常驻的按钮，我们可以随时点击它激活这个tool window ，还有一类是通过程序调起，类似于Run或者Debug，平常不显示，当我们运行项目时，才会调起这个tool window。

怎么注册Tool Windows

Tool window 可以能通过扩展点进行注册，我们需要在plugin.xml文件里面进行配置，在<extensions>中增加以下信息：

<toolWindow id="httpRunner" factoryClass="com.dadada.plugin.httprunner.HttpRunnerToolWindowFactory"  anchor="bottom"/>

在注册tool window 时，id和factoryClass是必填的，其它选填。

• id：这个指定了工具窗口上按钮的显示文本
• factoryClass：指定了tool window 的工厂类，这个类必须继承自ToolWindowFactory，用于生成toolWindow的内容
• anchor：指定了这个tool window 显示在哪里，可选值：left / right / bottom

配置完注册信息后，我们就需要实现对应的工厂类了，com.dadada.plugin.httprunner.HttpRunnerToolWindowFactory内容如下：

public class HttpRunnerToolWindowFactory implements ToolWindowFactory {

    private static final String DISPLAY_NAME = "";

    @Override
    public void createToolWindowContent(@NotNull Project project, @NotNull ToolWindow toolWindow) {
        //toolwindow 里面的内容，我们先建一个简单的label来测试一下
        Label label = new Label("Hello World");
        JPanel jPanel = new JPanel();
        jPanel.setEnabled(true);
        jPanel.add(label);

        //获取ContentFactory实例
        //这种方式是为了兼容老版本的IDEA，但是SERVICE是已经被标记为了@Deprecated
        //ContentFactory contentFactory = ContentFactory.SERVICE.getInstance();

        //这种方式只能在 build number 222.3345.118 之后调用，也就是如果我们使用了这种方式，那么在plugin.xml中的since-version必须要配置为：<idea-version since-build="222.3345.118"/>
        ContentFactory contentFactory = ContentFactory.getInstance();

        //创建一个Content，也就是toolwindow里面的一个tab页
        Content content = contentFactory.createContent(jPanel, DISPLAY_NAME, false);
        //将Content加入到toolwindow中
        toolWindow.getContentManager().addContent(content);
    }
}

在实现ToolWindowFactory后，只有一个方法是必须实现的，也就是createToolWindowContent，它有两个参数：

• project：项目的上下文，我们每建一个project，都会对应一个项目上下文
• toolWindow：tool window 的上下文，每个tool window间独立，都会有自己上下文

一个tool window 里面可以有多个tab页，我们通过toolWindow.getContentManager().addContent(content);实际上是在里面添加了一个tab页，创建Content时传入的jPanel则是这个tab页里面的内容，DISPLAY_NAME则是这个tab页的标题，我们只有一个tab，所以不需要设置标题。

这时候，我们运行我们的插件项目，那么应该就可以在下方的工具栏上看到我们定义的tool window了，效果如下：

界面设计

toolWindow注册好了，那么我们要开始填充里面的内容了，这部分如果之前有过开发JavaGUI应用经验的话会比较熟悉，主要是Swing来实现。我们可以通过代码的方式来开发，也可以使用IDEA提供的可视化界面来实现，这样就只需要在界面上拖拽的方式就可以完成我们的界面设计了。下面两部分都会涉及到。

布局

首先我们要先确定页面的布局，整个tab应该分为左右两部分，左边主要负责输入，包括一些下拉框、文档框和按钮等，右边则是一个输出界面，主要负责请求的响应输出。

那我们可以先通过代码的方式把布局确定下来，IDEA有提供一些基础的组件，可以被我们复用，他们可以自动适配IDEA的UI风格：

public class HttpRunnerToolWindow extends SimpleToolWindowPanel {

    private final Project project;
    private final ToolWindow toolWindow;

    public HttpRunnerToolWindow(Project project, ToolWindow toolWindow) {
        super(false, false);
        this.project = project;
        this.toolWindow = toolWindow;
        initUI();
    }

    private void initUI() {
        //创建一个左右分割的面板
        JBSplitter jbSplitter = new JBSplitter(false);
        //设置它的唯一标识
        jbSplitter.setSplitterProportionKey("main.splitter.key");
        //创建一个左侧面板
        HttpRunnerLeftPanel leftPanel = new HttpRunnerLeftPanel(project, toolWindow);
        jbSplitter.setFirstComponent(leftPanel.getContainer());
        //创建一个右侧面板
        HttpRunnerRightPanel rightPanel = new HttpRunnerRightPanel(project, toolWindow);
        jbSplitter.setSecondComponent(rightPanel.getContainer());
        //设置面板的左右比例，这里是左侧占60%，右侧占40%
        jbSplitter.setProportion(0.6f);
        //将面板设置到自己的内容面板中
        setContent(jbSplitter);
    }
}

1. 这里我们继承SimpleToolWindowPanel类，它其实也是一个JPanel，但是针对tool window 做了一些基础的适配，project和toolWindow这两个参数是由我们之前的HttpRunnerToolWindowFactory透传过来的，后面会需要用到。
2. 然后我们在里面创建了一个JBSplitter，这是IDEA提供的一个UI组件，它可以创建一个上下或者左右分割的面板。并且设置了左右比例，左边输入部分占60%，右边输出部分占40%。
3. 左侧面板和右侧面板目前我们还没有创建，下面我们就会通过可视化界面创建左侧面板。

左侧面板

1、新建一个GUI Form，我们先在原有包下面新建一个package ui，用于存放我们所有的UI类，然后 右键 -> New -> Swing UI Designer -> GUI Form，创建的类名为HttpRunnerLeftPanel

2、创建完成后，会生成两个文件，一个.java文件和一个.form文件，打开.form时IDEA会帮我们自动打开一个编辑器，我们可以在里面来设计我们的界面，我们在里面增加了任何的命名组件，都会自动在.java文件中增加对应的字段， 后续具体的实现逻辑需要在里面编写：

3、然后就可以在里面来拖拽右侧的组件来实现我们的界面啦，具体的Swing开发大家可以自行查找资料，这里就不详细讲这部分了（可视化界面上操作的话，简单的界面大家拖几个组件就熟悉了），最终的界面大概是这样：

左侧面板最外面是container面板，里面主要分为上下两部分，上面部分是部分请求头信息和工具栏：

• 上面第一排从左到右分别是HTTP方法下拉框、域名输入框和工具栏
• 第二排从左到右是Label、uri输入框和一个下拉框，可以选择常用的Content-Type请求头
• 第三排从左到右分别是Label、超时时间和一个checkbox，用于标记右侧是否需要输出响应头

下面部分是2个tab页，分别嵌入两个编辑器，一个编辑请求体，一个编辑请求头，这部分因为需要创建编辑器，因此会在代码中实现。

如果我们给每个组件都设置的名称（field name），那么我们打开HttpRunnerLeftPanel这个类，就可以看到IDEA自动帮我们创建了所有的字段：

container是我们在创建左侧面板时需要返回的，因此生成了get方法，然后我们也创建一个构造方法，用来接受project和toolWindow参数。

右侧面板

接下来我们创建右侧面板，和左侧面板类似，但是要简单很多，最终如下：

container里面只有两个组件，consolePanel用于显示HTTP的响应信息，右下角的messageLabel用于显示一些提示信息。

集成

在左右面板都创建好之后，然后就可以将我们的HttpRunnerToolWindow替换掉原来的hello world：

@Override
    public void createToolWindowContent(@NotNull Project project, @NotNull ToolWindow toolWindow) {
        //toolwindow 里面的内容，创建我们自己定义的面板
        HttpRunnerToolWindow httpRunnerToolWindow = new HttpRunnerToolWindow(project, toolWindow);

        //获取ContentFactory实例
        //这种方式是为了兼容老版本的IDEA，但是SERVICE是已经被标记为了@Deprecated
        //ContentFactory contentFactory = ContentFactory.SERVICE.getInstance();

        //这种方式只能在 build number 222.3345.118 之后调用，也就是如果我们使用了这种方式，那么在plugin.xml中的since-version必须要配置为：<idea-version since-build="222.3345.118"/>
        ContentFactory contentFactory = ContentFactory.getInstance();

        //创建一个Content，也就是toolwindow里面的一个tab页
        Content content = contentFactory.createContent(httpRunnerToolWindow, DISPLAY_NAME, false);
        //将Content加入到toolwindow中
        toolWindow.getContentManager().addContent(content);
    }

这时候，我们再启动我们的项目，就可以看到界面是下面这样子：

至此，我们整个tool window的界面框架都基本上已经搭建好了。

总结

这篇文章主要说明了我们要如何创建一个tool window ，并且在其中加入我们自己的内容，可以使用代码或者可视化界面的方式，来创建我们的界面布局。但是现在只是一个空架子，下篇文章会继续完善我们的tool window，在里面加入编辑器，用于输入请求体和请求头，和console组件，用于显示我们的请求响应信息。

如果这些内容对你有一点小小的作用，赞和关注随便点点，谢谢！