Oracle Blog

Petr Dvorak's Weblog

Friday Dec 18, 2009

Today, I noticed that many new NetBeans users have a difficulty of implementing a file chooser functionality. Usually, you just write all the code by hand, but there is also a way how to achieve several goals using the designer in the NetBeans IDE.

This tutorial should demonstrate how to leverage the NetBeans GUI Builder for implementing a custom file chooser. As a setup, we will also create a small Java desktop application.

Step-by-step guide

Click Next, fill in some application name ("JFileChooserDemo") and make sure Basic Application is selected

Click Finish

At this moment, a new Java Desktop application with three important files is created:

JFileChooserDemoApp

JFileChooserDemoView

JFileChooserDemoAboutBox

Just as on this picture:

Double-click the JFileChooserDemoView to make sure it is opened in the designer.

Open the component palette (Ctrl+Shift+8).

Drag a new Menu Item (JMenuItem, from Swing Menus category) in the menu bar that was created by default.

Right-click this item in the designer and invoke Change Variable Name - rename the item to openFileMenuItem. Then, press Space (to start editing the text of the component that is selected in the designer) and change the text to "Open text file".

To set an action to this menu item, right click it and invoke Events>Action>Action Performed. A new method is generated, it is called for example openFileMenuItemActionPerformed - copy the name to the clipboard for a while.

Drag a Tool Bar (from Swing Containers category) to the designer and add one button (JButton, from Swing Controls) to the tool bar.

Change the button's text to "Open" by selecting it and pressing Space.

Rename both components' variable names again using the context menu, so that you don't have to stick with the ugly "jButton1"-like names.

Currently, you have an event handler for the "Open" menu item. To set the same event handler to the button, single-click the button and select Events tab in the Properties view. Paste the name of the method in the "actionPerformed" event and press Enter to confirm.

At this moment, the method "openFileMenuItemActionPerformed" (or similar name) is set as an event handler for both button in the toolbar and menu item.

Finally, add a JTextArea (Swing Controls) in the form (and rename the variable). The form should look like this:

So, now we have finished the basics. Let's add a JFileChooser to the form.

Open the inspector window if it is not opened (Window>Navigating>Inspector) and right-click Form JFileChooserDemoView node.

Invoke "Add From Palette>Swing Windows>File Chooser".

A JFileChooser is added in the inspector. Right-click the node and rename the variable to "fileChooser".

Note: You can also drag&drop the File Chooser from the palette to the white area of the GUI Builder - it will have the same result. It is a bit harder, though, because the default preview of the JFileChooser is rather big and you might end up with the window being inserted inside some of the panels, which is not what you want.

Note: If you don't create a Java Desktop Application or if you just have a JFrame form, you can right-click the "Other components" node instead of the "Form JFileChooserDemoView" node - it will add the JFileChooser component to the JFrame (to the JFrame class) but not in its visual part...

Now, you can click the JFileChooser in the inspector and edit some of its properties in the Properties view. For example, you can edit the title of the dialog by editing the dialogTitle property (change it to "This is open dialog").

To display the file chooser from your application, just paste this code to the openFileMenuItemActionPerformed method and press Ctrl+Shift+I to fix the imports (otherwise, there will be some errors in your code):

Note: Users who used to work with MS Visual Studio and .NET might be familiar with a quick but ugly way of making custom filters - typing extensions and descriptions of the filter with a vertical separator in a special property, like this: