|
2002 年 7 月 05 日
本文试图通过作者自己的开发经历介绍一些具体的应用实例,希望能给那些曾经象作者一样苦闷的Java痴迷者一些帮助。
前言
随着Internet的飞速发展,Java技术也得到了越来越广泛的应用。而无论我们是采用J2SE、J2EE还是J2ME,GUI都是不能回避的问题。现在的应用软件越来越要求界面友好、功能强大而又使用简单。而众所周知,在Java中进行GUI设计相对于其跨平台、多线程等特性的实现要复杂和麻烦许多。这也是很多Java程序员抱怨的事情。但GUI已经成为程序发展的方向,所以我们也必须了解Java的GUI设计方法和特点。其实,采用Java提供的布局管理器接口和相应的布局管理类,我们也可以做出相当漂亮的界面来,当然实现起来肯定要比VB麻烦许多。本文试图通过自己的开发经历介绍一些具体的应用实例,希望能给那些曾经象我一样苦闷的Java痴迷者一些帮助。
Java中的布局管理器
2.1 为什么要使用布局
在实际编程中,我们每设计一个窗体,都要往其中添加若干组件。为了管理好这些组件的布局,我们就需要使用布局管理器。比如说,设计一个简单的计算器,或一个文本编辑器等等。这些组件是让JVM 自己任意安排呢?还是按照一定的位置关系进行规范的安排呢?当然应该选择后者。将加入到容器的组件按照一定的顺序和规则放置,使之看起来更美观,这就是布局。在Java中,布局由布局管理器 (LayoutManager) 来管理。那么,我们在什么时候应该使用布局管理器?应选择哪种布局管理器?又该怎样使用布局管理器呢?
如果你写的是GUI程序,在使用AWT/Swing组件时就不应硬性设置组件的大小和位置,而应该使用Java的布局管理器(LayoutManager)来设置和管理可视组件的大小和位置,否则就有可能造成布局混乱。不信,你可以新建一个Frame(或JFrame),通过setBounds()方法往其中添加几个Button(或JButton),一旦你将窗体拉大或缩小时,你会发现组件的排列完全不是按你所预想的那样。为了解决这个问题,即当窗体(或容器)缩放时,组件位置也随之合理调整,我们就需要使用布局管理器。
为此,我们首先要知道Java的布局方式,Java提供的API中有些什么布局管理器,它们的布局特点是什么。
2.2 Java的布局方式
我们都知道,Java的GUI界面定义是由AWT类包和Swing类包来完成的。它在布局管理上采用了容器和布局管理分离的方案。也就是说,容器只管将其他组件放入其中,而不管这些组件是如何放置的。对于布局的管理交给专门的布局管理器类(LayoutManager)来完成。
现在我们来看Java中布局管理器的具体实现。我们前面说过,Java中的容器类(Container),它们只管加入组件(Component),也就是说,它只使用自己的add()方法向自己内部加入组件。同时他记录这些加入其内部的组件的个数,可以通过container.getComponentCount()方法类获得组件的数目,通过container.getComponent(i)来获得相应组件的句柄。然后LayoutManager类就可以通过这些信息来实际布局其中的组件了。
Java已经为我们提供了几个常用的布局管理器类,例如: FlowLayout、BorderLayout、GridLayout、GridBagLayout等。下面列表说明它们的布局特点:
包 |
类 |
特点 |
java.awt |
CardLayout |
将组件象卡片一样放置在容器中,在某一时刻只有一个组件可见 |
java.awt |
FlowLayout |
将组件按从左到右而后从上到下的顺序依次排列,一行不能放完则折到下一行继续放置 |
java.awt |
GridLayout |
形似一个无框线的表格,每个单元格中放一个组件 |
java.awt |
BorderLayout |
将组件按东、南、西、北、中五个区域放置,每个方向最多只能放置一个组件 |
java.awt |
GridBagLayout |
非常灵活,可指定组件放置的具体位置及占用单元格数目 |
Javax.swing |
BoxLayout |
就像整齐放置的一行或者一列盒子,每个盒子中一个组件 |
Javax.swing |
SpringLayout |
根据一组约束条件放置子组件 |
Javax.swing |
ScrollPaneLayout |
专用于JScrollPane,含一个Viewport,一个行头、一个列头、两个滚动条和四个角组件 |
Javax.swing |
OverlayLayout |
以彼此覆盖的形式叠置组件 |
Javax.swing |
ViewportLayout |
JViewport的默认布局管理器 |
事实上,在大多数情况下,综合运用好这些布局管理器已可以满足需要。当然对于特殊的具体应用,我们可以通过实现LayoutManager或LayoutManager2接口来定义自己的布局管理器。下面我们通过几个实例来了解几个常用的布局管理器的使用方法。
GUI设计应用实例
3.1 FlowLayout/GridLayout/BorderLayout的应用实例
3.1.1应用背景
假设我们要编写一个简单的计算器JApplet,其基本界面如下:
3.1.2解决方法
通过其界面要求可知,我们可以通过将"BackSpace"和"Clear"JButton放置在一个JPanel(1)中,采用FlowLayout布局;将显示结果的JTextField和该JPanel一起放置到另外一个JPanel(2),采用GridLayout布局;而将其它的JButton则放置在另外一个JPanel(3)中,采用GridLayout布局;再将JPanel(2)和JPanel(3)加入该JApplet,即可实现界面需求。具体实现方法如下:
/**以FlowLayout布局JPanel(1)*/
JPanel p1 = new JPanel(new FlowLayout()); //默认组件从居中开始
//加入"BackSpace"和"Clear"JButton
p1.add(backButton);
p1.add(clearButton);
/**以GridLayout布局JPanel(2)*/
JPanel p2 = new JPanel(new GridLayout(2, 1)); //放置2行,每行1个组件
//加入显示结果的JTextField和JPanel(1)
p2.add(displayField);
p2.add(p1);
/**以GridLayout布局JPanel(3)*/
JPanel p3 = new JPanel(new GridLayout(4, 5)); //放置4行,每行5个组件
String buttonStr = "789/A456*B123-C0.D+=";
for (int i = 0; i < buttonStr.length(); i++)
this.addButton(p3, buttonStr.substring(i, i + 1));
//addButton方法
private void addButton(Container c, String s)
{
JButton b = new JButton(s);
if (s.equals("A"))
b.setText("sqrt");
else if (s.equals("B"))
b.setText("1/x");
else if (s.equals("C"))
b.setText("%");
else if (s.equals("D"))
b.setText("+/-");
b.setForeground(Color.blue);
c.add(b);
b.addActionListener(this);
}
/**以BorderLayout布局JApplet*/
this.setLayout(new BorderLayout());
this.add(p2, "North");
this.add(p3, "Center");
|
这样,就一切OK啦。具体的实现代码可参见附件中的CalculateApplet.java文件。
3.2 带工具栏和状态栏的GridLayout/BorderLayout应用实例
3.2.1实际问题
在很多情况下我们需要动态设置工具栏和状态栏,看下面的应用实例:
以上是在视图的工具栏和状态栏都被复选的时候,以下分别为某一个没选或都未选的情况。
3.2.2解决方法
/**工具栏JToolBar采用从左开始的FlowLayout布局*/
JToolBar toolBar = new JToolBar();
toolBar.setBorderPainted(false); //不画边界
toolBar.setLayout(new FlowLayout(FlowLayout.LEFT));
/**窗体采用动态的BorderLayout布局,通过获取工具栏或状态栏的复选标记进行界面的动态调整*/
JSplitPane splitPane = new JSplitPane();
splitPane.setOrientation(JSplitPane.VERTICAL_SPLIT); //设置统计窗口分隔条的方向
splitPane.setDividerLocation(300); //设置分隔条的位置
splitPane.setOneTouchExpandable(true);
JCheckBoxMenuItem toolBarItem = new JCheckBoxMenuItem("工具栏(T)", true);
JLabel statusLabel = new JLabel("当前统计目标:");
JCheckBoxMenuItem statusBarItem = new JCheckBoxMenuItem("状态栏(S)", true);
/**设置系统窗体布局并动态设置工具栏和状态栏*/
private void setLayout()
{
if (toolBarItem.getState() &&' statusBarItem.getState())
{
this.getContentPane().add(BorderLayout.NORTH, toolBar);
this.getContentPane().add(BorderLayout.CENTER, splitPane);
this.getContentPane().add(BorderLayout.SOUTH, statusLabel);
}
else if (toolBarItem.getState() && !statusBarItem.getState())
{
this.getContentPane().add(BorderLayout.NORTH, toolBar);
this.getContentPane().remove(statusLabel);
}
else if (statusBarItem.getState() && !toolBarItem.getState())
{
this.getContentPane().add(BorderLayout.SOUTH, statusLabel);
this.getContentPane().remove(toolBar);
}
else if (!toolBarItem.getState() && !statusBarItem.getState())
{
this.getContentPane().remove(toolBar);
this.getContentPane().remove(statusLabel);
}
this.show(); //添加或移去组件后刷新界面
}
|
通过该方法即可实现界面的动态刷新与调整。
3.3 GridBagLayout应用实例
3.3.1实际问题
GridBagLayout是Java API提供的一个较复杂的布局管理器,利用好它可以解决许多实际编程中的令人烦恼的界面设计问题。看下面的界面应用实例:
3.3.2解决方法
这个界面的设计比较复杂,涉及多个标签域(JLabel)、文本域(JTextField、JTextArea),且标签域的大小还不一样,如附件标签;并当窗体缩放时,标签域的大小应不改变,而文本域则必须自适应缩放。如何来实现呢?请看下面的代码:(工具栏的实现不再赘述)
/**系统的界面布局实现*/
GridBagConstraints gridBag = new GridBagConstraints();
gridBag.fill = GridBagConstraints.HORIZONTAL; //以水平填充方式布局
gridBag.weightx = 0; //行长不变
gridBag.weighty = 0; //列高不变
fromLabel.setForeground(Color.blue);
fromLabel.setFont(new Font("Alias", Font.BOLD, 16));
this.add(fromLabel, gridBag, 0, 1, 1, 1); //指定发信人标签位置
receiveLabel.setForeground(Color.blue);
receiveLabel.setFont(new Font("Alias", Font.BOLD, 16));
this.add(receiveLabel, gridBag, 0, 2, 1, 1); //指定收信人标签位置及大小
ccLabel.setForeground(Color.blue);
ccLabel.setFont(new Font("Alias", Font.BOLD, 16));
this.add(ccLabel, gridBag, 0, 3, 1, 1); //指定抄送人标签位置及大小
subjectLabel.setForeground(Color.blue);
subjectLabel.setFont(new Font("Alias", Font.BOLD, 16));
his.add(subjectLabel, gridBag, 0, 4, 1, 1); //指定主题标签位置及大小
accessoryLabel.setForeground(Color.blue);
accessoryLabel.setFont(new Font("Alias", Font.BOLD, 16));
this.add(accessoryLabel, gridBag, 0, 5, 1, 1); //指定附件标签位置及大小
gridBag.weightx = 100; //行自适应缩放
gridBag.weighty = 0;//列高不变
fromField.setText("admin@watermelon.com");
this.add(fromField, gridBag, 1, 1, 2, 1); //指定发信人文本域(JTextField)位置及大小
this.add(receiveField, gridBag, 1, 2, 2, 1); //指定收信人文本域(JTextField)位置及大小
this.add(ccField, gridBag, 1, 3, 2, 1); //指定抄送人文本域(JTextField)位置及大小
this.add(subjectField, gridBag, 1, 4, 2, 1); //指定主题文本域(JTextField)位置及大小
accessoryArea.setEditable(false);
//设置不显示水平滚动条(该JTextArea置于JScrollPane中)
accessoryScroll.setHorizontalScrollBarPolicy(JScrollPane.HORIZONTAL_SCROLLBAR_NEVER);
this.add(accessoryScroll, gridBag, 1, 5, 2, 1); //指定附件文本区(JTextArea)位置及大小
gridBag.fill = GridBagConstraints.BOTH;//采用全填充方式布局
gridBag.weightx = 100;//行自适应缩放
gridBag.weighty = 100;//列自适应缩放
mailArea.setBackground(Color.blue);
mailArea.setForeground(Color.yellow);
mailArea.setTabSize(4);
//指定信件主体区(JTextArea)的位置及大小。(该JTextArea也置于JScrollPane中)
this.add(scroll, gridBag, 0, 6, 3, 1);
在上面用到一个方法add(),这个方法是自己定义的:
private void add(Component c, GridBagConstraints gbc, int x, int y, int w, int h)
{
gbc.gridx = x;
gbc.gridy = y;
gbc.gridheight = h;
gbc.gridwidth = w;
this.getContentPane().add(c, gbc);
}
|
在用到GridBagLayout布局管理器的组件添加方法中,都可以重用它。事实上,你还可以在方法最前面加一个参数Container cn,而将方法中的this相应的改为cn,就可以通用于所有需要使用GridBagLayout进行布局管理的容器中。在下面的复杂例程中我们就会用到。
3.4 综合多个布局的复杂应用实例
3.4.1实际问题
请看下面的实际应用界面要求: (图3.4-1)
(图3.4-2)
(图3.4-3)
在这个具体应用中,底部的JButton组是确定的,但JTabbedPane的每一个选项都不同,如何实现呢?
3.4.2解决方案
首先我们可以采用BorderLayout确定主题对话框的布局方式,实现方法如下:
JTabbedPane dbTabPane = new JTabbedPane();
…… //下面需要用到的JButton等组件变量定义(或声明)
private void initLayout()
{
initDBTabPane();//初始化JTabbedPane:DBTabPane组件
this.getContentPane().add(BorderLayout.CENTER, dbTabPane);
//将JTabbedPane组件:dbTabPane布局于JDialog对话框的中间
initButtonPanel();//初始化JPanel:ButtonPanel组件
this.getContentPane().add(BorderLayout.SOUTH, buttonPanel);
//将JPanel组件:buttonPanel布局于JDialog对话框的底部(南面)
}
private void initDBTabPane()
{
JPanel loginPanel = new JPanel(new GridLayout(10, 1));
//为保证两个JCheckBox组件位于顶端,设置为共10行,每行一个组件的布局,但只
//放置界面要求的两个组件,这样就保持了界面的美观,否则如定义为
//Gridlayout(2,1)则会使两个组件居中,而且中间会隔开较长的距离。
pwdBox.setMnemonic('P');
loginPanel.add(pwdBox);
dspBox.setMnemonic('D');
loginPanel.add(dspBox);
dbTabPane.add("Login", loginPanel); //设置"Login"JPanel(图3.4-1)的布局
needRadio.setMnemonic('N');
allRadio.setMnemonic('A');
cacheRadio.setMnemonic('U');
radioPanel.setBorder(new TitledBorder("Load Option"));//加上边界标题
radioPanel.add(needRadio);
radioPanel.add(allRadio);
radioPanel.add(cacheRadio);
//以上为加入需要的JRadioButton组件到指定的JPanel: radioPanel
queryPanel.add(radioPanel);//加入含JRadioButton组的JPanel到queryPanel
reqBox.setMnemonic('R');
boxPanel.add(reqBox);
saveBox.setMnemonic('S');
boxPanel.add(saveBox);
autoBox.setMnemonic('t');
boxPanel.add(autoBox);
//以上为加入需要的JCheckBox组到指定的JPanel:boxPanel
queryPanel.add(boxPanel); //加入含JCheckBox组的JPanel到queryPanel
dbTabPane.add("Query", queryPanel);//设置"Query"JPanel(图3.4-2)的布局
initDrvPanel();
}
/**设置"Drivers"JPanel(图3.4-3)的布局*/
private void initDrvPanel()
{
gridBag.fill = GridBagConstraints.HORIZONTAL;
gridBag.weightx = 100;
gridBag.weighty = 0;
tipLabel.setForeground(Color.black);
this.add(drvPanel, tipLabel, gridBag, 0, 0, 4, 1);
urlLabel.setForeground(Color.black);
this.add(drvPanel, urlLabel, gridBag, 0, 5, 4, 1);
urlField.setEditable(false);
this.add(drvPanel, urlField, gridBag, 0, 6, 4, 1);
gridBag.weightx = 0;
gridBag.weighty = 0;
addButton.setMnemonic('A');
this.add(drvPanel, addButton, gridBag, 3, 1, 1, 1);
editButton.setMnemonic('E');
this.add(drvPanel, editButton, gridBag, 3, 2, 1, 1);
removeButton.setMnemonic('R');
this.add(drvPanel, removeButton, gridBag, 3, 3, 1, 1);
gridBag.fill = GridBagConstraints.BOTH;
gridBag.weightx = 100;
gridBag.weighty = 100;
//设置JTable组件:drvTable的从0到7行第0列的值
for (int i = 0; i < 8; i++)
drvTable.setValueAt(drvStrs[i],i,0);
//设置JTable的列头
drvTable.getColumn(drvTable.getColumnName(0)).setHeaderValue("All Drivers");
drvTable.setShowGrid(false);//设置不显示网格线
this.add(drvPanel, drvScroll, gridBag, 0, 1, 3, 4);
dbTabPane.add("Drivers", drvPanel);
}
/**初始化底部JButton组的布局*/
private void initButtonPanel()
{
JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
//从右边开始进行FlowLayout布局
okButton.setMnemonic('O');
buttonPanel.add(okButton);
cancelButton.setMnemonic('C');
buttonPanel.add(cancelButton);
helpButton.setMnemonic('H');
buttonPanel.add(helpButton);
}
/**给指定的容器cn在指定的(x,y)位置放置指定大小(宽度=w,高度=h)的组件c*/
private void add(Container cn, Component c, GridBagConstraints gbc, int x, int y, int w, int h)
{
gbc.gridx = x;
gbc.gridy = y;
gbc.gridwidth = w;
gbc.gridheight = h;
cn.add(c, gbc);
}
|
|
结束语
以上是本人在两年多J2EE应用开发中,总结的关于用Java进行GUI设计的一些经验,希望能给曾经象我一样迷惘,但依旧对Java一往情深,至今仍在摸索探求Java GUI设计捷径的朋友一些启示。更希望借此机会抛砖引玉,与更多的朋友进行交流与探讨。其实,在Java中所有的布局管理器都要实现一个接口,即LayoutManager Inerface或者是它的一个子接口LayoutManager2 Interface,后者用于更复杂的布局管理。如果在实际应用中,觉得Java API提供的这些布局管理器仍不够用,你完全可以自己来实现其中某一个接口的方法,从而为你自己的具体GUI应用设计提供更好的布局管理。 |