界面布局语言介绍

在学习界面布局语言的设计之前，先来了解一下该语言的使用是非常有帮助的。我们的界面布局语言非常简单，简单到只有一种原子：Component。Component 是一种基本的布局元素，可以对 Component 进行平移和伸缩，使其和给定的一个布局空间 Rectangle 匹配。比如对于 Button 这个 Component 来讲，它具有传统按钮的外观，但是它在布局上所占的实际空间则是由为其指定的 Rectangle 决定的。此外，Component 要最终在界面上显示出来，就必须有一个物理上的 Container。也就是说，只要给定了一个 Rectangle 和一个 Container，一个 Component 就可以在界面上指定的布局位置呈现出来。

例如，当我们使用布局语言在一个 JFrame 上坐标位置为 (0,0) 展示一个 width 为 200，height 为 60 的按钮时，我们可以这样来描述（为了简洁起见，后面的代码实例中均略去 Layout 名字空间前缀）：

Button().title("button1").at(0,0,200,60).in(this.getContentPane());

其执行结果如下图所示：

图 1. Component 示例

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

仅仅提供这样一种原子元素的语言显然无法满足我们前面提到的目标。在我们的界面布局语言中，还提供了两种在布局中非常常用的两种从已有组件构造新组件的组合手段：above 和 beside。其中 above 组合子接收 3 个参数：两个现有 Component 以及一个比例，它会产生出一个新的复合 Component，其中按照给定的比例把第一个 Component 摆放在第二个 Component 之上。Beside 组合子接收同样的 3 个参数，并且也产生出一个新的复合 Component，其中按照给定的比例把第一个 Component 摆放在第二个Component左边。

例如，如果我们希望在一个给定的 Container C 上的 Rectangle(0,0,300,40) 中，平行摆放一个 TextField 和一个 Button，且希望 TextField 占据 80% 的比例时，可以这样来描述：

beside(TextField(), Button().title("ok"), 0.8).at(0,0,300,40).in(C)

执行结果如下图所示：

图 2. beside 示例

同样，我们可以使用 above 来进行如下描述：

above(TextField(), Button().title("ok"), 0.5).at(0,0,300,60).in(C)

其执行结果如下图所示：

图 3. above 示例

值得注意的是，在我们的界面布局语言中，Component 在 beside 和 above 操作下是封闭的，也就是说 beside 和 above 操作的结果同样也是 Component，并完全可以作为基本的 Component 来再次进行 beside 和 above 组合。这样我们就可以使用这两个简单的操作生成更加复杂的 Component 来，从而完成复杂的界面布局。比如，我们可以这样来进行描述：

Component L = beside(TextField (), Button().title("…"), 0.8); above(L, Button().title("ok"), 0.5). at(0,0,300,60).in(C)

其执行结果如下图所示：

图 4. 复杂的界面布局

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

为了保证界面布局语言的完备性，我们增加了一种特殊的原子元素：Empty。它的作用只是占据一定的布局空间。比如，如果我们希望在一个布局空间中右半边放置一个 Button，左半边空置，就可以这些描述：

beside(Empty(), Button(), 0.5).at(0,0,200,

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!