EA下开发、运行和安装插件的基本步骤因此创建项目等基础步骤不再赘述本文则开始介绍如何进行

界面的开发以及相关数据的持久化存储本文涉及到的的完整代码已上传到Github。

界面开发

默认安装可自行检查一下通过可视化工具拖拽的方式来实现基本的界面设计。

Designer

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

使用平台自带组件

组件并没有办法满足我们的日常使用比如文件下拉树选择组件就不存在。

而我们对

Swing

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

Designer

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

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

Git

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

192

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

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

界面下面就开始讲解如何将设计好的界面展示在配置页面或者侧边栏中。

准备工作

在正式开始之前我们需要对上文中创建的界面进行一些修改布局外层的

Panel

展示在配置界面我们先创建一个UISettingsConfig.kt文件

import

com.intellij.openapi.options.Configurable

import

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

extensions

defaultExtensionNscom.intellijapplicationConfigurableinstancecn.butterfly.ui.config.UISettingsConfigidcn.butterfly.ui.config.UISettingsConfigdisplayNameUISettingsConfig/

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

applicationConfigurableinstancecn.butterfly.ui.config.UISettingsConfigidcn.butterfly.ui.config.UISettingsConfigparentIdtoolsdisplayNameUISettingsConfig/applicationConfigurable中完整的配置项可查看官网文档。

侧边栏界面

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

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

createToolWindowContent(project:

Project,

{toolWindow.contentManager.addContent(ContentFactory.getInstance().createContent(component,

svg

com.intellij.openapi.util.IconLoader;

import

IconLoader.getIcon(/icons/butterfly.svg,

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

extensions

defaultExtensionNscom.intellijtoolWindow

idUISettingsConfig

anchorrightfactoryClasscn.butterfly.ui.config.UISidebarConfigiconcn.butterfly.ui.icons.PluginIcons.BUTTERFLY/

/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/***

数据持久化存储**

PersistentStateComponentUIDemoState

{var

{XmlSerializerUtil.copyBean(state,

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

Get

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

import

cn.butterfly.ui.state.UIDemoState

import

com.intellij.openapi.application.ApplicationManager

import

com.intellij.openapi.options.Configurable

import

ApplicationManager.getApplication().getService(UIDemoState::class.java)init

{component

form.username.textstate.password

fun

state.usernameform.password.text

fun

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

由于在前文中我们使用applicationConfigurable选择了应用级别的存储因此文件就存储在

IDEA

默认的配置文件存储地址C:\Users\用户名\AppData\Roaming\JetBrains\IntelliJIdea2023.2\options其中IntelliJIdea2023.2对应自己使用的

IDEA

名称。

不过由于我们当前是通过沙盒环境运行所以位置并不是全局设置的位置而是在build/idea-sandbox/config/options下

IDEA

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

extensions

defaultExtensionNscom.intellijprojectConfigurableinstancecn.butterfly.ui.config.UISettingsConfigidcn.butterfly.ui.config.UISettingsConfigparentIdtoolsdisplayNameUISettingsConfig/

/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/***

数据持久化存储**

PersistentStateComponentUIDemoState

{var

{XmlSerializerUtil.copyBean(state,

this)}}最后还需要修改UISettingsConfig.kt文件增加一个

project

cn.butterfly.ui.state.UIDemoState

import

com.intellij.openapi.options.Configurable

import

com.intellij.openapi.project.Project

import

project.getService(UIDemoState::class.java)init

{component

form.username.textstate.password

fun

state.usernameform.password.text

fun

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

val

project.getService(UIDemoState::class.java)或者private

val

ApplicationManager.getApplication().getService(UIDemoState::class.java)分别换取项目或应用级别的

state

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