这节里面，将介绍Studio的一个重要功能。UI界面是用户操作的最直观的形式，也是长期以来插件开发的难点所在，blz推行的xml配置方式死板而不具有直观性，如果作者没有很好的布局观，调试起来相当的麻烦，而这一切在Studio里面都不再成为问题。类似PC平台上主流IDE的界面编辑工具会帮助你以所见即所得的形式开发出想要的界面效果，配合之后会添加的自定义控件，能够很灵活的调整一切。（自定义控件在IGAS中已经提供，但Studio中加入还需要时间)

添加一个界面文件

• 第一步，在MyAddon的插件菜单中，点击Add File，在弹出的引导界面中选择Type为Frame，在下面的名称框中填入MyAddon_Main，这个名称不需要是创建的界面元素名称，不过还是建议保持一致。之后点击Okay按钮，文件列表中的Frame节点之后就可以展开了。

• 展开Frame节点，双击下面的MyAddon_Main节点，那么我们看到了一个空白的编辑器。这个是代表UIParent的界面元素容器。接下来，我们要在这个空白的画布上制作我们想要的界面。

• 在左边的控件列表中点击一次Form按钮，按钮显示成压下状态后，表示我们选择了Form控件作为下一个被创建的界面类型。

• 在编辑器上的适当位置，鼠标左键按下，然后划出一个方形的区域，然后松开鼠标，我们的第一个界面元素就创建好了，这是一个Form类型的界面元素，它的上面是一个可供拖拽标题栏，用以移动该界面元素，右下角的位置，有一个斜线的标记区域，拖拽可以放大缩小该界面元素，当然这两个功能在编辑器中是不可用的。Form类型控件是一个常用的底层窗口类型，用于作为其他界面元素的容器使用。

• Form创建好之后，那么鼠标移到新建的界面元素上，单击一下，该界面元素节可以被选中了，之后你可以鼠标按下，然后通过鼠标拖拽来移动它的位置，或者通过拖拽该界面元素选择后，在边界上出现的8个小方块来调整它的大小，这两个功能，读者可以自行使用下。

• 选择好Form元素后，在右下的属性设置面板中，就有了一系列的数据显示出来，左边是属性名称，右边是该属性的值。

修改Form的属性值

• 在开始介绍各种属性前，首先先看看属性面板的整体布局，可以看到，我将各类属性做了一些分类，每个分类都可以展开或者收起来。最开始的分类是UIObject，第二个是Region，第三个是Frame，最后一个是Form。在IGAS的GUI系统中，控件之间有很明确的继承关系，Form继承自Frame，它可以使用在Frame中定义的属性和方法，同样，Frame继承自Region，Region继承自UIObject。所以，属性的显示也是按照这种继承的机制来做分类。实际一般开发中，需要关注的只有最后一个分类的属性，和UIObject分类中的Name属性。

• 首先，我们最需要修改的即使该Form元素的名字，找到属性设置面板上的UIObject分类中Name属性，也就是整个属性面板的第一个属性配置单元。然后修改它的值为MyAddon_Main，这个名字可以不和文件名称一致，但必须是独一无二的。IGAS的GUI系统中，每个界面元素都会有一个父元素，比如这里创建的Form界面元素，它的实际父元素是UIParent，在IGAS中要求，该元素的名字，在父元素的所有子元素中，必须是唯一的，所以，这里所说的独一无二，不是指在MyAddon这个插件中，而是对于UIParent的子元素中，需要是独一无二的，所以命名时，最好带上插件名称以保证它的唯一性，而之后在Form元素上创建的各个界面元素就没有这个要求，可以自己设置想要的名字，方便识别即可。

• 然后，我们拖动滚动条，到属性配置面板最下面的分类Form中，看看哪些我们可以修改掉。

  • Caption - 标题栏显示的文字。
  • Message - 底部信息栏显示的文字。
  • Style - Form的框体显示样式，目前提供两种。
    • Style = LIGHT

• Style = COMMON

• CaptionAlign - 标题栏文字的对齐方式，当Style为COMMON时，无效。

• TitleBarColor - 标题栏的背景色设置，对于颜色，Studio提供了一种特殊的设置方式。点击属性设置右边的下拉按钮，既可弹出颜色配置向导。

• ShowCloseButton - 右上角的关闭按钮，是否显示的设置，默认为true。下面改为false

创建一个输入框

• 在左边的控件列表中选择SingleTextBox，然后在我们的Form界面元素上拖拽一个方形，放开后，我们的输入框就创建好了。(SingleTextBox单行输入框和MultiLineTextBox多行输入框是分开的，主要原因在于实现的不同，强行合在一起会造成资源浪费，所以分别提供了。)

• 同样我们调整它的Name属性为txtInput。它在SingleTextBox分类中的属性，作者可以自行调整看看效果。对于SingleTextBox，设置完名称后，即可。

创建一个按钮

• 按钮是一个重要的用来发起操作的界面元素。那么在左边的控件列表中选择Button，（注意，你需要展开控件列表最上面的Base列表，才能找到它），之后在我们的单行输入框下面创建一个按钮。

• 你会发现什么都看不到，默认的Button是没有显示效果的，你可以鼠标移过刚才创建按钮的位置，这一块会高亮显示出按钮的区域范围，或者在界面元素列表中选择Button1，这样刚才创建的按钮就被选择好了。

• 调整按钮的Name为btnGo，然后下移到最下面的分类Button中，调整Style属性为NORMAL，现在，我们能够直接的看到这个按钮了。最后，调整Text属性为Go。

本节结尾和一些提示

• 那么，我们的第一个界面就创建完了，有底层界面MyAddon_Main，有输入框txtInput，有执行按钮btnGo。

• 界面编辑器，提供了准线对齐功能，当你移动某个元素，或者调整其大小时，会有4条准线帮助你将该元素和其他元素对齐，这里，你可以拖动btnGo，使他的上下左右和txtInput一致时看看效果。这点可以帮助作者快速的进行界面调整。