【导言，您正在阅读的是软件开发系列教程中的Java入门基础课程。如果您想学习编程，想转行进入编程领域，想多学一门技术，动动手指关注一下，每日更新系列教程。抽出2小时，轻松掌握开发技术。】

课程目标：

掌握WB插件熟悉GUI组件及排板

Window Builder插件

以前做快速开发都喜欢用VB/VB.NET因为微软那套有成熟的开发平台及工具，现在JavaGUI开发也有自己的插件了----那就是Window Builder.

前面介绍了Eclipse开发工具，现在只需要下载Eclipse的WB插件即可方便的进行GUI程序设计。

安装方法

打开Eclispe，Help菜单-》Install New Software

安装1

点击ADD，

Name输入：wb

Location输入：

安装2

点击Add，然后看到WindowBuilder插件，然后一路下一步就ok了

安装3

安装由于网络的原因会比较慢，等着吧，安装好了后会要求重启Eclipse。

WindowBuilder使用

新建一个Java工程，然后右键点击工程名，然后新建一个Java类：StuRegFrame，这个类继承Frame对象。

新建

2.在左边工程列表点击右键-Open with，选择用windowBuilder打开，在打开窗口的下方点击Design

切换

可以看到下图的Design界面，主要分几个区域，左上是组件列表。

下面是组件的具体属性，中间是可用的控件。

右边是组件的可视化编辑区。

WB来实战演练一下

昨天我们布置了一个课后作业，分析待设计的一个窗口布局，在这里我们就用WB来一步步的实现效果。

窗体

在上手之前，我们要先分析一下这个界面的大概结构，以及适合用什么样的排板及布局来实现。可以把这个窗体简单拆分一下：

首先是放置一个主面板，这个面板的布局设置为BorderLayout，然后在主面板里面放置两个面板，一个放置为center，一个放置为South。

分析

然后Center面板的布局设置为GridBagLayout，分成4行2列的网格

中间面板布局

底面的South面板也设置为GridBagLayout，分成1行2列，然后左列的确定按钮设置权重为1，靠右对齐。

北部面板布局

下面来操作

添加主面板

点击Panel组件，然后拖动鼠标到Frame中间。这时发现Panel在Frame中间，然后点击底部的按钮，切换到代码编辑界面。

在构造函数里面加一句代码

add(panel);

然后再切换回Design即可。

设置主面板为BorderLayout

在Design界面点击左上方的panel对象，在下面的属性栏里设置Layout属性为BorderLayout

添加中面板

拖动一个Panel对象到右边的面板的中间Center区域，并改名此面板为CenterPanel

设置中部面板布局

点击centerPanel,设置下面的Layout为GridBagLayout。

然后点击Label标签，拖到右边中间面板第一个单元格。

放置Label

在编辑窗体，点击Label组件，可以来编辑此Label在这个网格包中的属性。

重点来了，请仔细看各属性的含义（此文章的精华来了，没错，就是这几个属性，搞懂了就一切ok）：

gridx：代表这个组件在整个网络的水平坐标。从0开始，x=0表示是第一个列，x=1是第二列

gridy：代表这个组件在整个网络的垂直坐标。从0开始，y=0表示是第一行，y=1是第二列

gridheigh：代表此组件在垂直方向占的空间。1表示只占一个单元格，2代表要占两个格子

gridwidth：代表此组件在水平方向占的空间。1表示只占一个单元格，2代表要占两个格子

insets：点开后可以设置此组件在上，下，左，右空间间隔距离是多少。比如第一个Label一般设置top为20，left为10，right为10,bottom为5.

weightx：代表这个组件在这一整行空间中，和其它组件相比所占空间的权重。默认为0，表示没有扩张。

weighty：代表这个组件在这一列空间中中，和其它组件相比所占空间的权重。默认为0，表示没有扩张。

fill：表示组件的填充方式。不填充，当容器大小改变时，此组件不会扩张，如果设置为水平，或者垂直填充，当窗口改变时，此组件也会随着扩张。

anchor：表示组件在单元格的对齐方式。

接下放第二个组件，一个TextField，设置属性如下：

gridx：1，因为是第一行的第二列，所以是1

gridy：0，因为是第一行，所以y是0

weightx：1，这里设置了Txt的权重为1，表示在这第一行里面，txt会把剩下的所有空间全部填满。如果此时我们把label的weightx权重也设置为1，那么就会变成两个组件平分空间了。

weighty：0

fill：选择水平填充

insets：设置为上部20，下部5，左边10，右边10

按此方法依次放入其它组件

设置底部面板布局

点击Panel组件拖到右边设计框放入到South区。

更改底部Panel对象为BottomPanel，并设置其布局为GridBagLayout。

constraints表示该bottomPanel在主面板的位置。

在bottomPanel里面添加两个按钮，设置“确定”按钮的weightx为1，“关闭”按钮的weightx为0，这样“确定”所在的单元格就会占绝大多数位置，然后将此按钮的对齐方式改为靠右，即可实现效果。

这样，咱们的这个界面就设计好了，我们加个main函数运行一下。

public static void main(String[] args) {

StuRegFrame frame =new StuRegFrame();

frame.setBounds(100, 100, 350, 400);

frame.setVisible(true);

}

frame.setBounds(100, 100, 350, 400);//表示是设置窗体的初始化位置及大小。

frame.setVisible(true);//表示让frame显示出来。

效果如下图所示：

运行效果。

现在窗体还没有添加任何事件，程序关闭不了。可以关闭控制台来停止程序。

关闭程序

课后作业:

1.设计一个登录窗体，要求要有两个文本框，接受用户的输入，一个是用户名，另一个是密码。要有两个按钮，一个是确定 ，一个是关闭。

2.利用BorderLayout和GridBagLayout来实现布局。

【原创教程】欢迎关注，每天2小时，只要你跟着学，就能轻松掌握编程技术，我是熊猫，明天见。

如果在学习过程中遇到不懂的需要在线交流的问题可以私信我，免费辅导。

下期课程预告：

事件处理机制