1 / 91

情境 4 产品库存管理系统 的界面实现

情境 4 产品库存管理系统 的界面实现. 学习情境描述. 设计实现产品库存管理系统的用户登陆模 块及主界面。. 登录界面. bbb. aaa. 主界面. *** (456). *** (123). 所需知识. 容器与组件； 布局管理器； 事件处理机制； 常用 Swing 组件的使用；. 重点及难点. 事件处理机制； 常用 Swing 组件的使用；. 能力目标. 培养学生图形用户界面设计和实现的技能、阅读代码的能力、程序调试能力，养成良好的编码风格 培养学生英语阅读能力和技术创新能力 培养学生的自学能力、知识的融会贯通能力和动手实践能力.

gamba
Download Presentation

情境 4 产品库存管理系统 的界面实现

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 情境4 产品库存管理系统的界面实现

  2. 学习情境描述 设计实现产品库存管理系统的用户登陆模 块及主界面。 登录界面 bbb aaa 主界面 ***(456) ***(123)

  3. 所需知识 容器与组件； 布局管理器； 事件处理机制； 常用Swing组件的使用；

  4. 重点及难点 事件处理机制； 常用Swing组件的使用；

  5. 能力目标 培养学生图形用户界面设计和实现的技能、阅读代码的能力、程序调试能力，养成良好的编码风格 培养学生英语阅读能力和技术创新能力 培养学生的自学能力、知识的融会贯通能力和动手实践能力

  6. 程序 用户 了解图形用户界面 图形用户界面

  7. 图形用户界面的组成 容器 面板 窗口 单行文本框 标签 单选按钮 按钮 多行文本框 复选按钮 组合框 组件

  8. 组件与容器 图形用户界面 add()添加组件 组件 容器 remove()移除组件 图形化显示 与用户交互 放在容器内 能容纳其他 组件和容器 一种组件

  9. GUI支持包 java.awt包 javax.swing包 • 提供了大量地进行GUI设计所使用的类和接口 • Java语言进行GUI程序设计的基础 • 由100%纯Java实现的，不依赖操作系统的支持 • 使得Java的图形用户界面上了一个台阶

  10. AWT概述 通过 AWT （ 重量级组件） 创建 GUI java.awt包 AWT包含内容 容器 包含 AWT容器组件 组件 以图形表示的对象允许用户交互 布局管理器 定义 GUI 组件的位置 图形和绘制方法 使用 AWT图形方法相对于窗口绘制图形 字体 创建并构造用于选择新字体的对象 事件 用于用户和系统交互

  11. awt包中主要类之间的关系 AWTEvent Panel Applet Font Component Container Java.lang.object Graphics Window Frame MenuComponent 布局管理器类

  12. Swing概述 通过 Swing （轻量级组件，纯Java组件） 创建 GUI Javax.swing 包 Swing 包含内容 容器 包含 Swing 组件 组件 以图形表示的对象允许用户交互 可改变的外观 可更换图形界面的风格 Java2D图形绘制 使用Java2D绘制图形

  13. Swing的类层次结构 java.awt.Component Swing组件是Container 类的直接或间接子类。 java.awt.Container java.awt.Window java.awt.Frame javax.swing.JFrame javax.Dialog javax.swing.JDialog javax.swing.JWindow java.awt.Applet javax.swing.JApplet javax.swing.Box javax.swing.JComponent

  14. 任务1 创建具有以下特征的窗口： 自定义窗口的标题； 窗口的大小不可变。 标题 最大化按钮失效

  15. 添加组件 事件处理 创建容器 创建图形用户界面的基本步骤 选择外观 布局管 理器

  16. Swing外观的设置3-1 • Swing采用MVC设计范式：即“模型-视图-控制”。 控制用 户输入 控制器 保存 内容 模型 显示内容 视图

  17. Swing外观的设置3-2 • Swing采用可插入的外观感觉，使得程序在一个平台上运行时能够有不同的外观。 Metal外观 Motif外观 Windows外观

  18. Swing外观的设置3-3 public static void main(String[] args) { // 设定页面外观风格 try { } catch (ClassNotFoundException e) { e.printStackTrace(); } catch (InstantiationException e) { e.printStackTrace(); } catch (IllegalAccessException e) { e.printStackTrace(); } catch (UnsupportedLookAndFeelException e) { e.printStackTrace(); } UIManager.setLookAndFeel( UIManager.getCrossPlatformLookAndFeelClassName()); //设定当前平台外观风格 UIManager.setLookAndFeel(“com.sun.Java.swing.plaf. windows.WindowsLookAndFeel”); //Windows风格 UIManager.setLookAndFeel("com.sun.Java.swing.plaf.motif. MotifLookAndFeel"); //Motif风格 UIManager.setLookAndFeel(“Javax.swing.plaf.metal. MetalLookAndFeel”); //Metal风格

  19. Swing容器组件 Swing应用程序 顶层容器（每个应用 程序中至少有一个） 主窗口 主要显示区域包含 GUI中的可视组件 内容面板 创建顶层容器 创建容器 设置容器大小 （对框架及面板而言） 设置容器可见度 （对框架及面板而言）

  20. 常用容器—JFrame的使用

  21. JFrame的使用2-1 向JFrame中添加组件的两种方式之一： 用getContentPane()方法获得JFrame的内容面板，再对其加入组件： frame.getContentPane().add(childComponent)

  22. JFrame的使用2-2 向JFrame中添加组件的两种方式之二： 把组件添加到Jpanel之类的中间容器中，用setContentPane()方法把该容器置为JFrame的内容面板： Jpanel contentPane=new Jpanel( ); ……//把其它组件添加到Jpanel中; frame.setContentPane(contentPane);

  23. 任务1：分析与实现 import javax.swing.*; import java.awt.*; class GUIDemo1 {{ static void setLocaleLookAndFeel(){ { try{ { UIManager.setLookAndFeel(UIManager.getSystemLookAndFeelClassName()); } catch(Exception e){} } public static void main(String[] args) { GUIDemo1.setLocaleLookAndFeel();//选择外观风格 JFrame f=new JFrame("第一个Java窗口");//创建容器 f.setSize(300,300);//设置容器大小 f.setVisible(true);//设置容器可见性 } }

  24. 任务2 实现如下图所示的图形用户界面。

  25. 布局管理器(LayoutManager) 为了实现跨平台的特性并获得动态的布局效果，Java将容器内的所有组件安排给 “布局管理器”负责管理。 布局管理器管理当窗口移动或调整大小后组件如何变化等功能。 容器可以通过选择不同的布局管理器来决定布局。 setLayout()方法可以设置容器的布局管理器。

  26. FlowLayout—流式布局管理器 FlowLayout是JPanel的默认布局管理器 上 左 右 下 默认居中对齐

  27. FlowLayout使用示例 import java.awt.*; import javax.swing.*; class FlowLayoutDemo extends JFrame { JButton jb1,jb2,jb3,jb4,jb5; public FlowLayoutDemo(String title) { super(title); } void init(){ Container c=frame.getContentPane(); jb1=new JButton("第一个按钮"); jb2=new JButton("第二个按钮"); jb3=new JButton("第三个按钮"); jb4=new JButton("第四个按钮"); jb5=new JButton("第五个按钮"); c.setLayout(new FlowLayout()); //设置布局管理器 c.add(jb1); c.add(jb2); c.add(jb3); c.add(jb4); c.add(jb5); } public static void main(String[] args) { FlowLayoutDemo flowlayout=new FlowLayoutDemo(" FlowLayoutDemo "); flowlayout.init(); flowlayout.pack(); flowlayout.setVisible(true); } }

  28. BorderLayout—边界布局管理器 North West East Center 当容器大小变化时， 组件的相对位置不变， 大小发生变化 South

  29. BorderLayout—边界布局管理器 向BorderLayout布局的容器中添加组件时，可使用add(Component compObj，Object region)方法。 组件对象 表示区域的静态常量 实战：实现前面BorderLayout示例界面。

  30. BorderLayout—边界布局管理器 思考：横向、纵向改变BorderLayout布局的容器大小，总结组件的变化规律。

  31. GridLayout—网格布局管理器 将容器的空间划分成若干行、列的网格 上 左 右 组件大小相同 下

  32. Swing常用容器— JPanel的使用 • JPanel面板是一种可以添加到其他容器中使用的容器组件。 可用javax.swing.BorderFactory 类中的方法获得

  33. Swing常用组件的使用--JButton • JButton(按钮)是一个常用组件，可以显示文本或图标，点击时能够响应单击事件。

  34. 任务2：分析与实现2-1 设置了边界的 JPanel面板作为内容面板 两个按钮添加到Jpanel面板中

  35. 任务2：分析与实现2-2 import java.awt.*; import javax.swing.*; class JPanelDemo extends JPanel { JButton b1 = new JButton("JPanel"); JButton b2 = new JButton("Demo"); public JPanelDemo() { setBackground(Color.white); add(b1); add(b2); } public static void main(String[] args) { JPanel jp = new JPanelDemo(); jp.setBorder(BorderFactory.createTitledBorder("Hello,Border")); JFrame frame = new JFrame("JPanelDemo"); frame.setSize(200, 150); frame.setContentPane(jp); frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE); frame.setVisible(true); }}

  36. 任务3 设计实现一个简单的计算器界面，如下图所示。

  37. 容器的嵌套 • 一个包含了多个组件的容器本身可以作为一个组件加到另一个容器中去，容器中再添加容器，这样就形成了容器的嵌套。 一个Jpanel包含一个标签 一个Jpanel包含5个组件

  38. Swing常用组件的使用--JLabel • JLabel(标签)是用户不能修改只能查看的文本/图像显示区域。

  39. Swing常用组件的使用--JTextField • JTextField(单行文本域)是一个单行条形文本区，能够接收输入、显示输出。

  40. Swing常用组件的使用--JPasswordField • JPasswordField(口令框)接受用户的输入，但不会真正显示出来，而是显示回显符。

  41. JPasswordField实例 实战：实现上面的图形用户界面。

  42. Swing常用组件的使用--JTextArea • JTextArea(多行文本框)可以输入或输出多行文本。

  43. 手动换行 • 自动换行：通过设置换行属性来避免手动换行 textArea.setLineWrap(true); • 增加滚动条：通过把文本区插入到一个滚动窗格中来实现。 JScrollPane scrollPane = new JScrollPane(textArea); JTextArea的换行方式

  44. 任务3：分析与实现 p = new JPanel(); p.add(lab); p.add(tx1); p.add(labl); p.add(tx2); p.add(b); p.add(tx3); c.add(p); } public static void main(String[] args) { Calculate cal=new Calculate("计算器"); cal.init(); cal.pack(); cal.setVisible(true); } } import java.awt.*; import javax.swing.*; class Calculate extends JFrame { private JTextField tx1; private JTextField tx2; private JTextField tx3; private JPanel p; public Calculate(String title) { super(title); } void init() { Container c=this.getContentPane(); JLabel lab=new JLabel("计算器举例"); JLabel labl=new JLabel("+"); tx1=new JTextField(5); tx2=new JTextField(5); tx3=new JTextField(5); JButton b=new JButton("=");

  45. 事件处理的实现 思考：观察前面任务中实现的用户界面，界面中的组件是否实现了与用户交互的功能？ NO! 必须进行事件处理

  46. AWT事件处理机制—三类主要对象 事件 用户对界面操作，以类的形式出现 Event 事件处理 事件源 事件发生的场所，通常就是各个组件 Event Source 事件处理者 接收事件并对其进行处理的对象 Event handler

  47. AWT事件处理机制—事件处理模型 外部作用 把事件对象传入事件监听器 生成事件对象 事件对象 ③ ④ ② 事件监听器 组件(事件源) 事件监听器注册 ①

  48. 事件类和事件监听器 • 事件处理者(监听器)通常是一个类，负责处理一类事件 • 该类如果要能够处理某种类型的事件，就必须实现与该事件类型相对应的接口 • 每个事件类对应于一个事件监听器接口

  49. AWT中常用事件类及事件监听器接口

  50. 事件处理的实现步骤 2.调用组件的addXxxListener方法，将监听器对象注册到GUI组件上。 1.编写一个事件监听器类，实现与事件类XxxEvent相对应的XxxListener接口；

More Related