利用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库不太好找。