zoukankan      html  css  js  c++  java
  • 利用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库不太好找。

  • 相关阅读:
    Unity3d启动事件
    UI 科学
    LOL
    流光
    PlayerPrefs
    C++
    Android Home
    状态机
    架构设计
    AI
  • 原文地址:https://www.cnblogs.com/grenet/p/4623790.html
Copyright © 2011-2022 走看看