【原】《IntelliJ IDEA 插件開發(fā)》第二節(jié)：開發(fā)摸魚看書的側(cè)邊欄窗體

小傅哥 2021-12-13

展開全文

作者：小傅哥
博客：https://

?
沉淀、分享、成長，讓自己和他人都能有所收獲！??
?

一、說明

方向不對，努力白費！

總有人拿到產(chǎn)品的需求，就著急開干，反正也懶的想開發(fā)中會發(fā)生啥，上線后多少人使用，管它三七二十一先堆起來代碼看一看，反正能跑就行，無論代碼還是你！

其實很多時候在編寫代碼前，所需要做的技術(shù)調(diào)研、架構(gòu)設(shè)計、模塊分層、數(shù)據(jù)結(jié)構(gòu)、詳細(xì)分析、方案評審等，與三七二十一那家伙對比起來，好像都會顯得有點慢。但這個看上去慢的過程，卻能解決以后很多常見和麻煩的問題，比如產(chǎn)品需求迭代、業(yè)務(wù)流程變更、代碼邏輯更改、線上異常排查。雖然看著慢，但這個積基樹本的過程就像打地基一樣，總得有一個穩(wěn)定的根基，才能蓋好整棟大樓。萬丈高樓平地起，勿在浮沙筑高臺

二、需求目的

如果你需要開發(fā)一個自定義功能的插件，無論是處理代碼、輔助ORM生成、日志信息記錄等，都會需要進(jìn)行一個插件的功能配置進(jìn)行初始化操作以及把對應(yīng)功能展示到整個 IDEA 窗體中的右邊欄或者下邊欄中，這樣才能滿足一個插件的基本需求。

那么這樣就需要在 IDEA 窗體 File -> Settings 中擴(kuò)展自己的配置窗體，以及開發(fā)自己需要的 ToolWindow 嵌入到 IDEA 中(左側(cè)、右側(cè)、下側(cè))，這里窗體的開發(fā)需要用到 Swing 但目前在 IDEA 中開發(fā)這樣的功能只需要拖拽窗體就可以，還是蠻容易的。

那么接下來我們以一個在 IDEA 中摸魚看書的場景為案例，學(xué)習(xí)配置窗體和閱讀窗體的功能實現(xiàn)。

三、案例開發(fā)

1. 工程結(jié)構(gòu)

guide-idea-plugin-tool-window
├── .gradle
└── src
    ├── main
    │   └── java
    │    └── cn.bugstack.guide.idea.plugin 
    │        └── factory
    │        │   ├── ReadFactory.java 
    │        │   └── SettingFactory.java
    │        └── ui
    │        │  ├── ReadUI.java 
    │        │  ├── ReadUI.form
    │        │  ├── SettingUI.java  
    │        │  └── SettingUI.form
    │        └── Config    
    ├── resources
    │   └── META-INF
    │       └── plugin.xml 
    ├── build.gradle  
    └── gradle.properties

源碼獲取：#公眾號：bugstack蟲洞棧 回復(fù)：idea 即可下載全部 IDEA 插件開發(fā)源碼

此工程主要涉及兩部分，在factory中一個是配置窗體、一個是閱讀窗體，與之對應(yīng)的兩組UI的實現(xiàn)。最后 factory 類的實現(xiàn)都會配置到 plugin.xml 中進(jìn)行使用，同時也是在 plugin.xml 中控制窗體位置和圖標(biāo)。

2. 創(chuàng)建 UI 窗體

2.1 創(chuàng)建方式

New -> Swing UI Designer -> GUI Form

在 Java 中創(chuàng)建窗體的方式主要有 AWT、Swing、JavaFx，由于 IDEA 使用 Swing 開發(fā)，所以這里創(chuàng)建 Swing 窗體的兼容性會更好。
那么這里 Swing 窗體的創(chuàng)建可以是自己手寫窗體結(jié)構(gòu)，也可以使用可視化拖拽的 GUI Form 如果你的窗體不復(fù)雜，其實拖拽的方式就可以滿足使用。

2.2 配置頁窗體

public class SettingUI {

    private JPanel mainPanel;
    private JPanel settingPanel;
    private JLabel urlLabel;
    private JTextField urlTextField;
    private JButton urlBtn;

    public SettingUI() {
        // 給按鈕添加一個選擇文件的事件
        urlBtn.addActionListener(e -> {
            JFileChooser fileChooser = new JFileChooser();
            fileChooser.setFileSelectionMode(JFileChooser.FILES_ONLY);
            fileChooser.showOpenDialog(settingPanel);
            File file = fileChooser.getSelectedFile();
            urlTextField.setText(file.getPath());
        });
    }

    public JComponent getComponent() {
        return mainPanel;
    }

    public JTextField getUrlTextField() {
        return urlTextField;
    }
}

配置頁窗體主要提供文章路徑的選擇，這里需要用到的標(biāo)簽包括：JLabel、JTextField、JButton
在使用 GUI Form 創(chuàng)建完窗體后，就會出現(xiàn)這樣一個可視化的頁面，右側(cè)可以把各類標(biāo)簽拖到中間的面板中，左側(cè)進(jìn)行設(shè)置展示名稱和屬性名稱。
最終這里的代碼標(biāo)簽代碼會展示到 SettingUI.java 中，而渲染內(nèi)容會被隱藏，這樣的方式也比較方便控制一些自定義內(nèi)容的添加，例如事件和新窗體等
另外在 SettingUI.java 中，還需要在構(gòu)造函數(shù)添加一個按鈕事件，用于打開文件選擇器，把我們需要打開的文件，設(shè)置到 urlTextField 中。

2.3 閱讀頁窗體

public class ReadUI {

    private JPanel mainPanel;
    private JTextPane textContent;

    public JComponent getComponent() {
        return mainPanel;
    }

    public JTextPane getTextContent() {
        return textContent;
    }

}

在窗體創(chuàng)建和配置頁窗體是一樣的，也是通過拖拽到面板中，用于展示路徑文件內(nèi)容。
你可以適當(dāng)?shù)奶砑右恍┢渌粹o進(jìn)去，比如翻頁閱讀、滾動條、字?jǐn)?shù)展示等。

3. ToolWindow 工具框

為了把我們自己實現(xiàn)的閱讀窗體放到整個 IDEA 右側(cè)側(cè)邊欄中，我們需要創(chuàng)建一個實現(xiàn)了 ToolWindowFactory 的接口，并把實現(xiàn)類配置到 plugin.xml 中

public class ReadFactory implements ToolWindowFactory {

    private ReadUI readUI = new ReadUI();

    @Override
    public void createToolWindowContent(@NotNull Project project, @NotNull ToolWindow toolWindow) {
        // 獲取內(nèi)容工廠的實例
        ContentFactory contentFactory = ContentFactory.SERVICE.getInstance();
        // 獲取 ToolWindow 顯示的內(nèi)容
        Content content = contentFactory.createContent(readUI.getComponent(), "", false);
        // 設(shè)置 ToolWindow 顯示的內(nèi)容
        toolWindow.getContentManager().addContent(content);
        // 全局使用
        Config.readUI = readUI;
    }

}

接口方法 ToolWindowFactory#createToolWindowContent 是需要自己工具框類實現(xiàn)的方法，在這個 createToolWindowContent 方法中把自己的窗體 ReadUI 實例化后填充進(jìn)去即可。
添加窗體的補助主要依賴于 ContentFactory.SERVICE.getInstance() 創(chuàng)建出 ContentFactory 并最終使用 toolWindow 添加窗體顯示 UI 即可。
這里我們額外的還添加了一個全局屬性 Config.readUI 這是為了后續(xù)可以在配置窗體中使用這個 UI 進(jìn)行設(shè)置文件內(nèi)容。

4. Configurable 配置框

public class SettingFactory implements SearchableConfigurable {

    private SettingUI settingUI = new SettingUI();

    @Override
    public @NotNull String getId() {
        return "test.id";
    }

    @Override
    public @Nls(capitalization = Nls.Capitalization.Title) String getDisplayName() {
        return "test-config";
    }

    @Override
    public @Nullable JComponent createComponent() {
        return settingUI.getComponent();
    }

    @Override
    public boolean isModified() {
        return true;
    }

    @Override
    public void apply() throws ConfigurationException {
        String url = settingUI.getUrlTextField().getText();
        // 設(shè)置文本信息
        try {
            File file = new File(url);
            RandomAccessFile randomAccessFile = new RandomAccessFile(file, "r");
            randomAccessFile.seek(0);

            byte[] bytes = new byte[1024 * 1024];
            int readSize = randomAccessFile.read(bytes);

            byte[] copy = new byte[readSize];
            System.arraycopy(bytes, 0, copy, 0, readSize);

            String str = new String(copy, StandardCharsets.UTF_8);

            // 設(shè)置內(nèi)容
            Config.readUI.getTextContent().setText(str);

        } catch (Exception ignore) {
        }
    }

}

實現(xiàn)自 SearchableConfigurable 接口的方法比較多，包括：getId、getDisplayName、createComponent、isModified、apply 這些里面用于寫邏輯實現(xiàn)的主要是 createComponent 和 apply
createComponent 方法主要是把我們自己創(chuàng)建的 UI 面板提供給 JComponent
apply 是一個事件，當(dāng)我們點擊完成配置的 OK、完成，時候就會觸發(fā)到這個方法。在這個方法中我們拿到文件的 URL 地址使用 RandomAccessFile 進(jìn)行讀取解析文件，并最終把文件內(nèi)容展示到閱讀窗體中 Config.readUI.getTextContent().setText(str);

5. 配置 plugin.xml

<extensions defaultExtensionNs="com.intellij">
    <!-- Add your extensions here -->
    <!-- 配置 File -> Settings -> Tools -->
    <projectConfigurable groupId="tools" displayName="My Test Config" id="test.id"
                         instance="cn.bugstack.guide.idea.plugin.factory.SettingFactory"/>
                         
    <!-- 窗體 (IDEA 界面右側(cè)) -->
    <toolWindow id="Read-Book" secondary="false" anchor="right" icon="/icons/logo.png"
                factoryClass="cn.bugstack.guide.idea.plugin.factory.ReadFactory"/>
</extensions>

本次在 plugin.xml 中的主要配置內(nèi)容就是 projectConfigurable 和 toolWindow，另外在 toolWindow 中還添加了一個 icon 的 logo，配置完成后就可以在 IDEA 頁面展示出我們的自己添加的窗體了。

四、插件測試

通過 Plugin 啟動插件，這個時候會打開一個新的 IDEA 窗體，在這個新窗體中就可以看到我們添加的功能了。

配置文件路徑

點擊選擇按鈕，選擇你的文件位置，選擇后點擊 OK

查看展示文件

確認(rèn)好文件路徑后，就可以再右側(cè)欄看到自己的文件展示內(nèi)容了。是不是在擴(kuò)展些，就適合你摸魚了！？

五、總結(jié)

學(xué)習(xí)自定義開發(fā)UI，把UI填充到需要放置的 IDEA 窗體位置，并在窗體中添加功能的流程步驟，其實主要包括三方面：Swing UI、Factory 實現(xiàn)類、plugin 配置。
在 plugin 配置中，主要包括如窗體ID、位置、icon圖標(biāo)、對應(yīng)的實現(xiàn)類，如果不添加這些是不能正常展示窗體信息的。
另外可以以這個案例為基礎(chǔ)，添加自己想完成的功能，比如讓這個摸魚看書的功能更加完善，可以支持不同類型的文件，甚至可以是 PDF 的閱讀，以及你想看的書籍。