Difference between revisions of "Netbeans/C2/Adding-a-File-Chooser/English-timed"

From Script | Spoken-Tutorial
Jump to: navigation, search
 
(7 intermediate revisions by 3 users not shown)
Line 1: Line 1:
 
{| Border=1
 
{| Border=1
  
|| '''Time'''
+
| '''Time'''
|| '''Narration'''
+
| '''Narration'''
 
+
  
 
|-
 
|-
| 00.00
+
| 00:00
|Hello
+
|Hello.Welcome to the tutorial on '''Adding a File Chooser''' to a '''Java Application'''.
  
 
|-
 
|-
| 00.01
+
|00:07
|Welcome to the tutorial on Adding a File Chooser to a Java Application.'
+
|In this tutorial, we will:
  
 
|-
 
|-
|00.07
+
|00:09
|In this tutorial, we will
+
|Create an '''application''', Create the application '''form'''.
  
 
|-
 
|-
|00.09
+
|00:12
|Create the application'''
+
|Add the '''File Chooser''',
  
 
|-
 
|-
| 00.10
+
|00:14
|Create the application form.
+
|Configure the '''File Chooser''' and
  
 
|-
 
|-
|00.12
+
|00:17
|Add the '''File Chooser'''
+
| '''run''' the '''application'''.
  
 
|-
 
|-
| 00.14
+
| 00:19
|Configure the '''File Chooser. '''
+
|For this demonstration, I am using the '''Linux Operating System, Ubuntu''' version '''12.04'''  
 
+
  
 
|-
 
|-
|00.17
+
| 00:26
|And run the application
+
| and '''Netbeans IDE''' version '''7.1.1'''.
  
 
|-
 
|-
| 00.19
+
|00:31
|For this demonstration, I am using the Linux Operating System, Ubuntu v12.04.  
+
|In this tutorial, we will learn to add a '''File chooser''' to a '''Java Application '''using the '''javax.swing.JFileChooser''' component.
  
 
|-
 
|-
| 00.26
+
|00:42
| and Netbeans IDE v7.1.1
+
|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.31
+
|00:52
|In this tutorial, we will learn to add a File chooser to a '''Java''' Application using the '''javax.swing.JFileChooser''' component.
+
|Let us first create the '''Java Application''':
 
+
  
 
|-
 
|-
|00.42
+
|00:55
|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.'''
 
|Launch the '''IDE.'''
 
  
 
|-
 
|-
 
+
| 00:57
| 00.57
+
|From the main menu, choose '''File''' and '''New Project.'''
 
+
|From the main menu, choose '''File''' and '''New Project '''
+
 
+
  
 
|-
 
|-
 
+
|01:03
|01.03
+
|Choose the "Java" '''Category''' and the "Java Application" '''Projects''' type.  
 
+
|Choose the '''Java''' category and the Java Application project type.  
+
  
 
|-
 
|-
 
+
|01:08
|01.08
+
 
+
 
|And click '''Next. '''
 
|And click '''Next. '''
  
 
|-
 
|-
 
+
|01:10
|01.10
+
|In the '''Project Name''' field, let's type: '''"JFileChooserDemo"'''.
 
+
|In the '''Project Name''' field, let's type '''JFileChooserDemo. '''
+
 
+
  
 
|-
 
|-
 
+
|01:20
|01.20
+
|Clear the '''Create Main Class''' check-box.
 
+
|Clear the '''Create Main Class''' checkbox.
+
 
+
  
 
|-
 
|-
 
+
|01:23
|01.23
+
|Make sure that the '''Set as Main Project''' check-box is selected.
 
+
|Make sure that the '''Set as Main Project''' checkbox is selected.
+
  
 
|-
 
|-
 
+
|01:27
|01.27
+
 
+
 
| Click '''Finish.'''
 
| Click '''Finish.'''
 
  
 
|-
 
|-
 
+
| 01:31
| 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.
+
 
+
  
 
|-
 
|-
 
+
| 01:37
| 01.37
+
|Right-click on the '''Source Packages''' node.
 
+
|Right click on the '''Source Packages''' node.
+
  
 
|-
 
|-
| 01.41
+
| 01:41
|Choose '''New > Other..'''  
+
|Choose '''New > Other'''.
  
 
|-
 
|-
| 01.45
+
| 01:45
 
|Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type.
 
|Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type.
 
  
 
|-
 
|-
| 01.51
+
| 01:51
 
|Click '''Next.'''
 
|Click '''Next.'''
  
 
|-
 
|-
| 01.54
+
| 01:54
|For Class Name, type '''JFileChooserDemo. '''
+
|For '''Class Name''', type: "JFileChooserDemo".  
  
 
|-
 
|-
| 02.02
+
| 02:02
|In the Package field, type '''jfilechooserdemo.resources.'''
+
|In the '''Package''' field, type: "jfilechooserdemo.resources".
  
 
|-
 
|-
|02.12
+
|02:12
 
|Click '''Finish.'''
 
|Click '''Finish.'''
  
 
|-
 
|-
|02.17
+
|02:17
|In the '''Properties window''', select the '''Title''' property.
+
|In the '''Properties''' window, select the '''Title''' property
  
 
|-
 
|-
|02.22
+
|02:22
| And type '''Demo Application.'''
+
| and type: '''"Demo Application"'''.
  
 
|-
 
|-
|02.30
+
|02:30
 
|Press '''Enter''' to confirm.
 
|Press '''Enter''' to confirm.
  
 
|-
 
|-
| 02.32
+
| 02:32
 
|In the '''Palette''', open the '''Swing Menus''' category.
 
|In the '''Palette''', open the '''Swing Menus''' category.
  
 
|-
 
|-
| 02.40
+
| 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:50
|02.50
+
 
+
 
|Right-click the '''Edit''' item of the '''Menu Bar''' component.
 
|Right-click the '''Edit''' item of the '''Menu Bar''' component.
 
  
 
|-
 
|-
 
+
|02:55
|02.55
+
 
+
 
|Select '''Delete''' in the context menu.
 
|Select '''Delete''' in the context menu.
 
 
  
 
|-
 
|-
 
+
| 02:59
| 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.
+
 
+
  
 
|-
 
|-
 
+
| 03:07
| 03.07
+
|Make sure that 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.
+
 
+
  
 
|-
 
|-
 
+
| 03:14
| 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'''
+
  
 
|-
 
|-
 
+
| 03:22
| 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.'''
+
 
+
  
 
|-
 
|-
 
+
| 03:30
| 03.30
+
|Right-click '''jMenuItem1''' in the '''Design''' view.
 
+
|Right click '''jMenuItem1''' in the '''Design''' view.
+
 
+
  
 
|-
 
|-
 
+
| 03:35
| 03.35
+
 
|And choose '''Change Variable Name''' from the context menu.
 
|And choose '''Change Variable Name''' from the context menu.
 
 
  
 
|-
 
|-
| 03.41
+
| 03:41
 
| Rename the item to '''Open''' and click '''OK.'''
 
| Rename the item to '''Open''' and click '''OK.'''
  
 
|-
 
|-
 
+
| 03:48
| 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.
 
 
 
  
 
|-
 
|-
 
+
| 03:53
| 03.53
+
 
+
 
|Press the '''Space bar''' to edit the text of the component.
 
|Press the '''Space bar''' to edit the text of the component.
 
  
 
|-
 
|-
 
+
| 03:58
| 03.58
+
| Change the text to '''Open''' and press '''Enter''' to confirm.
 
+
| Change the text to '''Open''' and press '''Enter''' to confirm.
+
 
+
 
+
  
 
|-
 
|-
 
+
| 04:04
| 04.04
+
+
 
|Specify the action handler for the '''Open''' menu item.
 
|Specify the action handler for the '''Open''' menu item.
  
 
|-
 
|-
| 04.08
+
| 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.20
+
| 04:20
|The GUI builder automatically switches to the source view
+
|The '''GUI builder''' automatically switches to the source view.
  
 
|-
 
|-
 
+
| 04:25
| 04.25
+
+
 
|A new event handler method ''' OpenActionPerformed()'''  is generated.
 
|A new event handler method ''' OpenActionPerformed()'''  is generated.
  
 
|-
 
|-
| 04.31
+
| 04:31
 
|Let us switch back to the ''' Design'''  view.
 
|Let us switch back to the ''' Design'''  view.
  
 
|-
 
|-
| 04.35
+
| 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:39
 +
|In the ''' Palette''' , choose the '''Swing Menus''' category.
  
| 04.39
 
 
|In the ''' Palette''' , choose ''' Swing Menus'''  category.
 
 
|-
 
|-
 
+
| 04:45
| 04.45
+
|Select ''' Menu Item'''.
 
+
|Select ''' Menu Item '''  
+
 
+
  
 
|-
 
|-
 
+
| 04:48
| 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.
+
  
 
|-
 
|-
 +
| 04:53
 +
| Notice the orange highlighting that indicates where the '''jmenuItem1'''  is going to be placed.
  
| 04.53
 
 
| Notice the orange highlighting that indicates where the ''' jmenuItem1'''  is going to be placed.
 
 
|-
 
|-
 
+
| 05:03
| 05.03
+
|Right-click '''jMenuItem1'''  in the ''' Design''' view.
 
+
|Right click ''' jMenuItem1'''  in the ''' Design''' View.
+
  
 
|-
 
|-
 
+
| 05:07
| 05.07
+
| Choose '''Change Variable Name''' from the context menu.
 
+
| Choose ''' Change Variable Name''' from the context menu.
+
  
 
|-
 
|-
 
+
| 05:12
| 05.12
+
|Rename the item to '''Exit'''  and click on '''OK.'''  
 
+
|Rename the item to ''' Exit'''  and click on ''' OK.'''  
+
  
 
|-
 
|-
 
+
| 05:20
| 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.25
+
| 05:25
|Press the ''' Space bar'''  to edit the text of the component
+
|Press the '''Space bar'''  to edit the text of the component.
 
+
 
+
  
 
|-
 
|-
 +
| 05:30
 +
|Change the text to ''' Exit'''  and press ''' Enter'''  to confirm.
  
| 05.30
 
 
|Change the text to ''' Exit'''  and press ''' Enter'''  to confirm.
 
 
|-
 
|-
 
+
| 05:36
| 05.36
+
|Specify the '''action handler''' for the ''' Exit'''  menu item.
 
+
|Specify the action handler for the ''' Exit'''  menu item.
+
 
+
  
 
|-
 
|-
 
+
| 05:41
| 05.41
+
|Right-click the menu-item '''Exit'''.
 
+
|Right click the menu item Exit.
+
  
 
|-
 
|-
 
+
| 05:44
| 05.44
+
|Choose ''' Events, Action, Action Performed'''  from the context menu.  
 
+
|Choose ''' Events, Action, Action Performed()'''  from the context menu..
+
 
+
  
 
|-
 
|-
 
+
| 05:51
| 05.51
+
|The '''GUI Builder''' automatically switches to the '''Source''' view.
 
+
|The GUI Builder automatically switches to the '''Source''' view.
+
 
+
  
 
|-
 
|-
 
+
| 05:56
| 05.56
+
|A new event handler method named ''' ExitActionPerformed()''' is generated.  
 
+
|A new event handler method named ''' ExitActionPerformed()''' is generated.  
+
  
 
|-
 
|-
 
+
| 06:02
| 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.
 
  
 
|-
 
|-
| 06.12
+
| 06:12
 
|If you cannot view your ''' Navigator,'''  
 
|If you cannot view your ''' Navigator,'''  
 +
 
|-
 
|-
 
+
| 06:14
| 06.14
+
 
+
 
| go to the ''' Window'''  menu in the menu bar,
 
| go to the ''' Window'''  menu in the menu bar,
  
 
|-
 
|-
| 06.18
+
| 06:18
 
|choose ''' Navigating'''  and click on ''' Navigator.'''  
 
|choose ''' Navigating'''  and click on ''' Navigator.'''  
 
  
 
|-
 
|-
 +
| 06:25
 +
|Here, you can see the ''' ExitActionPerformed'''  node appearing above the ''' OpenActionPerformed'''  node.
  
| 06.25
 
 
|Here, you can see the ''' ExitActionPerformed'''  node appearing above the ''' OpenActionPerformed'''  node.
 
 
|-
 
|-
 
+
| 06:33
| 06.33
+
|To make the ''' Exit'''  menu-item work,
 
+
|To make the ''' Exit'''  menu item work,
+
  
 
|-
 
|-
 
+
| 06:36
| 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.
+
 
+
 
+
  
 
|-
 
|-
 
+
| 06:47
| 06.47
+
|Switch back to the ''' Design'''  mode.
 
+
|Switch back to ''' Design'''  mode.
+
  
 
|-
 
|-
 
+
| 06:50
| 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.
+
  
 
|-
 
|-
 
+
| 07:06
| 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.
+
  
 
|-
 
|-
 
+
| 07:18
| 07.18
+
|'''Rename''' the variable as "textarea".  
 
+
|Rename the variable as ''' textarea.'''
+
 
+
  
 
|-
 
|-
 
+
| 07:26
| 07.26
+
 
+
 
|Let us next add the actual ''' File Chooser.'''  
 
|Let us next add the actual ''' File Chooser.'''  
 
 
  
 
|-
 
|-
 
+
| 07:31
| 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..
+
 
+
  
 
|-
 
|-
 
+
| 07:38
| 07.38
+
|And in the ''' Navigator''', right-click the '''Jframe''' node.
 
+
|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.44
 
 
|Choose ''' Add From Palette, Swing Windows, and File Chooser'''  from the context menu.
 
 
|-
 
|-
 
+
| 07:54
| 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.01
+
| 08:01
|Right click the ''' JFileChooser'''  node and rename the variable to ''' fileChooser.'''  
+
|Right-click the ''' JFileChooser'''  node and rename the variable to ''' fileChooser.'''  
 
+
 
+
  
 
|-
 
|-
| 08.16
+
| 08:16
|Click ''' OK'''  
+
|Click '''OK'''.
 
+
  
 
|-
 
|-
| 08.19
+
| 08:19
 
|We have now added the ''' File Chooser.'''  
 
|We have now added the ''' File Chooser.'''  
 +
 
|-
 
|-
 
+
| 08:21
| 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.
+
  
 
|-
 
|-
 
+
| 08:27
| 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.
+
 
+
 
+
  
 
|-
 
|-
 
+
| 08:34
| 08.34
+
|Click to select the ''' JfileChooser''' in the ''' Navigator''' window.
 
+
|Click to select the ''' JfileChooser''' in the ''' Navigator''' window.
+
 
+
  
 
|-
 
|-
 
+
| 08:38
| 08.38
+
|Now, let's edit its properties in the ''' Properties'''  dialog-box.
 
+
|Now let's edit its properties in the ''' Properties'''  dialog box.
+
  
 
|-
 
|-
 
+
| 08:43
| 08.43
+
|In the ''' Properties''' window, below the '''Palette''',
 
+
|In the ''' Properties''' window below the Palette,
+
  
 
|-
 
|-
 +
| 08:47
 +
|change the '''dialogTitle''' to "This is my open dialog".
  
| 08.47
 
 
|Change the '''dialogTitle''' to '''This is my open dialog.'''
 
 
|-
 
|-
 
+
| 09:00
| 09.00
+
|Press '''Enter'''  to confirm.
 
+
|Press ''' Enter'''  to confirm.
+
  
 
|-
 
|-
 +
| 09:03
 +
|Now, switch to the '''Source''' mode.
  
| 09.03
 
 
|Now switch to the '''Source''' mode.
 
 
|-
 
|-
 
+
| 09:07
| 09.07
+
|Now, to integrate the ''' FileChooser'''  into your application,
 
+
|Now, to integrate the ''' FileChooser'''  into your application..
+
  
 
|-
 
|-
 
+
| 09:12
| 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.
+
  
 
|-
 
|-
 
+
| 09:20
| 09.20
+
|This example reads the file contents and displays them in the '''Text Area'''.
 
+
|This example reads the file contents and displays them in the TextArea.
+
  
 
|-
 
|-
 
+
| 09:27
| 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.
+
  
 
|-
 
|-
 
+
| 09:36
| 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.
+
  
 
|-
 
|-
 
+
| 09:51
| 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.'''
+
  
 
|-
 
|-
 
+
| 10:00
| 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.
+
  
 
|-
 
|-
 +
| 10:09
 +
|Switch to the '''Design''' mode and select the '''fileChooser''' in the '''Navigator''' window.
  
| 10.09
 
 
|Switch to the design mode and select the '''fileChooser''' in the '''Navigator''' window.
 
 
|-
 
|-
 
+
| 10:16
| 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.
+
  
 
|-
 
|-
 
+
| 10:25
| 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..  
+
  
 
|-
 
|-
 
+
| 10:31
| 10.31
+
|Type '''new MyCustomFilter()''' in the text field
|Type '''new MyCustomFilter()''' in the text field.
+
  
 
|-
 
|-
 
+
| 10:41
| 10.41
+
|and click '''OK'''.
 
+
|and Click OK.
+
  
 
|-
 
|-
 
+
| 10:44
| 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.
+
  
 
|-
 
|-
 
+
| 10:52
| 10.52
+
 
+
 
|This inner or outer class will extend the '''fileFilter '''class.
 
|This inner or outer class will extend the '''fileFilter '''class.
  
 
|-
 
|-
 
+
| 10:57
| 10.57
+
|I will copy and '''paste''' this '''code snippet'''
 
+
|I will copy and paste this code snippet  
+
  
 
|-
 
|-
 
+
| 11:04
| 11.04
+
|into the source of our '''class''', below the '''import statement'''s.
 
+
|Into the source of our class below the import statements.
+
 
+
  
 
|-
 
|-
 +
| 11:11
 +
|This inner or outer '''class''' will extend the '''fileFilter''' class.
  
| 11.11
 
 
|This inner or outer class will extend the '''fileFilter''' class.
 
 
|-
 
|-
 
+
| 11:20
| 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.  
+
 
+
  
 
|-
 
|-
 
+
| 11:31
| 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.  
+
  
 
|-
 
|-
 
+
| 11:41
| 11.41
+
|Click '''OK'''.
 
+
|Click OK.
+
  
 
|-
 
|-
 
+
| 11:47
| 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.  
  
 
|-
 
|-
 
+
| 11:55
| 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.  
  
 
|-
 
|-
 
+
| 12:00
| 12.00
+
|Let me select the '''Sample.txt''' file and choose '''Open.'''
 
+
|Let me select the '''Sample.txt''' file, and choose '''Open.'''
+
  
 
|-
 
|-
 
+
| 12:06
| 12.06
+
 
+
 
|The '''fileChooser''' displays the contents of the text file.
 
|The '''fileChooser''' displays the contents of the text file.
  
 
|-
 
|-
 
+
| 12:10
| 12.10
+
|To close the application, select '''Exit''' in the '''File''' Menu.
 
+
|To close the application select '''Exit''' in the '''File''' Menu
+
  
 
|-
 
|-
 
+
| 12:17
| 12.17
+
|In this tutorial, you learnt to:
 
+
|In this tutorial, you learnt to,
+
 
+
  
 
|-
 
|-
 
+
| 12:19
| 12.19
+
| Add a '''File chooser''' to a Java application and
 
+
|Add a '''File chooser''' to a Java application and
+
 
+
  
 
|-
 
|-
 
+
| 12:23
| 12.23
+
| Configure the '''File chooser'''.
 
+
|Configure the '''File chooser'''
+
 
+
  
 
|-
 
|-
 
+
| 12:27
| 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:
+
 
+
  
 
|-
 
|-
 
+
| 12:35
| 12.35
+
|Add a '''Save''' menu item under the menu bar.
 
+
|Add a '''Save''' menu item under the menu bar  
+
 
+
  
 
|-
 
|-
 
+
| 12:38
| 12.38
+
|Add keyboard short-cuts for all the menu items.
 
+
|Add keyboard short-cuts for all the menu items
+
  
 
|-
 
|-
 
+
| 12:42
| 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.
+
 
+
  
 
|-
 
|-
 
+
| 12:51
| 12.51
+
|I have already created a similar assignment where the '''file chooser''' 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,
+
 
+
  
 
|-
 
|-
 
+
| 13:01
| 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.
+
  
 
|-
 
|-
 
+
| 13:09
| 13.09
+
|About the Spoken tutorial project:
 
+
|About the Spoken tutorial project
+
  
 
|-
 
|-
 
+
| 13:12
| 13.12
+
|Watch the video available at the '''link''' shown on the screen.  
 
+
|Watch the video available at the link shown on the screen.  
+
  
 
|-
 
|-
 
+
| 13:15
| 13.15
+
|It summarizes the '''Spoken Tutorial''' project.  
 
+
|It summarizes the Spoken Tutorial project.  
+
 
   
 
   
 
|-
 
|-
 
+
| 13:19
| 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.
  
 
|-
 
|-
 
+
| 13:24
| 13.24
+
|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  
 
+
|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  
+
 
+
  
 
|-
 
|-
 
+
| 13:30
| 13.30
+
| Gives certificates to those who pass an online test.  
 
+
|Gives certificates to those who pass an online test.  
+
 
+
  
 
|-
 
|-
 
+
| 13:33
| 13.33
+
|For more details, please write to:'''contact@spoken-tutorial.org'''
 
+
|For more details please write to contact@spoken-tutorial.org
+
 
+
  
 
|-
 
|-
 
+
| 13:41
| 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
+
  
 
|-
 
|-
 
+
| 13:46
| 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
+
  
 
|-
 
|-
 
+
| 13:53
| 13.53
+
|More information on this mission is available at the link provided here.
 
+
|More information on this mission is available at link provided here
+
  
 
|-
 
|-
 
+
| 13:59
| 13.59
+
|This tutorial has been  contributed by '''IT for Change'''.
 
+
|This tutorial has been  contributed by IT for Change  
+
 
+
  
 
|-
 
|-
 
+
| 14:04
| 14.04
+
 
+
 
|Thank you for joining us.
 
|Thank you for joining us.

Latest revision as of 19:24, 11 June 2017

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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14