標籤式使用者介面的故事

 

軟體的使用者介面，正如女性的時裝，每過一段時間就有一種新的款式。自從圖形化使用者介面誕生以來，視窗作為一種主流的設計模式，儘管一直是這樣的方方正正、層層疊疊，以前有稜角的地方卻慢慢露出了優美的曲線，過去嚴實和保守的色調也變得越來越清涼和透明。在緊貼著這層靚麗外表的裡面，內容組織的方式也在悄悄地發生著變化。當年風靡一時的MDI模式一夜之間突然讓人覺得是如此的淩亂和繁雜，反而當時只是在背景參數設定介面上使用的標籤模式，如今變成了主介面上倍受尊寵的明星。更有甚者，在微軟的office 2007裡面，連菜單都標籤化了。

 

 

其實開始接觸標籤式使用者介面已經是幾年前的事了，當時為了設計一個可用性更好的使用者介面，我們參考了不少業界巨頭，最後還是比較喜歡Siemens和GE的某些醫學影像產品裡的標籤式風格。用軟體的術語，就是去掉繁瑣的菜單，而用標籤這種清晰簡單的互動方式，讓使用者在幾個主要的業務模組之間進行導航。在程式的實現上，為了實現不同業務模組的解偶和並行開發，當時我們採用了一些複雜的方式。尤其是如何讓一個介面既能在自己的進程中獨立運行，又能嵌入到標籤頁中與來自其他業務模組的介面一起在主進程中運行，當時調用了其他一些組件，代碼寫出來，編譯通過，我也懶得深究了。現在有時間來回顧一下，才發現原來換一種方式，也可以如此的簡單。

在.NET的世界中，如果一個介面能獨立運行，它就必須是個Form，比如： Form2 frm = new Form2();
Application.Run(frm);

而通常我們印象中能嵌入標籤頁控制項TabControl中的，又必須是個Control，比如：

TabPage page = new TabPage( "test" );
TextBox text = new TextBox();
page.Controls.Add( text );
this.tabControl1.TabPages.Add( page );

雖然Form派生於Control，但直接把一個Form的對象Add到一個TabPage上卻是不行的，要想Add成功，就要把Form指定為一個子視窗，即設定一下TopLevel和Parent這兩個屬性。

TabPage page = new TabPage( "test" );
            
Form2 frm = new Form2();
frm.FormBorderStyle = FormBorderStyle.None;
frm.Dock = DockStyle.Fill;
frm.TopLevel = false;
frm.Visible = true;
frm.Parent = page;
            
page.Controls.Add( frm );
this.tabControl1.TabPages.Add( page );

 

這裡我們發現，把FormBorderStyle設定為None以後，視窗上的菜單就消失了。但如果沒有把它設定為None，Form2嵌入到TabControl來以後還會帶著它的標題列，這就很難看了。不過可以考慮採用以前MDI時代的做法，當主視窗Form1發現當前嵌入的子視窗有菜單的時候，就自動把這個菜單顯示到主視窗上。另外，如果要做一個商業軟體，直接用.NET內建的TabControl來做標籤式介面是難以想象的，因為這個控制項實在太醜了，而且你也休想通過重載它的一些成員來讓它變得更漂亮些。最好還是重新寫一個TabControl吧，其實很容易的。尤其是應該多用一些像Panel這樣簡潔明了的控制項，然後就像在網頁上顯示大張圖片時常採用的那種拼貼藝術一樣把它們拼貼起來就好了，運氣好的話，甚至只需要設定一下Align、Anchor或者Dock屬性，不需要直接動用任何一個GDI/GDI+的API。這就是WinForm的威力。最後，不管如何自訂控制項，把視窗嵌入控制項的方式永遠都是這麼的簡單。

 

前面我們講O/X Mapping和O/R Mapping的故事中，都提到了外掛程式機制。其實如果想讓外掛程式中包含使用者介面的話，除了把託管的外掛程式模組（不管是EXE還是DLL）用Assembly.Load()轉載上來以外，還需要用上面的方法把他們嵌入到主介面上。當然，在詳細設計的時候，還是要有定義一些公用的介面、所有外掛程式都實現這些介面之類的考慮，但這些都是基本的設計常識，不再詳述了。總之，這樣一來，這些模組真的就既能獨立運行，獨立開發，獨立調試，又能嵌入宿主進程中，與大家一起運行了。天哪，與大家一起運行？這可沒那麼容易。對了，我們還需要一個模組之間相互連信的機制；如果系統足夠複雜，還需要一個工作流程引擎來確保這些通訊的有序的，可管理的。好的，這又是個大話題，且聽下回分解吧。