Java 实践：JavaFX 桌面应用开发中使用字体图标

在最近的一个 JavaFX 桌面应用开发中，体验了一下将 Font Awesmoe 的字体图标库作为自定义字体运用于桌面应用中。我将其中一些关键代码提取出来编写成了FontawesomeWithJavaFX 示例程序供大家交流。下载

Font Awesome

这是一个 web app 常用的可以进行自定义缩放矢量图标, 其大小，颜色，阴影等，都可通过 CSS 进行修饰。

Overview

预备知识

了解一下 JavaFX

JavaFX 简单的说，就是用于 Java 开发桌面应用的。对于曾经使用过 AWT, Swing, SWT 这样的东东。这个算是对开发者和用户体验最好的了。Java GUI 的历史你懂得。不过对于当前移动应用，WEB 应用大行其道的今天，这个有点生不逢时。

JDK or JRE 1.8

Font Awesome 字体文件

可以去 Font Awesmoe 下载。附件中已包含。

真啰嗦 (: 上干饭

代码片段

/**
 * The MIT License
 * 
 * Copyright (c) 2016 Shell Technologies PTY LTD. http://au.shellpays.com
 *
 * You may obtain a copy of the License at
 * 
 *       http://mit-license.org/
 *       
 */
import java.util.*;
import java.util.stream.*;

import javafx.application.*;
import javafx.geometry.*;
import javafx.scene.*;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.paint.*;
import javafx.scene.text.*;
import javafx.stage.*;

/**
 * @author Steven Chen
 *
 */
public class FontawesomeWithJavaFX extends Application {
    private static final Font GLYPH_FONTAWESOME;
    private static final Map<String, Character> GLYPH_MAP;

    static {
               // 加载字体库文件
        GLYPH_FONTAWESOME = Font
                .loadFont(FontawesomeWithJavaFX.class.getResourceAsStream("fontawesome-webfont@4.5.0.ttf"), -1);
        GLYPH_MAP = new HashMap<String, Character>();
        GLYPH_MAP.put("fa_500px", '\uf26e');
        GLYPH_MAP.put("anchor", '\uf13d');
                ...
                GLYPH_MAP.put("youtube_play", '\uf16a');
        GLYPH_MAP.put("youtube_square", '\uf166');
    }
    /**
     * @param args
     */
    public static void main(String[] args) {
        launch(args);
    }

    private ScrollPane scrollPane;
    private FlowPane iconPane;
    private List<Button> buttonList;

    @Override
    public void init() throws Exception {
        buttonList = GLYPH_MAP.keySet().stream().map(i -> {
            return createGlyphButton(i, 2);
        }).collect(Collectors.toList());
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
        HBox topPane = new HBox();
        topPane.setAlignment(Pos.BASELINE_CENTER);
        topPane.setPadding(new Insets(16));
        topPane.setSpacing(10);
        Text title = new Text("Icon Button List");
        title.setFont(Font.font(24));
        topPane.getChildren().addAll(title);
        HBox.setHgrow(title, Priority.ALWAYS);

        scrollPane = new ScrollPane();
        scrollPane.setPadding(new Insets(16));
        iconPane = new FlowPane();
        iconPane.getChildren().addAll(buttonList);
        scrollPane.setContent(iconPane);
        scrollPane.setVvalue(0.0);
        iconPane.prefWidthProperty().bind(scrollPane.widthProperty().subtract(20.0));

        BorderPane root = new BorderPane();
        root.setTop(topPane);
        root.setCenter(scrollPane);

        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.setTitle("Fontawesome Glyph");
        primaryStage.setWidth(800);
        primaryStage.setHeight(600);
        primaryStage.show();
    }

    private static Button createGlyphButton(String glyphName, int sizeFactor) {
        Label lbl = new Label();
                // 使用自定义字体
        lbl.setFont(Font.font(GLYPH_FONTAWESOME.getFamily(), 8 * sizeFactor));
                // 创建并使用填充色(可选)
        Stop[] stops = new Stop[] { new Stop(0, Color.BLACK), new Stop(1, randomColor()) };
        LinearGradient lg1 = new LinearGradient(0, 0, 1, 0, true, CycleMethod.NO_CYCLE, stops);
        lbl.setText(String.valueOf(GLYPH_MAP.get(glyphName)));
        lbl.setTextFill(lg1);
        Button btn = new Button(glyphName, lbl);
        btn.setWrapText(true);
        btn.setContentDisplay(ContentDisplay.TOP);
        return btn;
    }

    private static Color randomColor() {
        return new Color(Math.random(), Math.random(), Math.random(), 1.0);
    }

To Compile and Run

$ javac FontawesomeWithJavaFX.java
$ java FontawesomeWithJavaFX

总结

在项目中为客户用 JavaFX 开发了桌面应用，并使用JavaFX Ant Tasks同时发布了 For OS X, For Windows, For Ubuntu 的应用。总体感受如下：

1. 打包发布产品体验好了很多。
2. JavaFX 内置了 Web Engine。可以进行混合编程。
3. 加入了 web 技术，比如： CSS
4. 视图数据感应可采用 Properties and Binding实现。不过没有 AngularJS 的自动双向绑定方便。
5. 更多请参考JavaFX Overview