利用HTML实现软件的UI

先看看下面的实例

image

 

这是应朋友之邀编写的查询职业技能鉴定考核的分数的软件。看过我之前的博文的,可知这是借用我之前的网页界面。

 

这个UI,如果用WinForm的控件来实现,难度很高。

 

于是另辟蹊径,用Webbrowser控件加载HTML网页来实现软件的UI。

 

这样做的好处有:

1、用HTML编写UI的难度要低得多,可以利用网上很多现成的UI库实现绚丽的UI。本例就是利用Bootstrap库实现的界面UI。

2、实现前端UI和后台逻辑的分离。前端UI(HTML)只实现界面的绘制(可以简单的对前端数据验证),不需要负责后台逻辑以及数据的验证。

 

缺点是:

界面实现是通过Webbrowser控件来调用系统内核的IE来实现。则界面的效果和IE的版本息息相关,高版本的IE没什么太大的差异,但是低版本的IE就会出现界面变形的情况。

 

这样做还要解决前端UI和后台的通信问题,即:

1、前端UI如何调用后台的方法

2、后台如何调用前端UI的方法来刷新页面

 

下面详细讲解一下

1、前端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>

 

2、后台如何调用前端UI的方法来刷新页面

上面的前端UI代码中,函数CreateTable是给后台逻辑调用来刷新前端UI的

在后台代码中用下面的代码调用前端UI的函数来刷新UI。

 

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

 

 

至此,前端UI和后台逻辑的双向通信已经全部打通,实现了UI和逻辑层的分离。

同时,前端UI利用众多的HTML、CSS、JS类库能实现很多绚丽的UI,不怕想不到,就怕做不到。

 

本文中的后台逻辑就不贴了,无外乎就是获取数据、数据分析、格式化数据而已

image

 

 

多说一句,这个前端UI也可以用WPF实现,只是实现的难度要大很多。毕竟网上现成的WPF的前端UI库不太好找。

posted @ 2015-07-06 11:00 万仓一黍 阅读(...) 评论(...) 编辑 收藏