KeyboardPianoV1.0 界面搭建

---

详细步骤

例行说明

• 项目一上来，就是要把界面搭起来。万事开头难，V1.0 会啰嗦一点，图多话多，要耐心
  其实界面搭建没啥技术含量，只要有耐心 + 、小技巧，轻轻松松搭完界面，而且不用写一行代码

• 有视频教程，也有书面教程；既有中文版，也有英文版 ^ ^

具体步骤

• 具体怎么做，请上车坐稳，老司机要飙车了

  1. 首先你需要下载一个 java 的图形化界面开发工具 WindowBuilder Pro 官网（文末有安装参考教程）
  2. 如何安装、使用请自行 Google
  3. 新建项目 命名 KeyboardPianoV1.0 就好（方便以后版本控制，也可自定义） ->
     新建 Application Window，命名为 KeyboardPiano 作为主类（img1）->
     按下 Design 得到（img2）
  4. 下载源码，copy 代码，个人推荐，组件布局很麻烦，而且没啥技术含量，见 Option1
     建议直接用现成的，避免重复造轮子。若想看项目整体布局，请移步到 Option2
     若出现数量 N 多的错误，如 img3，说明没有导入外包，请参照 Option3

• img1
  

• img2
  

• img3
  

最终能看到 img4, 说明项目初始化成功，项目 V1.0 告一段落
一行代码不用写，就自动生成了 1000 多行代码，是不是贼爽

• img4
  

但是！但是！程序现在是运行不起来的 img5
这是因为引入外包 jgoodies-forms 的问题，下个版本将解决该问题

• img5
  

Oops~ 教程不想看，怎么办？没关系，有视频，点我~点我，但首先要把 WindowBuilder Pro 搭好

---

Options

Option1

• [copy 代码时，Source Design 找不到]

  1. 首先要确定自己能新建一个类似的项目（一定要有下面的 Source & Design 两个选项 img6 图中红框内辣俩个东西），主类的命名随意（这里是Frame），后期可以改（点击 Design 按钮可以看到 img2）
  2. 下载 V1.0 版本的源代码
  3. 把代码 copy 到刚才新建的项目的那个主类 Frame，会报错，没关系（img7）
  4. 双击类名 KeyboardPiano, 按快捷键 Ctrl+F 查找，得到（img8）
     修改类名（根据自己类的名称修改），按下箭头所指的按钮 replace all，这样就可以消去错误
  5. 再次点击 Design，见到 img4 即说明 copy 成功，换句话说，就是项目布局初始化完成

• img6
  

• img7
  

• img8
  

Option2

• [整体布局 详解]

  整体布局 模块设置 前方英语预警，系好安全带，坐稳。。。（图片显示可能会慢点，多刷新几次就好）

Option3

• [组件介绍]

  1. FormLayout（需要引入外包 img9）整体分割布局 （eclipse 如何导入外包请自行 Google）
     (链接：https://pan.baidu.com/s/1-QC9Pm2EYqO2o5zhsSUSYg 提取码：cd22)
  2. GroupLayout（库包，自动引入）按钮逐个排列，设置大小间距
  3. JToggleButton （开关按钮）后期做按钮 Press & Release 比 JButton 容易，而且有更多的可选项）

• img9
  

---

Attention

• 具体界面的大小，以及按钮的大小设置，细节详见源码
  结合 Option2 & Option3 可以大致了解布局以及按钮的设置细节，具体不再展开

---

相关链接

• eclipse安装WindowBuilder Pro组件 参考教程

• JToggleButton 开关按钮

• java布局管理器总结

• GridBagLayout