GUI-图形界面编程-1

什么是GUI?

GUI全称Graphical User Interfaces，意为图形用户户界面，又称为图形用户接口，一般称为图形界面编程。GUI指的就是采用图形方式显示的计算机操作用户界面，比如：平时使用的QQ。现在公司中很少会再有使用GUI技术桌面应用程序。

GUI学习内容

在GUI图形界面编程，需要学习什么内容?
1.学习常见的组件 （比如按钮，单选按钮，文本框等都叫组件）
2. 布局 （如何摆放组件，排列的漂亮）
3. 事件监听机制（功能）
比如：点击计算器上面的数字1，就会显示1，不点击，不显示；可以理解为点一下按钮，后台将会执行一段代码，这段代码最终让数字显示在计算器屏幕上.

GUI常用组件继承体系

• component介绍
  Component；
  Component 这个类是什么含义?
  表示组件，它是其他组件的父类；
  组件：是一个具有图形表示能力的对象，可在屏幕上显示，并可与用户进行交互。典型图形用户界面中的按钮、复选框和滚动条都是组件示例。Component 属于 java.awt包；
  使用图形界面编程的两个包：Java.awt / javax.swing
  常用的组件体系:
  Component 是所有组件的父类, 提供很多基础的功能.

• container容器
  容器作用 ? 用于装组件；
  container 是component的子类；
  Button 也是component 的子类；
  容器特殊性: 放其他组件，比如可以放button组件
  一般的容器对象是一个可包含其他awt组件的组件，它本身是一个组件；
  Panel/window 是container 的子类

• TextComponent
  TextComponent 类是所有允许编辑文本的组件的超类
  子类： TextArea / TextField
  TextArea：显示文本的多行区域 ；TextField： 表示单行文本组件;

• 文本组件用途
  TextArea和TextField的用途：
  发帖，聊QQ，用eclipse新建类时候，有个supleclass 和 interfaces 文本框就是文本组件;

• Panel
  Panel 是 最简单的容器类，可以放置其他组件。

• Window
  Window是一个没有边界 和 菜单栏的顶层窗口

• dialog
  dialog属于对话框;

• Frame
  Frame 是带有标题和边框的顶层窗口
  比如做一个计算器，需要创建Frame，并且Frame是可以带标题;
  

GUI第一个窗体程序(计算器)

组件熟悉之后，下一步，写一个简单的可视化的窗体程序；比如，现在我们要搞一个计算器简易界面，首先是不是要使用组件搞一个界面框出来？根据刚才我们讲的，应该用哪个组件来画这个框框？我们需要一个带标题和边框的窗体：Frame

• 搭建环境

  在工程里面创建包和类
  包 cn.itsource.gui
  类 FrameDemo

• 创建一个窗体
  Frame：一个带有标题和边框的窗体
  怎么创建一个窗体Frame对象？
  Frame f = new Frame();
  运行：发现jvm启动一会就关闭了，但是我们根本没有看到任何效果。这是为什么呢？怎么查找我们？查看api发现，无参的是一个不可见的。
  Frame() 构造一个最初不可见的 Frame 新实例（）。

• 设置窗体可见
  设置窗体可见：f指代Frame对象；调用f.setVisable(true) 用来显示窗体Frame；
  怎么在api文档里查看这个方法？是不是在Frame上设置的？所以我们在Frame上找找，我找啊找，没找到！！！怎么办？当前类没有找到，是不是往上在父类中一层一层的找啊？来，根据组件继承体系，先在父类中找。这么多方法，怎么找？Ctrl+f,搜索setVisable，是不是出来了？

• 设置窗体大小
  提高用户体验？
  f.setSize(width,height) //设置窗体Frame 对象的大小
  Width 的单位是什么呢? 像素：像素就是一个个无数的点组成的。看我们电脑的分辨率设置。可以调一下分辨率看看效果。

• 设置窗体初始化位置
  f.setLocation(x,y);//坐标x,y
  可以画一个xy的轴图描述xy分别代表什么
  X: 这里表示窗体距离屏幕左边的位置；
  Y: 表示窗体距离屏幕上边的距离；
  我们可以随便打开一个窗体，比如计算，x,y就是计算器最左上角那个点距离屏幕左侧和上侧的距离。

• 设置窗体标题
  通过Frame构造函数设置Frame的标题
  Frame f = new Frame(“计算器”);
  

向窗体中添加组件

• 添加组件写在哪里
  添加组件代码写在设置可见之前；因为需要在组件都创建完之后，也就是数据准备完之后，再设置窗体可见，否则有可能会出现窗体已经显示出来了，但是组件还没有完全加载出来;

public static void main(String[] args) {
		Frame f=new Frame("计算器");
		//添加组件		
		f.setSize(400, 400);//设置窗体大小
		f.setLocation(800,300);//设置窗体位置
		f.setVisible(true);//设置窗体可见

}

• 添加按钮

创建按钮方法： Button b =new Button();
1：查阅API文档；

2：把鼠标放在Button( )小括号当中，按代码提示 alt+/；

• 向窗体中添加按钮
  向窗体中添加组件:
  f.add(Component p) ： 需要Component类型的对象，此处可以传入任意Component对象以及它子类的对象，(多态体现) 传个button 也可以;
  Component 是个类，也可以添加其子类button;
  如果Component是个接口怎么办? ----- 接口不能直接new个对象，应该传接口实现类对象；

设置窗体的布局 – 流式布局

• 添加两个按钮
  创建两个按钮后被重叠了，只能看到第二个按钮，不能达到我们的效果？怎么办？就需要学习我们的布局。

Public static void main(String arg[]){
	Frame f = new Frame(“计算器”);
	Button b1 = new Button(“确定”);
	f.add(b1);
	Button b2 = new Button(“取消”);
	f.add(b2);
	
	f.setVisable(true);
	f.setSize(500,600);
	f.setLocation(200,100);
}

如果让 “确定”，“取消”并排显示怎么办?

需要设置布局：
设置容器Frame内部的组件的布局方式；画图演示，
布局模式是什么？应该在什么组件上布局？
比如 教室，可以想象成容器，里面桌子 ，按照88模式进行摆放，这里88（8行8列）是一种布局模式，这个布局是对教室进行设置不是桌子，所以我们应该在窗体f上设置布局；

• 设置布局
  通过setLayout 方法设置布局模式；
  f.setLayOut(LayoutManager mgr) 需要传入LayoutManger 对象
  LayoutManger参数 可能是接口也可能是类?
  是个类，直接new 类的对象；
  是接口，传入实现类的对象 ;

• 布局模式介绍
  API (LayoutManger)
  LayoutManger相当于布局模式的一个接口，标准；而LayoutManger下面已知的实现类，可以看着具体的布局模式;
  介绍几种常见的布局模式：
  FlowLayout（流式布局） BorderLayout（边框布局） GridLayout（网格布局）

常用布局介绍
第一种：Flowlayout 流式布局
流式布局: 它是面板的默认布局管理器类，使用时，像在页面中排列英文单词那样排列组件：从左到右，当前行没有空间后进入下一行；

第二种: borderlayout 边框布局
边框布局: 它将容器中的组件放置在特定的位置，该位置有5个方位：东、南、西、北、中。其中4个位置由方向罗盘方向指定，另外一个由中心区域指定。

第三种: gridlayout 网格布局
网格布局:它将容器中所有的组件组织为指定的行数和列数。分配给每个组件的显示区域都相同，因此如果指定2*3的网格，容器将被划分为6个大小相等的区域；

第四种：指定每个组件大小和位置

• 设置流式布局

怎么查找到FlowLayout?
通过LayoutManager查找API文档，在查找继承体系, 找到FlowLayout;
f.setLayout(new FlowLayout());

运行结果

• 根据内容自动变长

按钮根据里面的内容进行自动变长

默认位置居中，还有间距，这些都可以调整的;

• 构造方法
  
  FlowLayout(int align) 指定对齐方式，就是左对齐，右对齐，居中对齐
  FlowLayout.LEFT 是 FlowLayout类的全局常量;
  
  FlowLayout(int align,int hgap,int vgap) 指定水平和垂直间隙