Advanced Experiments with JavaScript, CSS, HTML, JavaFX, and Java

Posted by Geertjan on Oracle Blogs See other posts from Oracle Blogs or by Geertjan
Published on Mon, 2 Jul 2012 07:20:27 +0000 Indexed on 2012/07/02 9:20 UTC
Read the original article Hit count: 220

Filed under:

Once you're embedding JavaScript, CSS, and HTML into your Java desktop application, via the JavaFX browser, a whole range of new possibilities open up to you.

For example, here's an impressive page on-line, notice that you can drag items and drop them in new places:

http://nettuts.s3.amazonaws.com/127_iNETTUTS/demo/index.html

The source code of the above is provided too, so you can drop the various files directly into your NetBeans module and use the JavaFX WebEngine to load the HTML page into the JavaFX browser. Once the JavaFX browser is in a NetBeans TopComponent, you'll have the start of an off-line news composer, something like this:

WebView view = new WebView();
view.setMinSize(widthDouble, heightDouble);
view.setPrefSize(widthDouble, heightDouble);
webengine = view.getEngine();
URL url = getClass().getResource("index.html");
webengine.load(url.toExternalForm());
webengine.getLoadWorker().stateProperty().addListener(
        new ChangeListener() {
            @Override
            public void changed(ObservableValue ov, State oldState, State newState) {
                if (newState == State.SUCCEEDED) {
                    Document document = (Document) webengine.executeScript("document");
                    NodeList list = document.getElementById("columns").getChildNodes();
                    for (int i = 0; i < list.getLength(); i++) {
                        EventTarget et = (EventTarget) list.item(i);
                        et.addEventListener("click", new EventListener() {
                            @Override
                            public void handleEvent(Event evt) {
                                instanceContent.add(new Date());
                            }
                        }, true);
                    }
                }
            }
        });

The above is the code showing how, whenever a news item is clicked, the current date can be published into the Lookup. As you can see, I have a viewer component listening to the Lookup for dates.

© Oracle Blogs or respective owner

Related posts about /NetBeans IDE