创建完成后，会出现类似下图的界面：
可以看到，默认会创建一个Java类和一个form布局文件，其中Java文件主要用于后续控制字段的初始化及获取等操作，form文件则用于界面布局，点击form文件会出现上图所示的三个栏目：组件属性栏、UI效果栏和组件栏，其中先选中右侧组件然后就可以拖拽到中间的UI效果栏展示。
修改Label的内容可以通过左侧工具栏或者直接在UI效果栏双击标签进行：
输入框对应的字段名则通过左侧组件属性栏进行修改：
这时候我们查看UIDemo.java文件会发现以下内容（注释随自己的配置变化）：
importjavax.swing.*;/***UI界面**@authorbutterfly*@date2023-12-06*/publicclassUIDemo{privateJTextFieldusername;privateJTextFieldpassword;}然后通过预览功能，我们也可以先查看表单效果：
简单的使用步骤就到这里，这里就不挨个讲解组件的效果和使用方式了，后续会在使用的过程和实战应用中再进行讲解，大家也可以先自行探索。
在上一小节中我们讲解了如何通过UIDesigner插件来创建我们的UI界面，可以发现默认提供的SwingUI组件并没有办法满足我们的日常使用，比如文件下拉树选择组件就不存在。而我们对Swing的开发又不熟悉，那该怎么办呢？还好，我们还可以使用IntelliJ平台自带的组件，下面就来讲解使用方法：
首先在空白处右键创建一个分组：
然后右键分组选择第一项添加组件：
选择类名的方式，然后点击...：
这里输入TextFieldWithBrowseButton即可找到带有文件下拉树选择输入框：
然后经过两次确认就可以发现组件已经添加到了右侧组件栏中：
由于UIDesigner的预览功能不支持原生组件的预览，需要运行插件才可以，这里先知道是类似下图选择文件夹的效果即可：
以Git插件为例，布局如下：
根据插件界面可以发现第一行就是使用带有文件树选择的输入框，我们在代码中也可以找到对应实现：
由于192版本之后使用Kotlin进行UI的编写，因此初学建议可以下载一个192的IDEA社区版进行界面的参考，这样通过参考布局及相应源码也是快速学习UI界面开发的一种方法。
至于如何快速找到插件的某个组件实现，这里建议在下载源码后，就可以根据界面上的提示文字进行代码的全局搜索即可。
通过上述两步，我们可以了解到如何实现开发一个简单的UI界面，下面就开始讲解如何将设计好的界面展示在配置页面或者侧边栏中。
在正式开始之前我们需要对上文中创建的界面进行一些修改，布局外层的Panel需要先设置一下字段名：
然后增加相应的Get方法：
importjavax.swing.*;/***UI界面**@authorbutterfly*@date2023-12-06*/publicclassUIDemo{privateJTextFieldusername;privateJTextFieldpassword;privateJPanelmainPanel;publicJPanelgetMainPanel(){returnmainPanel;}}准备工作到此结束。
接下来就是将UI展示在配置界面，我们先创建一个UISettingsConfig.kt文件：
importcn.butterfly.ui.UIDemoimportcom.intellij.openapi.options.Configurableimportjavax.swing.JComponent/***UI配置界面配置类**@authorbutterfly*@date2023-12-06*/classUISettingsConfig:Configurable{privatevalform=UIDemo()privatevalcomponent:JComponentinit{component=form.mainPanel}overridefuncreateComponent()=componentoverridefunisModified()=trueoverridefunapply(){}overridefungetDisplayName()="UISettingsConfig"}然后在plugin.xml文件中进行如下的配置，这里的applicationConfigurable代表使用应用级别的配置，相应地，还有projectConfigurable代表项目级别的配置，具体区别在下文的数据持久化中进行介绍：
如果想要修改其显示位置，比如显示在Tools菜单下：
只需要在配置中增加parentId="tools"即可：
最后再来说明如何在侧边栏中显示界面，首先创建一个UISidebarConfig.kt：
importcn.butterfly.ui.UIDemoimportcom.intellij.openapi.project.Projectimportcom.intellij.openapi.wm.ToolWindowimportcom.intellij.openapi.wm.ToolWindowFactoryimportcom.intellij.ui.content.ContentFactoryimportjavax.swing.JComponent/***UI侧边栏界面配置类**@authorbutterfly*@date2023-12-06*/classUISidebarConfig:ToolWindowFactory{privatevalform=UIDemo()privatevalcomponent:JComponentinit{component=form.mainPanel}overridefuncreateToolWindowContent(project:Project,toolWindow:ToolWindow){toolWindow.contentManager.addContent(ContentFactory.getInstance().createContent(component,"",false))}}然后我们可以准备一个svg图标文件用于后续在侧边栏展示：
同时需要创建对应的文件加载接口:
importcom.intellij.openapi.util.IconLoader;importjavax.swing.*;/***插件图标**@authorbutterfly*@date2023-12-06*/publicinterfacePluginIcons{IconBUTTERFLY=IconLoader.getIcon("/icons/butterfly.svg",PluginIcons.class);}然后在plugin.xml配置文件中进行如下设置即可，anchor可设置默认位置，icon用于设置上文的图标：
然后我们需要对前文中创建的布局文件进行些许的修改，增加字段的Get方法：
importjavax.swing.*;/***UI界面**@authorbutterfly*@date2023-12-06*/publicclassUIDemo{/***用户名*/privateJTextFieldusername;/***密码*/privateJTextFieldpassword;privateJPanelmainPanel;publicJTextFieldgetUsername(){returnusername;}publicJTextFieldgetPassword(){returnpassword;}publicJPanelgetMainPanel(){returnmainPanel;}}最后我们就需要对前文中创建的UISettingsConfig.kt文件进行修改，用于处理界面上保存数据的操作：
那我们的配置文件存储位置是在哪里呢？
由于在前文中我们使用applicationConfigurable选择了应用级别的存储，因此文件就存储在IDEA默认的配置文件存储地址：C:\Users\用户名\AppData\Roaming\JetBrains\IntelliJIdea2023.2\options，其中IntelliJIdea2023.2对应自己使用的IDEA名称。不过，由于我们当前是通过沙盒环境运行，所以位置并不是全局设置的位置，而是在build/idea-sandbox/config/options下：
当我们将插件安装到我们正式的IDEA中，也就可以在上述的位置下发现配置文件了：
如果我们将配置设为projectConfigurable选择项目级别，那么首先需要对配置文件进行如下修改：
importcn.butterfly.ui.UIDemoimportcn.butterfly.ui.state.UIDemoStateimportcom.intellij.openapi.options.Configurableimportcom.intellij.openapi.project.Projectimportjavax.swing.JComponent/***UI配置界面配置类**@authorbutterfly*@date2023-12-06*///增加project:Project构造参数classUISettingsConfig(project:Project):Configurable{privatevalform=UIDemo()privatevalcomponent:JComponent//修改该行privatevalstate=project.getService(UIDemoState::class.java)init{component=form.mainPanelreset()}overridefuncreateComponent()=componentoverridefunisModified():Boolean{returnstate.username!=form.username.text||state.password!=form.password.text}overridefunapply(){state.username=form.username.textstate.password=form.password.text}overridefunreset(){form.username.text=state.usernameform.password.text=state.password}overridefungetDisplayName()="UISettingsConfig"}然后我们就可以在项目下的.idea文件夹中找到我们针对项目级别的配置了：
至于读取配置文件，则通过privatevalstate=project.getService(UIDemoState::class.java)或者privatevalstate=ApplicationManager.getApplication().getService(UIDemoState::class.java)分别换取项目或应用级别的state对象，然后读取其中的字段即可。