基于Java的界面布局DSL的设计与实现

Java界面设计应该是一项富有创造性和乐趣的工作，但它经常被认为是非常枯燥和乏味的。原因是界面布局领域使用的描述概念与具体实现语言之间存在较大的语义鸿沟。但是通用界面开发工具提供的所见即所得和界面布局管理器并不能很好的解决这个问题。

在本文中，我们将给出一个更好的解决方案。我们并不是试图将界面设计者头脑中的设计概念和风格逐渐降级，分解成所使用的实现语言能够理解的低级概念，也不是提供一些已经完成的、确定的、难以扩展和更改的布局风格库给界面设计者使用。我们提供的是一种专门用来描述高级界面设计风格的语言。通过这种语言，界面设计者可以直接、清晰地描述自己脑海中的版面设计风格；通过这种语言，界面设计者可以轻松灵活地制定自己的布局风格。此外，本文给出的设计思路也可为其他领域所借鉴。

有创意，还是无聊？

界面设计是一项非常有创造性甚至艺术性的工作。简洁、易用、美观的界面不仅会给用户带来方便，也会给界面设计者带来极大的成就感。然而现实中，似乎并非如此。很多人认为做界面是一件繁琐、机械、枯燥的工作，想尽一切办法逃避与界面相关的工作。这是为什么呢？

原因很简单，因为制作界面其实涉及到两个任务。一个是界面的一些设计思路，包括界面的布局风格和与用户的交互方式。这个任务充满了挑战和乐趣。但是，这些设计思路要落实到最后，这是第二个任务。此时，你脑海中那些清晰完整的设计概念开始变得琐碎，你要处理那些低级的坐标位置。更糟糕的是，当你好不容易做了一个界面，却发现有些元素的布局需要一些调整，你本以为是简单的改变却造成了大量重复的低级坐标位置改变，你肯定会觉得做一个界面是多么的机械和枯燥！

其实这种认识的根源在于界面设计的创意理念和实现这些创意理念的语言之间的巨大差距。这样，在具体实现中，你就不得不把这些清晰完整的布局样式降级为一些琐碎无意义的低级坐标值，让实现语言看得懂。这项工作不仅枯燥，而且最终的实现非常脆弱——布局风格上非常简单的改变，就会引起实现层面的巨大变化。比如我们可以说一组元素同时缩小10%，做过界面的朋友一定知道这个变化意味着什么。

为了应对这个断层，目前几乎所有涉及界面设计的开发工具都提供了相同的解决方案:可视化界面设计工具和布局管理器。但是这两种方法都不能从根本上解决这个问题。

可视化界面设计工具确实避免了大量繁琐的界面元素放置工作，但是对于专业的界面设计来说，拖拽式设计的界面的准确性和规范性还有待提高。此外，还有更重要的一点，就是存在于设计者头脑中的布局风格仍然没有被清晰地描述出来，而是退化为一个个摆放在一起的零散组件，尽管这些组件本身是可见的。这种语义断层的存在，也会让视觉界面设计工具设计出来的界面非常脆弱。

布局管理器试图通过提供一些常见的布局样式来解决这个问题。但是，这种做法非常死板，这意味着您只能使用现有的布局管理器。如果他们不能满足你的要求，你就不能自己定制。另外，这些布局管理器只适用于一些简单的情况。对于一些复杂的布局样式，它们的描述能力是非常不足的。那些和GridBagLayOut奋斗过的朋友们对此一定深有体会。

在本文中，我们将给出一个更好的解决方案。我们并不是试图将界面设计者头脑中的设计概念和风格逐渐降级，分解成所使用的实现语言能够理解的低级概念，也不是提供一些已经完成的、确定的、难以扩展和更改的布局风格库给界面设计者使用。我们提供的是一种专门用来描述高级界面设计风格的语言。通过这种语言，界面设计者可以直接、清晰地描述他们头脑中的布局设计风格。通过这种语言，界面设计者可以轻松灵活地制定自己的布局风格。也就是说，原本只存在于界面设计者头脑中的抽象布局风格，现在已经变得可描述、可编程。

界面布局语言介绍

在学习界面布局语言的设计之前，了解该语言的使用是很有帮助的。我们的界面布局语言非常简单，简单到只有一个atom: Component。组件是一个基本的布局元素，它可以被转换和扩展以匹配给定布局空之间的矩形。例如，Button组件具有传统按钮的外观，但是它在布局上占据的实际空空间是由为它指定的矩形决定的。此外，如果组件最终要显示在界面上，它必须有一个物理容器。换句话说，界面设计应该是一个有创意又有趣的工作，但却经常被认为是非常枯燥乏味的。原因是界面布局领域使用的描述概念与具体实现语言之间存在较大的语义鸿沟。但是通用界面开发工具提供的所见即所得和界面布局管理器并不能很好的解决这个问题。

在本文中，我们将给出一个更好的解决方案。我们并不是试图将界面设计者头脑中的设计概念和风格逐渐降级，分解成所使用的实现语言能够理解的低级概念，也不是提供一些已经完成的、确定的、难以扩展和更改的布局风格库给界面设计者使用。我们提供的是一种专门用来描述高级界面设计风格的语言。通过这种语言，界面设计师可以直接、清晰地描述出自己脑海中的版面设计风格；通过这种语言，界面设计者可以轻松灵活地制定自己的布局风格。此外，本文给出的设计思路也可为其他领域所借鉴。

有创意，还是无聊？

界面设计是一项非常有创造性甚至艺术性的工作。简洁、易用、美观的界面不仅会给用户带来方便，也会给界面设计者带来极大的成就感。然而现实中，似乎并非如此。很多人认为做界面是一件繁琐、机械、枯燥的工作，想尽一切办法逃避与界面相关的工作。这是为什么呢？

原因很简单，因为制作界面其实涉及到两个任务。一个是界面的一些设计思路，包括界面的布局风格和与用户的交互方式。这个任务充满了挑战和乐趣。但是，这些设计思路要落实到最后，这是第二个任务。此时，你脑海中那些清晰完整的设计概念开始变得琐碎，你要处理那些低级的坐标位置。更糟糕的是，当你好不容易做了一个界面，却发现有些元素的布局需要一些调整，你本以为是简单的改变却造成了大量重复的低级坐标位置改变，你肯定会觉得做一个界面是多么的机械和枯燥！

其实这种认识的根源在于界面设计的创意理念和实现这些创意理念的语言之间的巨大差距。这样，在具体实现中，你就不得不把这些清晰完整的布局样式降级为一些琐碎无意义的低级坐标值，让实现语言看得懂。这项工作不仅枯燥，而且最终的实现非常脆弱——布局风格上非常简单的改变，就会引起实现层面的巨大变化。比如我们可以说一组元素同时缩小10%，做过界面的朋友一定知道这个变化意味着什么。

为了应对这个断层，目前几乎所有涉及界面设计的开发工具都提供了相同的解决方案:可视化界面设计工具和布局管理器。但是这两种方法都不能从根本上解决这个问题。

可视化界面设计工具确实避免了大量繁琐的界面元素放置工作，但是对于专业的界面设计来说，拖拽式设计的界面的准确性和规范性还有待提高。此外，还有更重要的一点，就是存在于设计者头脑中的布局风格仍然没有被清晰地描述出来，而是退化为一个个摆放在一起的零散组件，尽管这些组件本身是可见的。这种语义断层的存在，也会让视觉界面设计工具设计出来的界面非常脆弱。

布局管理器试图通过提供一些常见的布局样式来解决这个问题。但是，这种做法非常死板，这意味着您只能使用现有的布局管理器。如果他们不能满足你的要求，你就不能自己定制。另外，这些布局管理器只适用于一些简单的情况。对于一些复杂的布局，只要给定一个矩形和一个容器，就可以在界面上指定的布局位置呈现一个组件。

例如，当我们使用布局语言在坐标位置为(0，0)的JFrame上显示一个宽度为200、高度为60的按钮时，我们可以这样描述(为简洁起见，下面的代码示例中省略了布局名称空之间的前缀):

按钮()。标题(“按钮1”)。在(0，0，200，60)。in(this . getcontentpane())；

仅仅提供这样一种原子元素的语言显然不能满足我们前述的目标。在我们的界面布局语言中，我们还提供了两种从现有组件构造新组件的组合方式:above和side，这是布局中常用的方式。上面的组合器接收三个参数:两个现有组件和一个比例，它将产生一个新的复合组件，其中第一个组件按照给定的比例放置在第二个组件之上。除了combinator接收同样的三个参数，还产生一个新的复合组件，其中第一个组件按照给定的比例放在第二个组件的左边。

例如，如果我们希望在给定容器C上的矩形(0，0，300，40)中平行放置一个TextField和一个Button，并且我们希望TextField占据总数的80%，我们可以这样描述它:

旁边是(TextField()，Button()。标题(“ok”)，0.8)。在(0，0，300，40)。在(C)中

同样，我们可以用上面的话来作如下描述:

上图(TextField()，Button()。标题(“ok”)，0.5)。在(0，0，300，60)。在(C)中

值得注意的是，在我们的界面布局语言中，Component是封闭在side和above操作下的，也就是说，side和above操作的结果也是Component，它可以作为一个基本组件重新组合side和above。这样，我们就可以用这两个简单的操作来生成更复杂的组件，从而完成复杂的界面布局。例如，我们可以这样描述它:

component L = side(TextField()，Button()。标题(“…”)，0.8)；
以上(L，Button()。标题(“ok”)，0.5)。在(0，0，300，60)。在(C)中

为了保证界面布局语言的完整性，我们添加了一个特殊的原子元素:Empty。它的作用是占据一定的布局空。例如，如果我们想在布局的右半部分放置一个按钮，在左半部分放置空，我们可以这样描述:

旁边(空()，按钮()，0.5)。在(0，0，200，40)。在(C)中

正如读者稍后可以看到的，正是这种空白以及旁边和上面操作的封闭性质，使我们有可能描述任何复杂的布局样式。