Wednesday Oct 02, 2013

Thanks JavaFX: WYSIWYG HTML Editor for NetBeans IDE

In this very short screencast (a mere 44 seconds), you see one of my personal holy grails has come along quite far. It shows an initial implementation of integration between the JavaFX HTMLEditor component and the NetBeans IDE HTML Source Editor. Two way editing, synchronized between the two views (visual and source) is successfully demonstrated.

https://www.youtube.com/watch?v=BLkuQFUaI9A

However, rather than rewriting the entire source file when a change is made in the JavaFX HTMLEditor, which is what currently happens, and which explains the slight delay when switching to the source view, it would be better if only the change were to be written into the file. That's the next step in this integration and probably the most challenging one.

The key pieces of this solution, following on from my blog entry from yesterday, where "obj" is the FileObject that the MultiViewElement is viewing to the user:

@Override
public void componentDeactivated() {
    FileLock fileLock = null;
    OutputStreamWriter osw;
    try {
        fileLock = obj.lock();
        OutputStream fout = obj.getOutputStream(fileLock);
        OutputStream bout = new BufferedOutputStream(fout);
        osw = new OutputStreamWriter(bout, "UTF-8");
        osw.write(htmlEditor.getHtmlText());
        osw.flush();
        osw.close();
    } catch (IOException ex) {
    } finally {
        if (fileLock != null) {
            fileLock.releaseLock();
        }
    }
}

The above writes the current content of the JavaFX HTMLEditor into the file when the user switches to the source view.

In addition, I have implemented org.openide.filesystems.FileChangeListener on the MultiViewElement, with this implementation of fileChanged:

@Override
public void fileChanged(final FileEvent fe) {
    Platform.runLater(new Runnable() {
        @Override
        public void run() {
            try {
                htmlEditor.setHtmlText(fe.getFile().asText());
            } catch (IOException ex) {
            }
        }
    });
}

Tuesday Oct 01, 2013

JavaFX MultiViewElement

Here's my first attempt at integrating the visual JavaFX HTMLEditor on top of HTML files on the NetBeans Platform, e.g., NetBeans IDE.

All the code and note that the two sides aren't synchronized (yet):

import java.io.IOException;
import java.util.logging.Level;
import java.util.logging.Logger;
import javafx.application.Platform;
import javafx.embed.swing.JFXPanel;
import javafx.scene.Scene;
import javafx.scene.layout.StackPane;
import javafx.scene.web.HTMLEditor;
import javax.swing.Action;
import javax.swing.JComponent;
import javax.swing.JPanel;
import javax.swing.JToolBar;
import org.netbeans.core.spi.multiview.CloseOperationState;
import org.netbeans.core.spi.multiview.MultiViewElement;
import org.netbeans.core.spi.multiview.MultiViewElementCallback;
import org.openide.awt.UndoRedo;
import org.openide.filesystems.FileObject;
import org.openide.util.Lookup;
import org.openide.windows.TopComponent;

@MultiViewElement.Registration(displayName = "Visual",
        mimeType = {"text/xhtml", "text/html"},
        persistenceType = TopComponent.PERSISTENCE_NEVER,
        preferredID = "Visual",
        position = 1)
public class JavaFXMVE extends JPanel implements MultiViewElement {

    private FileObject obj;
    private JToolBar tb = new JToolBar();
    private static JFXPanel fxContainer;

    public JavaFXMVE(Lookup lkp) {
        this.obj = lkp.lookup(FileObject.class);
        assert obj != null;
        fxContainer = new JFXPanel();
        Platform.setImplicitExit(false);
        Platform.runLater(new Runnable() {
            @Override
            public void run() {
                createScene();
            }
        });
    }
    
    private void createScene() {
        HTMLEditor htmlEditor = new HTMLEditor();
        try {
            htmlEditor.setHtmlText(obj.asText());
        } catch (IOException ex) {
            Logger.getLogger(JavaFXMVE.class.getName()).log(Level.SEVERE, null, ex);
        }
        StackPane root = new StackPane();
        root.getChildren().add(htmlEditor);
        fxContainer.setScene(new Scene(root));
    }
    
    @Override
    public JComponent getVisualRepresentation() {
        return fxContainer;
    }

    @Override
    public JComponent getToolbarRepresentation() {
        tb.setFloatable(false);
        return tb;
    }

    @Override
    public Action[] getActions() {
        return new Action[0];
    }

    @Override
    public Lookup getLookup() {
        return obj.getLookup();
    }

    @Override
    public void componentOpened() {
    }

    @Override
    public void componentClosed() {
    }

    @Override
    public void componentShowing() {
    }

    @Override
    public void componentHidden() {
    }

    @Override
    public void componentActivated() {
    }

    @Override
    public void componentDeactivated() {
    }

    @Override
    public UndoRedo getUndoRedo() {
        return UndoRedo.NONE;
    }

    @Override
    public void setMultiViewCallback(MultiViewElementCallback callback) {
        callback.getTopComponent().setDisplayName(obj.getNameExt());
    }

    @Override
    public CloseOperationState canCloseElement() {
        return CloseOperationState.STATE_OK;
    }

}

If someone has ideas or code for synchronizing the two sides, don't be shy, leave a comment at the end of this blog entry!

Saturday Jul 13, 2013

Prototype of JavaFX Performance Analyzer on New Framework

Johannes Weigend, who will be at JavaOne again this year, has been prototyping a JavaFX version of his Software EKG application, which is an application performance analyzer created on the NetBeans Platform. Here's the original NetBeans Platform based application:

The prototype JavaFX version of the application (shown below) is developed on a lightweight OSGi-based rich-client application framework inspired by the NetBeans Platform. Currently it has a startup module, a window system, and a module system. Though there are the beginnings of other open source JavaFX frameworks which do something similar, Johannes couldn't identify one that fit his needs, which makes sense considering that application frameworks for JavaFX are all pretty new anyway, and so he led the development of a new one, as a bachelor thesis at the University of Applied Sciences Rosenheim where he teaches. Plans are to open source the framework in August of this year.

Seeing work being done, like the above, on application frameworks for JavaFX, is really promising. Given the various application frameworks available in the Swing world, it's still pretty hard to choose JavaFX over Swing when you're creating pure data-oriented software where the enhanced appearance provided by JavaFX is not a functional requirement. Productivity gains on the coding level, in the sense that JavaFX does well in solving the cumbersomeness of Swing coding, are never going to be significant enough to outweigh the productivity gains of fully fledged application frameworks, with all their prebuilt pluggable components, years of developer hours, and design patterns, in the same way as the fact that matchsticks are now better than before is not going to make me switch from lego to matchsticks when I want to build a toy house really fast and reliably. But, the combination of knowing (or hoping or believing or betting) that "JavaFX is the future" (always bear in mind that nothing is the future until the future is the present that creates a different future) with the availability of fullblown application frameworks, makes JavaFX a serious alternative to Swing, in the context of large data-oriented software systems, as opposed to games and animation-oriented applications where JavaFX is the obvious choice already.

Still, it's hard to bask in the shade of a sapling when you know there's a sturdy oak tree nearby.

Saturday May 18, 2013

Towards an Integrated WYSIWYG JavaFX WebView

Last week I blogged about the free and open source EPUB Open Toolbox which I am creating for publishers and authors. Officially, it is now known as Fosfor, since it is initially being developed for the Fosfor Uitgeverij, that is, an on-line e-book publisher based in Amsterdam, as a replacement for Sigil. And this is yet another example of how the web and mobile worlds need the desktop—just for fun you should ask a publisher or author some time: "Do you ever see yourself editing and managing books on your mobile phone?"

At the time, when I started working on this, I was using the SHEF framework as the basis of a WYSIWYG editor. That had its shortcomings and I couldn't help thinking that the JavaFX WebView would be a more natural fit.

So, here we are a week later, with the JavaFX WebView doing a superb job rendering the XHTML pages of EPUB projects:

It simply looks awesome. No credit whatsoever for me on that score, since I'm simply reusing the JavaFX WebView, the creation of which I had nothing to do with. Images are rendered, which wasn't the case with SHEF, the performance is great, and the whole thing just looks professional, like a commercial off the shelf product that took years to develop, rather than days. Aside from the rendering, there's a lot of functionality built into the JavaFX WebView, e.g., when you right-click on an image, you get popup menus for opening the image in a new view, when you right-click on a URL, you can open the URL in a new view, etc.

But, I don't want a web browser. I want a WYSIWYG editor. The start is clearly there, i.e., there's a JavaFX toolbar containing JavaFX buttons, each of which will be, once the prototyping phase is over, provided by different NetBeans modules. For example, here's the color chooser in action—select a piece of text, invoke the color chooser, select a color, and immediately the font of the selected text is changed to the selected color:

Still many things to do. Especially, synchronizing changes back into the source file. Once that's done, all the rest should be relatively painless. Not possible, right now, to type in the WebView, but I have a pretty good idea how to solve that. My insight on this is that there's no difference between adding characters and adding colors to selected text. And it's also possible to get hold of the cursor in the JavaFX WebView, so the basics for typing are already included in the app. With that solved, its all about adding more tools, e.g., a bold tool, italics tool, font size, and so on.

I've shared the above pics with Sean Phillips who works on NASA software (he's been mentioned in this blog several times, has a lot of JavaFX/NetBeans Platform articles on NetBeans Zone, and hopefully will be at JavaOne this year) and he responded pretty positively from his perspective at NASA:

Based on what you have said and the limited images I've seen, this could be used as a technical document markup tool. Several of the Ground System missions I am associated with have home brew tools that generate documentation. Office tools like MS Word and the like can't really be used because a significant portion of the documentation is based around data produced by custom mission specific software systems. As a result, someone ends up writing code that generates Latex or HTML as a custom one off. I wonder if there could be a future in a tool like what you are developing that could be used towards a goal like what I have just described.

Part of my reason for blogging about this is to ask—are there developers out there who have tools written in JavaFX (or who would like to start doing so) that are relevant to the above and could be contributed to the free and open source Fosfor project?

Sunday Sep 23, 2012

SteelSeries & JavaFX External Control via Tinkerforge

The first photo shows me controling a JavaFX chart by rotating a Tinkerforge device, while the other two are of me using code by Christian Pohl from Nordhorn, Germany, to show components from Gerrit Grunwald's SteelSeries library being externally controled by Tinkerforge devices:

What these examples show is that you can have a robot (i.e., an external device), of some kind, that can produce output that can be visualized via JavaFX charts and SteelSeries components.

For example, imagine a robot that moves around while collecting data on the current temperature throughout a building. That's possible because a temperature device is part of Tinkerforge, just like the rotating device and distance device shown in the photos above. The temperature data collected by the robot would be displayed in various ways on a computer via, for example, JavaFX charts and SteelSeries components.

From there, reports could be produced and adjustments could be made to the robot while it continues moving around collecting temperature data. The fact that Tinkerforge has Wifi support makes a scenario such as described here completely possible to implement.

And all of this can be programmed in Java, without very much work, since the Java bindings for Tinkerforge are simple to use, such as shown in yesterday's blog entry. Related to that, the next thing I want to work on is... figuring out how to deploy an application in NetBeans IDE by turning the Tinkerforge rotating device! That would be pretty cool, and very useful: just do some coding in your application, turn the rotation device, and then the application is deployed. Implementation will be simple, just integrate the NetBeans AntLogger, combined with ActionUtils, with Tinkerforge!

Saturday Sep 22, 2012

Tinkerforge Rotation/LCD & JavaFX Plans

The first time I integrated two Tinkerforge bricklets, the day before yesterday, was pretty cool:
import com.tinkerforge.BrickMaster;
import com.tinkerforge.BrickletLCD20x4;
import com.tinkerforge.BrickletRotaryPoti;
import com.tinkerforge.IPConnection;
import java.util.Calendar;

public class TFConnectionDemo {

    private static final String HOST = "localhost";
    private static final int PORT = 4223;
    private static final String MASTERBRICKUID = "somethingabc";
    private static final String LCDUID = "somethingabc";
    private static final String ROTIUID = "somethingabc";
    private static IPConnection ipc;
    private static BrickMaster master = new BrickMaster(MASTERBRICKUID);
    private static BrickletLCD20x4 lcd = new BrickletLCD20x4(LCDUID);
    private static BrickletRotaryPoti poti = new BrickletRotaryPoti(ROTIUID);

    public static void main(String[] args) {

        try {
            ipc = new IPConnection(HOST, PORT);
            ipc.addDevice(master);
            ipc.addDevice(lcd);
            ipc.addDevice(poti);
            poti.setPositionCallbackPeriod(50);
            poti.addListener(new BrickletRotaryPoti.PositionListener() {
                @Override
                public void position(short position) {
                    lcd.clearDisplay();
                    Calendar cal = Calendar.getInstance();
                    lcd.writeLine((short) 0, (short) 0, cal.getTime().toString());
                    lcd.writeLine((short) 1, (short) 0, "Rotation: " + position);
                }
            });
        } catch (Exception e) {
        }
    }
    
}

The result is that the display text in the LCD bricklet changes while I turn the rotation bricklet:

Now imagine that you have some JavaFX charts and, while you turn the rotation bricklet (i.e., the dial thing that I'm turning above), the values of the charts change. That would be pretty cool because you'd be able to animate the JavaFX charts by rotating an object externally, i.e., without even touching the keyboard. That would be pretty cool to see and shouldn't be hard to implement.

Friday Sep 21, 2012

Tinkerforge Plugin for NetBeans IDE 7.2

Here's the start of a simple designer for Tinkerforge:

Items in the palette come from a live Tinkerforge connection. Drag and drop palette items representing bricks and bricklets and connect them together and then generate a Java class that uses those parts. The aim is to be able to introduce logic via the designer above, i.e., "if the temperature is below X then display Y in the LCD display".

It is still in an early prototype stage so isn't usable in the real world yet. Here's the background to how it all came about:

http://netbeans.dzone.com/nb-tinkerforge-course-report

If anyone wants to join me in working on this plugin, the sources are here:

http://java.net/projects/nb-api-samples/sources/api-samples/show/versions/7.2/misc/TinkerForgeNode

Monday Apr 23, 2012

CSS Styling for the NetBeans Platform

What's the difference between these two NetBeans Platform applications?

The difference between the two screenshots is that the second is styled by a stylesheet with this content:

.digital-clock {
    -fx-effect: dropshadow(two-pass-box , darkgray, 10, 0.0 , 4, 5);
}

The file containing the content above is named "digitalClock.css". The clock is a JavaFX component, in fact, one of the samples you get with NetBeans IDE. When the JavaFX Scene is created, the final line below sets the stylesheet above on the clock:

Platform.runLater(new Runnable() {
    @Override
    public void run() {
        Scene scene = new Scene(root);
        setScene(scene);
        scene.getStylesheets().add(DigitalClock.class.getResource("digitalClock.css").toExternalForm());
    }
});

Next, in the clock definition, notice the final statement below:

Clock clock = new Clock(Color.ORANGERED, Color.rgb(50, 50, 50));
clock.setLayoutX(45);
clock.setLayoutY(186);
clock.getTransforms().add(new Scale(0.83f, 0.83f, 0, 0));
clock.getStyleClass().setAll(DEFAULT_STYLE_CLASS);

The reference that you see above is defined as follows, pointing to the element you see in the CSS stylesheet above:

private static final String DEFAULT_STYLE_CLASS = "digital-clock";

Thanks to Toni for this article, which showed me the way to the code above. As a result, we can now style NetBeans Platform applications with CSS!

Sunday Feb 19, 2012

JIDE, JFreeChart, JavaFX, and Enterprise Applications

The two Java libraries I encounter most when visiting an organization that builds their software on the NetBeans Platform are... JFreeChart and JIDE.

Now, that's not a coincidence. Typically large enterprise applications are created on the NetBeans Platform, so at some point you'll need charts and at some other point you're going to be very happy if you can reuse predefined business components. Both save a lot of time, both have many years of experience contained within them, both are well supported with large communities.

It seems to me that JFreeChart is in an interesting position since JavaFX includes a set of charts. I.e., dynamic charts, that go up and down, and are animated, as the values in the chart change. Now that's cool. I can see the business case of JavaFX simply from its charting support.

However, JIDE has the 'problem' that it's components are not free and open sourced. Or so I thought, until recently when Joris Snellenburg from the VU University Amsterdam demonstrated the JIDE range slider, which is really cool:

(Interstingly, JIDE's first JavaFX component is a JavaFX version of the above component, as explained here.)

Even when I saw the above component being demonstrated, I somehow assumed that all of JIDE's components require some kind of licensing scenario, but that's not the case at all: "The JIDE Common Layer is dual-licensed. The two licenses are GPL with classpath exception and free commercial license." And the range slider is one of the 30 components that is part of the JIDE Common Layer.

Take a look here, I know I'll be taking a closer look at some of these components and show how to integrate them in NetBeans Platform based applications:

http://www.jidesoft.com/products/oss.htm

Friday Mar 19, 2010

Modular JavaFX Development?

Reading this new article on NetBeans Zone, re JavaFX development on the NetBeans Platform:

...I envision a world of applications that include JavaFX + EMF + OSGi, developed in NetBeans IDE!

About

Geertjan Wielenga (@geertjanw) is a Principal Product Manager in the Oracle Developer Tools group living & working in Amsterdam. He is a Java technology enthusiast, evangelist, trainer, speaker, and writer. He blogs here daily.

The focus of this blog is mostly on NetBeans (a development tool primarily for Java programmers), with an occasional reference to NetBeans, and sometimes diverging to topics relating to NetBeans. And then there are days when NetBeans is mentioned, just for a change.

Search

Archives
« April 2014
SunMonTueWedThuFriSat
  
12
13
14
24
25
26
27
28
29
30
   
       
Today