Netbeans/C2/Adding-a-File-Chooser/English-timed
From Script | Spoken-Tutorial
Revision as of 10:32, 3 April 2014 by PoojaMoolya (Talk | contribs)
Time | Narration
|
00.00 | Hello |
00.01 | Welcome to the tutorial on Adding a File Chooser to a Java Application.' |
00.07 | In this tutorial, we will |
00.09 | Create the application |
00.10 | Create the application form. |
00.12 | Add the File Chooser |
00.14 | Configure the File Chooser.
|
00.17 | And run the application |
00.19 | For this demonstration, I am using the Linux Operating System, Ubuntu v12.04. |
00.26 | and Netbeans IDE v7.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 project type. |
01.08 | And click Next. |
01.10 | In the Project Name field, let's type JFileChooserDemo.
|
01.20 | Clear the Create Main Class checkbox.
|
01.23 | Make sure that the Set as Main Project checkbox 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 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 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 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 TextArea. |
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 filechooser 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 conduct 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 link provided here |
13.59 | This tutorial has been contributed by IT for Change
|
14.04 | Thank you for joining us. |