GuiBuilder入门

 

1. GuiBuilder简介

   1. 简介

AsWing GuiBuilder是一个为Aswing量身定做的所见即所得的IDE。你可以在上面更改layout以及控件的属性。然后它还能为你辛苦做出来的界面生成漂漂亮亮的源代码。

你可以在 http://code.google.com/p/aswing/downloads/list下载GuiBuilder，如果你等不及了，可以在线试试: http://www.aswing.org/guibuilder。

2.  GuiBuilder的界面及功能。

打开GuiBuilder的Air版本，我们看到的是这么一个界面：

工具栏介绍：

• New：新建布局文件

• Open：打开布局文件

• Save：保存布局文件

• Close：关闭当前布局文件

• Generate AS Code：生成布局文件的AS代码

• Generate Selection：生成选中组件的AS代码

• View Range：查看布局的占用范围

• Revalidate：调用组件的Revalidate方法，界面显示不正常的时候调用。

• Laf：切换GuiBuilder的Laf。

控件控制栏介绍：

从左到右：

• 在选定组件的下面添加一个组件(老爸给它生儿子)

• 在选定组件的里面添加一个组件(自己生儿子)

• 移除选定组件(杀人)

• 组件上移

• 组件下移

• 组件从儿子变兄弟

• 组件从兄弟变儿子

小Tips：由于Guibuilder还是一个非常初期的版本，而且iiley也能把没多少时间放在它上面，如果遇到界面显示错误的时候麻烦你点一下Save，点一下close，然后再点一下open，再打开那个项目就好了….

Ps：欢迎有实力有激情的朋友加入GuiBuilder的开发当中….

2. 使用GuiBuilder布局第一个界面

废话少说，我们还是快点来体验一下GuiBuilder吧!基本操作估计大家随便按按都可以搞定，特别是有mxml开发经验的人。

• 设计Layout

兴奋吧？我们先来试试怎么把Guibuilder的界面搞出来.

我们大概先估计一下GuiBuilder的Layout是怎么分配的。这是我的假想图..

• 新建项目

我们先点击New，新建一个JPanel作为其他容器的根，并且设置它的Layout为borderLayout。

弹出的界面：MyPane是指生成类的名字，test是它所在的包名

左边的界面就会变成下面的样子：

• 更改属性

然后我们更改这个根节点的名字以及layout

• 设置layout

点击layout出来选择BorderLayout,按下ok

添加控件

然后在root下面添加一个JToolbar：

更改属性，ID为topToolBar

constraints为North

• 添加JSplitPanel

然后我们在topToolbar的下面添加一个JSplitPanel：

设置它的ID为centerContainer，constraints为Center。

• 界面的细化

这样我们的第一层，第二层布局就完成了。跟着就是细化。

我们先做位于中间的JSplitPanel：

选中centerContainer,添加两个JsplitePanel，分别命名为leftPanel和rightPanel。其中leftPanel的Feature->Orientation属性设置为Vertical，因为JSplitPanel默认是左右分隔，而leftPanel是要上下分隔的。

跟着在leftPanel内加入两个Panel：filesPanel以及componentPanel。

• 设置Border

filesPanel我们设置它的border为TitleBorder

设置好了以后，再往componentPanel加入一个JTree以及一个JToolBar。

到此为止，左边的Panel布局完毕.

右边的JSplitPanel比较简单，就不再详述。关键的地方是设置不同的Border。

假设你已经完成了基本的布局，我们现在就对ToolBar进行按钮的添加。

• JSeparator

随便添加几个按钮吧，关键是要加上JSeparator，并且给它的Orientation属性设成Vertical。不然它可是显示不出来的哦。

现在，我们可以点击Generate AS Code的按钮，看一看生成出来的代码咯！

下一篇主要讲解一下JScollPanel的放置，敬请期待。