十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
一: 首先弄清题目的意思
创新互联建站是一家专业提供仁布企业网站建设,专注与做网站、网站设计、html5、小程序制作等业务。10年已为仁布众多企业、政府机构等服务。创新互联专业网站制作公司优惠进行中。
A.需要的主要组件列表:
1. 创建一个窗口,窗口标题叫Information
2. 3个标签, 用于显示文字 Name Number Class
3. 3个文本框, 用于填写信息
4. 1个按钮, 文字是确认
5. 1个文本域
B.业务逻辑
1. 当点击按钮确认的时候, 把 文本框的信息显示到文本域
C.设计的主要技术
JLabel , JButton, JTextField ...等, 都是swing的组件 , 所以应该使用swing进行创建
二: 确定使用的布局
swing虽然重写了大部分的组件, 但是布局, 依旧沿袭awt技术
分析图片上的布局:
至少有2种方法可以实现,
方法一: 绝对布局 , 优点: 配合可视化GUI拖曳, 可以完美的实现图上的组件的位置
但是缺点也是致命的, 不同的操作系统平台下, 可能会出现位置的移动,
只适合开发平台, 移植效果差 . 所以不推荐使用
方法二: 灵活的表格布局, 配合流式布局 , 所有操作系统下,显示效果都比较统一.
三: 效果图
四: 参考代码
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;
public class FrameDemo extends JFrame {
//申明需要的组件
private final JTextField jtf1,jtf2,jtf3;
private final JTextArea jta;
public FrameDemo() {
setTitle("Information");//设置窗口标题
setSize(320, 360);//设置窗口大小
setLocationRelativeTo(null);//设置窗口居中
setDefaultCloseOperation(EXIT_ON_CLOSE);//设置关闭时退出虚拟机
getContentPane().setLayout(new FlowLayout());//设置窗口布局为流式布局
JPanel jp = new JPanel(new GridLayout(4, 2));//设置jp面板为表格布局4行2列
//第一行
JPanel jp01 = new JPanel();
JLabel jl1 = new JLabel("Name:");
jp01.add(jl1);
JPanel jp1 = new JPanel();
jtf1 = new JTextField(8);
jp1.add(jtf1);
//第二行
JPanel jp02 = new JPanel();
JLabel jl2 = new JLabel("Number:");
jp02.add(jl2);
JPanel jp2 = new JPanel();
jtf2 = new JTextField(8);
jp2.add(jtf2);
//第三行
JPanel jp03 = new JPanel();
JLabel jl3 = new JLabel("Class:");
jp03.add(jl3);
JPanel jp3 = new JPanel();
jtf3 = new JTextField(8);
jp3.add(jtf3);
//第四行
JPanel jp04 = new JPanel();
JLabel jl4 = new JLabel("");
jp04.add(jl4);
JPanel jp4 = new JPanel();
JButton jb = new JButton("确认");
jp4.add(jb);
jp.add(jp01);
jp.add(jp1);
jp.add(jp02);
jp.add(jp2);
jp.add(jp03);
jp.add(jp3);
jp.add(jp04);
jp.add(jp4);
getContentPane().add(jp);
jta = new JTextArea();
jta.setColumns(20);//设置文本域的大小
jta.setEditable(false);//设置文本域不可编辑
jta.setBackground(jp.getBackground());//设置文本域的背景色和面板一样
getContentPane().add(jta);
jb.addActionListener(new ActionListener() {//给按钮添加事件
public void actionPerformed(ActionEvent e) {//点击按钮,显示信息到文本域
String name = jtf1.getText();
String number = jtf2.getText();
String clazz = jtf3.getText();
jta.setText("You name is "+name+" number is "+number+" class is "+clazz);
}
});
}
public static void main(String[] args) {
new FrameDemo().setVisible(true);//创建窗口,被设置为可见
}
}
五: 拓展
虽然图形界面的实现方法是多样的, 我们一定要根据具体情况, 选择一个比较优化的 合理的, 符合业务逻辑的实现方法
要让照片随机播放,需要把照片名改成比如photo1.jpg,photo2.jpg,photo3.jpg...的有序号顺序排列的文件名,
然后把改名后的照片文件放到你的项目名的目录下,比如你的项目名叫"slideshow",你就把照片文件放到slideshow文件夹下.
最后把下面的Java程序拷贝到你的项目中,把有DD类名的地方改成你的类名,就行了.
完整的让一些照片在JFrame窗体里自动随机播放的幻灯片程序如下
(我用的图片文件是photo1.jpg,photo2.jpg,photo3.jpg,注意事项在注释中注明
import java.awt.Graphics;
import javax.swing.ImageIcon;
import javax.swing.JFrame;
public class DD extends JFrame implements Runnable{
ImageIcon ii=new ImageIcon("photo1.jpg");//这里换成你的图片文件名,放在你的项目名的文件夹中
DD(){
super("Slide");
setSize(400, 400);
setLocationRelativeTo(null);
setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
setVisible(true);
}
public void paint(Graphics g){
super.paint(g);
g.drawImage(ii.getImage(),0,0,400,400,null);
}
@Override
public void run() {
while(true){
try {
Thread.sleep(500);//这里是幻灯片播放间隔的时间,这里为500毫秒=0.5秒
} catch (InterruptedException e) {
e.printStackTrace();
}
int i=(int)(Math.random()*3)+1;//这里是产生从1-3的随机数,如果你有6个图片文件,把3改成6就是从1-6的随机数了.
ii=new ImageIcon("photo"+i+".jpg");//这里调用你的图片文件,如果你有6个图片文件,改成从1-6的文件名方便调用
this.repaint();
}
}
public static void main(String[] args) {
DD d=new DD();
Thread t=new Thread(d);
t.start();
}
}
import java.awt.BorderLayout;
import java.awt.Component;
import java.awt.FileDialog;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.awt.event.ItemEvent;
import java.awt.event.ItemListener;
import java.awt.event.WindowAdapter;
import java.awt.event.WindowEvent;
import javax.media.ControllerClosedEvent;
import javax.media.ControllerEvent;
import javax.media.ControllerListener;
import javax.media.EndOfMediaEvent;
import javax.media.Manager;
import javax.media.MediaLocator;
import javax.media.NoPlayerException;
import javax.media.Player;
import javax.media.PrefetchCompleteEvent;
import javax.media.RealizeCompleteEvent;
import javax.media.Time;
import javax.swing.JCheckBoxMenuItem;
import javax.swing.JFrame;
import javax.swing.JMenu;
import javax.swing.JMenuBar;
import javax.swing.JMenuItem;
import javax.swing.SwingUtilities;
import javax.swing.UIManager;
public class JMFMediaPlayer extends JFrame implements ActionListener,
ControllerListener, ItemListener {
// JMF的播放器
Player player;
// 播放器的视频组件和控制组件
Component vedioComponent;
Component controlComponent;
// 标示是否是第一次打开播放器
boolean first = true;
// 标示是否需要循环
boolean loop = false;
// 文件当前目录
String currentDirectory;
// 构造方法
public JMFMediaPlayer(String title) {
super(title);
addWindowListener(new WindowAdapter() {
public void windowClosing(WindowEvent e){
// 用户点击窗口系统菜单的关闭按钮
// 调用dispose以执行windowClosed
dispose();
}
public void windowClosed(WindowEvent e){
if (player != null){
// 关闭JMF播放器对象
player.close();
}
System.exit(0);
}
});
// 创建播放器的菜单
JMenu fileMenu = new JMenu("文件");
JMenuItem openMemuItem = new JMenuItem("打开");
openMemuItem.addActionListener(this);
fileMenu.add(openMemuItem);
// 添加一个分割条
fileMenu.addSeparator();
// 创建一个复选框菜单项
JCheckBoxMenuItem loopMenuItem = new JCheckBoxMenuItem("循环", false);
loopMenuItem.addItemListener(this);
fileMenu.add(loopMenuItem);
fileMenu.addSeparator();
JMenuItem exitMemuItem = new JMenuItem("退出");
exitMemuItem.addActionListener(this);
fileMenu.add(exitMemuItem);
JMenuBar menuBar = new JMenuBar();
menuBar.add(fileMenu);
this.setJMenuBar(menuBar);
this.setSize(200, 200);
try {
// 设置界面的外观,为系统外观
UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName());
SwingUtilities.updateComponentTreeUI(this);
} catch (Exception e) {
e.printStackTrace();
}
this.setVisible(true);
}
/**
* 实现了ActionListener接口,处理组件的活动事件
*/
public void actionPerformed(ActionEvent e) {
if (e.getActionCommand().equals("退出")) {
// 调用dispose以便执行windowClosed
dispose();
return;
}
FileDialog fileDialog = new FileDialog(this, "打开媒体文件", FileDialog.LOAD);
fileDialog.setDirectory(currentDirectory);
fileDialog.setVisible(true);
// 如果用户放弃选择文件,则返回
if (fileDialog.getFile() == null){
return;
}
currentDirectory = fileDialog.getDirectory();
if (player != null){
// 关闭已经存在JMF播放器对象
player.close();
}
try {
// 创建一个打开选择文件的播放器
player = Manager.createPlayer(new MediaLocator("file:"
+ fileDialog.getDirectory() + fileDialog.getFile()));
} catch (java.io.IOException e2) {
System.out.println(e2);
return;
} catch (NoPlayerException e2) {
System.out.println("不能找到播放器.");
return;
}
if (player == null) {
System.out.println("无法创建播放器.");
return;
}
first = false;
this.setTitle(fileDialog.getFile());
// 播放器的控制事件处理
player.addControllerListener(this);
// 预读文件内容
player.prefetch();
}
/**
* 实现ControllerListener接口的方法,处理播放器的控制事件
*/
public void controllerUpdate(ControllerEvent e) {
// 调用player.close()时ControllerClosedEvent事件出现。
// 如果存在视觉部件,则该部件应该拆除(为一致起见,
// 我们对控制面板部件也执行同样的操作)
if (e instanceof ControllerClosedEvent) {
if (vedioComponent != null) {
this.getContentPane().remove(vedioComponent);
this.vedioComponent = null;
}
if (controlComponent != null) {
this.getContentPane().remove(controlComponent);
this.controlComponent = null;
}
return;
}
// 如果是媒体文件到达尾部事件
if (e instanceof EndOfMediaEvent) {
if (loop) {
// 如果允许循环,则重新开始播放
player.setMediaTime(new Time(0));
player.start();
}
return;
}
// 如果是播放器预读事件
if (e instanceof PrefetchCompleteEvent) {
// 启动播放器
player.start();
return;
}
// 如果是文件打开完全事件,则显示视频组件和控制器组件
if (e instanceof RealizeCompleteEvent) {
vedioComponent = player.getVisualComponent();
if (vedioComponent != null){
this.getContentPane().add(vedioComponent);
}
controlComponent = player.getControlPanelComponent();
if (controlComponent != null){
this.getContentPane().add(controlComponent, BorderLayout.SOUTH);
}
this.pack();
}
}
// 处理“循环”复选框菜单项的点击事件
public void itemStateChanged(ItemEvent e) {
loop = !loop;
}
public static void main(String[] args){
new JMFMediaPlayer("JMF媒体播放器");
}
}
试试吧,我这里运行正常
GUI图形界面设计的重点是布局
SWING也是采用AWT的布局方式,进行布局管理的。(实现LayoutManager接口的方法,来进行管理布局,API中已有实现类,我们通常只需要指定实现类,而不需要自己重写方法)
常用的布局有绝对布局, 边界布局BorderLayout,流布局FlowLayout,表格布局GridLayout。
JFrame等重量级组件,默认布局是边界布局,JPanel轻量级组件,默认布局是流布局
绝对布局:布局的特点,需要指定每个组件的大小,和具体位置。
优点:充分的自定义,充分的自由,可以写出漂亮的 ,细致的界面
缺点:绝对布局在不同的操作系统下,会有一些不同程度的变化,导致界面变形,甚至组件重叠等。在同一操作系统下,窗口放大缩小,界面也会变形
绝对布局的范例
import javax.swing.JButton;
import javax.swing.JFrame;
public class Frame1 extends JFrame{
JButton jb1;
public Frame1() {
setLayout(null);//指定窗口的布局管理器为空,也就是绝对布局
jb1 = new JButton("按钮");
jb1.setLocation(100, 50);//指定组件的位置
jb1.setSize(80, 30);//指定组件的大小
//jb1.setBounds(100, 50, 80, 30);//上面两句代码等同于这句代码
add(jb1);
setSize(300, 200);
setLocationRelativeTo(null);
setDefaultCloseOperation(EXIT_ON_CLOSE);
}
public static void main(String[] args) {
new Frame1().setVisible(true);
}
}
边界布局BorderLayout:它可以对容器组件进行安排,并调整其大小,使其符合下列五个区域:北、南、东、西、中。每个区域最多只能包含一个组件
优点:比较常用的布局,简单易掌握,放大缩小,不影响组件的位置
缺点:组件位置不够灵活。每个区域如果添加多个组件,那么后面的组件会覆盖前面的组件。(因为可以嵌套其他组件使用,所以这些缺点基本都能克服)
3. 代码参考
import javax.swing.*;
import java.awt.*;
public class P004_BorderLayout {
JFrame jframe;
JButton jb1,jb2,jb3,jb4,jb5;
public P004_BorderLayout(){
jframe = new JFrame();
jframe.setTitle("边界布局");
jframe.setBounds(300, 200, 180, 180);
jb1 = new JButton("东");
jframe.add(jb1, BorderLayout.EAST);
jb2 = new JButton("西");
jframe.add(jb2,BorderLayout.WEST);
jb3 = new JButton("南");
jframe.add(jb3,BorderLayout.SOUTH);
jb4 = new JButton("北");
jframe.add(jb4,BorderLayout.NORTH);
jb5 = new JButton("中");
jframe.add(jb5);//BorderLayout.CENTER可以省略
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.setVisible(true);
}
public static void main(String[] args) {
new P004_BorderLayout();
}
}
流布局FlowLayout:像一排文字一个挨着一个的布局。流布局用于安排有向流中的组件,这非常类似于段落中的文本行。流的方向可以指定。
优点:可以快速添加组件,不用指定位置,也不用指定边界
缺点:线性排列 ,外观单调。(嵌套其他布局,可以忽略缺点)
代码参考
import java.awt.FlowLayout;
import javax.swing.*;
public class P003_FlowLayout {
JFrame jframe;
public P003_FlowLayout(){
jframe = new JFrame("流式布局");
for (int i = 1; i = 5; i++) {
jframe.add(new JButton(i+""));
}
jframe.setLocation(380, 260);
jframe.setLayout(new FlowLayout(FlowLayout.LEFT));//窗口指定位流式布局,方向从左往右
jframe.pack();
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.setVisible(true);
}
public static void main(String[] args) {
new P003_FlowLayout();
}
}
表格布局GridLayout:它以矩形网格形式对容器的组件进行布置。容器被分成大小相等的矩形,一个矩形中放置一个组件。
优点:组件整齐排列,
缺点:如果添加的组件数量,和指定的数量不一致,容易导致缺失等
参考代码
import javax.swing.*;
import java.awt.*;
public class P005_GridLayout {
JFrame jframe;
public P005_GridLayout() {
jframe = new JFrame("表格布局");
jframe.setLayout(new GridLayout(3, 4));//表格布局,3行 4列
for (int i = 0; i = 12; i++) {
jframe.add(new JButton(i+""));
}
jframe.setLocation(300, 200);
jframe.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
jframe.pack();
jframe.setVisible(true);
}
public static void main(String[] args) {
new P005_GridLayout();
}
}
最后: 布局是一种灵活的东西。你可以一个布局里嵌套另外一个布局。
比如边界布局的窗口的中间,加入按表格布局的组件,表格布局里面是流式布局。
很多的复杂的界面,通过细分,都能拆分成常用布局的嵌套