基于Java的界面布局DSL的設(shè)計與實現(xiàn)
Java界面設(shè)計應(yīng)該是一項充滿創(chuàng)造性、富有樂趣的工作，但是卻往往被認(rèn)為非常的枯燥和繁瑣。究其原因，是因為界面布局領(lǐng)域所采用的描述概念和具體的實現(xiàn)語言之間存在很大的語義隔閡。而一般的界面開發(fā)工具提供的所見即所得以及界面布局管理器等方案也無法很好地解決這個問題。
在本文中，我們會給出一種更好的解決方案，我們不是去試圖把界面設(shè)計者頭腦中的設(shè)計概念和樣式逐步降級、分解成所使用的實現(xiàn)語言能夠理解的低層概念，也不是提供一些已經(jīng)完成的、確定的但難以擴(kuò)充和更改的布局樣式庫供界面設(shè)計者使用。我們所提供的是一種專門用于描述高層界面設(shè)計樣式的語言。通過這種語言，界面設(shè)計者可以直接、明確地描述出他們頭腦中的布局設(shè)計樣式；通過這種語言，界面設(shè)計者可以自己方便地、靈活地制定自己需要的布局樣式。此外，本文中給出的設(shè)計思想對于其他領(lǐng)域的設(shè)計也有很好的借鑒作用。
創(chuàng)造性，還是乏味？
界面設(shè)計是一項非常有創(chuàng)造性，甚至富有藝術(shù)性的工作，一個簡潔、易用、漂亮的界面在帶給使用者方便的同時，也會給界面設(shè)計者帶來極大的成就感。但是，在現(xiàn)實中，情況似乎并非如此，很多人都認(rèn)為做界面是一項非常繁瑣、機(jī)械、乏味的工作，并千方百計地去逃避界面相關(guān)的工作。這是為什么呢？
原因很簡單，因為做界面其實涉及兩項工作，一項是界面的一些設(shè)計創(chuàng)意，包括界面的布局樣式以及和使用者的交互方式，這項工作充滿挑戰(zhàn)和樂趣。但是，這些設(shè)計創(chuàng)意最終是要落實到實現(xiàn)上的，這就是第二項工作。此時，你頭腦中那些清晰、完整的設(shè)計概念開始變得瑣碎，你不得不和那些低層次的坐標(biāo)位置打交道。更糟糕的是，當(dāng)你好不容易做好了一個界面，但是發(fā)現(xiàn)其中某些元素的布局需要一些調(diào)整時，這個你本應(yīng)認(rèn)為是一個很簡單的改變卻造成大量重復(fù)的低層次坐標(biāo)位置更改時，你肯定會認(rèn)為做界面是多么的機(jī)械和乏味呀！
其實，造成這種認(rèn)識的根源在于界面設(shè)計創(chuàng)意和實現(xiàn)這些創(chuàng)意概念的語言之間存在很大的斷層。這樣，在具體實現(xiàn)時，你就必須得把這些清晰、完整的布局樣式降級成一些瑣碎、沒有什么意義的低層次的坐標(biāo)值，使得實現(xiàn)語言能夠理解。這項工作不僅乏味，而且最終的實現(xiàn)也非常的脆弱 —— 一個在布局樣式層面非常簡單的更改，就會造成實現(xiàn)層面的巨大變動。比如：我們可以說把一組元素同時按比例縮小 10%，做過界面的朋友肯定知道這個更改意味著什么。
為了應(yīng)對這個斷層的問題，目前幾乎所有的涉及界面制作的開發(fā)工具都提供了相同的解決方法：可視化的界面設(shè)計工具以及布局管理器。但是這兩種方法都沒有從根本上解決這個問題。
可視化界面設(shè)計工具確實避免了不少繁瑣的界面元素擺放工作，但是對于專業(yè)的界面設(shè)計來說，通過拖放設(shè)計出來的界面在準(zhǔn)確度和規(guī)范性上都有待提高，此外還有更為重要的一點，那就是存在于設(shè)計者頭腦中的布局樣式仍然沒有被明確地描述出來，而是被降級成一個個擺放在一起的零散的組件，雖然這些組件本身是可視的。這個語義斷層的存在同樣會使得通過可視化界面設(shè)計工具設(shè)計出來的界面非常脆弱。
布局管理器試圖通過提供一些常用的布局樣式來解決這個問題。但是，這種做法非常僵化，也就是說你只能使用現(xiàn)有的布局管理器，如果它們無法滿足你的要求，你也無法自己定制。此外，這些布局管理器僅僅適合于一些簡單的情況。對于一些復(fù)雜的布局樣式來說，它們的描述能力就顯得非常的不足。那些曾經(jīng)和 GridBagLayOut 斗爭過的朋友對此肯定深有體會。
在本文中，我們會給出一種更好的解決方案，我們不是去試圖把界面設(shè)計者頭腦中的設(shè)計概念和樣式逐步降級、分解成所使用的實現(xiàn)語言能夠理解的低層概念，也不是提供一些已經(jīng)完成的、確定的但難以擴(kuò)充和更改的布局樣式庫供界面設(shè)計者使用。我們所提供的是一種專門用于描述高層界面設(shè)計樣式的語言。通過這種語言，界面設(shè)計者可以直接、明確地描述出他們頭腦中的布局設(shè)計樣式，通過這種語言，界面設(shè)計者可以自己方便地、靈活地制定自己需要的布局樣式。也就是說，本來僅存在于界面設(shè)計者頭腦中的抽象布局樣式，現(xiàn)在也變得可描述，可編程了。
界面布局語言介紹
在學(xué)習(xí)界面布局語言的設(shè)計之前，先來了解一下該語言的使用是非常有幫助的。我們的界面布局語言非常簡單，簡單到只有一種原子：Component。Component 是一種基本的布局元素，可以對 Component 進(jìn)行平移和伸縮，使其和給定的一個布局空間 Rectangle 匹配。比如對于 Button 這個 Component 來講，它具有傳統(tǒng)按鈕的外觀，但是它在布局上所占的實際空間則是由為其指定的 Rectangle 決定的。此外，Component 要最終在界面上顯示出來，就必須有一個物理上的 Container。也就是說，界面設(shè)計應(yīng)該是一項充滿創(chuàng)造性、富有樂趣的工作，但是卻往往被認(rèn)為非常的枯燥和繁瑣。究其原因，是因為界面布局領(lǐng)域所采用的描述概念和具體的實現(xiàn)語言之間存在很大的語義隔閡。而一般的界面開發(fā)工具提供的所見即所得以及界面布局管理器等方案也無法很好地解決這個問題。
在本文中，我們會給出一種更好的解決方案，我們不是去試圖把界面設(shè)計者頭腦中的設(shè)計概念和樣式逐步降級、分解成所使用的實現(xiàn)語言能夠理解的低層概念，也不是提供一些已經(jīng)完成的、確定的但難以擴(kuò)充和更改的布局樣式庫供界面設(shè)計者使用。我們所提供的是一種專門用于描述高層界面設(shè)計樣式的語言。通過這種語言，界面設(shè)計者可以直接、明確地描述出他們頭腦中的布局設(shè)計樣式；通過這種語言，界面設(shè)計者可以自己方便地、靈活地制定自己需要的布局樣式。此外，本文中給出的設(shè)計思想對于其他領(lǐng)域的設(shè)計也有很好的借鑒作用。
創(chuàng)造性，還是乏味？
界面設(shè)計是一項非常有創(chuàng)造性，甚至富有藝術(shù)性的工作，一個簡潔、易用、漂亮的界面在帶給使用者方便的同時，也會給界面設(shè)計者帶來極大的成就感。但是，在現(xiàn)實中，情況似乎并非如此，很多人都認(rèn)為做界面是一項非常繁瑣、機(jī)械、乏味的工作，并千方百計地去逃避界面相關(guān)的工作。這是為什么呢？
原因很簡單，因為做界面其實涉及兩項工作，一項是界面的一些設(shè)計創(chuàng)意，包括界面的布局樣式以及和使用者的交互方式，這項工作充滿挑戰(zhàn)和樂趣。但是，這些設(shè)計創(chuàng)意最終是要落實到實現(xiàn)上的，這就是第二項工作。此時，你頭腦中那些清晰、完整的設(shè)計概念開始變得瑣碎，你不得不和那些低層次的坐標(biāo)位置打交道。更糟糕的是，當(dāng)你好不容易做好了一個界面，但是發(fā)現(xiàn)其中某些元素的布局需要一些調(diào)整時，這個你本應(yīng)認(rèn)為是一個很簡單的改變卻造成大量重復(fù)的低層次坐標(biāo)位置更改時，你肯定會認(rèn)為做界面是多么的機(jī)械和乏味呀！
其實，造成這種認(rèn)識的根源在于界面設(shè)計創(chuàng)意和實現(xiàn)這些創(chuàng)意概念的語言之間存在很大的斷層。這樣，在具體實現(xiàn)時，你就必須得把這些清晰、完整的布局樣式降級成一些瑣碎、沒有什么意義的低層次的坐標(biāo)值，使得實現(xiàn)語言能夠理解。這項工作不僅乏味，而且最終的實現(xiàn)也非常的脆弱 —— 一個在布局樣式層面非常簡單的更改，就會造成實現(xiàn)層面的巨大變動。比如：我們可以說把一組元素同時按比例縮小 10%，做過界面的朋友肯定知道這個更改意味著什么。
為了應(yīng)對這個斷層的問題，目前幾乎所有的涉及界面制作的開發(fā)工具都提供了相同的解決方法：可視化的界面設(shè)計工具以及布局管理器。但是這兩種方法都沒有從根本上解決這個問題。
可視化界面設(shè)計工具確實避免了不少繁瑣的界面元素擺放工作，但是對于專業(yè)的界面設(shè)計來說，通過拖放設(shè)計出來的界面在準(zhǔn)確度和規(guī)范性上都有待提高，此外還有更為重要的一點，那就是存在于設(shè)計者頭腦中的布局樣式仍然沒有被明確地描述出來，而是被降級成一個個擺放在一起的零散的組件，雖然這些組件本身是可視的。這個語義斷層的存在同樣會使得通過可視化界面設(shè)計工具設(shè)計出來的界面非常脆弱。
布局管理器試圖通過提供一些常用的布局樣式來解決這個問題。但是，這種做法非常僵化，也就是說你只能使用現(xiàn)有的布局管理器，如果它們無法滿足你的要求，你也無法自己定制。此外，這些布局管理器僅僅適合于一些簡單的情況。對于一些復(fù)雜的布局只要給定了一個 Rectangle 和一個 Container，一個 Component 就可以在界面上指定的布局位置呈現(xiàn)出來。
例如，當(dāng)我們使用布局語言在一個 JFrame 上坐標(biāo)位置為 (0,0) 展示一個 width 為 200，height 為 60 的按鈕時，我們可以這樣來描述（為了簡潔起見，后面的代碼實例中均略去 Layout 名字空間前綴）：
Button().title(“button1”).at(0,0,200,60).in(this.getContentPane());
僅僅提供這樣一種原子元素的語言顯然無法滿足我們前面提到的目標(biāo)。在我們的界面布局語言中，還提供了兩種在布局中非常常用的兩種從已有組件構(gòu)造新組件的組合手段：above 和 beside。其中 above 組合子接收 3 個參數(shù)：兩個現(xiàn)有 Component 以及一個比例，它會產(chǎn)生出一個新的復(fù)合 Component，其中按照給定的比例把第一個 Component 擺放在第二個 Component 之上。Beside 組合子接收同樣的 3 個參數(shù)，并且也產(chǎn)生出一個新的復(fù)合 Component，其中按照給定的比例把第一個 Component 擺放在第二個Component左邊。
例如，如果我們希望在一個給定的 Container C 上的 Rectangle(0,0,300,40) 中，平行擺放一個 TextField 和一個 Button，且希望 TextField 占據(jù) 80% 的比例時，可以這樣來描述：
beside(TextField(), Button().title(“ok”), 0.8).at(0,0,300,40).in(C)
同樣，我們可以使用 above 來進(jìn)行如下描述：
above(TextField(), Button().title(“ok”), 0.5).at(0,0,300,60).in(C)
值得注意的是，在我們的界面布局語言中，Component 在 beside 和 above 操作下是封閉的，也就是說 beside 和 above 操作的結(jié)果同樣也是 Component，并完全可以作為基本的 Component 來再次進(jìn)行 beside 和 above 組合。這樣我們就可以使用這兩個簡單的操作生成更加復(fù)雜的 Component 來，從而完成復(fù)雜的界面布局。比如，我們可以這樣來進(jìn)行描述：
Component L = beside(TextField (), Button().title(“…”), 0.8);
above(L, Button().title(“ok”), 0.5). at(0,0,300,60).in(C)
為了保證界面布局語言的完備性，我們增加了一種特殊的原子元素：Empty。它的作用只是占據(jù)一定的布局空間。比如，如果我們希望在一個布局空間中右半邊放置一個 Button，左半邊空置，就可以這些描述：
beside(Empty(), Button(), 0.5).at(0,0,200,40).in(C)
讀者在后面可以看到，正是這個 Empty 以及 beside 和 above 操作的閉包性質(zhì)為我們描述任意復(fù)雜的布局樣式提供了可能。
在有了這些基礎(chǔ)的Java布局元素和組合手段后，我們就可以通過組合手段來把一些典型的布局樣式抽象出來。在下一小節(jié)中讀者將會看到，布局語言中的 beside 和 above 組合操作其實就是 Java 中的普通方法，因此我們的布局語言中不需要什么特別的抽象手段。也就是說，我們可以直接使用 Java 中已有的抽象手段。
例如，如果我們希望抽象出這樣一種布局樣式，其中給定一個布局空間和一個布局組件，我們期望該組件能夠按照指定的縱、橫留白比例位于該布局空間的中心地帶。我們可以把該布局樣式抽象出來，并命名它為 center。并可以在更復(fù)雜的布局樣式中把 center 當(dāng)作一個基本語素使用。center 的實現(xiàn)如下：
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);
return beside(Empty(), beside(u,Empty(), s1), hRatio);
}
當(dāng)我們想把一個按鈕放置按照在橫向 0.2，縱向 0.1 的留白比例放在布局空間 (0,0,100,30) 中時，我們可以簡單的進(jìn)行如下描述：
center(Button().title(“I am at center.”), 0.1,0.1).at(0,0,300,60).in(C)
我們還可以構(gòu)建出 h_seq 和 v_seq 這樣的布局樣式，它們分別為把一組給定的布局元素橫向順序排列和縱向順序排列，其實現(xiàn)如下：
public Component h_seq(Component[] cps) {
int len = cps.length;
if(len == 1) return cps[0];
return beside(cps[0], h_seq(slice(cps, 1, len)), 1.0/len);
}
public Component v_seq(Component[] cps) {
int len = cps.length;
if(len == 1) return cps[0];
return above(cps[0], v_seq(slice(cps, 1, len)), 1.0/len);
}
其中 slice 方法有 3 個參數(shù)，一個為布局元素數(shù)組，另外兩個為區(qū)間的起止位置，該方法把給定布局元素數(shù)組中指定起止位置的區(qū)間部分作為一個新的布局元素數(shù)組返回。這兩個方法的實現(xiàn)都比較簡單直接。下面是兩個應(yīng)用例子：
Component[] cps = new 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 這些布局樣式的基礎(chǔ)上，我們可以定義出更加高階的樣式來，比如，給定一布局元素序列，我們希望它們在給定的布局空間中按照 N 行、M 列排列。我們稱之為 block，其實現(xiàn)如下：
public Component block (Component[] cps, int N, int M) {
Component[][] fcps = formalize(cps, N, M);
Component[] rows = new Component[fcps.length];
for(int i = 0; i ＜ fcps.length; i++) {
rows[i] = h_seq(fcps[i]);
}
return v_seq(rows);
}
其中 formalize 是一個工具方法，它把一個給定的布局元素數(shù)組規(guī)范化為 N 行 M 列的形式，如果不足則用 Empty 組件補齊。
如果希望在 block 中，每個元素都可以指定一些橫向和縱向的留白，則可以定義一個 block_with_margin 布局樣式，其實現(xiàn)如下：
public Component block_with_margin(Component[] cps, int N, int M,
float hRatio, float vRatio) {
Component[] ncps = new Component[cps.length];
for(int i=0; i＜cps.length; i++) {
ncps[i] = center(cps[i], hRatio, vRatio);
}
return block(ncps, N, M);
}
好了，現(xiàn)在我們來看一個稍微復(fù)雜一些的例子，我們將使用前面制作的一些布局樣式構(gòu)建一個迷你計算器的外觀，如下圖所示：
對應(yīng)的描述代碼如下：
Component[] cs = new 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);
如果我們現(xiàn)在希望將所有數(shù)字以及操作按鈕按照橫向和縱向各 2% 進(jìn)行留白，我們所要做的僅僅是一行的改動，就是把：
Component opLayout = block(cs,4,4);
更改為：
Component opLayout = block_with_margin(cs, 4, 4, 0.02, 0.02);
這意味著什么呢？這意味著我們可以直接使用DSL布局語言進(jìn)行界面制作，我們可以直接針對布局進(jìn)行編程，我們所寫出來的界面代碼就是我們的布局規(guī)格說明。
從上面的介紹中，讀者可以看出，我們的界面布局語言可以非常方便地定義出一些常見的布局樣式，還可以把這些樣式組合成更為復(fù)雜的一些高階布局樣式，并且這種組合是沒有任何限制的。此外，這些布局樣式的定義描述方式是和界面設(shè)計者頭腦中所使用的一些布局詞匯和規(guī)則貼近的。通過使用界面布局語言，界面設(shè)計者完全可以擺脫那些呆板、機(jī)械又難以定制和擴(kuò)展的布局管理器，可以輕松地把頭腦中的布局創(chuàng)意直接描述出來，逐步形成自己的布局樣式庫，充分享受這種創(chuàng)造性的工作所帶來的樂趣。
【編輯推薦】
