Netbeans/C2/Adding-a-File-Chooser/English

From Script | Spoken-Tutorial
Revision as of 18:09, 27 November 2012 by Chandrika (Talk | contribs)

(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Title­ of script: Adding a File Chooser to a Java Application

Author: Sindhu

Keywords: file chooser, JFileChooser, JFileChooser Demo, Swing Appli­cations, video tutorial

Resources for "Adding a File Chooser to a Java Application"


Visual Cue
Narration
Slide 1

Welcome

Hello.


Welcome to the tutorial on Adding a File Chooser to a Java Application.

Slide 2

Lesson Outline

In this tutorial, we will
  • Create the application
  • Create the application form
  • Add the File Chooser
  • Configure the File Chooser
  • Run the application


Slide 3

System Setup

For this demonstration, I am using the Linux Operating System, Ubuntu v12.04


and Netbeans IDE v7.1.1

Slide 4

Introduction

  • To add a file chooser to a Java Application
  • using the javax.swing.JFileChooser component
  • To create a small Java application
  • that loads a .txt file into a Text Area


In this tutorial, we will learn to add a file chooser to a Java Application using the javax.swing.JFileChooser component.


As a part of this exercise, we will learn to create a small Java application that loads a .txt file into a Text Area.

Creating the Application


From the Menu bar >> choose File >> New Project

Let us first create the Java Application:

Launch the IDE.


From the main menu, choose File and New Project

In the New Project Wizard, select Java >> Java Application >> click Next Choose the Java category and the Java Application project type.


And click Next.

In the Project Name field, type JFileChooserDemo In the Project Name field, let's type JFileChooserDemo.
Uncheck the Create Main Class checkbox. Clear the Create Main Class checkbox.
Point to / Check the Set as Main Project checkbox Make sure that the Set as Main Project checkbox is selected.
Click Finish. Click Finish.
Creating the Application Form


In the Projects window >> right-click Source Packages node >> New >> Other

Here, we will create the JFrame container and add a few components to it.


Right click on the Source Packages node.


Choose New > Other.

Choose Swing GUI forms >> JframeForm


Click Next.

Choose the Swing GUI Forms category and the JFrameForm type.


Click Next.

In the class name field, type >> JfileChooserDemo For Class Name, type JFileChooserDemo.
In the Package field, type >> jfilechooserdemo.resources >>

Click Finish.

In the Package field, type jfilechooserdemo.resources.


Click Finish.

In the Properties window >> select Title property >> type>> Demo Application >> Press Enter In the Properties window, select the Title property.


And type Demo Application.


Press Enter to confirm.

Focus on Palette manager >> on RHS of IDE In the Palette, open the Swing Menus category.



To add components to the JFrame Form


In the palette >> select Menu Bar component >> drag and drop onto jframe

Select the Menu Bar component and drag it to the top left corner of the Jframe.
In the jframe >> right-click on Edit menu item >>click Delete Right-click the Edit item of the Menu Bar component.


Select Delete in the context menu.



Next let us add a menu item that allows to open the FileChooser from the running application.
Click on the Menu Bar in the Design view to keep it selected Make sure the Menu Bar is selected before you drag another Menu Item here.
In the palette >> Swing menus category >> select Menu Item >> drag and drop onto File menu item in the jframe In the Swing Menus category in the Palette, select a new Menu Item (JmenuItem1).


Drag it to the Menu Bar, and drop it onto the File item of the Menu Bar.

In the jframe >> right-click on jMenuItem1 >> choose Change Variable Name Right click jMenuItem1 in the Design view.


Choose Change Variable Name from the context menu.

Rename item >> Open >> click OK Rename the item to Open and click OK.
Click on >> jMenuItem1 >> press space bar Make sure that the jMenuItem1 is still selected in the Design view.

Press the Space bar to edit the text of the component.

Type >> Open >> press enter Change the text to Open and press Enter to confirm.
Right-click on Open >> choose Events >> Action >> action Performed Specify the action handler for the Open menu item.


Right click the Menu Item Open and choose Events, Action, Action Performed from the context menu.



Mode changes to Source view The GUI Builder automatically switches to the source view.


A new event handler method OpenActionPerformed() is generated.

Click on Design button on top of workspaceClick on Design button on top of workspace Let us switch back to the Design view.


Let's add a menu item to exit the File Chooser.



In the palette >> Swing Menus category >> select Menu Item >> drag and drop below Open menu item in jframe In the Palette, choose Swing Menus category.


Select Menu Item (JmenuItem1).


Drag it to the Menu Bar below the Open menu item on the form.

Drag jMenuItem1 to a position below the Menu Bar until you notice the dotted orange line below the Open menu item Notice the orange highlighting that indicates where the JmenuItem1 is going to be placed.
Right-click on jMenuItem1 >> choose Change Variable Name Right click jMenuItem1 in the Design View.


Choose Change Variable Name from the context menu.

Type >> Exit >> click OK Rename the item to Exit and click on OK.
Click on >> jMenuItem1 >> press space barMode changes to Source view Make sure that the jMenuItem1 is still selected in the Design View.



Press space bar Press the Space bar to edit the text of the component
Type >> Exit >> press enter Change the text to Exit and press Enter to confirm.
Right-click on Open >> choose Events >> Action >> action Performed Specify the action handler for the Exit menu item.


Right click the menu item Exit.


Choose Events, Action, Action Performed() from the context menu.

Mode changes to Source view The GUI Builder automatically switches to the Source view.


A new event handler method named ExitActionPerformed() is generated.

Focus on ExitActionPerformed >> in the Navigator/Inspector window on LHS of IDE The ExitActionPerformed node appears in the Navigator window below the OpenActionPerformed() node.
choose Window > Navigating > Inspector (or Navigator) If you cannot view your Navigator,


go to the Window menu in the menu bar,


choose Navigating and Navigator.

Here, you can see the ExitActionPerformed node appearing above the OpenActionPerformed node.
In the Source mode>> under ExitActionPerformed >> type System.exit(0); To make the Exit menu item work,


let us include the statement System.exit(0); into the ExitActionPerformed() method body.

Click on Design button on top of workspace Switch back into Design mode.
In the palette >> Swing Controls category >> select Text Area >> drag and drop onto jframe form From the Swing Controls category of the Palette, drag a Text Area (JtextArea) onto the form.
Resize the text area >> click on handlers >> drag to resize Resize the added component to make room for the text displayed by the File Chooser later.



Right-click on text area item >> choose Change Variable Name >> type textarea Rename the variable as textarea.


Let us next add the actual File Chooser.

choose Window > Navigating > Inspector (or Navigator) If your Navigator window is not open, choose Window, Navigating, Inspector (or Navigator) to open it.



In the navigator >> right-click on Jframe node In the Navigator, right click the Jframe node.
Choose Add From Palette > Swing Windows > File Chooser Choose Add From Palette, Swing Windows, and File Chooser from the context menu.
In the navigator >> focus on jFileChooser item You can notice in the Navigator that a JfileChooser was added to the form.
Right-click on jfileChooser node>> choose Change Variable Name >> type fileChooser Right click the JfileChooser node and rename the variable to fileChooser.


Click OK.

We have now added the File Chooser.


The next step is to configure the File Chooser to display the title that you want.


We will also add a custom file filter, and integrate the File Chooser into your application.

Configuring the File Chooser:

implementing the Open Action


in the navigator window >> click on JfileChooser >> focus on Properties window on RHS

Click to select the JfileChooser in the Navigator window.


Now let's edit its properties in the Properties dialog box.

Select dialogTitle property >> type This is my open dialog >> press enter In the Properties window below the Palette,


change the 'dialogTitle' to 'This is my open dialog'.


Press Enter to confirm.

Now switch to the Source mode.
Show code snippet in gedit


Refer file: OpenActionPerformed.java

Now, to integrate the FileChooser into your application.


I have an existing code snippet, which I will copy and paste into the existing OpenActionPerformed() method.



Narration only This example reads the file contents and displays them in the TextArea.
Highlight line >> getSelectedFile() >> in code snippet We will now call the FileChooser's getSelectedFile() method to determine which file the user has clicked.
copy >> paste inside OpenActionPerformed() method


I will copy this code onto my clipboard, and in the Source view of the IDE, paste it inside the OpenActionPerformed method.
If errors >> right-click in source editor >> select >> Fix Imports If the editor reports errors in your code, right click anywhere in the code and select Fix Imports.
Switch to deign mode >> select FileChooser in navigator window Now, let us add a custom file filter that makes the File Chooser display only .txt files.
Switch to the Design mode >> in the Navigator window >> click on FileChooser Switch to the design mode and select the FileChooser in the Navigator window.
Focus on properties window on RHS >> select File Filter property >> click the ellipsis button In the Properties window, click the ellipsis button next to the File Filter property.
In the File Filter window >> select Custom code In the File Filter dialog box, select Custom Code from the combo-box.
In the text field >> type>> MyCustomFilter() >> click OK Type new MyCustomFilter() in the text field.


Click OK.

To make the custom code work, we will write the MyCustomFilter class.


This inner or outer class will extend the FileFilter class.

Show code snippet >> copy >> paste in the source editor below import statements


(refer file: MyCustomFilter.java)

I will copy and paste this code snippet into the source of our class below the import statements.


This inner or outer class will extend the FileFilter class.



Running the application


right click on JfileChooserDemo project node >> select Run

Right click the JFileChooserDemo project in the Project window, and select Run to start the sample project.
In the Run Project window >> select jfilechooserdemo.resources.JFileChooserDemo >> click OK In the Run Project dialog box, select the jfilechooserdemo.resources.JFileChooserDemo main class.


Click OK.

In the Demo Application window >> choose File menu >> Open In the running Demo Application, choose Open in the File menu to trigger the action.
Select any .txt file on your system to open Open any text file to display its contents in the text area.


Let me select the Sample.txt file, and choose Open.

The fileChooser displays the contents of the text file.
To close >> select File >> Exit To close the application, select Exit in the File menu.
Summary


In this tutorial, you learnt to,
  • Add a file chooser to a Java application

and

  • Configure the file chooser


Assignment As an assignment, use the same demo project we have created and add the following features:
  • Add a Save menu item under the menu bar
  • Add keyboard short-cuts for all the menu items
  • Add a code snippet to the Save action, to save the file.


Show assignment I have already created a similar assignment, where the filechooser displays the Save option under the File menu,


and gives you the option to save the text file which you open.

About the Spoken Tutorial Project Watch the video at the link shown on the screen.


It summarizes the Spoken Tutorial project.


If you do not have good bandwidth, you can download and watch it.

Spoken Tutorial Workshops The Spoken Tutorial Project Team
  • Conducts workshops using Spoken Tutorials
  • Gives certificates to those who pass an online test
  • For more details, please write to contact@spoken-tutorial.org


Acknowledgements Spoken Tutorial Project is a part of the Talk to a Teacher Project.


It is supported by the National Mission on Education through ICT, MHRD, Government of India.


More information on this Mission is available at the link provided here.

About the contributor This tutorial has been contributed by IT for Change. Thanks for joining.

Contributors and Content Editors

Chandrika

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Adding-a-File-Chooser/English&oldid=223"