Difference between revisions of "Netbeans/C2/Adding-a-File-Chooser/English-timed"
From Script | Spoken-Tutorial
| Line 1: | Line 1: | ||
{| Border=1 | {| Border=1 | ||
| − | + | | '''Time''' | |
| − | + | | '''Narration''' | |
|- | |- | ||
| − | | 00 | + | | 00:00 |
|Hello | |Hello | ||
|- | |- | ||
| − | | 00 | + | | 00:01 |
|Welcome to the tutorial on Adding a File Chooser to a Java Application.' | |Welcome to the tutorial on Adding a File Chooser to a Java Application.' | ||
|- | |- | ||
| − | |00 | + | |00:07 |
|In this tutorial, we will | |In this tutorial, we will | ||
|- | |- | ||
| − | |00 | + | |00:09 |
|Create the application''' | |Create the application''' | ||
|- | |- | ||
| − | | 00 | + | | 00:10 |
|Create the application form. | |Create the application form. | ||
|- | |- | ||
| − | |00 | + | |00:12 |
|Add the '''File Chooser''' | |Add the '''File Chooser''' | ||
|- | |- | ||
| − | | 00 | + | | 00:14 |
|Configure the '''File Chooser. ''' | |Configure the '''File Chooser. ''' | ||
|- | |- | ||
| − | |00 | + | |00:17 |
|And run the application | |And run the application | ||
|- | |- | ||
| − | | 00 | + | | 00:19 |
|For this demonstration, I am using the Linux Operating System, Ubuntu v12.04. | |For this demonstration, I am using the Linux Operating System, Ubuntu v12.04. | ||
|- | |- | ||
| − | | 00 | + | | 00:26 |
| and Netbeans IDE v7.1.1 | | and Netbeans IDE v7.1.1 | ||
|- | |- | ||
| − | |00 | + | |00:31 |
|In this tutorial, we will learn to add a File chooser to a '''Java''' Application using the '''javax.swing.JFileChooser''' component. | |In this tutorial, we will learn to add a File chooser to a '''Java''' Application using the '''javax.swing.JFileChooser''' component. | ||
|- | |- | ||
| − | |00 | + | |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. | |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 | + | |00:52 |
|Let us first create the '''Java''' Application: | |Let us first create the '''Java''' Application: | ||
| Line 64: | Line 64: | ||
|- | |- | ||
| − | |00 | + | |00:55 |
|Launch the '''IDE.''' | |Launch the '''IDE.''' | ||
| Line 70: | Line 70: | ||
|- | |- | ||
| − | | 00 | + | | 00:57 |
|From the main menu, choose '''File''' and '''New Project ''' | |From the main menu, choose '''File''' and '''New Project ''' | ||
| Line 77: | Line 77: | ||
|- | |- | ||
| − | |01 | + | |01:03 |
|Choose the '''Java''' category and the Java Application project type. | |Choose the '''Java''' category and the Java Application project type. | ||
| Line 83: | Line 83: | ||
|- | |- | ||
| − | |01 | + | |01:08 |
|And click '''Next. ''' | |And click '''Next. ''' | ||
| Line 89: | Line 89: | ||
|- | |- | ||
| − | |01 | + | |01:10 |
|In the '''Project Name''' field, let's type '''JFileChooserDemo. ''' | |In the '''Project Name''' field, let's type '''JFileChooserDemo. ''' | ||
| Line 96: | Line 96: | ||
|- | |- | ||
| − | |01 | + | |01:20 |
|Clear the '''Create Main Class''' checkbox. | |Clear the '''Create Main Class''' checkbox. | ||
| Line 103: | Line 103: | ||
|- | |- | ||
| − | |01 | + | |01:23 |
|Make sure that the '''Set as Main Project''' checkbox is selected. | |Make sure that the '''Set as Main Project''' checkbox is selected. | ||
| Line 109: | Line 109: | ||
|- | |- | ||
| − | |01 | + | |01:27 |
| Click '''Finish.''' | | Click '''Finish.''' | ||
| Line 116: | Line 116: | ||
|- | |- | ||
| − | | 01 | + | | 01:31 |
|Here, we will create the '''JFrame''' container and add a few components to it. | |Here, we will create the '''JFrame''' container and add a few components to it. | ||
| Line 123: | Line 123: | ||
|- | |- | ||
| − | | 01 | + | | 01:37 |
|Right click on the '''Source Packages''' node. | |Right click on the '''Source Packages''' node. | ||
|- | |- | ||
| − | | 01 | + | | 01:41 |
|Choose '''New > Other..''' | |Choose '''New > Other..''' | ||
|- | |- | ||
| − | | 01 | + | | 01:45 |
|Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type. | |Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type. | ||
|- | |- | ||
| − | | 01 | + | | 01:51 |
|Click '''Next.''' | |Click '''Next.''' | ||
|- | |- | ||
| − | | 01 | + | | 01:54 |
|For Class Name, type '''JFileChooserDemo. ''' | |For Class Name, type '''JFileChooserDemo. ''' | ||
|- | |- | ||
| − | | 02 | + | | 02:02 |
|In the Package field, type '''jfilechooserdemo.resources.''' | |In the Package field, type '''jfilechooserdemo.resources.''' | ||
|- | |- | ||
| − | |02 | + | |02:12 |
|Click '''Finish.''' | |Click '''Finish.''' | ||
|- | |- | ||
| − | |02 | + | |02:17 |
|In the '''Properties window''', select the '''Title''' property. | |In the '''Properties window''', select the '''Title''' property. | ||
|- | |- | ||
| − | |02 | + | |02:22 |
| And type '''Demo Application.''' | | And type '''Demo Application.''' | ||
|- | |- | ||
| − | |02 | + | |02:30 |
|Press '''Enter''' to confirm. | |Press '''Enter''' to confirm. | ||
|- | |- | ||
| − | | 02 | + | | 02:32 |
|In the '''Palette''', open the '''Swing Menus''' category. | |In the '''Palette''', open the '''Swing Menus''' category. | ||
|- | |- | ||
| − | | 02 | + | | 02:40 |
|Select the '''Menu Bar''' component and drag it to the top left corner of the '''Jframe.''' | |Select the '''Menu Bar''' component and drag it to the top left corner of the '''Jframe.''' | ||
|- | |- | ||
| − | |02 | + | |02:50 |
|Right-click the '''Edit''' item of the '''Menu Bar''' component. | |Right-click the '''Edit''' item of the '''Menu Bar''' component. | ||
| Line 181: | Line 181: | ||
|- | |- | ||
| − | |02 | + | |02:55 |
|Select '''Delete''' in the context menu. | |Select '''Delete''' in the context menu. | ||
| Line 189: | Line 189: | ||
|- | |- | ||
| − | | 02 | + | | 02:59 |
|Next let us add a menu item that allows to open the '''FileChooser''' from the running application. | |Next let us add a menu item that allows to open the '''FileChooser''' from the running application. | ||
| Line 196: | Line 196: | ||
|- | |- | ||
| − | | 03 | + | | 03:07 |
|Make sure the '''Menu Bar''' is selected before you drag another '''Menu Item'' here. | |Make sure the '''Menu Bar''' is selected before you drag another '''Menu Item'' here. | ||
| Line 203: | Line 203: | ||
|- | |- | ||
| − | | 03 | + | | 03:14 |
|In the '''Swing Menus''' category in the Palette, select a new '''Menu Item''' | |In the '''Swing Menus''' category in the Palette, select a new '''Menu Item''' | ||
| Line 209: | Line 209: | ||
|- | |- | ||
| − | | 03 | + | | 03:22 |
|Drag it to the '''Menu Bar''', and drop it onto the '''File''' item of the '''Menu Bar.''' | |Drag it to the '''Menu Bar''', and drop it onto the '''File''' item of the '''Menu Bar.''' | ||
| Line 216: | Line 216: | ||
|- | |- | ||
| − | | 03 | + | | 03:30 |
|Right click '''jMenuItem1''' in the '''Design''' view. | |Right click '''jMenuItem1''' in the '''Design''' view. | ||
| Line 223: | Line 223: | ||
|- | |- | ||
| − | | 03 | + | | 03:35 |
|And choose '''Change Variable Name''' from the context menu. | |And choose '''Change Variable Name''' from the context menu. | ||
| Line 229: | Line 229: | ||
|- | |- | ||
| − | | 03 | + | | 03:41 |
| Rename the item to '''Open''' and click '''OK.''' | | Rename the item to '''Open''' and click '''OK.''' | ||
|- | |- | ||
| − | | 03 | + | | 03:48 |
|Make sure that the '''jMenuItem1''' is still selected in the '''Design''' view. | |Make sure that the '''jMenuItem1''' is still selected in the '''Design''' view. | ||
| Line 242: | Line 242: | ||
|- | |- | ||
| − | | 03 | + | | 03:53 |
|Press the '''Space bar''' to edit the text of the component. | |Press the '''Space bar''' to edit the text of the component. | ||
| Line 249: | Line 249: | ||
|- | |- | ||
| − | | 03 | + | | 03:58 |
| Change the text to '''Open''' and press '''Enter''' to confirm. | | Change the text to '''Open''' and press '''Enter''' to confirm. | ||
| Line 257: | Line 257: | ||
|- | |- | ||
| − | | 04 | + | | 04:04 |
|Specify the action handler for the '''Open''' menu item. | |Specify the action handler for the '''Open''' menu item. | ||
|- | |- | ||
| − | | 04 | + | | 04:08 |
|Right click the Menu Item '''Open''' and choose '''Events, Action, Action Performed''' from the context menu. | |Right click the Menu Item '''Open''' and choose '''Events, Action, Action Performed''' from the context menu. | ||
|- | |- | ||
| − | | 04 | + | | 04:20 |
|The GUI builder automatically switches to the source view | |The GUI builder automatically switches to the source view | ||
|- | |- | ||
| − | | 04 | + | | 04:25 |
|A new event handler method ''' OpenActionPerformed()''' is generated. | |A new event handler method ''' OpenActionPerformed()''' is generated. | ||
|- | |- | ||
| − | | 04 | + | | 04:31 |
|Let us switch back to the ''' Design''' view. | |Let us switch back to the ''' Design''' view. | ||
|- | |- | ||
| − | | 04 | + | | 04:35 |
|Let's add a menu item to exit the ''' File Chooser.''' | |Let's add a menu item to exit the ''' File Chooser.''' | ||
|- | |- | ||
| − | | 04 | + | | 04:39 |
|In the ''' Palette''' , choose ''' Swing Menus''' category. | |In the ''' Palette''' , choose ''' Swing Menus''' category. | ||
|- | |- | ||
| − | | 04 | + | | 04:45 |
|Select ''' Menu Item ''' | |Select ''' Menu Item ''' | ||
| Line 297: | Line 297: | ||
|- | |- | ||
| − | | 04 | + | | 04:48 |
|Drag it to the ''' Menu Bar''' below the Open menu item on the form. | |Drag it to the ''' Menu Bar''' below the Open menu item on the form. | ||
| Line 303: | Line 303: | ||
|- | |- | ||
| − | | 04 | + | | 04:53 |
| Notice the orange highlighting that indicates where the ''' jmenuItem1''' is going to be placed. | | Notice the orange highlighting that indicates where the ''' jmenuItem1''' is going to be placed. | ||
|- | |- | ||
| − | | 05 | + | | 05:03 |
|Right click ''' jMenuItem1''' in the ''' Design''' View. | |Right click ''' jMenuItem1''' in the ''' Design''' View. | ||
| Line 314: | Line 314: | ||
|- | |- | ||
| − | | 05 | + | | 05:07 |
| Choose ''' Change Variable Name''' from the context menu. | | Choose ''' Change Variable Name''' from the context menu. | ||
| Line 320: | Line 320: | ||
|- | |- | ||
| − | | 05 | + | | 05:12 |
|Rename the item to ''' Exit''' and click on ''' OK.''' | |Rename the item to ''' Exit''' and click on ''' OK.''' | ||
| Line 326: | Line 326: | ||
|- | |- | ||
| − | | 05 | + | | 05:20 |
|Make sure that the ''' jMenuItem1''' is still selected in the ''' Design''' View. | |Make sure that the ''' jMenuItem1''' is still selected in the ''' Design''' View. | ||
|- | |- | ||
| − | | 05 | + | | 05:25 |
|Press the ''' Space bar''' to edit the text of the component | |Press the ''' Space bar''' to edit the text of the component | ||
| Line 338: | Line 338: | ||
|- | |- | ||
| − | | 05 | + | | 05:30 |
|Change the text to ''' Exit''' and press ''' Enter''' to confirm. | |Change the text to ''' Exit''' and press ''' Enter''' to confirm. | ||
|- | |- | ||
| − | | 05 | + | | 05:36 |
|Specify the action handler for the ''' Exit''' menu item. | |Specify the action handler for the ''' Exit''' menu item. | ||
| Line 350: | Line 350: | ||
|- | |- | ||
| − | | 05 | + | | 05:41 |
|Right click the menu item Exit. | |Right click the menu item Exit. | ||
| Line 356: | Line 356: | ||
|- | |- | ||
| − | | 05 | + | | 05:44 |
|Choose ''' Events, Action, Action Performed()''' from the context menu.. | |Choose ''' Events, Action, Action Performed()''' from the context menu.. | ||
| Line 363: | Line 363: | ||
|- | |- | ||
| − | | 05 | + | | 05:51 |
|The GUI Builder automatically switches to the '''Source''' view. | |The GUI Builder automatically switches to the '''Source''' view. | ||
| Line 370: | Line 370: | ||
|- | |- | ||
| − | | 05 | + | | 05:56 |
|A new event handler method named ''' ExitActionPerformed()''' is generated. | |A new event handler method named ''' ExitActionPerformed()''' is generated. | ||
| Line 376: | Line 376: | ||
|- | |- | ||
| − | | 06 | + | | 06:02 |
|The ''' ExitActionPerformed''' node appears in the ''' Navigator''' window above the ''' OpenActionPerformed()''' node. | |The ''' ExitActionPerformed''' node appears in the ''' Navigator''' window above the ''' OpenActionPerformed()''' node. | ||
| Line 382: | Line 382: | ||
|- | |- | ||
| − | | 06 | + | | 06:12 |
|If you cannot view your ''' Navigator,''' | |If you cannot view your ''' Navigator,''' | ||
|- | |- | ||
| − | | 06 | + | | 06:14 |
| go to the ''' Window''' menu in the menu bar, | | go to the ''' Window''' menu in the menu bar, | ||
|- | |- | ||
| − | | 06 | + | | 06:18 |
|choose ''' Navigating''' and click on ''' Navigator.''' | |choose ''' Navigating''' and click on ''' Navigator.''' | ||
| Line 397: | Line 397: | ||
|- | |- | ||
| − | | 06 | + | | 06:25 |
|Here, you can see the ''' ExitActionPerformed''' node appearing above the ''' OpenActionPerformed''' node. | |Here, you can see the ''' ExitActionPerformed''' node appearing above the ''' OpenActionPerformed''' node. | ||
|- | |- | ||
| − | | 06 | + | | 06:33 |
|To make the ''' Exit''' menu item work, | |To make the ''' Exit''' menu item work, | ||
| Line 408: | Line 408: | ||
|- | |- | ||
| − | | 06 | + | | 06:36 |
|Let us include the statement ''' System.exit(0);''' into the ''' ExitActionPerformed()''' method body. | |Let us include the statement ''' System.exit(0);''' into the ''' ExitActionPerformed()''' method body. | ||
| Line 416: | Line 416: | ||
|- | |- | ||
| − | | 06 | + | | 06:47 |
|Switch back to ''' Design''' mode. | |Switch back to ''' Design''' mode. | ||
| Line 422: | Line 422: | ||
|- | |- | ||
| − | | 06 | + | | 06:50 |
|From the ''' Swing Controls''' category of the ''' Palette''' , drag a ''' Text Area''' onto the form. | |From the ''' Swing Controls''' category of the ''' Palette''' , drag a ''' Text Area''' onto the form. | ||
| Line 428: | Line 428: | ||
|- | |- | ||
| − | | 07 | + | | 07:06 |
|Resize the added component to make room for the text displayed by the ''' File Chooser''' later. | |Resize the added component to make room for the text displayed by the ''' File Chooser''' later. | ||
| Line 434: | Line 434: | ||
|- | |- | ||
| − | | 07 | + | | 07:18 |
|Rename the variable as ''' textarea.''' | |Rename the variable as ''' textarea.''' | ||
| Line 441: | Line 441: | ||
|- | |- | ||
| − | | 07 | + | | 07:26 |
|Let us next add the actual ''' File Chooser.''' | |Let us next add the actual ''' File Chooser.''' | ||
| Line 449: | Line 449: | ||
|- | |- | ||
| − | | 07 | + | | 07:31 |
|If your ''' Navigator''' window is not open, choose ''' Window, Navigating, a Navigator''' to open it.. | |If your ''' Navigator''' window is not open, choose ''' Window, Navigating, a Navigator''' to open it.. | ||
| Line 456: | Line 456: | ||
|- | |- | ||
| − | | 07 | + | | 07:38 |
|And in the ''' Navigator''' , right click the '''Jframe''' node. | |And in the ''' Navigator''' , right click the '''Jframe''' node. | ||
| Line 463: | Line 463: | ||
|- | |- | ||
| − | | 07 | + | | 07:44 |
|Choose ''' Add From Palette, Swing Windows, and File Chooser''' from the context menu. | |Choose ''' Add From Palette, Swing Windows, and File Chooser''' from the context menu. | ||
|- | |- | ||
| − | | 07 | + | | 07:54 |
|You can notice in the ''' Navigator''' that a ''' JFileChooser''' was added to the form. | |You can notice in the ''' Navigator''' that a ''' JFileChooser''' was added to the form. | ||
|- | |- | ||
| − | | 08 | + | | 08:01 |
|Right click the ''' JFileChooser''' node and rename the variable to ''' fileChooser.''' | |Right click the ''' JFileChooser''' node and rename the variable to ''' fileChooser.''' | ||
| Line 479: | Line 479: | ||
|- | |- | ||
| − | | 08 | + | | 08:16 |
|Click ''' OK''' | |Click ''' OK''' | ||
|- | |- | ||
| − | | 08 | + | | 08:19 |
|We have now added the ''' File Chooser.''' | |We have now added the ''' File Chooser.''' | ||
|- | |- | ||
| − | | 08 | + | | 08:21 |
|The next step is to configure the ''' File Chooser''' to display the title that you want. | |The next step is to configure the ''' File Chooser''' to display the title that you want. | ||
| Line 494: | Line 494: | ||
|- | |- | ||
| − | | 08 | + | | 08:27 |
|We will also add a '''custom file filter''', and integrate the '''File Chooser''' into your application. | |We will also add a '''custom file filter''', and integrate the '''File Chooser''' into your application. | ||
| Line 502: | Line 502: | ||
|- | |- | ||
| − | | 08 | + | | 08:34 |
|Click to select the ''' JfileChooser''' in the ''' Navigator''' window. | |Click to select the ''' JfileChooser''' in the ''' Navigator''' window. | ||
| Line 509: | Line 509: | ||
|- | |- | ||
| − | | 08 | + | | 08:38 |
|Now let's edit its properties in the ''' Properties''' dialog box. | |Now let's edit its properties in the ''' Properties''' dialog box. | ||
| Line 515: | Line 515: | ||
|- | |- | ||
| − | | 08 | + | | 08:43 |
|In the ''' Properties''' window below the Palette, | |In the ''' Properties''' window below the Palette, | ||
| Line 521: | Line 521: | ||
|- | |- | ||
| − | | 08 | + | | 08:47 |
|Change the '''dialogTitle''' to '''This is my open dialog.''' | |Change the '''dialogTitle''' to '''This is my open dialog.''' | ||
|- | |- | ||
| − | | 09 | + | | 09:00 |
|Press ''' Enter''' to confirm. | |Press ''' Enter''' to confirm. | ||
| Line 532: | Line 532: | ||
|- | |- | ||
| − | | 09 | + | | 09:03 |
|Now switch to the '''Source''' mode. | |Now switch to the '''Source''' mode. | ||
|- | |- | ||
| − | | 09 | + | | 09:07 |
|Now, to integrate the ''' FileChooser''' into your application.. | |Now, to integrate the ''' FileChooser''' into your application.. | ||
| Line 543: | Line 543: | ||
|- | |- | ||
| − | | 09 | + | | 09:12 |
|I have an existing code snippet, which I will copy and paste into the existing ''' OpenActionPerformed()''' method. | |I have an existing code snippet, which I will copy and paste into the existing ''' OpenActionPerformed()''' method. | ||
| Line 549: | Line 549: | ||
|- | |- | ||
| − | | 09 | + | | 09:20 |
|This example reads the file contents and displays them in the TextArea. | |This example reads the file contents and displays them in the TextArea. | ||
| Line 555: | Line 555: | ||
|- | |- | ||
| − | | 09 | + | | 09:27 |
|We will now call the ''' FileChooser's getSelectedFile()''' method to determine which file the user has clicked. | |We will now call the ''' FileChooser's getSelectedFile()''' method to determine which file the user has clicked. | ||
| Line 561: | Line 561: | ||
|- | |- | ||
| − | | 09 | + | | 09:36 |
|I will copy this code onto my clipboard, and in the '''Source''' view of the IDE, paste it inside the ''' OpenActionPerformed''' method. | |I will copy this code onto my clipboard, and in the '''Source''' view of the IDE, paste it inside the ''' OpenActionPerformed''' method. | ||
| Line 567: | Line 567: | ||
|- | |- | ||
| − | | 09 | + | | 09:51 |
|If the editor reports errors in your code, right click anywhere in the code and select '''Fix Imports.''' | |If the editor reports errors in your code, right click anywhere in the code and select '''Fix Imports.''' | ||
| Line 573: | Line 573: | ||
|- | |- | ||
| − | | 10 | + | | 10:00 |
|Now, let us add a custom file filter that makes the '''File Chooser''' display only '''.txt''' files. | |Now, let us add a custom file filter that makes the '''File Chooser''' display only '''.txt''' files. | ||
| Line 579: | Line 579: | ||
|- | |- | ||
| − | | 10 | + | | 10:09 |
|Switch to the design mode and select the '''fileChooser''' in the '''Navigator''' window. | |Switch to the design mode and select the '''fileChooser''' in the '''Navigator''' window. | ||
|- | |- | ||
| − | | 10 | + | | 10:16 |
|In the '''Properties''' window, click the ellipsis button next to the '''fileFilter''' property. | |In the '''Properties''' window, click the ellipsis button next to the '''fileFilter''' property. | ||
| Line 590: | Line 590: | ||
|- | |- | ||
| − | | 10 | + | | 10:25 |
|In the '''fileFilter''' dialog box, select '''Custom Code''' from the combo-box.. | |In the '''fileFilter''' dialog box, select '''Custom Code''' from the combo-box.. | ||
| Line 596: | Line 596: | ||
|- | |- | ||
| − | | 10 | + | | 10:31 |
|Type '''new MyCustomFilter()''' in the text field. | |Type '''new MyCustomFilter()''' in the text field. | ||
|- | |- | ||
| − | | 10 | + | | 10:41 |
|and Click OK. | |and Click OK. | ||
| Line 607: | Line 607: | ||
|- | |- | ||
| − | | 10 | + | | 10:44 |
|To make the custom code work, we will write the '''MyCustomFilter''' class. | |To make the custom code work, we will write the '''MyCustomFilter''' class. | ||
| Line 613: | Line 613: | ||
|- | |- | ||
| − | | 10 | + | | 10:52 |
|This inner or outer class will extend the '''fileFilter '''class. | |This inner or outer class will extend the '''fileFilter '''class. | ||
| Line 619: | Line 619: | ||
|- | |- | ||
| − | | 10 | + | | 10:57 |
|I will copy and paste this code snippet | |I will copy and paste this code snippet | ||
| Line 625: | Line 625: | ||
|- | |- | ||
| − | | 11 | + | | 11:04 |
|Into the source of our class below the import statements. | |Into the source of our class below the import statements. | ||
| Line 632: | Line 632: | ||
|- | |- | ||
| − | | 11 | + | | 11:11 |
|This inner or outer class will extend the '''fileFilter''' class. | |This inner or outer class will extend the '''fileFilter''' class. | ||
|- | |- | ||
| − | | 11 | + | | 11:20 |
| Right click the '''JFileChooserDemo''' project in the Project window, and select '''Run''' to start the sample project. | | Right click the '''JFileChooserDemo''' project in the Project window, and select '''Run''' to start the sample project. | ||
| Line 644: | Line 644: | ||
|- | |- | ||
| − | | 11 | + | | 11:31 |
|In the '''Run Project''' dialog box, select the '''jfilechooserdemo.resources.JFileChooserDemo''' main class. | |In the '''Run Project''' dialog box, select the '''jfilechooserdemo.resources.JFileChooserDemo''' main class. | ||
| Line 650: | Line 650: | ||
|- | |- | ||
| − | | 11 | + | | 11:41 |
|Click OK. | |Click OK. | ||
| Line 656: | Line 656: | ||
|- | |- | ||
| − | | 11 | + | | 11:47 |
|In the running '''Demo Application''', choose '''Open''' in the '''File''' menu to trigger the action. | |In the running '''Demo Application''', choose '''Open''' in the '''File''' menu to trigger the action. | ||
| Line 662: | Line 662: | ||
|- | |- | ||
| − | | 11 | + | | 11:55 |
|Open any text file to display its contents in the text area. | |Open any text file to display its contents in the text area. | ||
| Line 668: | Line 668: | ||
|- | |- | ||
| − | | 12 | + | | 12:00 |
|Let me select the '''Sample.txt''' file, and choose '''Open.''' | |Let me select the '''Sample.txt''' file, and choose '''Open.''' | ||
| Line 674: | Line 674: | ||
|- | |- | ||
| − | | 12 | + | | 12:06 |
|The '''fileChooser''' displays the contents of the text file. | |The '''fileChooser''' displays the contents of the text file. | ||
| Line 680: | Line 680: | ||
|- | |- | ||
| − | | 12 | + | | 12:10 |
|To close the application select '''Exit''' in the '''File''' Menu | |To close the application select '''Exit''' in the '''File''' Menu | ||
| Line 686: | Line 686: | ||
|- | |- | ||
| − | | 12 | + | | 12:17 |
|In this tutorial, you learnt to, | |In this tutorial, you learnt to, | ||
| Line 693: | Line 693: | ||
|- | |- | ||
| − | | 12 | + | | 12:19 |
|Add a '''File chooser''' to a Java application and | |Add a '''File chooser''' to a Java application and | ||
| Line 700: | Line 700: | ||
|- | |- | ||
| − | | 12 | + | | 12:23 |
|Configure the '''File chooser''' | |Configure the '''File chooser''' | ||
| Line 707: | Line 707: | ||
|- | |- | ||
| − | | 12 | + | | 12:27 |
|As an assignment, use the same demo project we have created and add the following features: | |As an assignment, use the same demo project we have created and add the following features: | ||
| Line 714: | Line 714: | ||
|- | |- | ||
| − | | 12 | + | | 12:35 |
|Add a '''Save''' menu item under the menu bar | |Add a '''Save''' menu item under the menu bar | ||
| Line 721: | Line 721: | ||
|- | |- | ||
| − | | 12 | + | | 12:38 |
|Add keyboard short-cuts for all the menu items | |Add keyboard short-cuts for all the menu items | ||
| Line 727: | Line 727: | ||
|- | |- | ||
| − | | 12 | + | | 12:42 |
|Add a code snippet to the Save action, to save the file. | |Add a code snippet to the Save action, to save the file. | ||
| Line 734: | Line 734: | ||
|- | |- | ||
| − | | 12 | + | | 12:51 |
|I have already created a similar assignment, where the filechooser displays the Save option under the File menu, | |I have already created a similar assignment, where the filechooser displays the Save option under the File menu, | ||
| Line 741: | Line 741: | ||
|- | |- | ||
| − | | 13 | + | | 13:01 |
|and gives you the option to save the text file which you open. | |and gives you the option to save the text file which you open. | ||
| Line 747: | Line 747: | ||
|- | |- | ||
| − | | 13 | + | | 13:09 |
|About the Spoken tutorial project | |About the Spoken tutorial project | ||
| Line 753: | Line 753: | ||
|- | |- | ||
| − | | 13 | + | | 13:12 |
|Watch the video available at the link shown on the screen. | |Watch the video available at the link shown on the screen. | ||
| Line 759: | Line 759: | ||
|- | |- | ||
| − | | 13 | + | | 13:15 |
|It summarizes the Spoken Tutorial project. | |It summarizes the Spoken Tutorial project. | ||
| Line 765: | Line 765: | ||
|- | |- | ||
| − | | 13 | + | | 13:19 |
|If you do not have good bandwidth, you can download and watch it. | |If you do not have good bandwidth, you can download and watch it. | ||
| Line 771: | Line 771: | ||
|- | |- | ||
| − | | 13 | + | | 13:24 |
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | |The Spoken Tutorial project team conduct workshops using Spoken Tutorials. | ||
| Line 778: | Line 778: | ||
|- | |- | ||
| − | | 13 | + | | 13:30 |
|Gives certificates to those who pass an online test. | |Gives certificates to those who pass an online test. | ||
| Line 785: | Line 785: | ||
|- | |- | ||
| − | | 13 | + | | 13:33 |
|For more details please write to contact@spoken-tutorial.org | |For more details please write to contact@spoken-tutorial.org | ||
| Line 792: | Line 792: | ||
|- | |- | ||
| − | | 13 | + | | 13:41 |
|Spoken Tutorial Project is a part of the Talk to a Teacher Project | |Spoken Tutorial Project is a part of the Talk to a Teacher Project | ||
| Line 798: | Line 798: | ||
|- | |- | ||
| − | | 13 | + | | 13:46 |
| It is Supported by the National Mission on education through ICT, MHRD, Government of India | | It is Supported by the National Mission on education through ICT, MHRD, Government of India | ||
| Line 804: | Line 804: | ||
|- | |- | ||
| − | | 13 | + | | 13:53 |
|More information on this mission is available at link provided here | |More information on this mission is available at link provided here | ||
| Line 810: | Line 810: | ||
|- | |- | ||
| − | | 13 | + | | 13:59 |
|This tutorial has been contributed by IT for Change | |This tutorial has been contributed by IT for Change | ||
| Line 817: | Line 817: | ||
|- | |- | ||
| − | | 14 | + | | 14:04 |
|Thank you for joining us. | |Thank you for joining us. | ||
Revision as of 12:27, 10 July 2014
| 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. |
