IntelliJ IDE 插件开发 | （二）UI 界面与数据持久化

系列文章

  • IntelliJ IDE 插件开发 |（一）快速入门

前言

在上一篇文章中介绍了在IDEA下开发、运行和安装插件的基本步骤，因此创建项目等基础步骤不再赘述，本文则开始介绍如何进行 UI 界面的开发以及相关数据的持久化存储，本文涉及到的的完整代码已上传到Github。

UI 界面开发

在开发插件的过程中，我们或多或少都需要进行 UI 界面的开发，但是IntelliJ IDE插件需要使用Swing进行 UI 的开发，相信大部分人都不太了解，因此本文及后续文章都选择使用UI Designer这款插件（IDEA 默认安装，可自行检查一下）通过可视化工具拖拽的方式来实现基本的界面设计。

image-20231205165021976

UI Designer 使用步骤

在上一篇文章中提到过，后续 UI 相关的开发使用 Java，其他则使用 Kolin，由于默认创建的工程目录如下，没有 Java 模块：

image-20231206094935959

所有我们首先需要创建 Java 模块：

image-20231206095044404

然后按照引导创建 UI 文件：

Clip_20231206_095314

image-20231206095502253

创建完成后，会出现类似下图的界面：

image-20231206100144787

可以看到，默认会创建一个 Java 类和一个 form 布局文件，其中 Java 文件主要用于后续控制字段的初始化及获取等操作，form 文件则用于界面布局，点击 form 文件会出现上图所示的三个栏目：组件属性栏、UI 效果栏和组件栏，其中先选中右侧组件然后就可以拖拽到中间的 UI 效果栏展示。

下面我们用一个简单的登录表单来讲解使用方式，首先以一个 GIF 演示拖拽功能开始：

修改 Label 的内容可以通过左侧工具栏或者直接在 UI 效果栏双击标签进行：

image-20231206104111547

输入框对应的字段名则通过左侧组件属性栏进行修改：

image-20231206104321338

这时候我们查看 UIDemo.java 文件会发现以下内容（注释随自己的配置变化）：

import javax.swing.*;/*** UI 界面** @author butterfly* @date 2023-12-06*/
public class UIDemo {private JTextField username;private JTextField password;
}

然后通过预览功能，我们也可以先查看表单效果：

动画

简单的使用步骤就到这里，这里就不挨个讲解组件的效果和使用方式了，后续会在使用的过程和实战应用中再进行讲解，大家也可以先自行探索。

使用平台自带组件

在上一小节中我们讲解了如何通过UI Designer插件来创建我们的 UI 界面，可以发现默认提供的 Swing UI 组件并没有办法满足我们的日常使用，比如文件下拉树选择组件就不存在。而我们对 Swing 的开发又不熟悉，那该怎么办呢？还好，我们还可以使用 IntelliJ 平台自带的组件，下面就来讲解使用方法：

首先在空白处右键创建一个分组：

image-20231206110825049

image-20231206110838272

然后右键分组选择第一项添加组件：

image-20231206110928930

选择类名的方式，然后点击...：

image-20231206111101478

这里输入TextFieldWithBrowseButton即可找到带有文件下拉树选择输入框：

image-20231206111329419

然后经过两次确认就可以发现组件已经添加到了右侧组件栏中：

image-20231206111601608

由于 UI Designer 的预览功能不支持原生组件的预览，需要运行插件才可以，这里先知道是类似下图选择文件夹的效果即可：

image-20231206144400519

平台自带的组件大多都可以在com.intellij.openapi.ui包下找到，根据组件名TextFieldWithBrowseButton我们也可以发现相关组件的命名也很规范，因此当需要某个组件时就可以先在该包下或者通过关键字进行搜索，除此之外，我们还可以参考开源插件来找到和学习原生组件的使用方式。

以 Git 插件为例，布局如下：

image-20231206150121611

可以在官方仓库找到源码（这里选择的是 192 版本这个分支，之后的版本布局开始使用 Kotlin 进行了重构）：

image-20231206152416294

image-20231206150819587

根据插件界面可以发现第一行就是使用带有文件树选择的输入框，我们在代码中也可以找到对应实现：

image-20231206151233997

image-20231206151309499

由于 192 版本之后使用 Kotlin 进行 UI 的编写，因此初学建议可以下载一个 192 的 IDEA 社区版进行界面的参考，这样通过参考布局及相应源码也是快速学习 UI 界面开发的一种方法。

至于如何快速找到插件的某个组件实现，这里建议在下载源码后，就可以根据界面上的提示文字进行代码的全局搜索即可。

在配置界面和侧边栏中展示 UI 界面

通过上述两步，我们可以了解到如何实现开发一个简单的 UI 界面，下面就开始讲解如何将设计好的界面展示在配置页面或者侧边栏中。

准备工作

在正式开始之前我们需要对上文中创建的界面进行一些修改，布局外层的 Panel 需要先设置一下字段名：

image-20231206155142916

然后增加相应的 Get 方法：

import javax.swing.*;/*** UI 界面** @author butterfly* @date 2023-12-06*/
public class UIDemo {private JTextField username;private JTextField password;private JPanel mainPanel;public JPanel getMainPanel() {return mainPanel;}}

准备工作到此结束。

配置界面 UI

接下来就是将 UI 展示在配置界面，我们先创建一个UISettingsConfig.kt文件：

import cn.butterfly.ui.UIDemo
import com.intellij.openapi.options.Configurable
import javax.swing.JComponent/*** UI 配置界面配置类** @author butterfly* @date 2023-12-06*/
class UISettingsConfig: Configurable {private val form = UIDemo()private val component: JComponentinit {component = form.mainPanel}override fun createComponent() = componentoverride fun isModified() = trueoverride fun apply() {}override fun getDisplayName() = "UISettingsConfig"}

然后在plugin.xml文件中进行如下的配置，这里的applicationConfigurable代表使用应用级别的配置，相应地，还有projectConfigurable代表项目级别的配置，具体区别在下文的数据持久化中进行介绍：

<extensions defaultExtensionNs="com.intellij"><applicationConfigurableinstance="cn.butterfly.ui.config.UISettingsConfig"id="cn.butterfly.ui.config.UISettingsConfig"displayName="UISettingsConfig"/>
</extensions>

这里我们运行插件，打开配置界面就可以发现我们的界面效果了：

image-20231206160442085

如果想要修改其显示位置，比如显示在Tools菜单下：

image-20231206160426698

只需要在配置中增加parentId="tools"即可：

<applicationConfigurableinstance="cn.butterfly.ui.config.UISettingsConfig"id="cn.butterfly.ui.config.UISettingsConfig"parentId="tools"displayName="UISettingsConfig"/>

applicationConfigurable中完整的配置项可查看官网文档。

侧边栏界面 UI

最后再来说明如何在侧边栏中显示界面，首先创建一个UISidebarConfig.kt：

import cn.butterfly.ui.UIDemo
import com.intellij.openapi.project.Project
import com.intellij.openapi.wm.ToolWindow
import com.intellij.openapi.wm.ToolWindowFactory
import com.intellij.ui.content.ContentFactory
import javax.swing.JComponent/*** UI 侧边栏界面配置类** @author butterfly* @date 2023-12-06*/
class UISidebarConfig: ToolWindowFactory {private val form = UIDemo()private val component: JComponentinit {component = form.mainPanel}override fun createToolWindowContent(project: Project, toolWindow: ToolWindow) {toolWindow.contentManager.addContent(ContentFactory.getInstance().createContent(component, "", false))}}

然后我们可以准备一个 svg 图标文件用于后续在侧边栏展示：

image-20231206162613699

同时需要创建对应的文件加载接口:

image-20231206163645276

import com.intellij.openapi.util.IconLoader;
import javax.swing.*;/*** 插件图标** @author butterfly* @date 2023-12-06*/
public interface PluginIcons {Icon BUTTERFLY = IconLoader.getIcon("/icons/butterfly.svg", PluginIcons.class);}

然后在plugin.xml配置文件中进行如下设置即可，anchor可设置默认位置，icon用于设置上文的图标：

<extensions defaultExtensionNs="com.intellij"><toolWindow id="UISettingsConfig" anchor="right"factoryClass="cn.butterfly.ui.config.UISidebarConfig"icon="cn.butterfly.ui.icons.PluginIcons.BUTTERFLY"/>
</extensions>

运行插件，即可在右侧的侧边栏看到我们设置的界面：

image-20231206164451821

数据持久化

讲完了界面开发的相关内容，下面就开始介绍如何进行配置数据的持久化，首先是创建一个存储数据信息的UIDemoState.kt文件：

import com.intellij.openapi.components.PersistentStateComponent
import com.intellij.openapi.components.Service
import com.intellij.openapi.components.State
import com.intellij.openapi.components.Storage
import com.intellij.util.xmlb.XmlSerializerUtil/*** 数据持久化存储** @author butterfly* @date 2023-12-06*/
@Service
@State(name = "UIDemoState", storages = [Storage("ui-demo-state.xml")])
class UIDemoState: PersistentStateComponent<UIDemoState> {var username = ""var password = ""override fun getState(): UIDemoState {return this}override fun loadState(state: UIDemoState) {XmlSerializerUtil.copyBean(state, this)}}

其中username和password对应表单中我们设置的两个字段，这里设置了默认值为空字符串，ui-demo-state.xml用于设置数据持久化存储的文件名。

然后我们需要对前文中创建的布局文件进行些许的修改，增加字段的 Get 方法：

import javax.swing.*;/*** UI 界面** @author butterfly* @date 2023-12-06*/
public class UIDemo {/*** 用户名*/private JTextField username;/*** 密码*/private JTextField password;private JPanel mainPanel;public JTextField getUsername() {return username;}public JTextField getPassword() {return password;}public JPanel getMainPanel() {return mainPanel;}}

最后我们就需要对前文中创建的UISettingsConfig.kt文件进行修改，用于处理界面上保存数据的操作：

import cn.butterfly.ui.UIDemo
import cn.butterfly.ui.state.UIDemoState
import com.intellij.openapi.application.ApplicationManager
import com.intellij.openapi.options.Configurable
import javax.swing.JComponent/*** UI 配置界面配置类** @author butterfly* @date 2023-12-06*/
class UISettingsConfig: Configurable {private val form = UIDemo()private val component: JComponentprivate val state = ApplicationManager.getApplication().getService(UIDemoState::class.java)init {component = form.mainPanelreset()}override fun createComponent() = componentoverride fun isModified(): Boolean {return state.username != form.username.text || state.password != form.password.text}override fun apply() {state.username = form.username.textstate.password = form.password.text}override fun reset() {form.username.text = state.usernameform.password.text = state.password}override fun getDisplayName() = "UISettingsConfig"}

其中reset用于重置表单内容为修改前设置的值，apply用于保存当前修改，isModified用于判断当前数据和上次数据之间是否存在不同，用于Apply按钮的禁用/激活状态的切换，这三个操作对应界面上的效果如下：

image-20231206180134340

image-20231206180129318

那我们的配置文件存储位置是在哪里呢？

由于在前文中我们使用applicationConfigurable选择了应用级别的存储，因此文件就存储在 IDEA 默认的配置文件存储地址：C:\Users\用户名\AppData\Roaming\JetBrains\IntelliJIdea2023.2\options，其中IntelliJIdea2023.2对应自己使用的 IDEA 名称。不过，由于我们当前是通过沙盒环境运行，所以位置并不是全局设置的位置，而是在build/idea-sandbox/config/options下：

image-20231206181847391

当我们将插件安装到我们正式的 IDEA 中，也就可以在上述的位置下发现配置文件了：

image-20231206182446451

如果我们将配置设为projectConfigurable选择项目级别，那么首先需要对配置文件进行如下修改：

<extensions defaultExtensionNs="com.intellij"><projectConfigurableinstance="cn.butterfly.ui.config.UISettingsConfig"id="cn.butterfly.ui.config.UISettingsConfig"parentId="tools"displayName="UISettingsConfig"/>
</extensions>

同时修改UIDemoState.kt文件上的注解配置：

import com.intellij.openapi.components.PersistentStateComponent
import com.intellij.openapi.components.Service
import com.intellij.openapi.components.State
import com.intellij.openapi.components.Storage
import com.intellij.util.xmlb.XmlSerializerUtil/*** 数据持久化存储** @author butterfly* @date 2023-12-06*/
@Service(Service.Level.PROJECT) // 只修改该行
@State(name = "UIDemoState", storages = [Storage("ui-demo-state.xml")])
class UIDemoState: PersistentStateComponent<UIDemoState> {var username = ""var password = ""override fun getState(): UIDemoState {return this}override fun loadState(state: UIDemoState) {XmlSerializerUtil.copyBean(state, this)}}

最后还需要修改UISettingsConfig.kt文件，增加一个 project 的构造参数并修改 state 的初始化：

import cn.butterfly.ui.UIDemo
import cn.butterfly.ui.state.UIDemoState
import com.intellij.openapi.options.Configurable
import com.intellij.openapi.project.Project
import javax.swing.JComponent/*** UI 配置界面配置类** @author butterfly* @date 2023-12-06*/
// 增加 project: Project 构造参数
class UISettingsConfig(project: Project): Configurable {private val form = UIDemo()private val component: JComponent// 修改该行private val state = project.getService(UIDemoState::class.java)init {component = form.mainPanelreset()}override fun createComponent() = componentoverride fun isModified(): Boolean {return state.username != form.username.text || state.password != form.password.text}override fun apply() {state.username = form.username.textstate.password = form.password.text}override fun reset() {form.username.text = state.usernameform.password.text = state.password}override fun getDisplayName() = "UISettingsConfig"}

然后我们就可以在项目下的.idea文件夹中找到我们针对项目级别的配置了：

image-20231206185943881

至于读取配置文件，则通过private val state = project.getService(UIDemoState::class.java)或者private val state = ApplicationManager.getApplication().getService(UIDemoState::class.java)分别换取项目或应用级别的 state 对象，然后读取其中的字段即可。

总结

本文讲解了关于 UI 界面开发和数据持久化相关的内容，如果有错误或不足之处，欢迎一起交流讨论。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/202317.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

安全测试工具，自动发现网站所有URL！

安全测试工具，自动发现网站所有URL！

作为一个安全测试人员来说&#xff0c;首先要拿到网站所有url&#xff0c;然后根据拿到的url进行渗透测试进行漏洞挖掘。本文给大家介绍的是如何拿到一个网站所有的url。 深度爬取层级控制 现在我也找了很多测试的朋友&#xff0c;做了一个分享技术的交流群&#xff0c;共享了很…
阅读更多...
ospf选路

ospf选路

问题描述 R6通过主备份路径访问LSP&#xff08;R1&#xff09;&#xff0c;主为R2&#xff0c; 备为R3 解决方案 路由器1看作LSP&#xff0c;配置loopback 0 ,地址为1.1.1.1 供测试使用&#xff1b;路由器 236, LSW4和LSW5&#xff0c; 运行ospf处于相同区域&#xff0c;建立…
阅读更多...
Redis核心知识点总结

Redis核心知识点总结

1.Redis介绍 Redis 是 NoSQL&#xff0c;但是可处理 1 秒 10w 的并发&#xff08;数据都在内存中&#xff09; 使用 java 对 redis 进行操作类似 jdbc 接口标准对 mysql&#xff0c;有各类实现他的实现类&#xff0c;我们常用的是 druid 其中对 redis&#xff0c;我们通常用 J…
阅读更多...
16、XSS——会话管理

16、XSS——会话管理

文章目录 一、web会话管理概述1.1 会话管理1.2 为什么需要会话管理&#xff1f;1.3 常见的web应用会话管理的方式 二、会话管理方式2.1 基于server端的session的管理方式2.2 cookie-based的管理方式2.3 token-based的管理方式 三、安全问题 一、web会话管理概述 1.1 会话管理 …
阅读更多...
加速度jsudo:IC商城系统4.0版正式发布 PCB计价电子元器件商城

加速度jsudo:IC商城系统4.0版正式发布 PCB计价电子元器件商城

近日&#xff0c;在加速度软件新品会发布会上&#xff0c;Mike正式公布了其4.0版本的电子元器件商城系统&#xff0c;展示了迭代后的强大新功能。在招募了数十家元器件销售、运营和老板测试体验后&#xff0c;获得了大家一致的好评。其中&#xff0c;中国电子南京某子公司董事长…
阅读更多...
VMware虚拟机系统CentOS镜像的下载

VMware虚拟机系统CentOS镜像的下载

文章目录 阿里云下载官网下载参考文档 一些小版本可能过时或者其他原因已经不能存在了&#xff0c;只有大版本号最新的&#xff0c;或者其他最新版本 阿里云下载 1-百度搜索&#xff1a;阿里云 2-找到开发者社区 3-找到下载&#xff0c;选择镜像 4-选择系统 5-点击镜像地…
阅读更多...
vivado时序方法检查3

vivado时序方法检查3

TIMING-7 &#xff1a; 相关时钟间无公共节点 时钟 <clock_name> 与 <clock_name> 之间相互关联 &#xff08; 一起定时 &#xff09;&#xff0c; 但两者间无公共节点。此设置在硬件中可能失败。要查找这些时钟之间的时序路径&#xff0c; 请运行以下命令 &a…
阅读更多...
岚图追光PHEV 25.28万元起售，开卷混动豪华轿车

岚图追光PHEV 25.28万元起售，开卷混动豪华轿车

作者&#xff5c;Amy 编辑&#xff5c;德新 12月5日晚&#xff0c;2023岚图科技日上&#xff0c;岚图汽车正式发布了其新一代SOA电子电气架构天元架构&#xff0c;并宣布了以“新行政电动旗舰”为定位的岚图追光PHEV正式上市。 岚图追光PHEV是岚图汽车旗下首款电混轿车&#x…
阅读更多...
selenium自动化测试：xpath八种定位方式！

selenium自动化测试：xpath八种定位方式！

01、前言 如果可以的话&#xff0c;请先关注&#xff08;专栏和账号&#xff09;&#xff0c;然后点赞和收藏&#xff0c;最后学习和进步。你的支持是我继续写下去的最大动力&#xff0c;个人定当倾囊而送&#xff0c;不负众望。谢谢&#xff01;&#xff01;&#xff01; 1.…
阅读更多...
【springboot】整合redis和定制化

【springboot】整合redis和定制化

1.前提条件:docker安装好了redis,确定redis可以访问 可选软件: 2.测试代码 (1)redis依赖 org.springframework.boot spring-boot-starter-data-redis (2)配置redis &#xff08;3&#xff09; 注入 Resource StringRedisTemplate stringRedisTemplate; 这里如果用Autowi…
阅读更多...
docker安装及简单使用（Linux版本）

docker安装及简单使用（Linux版本）

文章目录 前言一、docker安装二、docker命令pull&#xff08;安装镜像&#xff09;images&#xff08;查看镜像&#xff09;run&#xff08;创建容器&#xff09;删除容器exec&#xff08;进入运行中的容器&#xff09;常用命令 总结如有启发&#xff0c;可点赞收藏哟~ 前言 ht…
阅读更多...
Python 进阶（十三）：JSON 序列化和反序列化（json 模块）

Python 进阶（十三）：JSON 序列化和反序列化（json 模块）

大家好&#xff0c;我是水滴~~ 本篇文章主要介绍json模块的功能&#xff0c;包括将Python对象序列化到文件、将Python对象序列化为字符串、序列化时类型的对照表、将文件中JSON数据反序列化为Python对象&#xff0c;将JSON字符串反序列化为Python对象、反序列化时类型的对照表…
阅读更多...
2023中医药国际传承传播大会在深圳召开

2023中医药国际传承传播大会在深圳召开

12月2日&#xff0c;2023中医药国际传承传播大会在深圳召开&#xff0c;大会由世界针灸学会联合会、中新社国际传播集团、中国新闻图片网、中国民族医药学会、中国针灸学会主办&#xff0c;世界针灸学会联合会健康传播工作委员会、中新雅视文化发展有限公司公司与深圳巨邦传媒集…
阅读更多...
播放pcap抓包文件中的amr-wb、amr-nb、evs声音

播放pcap抓包文件中的amr-wb、amr-nb、evs声音

前言 由于wireshark并不能解析amr-wb、evs数据&#xff0c;所以也就没办法播放响应的音频。在遇到问题时&#xff0c;想还原抓包的数据是否正常就很难受。为了解决这个问题&#xff0c;我看了RFC4867&#xff0c;想着自己写一个解包小工具&#xff0c;最后彻底放弃。。感觉太复…
阅读更多...
Qt Creator :Analyze heob 使用教程

Qt Creator :Analyze heob 使用教程

功能&#xff1a;在windows系统上检测和调试软件代码的内存泄漏情况&#xff1b; 使用环境 &#xff1a;需要下载 heob和dwarfstack 把dwarfstack动态库放在heob的执行程序目录下 使用步骤&#xff1a; 第三步&#xff1a;配置启动调试程序 第四步&#xff1a;配置heob的路…
阅读更多...
什么因素会影响葡萄酒陈酿的能力？

什么因素会影响葡萄酒陈酿的能力？

糖、酸和酚类与水的比例是葡萄酒陈酿程度的关键决定因素&#xff0c;收获前葡萄中的水分越少&#xff0c;产生的葡萄酒就越有可能具有一定的陈酿潜力。那么葡萄品种、气候和葡萄栽培实践的过程就相当重要了&#xff0c;对陈酿的时间发挥了重要的作用。皮较厚的葡萄品种&#xf…
阅读更多...
C语言给定数字0-9各若干个。你可以以任意顺序排列这些数字，但必须全部使用。目标是使得最后得到的数尽可能小（注意0不能做首位）

C语言给定数字0-9各若干个。你可以以任意顺序排列这些数字，但必须全部使用。目标是使得最后得到的数尽可能小（注意0不能做首位）

这个题目要求的输出是一串数字&#xff01;&#xff01;&#xff01; 不是下面&#xff1a;输入在一行中给出 10 个非负整数&#xff0c;顺序表示我们拥有数字 0、数字 1、……数字 9 的个数。整数间用一个空格分隔。10 个数字的总个数不超过 50&#xff0c;且至少拥有 1 个非…
阅读更多...
Python自动化测试之破解图文验证码

Python自动化测试之破解图文验证码

对于web应用程序来讲&#xff0c;处于安全性考虑&#xff0c;在登录的时候&#xff0c;都会设置验证码&#xff0c; 验证码的类型种类繁多&#xff0c;有图片中辨别数字字母的&#xff0c;有点击图片中指定的文字的&#xff0c;也有算术计算结果的&#xff0c;再复杂一点就是滑…
阅读更多...
软考人数已超500万！请重视！

软考人数已超500万！请重视！

2020年40万&#xff0c;2021年94万&#xff0c;2022年129万&#xff0c;2023年软考报考人数已超500万&#xff01;2年时间直翻10倍&#xff01;如此火爆原因是什么&#xff1f; 不是打广告&#xff01;不是打广告&#xff01;不是打广告 千万不要上了”黑心培训结构“当&#x…
阅读更多...
App的回归测试，有什么高效的测试方法?

App的回归测试，有什么高效的测试方法?

直接抛出观点&#xff1a;高效的测试方法当然有&#xff0c;那就是采用【接口自动化】。 一、回归测试&#xff0c;测哪些东西 回归测试是软件测试过程中的一个重要的环节&#xff0c;如果说冒烟测试是对软件质量的抽检&#xff0c;那么回归测试就是保证软件质量的最后一道屏障…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023