GUI
GUI graphic User Interface,图形用户界面。我们平时用的QQ、pycharm、搜狗输入法工具栏这些软件的界面都叫做GUI开发。因为GUI相关库不生态统一、学习成本、功能、盈利等方面问起，目前开发者不多。
windows上的软件图形界面底层调用是C++，DirectX 底层的图形接口。其他语言的开发者封装win底层图形接口形成自己语言可以调用的图形库。例如java中的AWT swing，python中的 TKinter GTK wxwidgets qt5。有兴趣的话可以深入学习GUI领域。
引入：from tkinter import Tk, Listbox
创建一个窗口
root = Tk()
list1 = ['C', 'python', 'php', 'html', 'java']
list2 = ['CSS', 'jQuery', 'Bootstrap']

创建两个列表组件
com_a = Listbox(root)
com_b = Listbox(root)

往列表组件里写数据
for i in list1:
    com_a.insert(0, i)
for i in list2:
    com_b.insert(1, i)

将com_a部件放置到主窗口中
com_a.pack()
com_b.pack()

进入消息循环、事件监听
root.mainloop()

目录

1.GUI的介绍

1.1GUI概述

1.2Java提供了三个主要包做GUI开发：

2.Swing组件

2.1顶层容器介绍

2.2中间容器

2.3基本组件

3.API介绍

3.1Jframe组件

3.2Panel组件

3.3功能组件

4.案例代码

4.1UI介绍

4.2代码

5.插件介绍WindowBuilder

5.1搜索WindowBuilder

5.2.在eclipse的中安装

5.3WindowBuilder插件的使用

1.GUI的介绍

1.1GUI概述

　　早期，电脑向用户提供的是单调、枯燥、纯字符状态的“命令行界面（CLI）”。就是到现在，我们还可以依稀看到它们的身影：在Windows中开个DOS窗口，就可看到历史的足迹。后来，Apple公司率先在电脑的操作系统中实现了图形化的用户界面（Graphical User Interface，简称GUI），但由于Apple公司封闭的市场策略，自己完成电脑硬件、操作系统、应用软件一条龙的产品，与其它PC不兼容。这使得Apple公司错过了一次一统全球PC的好机会。

　　后来，Microsoft公司推出了风靡全球的Windows操作系统，它凭借着优秀的图形化用户界面，一举奠定了操作系统标准的地位。这也造就了世界首富---比尔.盖茨和IT业的泰山北斗微软公司。

　　在这图形用户界面风行于世的今天，一个应用软件没有良好的GUI是无法让用户接受的。而Java语言也深知这一点的重要性，它提供了一套可以轻松构建GUI的工具。在本章和下一章中，我们将向你充分证明这一点。

1.2Java提供了三个主要包做GUI开发：

java.awt 包 – 主要提供字体/布局管理器

javax.swing 包[商业开发常用] – 主要提供各种组件(窗口/按钮/文本框)

java.awt.event 包 – 事件处理，后台功能的实现。

 

2.Swing组件

如图所示：swing组件主要可分为三个部分，后面会详细介绍

（1）顶层容器:：常用有JFrame，JDialog

（2）中间容器：JPanel，JOptionPane，JScrollPane，JLayeredPane 等，主要以panel结尾。

（3）基本组件：JLabel，JButton，JTextField，JPasswordField，JRadioButton 等。



2.1顶层容器介绍


			
#         
			
			

			
组件         
			
			

			
描述
			
		

			
1         
			
			

			
JFrame         
			
			

			
一个普通的窗口（绝大多数 Swing 图形界面程序使用 JFrame 作为顶层容器）
			
		

			
2         
			
			

			
JDialog         
			
			

			
对话框
			
		
2.2中间容器


			
#         
			
			

			
组件         
			
			

			
描述
			
		

			
1         
			
			

			
JPanel (相当于div)
			
			

			
一般轻量级面板容器组件(作为JFrame中间容器)
			
		

			
2         
			
			

			
JScrollPane         
			
			

			
带滚动条的，可以水平和垂直滚动的面板组件
			
		

			
3         
			
			

			
JSplitPane         
			
			

			
分隔面板
			
		

			
4         
			
			

			
JTabbedPane         
			
			

			
选项卡面板
			
		

			
5         
			
			

			
JLayeredPane         
			
			

			
层级面板
			
		
 

2.3基本组件


			
#         
			
			

			
组件         
			
			

			
描述
			
		

			
1         
			
			

			
JLabel
			
			

			
标签
			
		

			
2         
			
			

			
JButton         
			
			

			
按钮
			
		

			
3         
			
			

			
JRadioButton         
			
			

			
单选按钮
			
		

			
4         
			
			

			
JCheckBox         
			
			

			
复选框
			
		

			
5         
			
			

			
JToggleButton         
			
			

			
开关按钮
			
		

			
6         
			
			

			
JTextField         
			
			

			
文本框
			
		

			
7         
			
			

			
JPasswordField         
			
			

			
密码框
			
		

			
8         
			
			

			
JTextArea         
			
			

			
文本区域
			
		

			
9         
			
			

			
JComboBox         
			
			

			
下拉列表框
			
		

			
10         
			
			

			
JList         
			
			

			
列表
			
		

			
11         
			
			

			
JProgressBar         
			
			

			
进度条
			
		

			
12         
			
			

			
JSlider         
			
			

			
滑块
			
		
 

3.API介绍

3.1Jframe组件


			
JFrame frame = new JFrame("HelloWorldSwing");
			
			

			
  // 创建及设置窗口
			
		

			
frame.setDefaultLookAndFeelDecorated(true);
			
			

			
 // 确保一个漂亮的外观风格
			
		

			
frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
			
			

			
设置默认的关闭窗口
			
		

			
frame.pack();
			
			

			
   // 显示窗口
			
		

			
frame.setVisible(true);
			
			

			
//这个最好放在最后，不然会出现视图看不到的情况
			
		

			
frame.setBounds(600, 300, 500, 400);
			
			

			
设置窗口的x,y位置，窗口大小x,y.
			
		

			
frame.add(panel)
			
			

			
添加panel面板到容器
			
		

			
frmIpa.getContentPane().add(panel, BorderLayout.NORTH);
			
			

			
添加面板到主窗口，布局在北面
			
		

			
frmIpa.getContentPane().add(scrollPane, BorderLayout.CENTER);
			
			

			
添加可滚动面板到主窗口，布局在中间
			
		
 

 

3.2Panel组件

Jpanel


			
JPanel panel = new JPanel();
			
			

			
创建面板容器
			
		

			
panel.add(button);
			
			

			
添加按钮到面板
			
		
JOptionPane


			
JOptionPane.showMessageDialog(panel3, "没有选中任何文件", "提示", JOptionPane.WARNING_MESSAGE);
			
			

			
弹出提示框到panel容器
			
		
JScrollPane


			
JScrollPane scrollPane = new JScrollPane();
			
			

			
创建可滚动面板
			
		

			
scrollPane.setViewportView(textArea);
			
			

			
设置面板内容
			
		
 

3.3功能组件

JLabel


			
 JLabel label = new JLabel("Hello World");
			
			

			
添加标签
			
		
Jbutton


			
JButton button = new JButton("选择文件");
			
			

			
创建按钮
			
		

			
button.addActionListener(new ActionListener() {}
			
			

			
添加操作按钮后的事件监听器
			
		
JFileChooser


			
 jfc.setFileSelectionMode(JFileChooser.FILES_AND_DIRECTORIES );
			
			

			
// 设置文件对话框
			
		

			
jfc.showSaveDialog(frmIpa);
			
			

			
// 显示打开的文件对话框
			
		

			
jfc.getSelectedFile();
			
			

			
// 获取选择器选择的文件
			
		
JTextArea


			
JTextArea textArea = new JTextArea();
			
			

			
创建文本区域
			
		

			
textArea.setText(content);
			
			

			
设置内容
			
		
4.案例代码

这个UI是用来读取ipa文件info.plist中的信息，有需要的朋友可以去下面链接看看

https://blog.csdn.net/qq_42035966/article/details/82086462

4.1UI介绍

主窗口Jframe，

    Jframe添加2个Jpanel面板，

         北面Jpanel添加JButton,JButton打开JFileChooser文件对话框。

         中间JScrollPane添加JTextArea文本区域，文本区域按各自业务逻辑来处理。



 

4.2代码

import java.awt.BorderLayout;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;
import java.io.File;
import javax.swing.JButton;
import javax.swing.JFileChooser;
import javax.swing.JFrame;
import javax.swing.JOptionPane;
import javax.swing.JPanel;
import javax.swing.JScrollPane;
import javax.swing.JTextArea;

public class IpaUI {
	public static JFrame frmIpa;
	public JTextArea textArea;

	public IpaUI() {
		// 窗口框架
		frmIpa = new JFrame();
		frmIpa.setTitle("ipa工具类");
		frmIpa.setBounds(600, 300, 500, 400);
		frmIpa.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

		// 面板1
		JPanel panel = new JPanel();
		frmIpa.getContentPane().add(panel, BorderLayout.NORTH);
		JButton button = new JButton("选择文件");
		// 监听button的选择路径
		button.addActionListener(new ActionListener() {
			@Override
			public void actionPerformed(ActionEvent e) {
				// 显示打开的文件对话框
				JFileChooser jfc = new JFileChooser();
				jfc.showSaveDialog(frmIpa);
				try {
					// 使用文件类获取选择器选择的文件
					File file = jfc.getSelectedFile();//
					//这里是我的业务需求，各位不必照抄
//					String content = IpaService.getIpaInfoMap(file.toString());
//					textArea.setText(content);
				} catch (Exception e2) {
					JPanel panel3 = new JPanel();
					JOptionPane.showMessageDialog(panel3, "没有选中任何文件", "提示", JOptionPane.WARNING_MESSAGE);
				}
			}
		});
		panel.add(button);

		// 可滚动面板
		JScrollPane scrollPane = new JScrollPane();
		frmIpa.getContentPane().add(scrollPane, BorderLayout.CENTER);
		textArea = new JTextArea();
		scrollPane.setViewportView(textArea);
		//这个最好放在最后，否则会出现视图问题。
		frmIpa.setVisible(true);
	}

}
​

 

5.插件介绍WindowBuilder

    总算骗大家看完文章，其实最方便的方法是用插件制作，当然大家先了解完代码原理是最好的哈哈。eclispe安装windowbuilder有两种方式，一种是离线安装，一种是在线安装。

5.1搜索WindowBuilder

找到http://www.eclipse.org/windowbuilder/download.php



根据自己的eclipse版本选择，因为我的是4.8版本了，所以只能在线安装。

 

5.2.在eclipse的中安装

（1）选择Help - Eclipse MarketPlace



（2） 在商店中搜索windowbuilder ，会出现WindowBuilder插件



（3）一路下一步，进行安装，等待安装结束重启eclipse即可。

 

5.3WindowBuilder插件的使用

（1）在Eclipe菜单中File - New -Other ，选中WindowBuilder - Swing Designer - JFrame。



（2）打开文件，点击左下角的Design进入视图模式，左边对应代码模式

左上是整个视图结构，左下是单个结构的属性，可以在这里修改窗口的一些属性，

中间是整个swing的界面按钮，前面第二点介绍过的，这里就不说了，

右边就是视图了，可以点击按钮往视图里面添加，如下图。

导言篇：

我的python环境是：python3.6.5

这里我选择的GUI编程包是：tkinter

tkinker在python2.5以后就是自带包了，所以我们不需要另外安装

tkinker相对与其他python GUI编程的包而已，是相对容易入手的

 

代码篇：

#这是系统的登录界面  
  
import tkinter  
from tkinter import messagebox
  
class Login(object):  
    def __init__(self):  
        # 创建主窗口,用于容纳其它组件  
        self.root = tkinter.Tk()  
        # 给主窗口设置标题内容  
        self.root.title("影视资源管理系统(离线版)")  
        self.root.geometry('450x300')  
        #运行代码时记得添加一个gif图片文件，不然是会出错的
        self.canvas = tkinter.Canvas(self.root, height=200, width=500)#创建画布  
        self.image_file = tkinter.PhotoImage(file='welcome_1.gif')#加载图片文件  
        self.image = self.canvas.create_image(0,0, anchor='nw', image=self.image_file)#将图片置于画布上  
        self.canvas.pack(side='top')#放置画布（为上端）  
  
        #创建一个`label`名为`Account: `  
        self.label_account = tkinter.Label(self.root, text='Account: ')  
        #创建一个`label`名为`Password: `  
        self.label_password = tkinter.Label(self.root, text='Password: ')  
          
  
        # 创建一个账号输入框,并设置尺寸  
        self.input_account = tkinter.Entry(self.root, width=30)  
        # 创建一个密码输入框,并设置尺寸  
        self.input_password = tkinter.Entry(self.root, show='*',  width=30)  
  
        # 创建一个登录系统的按钮  
        self.login_button = tkinter.Button(self.root, command = self.backstage_interface, text = "Login", width=10)  
        # 创建一个注册系统的按钮  
        self.siginUp_button = tkinter.Button(self.root, command = self.siginUp_interface, text = "Sign up", width=10)  
  
    # 完成布局  
    def gui_arrang(self):  
        self.label_account.place(x=60, y= 170)  
        self.label_password.place(x=60, y= 195)  
        self.input_account.place(x=135, y=170)  
        self.input_password.place(x=135, y=195)  
        self.login_button.place(x=140, y=235)  
        self.siginUp_button.place(x=240, y=235)  
  
    # 进入注册界面  
    def siginUp_interface(self):  
        # self.root.destroy()  
        tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入注册界面')  
          
    # 进行登录信息验证  
    def backstage_interface(self):  
        account = self.input_account.get().ljust(10," ")  
        password = self.input_password.get().ljust(10," ")  
        #对账户信息进行验证，普通用户返回user，管理员返回master，账户错误返回noAccount，密码错误返回noPassword  
        verifyResult = verifyAccount.verifyAccountData(account,password)  
  
        if verifyResult=='master':  
            self.root.destroy()  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入管理界面')  
        elif verifyResult=='user':  
            self.root.destroy()  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='进入用户界面')   
        elif verifyResult=='noAccount':  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='该账号不存在请重新输入!')  
        elif verifyResult=='noPassword':  
            tkinter.messagebox.showinfo(title='影视资源管理系统', message='账号/密码错误请重新输入!')  
  
def main():  
    # 初始化对象  
    L = Login()  
    # 进行布局  
    L.gui_arrang()  
    # 主程序执行  
    tkinter.mainloop()  
  
  
if __name__ == '__main__':  
    main()  

效果篇：



 

 

 

语法介绍：

环境配置：

Python3.6.5，前往官网下载

tkinker包：Python2.5之后，tkinker包是自带的，我们直接导入就好了

 

基本语法：

self.root = tkinter.Tk()

创建一个窗口对象root，root前面的self.是面向对象里面的内容，不明白的童鞋可以去Google一下面向对象

self.root.title("影视资源管理系统(离线版)")  
self.root.geometry('450x300')

给窗口root设置标题，并设置窗口

 

self.canvas = tkinter.Canvas(self.root, height=200, width=500)#创建画布  
self.image_file = tkinter.PhotoImage(file='welcome_1.gif')#加载图片文件  
self.image = self.canvas.create_image(0,0, anchor='nw', image=self.image_file)#将图片置于画布上  
self.canvas.pack(side='top')#放置画布（为上端）

如果我们需要让自己的界面在美观上加分，大可以试试创建一个画布，也就是下面这个东西



我这里是先对图片背景进行了透明化处理，需要的小伙伴可以去这里 对图片进行处理，个人觉得这个网站还是不错的

#创建一个`label`名为`Account: `  
self.label_account = tkinter.Label(self.root, text='Account: ')  
#创建一个`label`名为`Password: `  
self.label_password = tkinter.Label(self.root, text='Password: ')

这里创建的是一个label，label是什么不明白可以参考上面贴图的“Account:”与“Password:”

 

.Label(A, B)：参数A代表Lable依赖窗口，参数B即用户可见的Lable的名字了（text="LableName"）

.Button(A, B, text='', [width='', height=''])：参数A是按钮依赖的窗口主体，参数B是按钮的相应事件（command = self.siginUp_interface）这里的响应事件的进行注册/登录进入后台，command后接响应函数。

.Entry(A)：输入框，参照前面的.Label()，有疑问的可以在下方留言

.place(x="", y="")：这个是设置窗口部件的函数

 

 

 

 

 

在Git简介一文中已经对Git进行了简单的介绍，但是理论知识过于枯燥，加上本人专业知识不够扎实，使得初学者在Git的使用上还是会有很大的困难。虽然我更推荐使用Git Bash方式对Git进行操作，但是对于大部分只是想简单地使用一下Git进行版本控制和团队开发的朋友而言，仍然更加钟情于可视化界面。所以本文对Git官方自带的可视化工具Git Gui的使用进行介绍，尽量做到图文并茂，让所有初探Git的朋友都能够快速入门，使用Git进行项目开发。
1.在本地新建版本库
首先，我们打开Git GUI是这样的一个界面，选择第一项，新建版本库。


然后选择你需要进行版本管理的项目路径，我选择了一个LoginDemo的项目。


当你创建了版本库的时候，你可以在该项目的路径下看见多了一个.git文件夹（设置了隐藏文件不可见的话看不见）


在Git Gui中，如果Unstaged Changes（未缓存的改动）中包含文件，则先点击Stage Changed，将未缓存的改动加入缓存，再点击Commit；否则需要先点击Rescan扫描项目中进行过改动的文件。注：提交描述必须要填写，不然无法提交。


提交成功后，我们可以在Repository->Visualize All Branches History中看到我们提交的历史记录（这是提交到本地而不是提交到远程服务器）。至此，本地版本库就创建成功了。

2.将项目提交到远程
上一步已经使用Git在本地建立起了版本库，然后我们需要将该项目提交到远程服务器以便同事或其他合作者共同参与开发。一般的开源项目使用github作为远程服务器。其实在本地简历版本库后，只需要点击push就可以直接上传。但是我们还没有将本地的Git与github建立联系以及设置安全协议。
首先，我们需要在有一个自己的github帐户，然后在github上新建一个repository，名字也叫做LoginDemo（可以和本地项目名不一样）。


在Git Gui中，选择Remote->add添加远程服务器，远程服务器信息有两种填写方式，填写https地址或ssh地址，对应github项目的https和ssh地址，推荐使用ssh方式。
1.https地址
这种方式需要输入你的github帐户和密码，意味着通过这种方式你只能够操作自己的项目。

2.ssh地址
这种方式需要进行授权设置，在Git Gui的菜单栏，点击Help->Show SSH key->Generate SSH KEY创建密钥。


然后在github的Personal settings中添加它，title随意，可以用Home，company等作为标识来区别。


添加远程服务器信息。

接下来，我们便可以直接在Git Gui点击push提交至远程客户端，刷新一下github，便可以看到项目已经在repository中了。

3.从远程下载更新
设想多人参与项目开发，每个人都只push到远程，完全不顾其他成员的进度，这样的开发模式无疑是有问题的。我们最好的做法是，每次push到远程的时候，先从远程把目前进度fetch下来，在和自己目前项目进度merge后，再将它push到远程。打开Git Gui，在菜单栏中选择Remote->Fetch from->LoginTest，便可以从远程服务器更新到本地，但是尚未与自己当前项目合并。

4.合并解决冲突
从远程fetch后，选择Git Gui的Merge->Local Merge进行合并，选择Tracking Branch。


如果本地有一个方法名叫findUser，而远程服务器中该方法的名字改变了，例如变成了findPassword，则合并遇到冲突，可以右键空白部分选择保留本地版本或远程版本进行合并（图中绿色的代码表示冲突部分）。

5.克隆github上的项目到本地
在Git Gui的主界面选择克隆已有版本库。


Source Location即github中项目的地址，和第二部分（将项目提交到远程）中一样，可以选择https地址或ssh地址，Target Directory是在本地存放该项目的路径。点击Clone，成功从github将项目克隆到本地。