idea前端可视化_IntelliJ IDE 开发Java GUI 入门

本博客主要对java 的GUI相关知识进行简单的介绍和总结,整个博客按照创建一个java GUI的顺序进行介绍,期间穿插讲解用到的java Swing的布局、控件等相关知识。本博客所进行的讲解及工程的创建等,都是基于Intellij IDEA进行操作的。

转载请注明出处...虽然感觉没人会用这个技术吧...

一、创建Gradle管理的java工程

1.在Intellij IDEA的首页,选择Create New Project

首页选择创建新工程

2.点击之后,界面会跳转到如下界面,按照图中选择后,点击next即可(另图中*处标明你必须确保你已经为你的intellij配置过了jdk的路径)。

选择gradle

3.之后,会弹出如下界面,填写GroupId和ArtifactId即可,填写之后继续点击next。

填写groupId和ArtifactId

4.然后会弹出如下界面,并按图中红框标注进行选择,选择完毕后再次点击next。

选择gradle配置

5.然后就到了最后一步,填写工程名称,并选择工程所在路径,如图,填写和设置完成后,点击finish即可。

填写工程名称和路径

6.在intellij的左侧即可显示出创建完成的工程,如下图所示:

初始创建的工程目录

以上就是使用intellij IDEA 创建一个gradle工程的简单引导过程,具体的还要以实际操作为准。

二、创建页面

因为这是鄙人整理的关于java GUI的知识文档,所以这一节是最重要的,毕竟GUI中,页面是它最大的特色。但鄙人才疏学浅,也只能是介绍些基础知识和它们的基本用法,希望可以起到抛砖引玉的作用。

1. 创建一个GUI页面的流程:

在上述第一节中创建的gradle工程中,在其目录中选择如下文件夹(或者你也可以另外在main文件夹下创建新的文件夹):

右击java

右击后,选择new-->GUI Form,点击GUI Form后,会出现如下对话框:

guiformdialog

在其中输入Form name,则下方的Class name默认与Form name相同,例如输入Test,点击ok后,即生成如下的组合文件:

Test组合文件

这两个文件中,Test.form 即为放置GUI中的布局和控件的地方,类似于Android中的xml布局文件或者说是前端的html文件,或者说是iOS的StoryBoard之类的。可以认为,用户最终看到和接触到的就是就是这个文件展示的效果。另外的Test类,则是Test.form文件对应的捆绑类,在这其中主要进行Test.form页面相关的逻辑处理,包括Test.form文件中的各个控件的各种事件,用到的数据的处理等等。

在这里鄙人只对Test类中的一些共性操作作简单介绍,具体的逻辑处理则因页面功能而异,需要大家自己去具体处理了;而对Test.form中放置的布局、控件等则会进行较为详细的介绍,包括布局的基本属性和用法,控件的基本属性和用法等等。

先给大家看个最简单的效果:

巨特么简单的效果

上面这个巨简单的效果图,就是通过GUI Form创建的页面代码run之后生成的java的桌面程序。

它虽然简单,但是却包含了使用Intellij IDEA 创建java GUI Form程序的完整流程,下面鄙人对这个完整流程进行简单介绍:

首先需要说明,这个页面中包含的控件,只有一个JLabel是本人放置的,其它的控件都是系统自动生成的,它的Component Tree(其实就是组件的节点组合效果) 显示如下:

componenttree

下面说具体的创建流程:即点击下图中1处的JLabel控件,然后再点击2处系统默认生成的Jpanel,就搞定了。。

拖放JLabel

之后,则需要进行属性的设置,说到属性的设置,对每个控件都只有设置了它的filed name,才会在该GUI Form文件对应的捆绑类中生成对应的控件对象。

所以针对上图拖放的JLabel,需要修改它的fieldName,暂且改为testLabel,而系统默认生成的JPanel则改为rootPanel。然后简单设置testLabel 的text属性,即设置它的显示文字,如下图中选择testLabel的text属性,点击后输入文字,再点击键盘的enter即可。

设置testLabel的文字

这样test.form文件的控件摆放和控件属性设置就完成了,接下来来到Test这个类文件中,可以看到在其中已经生成了两个控件对象,如下图,这两个控件就是我们设置了field name 的控件:

只有控件

然后就是最关键的一步操作了,在当前的Test类的界面执行如下操作:右击当前类的{}所包含界面-->选择Generate-->选择Form main(),点击后即会生成如下代码:

生成main函数

之后运行工程,即可显示出上述最简单的页面效果了。

2. 控件和布局

接下来,鄙人再对GUI Form中常用的布局和控件进行简单的介绍,当然,由于这些布局或控件的数量比较多,所以我也只是对其中的某一个进行属性和用法的简单介绍,至于其他的,大家可以参考这些介绍,自行尝试即可。

2.1 布局

下面先说布局,在GUI Form中提供了以下几种选择:BorderLayout,CardLayout,FlowLayout,FormLayout(JGoodies),GridBagLayout,GridLayoutManager(Intellij)等。在这里鄙人只简单讲解GridLayoutManager(Intellij)这个布局的使用。

目前来说,根据鄙人为数不多的使用经验来看,通过这个GridLayoutManager的布局,加上JPanel的使用,一般是可以实现任何布局上的效果的。比如,实现上下左右四个panel的效果:

简单的例子

上述效果的实现就是在系统的rootPanel的布局属性上选择GridLayoutManager(Intellij)后,再依次拖放四个JPanel控件到rootPanel,然后简单的调整各个控件的大小,给各个JPanel设置不同的背景色后实现的效果。

设置JPanel的布局

好了,关于布局的用法,就简单说到这里,因为它们的用法都太灵活了,需要大家去亲自实践,才能更好的实现你需要的效果。

2.2 控件

下面就讲解控件的属性和用法,就以最常用的JButton为例来对它的属性和基本用法进行讲解:

先来看下面两个截图中的GUI Form文件提供的Button控件的所有属性(需要勾选show expert properties),:

JButton所有属性1

JButton所有属性2

下面再针对上面两个截图中红框中的属性进行简单讲解,其他的属性鄙人也没有用过就不多说了,靠大家自己去尝试了。

HorizontalSizePolicy 水平尺寸策略

可选择的值有can shrink,can grow,fixed,其效果都是跟它的字面意思差不多:

can shrink:水平大小可以收缩

can grow : 水平大小可以扩展

fixed:水平大小固定

请注意,如果JButton设置了prefered Size , MinimumSize , MaximumSize,且这个三个值都是一样的,那么就会使当前的HorizontalSizePolicy属性失效。

VerticalSizePolicy 竖直尺寸策略,同上,只是是竖直方向的。

HorizontalAlign  水平对齐方式

设置button位置的水平对齐方式,可选择的值有:

left:位置居左

right:位置居右

center:位置居中

fill:充满父容器

其作用也是同字面意思,但是button的位置是相对于父控件而言的,即一般都是Panel类型的控件。

VerticalAlign竖直对齐方式,同上水平对齐方式。

MinimumSize:最小尺寸,PreferedSize:希望呈现的尺寸,MaximumSize:最大尺寸。

这三个属性是一组的,默认值都是[-1, -1],但是想要设置button为某个具体的尺寸则需要将它们三个的值设置成一样的。

background:背景色

enabled:是否可以交互。默认都是可以交互的,取消选中后则不可交互。

font: 字体大小,点击后可选择其大小值。

foreground:字体颜色。

icon:设置按钮上的图片,点击后会引导你在工程目录中选择,所以需要设置图片的话,需要提前放到工程中。

margin:外边距,同所有的其他语言中的margin一样。

opaque: 不透明

该属性一般控件默认是选中的,但是有个特殊情况:JLabel,这个控件的该属性是默认不选中的,这时候,你若设置JLabel的背景就会发现,它死活不显示背景色。只有当JLabel的opaque属性选中后才会显示。

text:文字,即设置按钮上的文字

另外,提到按钮,最最最重要的当然是它的点击事件辣,所以这里鄙人也为大家提供一种创建某个控件的监听事件的快捷方式:

在Form文件中,右击要创建监听事件的控件

选择Create Listener

然后就会弹出一堆的监听事件,按钮的监听事件即为第一个ActionListener,选择后会回到该Form文件对应的class文件中,弹出如下对话框:

创建按钮事件监听器的弹出对话框

点击ok即可完成创建,创建完成后,会在该Form文件对应的class文件中生成如下代码,在其中的actionPerformed()方法中即可完成相应的逻辑处理。

自动生成的监听事件代码

好了,至此就算是勉强给大家开了个java GUI相关内容的门缝,具体的掌握这个冷门的技术还是需要大家在用到的时候,亲自去上手实践才是。下面附上一些可能大家会想要了解的Java Swing相关介绍的博客链接:

你可能感兴趣的:(idea前端可视化)