Netbeans/C2/Adding-a-File-Chooser/English-timed
From Script | Spoken-Tutorial
| Time | Narration |
| 00:00 | Hello.Welcome to the tutorial on Adding a File Chooser to a Java Application. |
| 00:07 | In this tutorial, we will: |
| 00:09 | Create an application, Create the application form. |
| 00:12 | Add the File Chooser, |
| 00:14 | Configure the File Chooser and |
| 00:17 | run the application. |
| 00:19 | For this demonstration, I am using the Linux Operating System, Ubuntu version 12.04 |
| 00:26 | and Netbeans IDE version 7.1.1. |
| 00:31 | In this tutorial, we will learn to add a File chooser to a Java Application using the javax.swing.JFileChooser component. |
| 00:42 | As a part of this exercise, we will learn to create a small Java application that loads a '.txt' file into a Text Area. |
| 00:52 | Let us first create the Java Application: |
| 00:55 | Launch the IDE. |
| 00:57 | From the main menu, choose File and New Project. |
| 01:03 | Choose the "Java" Category and the "Java Application" Projects type. |
| 01:08 | And click Next. |
| 01:10 | In the Project Name field, let's type: "JFileChooserDemo". |
| 01:20 | Clear the Create Main Class check-box. |
| 01:23 | Make sure that the Set as Main Project check-box is selected. |
| 01:27 | Click Finish. |
| 01:31 | Here, we will create the JFrame container and add a few components to it. |
| 01:37 | Right-click on the Source Packages node. |
| 01:41 | Choose New > Other. |
| 01:45 | Choose the Swing GUI Forms categories and the JFrameForm type. |
| 01:51 | Click Next. |
| 01:54 | For Class Name, type: "JFileChooserDemo". |
| 02:02 | In the Package field, type: "jfilechooserdemo.resources". |
| 02:12 | Click Finish. |
| 02:17 | In the Properties window, select the Title property |
| 02:22 | and type: "Demo Application". |
| 02:30 | Press Enter to confirm. |
| 02:32 | In the Palette, open the Swing Menus category. |
| 02:40 | Select the Menu Bar component and drag it to the top left corner of the Jframe. |
| 02:50 | Right-click the Edit item of the Menu Bar component. |
| 02:55 | Select Delete in the context menu. |
| 02:59 | Next, let us add a menu item that allows to open the FileChooser from the running application. |
| 03:07 | Make sure that the Menu Bar' is selected before you drag another Menu Item here. |
| 03:14 | In the Swing Menus category in the Palette, select a new Menu Item. |
| 03:22 | Drag it to the Menu Bar and drop it onto the File item of the Menu Bar. |
| 03:30 | Right-click jMenuItem1 in the Design view. |
| 03:35 | And choose Change Variable Name from the context menu. |
| 03:41 | Rename the item to Open and click OK. |
| 03:48 | Make sure that the jMenuItem1 is still selected in the Design view. |
| 03:53 | Press the Space bar to edit the text of the component. |
| 03:58 | Change the text to Open and press Enter to confirm. |
| 04:04 | Specify the action handler for the Open menu item. |
| 04:08 | Right-click the menu item Open and choose Events, Action, Action Performed from the context menu. |
| 04:20 | The GUI builder automatically switches to the source view. |
| 04:25 | A new event handler method OpenActionPerformed() is generated. |
| 04:31 | Let us switch back to the Design view. |
| 04:35 | Let's add a menu item to exit the File Chooser. |
| 04:39 | In the Palette , choose the Swing Menus category. |
| 04:45 | Select Menu Item. |
| 04:48 | Drag it to the Menu Bar below the Open menu item on the form. |
| 04:53 | Notice the orange highlighting that indicates where the jmenuItem1 is going to be placed. |
| 05:03 | Right-click jMenuItem1 in the Design view. |
| 05:07 | Choose Change Variable Name from the context menu. |
| 05:12 | Rename the item to Exit and click on OK. |
| 05:20 | Make sure that the jMenuItem1 is still selected in the Design view. |
| 05:25 | Press the Space bar to edit the text of the component. |
| 05:30 | Change the text to Exit and press Enter to confirm. |
| 05:36 | Specify the action handler for the Exit menu item. |
| 05:41 | Right-click the menu-item Exit. |
| 05:44 | Choose Events, Action, Action Performed from the context menu. |
| 05:51 | The GUI Builder automatically switches to the Source view. |
| 05:56 | A new event handler method named ExitActionPerformed() is generated. |
| 06:02 | The ExitActionPerformed node appears in the Navigator window above the OpenActionPerformed() node. |
| 06:12 | If you cannot view your Navigator, |
| 06:14 | go to the Window menu in the menu bar, |
| 06:18 | choose Navigating and click on Navigator. |
| 06:25 | Here, you can see the ExitActionPerformed node appearing above the OpenActionPerformed node. |
| 06:33 | To make the Exit menu-item work, |
| 06:36 | let us include the statement System.exit(0); into the ExitActionPerformed() method body. |
| 06:47 | Switch back to the Design mode. |
| 06:50 | From the Swing Controls category of the Palette, drag a Text Area onto the form. |
| 07:06 | Resize the added component to make room for the text, displayed by the File Chooser later. |
| 07:18 | Rename the variable as "textarea". |
| 07:26 | Let us next add the actual File Chooser. |
| 07:31 | If your Navigator window is not open, choose Window, Navigating, a Navigator to open it. |
| 07:38 | And in the Navigator, right-click the Jframe node. |
| 07:44 | Choose Add From Palette, Swing Windows and File Chooser from the context menu. |
| 07:54 | You can notice in the Navigator that a JFileChooser was added to the form. |
| 08:01 | Right-click the JFileChooser node and rename the variable to fileChooser. |
| 08:16 | Click OK. |
| 08:19 | We have now added the File Chooser. |
| 08:21 | The next step is to configure the File Chooser to display the title that you want. |
| 08:27 | We will also add a custom file filter and integrate the File Chooser into your application. |
| 08:34 | Click to select the JfileChooser in the Navigator window. |
| 08:38 | Now, let's edit its properties in the Properties dialog-box. |
| 08:43 | In the Properties window, below the Palette, |
| 08:47 | change the dialogTitle to "This is my open dialog". |
| 09:00 | Press Enter to confirm. |
| 09:03 | Now, switch to the Source mode. |
| 09:07 | Now, to integrate the FileChooser into your application, |
| 09:12 | I have an existing code snippet which I will copy and paste into the existing OpenActionPerformed() method. |
| 09:20 | This example reads the file contents and displays them in the Text Area. |
| 09:27 | We will now call the FileChooser's getSelectedFile() method to determine which file the user has clicked. |
| 09:36 | I will copy this code onto my clipboard and in the Source view of the IDE, paste it inside the OpenActionPerformed() method. |
| 09:51 | If the editor reports errors in your code, right-click anywhere in the code and select Fix Imports. |
| 10:00 | Now, let us add a custom file filter that makes the File Chooser display only '.txt' files. |
| 10:09 | Switch to the Design mode and select the fileChooser in the Navigator window. |
| 10:16 | In the Properties window, click the ellipsis button, next to the fileFilter property. |
| 10:25 | In the fileFilter dialog-box, select Custom Code from the combo-box. |
| 10:31 | Type new MyCustomFilter() in the text field |
| 10:41 | and click OK. |
| 10:44 | To make the custom code work, we will write the MyCustomFilter class. |
| 10:52 | This inner or outer class will extend the fileFilter class. |
| 10:57 | I will copy and paste this code snippet |
| 11:04 | into the source of our class, below the import statements. |
| 11:11 | This inner or outer class will extend the fileFilter class. |
| 11:20 | Right-click the JFileChooserDemo project in the Project window and select Run to start the sample project. |
| 11:31 | In the Run Project dialog-box, select the jfilechooserdemo.resources.JFileChooserDemo main class. |
| 11:41 | Click OK. |
| 11:47 | In the running Demo Application, choose Open in the File menu to trigger the action. |
| 11:55 | Open any text file to display its contents in the text area. |
| 12:00 | Let me select the Sample.txt file and choose Open. |
| 12:06 | The fileChooser displays the contents of the text file. |
| 12:10 | To close the application, select Exit in the File Menu. |
| 12:17 | In this tutorial, you learnt to: |
| 12:19 | Add a File chooser to a Java application and |
| 12:23 | Configure the File chooser. |
| 12:27 | As an assignment- use the same demo project we have created and add the following features: |
| 12:35 | Add a Save menu item under the menu bar. |
| 12:38 | Add keyboard short-cuts for all the menu items. |
| 12:42 | Add a code snippet to the Save action, to save the file. |
| 12:51 | I have already created a similar assignment where the file chooser displays the Save option under the File menu |
| 13:01 | and gives you the option to save the text file which you open. |
| 13:09 | About the Spoken tutorial project: |
| 13:12 | Watch the video available at the link shown on the screen. |
| 13:15 | It summarizes the Spoken Tutorial project. |
| 13:19 | If you do not have good bandwidth, you can download and watch it. |
| 13:24 | The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials. |
| 13:30 | Gives certificates to those who pass an online test. |
| 13:33 | For more details, please write to:contact@spoken-tutorial.org |
| 13:41 | Spoken Tutorial project is a part of the Talk to a Teacher project. |
| 13:46 | It is supported by the National Mission on education through ICT, MHRD, Government of India. |
| 13:53 | More information on this mission is available at the link provided here. |
| 13:59 | This tutorial has been contributed by IT for Change. |
| 14:04 | Thank you for joining us. |