JavaFX Filesystem Viewers


JavaFX 8 has 2 controls (=dialogs) to browse the filesystem

  • javafx.stage.DirectoryChooser native_dir
  • javafx.stage.FileChooser native_file

who create native resource dialogs but if you want to integrate a directory view in your application and/or you want custom features like a file preview those dialogs are of no help.

I had just this use case and so I implemented 3 different controls:

  • org.eclipse.fx.ui.controls.filesystem.DirectoryTreeView: Display a directory structure as a tree
  • org.eclipse.fx.ui.controls.filesystem.DirectoryView: Display the contents of a directory – currently only a list view is available
  • org.eclipse.fx.ui.controls.filesystem.ResourcePreview: Display preview informations of a file e.g. a thumb for images

If you combine them you get a nice file browser you can integration just anywhere

screen_dirview

Usage is straight forward:

package org.eclipse.fx.ui.controls.sample;

import java.nio.file.Paths;

import javafx.application.Application;
import javafx.beans.Observable;
import javafx.collections.FXCollections;
import javafx.scene.Scene;
import javafx.scene.control.SplitPane;
import javafx.stage.Stage;

import org.eclipse.fx.ui.controls.filesystem.DirectoryTreeView;
import org.eclipse.fx.ui.controls.filesystem.DirectoryView;
import org.eclipse.fx.ui.controls.filesystem.IconSize;
import org.eclipse.fx.ui.controls.filesystem.ResourceItem;
import org.eclipse.fx.ui.controls.filesystem.ResourcePreview;
import org.eclipse.fx.ui.controls.filesystem.RootDirItem;

public class DirectoryViewSample extends Application {

  private static RootDirItem rootDirItem;

  @Override
  public void start(Stage primaryStage) throws Exception {
    rootDirItem = ResourceItem.createObservedPath(
      Paths.get("/Users/tomschindl/Desktop"));

    DirectoryTreeView tv = new DirectoryTreeView();
    tv.setIconSize(IconSize.MEDIUM);
    tv.setRootDirectories(
      FXCollections.observableArrayList(rootDirItem));

    DirectoryView v = new DirectoryView();
    v.setIconSize(IconSize.MEDIUM);

    tv.getSelectedItems().addListener( (Observable o) -> {
      if( ! tv.getSelectedItems().isEmpty() ) {
        v.setDir(tv.getSelectedItems().get(0));
      } else {
        v.setDir(null);
      }
    });

    ResourcePreview prev = new ResourcePreview();
    v.getSelectedItems().addListener((Observable o) -> {
      if( v.getSelectedItems().size() == 1 ) {
        prev.setItem(v.getSelectedItems().get(0));
      } else {
        prev.setItem(null);
      }
    });

    SplitPane p = new SplitPane(tv,v, prev);
    p.setDividerPositions(0.3,0.8);

    Scene s = new Scene(p,500,500);
    primaryStage.setScene(s);
    primaryStage.show();
  }

  public static void main(String[] args) {
    Application.launch(args);
    rootDirItem.dispose();
  }
}
This entry was posted in e(fx)clipse. Bookmark the permalink.

12 Responses to JavaFX Filesystem Viewers

  1. As a user, I would much prefer the native file dialog to this version. The original native dialog that you show has a list of common folders on the left side (e.g. Downloads, Documents), different views (including Column View which already includes a preview thumbnail), tags, and a search bar. All of those are lacking in the new dialog. Moreover, it just looks odd and is likely to confuse end users who would be much more comfortable with a native dialog.A

    While I suppose it’s good to know all of the options that are available, I think that it would be better to just stick with the native dialog in any apps.

    • Tom Schindl says:

      I can see your point but maybe I was not clear enough the viewer and the dialogs solve very different problems and there’s always a need to browse a file system inside applications whereas I’d also use the native dialogs e.g. to open files.

  2. Pingback: JavaFX links of the week, January 19 // JavaFX News, Demos and Insight // FX Experience

  3. George Moralis says:

    nice work! will that be open source?

  4. mohsin says:

    how to use this tutorial in Netbeans JavaFx

  5. mohsin says:

    Thank you very much !

  6. Laskawiec says:

    Interesting job but I have NPE when I select some folder which contains hidden folder (like AppData for example):
    Exception in thread “JavaFX Application Thread” java.lang.NullPointerException
    at org.eclipse.fx.ui.controls.filesystem.skin.DirectoryTreeViewSkin.handleDirLabel(DirectoryTreeViewSkin.java:83)
    at org.eclipse.fx.ui.controls.filesystem.skin.DirectoryTreeViewSkin$$Lambda$288/1139353194.apply(Unknown Source)
    at org.eclipse.fx.ui.controls.tree.SimpleTreeCell.updateItem(SimpleTreeCell.java:67)

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s