Integrating JavaFX 2.0 WebView into a Swing Java SE 6 Application

scravy picture scravy · Dec 4, 2011 · Viewed 24.3k times · Source

I was looking for a way to integrate a Web-Browser-Component in an existing Swing-Application and found WebView for Java FX 2.0. Furthermore I found a blog post on java.net showing how to integrate a Java FX component into a Swing Application . So I guess it might be doable, but I haven't tried yet.

I'm curious, do you think this is a good approach? Are there any better solutions? Is it even doable? Is maybe something prebundled out there?

The motivation is: I want to integrate some WebBrowser-whatever into an existing Swing-Application, the long-term goal being to get rid of the whole Java Desktop Application at all, replacing it with a web-based solution (the plan is to slowly convert existing aspects into webpages which are then displayed in the WebBrowser-Component until nothing is left of the swing application except for the browser-skeleton). The backend of course remains Java :-)

I haven't tried yet since I simply lack the time to integrate JavaFX with my project (its a job, we're just exploring alternatives fpr the long run), so I better ask before I get burned.

Answer

scravy picture scravy · Dec 7, 2011

It is very well possible!

One has to install JavaFX 2.0, and somehow manage to have jfxrt.jar in the Classpath.

The following code renders a JFXPanel inside a JFrame. The JFXPanel contains a WebView which loads google.com.

However, at least on my machine, the WebView feels rather sloppy. I'm working on Mac OS X 10.6; JavaFX 2.0 is still in beta for OS X.

Alternatives I found include MozSwing, which looked very promising and feels quite fast actually. Sadly the project is not being developed any further since 2008 and the bundled XUL runner is rather old (no new fancy html 5).

Both approaches are a nightmare to include via maven, you better setup your own local repository.

import java.awt.Dimension;
import java.awt.Point;

import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.web.WebEngine;
import javafx.scene.web.WebView;

import javax.swing.JButton;
import javax.swing.JFrame;
import javax.swing.SwingUtilities;

public class JavaFX {

    /* Create a JFrame with a JButton and a JFXPanel containing the WebView. */
    private static void initAndShowGUI() {
        // This method is invoked on Swing thread
        JFrame frame = new JFrame("FX");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

        frame.getContentPane().setLayout(null); // do the layout manually

        final JButton jButton = new JButton("Button");
        final JFXPanel fxPanel = new JFXPanel();

        frame.add(jButton);
        frame.add(fxPanel);
        frame.setVisible(true);

        jButton.setSize(new Dimension(200, 27));
        fxPanel.setSize(new Dimension(300, 300));
        fxPanel.setLocation(new Point(0, 27));

        frame.getContentPane().setPreferredSize(new Dimension(300, 327));
        frame.pack();
        frame.setResizable(false);

        Platform.runLater(new Runnable() { // this will run initFX as JavaFX-Thread
            @Override
            public void run() {
                initFX(fxPanel);
            }
        });
    }

    /* Creates a WebView and fires up google.com */
    private static void initFX(final JFXPanel fxPanel) {
        Group group = new Group();
        Scene scene = new Scene(group);
        fxPanel.setScene(scene);

        WebView webView = new WebView();

        group.getChildren().add(webView);
        webView.setMinSize(300, 300);
        webView.setMaxSize(300, 300);

            // Obtain the webEngine to navigate
        WebEngine webEngine = webView.getEngine();
        webEngine.load("http://www.google.com/");
    }

    /* Start application */
    public static void main(final String[] args) {
        SwingUtilities.invokeLater(new Runnable() {
            @Override
            public void run() {
                initAndShowGUI();
            }
        });
    }
}