目錄

• 一、前言

• 二、需求目的

• 三、案例開發

  • 1. 工程結構

  • 2. tab 頁窗體

  • 3. 股票框體設置

  • 4. 填充主面板到IDEA工具欄

  • 5. 數據持久化配置

  • 6. 股票接口

• 四、測試驗證

  • 1. 配置股票

  • 2. 自選股指數

  • 3. K線

• 五、總結

• 六、系列推薦

一、前言

沒招了，不寫點刺激的，你總是不好好看！

以前，我不懂。寫的技術就是技術內容，寫的場景就是場景分析，但從讀者的閱讀我發現，大家更喜歡的是技術與場景結合，尤其是用技術結合那些羞羞答答的場景，雖然嘴上都不說。

本章節主要是想給大家介紹關于在 IDEA 插件開發中如何使用工具欄和Tab頁，來填充在 IDEA 中底部的窗體，就像 IDEA 中的控制臺一樣。但就這么寫好像是夠嗆能有人看，因為大家只從技術點來看，很難發現這里面有什么應用場景，即使看了好像也不知道這技術能干啥。

那咋辦，整點刺激的吧。大家不是喜歡賠錢炒股嗎，那就把股票行情和K線展示結合到IDEA插件開發中。可以讓學習插件的伙伴，都能在寫代碼疲憊的時候還能看一眼股票，也許在關鍵的時候還能提醒你趕緊拋出去！

二、需求目的

安全起見，需要在 IDEA 中以一個比較隱秘的角落，開發股票插件，讓炒股的同學可以在緊張編碼CRUD之余，不要忘記自己關注的股票購買和拋售。

那么為了解決這個問題，我們需要幾個技術點，包括：股票數據接口、查詢對象封裝、IDEA 底部窗體和工具欄開發、定時任務掃描、Swing UI、股票代碼配置和保存、窗體按鈕事件監聽等。

接下來我們就結合這些技術點，來解決實際的場景問題，看看如何在 IDEA 中開發一個股票插件。

三、案例開發

1. 工程結構

guide-idea-plugin-tab ├──?.gradle └──?src├──?main│???└──?java│????└──?cn.bugstack.guide.idea.plugin?│????????├──?domain│????????│???├──?model│????????│???│??├──?aggregates│????????│???│??│???└──?StockResult.java????│????????│???│??└──?vo??│????????│???│??????├──?Data.java?│????????│???│??????├──?GoPicture.java?????│????????│???│??????└──?Stock.java???????│????????│???└──?service???│????????│???????├──?impl?????│????????│???????│???└──?StockImpl.java????│????????│???????└──?IStock??????│????????├──?factory│????????│???└──?TabFactory.java??│????????├──?infrastructure│????????│???├──?DataSetting.java???????│????????│???└──?DataState.java?????│????????├──?module│????????│???├──?RefreshBar.java???│????????│???├──?SettingBar.java????│????????│???└──?ViewBars.java?????????│????????└──?ui│????????│???├──?ConsoleUI.java?│????????│???├──?ConsoleUI.form│????????│???├──?GidConfig.java??│????????│???└──?GidConfig.form│????????└──?Config????├──?resources│???└──?META-INF│???????└──?plugin.xml?├──?build.gradle??└──?gradle.properties

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

在此 IDEA 插件工程中，主要分為5塊區域：

• domain：領域層，提供查詢股票接口的數據服務，如果你是做的一些其他工具型功能，也可以把業務類的內容放到 domain 中實現。

• factory：工廠層，這里主要提供的是一個工具窗體生成的入口對象，來創建出我們自己添加的窗體內容。

• infrastructure：基礎層，提供了數據存放對象，這個數據對象是一個可以落盤的操作，創建好的類配置到 plugin.xml ?中即可。?這樣我們配置好股票代碼后，關機重啟 IDEA 也可以把配置讀取出來

• module：模塊，提供用于 UI 窗體使用的一些工具頁操作。比如這里的 ViewBars 會在 TabFactory 中實例化，用于展示出你添加的窗體。

• ui：這一部分使用的是 IDEA 中自動拖拽生成的窗體，免去了手寫的復雜性，一些簡單的頁面直接拖拽就可以。?這也是一種低代碼哦！

接下來，我們就分別看下每個核心功能點的實現過程，這個過程中你可以提前把代碼下載下來，對照著學習會更加容易理解。

實現 ToolWindowFactory 開發一個底部的窗體，用于承載所需的內容

左側是側邊工具欄，配置自選股、刷新股票指數

右側是2個 tab 頁，分別用于展示股票數據和K線圖，這里的數據則需要通過股票接口來提供

2. tab 頁窗體

首先這里我們先使用 IDEA 插件開發中，Swing UI 功能，拖拽出2個簡單的窗體。有了這樣的一個基本結構大家的腦子里應該就可以有畫面了。

2.1 自選股配置窗體

public?class?GidConfig?implements?Configurable?{private?JPanel?mainPanel;private?JPanel?settingPanel;private?JLabel?gidLabel;private?JTextField?gidTextField;private?ConsoleUI?consoleUI;public?GidConfig(ConsoleUI?consoleUI){this.consoleUI?=?consoleUI;}public?JTextField?getGidTextField()?{return?gidTextField;}@Overridepublic?void?apply()?throws?ConfigurationException?{List<String>?gidList?=?DataSetting.getInstance().getGids();gidList.clear();String[]?gids?=?gidTextField.getText().trim().split(",");for?(String?gid?:?gids)?{gidList.add(gid.trim());}//?刷新數據consoleUI.addRows(gidList);}}

• 在 GidConfig 對應的 java 類中，可以對一些窗體中出現的屬性進行獲取。當用戶點擊這個窗體的確認按鈕后，我們可以在 apply 中拿到用戶配置的股票代碼，并對其進行讀取和設置股票數據。

2.2 股票展示窗體

public?class?ConsoleUI?{private?JTabbedPane?tabbedPane1;private?JPanel?one;private?JPanel?two;private?JLabel?picMin;private?JTable?table;private?JLabel?picDay;//?查詢數據服務private?IStock?stock?=?new?StockImpl();private?DefaultTableModel?defaultTableModel?=?new?DefaultTableModel(new?Object[][]{},?new?String[]{"股票",?"代碼",?"最新",?"漲跌",?"漲幅"});public?ConsoleUI()?{//?初始數據table.setModel(defaultTableModel);addRows(DataSetting.getInstance().getGids());//?添加事件table.addMouseListener(new?MouseAdapter()?{@Overridepublic?void?mouseClicked(MouseEvent?e)?{int?row?=?table.getSelectedRow();Object?value?=?table.getValueAt(row,?1);GoPicture?goPicture?=?stock.queryGidGoPicture(value.toString());try?{//?分鐘K線picMin.setSize(545,?300);picMin.setIcon(new?ImageIcon(new?URL(goPicture.getMinurl())));//?當日K線picDay.setSize(545,?300);picDay.setIcon(new?ImageIcon(new?URL(goPicture.getDayurl())));}?catch?(MalformedURLException?m)?{m.printStackTrace();}}});}public?JTabbedPane?getPanel()?{return?tabbedPane1;}public?void?addRows(List<String>?gids)?{//?查詢List<Data>?dataList?=?stock.queryPresetStockData(gids);//?清空int?rowCount?=?defaultTableModel.getRowCount();for?(int?i?=?0;?i?<?rowCount;?i++)?{defaultTableModel.removeRow(0);}//?添加for?(Data?data?:?dataList)?{defaultTableModel.addRow(new?String[]{data.getName(),?data.getGid(),?data.getNowPri(),?data.getIncrease(),?data.getIncrePer()});table.setModel(defaultTableModel);}}}

• 展示股票的窗體對應的 ConsoleUI 類，主要負責數據的渲染、更新和對每條數據的事件操作，當用戶點擊某一條數據以后，就可以到?K線?頁中看到對應的股票指數了。

3. 股票框體設置

在開發完 UI 窗體后，我們還需要使用一個 SimpleToolWindowPanel 的繼承實現類，承載工具欄和頁面的設置。

3.1 設置-工具欄

cn.bugstack.guide.idea.plugin.module.SettingBar

public?class?SettingBar?extends?DumbAwareAction?{private?ViewBars?panel;public?SettingBar(ViewBars?panel)?{super("配置股票",?"Click?to?setting",?IconLoader.getIcon("/icons/config.svg"));this.panel?=?panel;}@Overridepublic?void?actionPerformed(@NotNull?AnActionEvent?e)?{ShowSettingsUtil.getInstance().editConfigurable(panel.getProject(),?new?GidConfig(panel.getConsoleUI()));}}

• 設置工具欄位于自定義插件面板中最左側的位置，用于設置自選股票代碼。

• 通過在方法?actionPerformed?中使用?ShowSettingsUtil?工具類啟動 UI 窗體。

3.2 刷新-工具欄

cn.bugstack.guide.idea.plugin.module.RefreshBar

public?class?RefreshBar?extends?DumbAwareAction?{private?ViewBars?panel;public?RefreshBar(ViewBars?panel)?{super("刷新指數",?"Click?to?refresh",?IconLoader.getIcon("/icons/refresh.svg"));this.panel?=?panel;}@Overridepublic?void?actionPerformed(@NotNull?AnActionEvent?e)?{panel.getConsoleUI().addRows(DataSetting.getInstance().getGids());}}

• 在刷新工具欄中主要是用于手動觸發刷新股票最新結果，之所以使用手動刷新主要是這個接口有查詢次數限制，如果是定時任務一直跑，一會100次的查詢限制就用完了。?不過我們這里也是為了體現專欄內對技術的使用，增加多個設置按鈕，就更容易知道如何添加了

3.3 窗體填充面板

cn.bugstack.guide.idea.plugin.module.ViewBars

public?class?ViewBars?extends?SimpleToolWindowPanel?{private?Project?project;private?ConsoleUI?consoleUI;public?ViewBars(Project?project)?{super(false,?true);this.project?=?project;consoleUI?=?new?ConsoleUI();//?設置窗體側邊欄按鈕DefaultActionGroup?group?=?new?DefaultActionGroup();group.add(new?SettingBar(this));group.add(new?RefreshBar(this));ActionToolbar?toolbar?=?ActionManager.getInstance().createActionToolbar("bar",?group,?false);toolbar.setTargetComponent(this);setToolbar(toolbar.getComponent());//?添加JBSplitter?splitter?=?new?JBSplitter(false);splitter.setSplitterProportionKey("main.splitter.key");splitter.setFirstComponent(consoleUI.getPanel());splitter.setProportion(0.3f);setContent(splitter);}public?Project?getProject()?{return?project;}public?ConsoleUI?getConsoleUI()?{return?consoleUI;} }

• 在填充面板中主要是在我們自定義的插件中，在左側添加工具欄，其余位置添加股票展示面板。

• DefaultActionGroup?中可以以此添加設置和刷新按鈕，并最終填充到?ActionToolbar?里去，這樣就設置完成了。

• JBSplitter?是一個分割線，右側填充上我們的股票指數展示面板?splitter.setFirstComponent(consoleUI.getPanel())

4. 填充主面板到IDEA工具欄

4.1 窗體工廠

cn.bugstack.guide.idea.plugin.factory.TabFactory

public?class?TabFactory?implements?ToolWindowFactory?{@Overridepublic?void?createToolWindowContent(@NotNull?Project?project,?@NotNull?ToolWindow?toolWindow)?{//?窗體ViewBars?viewPanel?=?new?ViewBars(project);//?獲取內容工廠的實例ContentFactory?contentFactory?=?ContentFactory.SERVICE.getInstance();//?獲取?ToolWindow?顯示的內容Content?content?=?contentFactory.createContent(viewPanel,?"股票",?false);//?設置?ToolWindow?顯示的內容toolWindow.getContentManager().addContent(content,?0);//?定時任務，自動刷新股票/*?因每日查詢次數限制，這里就不開定時任務了，用戶可以自行申請?https://dashboard.juhe.cn/homeTimer?timer?=?new?Timer();timer.schedule(new?TimerTask()?{@Overridepublic?void?run()?{viewPanel.getConsoleUI().addRows(DataSetting.getInstance().getGids());}},?3000,?2000);*/}}

• 在 TabFactory 中主要包括兩部分，一個是把 ViewBars 填充到整個 toolWindow 中，另外一個是我們目前已經注釋掉的刷新股票數據的定時任務。

• 這里由于股票接口查詢次數限制，所以就把定時任務注釋掉了，否則一會就把可用次數跑沒了。

4.2 配置窗體

plugin.xml

<idea-plugin><extensions?defaultExtensionNs="com.intellij"><!--?Add?your?extensions?here?--><toolWindow?id="XUtil"canCloseContents="true"anchor="bottom"factoryClass="cn.bugstack.guide.idea.plugin.factory.TabFactory"icon="/icons/stock.png"/></extensions></idea-plugin>

• 這里我們把窗體配置到整個 IDEA 界面的最下方?anchor="bottom"?這個位置既方便又最安全

5. 數據持久化配置

• 當我們使用 IDEA 進行配置一些基本參數后，例如：Maven、Gradle、Git、簽名信息等，在日常的關閉和重啟 IDEA 時，這些配置信息是會保存下來的，而不會說關閉就沒了。

• 那么我們開發的這款插件需要做的一些自選股票代碼配置，也要進行保存，否則不能每次都在 IDEA 啟動時重新設置。所以這里我們需要用到?plugin.xml?中?applicationService?配置上實現了?PersistentStateComponent?的數據設置存放類。

5.1 對象數據

cn.bugstack.guide.idea.plugin.infrastructure.DataState

public?class?DataState?{private?List<String>?gids?=?new?ArrayList<>();public?List<String>?getGids()?{return?gids;}public?void?setGids(List<String>?gids)?{this.gids?=?gids;}}

• 這個是數據對象類，你可以在這里設置你需要的屬性存放，就像 gids 一樣，用于存放用戶配置的股票代碼集合。

5.2 持久數據

cn.bugstack.guide.idea.plugin.infrastructure.DataSetting

@State(name?=?"DataSetting",storages?=?@Storage("plugin.xml")) public?class?DataSetting?implements?PersistentStateComponent<DataState>?{private?DataState?state?=?new?DataState();public?static?DataSetting?getInstance()?{return?ServiceManager.getService(DataSetting.class);}@Nullable@Overridepublic?DataState?getState()?{return?state;}@Overridepublic?void?loadState(@NotNull?DataState?state)?{this.state?=?state;}public?List<String>?getGids(){return?state.getGids();}}

• DataSetting 類需要使用到 IDEA 插件開發的提供的注解 @State 配置持久對象

• 此外還需要提供一個 getInstance 方法來獲取數據對象實例，那么在我們實際使用的時候就可以拿到我們配置的對象了并進行設置和讀取數據。

5.3 plugin.xml 配置

<extensions?defaultExtensionNs="com.intellij"><!--?Add?your?extensions?here?--><applicationService?serviceImplementation="cn.bugstack.guide.idea.plugin.infrastructure.DataSetting"/> </extensions>

• 在創建好數據設置類以后，則需要使用 applicationService 標簽把你的類配置到 plugin.xml 中 extensions 里面。

6. 股票接口

6.1 技術調研

• 無論什么功能開發，在開始之前都需要把這些零碎的事情處理完，才能進行代碼開發，這個過程也叫做技術調研到設計和評審。就像現在我們需要進行股票信息的查詢，那么就需要找到一個可以提供數據查詢的接口，看看這個接口如何申請使用，以及返回的對象都有哪些字段，是否符合我們的預期。

• 這里小傅哥找到了一個聚合數據的接口，不過只能免費100次/天調用，如果你有更好的可以更換下。

• 接口：http://web.juhe.cn:8080/finance/stock/hs?gid=sz000651&key=自己申請 - 這里的 key 需要自己申請

• 數據：

6.2 服務封裝

有了股票的查詢接口，接下來就可以對數據做一個查詢和對象轉換了。

cn.bugstack.guide.idea.plugin.domain.service.impl.StockImpl

public?class?StockImpl?implements?IStock?{//?自行申請，股票API，替換key即可【一天可免費調用100次】：https://dashboard.juhe.cn/home/private?final?String?key?=?"4bc57728***********f0595";@Overridepublic?List<Data>?queryPresetStockData(List<String>?gids)?{List<Data>?dataList?=?new?ArrayList<>();for?(String?gid?:?gids)?{StockResult?stockResult?=?JSON.parseObject(HttpUtil.get("http://web.juhe.cn:8080/finance/stock/hs?gid="?+?gid?+?"&key="?+?key),?StockResult.class);Stock[]?stocks?=?stockResult.getResult();for?(Stock?stock?:?stocks)?{dataList.add(stock.getData());}}return?dataList;}}

• 這里我們在 domain 領域層中定義數據 vo 對象，以及提供股票查詢服務的封裝。這樣調用方就可以直接使用這份數據了，如果你是其他廠商提供的股票查詢接口，也可以進行封裝和更換，做一個接口適配層。

四、測試驗證

• 如果你下載工程后沒有 Plugin 和一個綠色箭頭，那么可以按照圖自己配置?:runIde?這樣就可以運行了。

運行效果?- 激動人心的時刻到了，再也不用擔心寫代碼影響看股票了哦

1. 配置股票

• 首先你需要在這里配置你關注的股票代碼，我配置了3個我看好的。

2. 自選股指數

• 配置好以后你就可以看到自己的自選股指數了，選中一條以后，在點擊K線。

• 當你需要看最新數據的時候，可以點左側的刷新按鈕。

3. K線

• 現在這個就是對應的 K線，是不是還挺香的。目前是加了最近K線和日K線，你還可以擴展其他維度的圖。

五、總結

• 本章節我們使用到了在 IDEA 窗體中添加稍微復雜一些的頁面結構，有側邊欄、有Tab頁，并在需要在這些頁面體中進行交互和通信。此外還是用到了數據的存儲設置，這個在很多時候開發IDEA插件里都會用到。

• 像是這樣的技術實踐不只是可以用于展示股票數據，你還可以結合自己所需擴展屬于你實際場景中需要的內容，比如開發一個數據集中查詢插件，可以查詢數據庫、ES、Redis等，也可以是所有的工具類集合頁，這些內容會更有技術價值。

• 當你自己開始主動的向你學習到的一些源碼、框架、組件、項目等中添加自己想要的功能時，就是你真的開始學習了，否則一個內容看過沒多久也就忘記了。

總結

以上是生活随笔為你收集整理的IDEA插件神操作，开发工具栏和Tab页，展示股票行情和K线的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。