前提
某一天點開掘金的寫作介面的時候，發現了內建Markdown編輯器有一個Github的圖示，點進去就是一個開源的Markdown編輯器專案bytemd（https://github.com/bytedance/bytemd）：
這是一個NodeJs專案，由位元組跳動提供。聯想到之前業餘的時候做過一些Swing或者JavaFx的Demo，記得JavaFx中有一個元件WebView已經支援Html5、CSS3和ES5，這個元件作為一個嵌入式瀏覽器，可以輕鬆地渲染一個URL裡面的文字內容或者直接渲染一個原始的Html字串。另外，由於原生的JavaFx的視覺效果比較醜，可以考慮引入Swing配合IntelliJ IDEA的主題提供更好的視覺效果。本文的程式碼基於JDK11開發。
引入依賴
很多人吐槽過Swing元件的視覺效果比較差，原因有幾個：
- 技術小眾，現在有更好的元件進行混合開發和跨平臺開發
- 基於上一點原因，導致很少人會去開發
Swing元件的UI，其實Swing的每個元件都可以重新實現UI的表現效果 compose-jb（JetBrains）元件很晚才釋出出來，剛好碰上Swing官方停止維護，後面應該更加少人會使用Swing做GUI開發
使用Swing並且成功了的方案最知名的就是JetBrains全家桶。目前來看，為了解決這個"醜"的問題，現在有比較簡單的處理方案：
- 方案一：使用
compose-jb（名字有點不好聽，官方倉庫為https://github.com/JetBrains/compose-jb）開發，這個是JetBrains系列的通用元件，基於Swing做二次封裝，不過必須使用語言Kotlin，有點強買強賣的嫌疑，這列貼兩個官方的圖參考一下：
- 方案二：
FormDev（之前推出過Swing佈局器的開發商，官網https://www.formdev.com/flatlaf）提供的FlatLaf（Flat Look and Feel），提供了Light Dark IntelliJ and Darcula themes，而且依賴少，使用起來十分簡單，個人認為當前這個是Swing UI元件視覺效果首選
引入FlatLaf和OpenFx的依賴：
<dependency>
<groupId>com.formdev</groupId>
<artifactId>flatlaf</artifactId>
<version>1.5</version>
</dependency>
<dependency>
<groupId>com.formdev</groupId>
<artifactId>flatlaf-intellij-themes</artifactId>
<version>1.5</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-media</artifactId>
<version>11.0.2</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-swing</artifactId>
<version>11.0.2</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-web</artifactId>
<version>11.0.2</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-base</artifactId>
<version>11.0.2</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-graphics</artifactId>
<version>11.0.2</version>
</dependency>
<dependency>
<groupId>org.openjfx</groupId>
<artifactId>javafx-controls</artifactId>
<version>11.0.2</version>
</dependency>
佈局和實現
佈局的實現比較簡單：
最終的H5文字渲染在WebView元件中（JFXPanel是JavaFx => Swing的介面卡，WebView是JavaFx的元件，但是這裡使用的外層容器都是Swing元件），具體的編碼實現如下：
public class MarkdownEditor {
private static final int W = 1200;
private static final int H = 1000;
private static final String TITLE = "markdown editor";
public static String CONTENT = "<!DOCTYPE html>\n" +
"<html lang=\"en\">\n" +
"<head>\n" +
" <meta charset=\"UTF-8\"/>\n" +
" <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"/>\n" +
" <title>ByteMD example</title>\n" +
" <link rel=\"stylesheet\" href=\"https://unpkg.com/bytemd/dist/index.min.css\"/>\n" +
" <link rel=\"stylesheet\" href=\"https://unpkg.com/github-markdown-css\"/>\n" +
" <script src=\"https://unpkg.com/bytemd\"></script>\n" +
" <script src=\"https://unpkg.com/@bytemd/plugin-gfm\"></script>\n" +
" <script src=\"https://unpkg.com/@bytemd/plugin-highlight\"></script>\n" +
" <style>\n" +
" .bytemd {\n" +
" height: calc(100vh - 50px);\n" +
" }\n" +
"\n" +
" .footer {\n" +
" width: 100%;\n" +
" height: 30px;\n" +
" left: 0;\n" +
" position: absolute;\n" +
" bottom: 0;\n" +
" text-align: center;\n" +
" }\n" +
" </style>\n" +
"</head>\n" +
"<body>\n" +
"<div class=\"footer\">\n" +
" <a href=\"https://github.com/bytedance/bytemd\">bytemd</a>\n" +
"</div>\n" +
"<script>\n" +
" const plugins = [bytemdPluginGfm(), bytemdPluginHighlight()];\n" +
" const editor = new bytemd.Editor({\n" +
" target: document.body,\n" +
" props: {\n" +
" value: '# heading\\n\\nparagraph\\n\\n> blockquote',\n" +
" plugins,\n" +
" },\n" +
" });\n" +
" editor.$on('change', (e) => {\n" +
" editor.$set({value: e.detail.value});\n" +
" });\n" +
"</script>\n" +
"</body>\n" +
"</html>";
static {
// 初始化主題
try {
UIManager.setLookAndFeel(FlatIntelliJLaf.class.getName());
} catch (Exception e) {
throw new IllegalStateException("theme init error", e);
}
}
private static JFrame buildFrame(int w, int h, LayoutManager layoutManager) {
JFrame frame = new JFrame();
frame.setLayout(layoutManager);
frame.setTitle(TITLE);
frame.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
frame.setSize(w, h);
Toolkit toolkit = Toolkit.getDefaultToolkit();
int x = (int) (toolkit.getScreenSize().getWidth() - frame.getWidth()) / 2;
int y = (int) (toolkit.getScreenSize().getHeight() - frame.getHeight()) / 2;
frame.setLocation(x, y);
return frame;
}
private static void initAndDisplay() {
// 構建窗體
JFrame frame = buildFrame(W, H, new BorderLayout());
JFXPanel panel = new JFXPanel();
Platform.runLater(() -> {
panel.setSize(W, H);
initWebView(panel, CONTENT);
frame.getContentPane().add(panel);
});
frame.setVisible(true);
}
public static void main(String[] args) {
SwingUtilities.invokeLater(MarkdownEditor::initAndDisplay);
}
private static void initWebView(JFXPanel fxPanel, String content) {
StackPane root = new StackPane();
Scene scene = new Scene(root);
WebView webView = new WebView();
WebEngine webEngine = webView.getEngine();
webEngine.setJavaScriptEnabled(true);
webEngine.loadContent(content);
root.getChildren().add(webView);
fxPanel.setScene(scene);
}
}
H5文字來源於bytemd的原生JS實現例子：
所有程式碼加上註釋大概120多行。使用JDK11執行，結果如下：
目前有2個沒有解決的問題（也有可能是）：
JS的動作觸發有輕微延遲WebView元件初始化比較慢
小結
Oracle JDK官方已經宣佈不再維護Swing專案，按照一般的尿性後面有可能從JDK中移除，也許是因為它體現不了自身的價值（低情商：不賺錢）。Swing的開發中佈局是比較反人類的，一般可能一個Swing專案佈局會耗費90%以上的時間，原生元件的UI設計看上去比較"醜"，沒有豐富的擴充套件元件和活躍的社群，加上現在有其他更好的跨平臺開發方案如Qt、React Native和Flutter等等，Swing被遺忘是一個既定的結局。往後除了一枝獨秀的JetBrains，Swing的結局就是成為少數人業務的愛好，成為JDK GUI程式設計愛好者的收藏品。
Demo原始碼：
（本文完 e-a-20210815 c-1-d）