一篇學(xué)會(huì)開發(fā)摸魚看書的側(cè)邊欄窗體
一、說明
方向不對(duì)，努力白費(fèi)!
總有人拿到產(chǎn)品的需求，就著急開干，反正也懶的想開發(fā)中會(huì)發(fā)生啥，上線后多少人使用，管它三七二十一先堆起來代碼看一看，反正能跑就行，無論代碼還是你!
其實(shí)很多時(shí)候在編寫代碼前，所需要做的技術(shù)調(diào)研、架構(gòu)設(shè)計(jì)、模塊分層、數(shù)據(jù)結(jié)構(gòu)、詳細(xì)分析、方案評(píng)審等，與三七二十一那家伙對(duì)比起來，好像都會(huì)顯得有點(diǎn)慢。但這個(gè)看上去慢的過程，卻能解決以后很多常見和麻煩的問題，比如產(chǎn)品需求迭代、業(yè)務(wù)流程變更、代碼邏輯更改、線上異常排查。雖然看著慢，但這個(gè)積基樹本的過程就像打地基一樣，總得有一個(gè)穩(wěn)定的根基，才能蓋好整棟大樓。萬丈高樓平地起，勿在浮沙筑高臺(tái)
二、需求目的
如果你需要開發(fā)一個(gè)自定義功能的插件，無論是處理代碼、輔助ORM生成、日志信息記錄等，都會(huì)需要進(jìn)行一個(gè)插件的功能配置進(jìn)行初始化操作以及把對(duì)應(yīng)功能展示到整個(gè) IDEA 窗體中的右邊欄或者下邊欄中，這樣才能滿足一個(gè)插件的基本需求。
那么這樣就需要在 IDEA 窗體 File -> Settings 中擴(kuò)展自己的配置窗體，以及開發(fā)自己需要的 ToolWindow 嵌入到 IDEA 中(左側(cè)、右側(cè)、下側(cè))，這里窗體的開發(fā)需要用到 Swing 但目前在 IDEA 中開發(fā)這樣的功能只需要拖拽窗體就可以，還是蠻容易的。
那么接下來我們以一個(gè)在 IDEA 中摸魚看書的場(chǎng)景為案例，學(xué)習(xí)配置窗體和閱讀窗體的功能實(shí)現(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
此工程主要涉及兩部分，在factory中一個(gè)是配置窗體、一個(gè)是閱讀窗體，與之對(duì)應(yīng)的兩組UI的實(shí)現(xiàn)。最后 factory 類的實(shí)現(xiàn)都會(huì)配置到 plugin.xml 中進(jìn)行使用，同時(shí)也是在 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 窗體的兼容性會(huì)更好。
- 那么這里 Swing 窗體的創(chuàng)建可以是自己手寫窗體結(jié)構(gòu)，也可以使用可視化拖拽的 GUI Form 如果你的窗體不復(fù)雜，其實(shí)拖拽的方式就可以滿足使用。
2.2 配置頁窗體
- public class SettingUI {
- private JPanel mainPanel;
- private JPanel settingPanel;
- private JLabel urlLabel;
- private JTextField urlTextField;
- private JButton urlBtn;
- public SettingUI() {
- // 給按鈕添加一個(gè)選擇文件的事件
- 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)建完窗體后，就會(huì)出現(xiàn)這樣一個(gè)可視化的頁面，右側(cè)可以把各類標(biāo)簽拖到中間的面板中，左側(cè)進(jìn)行設(shè)置展示名稱和屬性名稱。
- 最終這里的代碼標(biāo)簽代碼會(huì)展示到 SettingUI.java 中，而渲染內(nèi)容會(huì)被隱藏，這樣的方式也比較方便控制一些自定義內(nèi)容的添加，例如事件和新窗體等
- 另外在 SettingUI.java 中，還需要在構(gòu)造函數(shù)添加一個(gè)按鈕事件，用于打開文件選擇器，把我們需要打開的文件，設(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)去，比如翻頁閱讀、滾動(dòng)條、字?jǐn)?shù)展示等。
3. ToolWindow 工具框
為了把我們自己實(shí)現(xiàn)的閱讀窗體放到整個(gè) IDEA 右側(cè)側(cè)邊欄中，我們需要?jiǎng)?chuàng)建一個(gè)實(shí)現(xiàn)了 ToolWindowFactory 的接口，并把實(shí)現(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)容工廠的實(shí)例
- 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 是需要自己工具框類實(shí)現(xiàn)的方法，在這個(gè) createToolWindowContent 方法中把自己的窗體 ReadUI 實(shí)例化后填充進(jìn)去即可。
添加窗體的補(bǔ)助主要依賴于 ContentFactory.SERVICE.getInstance() 創(chuàng)建出 ContentFactory 并最終使用 toolWindow 添加窗體顯示 UI 即可。
這里我們額外的還添加了一個(gè)全局屬性 Config.readUI 這是為了后續(xù)可以在配置窗體中使用這個(gè) 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) {
- }
- }
- }
- 實(shí)現(xiàn)自 SearchableConfigurable 接口的方法比較多，包括：getId、getDisplayName、createComponent、isModified、apply 這些里面用于寫邏輯實(shí)現(xiàn)的主要是 createComponent 和 apply
- createComponent 方法主要是把我們自己創(chuàng)建的 UI 面板提供給 JComponent
- apply 是一個(gè)事件，當(dāng)我們點(diǎn)擊完成配置的 OK、完成，時(shí)候就會(huì)觸發(fā)到這個(gè)方法。在這個(gè)方法中我們拿到文件的 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 中還添加了一個(gè) icon 的 logo，配置完成后就可以在 IDEA 頁面展示出我們的自己添加的窗體了。
四、插件測(cè)試
- 通過 Plugin 啟動(dòng)插件，這個(gè)時(shí)候會(huì)打開一個(gè)新的 IDEA 窗體，在這個(gè)新窗體中就可以看到我們添加的功能了。
配置文件路徑
- 點(diǎn)擊選擇按鈕，選擇你的文件位置，選擇后點(diǎn)擊 OK
查看展示文件
確認(rèn)好文件路徑后，就可以再右側(cè)欄看到自己的文件展示內(nèi)容了。是不是在擴(kuò)展些，就適合你摸魚了!?
五、總結(jié)
學(xué)習(xí)自定義開發(fā)UI，把UI填充到需要放置的 IDEA 窗體位置，并在窗體中添加功能的流程步驟，其實(shí)主要包括三方面：Swing UI、Factory 實(shí)現(xiàn)類、plugin 配置。
在 plugin 配置中，主要包括如窗體ID、位置、icon圖標(biāo)、對(duì)應(yīng)的實(shí)現(xiàn)類，如果不添加這些是不能正常展示窗體信息的。
另外可以以這個(gè)案例為基礎(chǔ)，添加自己想完成的功能，比如讓這個(gè)摸魚看書的功能更加完善，可以支持不同類型的文件，甚至可以是 PDF 的閱讀，以及你想看的書籍。
