windows下开发html5软件之javafx

html5开发app的技术大行其道的今天，衍生出了apicloud，appcan，dcloud，phonegap等一系列工具，但是无论html5技术发展到多强大，感觉都只是手机端的技术。不知道大家是否有想过，明明电脑端的浏览器也已经非常强大了，是否html5技术也已经可以用于开发桌面应用了呢？

答案是肯定的，html5技术是可以用于开发桌面应用的。只是由于目前桌面应用的萎靡，很少有第三方厂商去开发打包工具。所以，才显得不是特别的成熟。实际上我们使用的很多应用可能都已经是一个html5软件了呢。

下面，小沃就来教教大家通过java最新的图形化开发工具javafx去开发一个html5应用。(这里javafx是什么小沃就不多介绍了，感兴趣的同学请自行百度)

想要打包html5应用，最主要的控件就是webview，而javafx自带一个webview。

该webview基于开源web浏览器引擎WebKit。其支持CSS、JavaScript、DOM和HTML5。

内嵌浏览器的架构

武汉app开发

WebEngine类

WebEngine类提供了基本的web页面功能。尽管它并不与用户直接交互，但它也支持用户交互，如导航链接和提交HTML表单。WebEngine类一次处理一个web页面。它支持加载HTML内容和访问DOM对象等基本功能，也支持执行JavaScript指令。

有两个构造方法能够创建WebEngine对象：空构造和带一个URL参数的构造。如果你使用空构造方法来实例化它，那么URL可以通过WebEngine对象的load()方法来传入。

从JavaFX SDK2.2开始，开发人员可以为某个特定的web engine启用/禁用JavaScript调用，以及应用自定义样式表。用户可以使用自定义的样式表替换WebEngine实例渲染的页面中的默认样式表。

WebView类

WebView类是Node类的一个扩展。它封装了WebEngine对象，将HTML内容加入程序的scene中，并且提供各种属性和方法来应用特效和变换。WebView对象的getEngine()方法返回一个与之关联的web engine。

设置Scene的宽高

由于我们要将他伪造成app，因此通常需要全屏，这里我们可以设置stage.setFullScreen(true);

如果要任意设置宽高，可以在scene = new Scene(new Browser(), 500, 300);stage.setScene(scene);这里修改500与300这两个参数。

设置webview的宽高与scene完全一致

这里需要在继承了Region类的函数中添加layoutChildren方法，然后在这个方法中执行layoutInArea函数。

下面是小沃为大家贡献的一段代码，让百度来做炮灰吧。

Main.java

package javafx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

	private Scene scene;

	public static void main(String[] args) {
		// TODO Auto-generated method stub
		launch(args);
	}

	@Override
	public void start(Stage arg0) throws Exception {
		// TODO Auto-generated method stub
		arg0.setTitle("沃航武汉科技有限公司");
        arg0.setFullScreen(true);
        scene = new Scene(new Browser());
        arg0.setScene(scene);
        arg0.show();
	}

}

Browser.java

package javafx;

import java.util.Timer;
import java.util.TimerTask;

import javafx.event.ActionEvent;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.scene.control.Button;
import javafx.scene.layout.Region;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

public class Browser extends Region {
    private WebView browser = null;
    private WebEngine webEngine = null;
    private Button btn = null;
    private Integer i = null;
    private Timer timer = null;

    public Browser() {
    	browser = new WebView();
    	webEngine = browser.getEngine();
    	i = 0;
        webEngine.load("https://tools.worldflying.cn/phpinfo.php");
        getChildren().add(browser);
    	btn = new Button();
    	btn.setOnAction((ActionEvent e) -> {
    		BtnClick();
    	});
    	btn.setStyle("-fx-opacity:0;-fx-pref-width:100px;-fx-pref-height:30px;");
        getChildren().add(btn);
    }

    @Override
    public void layoutChildren() {
    	super.layoutChildren();
        double w = getWidth();
        double h = getHeight();
        layoutInArea(browser, 0, 0, w, h, 0, HPos.CENTER, VPos.CENTER);
    }

    public void BtnClick() {
    	i++;
    	if(timer != null) {
    		timer.cancel();
    	}
    	timer = new Timer();
    	if(i == 5) {
    		System.exit(0);
    	} else {
    		timer.schedule(new TimerTask() {
				@Override
				public void run() {
					// TODO Auto-generated method stub
					i = 0;
				}
    		}, 5000);
    	}
    }
}

其实运行起来后，大家都能看得见，这个代码有一部分是上面没有讲到的，就是添加了一个button按钮在左上角，作用是点击button后程序自动关闭。

另外，javafx可以实现js函数绑定到java函数中的效果，因此作为最新式的java ui实现方法。javafx前途旷阔，可惜小沃对于前端的ui专注于html5技术，否则也应该会爱上它吧。