51工具盒子# 前言 {#前言}
在IDEA插件开发系列的上一篇文章中，我介绍了ConvertX插件是如何实现的。因为ConvertX插件没有涉及UI相关的内容，因此在这一篇文章中，我会带大家一起做一个包含UI内容的插件，一个能看股票的插件。
# 插件效果 {#插件效果}
首先是在设置中配置股票的编号，如sh000001,sh600519。
接着在侧边栏中有一个叫做Stock Prices的Tab框，点击之后，设置的这几个股票就出现了
当点击刷新按钮之后，就会重新刷新数据，上边的最新更新日期也会同步变化。
# 源码地址 {#源码地址}
代码已在github开源，可以直接访问，大家觉得有用的点点star哦：https://github.com/OliverLiy/StockWatch
# 项目结构 {#项目结构}
首先还是先看一下项目结构：
从上到下依次介绍：
- 1、StockSettingsComponent保存了配置页面的样式。
- 2、StockConfigurable是配置页面的配置类，加载了StockSettingsComponent这个组件。
- 3、handler里的是一个OkHttp的单例实现类，以及调用股票接口的处理器，response是接口的返回。
- 4、StockSettingsState中保存的是配置的持久化内容，这个文件会保存在本地。
- 5、StockToolWindow是在侧边栏展示的内容，也就是最终看到的效果。
所有的图都是用javax.swing画的，如果想实现更加多的功能，可以把这块代码好好看看。
# 配置功能的实现 {#配置功能的实现}
配置功能要做的事情是把股票编号的配置交给用户自己，首先定义了一个配置的持久化类叫做StockSettingsState
import com.intellij.openapi.components.PersistentStateComponent;
import com.intellij.openapi.components.ServiceManager;
import com.intellij.openapi.components.State;
import com.intellij.openapi.components.Storage;
import org.jetbrains.annotations.NotNull;
import org.jetbrains.annotations.Nullable;
/**
-
@author by: 神秘的鱼仔
-
@ClassName: StockSettingsState
-
@Description: 股票配置的持久化类
@Date: 2024/7/5 下午4:17 / @State( name = "top.codeease.stockwatch.storage.StockSettingsState", storages = @Storage("StockPluginSettings.xml") ) public class StockSettingsState implements PersistentStateComponent<StockSettingsState> { /*
- 默认股票符号，取上证指数 */ public String stockSymbol = "sh000001";
public static StockSettingsState getInstance() { return ServiceManager.getService(StockSettingsState.class); }
@Nullable @Override public StockSettingsState getState() { return this; }
@Override public void loadState(@NotNull StockSettingsState state) { this.stockSymbol = state.stockSymbol; } }
这个持久化文件最终会保存在本地。
接着定义一个组件类叫做StockSettingsComponent，就用一个JPanel包裹一个JTextField。
import javax.swing.*;
/**
-
@author by: 神秘的鱼仔
-
@ClassName: StockSettingsComponent
-
@Description: 设置组件类
@Date: 2024/7/5 下午4:03 */ public class StockSettingsComponent { private JPanel panel; private JTextField stockSymbolTextField;
public StockSettingsComponent() { panel = new JPanel(); stockSymbolTextField = new JTextField(40); panel.add(new JLabel("请输入股票编号(用英文逗号分割):")); panel.add(stockSymbolTextField); }
public JPanel getPanel() { return panel; }
public String getStockSymbol() { return stockSymbolTextField.getText(); }
public void setStockSymbol(String stockSymbol) { stockSymbolTextField.setText(stockSymbol); } }
最后就是一个配置类将上面两个类拼装起来了，代码比较简单，大家看了就可以看懂了。
import com.intellij.openapi.options.Configurable;
import org.jetbrains.annotations.Nls;
import org.jetbrains.annotations.Nullable;
import top.codeease.stockwatch.component.StockSettingsComponent;
import top.codeease.stockwatch.storage.StockSettingsState;
import javax.swing.*;
/**
-
@author by: 神秘的鱼仔
-
@ClassName: StockConfigurable
-
@Description: 股票配置的最终实现
@Date: 2024/7/9 上午10:09 */ public class StockConfigurable implements Configurable { private StockSettingsComponent settingsComponent;
@Override public @Nls(capitalization = Nls.Capitalization.Title) String getDisplayName() { return "Stock Plugin"; }
@Override public @Nullable JComponent createComponent() { settingsComponent = new StockSettingsComponent(); return settingsComponent.getPanel(); }
@Override public boolean isModified() { StockSettingsState settings = StockSettingsState.getInstance(); return !settingsComponent.getStockSymbol().equals(settings.stockSymbol); }
@Override public void apply() { StockSettingsState settings = StockSettingsState.getInstance(); settings.stockSymbol = settingsComponent.getStockSymbol(); }
@Override public void reset() { StockSettingsState settings = StockSettingsState.getInstance(); settingsComponent.setStockSymbol(settings.stockSymbol); } }
最终要将配置类注册到plugin.xml中，我们等全部介绍完后一起放进去。
# 找一个股票接口 {#找一个股票接口}
股票接口网上一找一大片，我这里找了个腾讯的接口：https://qt.gtimg.cn/q=sh000001 (opens new window)
点击后拿到的结果长下面这样，不同的数据之间用～分割
v_sh000001="1~上证指数~000001~2974.01~2971.30~2963.85~268992597~0~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~~20240715155911~2.71~0.09~2977.31~2959.13~2974.01/268992597/268733339474~268992597~26873334~0.57~13.32~~2977.31~2959.13~0.61~429130.60~566227.31~0.00~-1~-1~0.88~0~2970.27~~~~~~26873333.9474~0.0000~0~ ~ZS~-0.03~1.76~~~~3322.13~2635.09~-0.69~-1.39~-1.10~4546667906679~~-10.22~-2.77~4546667906679~~~-8.14~-0.05~~CNY~0~~0.00~0";
我将其中一些关键的参数记录了下来：
0: 未知
1: 名字
2: 代码
3: 当前价格
4: 昨收
5: 今开
6: 成交量（手）
7: 外盘
8: 内盘
29: 最近逐笔成交
30: 时间
31: 涨跌
32: 涨跌%
33: 最高
34: 最低
35: 价格/成交量（手）/成交额
36: 成交量（手）
37: 成交额（万）
38: 换手率
39: 市盈率
41: 最高
42: 最低
43: 振幅
44: 流通市值
45: 总市值
46: 市净率
47: 涨停价
48: 跌停价
自定义一个接口的返回结构，只取我想展示的内容：
/**
* @author by: 神秘的鱼仔
* @ClassName: GetStockPriceResponse
* @Description: 股票结果返回
* @Date: 2024/7/12 下午5:03
*/
@Data
public class GetStockPriceResponse {
/**
* 股票名称
*/
private String stockName;
/**
* 股票编号
*/
private String stockNo;
/**
* 当前价格
*/
private String lastTrade;
/**
* 涨跌幅
*/
private String change;
/**
* 昨收
*/
private String prevClose;
/**
* 今开
*/
private String open;
}
然后编写OkHTTP的单例实现类：
import okhttp3.OkHttpClient;
import java.util.concurrent.TimeUnit;
/**
-
@author by: 神秘的鱼仔
-
@ClassName: OkHttpClientSingleton
-
@Description: OkHttp模块的单例实现
@Date: 2024/7/12 上午9:52 */ public class OkHttpClientSingleton { private static OkHttpClient instance;
private OkHttpClientSingleton() { // 私有构造函数，防止外部实例化
}
public static OkHttpClient getInstance() { if (instance == null) { synchronized (OkHttpClientSingleton.class) { if (instance == null) { OkHttpClient.Builder builder = new OkHttpClient.Builder();
// 设置连接超时 builder.connectTimeout(60, TimeUnit.SECONDS); // 设置读取超时 builder.readTimeout(60, TimeUnit.SECONDS); // 设置写入超时 builder.writeTimeout(60, TimeUnit.SECONDS); // 构建 OkHttpClient 实例 instance = builder.build(); } } } return instance;} }
最后编写获取数据以及处理数据的处理器：
/** * @author by: 神秘的鱼仔 * @ClassName: StockPriceExecutor * @Description: 股票价格 * @Date: 2024/7/12 下午2:41 */ public class StockPriceHandler {/** * 腾讯的股票API接口 */ private String STOCK_API_TX = "https://qt.gtimg.cn/q="; public List<GetStockPriceResponse> fetchStockPrice(String stockSymbol) { OkHttpClient client = OkHttpClientSingleton.getInstance(); String url = STOCK_API_TX + stockSymbol; Request request = new Request.Builder() .url(url) .build(); String responseData = ""; List<GetStockPriceResponse> stockPriceResponseList = new ArrayList<>(); try { Response response = client.newCall(request).execute(); responseData = response.body().string(); stockPriceResponseList = dealData(responseData); System.out.println(responseData); } catch (IOException e) { e.printStackTrace(); } return stockPriceResponseList; } /** * 接口数据处理，获取到腾讯的接口后会拿到这样一串字符串，如： * v_sh000001="1~上证指数~000001~2971.30~2970.39~2965.61~303713014~0~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~0.00~0~~20240712153511~0.91~0.03~2977.14~2963.30~2971.30/303713014/302581575979~303713014~30258158~0.65~13.27~~2977.14~2963.30~0.47~428104.13~563894.26~0.00~-1~-1~1.02~0~2970.97~~~~~~30258157.5979~0.0000~0~ ~ZS~-0.12~0.72~~~~3322.13~2635.09~0.13~-2.02~-2.82~4534435145087~~-16.75~-3.64~4534435145087~~~-8.19~0.01~~CNY~0~~0.00~0"; * 以 ~ 进行分割，一些重要的数据 * 0: 未知 * 1: 名字 * 2: 代码 * 3: 当前价格 * 4: 昨收 * 5: 今开 * 6: 成交量（手） * 7: 外盘 * 8: 内盘 * 29: 最近逐笔成交 * 30: 时间 * 31: 涨跌 * 32: 涨跌% * 33: 最高 * 34: 最低 * 35: 价格/成交量（手）/成交额 * 36: 成交量（手） * 37: 成交额（万） * 38: 换手率 * 39: 市盈率 * 41: 最高 * 42: 最低 * 43: 振幅 * 44: 流通市值 * 45: 总市值 * 46: 市净率 * 47: 涨停价 * 48: 跌停价 * @param responseData * @return */ private List<GetStockPriceResponse> dealData(String responseData) { List<GetStockPriceResponse> getStockPriceResponseList = new ArrayList<>(); // 如果有多个股票号，先通过;进行拆分 responseData = responseData.substring(0, responseData.length() - 1); String[] stockArray = responseData.split(";"); for (String stockInfo : stockArray) { GetStockPriceResponse response = new GetStockPriceResponse(); String[] split = stockInfo.split("~"); response.setStockName(split[1]); response.setStockNo(split[2]); response.setLastTrade(split[3]); response.setChange(split[32]); response.setPrevClose(split[4]); response.setOpen(split[5]); getStockPriceResponseList.add(response); } return getStockPriceResponseList; }
}
# 完成最终的页面 {#完成最终的页面}
股票页面由一个按钮JButton，一个展示时间的JLabel，以及表格JBTable组成，代码比较简单，大家可以直接看源码实现。
import com.intellij.openapi.project.Project; import com.intellij.openapi.wm.ToolWindow; import com.intellij.openapi.wm.ToolWindowFactory; import com.intellij.ui.content.Content; import com.intellij.ui.content.ContentFactory; import com.intellij.ui.table.JBTable; import org.jetbrains.annotations.NotNull; import top.codeease.stockwatch.handler.StockPriceHandler; import top.codeease.stockwatch.response.GetStockPriceResponse; import top.codeease.stockwatch.storage.StockSettingsState; import top.codeease.stockwatch.util.DateUtil;import javax.swing.; import javax.swing.table.DefaultTableModel; import java.awt.; import java.util.List;
/**
@author by: 神秘的鱼仔
@ClassName: StockToolWindow
@Description: 股票展示页面
@Date: 2024/7/11 下午11:04 */ public class StockToolWindow implements ToolWindowFactory { private JPanel mainPanel; private JButton refreshButton; private JBTable stockTable; private DefaultTableModel tableModel; private JLabel lastUpdatedLabel; private final String[] columnNames = {"股票名称", "股票编号","当前价格","涨跌%","昨收","今开"};
@Override public void createToolWindowContent(@NotNull Project project, @NotNull ToolWindow toolWindow) { mainPanel = new JPanel(new BorderLayout());
// 创建按钮 JPanel buttonPanel = new JPanel(); refreshButton = new JButton("Refresh"); lastUpdatedLabel = new JLabel("Last Updated: " + DateUtil.getNowTime()); buttonPanel.add(refreshButton); buttonPanel.add(lastUpdatedLabel); // 创建表格 Object[][] data = getDataArray(); tableModel = new DefaultTableModel(data, columnNames); stockTable = new JBTable(tableModel); // 添加组件到主面板 mainPanel.add(buttonPanel, BorderLayout.NORTH); mainPanel.add(new JScrollPane(stockTable), BorderLayout.CENTER); ContentFactory contentFactory = ContentFactory.SERVICE.getInstance(); Content content = contentFactory.createContent(mainPanel, "", false); toolWindow.getContentManager().addContent(content); // 添加按钮操作逻辑 refreshButton.addActionListener(e -> refreshFetchingStockPrice());}
/**
- 刷新股票的价格数据 */ private void refreshFetchingStockPrice() { Object[][] data = getDataArray(); tableModel = new DefaultTableModel(data, columnNames); stockTable.setModel(tableModel); lastUpdatedLabel.setText("Last Updated: " + DateUtil.getNowTime()); }
/**
- 获取表格的数据列
- @return */ private Object[][] getDataArray() { String stockSymbol = StockSettingsState.getInstance().stockSymbol; StockPriceHandler handler = new StockPriceHandler(); List<GetStockPriceResponse> getStockPriceResponseList = handler.fetchStockPrice(stockSymbol); Object[][] data = new Object[getStockPriceResponseList.size()][]; for (int i = 0; i < getStockPriceResponseList.size(); i++) { GetStockPriceResponse stockPriceResponse = getStockPriceResponseList.get(i); Object[] rowData = {stockPriceResponse.getStockName(),stockPriceResponse.getStockNo() ,stockPriceResponse.getLastTrade(),stockPriceResponse.getChange() ,stockPriceResponse.getPrevClose(),stockPriceResponse.getOpen()}; data[i] = rowData; } return data; }
}
# 配置Plugin.xml {#配置plugin-xml}
最后配置一下Plugin.xml，在extensions中，将需要注册的类注册进去。
<extensions defaultExtensionNs="com.intellij">
<!-- Add your extensions here -->
<applicationService serviceImplementation="top.codeease.stockwatch.storage.StockSettingsState"/>
<projectConfigurable instance="top.codeease.stockwatch.config.StockConfigurable"/>
<toolWindow id="Stock Prices" anchor="right" factoryClass="top.codeease.stockwatch.window.StockToolWindow"/>
</extensions>
这样一个股票插件就实现了。
# 总结 {#总结}
在这一期的文章中，我们实现了一个股票的插件，这个系列接下来还会持续更新，大家可以持续关注哦。
