精通Eclipse V3.4，第1部分: Eclipse工作台

Posted 2023-04-18

参考技术A

　　 摘要 精通 Eclipse 这一系列文章将向 Eclipse 新手讲授 Eclipse IDE 的详细内容 在学完本系列后 您将成长为一名高级用户 在第 部分中 您将了解 Eclipse IDE 的各个部分及如何自定义这些部分

　　第 部分适用于 Eclipse 的新用户 将向 Eclipse 新手解释一些通常很难理解的 Eclipse 术语 并介绍 Eclipse IDE 的各个部分 本文将说明 Eclipse 工作台是什么 并探究项目与工作空间（Eclipse 组织源代码的方法）之间的差别及其之间的关系 最后 本文将说明如何根据需要自定义 IDE 的各个部分

　　 工作台

　　主 Eclipse 窗口称为工作台（参见图 ） 它包含菜单栏 工具栏 编辑器和视图等内容 工具栏下方放置编辑器和其他视图的区域称为工作台页面 此页面包含界面的大部分可见部分 编辑器和视图

　　 图 Eclipse 工作台

　　

　　 编辑器

　　编辑器 是您在 Eclipse 进行开发活动的主要内容区域 注意 术语 编辑器 不一定表示文本编辑器 甚至 WYSIWYG 表单设计器都可以视为编辑器 带有工具栏和视图的 Eclipse 工作台可能会变得十分拥挤 因此如果编辑器需要更多空间 请单击位于右上角的 Maximize 按钮 这样做将隐藏所有其他视图 从而给编辑器提供更多屏幕空间 您可以通过单击 Restore 恢复所有视图

　　有时需要一次查看多个编辑器窗口 可能需要将某些内容从一个编辑器窗口复制并粘贴到另一个编辑器窗口 或者需要在一个编辑器窗口中键入内容时阅读另一个编辑器窗口中的信息 为了帮助实现这项功能 Eclipse 允许您并排或层叠堆放编辑器窗口 为此 需要把打开的编辑器窗口的选项卡拖到某一侧或者顶部/底部 它将堆叠在某一侧 允许您轻松地使用打开的编辑器

　　如果打开了许多编辑器窗口 通过手动扫描并单击多行选项卡来切换到所需选项卡会十分耗费时间 Eclipse 提供了一个方便使用的快捷键可以简化此操作 按 Ctrl+E 组合键 然后将在选项卡行中的右上角显示弹出式菜单并列出所有打开的编辑器（参见图 ） 您可以选择一个或者开始键入需要打开的编辑器名称 然后列表将开始筛选

　　 图 按 Ctrl+E 组合键将显示允许在编辑器窗口之间轻松切换的弹出式菜单

　　

　　 视图

　　视图 是停靠在编辑器某一侧的小窗口 其中包含关于编辑器内容的更多信息 通过单击右上角的 Minimize 按钮将视图最小化 该视图将最小化到窗口一侧的快捷键栏中（参见图 ） 单击快捷键栏中的视图按钮将临时弹出视图 这是节省屏幕空间同时仍然可以轻松访问视图的好方法

　　 图 快捷键栏允许将视图最小化同时仍然提供访问

　　

　　可以将视图与其位置分离 要分离视图 请将其拖到工作台窗口外部 或者右键单击其选项卡并选择 Detach 分离后的视图将像一个新窗口一样运行并且显示在工作台窗口的顶部 视图还可以停靠在工作台窗口的不同侧面 为此 请拖动视图的选项卡 并将其放到想要停靠的一边 要打开视图 请选择 Window > Show View 将会弹出一个显示一些可用视图的菜单 如果需要的视图并未列出 请单击菜单底部的 Other 将会弹出一个显示按类别组织所有视图的对话框 您可以在顶部文本框中输入需要打开的视图名称以筛选视图列表 此外 要更加轻松地打开此对话框 请单击工作台窗口左下角带有 + 号的图标 从而打开与选择 Window > Show View 得到的相同的菜单

　　 比较项目与工作空间

　　Eclipse 将通过项目和工作空间的概念组织源代码 工作空间 是项目的集合 项目 是源代码文件的集合 通常 工作空间和项目的概念在新手中造成了很多混淆之处 因为 Eclipse 中项目的定义不同于其他 IDE 中的项目

　　将项目视为独立模块而将工作空间视为项目 这是从软件开发的角度来考虑这些概念的好方法 因此 您拥有包含多个模块（Eclipse 术语中的项目）的一个项目（Eclipse 术语中的工作空间） 下面几个小节将详细讨论各个概念

　　 工作空间

　　工作空间 包含所有项目和设置 例如用于语法高亮显示的颜色 字体大小等 您无法在 Eclipse 的工作空间外部工作 在首次启动 Eclipse 时 它将提示设置工作空间的默认位置 通过选择 File > Switch Workspace > Other 可以随时创建新工作空间或切换到其他工作空间 在打开的对话框中 可以键入已有工作空间的位置或者键入其他位置以在其中创建新工作空间 该对话框还提供将设置复制到新工作空间中的选项 但是 这种说法并不正确 因为该选项只复制窗口布局和工作集 而不复制语法高亮显示的颜色 字体大小模板等内容 您可能希望把所有这些设置都复制到新工作空间中 因为重新配置已经在现有工作空间中配置过的许多设置会十分痛苦 幸运的是 Eclipse 提供了一种将所有设置复制到新工作空间中的简单方法

　　 选择 File > Export     在打开的对话框中 选择 General > Preferences 然后单击 Next     选择 Export All 提供图 中所示文件的路径 然后单击 Finish 工作空间的所有设置都将被保存到指定文件中     切换到新工作空间 选择 File > Import 然后选择 General > Preferences     指向刚刚保存了设置的文件并单击 Finish 您的设置将被导入到新工作空间中

　　 图 创建或切换工作空间

　　

　　位于工作空间目录中的tadata 目录包含 Eclipse 内的各个插件存储的所有设置 此目录的存在将告诉 Eclipse 当前目录是有效的工作空间 metadata 目录还包含以 log 命名的文件 此文件将包含在运行 Eclipse 时可能抛出的所有错误或异常 如果 Eclipse 在某一刻意外崩溃 该文件将对错误诊断十分有用

　　 项目

　　Eclipse 术语中的项目可以是独立的应用程序或模块 这取决于选择如何组织工作空间 要创建一个新的 Java？ 项目 请选择 File > New > Project 在打开的对话框中 选择 Java > Java Project

　　许多新手都会被位于此对话框中的 Project name 文本框搞糊涂（参见图 ） 您将使用此框筛选不同类型项目的列表 而非命名项目 从树中选择 Java Project 项并单击 Next 以进入向导中的下一步 在这里 您可以命名项目并配置其设置

　　 图 创建 Java 项目

　　

　　位于 Create Java Project 对话框中央的 JRE 组将允许选择用于构建此项目的 Java 版本 Project Layout 组将表示是需要将源代码文件和生成的类文件都放在一个文件夹中 还是需要将其分别放在独立的文件夹中 建议保留默认设置 Create separate folders for sources and class files 这样可以很好地把代码与生成的二进制文件分开 单击 Finish 然后将在工作空间目录中创建与项目同名的新文件夹 项目文件夹包含两个分别用于保存源代码文件和类文件的名为 src 和 bin 的文件夹 您将专门在 src 文件夹中工作 Eclipse 将管理 bin 文件夹以在后台自动生成类文件

　　 自定义工具栏和菜单

　　您可以根据需要自定义位于 Eclipse 窗口顶部的工具栏和菜单栏 工具栏和菜单栏都是基于透视图配置的 透视图 是 Eclipse 根据您要执行的特定任务分组各个视图 工具栏和菜单布局的方法 例如 在默认情况下 Eclipse 拥有名为 Java 和 Debug 的透视图 它们分别用于开发 Java 代码和进行调试 Debug 透视图拥有专门在调试时使用的视图和工具栏按钮 Java 透视图没有这些 通过选择 Window > Open Perspective > Other 或单击工具栏最右侧按钮可以切换透视图

　　 图 使用位于工具栏右侧的按钮可以切换透视图

　　

　　要自定义透视图的工具栏和菜单 请右键单击顶部的主工具栏并选择 Customize Perspective 然后单击 Commands 选项卡 在这里 各个菜单/工具栏项都是按功能分组的 如图 所示 例如 可以选择 Search 列表项以启用与搜索相关的菜单和工具栏项（Eclipse 把工具栏和菜单项称为命令 就如向 IDE 发出的命令一样 因而 选项卡的标签为 Commands 并且可以启用/禁用命令组）

　　 图 自定义工具栏和菜单栏项

　　

　　 自定义 Eclipse 首选项

　　Eclipse 是一个拥有许多插件的大型复杂 IDE 并且它提供了大量可以自定义的选项 幸运的是 可以在一个集中位置找到所有这些内容 选择 Window > Preferences 以打开 Preferences 对话框

　　 图 Preferences 对话框

　　

　　该对话框包含？？个很大的可自定义选项树 有时 可能很难记住需要更改的设置所在的确切位置 幸运的是 您可以在顶部的文本字段中键入以筛选庞大的选项树 例如 在框中键入 fonts 将立即筛选该树以仅显示与字体相关的项 下一节将介绍如何更改一些常见设置

　　 更改字体

　　选择 General > Appearance > Colors and Fonts（参见图 ） 在这里 您可以更改 Eclipse UI 的各个部分的字体 例如 要更改 Java 编辑器的字体 请执行以下操作

　　 在 Preferences 对话框中 选择 Java > Java Editor Text Font     单击 Change     选择所需的字体和大小     单击 Apply

　　 图 更改字体

　　

　　 更改键盘快捷键

　　在 Preferences 对话框中选择 General > Keys（参见图 ） 在这里 您可以设置/更改每条 Eclipse 命令的键盘快捷键 例如 要更改 Step Over 命令的快捷键 请执行以下操作

　　 在文本字段中键入 Step Over     在现在经过筛选后的列表中选择 Step Over 命令     在 Binding 框中 按下新键盘快捷键 注意不必键入快捷键 — 只需按下按键 例如 要把 F 键分配给命令 请按 F 键     如果新快捷键与任何现有键盘快捷键发生冲突 则会显示在 Conflicts 列表中     更改完快捷键后 单击 OK

　　 图 更改键盘快捷键

　　

　　 结束语

　　您已经详细地查看了 Eclipse IDE 的各个部分 现在已经了解了 Eclipse 工作台及其组成部分是什么 了解了工作空间和项目是什么 两者的差别及两者之间的关系 您还知道如何根据需要自定义 IDE 的各个部分及如何将这些设置从一个工作空间导出到另一个工作空间 第 部分将说明如何使用 Java 项目和 Eclipse Java 开发环境（JDT）

精通 CSS 第 8 章 响应式布局 学习笔记

精通 CSS 第 8 章 响应式布局 学习笔记

起源部分略过，笔记的顺序和章节的顺序有所调换

响应式的案例在 精通 CSS 第 8 章 响应式布局 学习案例，可以搭配 flexbox 和 网格布局 的部分一起食用。案例做了三个，一个 flexbox，一个常规场景，既不是 flexbox 也不是网格布局的布局，还有就是网格布局了。

浏览器视口

视口(Viewport) 是移动 Web 开发中一个非常重要的概念，最早是由苹果公司在推出 iPhone 手机时发明的，其目的是为了让 iPhone 的小屏幕尽可能完整显示整个网页。通过设置视口，不管网页原始的分辨率尺寸有多大，都能将其缩小显示在手机浏览器上，这样保证网页在手机上看起来更像在桌面浏览器中的样子。在苹果公司引入视口的概念后，大多数的移动开发者也都认同了这个做法。

CSS 像素与硬件像素

首先，设备本身的硬件像素和 CSS 的像素是不一样的，以 iphone5/SE 为例，在 Chrome 之中，该设备的像素为 $320\times 568$，而该设备的硬件像素（分辨率）为 $1136\times 640$，即一个 CSS 像素对应 2 个硬件像素。

CSS 像素与硬件像素的比例系数，根据设备的不同，从 1 到 4 都有。了解这个细节，对适配响应背景图片的适配是有所助益的，如果比例系数差的太大，就有可能截出来的图片非常的模糊。

视口定义的差别

移动端的兴起使得设备制造发明商提出了不同的概念。

默认视口 （default viewport）

即原生页面未经优化的版本，以之前做的案例 学成在线 为例，其本身就是没有进行移动端的适配。

为了能够让未经优化的窗口能够在移动端上显示，手机上的浏览器通常会模拟出一个宽度为 1000px 宽的视口，然后硬性地将页面显示出来：

作为移动端用户来说，想要查看完整的信息就必须要进行拖拽，想要看清楚具体的信息就需要放大页面，这种做法就非常的不用户友好。

理想视口 (ideal viewport)

理想窗口也是一个模拟视口，只不过它的页面宽度与设备自身的尺寸接近。一般对于手机来说，宽度在 300-500 CSS 像素；对与平板来说，宽度大约在 800-1400 CSS 像素之间。

可见视口 (visual viewport)

可见窗口能被看到的视口，依旧以学成在线为例，在移动端上，它的可见视口就比在 PC 端的要小。

布局视口 (layout viewport)

这就是布局窗口的由来了，在实现页面的时候，我们应该以可看到的这一部分——可见视口——作为布局视口来进行实现。

配置视口

只需在头部加入一个标签即可：

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

• width=device-width 告诉浏览器，当前设备的理想尺寸（device-width） 应被作为视口宽度的基准

• initial-scale=1.0 告诉浏览器，默认布局不会被放大也不会被缩小

媒体类型和媒体查询

媒体类型

指定设备类型

这部分在 HTML5 权威指南第七章学习笔记 中有复习到过。

目前来说，用的上的类型基本只有 screen, print, 和 all 三种。

媒体查询（Media Query)

必考点。

Media Query 提供了指定设备的能力——扩展了媒体类型，其语法类型为 媒体类型 + 媒体条件 的组合：

/* 媒体类型:screen, 媒体条件: min-width */
@media screen and (min-width: 600px) {
  /* 这里放条件 */
}

一些其他的特性：

• 媒体类型是可以被忽略的，媒体条件是必备的。

• 可以使用 not 关键字对媒体查询进行取反。

• 可以使用关键字 only 去对媒体查询进行短路，防止低版本浏览器错误应用样式

响应式设计与结构化 CSS

移动优先原则

移动优先的原则就是先着重实现移动设备上内容的展示，再做加法，因为加法总是比减法好做。

CSS 文件中的第一批规则，即针对最小的屏幕，也针对那些不支持媒体查询的浏览器

• 基本的版式

  大小、颜色、行高、标题、段落、列表、链接，等

• 基本的盒子

  特定的边框样式、内边距、弹性图片、背景颜色和背景图片

• 基本的跳转和浏览组件

  导航，表单和按钮

接下来在移动设备和各种浏览器中测试，通过调节窗口大小，再进行功能的渐进增强。

另外，也要善于利用 max-width 以便减少代码量。

例如，假设说要在小设备中使用行间距窄一点的字体，以移动优先原则写出来的 CSS 如下：

body {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
h1,
h2,
h3 {
  font-family: "open Sans Condensed", "Arial Narrow", Arial, sans-serif;
}
@media only screen and (min-width: 37.5em) {
  h1,
  h2,
  h3 {
    font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
  }
}

这里就出现了重复的代码，而使用 max-width 可以解决这个问题：

body {
  font-family: "Open Sans", "Helvetica Neue", Arial, sans-serif;
}
@media @only screen and (max-width: 37.5em) {
  h1,
  h2,
  h3 {
    font-family: "open Sans Condensed", "Arial Narrow", Arial, sans-serif;
  }
}

这样，只有在小屏幕上才会使用行间距窄一些的字体了。

媒体查询的位置

首先，媒体查询放在哪里并没有固定的位置，其次，使用媒体查询并不会提升 CSS 的的权重，因此，作为开发者来说可以自行决定在什么地方放置媒体查询。

不过，一般来说，书中提出了下面三个建议：

1. 影响整个页面布局的媒体查询一般建议放在布局相关的规则附近
2. 调整网站组件中的细节的媒体查询，可以放在定义该组件样式的附近
3. 最后，频繁修改以及打补丁的样式建议放到末尾

总之，还是应用 先通用，后具体 的原则。

断点参考

做个参考，bootstrap 的像素断点有如下六个：

breakpoint	dimisions
X-Small	<576px
Small	≥576px
Medium	≥768px
Large	≥992px
Extra large	≥1200px
Extra extra large	≥1400px

基本上来说，可以用来适配大多数的设备了

几种响应式设计模式

书中推荐的几种模式

响应式文本列

精通 CSS 第四章总结 中曾经提到多列布局(Mult-Column Layout)，其效果看起来如下：

想要实现响应式文本列只需要一行代码，并且用不到媒体查询：

.multi-col {
  column-width: 16em;
}

不过，文本列在网页布局上用的好像不是很多吧。

没有媒体查询的响应式 Flexbox

Flexbox 的优势还是很明显的，首先，在能够完成任务的情况下，没有媒体查询确实降低了代码的复杂度；其次，flexbox 不因视口的变化而改变，而是依据容器的大小而动态决定的，对于非布局性的内容来说，应用范围更加的广泛。

响应式网格与网格模板区

在 精通 CSS 第 7 章学习笔记（下） 中提到过 网格模板，响应式布局的实现可以在不同的媒体查询域间对 网格模板 进行重新布局达到目的。