View source for Netbeans/C2/Adding-a-File-Chooser/English-timed

{| Border=1

| '''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 the '''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 statement'''s.

|-
| 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.