java界面:基于Java的界面布局DSL的设计和实现来源: 发布时间:星期日, 2009年3月29日 浏览:0次 评论:0
Java界面设计应该是
 项充满创造性、富有乐趣 工作 但是却往往被认为非常枯燥和繁琐 究其原因是 界面布局领域所采用描述概念和具体实现语言的间存在很大语义隔阂而般界面开发工具提供所见即所得以及界面布局管理器等方案也无法很好地解决这个问题在本文中 我们会给出种更好解决方案我们不是去试图把界面设计者头脑中设计概念和样式逐步降级、分解成所使用实现语言能够理解低层概念也不是提供些已经完成、确定但难以扩充和更改布局样式库供界面设计者使用我们所提供是种专门用于描述高层界面设计样式语言通过这种语言界面设计者可以直接、明确地描述出他们头脑中布局设计样式；通过这种语言界面设计者可以自己方便地、灵活地制定自己需要布局样式此外本文中给出设计思想对于其他领域设计也有很好借鉴作用创造性 还是乏味？界面设计是 项非常有创造性甚至富有艺术性工作个简洁、易用、漂亮界面在带给使用者方便同时也会给界面设计者带来极大成就感但是在现实中情况似乎并非如此很多人都认为做界面是项非常繁琐、机械、乏味工作并千方百计地去逃避界面相关工作这是为什么呢？原因很简单 做界面其实涉及两项工作项是界面些设计创意包括界面布局样式以及和使用者交互方式这项工作充满挑战和乐趣但是这些设计创意最终是要落实到实现上这就是第 2项工作此时你头脑中那些清晰、完整设计概念开始变得琐碎你不得不和那些低层次坐标位置打交道更糟糕是当你好不容易做好了个界面但是发现其中某些元素布局需要些调整时这个你本应认为是个很简单改变却造成大量重复低层次坐标位置更改时你肯定会认为做界面是多么机械和乏味呀！其实 造成这种认识根源在于界面设计创意和实现这些创意概念语言的间存在很大断层这样在具体实现时你就必须得把这些清晰、完整布局样式降级成些琐碎、没有什么意义低层次坐标值使得实现语言能够理解这项工作不仅乏味而且最终实现也非常脆弱 —— 个在布局样式层面非常简单更改就会造成实现层面巨大变动比如:我们可以说把组元素同时按比例缩小 10%做过界面朋友肯定知道这个更改意味着什么为了应对这个断层 问题目前几乎所有涉及界面制作开发工具都提供了相同解决思路方法:可视化界面设计工具以及布局管理器但是这两种思路方法都没有从根本上解决这个问题可视化界面设计工具确实避免了不少繁琐 界面元素摆放工作但是对于专业界面设计来说通过拖放设计出来界面在准确度和规范标准性上都有待提高此外还有更为重要点那就是存在于设计者头脑中布局样式仍然没有被明确地描述出来而是被降级成个个摆放在起零散组件虽然这些组件本身是可视这个语义断层存在同样会使得通过可视化界面设计工具设计出来界面非常脆弱布局管理器试图通过提供 些常用布局样式来解决这个问题但是这种做法非常僵化也就是说你只能使用现有布局管理器如果它们无法满足你要求你也无法自己定制此外这些布局管理器仅仅适合于些简单情况对于些复杂布局样式来说它们描述能力就显得非常不足那些曾经和 GridBagLayOut 斗争过朋友对此肯定深有体会在本文中 我们会给出种更好解决方案我们不是去试图把界面设计者头脑中设计概念和样式逐步降级、分解成所使用实现语言能够理解低层概念也不是提供些已经完成、确定但难以扩充和更改布局样式库供界面设计者使用我们所提供是种专门用于描述高层界面设计样式语言通过这种语言界面设计者可以直接、明确地描述出他们头脑中布局设计样式通过这种语言界面设计者可以自己方便地、灵活地制定自己需要布局样式也就是说本来仅存在于界面设计者头脑中抽象布局样式现在也变得可描述可编程了界面布局语言介绍 在学习界面布局语言 设计的前先来了解下该语言使用是非常有帮助我们界面布局语言非常简单简单到只有种原子:ComponentComponent 是种基本布局元素可以对 Component 进行平移和伸缩使其和给定个布局空间 Rectangle 匹配比如对于 Button 这个 Component 来讲它具有传统按钮外观但是它在布局上所占实际空间则是由为其指定 Rectangle 决定此外Component 要最终在界面上显示出来就必须有个物理上 Container也就是说界面设计应该是项充满创造性、富有乐趣工作但是却往往被认为非常枯燥和繁琐究其原因是界面布局领域所采用描述概念和具体实现语言的间存在很大语义隔阂而般界面开发工具提供所见即所得以及界面布局管理器等方案也无法很好地解决这个问题在本文中 我们会给出种更好解决方案我们不是去试图把界面设计者头脑中设计概念和样式逐步降级、分解成所使用实现语言能够理解低层概念也不是提供些已经完成、确定但难以扩充和更改布局样式库供界面设计者使用我们所提供是种专门用于描述高层界面设计样式语言通过这种语言界面设计者可以直接、明确地描述出他们头脑中布局设计样式；通过这种语言界面设计者可以自己方便地、灵活地制定自己需要布局样式此外本文中给出设计思想对于其他领域设计也有很好借鉴作用创造性 还是乏味？界面设计是 项非常有创造性甚至富有艺术性工作个简洁、易用、漂亮界面在带给使用者方便同时也会给界面设计者带来极大成就感但是在现实中情况似乎并非如此很多人都认为做界面是项非常繁琐、机械、乏味工作并千方百计地去逃避界面相关工作这是为什么呢？原因很简单 做界面其实涉及两项工作项是界面些设计创意包括界面布局样式以及和使用者交互方式这项工作充满挑战和乐趣但是这些设计创意最终是要落实到实现上这就是第 2项工作此时你头脑中那些清晰、完整设计概念开始变得琐碎你不得不和那些低层次坐标位置打交道更糟糕是当你好不容易做好了个界面但是发现其中某些元素布局需要些调整时这个你本应认为是个很简单改变却造成大量重复低层次坐标位置更改时你肯定会认为做界面是多么机械和乏味呀！其实 造成这种认识根源在于界面设计创意和实现这些创意概念语言的间存在很大断层这样在具体实现时你就必须得把这些清晰、完整布局样式降级成些琐碎、没有什么意义低层次坐标值使得实现语言能够理解这项工作不仅乏味而且最终实现也非常脆弱 —— 个在布局样式层面非常简单更改就会造成实现层面巨大变动比如:我们可以说把组元素同时按比例缩小 10%做过界面朋友肯定知道这个更改意味着什么为了应对这个断层 问题目前几乎所有涉及界面制作开发工具都提供了相同解决思路方法:可视化界面设计工具以及布局管理器但是这两种思路方法都没有从根本上解决这个问题可视化界面设计工具确实避免了不少繁琐 界面元素摆放工作但是对于专业界面设计来说通过拖放设计出来界面在准确度和规范标准性上都有待提高此外还有更为重要点那就是存在于设计者头脑中布局样式仍然没有被明确地描述出来而是被降级成个个摆放在起零散组件虽然这些组件本身是可视这个语义断层存在同样会使得通过可视化界面设计工具设计出来界面非常脆弱布局管理器试图通过提供 些常用布局样式来解决这个问题但是这种做法非常僵化也就是说你只能使用现有布局管理器如果它们无法满足你要求你也无法自己定制此外这些布局管理器仅仅适合于些简单情况对于些复杂布局只要给定了个 Rectangle 和个 Container个 Component 就可以在界面上指定布局位置呈现出来例如 当我们使用布局语言在个 JFrame 上坐标位置为 (0,0) 展示个 width 为 200height 为 60 按钮时我们可以这样来描述(为了简洁起见后面代码例子中均略去 Layout 名字空间前缀):Button  .title(“button1”).at(0,0,200,60).in(this.getContentPane); 仅仅提供这样 种原子元素语言显然无法满足我们前面提到目标在我们界面布局语言中还提供了两种在布局中非常常用两种从已有组件构造新组件组合手段:above 和 beside其中 above 组合子接收 3 个参数:两个现有 Component 以及个比例它会产生出个新复合 Component其中按照给定比例把第个 Component 摆放在第 2个 Component 的上Beside 组合子接收同样 3 个参数并且也产生出个新复合 Component其中按照给定比例把第个 Component 摆放在第 2个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) 同样 我们可以使用 above 来进行如下描述:above(TextField , Button.title(“ok”), 0.5).at(0,0,300,60).in(C) 值得注意 是在我们界面布局语言中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) 为了保证界面布局语言 完备性我们增加了种特殊原子元素:Empty它作用只是占据定布局空间比如如果我们希望在个布局空间中右半边放置个 Button左半边空置就可以这些描述:beside(Empty , Button, 0.5).at(0,0,200,40).in(C) 读者在后面可以看到 正是这个 Empty 以及 beside 和 above 操作闭包性质为我们描述任意复杂布局样式提供了可能在有了这些基础 布局元素和组合手段后我们就可以通过组合手段来把些典型布局样式抽象出来在下小节中读者将会看到布局语言中 beside 和 above 组合操作其实就是 Java 中普通思路方法因此我们布局语言中不需要什么特别抽象手段也就是说我们可以直接使用 Java 中已有抽象手段例如 如果我们希望抽象出这样种布局样式其中给定个布局空间和个布局组件我们期望该组件能够按照指定纵、横留白比例位于该布局空间中心地带我们可以把该布局样式抽象出来并命名它为 center并可以在更复杂布局样式中把 center 当作个基本语素使用center 实现如下:public Component center(Component cp, float hRatio, float vRatio) { float s1 = (1-2.0* hRatio)/ (1.0 - hRatio); float s2 = (1-2.0*vRatio)/ (1.0-vRatio); Component u = above(Empty , above(cp, Empty, s2), vRatio);  beside(Empty, beside(u,Empty, s1), hRatio); } 当我们想把 个按钮放置按照在横向 0.2纵向 0.1 留白比例放在布局空间 (0,0,100,30) 中时我们可以简单进行如下描述:center(Button .title(“I am at center.”), 0.1,0.1).at(0,0,300,60).in(C) 我们还可以构建出 h_seq 和 v_seq 这样 布局样式它们分别为把组给定布局元素横向顺序排列和纵向顺序排列其实现如下:public Component h_seq(Component  cps) { len = cps.length;  (len  1) cps[0]; beside(cps[0], h_seq(slice(cps, 1, len)), 1.0/len); } public Component v_seq(Component cps) { len = cps.length; (len 1) cps[0]; above(cps[0], v_seq(slice(cps, 1, len)), 1.0/len); } 其中 slice 思路方法有 3 个参数 个为布局元素 另外两个为区间起止位置该思路方法把给定布局元素中指定起止位置区间部分作为个新布局元素返回这两个思路方法实现都比较简单直接下面是两个应用例子:Component cps =  Component{ Button .title(“1”), Button.title(“2”), Button.title(“3”) }; h_seq(cps).at(0,0,300,60).in(C) v_seq(cps).at(0,0,150,200).in(C) 在 center、h_seq、v_seq 这些布局样式 基础上我们可以定义出更加高阶样式来比如给定布局元素序列我们希望它们在给定布局空间中按照 N 行、M 列排列我们称的为 block其实现如下:public Component block (Component cps, N, M) {Component fcps = formalize(cps, N, M); Component rows = Component[fcps.length]; for( i = 0; i ＜ fcps.length; i ) {rows = h_seq(fcps); } v_seq(rows); } 其中 formalize 是 个工具思路方法它把个给定布局元素规范标准化为 N 行 M 列形式如果不足则用 Empty 组件补齐如果希望在 block 中 每个元素都可以指定些横向和纵向留白则可以定义个 block_with_margin 布局样式其实现如下:public Component block_with_margin(Component cps, N, M, float hRatio, float vRatio) { Component ncps = Component[cps.length]; for( i=0; i＜cps.length; i) {ncps = center(cps, hRatio, vRatio); } block(ncps, N, M); } 好了 现在我们来看个稍微复杂些例子我们将使用前面制作些布局样式构建个迷你计算器外观如下图所示:对应 描述代码如下:Component cs = Component{Button .title("0"), Button .title("1"), Button .title("2"), Button .title("+"),Button .title("3"), Button .title("4"), Button .title("5"), Button .title("-"),Button .title("6"), Button .title("7"), Button .title("8"), Button .title("*"),Button .title("9"), Button .title("="), Button .title("%"), Button .title("/") }; Component opLayout = block(cs,4,4); above( above( TextField ,beside( Button .title("Backspace"), Button.title("C"),0.5), 0.5), block(cs,4,4), 0.3).at(0,0,300,200).in(C); 如果我们现在希望将所有数字以及操作按钮按照横向和纵向各 2% 进行留白 我们所要做仅仅是行改动就是把:Component opLayout = block(cs,4,4); 更改为: Component opLayout = block_with_margin(cs, 4, 4, 0.02, 0.02); 这意味着什么呢？这意味着我们可以直接使用布局语言进行界面制作 我们可以直接针对布局进行编程我们所写出来界面代码就是我们布局规格介绍说明从上面 介绍中读者可以看出我们界面布局语言可以非常方便地定义出些常见布局样式还可以把这些样式组合成更为复杂些高阶布局样式并且这种组合是没有任何限制此外这些布局样式定义描述方式是和界面设计者头脑中所使用些布局词汇和规则贴近通过使用界面布局语言界面设计者完全可以摆脱那些呆板、机械又难以定制和扩展布局管理器可以轻松地把头脑中布局创意直接描述出来逐步形成自己布局样式库充分享受这种创造性工作所带来乐趣
TAG: DSL Java JAVA java 界面 设计 0
相关文章读者评论发表评论 |
|
 |
专注于互联网--专注于架构 |
最新标签 网站地图 文章索引 Rss订阅 |
