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

news2024/12/1 2:42:00

系列文章

  • 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: JComponent
    
    init {
        component = form.mainPanel
    }
    
    override fun createComponent() = component
    
    override fun isModified() = true

    override fun apply() {}

    override fun getDisplayName() = "UISettingsConfig"

}

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

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

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

image-20231206160442085

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

image-20231206160426698

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

<applicationConfigurable
        instance="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: JComponent
    
    init {
        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: JComponent
    
    private val state = ApplicationManager.getApplication().getService(UIDemoState::class.java)
    
    init {
        component = form.mainPanel
        reset()
    }
    
    override fun createComponent() = component
    
    override fun isModified(): Boolean {
        return state.username != form.username.text || state.password != form.password.text
                
    }
    override fun apply() {
        state.username = form.username.text
        state.password = form.password.text
    }
    
    override fun reset() {
        form.username.text = state.username
        form.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">
    <projectConfigurable
            instance="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.mainPanel
        reset()
    }
    
    override fun createComponent() = component
    
    override fun isModified(): Boolean {
        return state.username != form.username.text || state.password != form.password.text
                
    }

    override fun apply() {
        state.username = form.username.text
        state.password = form.password.text
    }
    
    override fun reset() {
        form.username.text = state.username
        form.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.coloradmin.cn/o/1290469.html

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

相关文章

吴恩达《机器学习》11-3-11-5:类偏斜的误差度量、查准率和查全率之间的权衡、机器学习的数据

吴恩达《机器学习》11-3-11-5:类偏斜的误差度量、查准率和查全率之间的权衡、机器学习的数据

一、类偏斜的误差度量 误差度量的关键性 之前的课程中已经提到了误差分析和设定误差度量值的重要性。评估学习算法并衡量其表现需要使用一个实数&#xff0c;这就是误差度量值。然而&#xff0c;在某些情况下&#xff0c;特别是当处理偏斜类时&#xff0c;选择正确的误差度量…
阅读更多...
kafka学习笔记--基础知识概述

kafka学习笔记--基础知识概述

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…
阅读更多...
学习极市开发平台

学习极市开发平台

这是官网的链接&#xff1a;极市开发者平台-计算机视觉算法开发落地平台-极市科技 (cvmart.net) 第一次用这个平台有很多问题&#xff0c;首先在使用这个平台之前&#xff0c;我大部分时候使用的是百度的飞浆平台&#xff0c;也就是BML&#xff0c;去训练一些深度学习的模型。 …
阅读更多...
Mac端 DevEco Preview 窗口无法展示，提示文件中的node.dir错误

Mac端 DevEco Preview 窗口无法展示，提示文件中的node.dir错误

语雀知识库地址&#xff1a;语雀HarmonyOS知识库 飞书知识库地址&#xff1a;飞书HarmonyOS知识库 DevEco版本&#xff1a;Build Version: 3.1.0.501, built on June 20, 2023 环境信息 问题描述 打开 Preview 标签窗口后&#xff0c;提示Preview failed。 Run窗口提示如下 F…
阅读更多...
vue2 echarts饼状图，柱状图，折线图，简单封装以及使用

vue2 echarts饼状图，柱状图，折线图，简单封装以及使用

vue2 echarts饼状图&#xff0c;柱状图&#xff0c;折线图&#xff0c;简单封装以及使用 1. 直接上代码&#xff08;复制可直接用&#xff0c;请根据自己的文件修改引用地址&#xff0c;图表只是简单封装&#xff0c;可根据自身功能&#xff0c;进行进一步配置。&#xff09; …
阅读更多...
C#网络应用程序（Web页面浏览器、局域网聊天程序）

C#网络应用程序（Web页面浏览器、局域网聊天程序）

目录 一、创建Web页面浏览器 1.示例源码 2.生成效果 二、局域网聊天程序 1.类 2.服务器端 3.客户端 一、创建Web页面浏览器 TextBox 控件用来输入要浏览的网页地址&#xff0c;Button控件用来执行浏览网页操作&#xff0c; WebBrowser控件用来显示要浏览的网页。这个控…
阅读更多...
图像处理中的角点检测Python-OpenCV 中的实现

图像处理中的角点检测Python-OpenCV 中的实现

马丁亚当斯 (Martin Adams)在Unsplash上拍摄的照片 一、说明 在图像处理的背景下&#xff0c;“特征”可以直观地理解为图像中易于识别并用于表示图像的独特或独特的部分。将特征视为图像中使其可区分的“地标”或“焦点”。为了使这一点更具关联性&#xff0c;请考虑一下您如…
阅读更多...
gitLab 和Idea分支合并

gitLab 和Idea分支合并

以下二选1即可完成分支合并建议第一种简单有效 Idea合并方式 切换到被合并的分支&#xff0c;如我想把0701的内容合并到dev&#xff0c;切换到dev分支&#xff0c;然后再点击merge然后选择要合并的分支&#xff0c;即可,此时git上的代码没有更新只是把代码合到本地需要pull才…
阅读更多...
使用Java网络编程,窗口,线程,IO,内部类等实现多人在线聊天1.0

使用Java网络编程,窗口,线程,IO,内部类等实现多人在线聊天1.0

1.整体思路 思路图 整体思路如上: 涉及知识点:线程网络编程集合IO等 TCP 协议 2.代码实现过程 服务端 import javax.swing.*; import java.awt.*; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import java.awt.event.KeyAdapter; import jav…
阅读更多...
管理和监控CentOS上的HTTP服务

管理和监控CentOS上的HTTP服务

CentOS作为一款稳定的开源服务器操作系统&#xff0c;为各种网络服务提供了优秀的支持。其中&#xff0c;HTTP服务是互联网上最常用的服务之一&#xff0c;它为人们提供了便捷的信息访问和交互方式。在CentOS上管理和监控HTTP服务是一项重要的任务&#xff0c;下面我们将介绍一…
阅读更多...
华为数通---BFD多跳检测示例

华为数通---BFD多跳检测示例

定义 双向转发检测BFD&#xff08;Bidirectional Forwarding Detection&#xff09;是一种全网统一的检测机制&#xff0c;用于快速检测、监控网络中链路或者IP路由的转发连通状况。 目的 为了减小设备故障对业务的影响&#xff0c;提高网络的可靠性&#xff0c;网络设备需要…
阅读更多...
前端“量子纠缠”：multipleWindow3dScene 来了

前端“量子纠缠”：multipleWindow3dScene 来了

最近前端实现的量子纠缠在网络上火了起来&#xff0c;作者bgstaal的推文&#xff1a;效果如下&#xff1a; 量子纠缠 那我们一起来看下什么是量子纠缠&#xff0c;以及前端是如何实现的。 什么是量子纠缠&#xff1f; 在量子力学里&#xff0c;当几个粒子在彼此相互作用后&…
阅读更多...
【Java】实现顺序表基本的操作（数据结构）

【Java】实现顺序表基本的操作（数据结构）

文章目录 前言顺序表1、打印顺序表2、增加元素3、在任意位置增加元素4、判断是否包含某个元素5、查找某个元素对于的位置6、获取任意位置的元素7、将任意位置的元素设为value8、删除第一次出现的关键字9、获取顺序表长度10、清空顺序表总结 前言 在了解顺序表之前我们要先了解…
阅读更多...
rust高级 异步编程 二 pin

rust高级 异步编程 二 pin

文章目录 定海神针 Pin 和 Unpin为何需要 PinUnpin深入理解 PinPin 在实践中的运用固定到堆上将固定住的 Future 变为 Unpin总结 定海神针 Pin 和 Unpin 在 Rust 中&#xff0c;所有的类型可以分为两类: 类型的值可以在内存中安全地被移动&#xff0c;例如数值、字符串、布尔…
阅读更多...
OpenCV图像相似性比对算法

OpenCV图像相似性比对算法

背景 在做图像处理或者计算机视觉相关的项目的时候&#xff0c;很多时候需要我们对当前获得的图像和上一次的图像做相似性比对&#xff0c;从而找出当前图像针对上一次的图像的差异性和变化点&#xff0c;这需要用到OpenCV中的一些图像相似性和差异性的比对算法&#xff0c;在O…
阅读更多...
华为数通---配置端口安全案例

华为数通---配置端口安全案例

端口安全简介 端口安全&#xff08;Port Security&#xff09;通过将接口学习到的动态MAC地址转换为安全MAC地址&#xff08;包括安全动态MAC、安全静态MAC和Sticky MAC&#xff09;&#xff0c;阻止非法用户通过本接口和交换机通信&#xff0c;从而增强设备的安全性。 组网需…
阅读更多...
二百一十三、Flume——Flume拓扑结构介绍

二百一十三、Flume——Flume拓扑结构介绍

一、目的 最近在看尚硅谷的Flume资料&#xff0c;看到拓扑结构这一块&#xff0c;觉得蛮有意思&#xff0c;于是整理一下Flume的4种拓扑结构 二、拓扑结构 &#xff08;一&#xff09;简单串联 1、结构含义 这种模式是将多个flume顺序连接起来了&#xff0c;从最初的sourc…
阅读更多...
一键抠图|3个智能AI抠图软件实现抠图自由！

一键抠图|3个智能AI抠图软件实现抠图自由！

听说你对如何利用AI抠图技术去除白色背景感兴趣&#xff1f;设想一下&#xff0c;你有一张某人站在白色背景前的照片&#xff0c;而你只希望能留下这个人物。在过去&#xff0c;你可能需要花费大量时间和精力手动进行抠图。但现在&#xff0c;AI技术来拯救你了&#xff01;AI可…
阅读更多...
计网实验7

计网实验7

解决&#xff1a;路由器用rip连接&#xff0c;主机通过域名访问&#xff0c;主机之间发送电子邮件 实验步骤 1.搞好部件 2.配好两台主机的ip,掩码&#xff0c;网关 3.连接一下两台主机&#xff0c;由于两台路由器没有连接&#xff0c;所以两台主机也无法连通&#xff0c;丢包率…
阅读更多...
搭建个人网盘应用Nextcloud

搭建个人网盘应用Nextcloud

使用DNF管理软件包 1 使用winscp工具将openeuler-20.03-LTS-x86_64-dvd.iso上传至openeuler虚拟机的/root目录下&#xff0c;然后执行如下命令挂载ISO [rootopenEuler ~]# mount -o loop /root/openEuler-20.03-LTS-everything-x86_64-dvd.iso /mnt/2 添加软件源 [rootope…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023