JavaFX 入门用Java从零自己写一个浏览器

home 编辑时间 2020/01/10

![](/api/file/getImage?fileId=5e17d74116199b501c0016ca)

## 前言
其实自从学Java以来一直对Java开发桌面端的图形界面程序很感兴趣。
早些年自学的时候还开发过一些小游戏小工具等。
最近才发现JavaFX，有一种相见恨晚的感觉。
简单体验了一下JavaFX，就相当于一个增强版的Swing 、 Awt 
开发起来要更方便，效率跟高。

跟着教程学了个入门， 就打算写点什么。
因为发现其内置了一个非常方便WebView，于是用了不到200行代码写一个简易的浏览器。
<br>

**源码地址：**
Github: [https://github.com/18121259693/JavaFxBrowserDemo](https://github.com/18121259693/JavaFxBrowserDemo)
Gitee: [https://gitee.com/tczmh/JavaFxBrowserDemo](https://gitee.com/tczmh/JavaFxBrowserDemo)

## 代码

#### 目录结构
```shell
├── src
    └── com
        └── zzzmh
            ├── controller
            │   └── IndexController.java
            ├── view
            │   └── index.fxml
            └── Main.java
```

#### 主要文件
`IndexController.java` 负责`流程控制`、`触发效果`
```java
package com.zzzmh.controller;

import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.concurrent.Worker;
import javafx.scene.control.TextField;
import javafx.scene.web.WebView;

/**
 * @author zzzmh
 */
public class IndexController {

public TextField url;
    public WebView webview;
    public static String homePageUrl = "https://www.baidu.com";

/**
     * 初始化
     */
    public void init() {
        // webview 加入监听器 状态改变后 自动把新的url回显到文本输入框
        webview.getEngine().getLoadWorker().stateProperty().addListener(new ChangeListener<Worker.State>() {
            @Override
            public void changed(ObservableValue<? extends Worker.State> observable, Worker.State oldValue, Worker.State newValue) {
                url.setText(webview.getEngine().getLocation());
            }
        });
        // 跳转首页
        home();
    }

/**
     * 后退
     */
    public void prev() {
        // 必须不是第一个页 才可以后退 否则会出现
        if (webview.getEngine().getHistory().getCurrentIndex() > 0) {
            webview.getEngine().getHistory().go(-1);
        }
    }

/**
     * 前进
     */
    public void next() {
        // 前进必须前面还有页面
        if(webview.getEngine().getHistory().currentIndexProperty().getValue()
                < webview.getEngine().getHistory().getEntries().size() - 1){
            webview.getEngine().getHistory().go(1);
        }
    }

/**
     * 刷新
     */
    public void refresh() {
        // 重新加载当前引擎
        webview.getEngine().reload();
    }

/**
     * 首页
     */
    public void home() {
        // 跳转默认首页
        goTo(homePageUrl);
    }

/**
     * 跳转
     */
    public void forward() {
        // 跳转到输入的url （本方法关联跳转按钮）
        goTo(url.getText().startsWith("http") ? url.getText() : "http://" + url.getText());
    }

/**
     * 跳转的通用方法
     */
    public void goTo(String urlString) {
        webview.getEngine().load(urlString);
    }

}
```

---

`index.fxml` 负责`页面布局`
```xml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.web.*?>

<BorderPane prefHeight="-Infinity" prefWidth="-Infinity" xmlns="http://javafx.com/javafx/10.0.2-internal"
            xmlns:fx="http://javafx.com/fxml/1" fx:controller="com.zzzmh.controller.IndexController">
    <top>
        
        <ToolBar prefHeight="40.0" prefWidth="-Infinity" BorderPane.alignment="CENTER">
            <items>
                
                <Button mnemonicParsing="false" onAction="#prev" text="后退"/>
                <Button mnemonicParsing="false" onAction="#next" text="前进"/>
                <Button mnemonicParsing="false" onAction="#refresh" text="刷新"/>
                <Button mnemonicParsing="false" onAction="#home" text="首页"/>
                
                <Label text="地址"/>
                
                <TextField fx:id="url" prefWidth="980"/>
                
                <Button mnemonicParsing="false" onAction="#forward" text="跳转"/>
            </items>
        </ToolBar>
    </top>
    <center>
        
        <WebView fx:id="webview" prefHeight="-Infinity" prefWidth="-Infinity" BorderPane.alignment="CENTER"/>
    </center>
</BorderPane>
```

---

`Main.java` 程序的主入口，执行`main`方法启动整个程序
```java
package com.zzzmh;

import com.zzzmh.controller.IndexController;
import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Parent;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class Main extends Application {

@Override
    public void start(Stage primaryStage) throws Exception{
        // fxml加载器
        FXMLLoader fxmlLoader = new FXMLLoader();
        fxmlLoader.setLocation(getClass().getResource("view/index.fxml"));
        // fxml加载到 根节点
        Parent root = fxmlLoader.load();
        // 设置标题
        primaryStage.setTitle("极简牛腩器 (Simple Browser)");
        // 设置默认宽高 并加入根节点
        primaryStage.setScene(new Scene(root, 1280, 720));
        // 显示窗口
        primaryStage.show();
        // 获取IndexController
        IndexController controller = (IndexController)fxmlLoader.getController();
        // 执行IndexController中的初始化方法
        controller.init();
    }

/**
     * 入口方法
     * 执行本方法启动整个程序
     */
    public static void main(String[] args) {
        launch(args);
    }
}
```

## 结果
简单实现了一些浏览器基本功能
![](/api/file/getImage?fileId=5e17db1716199b501c00178f)
<br>
![](/api/file/getImage?fileId=5e17dcd316199b501c0017dd)
<br>
![](/api/file/getImage?fileId=5e17dd2116199b501c0017e5)
## END

送人玫瑰,手留余香