利用HTML實現軟件的UI

先看看下面的實例

 

這是應朋友之邀編寫的查詢職業技能鑑定考覈的分數的軟件。看過我以前的博文的，可知這是借用我以前的網頁界面。

 

這個UI，若是用WinForm的控件來實現，難度很高。

 

因而另闢蹊徑，用Webbrowser控件加載HTML網頁來實現軟件的UI。

 

這樣作的好處有：

一、用HTML編寫UI的難度要低得多，能夠利用網上不少現成的UI庫實現絢麗的UI。本例就是利用Bootstrap庫實現的界面UI。

二、實現前端UI和後臺邏輯的分離。前端UI（HTML）只實現界面的繪製（能夠簡單的對前端數據驗證），不須要負責後臺邏輯以及數據的驗證。

 

缺點是：

界面實現是經過Webbrowser控件來調用系統內核的IE來實現。則界面的效果和IE的版本息息相關，高版本的IE沒什麼太大的差別，可是低版本的IE就會出現界面變形的狀況。

 

這樣作還要解決前端UI和後臺的通訊問題，即：

一、前端UI如何調用後臺的方法

二、後臺如何調用前端UI的方法來刷新頁面

 

下面詳細講解一下

一、前端UI如何調用後臺的方法

首先，新建一個類，專門實現後臺的邏輯。爲了能讓前端調用，必須給類添加相應的申明，以下所示：

<System.Runtime.InteropServices. ComVisible( True)>
Public  Class  clsQuery
    Private _Web As  WebBrowser
    Public  Sub  New(W As  WebBrowser)
        _Web = W
        _Web.ObjectForScripting = Me
    End  Sub

    Public  Sub Query(ID As  String, Subject As  String) 
      
    End  Sub 
    
End  Class

經過申明

<System.Runtime.InteropServices.ComVisible(True)>

使得該類的公用方法能經過Webbrowser控件被調用，就是代碼中Query方法

再經過   _Web.ObjectForScripting = Me  把該類和Webbrowser控件綁定，這樣前端UI就能調用該類的方法了。

 

在前端UI的HTML代碼中，經過window.external.Query(ID, Subject); 調用後臺的邏輯

     < script >
        function Query() {
            var ID = $( '#IDCard').val();
            var Subject = $( '#Subject').val();

            if (ID == '')  {
                alert( '請輸入身份證號！！！！');
            }
            else {
                window.external.Query(ID, Subject);
            }
        }

        function CreateTable(T) {
            $( '#ResultTable').html(T);
        }
    </ script >

 

二、後臺如何調用前端UI的方法來刷新頁面

上面的前端UI代碼中，函數CreateTable是給後臺邏輯調用來刷新前端UI的

在後臺代碼中用下面的代碼調用前端UI的函數來刷新UI。

 

_Web.Document.InvokeScript("CreateTable", A)

 

 

至此，前端UI和後臺邏輯的雙向通訊已經所有打通，實現了UI和邏輯層的分離。

同時，前端UI利用衆多的HTML、CSS、JS類庫能實現不少絢麗的UI，不怕想不到，就怕作不到。

 

本文中的後臺邏輯就不貼了，無外乎就是獲取數據、數據分析、格式化數據而已

 

 

多說一句，這個前端UI也能夠用WPF實現，只是實現的難度要大不少。畢竟網上現成的WPF的前端UI庫不太好找。