WEB客户端：浏览器和页面
 
sf2gis@163.com
 
2015年6月12日
 
 
 
1  目标：浏览器展示HTML页面，并控制其行为和样式。
 
2 原理：HTML框架+CSS样式+JavaScript行为。
 
浏览器作为页面的容器，提供所有的基础功能。
 
HTML是页面的框架。
 
CSS是页面的样式。
 
JavaScript控制页面行为。
 
3 方法：页面框架：HTML
 
目标：各种控件的框架。
 
方法：HTML
 
区块：div（division,独立块，前后换行），span(行内块，不换行)。
 
3.1 URI,URL,URN
 
目标：为WEB上所有内容统一命名。
 
方法：URI，URL，URN
 
参考：http://www.cnblogs.com/fsjohnhuang/p/4280369.html
 
URI（Uniform ResourceIdentifier）。
 
格式：schema://unit#fragment。schema表示一个独立的组织，unit为组织中的基本单位，fragment表示单位中资源。当shecma://省略时，使用当前环境支持的默认值。
 
unit格式：username@host:port/path/?query。表示以指定的用户名请求资源。
 
URL：URI的web子类，目标是定位，使用不同的网络协议来作为schema。
 
URN：URI的持久化子类，目标是标识。
 
格式：urn:NID:NSS
 
NID：表示不同的组织。
 
NSS由NID规定。
 
参考：http://www.ietf.org/rfc/rfc2141.txt
 
4 方法：样式表：CSS（Cascade Style Sheet）
 
目标：通过独立的样式表，管理和复用整个页面的样式。
 
方法：CSS
 
4.1 引用方法：行内，内嵌(<style>)，链接(<link>)，导入（@import（“/’xx”/’），彩色为可选行为）。
 
 
 
参考：http://www.divcss5.com/rumen/r56.shtml
 
4.2 选择器：标记，类别（.类名），id(#id)，直接子元素（>），属性（【属性名=属性值】）。选择器可以组合及集合。
 
4.3 定位：弹性定位（float），坐标位置（position,可以设置为static（默认原点），absolute（页面坐标），relative（父容器坐标）），上下位置（z-index，越大越靠上）。
 
4.4 元素空间：所有元素都是盒子模型，使用外间隔+边框+内间隔+内容组成。
 
参考：http://developer.51cto.com/art/201009/226194.htm
 
 
4.5 注释：/*…*/
 
5 方法：行为脚本javascript
 
参见：javascript.docx

        第一次接触到web api，发现这个东西是REST风格的：----



        微软的web api是在vs2012上的mvc4项目绑定发行的，它提出的web api是完全基于RESTful标准的，完全不同于之前的（同是SOAP协议的）wcf和webService，它是简单，代码可读性强的，上手快的，如果要拿它和web服务相比，我会说，它的接口更标准，更清晰，没有混乱的方法名称，有的只有几种标准的请求，如get,post,put,delete等，它们分别对应的几个操作，下面讲一下：


        GET：生到数据列表（默认），或者得到一条实体数据
        POST：添加服务端添加一条记录，记录实体为Form对象
        PUT：添加或修改服务端的一条记录，记录实体的Form对象，记录主键以GET方式进行传输
        DELETE：删除 服务端的一条记录


        因为之前看一个hybird app的接口设计，发现就是这种风格的，貌似用的很多，作为小白的我就心里mark了一下，希望能在自己项目组的hybird app的项目中用到。


       下面来写个简单web api的例子，来看下web api的使用及获取client的信息：


        1，首先建立一个web api的项目；
        2，加入controller跟model:


                  


       user类：
             
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace BrowerTest.Models
{
    public class User
    {
        public int Id { get; set; }
        public String UName { get; set; }
        public int UAge { get; set; }
        public String UAddress { get; set; }

    }
}



    Controller类：


           
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web;
using System.Web.Http;
using System.ServiceModel;
using System.ServiceModel.Channels;



namespace BrowerTest.Controllers
{
    public class UserController : ApiController
    {
       

        public List<BrowerTest.Models.User> GetUser(HttpRequestMessage httpreq)
            
        {
           
            //返回数据
            var userList = new List<BrowerTest.Models.User> { 
            new BrowerTest.Models.User{ Id=1,UName="张三",UAge=12,UAddress="海淀区"},
            new BrowerTest.Models.User{Id=2,UName="李四",UAge=23,UAddress="昌平区"},
            new BrowerTest.Models.User{Id=3,UName="王五",UAge=34,UAddress="朝阳区"}
            };

            var temp = (from u in userList
                        select u).ToList();
            return temp;
        }
    }
}




        之后，run下看看，因为我这里没有定义路由，所以使用默认路由，访问地址为：http://****/api/controllerName/actionName  。例如：http://localhost:12333/api/user/getuser。


      3，通过HttpRequestMessage获取请求信息


           
  public class UserController : ApiController
    {
        /*
         * 获取客户端IP地址--------------
         方法说明： this version will return a string with the client IP. If it returns ::1 that means the client is requesting from the same computer as where the API is running. The query address will be something like http://yoursite/api/ip depending on your routing.
         * （此方法会返回一个IP字符；如果为“：：1”表示客户端的请求来自跟api接口相同的PC机上面。）
         * 方法来源：http://www.herlitz.nu/2013/06/27/getting-the-client-ip-via-asp-net-web-api/  （国外网站，可能需要翻墙才可以呀，在stackoverflow上看到的）
         */
        private string GetClientIp(HttpRequestMessage request = null)
          {
                request = request ?? Request;

                if (request.Properties.ContainsKey("MS_HttpContext"))
                {
                      return   ((HttpContextWrapper)request.Properties["MS_HttpContext"]).Request.UserHostAddress;
                }
                else if (request.Properties.ContainsKey(RemoteEndpointMessageProperty.Name))
                {
                     RemoteEndpointMessageProperty prop = (RemoteEndpointMessageProperty)request.Properties[RemoteEndpointMessageProperty.Name];
                     return prop.Address;
                }
                else if (HttpContext.Current != null)
                {
                    return HttpContext.Current.Request.UserHostAddress;
                }
                else
                {
                      return null;
                }
           }
     

        public List<BrowerTest.Models.User> GetUser(HttpRequestMessage httpreq)
            
        {
           /*读取客户端信息*/
            httpreq.GetUrlHelper().ToString();
            String url=httpreq.RequestUri.ToString();//当前页面地址
            String userAagent = httpreq.Headers.UserAgent.ToString();//User-Agent全部信息:里面包含浏览器版本跟操作系统版本
            String ClientIp = GetClientIp(httpreq);//客户端IP地址


            //返回数据
            var userList = new List<BrowerTest.Models.User> { 
            new BrowerTest.Models.User{ Id=1,UName="张三",UAge=12,UAddress="海淀区"},
            new BrowerTest.Models.User{Id=2,UName="李四",UAge=23,UAddress="昌平区"},
            new BrowerTest.Models.User{Id=3,UName="王五",UAge=34,UAddress="朝阳区"}
            };

            var temp = (from u in userList
                        select u).ToList();
            return temp;
        }
    }



       
       感觉用起来跟Asp.net 的controller差不多，挺适合做接口的，还没深入研究内部原理，mark下，有空用spring mvc做个java版的。
















         

 
web浏览器程序打包成客户端可安装程序
 
第一步
第二步

 
第一步
 
参考：node-webkit打包,我完全按照这个来做,亲测，可行
 另附node-webkit下载地址：https://nwjs.io/downloads/
 
第二步
 
利用inno setup(免费的安装制作软件)，下载地址:http://www.jrsoftware.org/isdl.php , 教程见:https://blog.csdn.net/itas109/article/details/78801199
 
遇到的问题：安装的时候找不到中文的安装语言
 解决教程：https://www.cnblogs.com/leochan007/p/8203675.html
 
最终效果：

 
目录
 
★☆★ 写在前面 ★☆★
★☆★ 本系列文章 ★☆★
★☆★ 开源网址 ★☆★
〇、写本文章的目的
一、项目简介
二、想法冲突
1、起因
2、构思新架构
   
   
三、为新架构而做的前期努力
0、前言
1、java 客户端内嵌浏览器之 Swing
2、java 客户端内嵌浏览器之 SWT
3、java 客户端内嵌浏览器之 Swing + SWT + DJNativeSwing
4、java 客户端内嵌浏览器之 javaFX
   
  
 

 
★☆★ 写在前面 ★☆★
 
 
 
请通过目录，选择感兴趣的部分阅读。
 
 
★☆★ 本系列文章 ★☆★
 
 
 
【java】本地客户端内嵌浏览器1 - Swing、SWT、DJNativeSwing、javaFX
 【java】本地客户端内嵌浏览器2 - chrome/chromium/cef/jcef
 【java】本地客户端内嵌浏览器3 - Swing 使用 Spring 框架 + 打包项目 + 转exe + 源码
 
 
★☆★ 开源网址 ★☆★
 
 
 
https://github.com/supsunc/swing-jcef-spring
 
 
〇、写本文章的目的
 
本人正在做的项目，本人想修改其架构，并付诸实现，但最后被否定，不想因为修改架构的努力付诸东流，遂写本文。
 
一、项目简介
 
为一个仪器开发可视化操控软件，仪器方提供 C# 语言编写的 dll，通过仪器方提供的接口进行操控。
本项目在最初设计架构时，本人并没有参与，本人介入该项目时，已确定采用 B/S 架构。
Server 端用 Tomcat 做后台，用 java 做开发语言。
通过 jni4net 对仪器方提供的 dll 进行二次封装，进而得到后台可以使用的 jar 包，进而操控仪器。
后台使用的是 SpringMVC 框架。
 
 
 
服务器电脑安装 jdk、Tomcat，服务器电脑安装 Chrome 使用该软件
 
 
 
 
 
用户电脑安装 jdk、Tomcat、chrome 使用该软件
 
 
 
二、想法冲突
 
1、起因
 
软件一阶段测试时，提供给甲方一套文件，包括 32 位和 64 位的 jdk、Tomcat、Chrome，大约 600 MB 左右大小。我这边领导居然要求提供一个 一键安装 的那种文件，最后写了两个 .bat 文件，用一些 xcopy、setx 等方法。
 
这就导致了我认为仪器需要和用户电脑相连，而操控仪器这种数据交互就要通过 Tomcat，走 http 协议。这样不但作为开发者调用相关接口会很麻烦，对于用户，安装一堆软件也很麻烦，且仪器必须和服务端在一起，而不能独立出来。采用 B/S 架构，
 
2、构思新架构
 
 
 
主体架构还是 B/S 架构，但是开发一个 Client，内嵌 Chromium 内核浏览器，由本地和仪器进行交互。
 
 
 
三、为新架构而做的前期努力
 
0、前言
 
项目 B/S 架构的 Browser 部分以 Chrome 的 Webkit 内核做定制开发，采用了 ES6、ES2016、ES2017、ES2018 相关语法，使用了一些 Webkit/Blink 内核才支持的一些语法、方法等，所以开发的客户端必须 内置 Chromium 内核。
由于调用 dll 已用 jni4net 生成相关 jar 包，且制作的客户端要求可移植，那么 使用 java 开发客户端 是再好不过的了。
经过前期探索发现 Java 应用程序用户界面的开发工具包 Swing 好像不自带 Browser 组件。
 
1、java 客户端内嵌浏览器之 Swing
 
 
 
参考链接：Swing 简单的WEB浏览器
 
 
不具体操作讲解了，代码很简单，将其网址改为 https://www.baidu.com/，并启动程序，我整个人都傻了。
 
 
最大化窗口后，尝试搜索点什么东西，点击“百度一下”。
 ？？？空白页了？
 
 
2、java 客户端内嵌浏览器之 SWT
 
 
 
SWT.jar 包下载步骤，请参考【java】（org.eclipse.swt）SWT.jar 的下载步骤
 
 
新建项目，导入 jar 包，Add as Library，新建个 Main 方法。
 
 
直接分享源代码，此处参考链接：java SWT Browser实现浏览器功能并运行JavaScript代码
 
package swt.browser;

import org.eclipse.swt.*;
import org.eclipse.swt.browser.*;
import org.eclipse.swt.layout.*;
import org.eclipse.swt.widgets.*;

public class Main {
    public static void main(String[] args) {

        Display display = new Display();
        final Shell shell = new Shell(display);
        shell.setLayout(new FillLayout());

        final Browser browser;
        try {
            browser = new Browser(shell, SWT.NONE);
        } catch (SWTError e) {
            System.out.println("Could not instantiate Browser: " + e.getMessage());
            display.dispose();
            return;
        }

        browser.setUrl("www.baidu.com"); //百度

        shell.open();
        while (!shell.isDisposed()) {
            if (!display.readAndDispatch()) display.sleep();
        }
        display.dispose();
    }
}
 
运行之后，右键单击弹出菜单，感觉像是 IE 内核(哈哈，凭借这个右键菜单来判断显然是不现实的)，我们的项目直接崩掉了。
 
 
其实是在实例化 Browser 对象时的入参控制了使用的内核。
 
Browser browser = new Browser(shell, SWT.NONE);	// 这应该是 IE 内核。
Browser browser = new Browser(shell, SWT.MOZILLA);	// 这应该是 MOZILLA 内核。
Browser browser = new Browser(shell, SWT.WEBKIT);	// 这应该是 WEBKIT 内核。
 
使用 MOZILLA 内核启动程序的时候，控制台会提示
 Unsupported Browser Type: SWT.MOZILLA style is deprecated.
 It'll be removed from the user specified style. Browser will be created with the modified style and if no other style bit is specified, browser with SWT.NONE style will be created。
 
 
使用 WEBKIT 内核启动程序的时候，哈哈，控制台提示 Could not instantiate Browser: No more handles [Safari must be installed to use a SWT.WEBKIT-style Browser]。要求 必须安装 Safari 浏览器，安装 Chrome 是没有用的，因为 webkit 内核可以从 Safari 浏览器中剥离出来，从 Chrome 中剥离不出来。还有一点是 Windows 上的 Safari 浏览器好像是好久没有更新了，其 Webkit 内核版本也很低。
 
 
3、java 客户端内嵌浏览器之 Swing + SWT + DJNativeSwing
 
 
 
此部分参考链接：java使用swing实现内嵌浏览器
 DJNativeSwing 项目官网：Native Swing
 DJNativeSwing 项目开发者日志：News Log
 DJNativeSwing 项目下载地址：The DJ Project
 DJNativeSwing 相关 jar 包下载地址：DJNativeSwing-SWT-1-0-3-20140708.zip
 
 
主要使用这两个 jar 包。
 
 
新建项目，导入 jar 包，Add as Library，新建个 Main 方法。
 
 
新建一个 package 叫做 browser，在里面新建一个 class 叫做 MyBrowser，直接分享源代码，此处参考链接：java使用swing实现内嵌浏览器
 
 
package dj.nativeSwing.browser;

import chrriis.dj.nativeswing.swtimpl.components.JWebBrowser;

import javax.swing.*;
import java.awt.*;

public class MyBrowser extends JPanel {

    public MyBrowser(String url) {
        super(new BorderLayout());
        JPanel webBrowserPanel = new JPanel(new BorderLayout());
        JWebBrowser webBrowser = new JWebBrowser();
        webBrowser.navigate(url);
        webBrowser.setButtonBarVisible(false);
        webBrowser.setMenuBarVisible(false);
        webBrowser.setBarsVisible(false);
        webBrowser.setStatusBarVisible(false);
        webBrowserPanel.add(webBrowser, BorderLayout.CENTER);
        add(webBrowserPanel, BorderLayout.CENTER);
        //执行Js代码
        webBrowser.executeJavascript("alert('hello swing')");
    }
}
 
在 Main 类中新增方法 openForm，直接分享源代码，此处参考链接：java使用swing实现内嵌浏览器
 
 
package dj.nativeSwing;

import chrriis.common.UIUtils;
import chrriis.dj.nativeswing.swtimpl.NativeInterface;
import dj.nativeSwing.browser.MyBrowser;

import javax.swing.*;
import java.awt.*;

public class Main {
    public static void main(String[] args) {
        String url = "http://www.baidu.com";
        String title = "hello swing";
        openForm(url, title);
    }

    /**
     * 在swing里内嵌浏览器
     *
     * @param url   要访问的url
     * @param title 窗体的标题
     */
    private static void openForm(String url, String title) {
        UIUtils.setPreferredLookAndFeel();
        NativeInterface.open();
        SwingUtilities.invokeLater(new Runnable() {
            public void run() {
                JFrame frame = new JFrame(title);
                //设置窗体关闭的时候不关闭应用程序
                frame.setDefaultCloseOperation(JFrame.DISPOSE_ON_CLOSE);
                frame.getContentPane().add(new MyBrowser(url), BorderLayout.CENTER);
                frame.setExtendedState(JFrame.MAXIMIZED_BOTH);
                frame.setLocationByPlatform(true);
                //让窗体可见
                frame.setVisible(true);
                //重置窗体大小
                frame.setResizable(true);
                // 设置窗体的宽度、高度
                frame.setSize(1400, 700);
                // 设置窗体居中显示
                frame.setLocationRelativeTo(frame.getOwner());
            }
        });
        NativeInterface.runEventPump();
    }
}
 
进入到 JWebBrowser 的构造方法中，可以发现，其中第二行 WebBrowserRuntime runtime = WebBrowserRuntime.DEFAULT;规定了默认的内核，如果无参构造对象，则使用默认的内核，应该就是 IE 内核。
和 SWT 一样，是在实例化 JWebBrowser 对象时的入参控制了使用的内核。
 
JWebBrowser webBrowser = new JWebBrowser();	// 这应该是 IE 内核。
JWebBrowser webBrowser = new JWebBrowser(JWebBrowser.useXULRunnerRuntime());	// 这应该是 MOZILLA 内核。
JWebBrowser webBrowser = new JWebBrowser(JWebBrowser.useWebkitRuntime());	// 这应该是 WEBKIT 内核。
 
使用 MOZILLA 内核启动程序的时候，哈哈，这底层用的不还是 SWT 的么，控制台提示
 Unsupported Browser Type: SWT.MOZILLA style is deprecated.
 It'll be removed from the user specified style. Browser will be created with the modified style and if no other style bit is specified, browser with SWT.NONE style will be created。
 
 
使用 WEBKIT 内核启动程序的时候，哈哈，实锤底层用的是 SWT ，注意看控制台提示 No more handles [Safari must be installed to use a SWT.WEBKIT-style Browser]。要求 必须安装 Safari 浏览器，安装 Chrome 是没有用的，原因在上面说过了。
 
 
4、java 客户端内嵌浏览器之 javaFX
 
 
 
能支撑我到现在还没有放弃的原因是我在网上搜索到了，jdk1.8 自带 javaFX ，而 javaFX 自带浏览器组件，而且使用的是 WebKit HTML 技术的Web组件（请参考 JavaFX WebView概述，很强大，内置了类似Electron的功能），且搜索到了很多关于 javafx 的很多文章和观点，全都在 diss Swing，拥护 javaFX。
 
 
 
javaFX的几个新特性，让swing彻底过时
 
 
现在用Java写UI，该用Swing还是JavaFX？
 
 
 
Swing那么受欢迎,为啥JavaFX屡被唱衰？
 
 
 
JavaFX与Swing框架相比,有哪些特点?
 
 
 
JavaFX实战 -- 00. 为什么选择JavaFX？
 
 
 
 
新建项目，新建个 Main 方法，继承自 Application。
 
 
直接分享源代码，此处参考链接：用javafx webview 打造自己的浏览器
 
package javafx;

import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.concurrent.Worker.State;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollPane;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;
import javafx.stage.Stage;

public class Main extends Application {

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage stage) throws Exception {
        stage.setWidth(400);
        stage.setHeight(500);
        Scene scene = new Scene(new Group());

        final WebView browser = new WebView();
        final WebEngine webEngine = browser.getEngine();

        ScrollPane scrollPane = new ScrollPane();
        scrollPane.setContent(browser);

        webEngine.getLoadWorker().stateProperty()
                .addListener(new ChangeListener<State>() {
                    @Override
                    public void changed(ObservableValue ov, State oldState, State newState) {
                        if (newState == Worker.State.SUCCEEDED) {
                            stage.setTitle(webEngine.getLocation());
                        }
                    }
                });
        webEngine.load("http://www.baidu.com");

        scene.setRoot(scrollPane);

        stage.setScene(scene);
        stage.show();
    }
}
 
将网址改成我们的项目网址，哇哇哇，没崩，打开了。但是。。。 ？？？不大对劲啊。
 
 
 
正常 Chrome 这样显示：
 
 
 
 
 
 
javafx 内嵌浏览器这样显示：
 
 
 
探查差异，在程序中打印 UserAgent
 
System.out.println(webEngine.getUserAgent());
// 打印结果如下（应该是一行显示，以空格分隔，我给它手动换行写在这里了）
// Mozilla/5.0 (Windows NT 10.0; Win64; x64)
// AppleWebKit/606.1 (KHTML, like Gecko)
// JavaFX/8.0
// Safari/606.1
 
原来没用 Chrome 的 Webkit 内核，用的 Safari 的 Webkit 内核，而且版本还挺高？
 
 
 
我看了一下，我电脑上最新版Chrome： Chrome 78.0.3904.70 版本的 UserAgent里写着 Safari/537.36
 
 
 
然而我们的项目必须用 Chrome 的 Webkit 内核，还得是高版本的。