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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 30: Line 30:
 
|-
 
|-
 
| 00:14
 
| 00:14
−
|* Configure the '''File Chooser.''' and
+
|* Configure the '''File Chooser''' and
  
 
|-
 
|-
Line 38: Line 38:
 
|-
 
|-
 
| 00:19
 
| 00:19
−
|For this demonstration, I am using '''Linux Operating System, Ubuntu v12.04'''  
+
|For this demonstration, I am using the '''Linux Operating System, Ubuntu''' version '''12.04'''  
  
 
|-
 
|-
 
| 00:26
 
| 00:26
−
| and '''Netbeans IDE v7.1.1'''.
+
| and '''Netbeans IDE''' version '''7.1.1'''.
  
 
|-
 
|-
Line 50: Line 50:
 
|-
 
|-
 
|00:42
 
|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:52
 
|00:52
−
|Let us first create the '''Java''' Application:  
+
|Let us first create the '''Java Application''':  
  
 
|-
 
|-
Line 66: Line 66:
 
|-
 
|-
 
|01:03
 
|01:03
−
|Choose the '''Java''' '''category''' and the '''Java Application''' '''project type'''.  
+
|Choose the "Java" '''Category''' and the "Java Application" '''Projects''' type.  
  
 
|-
 
|-
Line 98: Line 98:
 
|-
 
|-
 
| 01:41
 
| 01:41
−
|Choose '''New > Other'''  
+
|Choose '''New > Other'''.
  
 
|-
 
|-
Line 122: Line 122:
 
|-
 
|-
 
|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".
  
 
|-
 
|-
Line 154: Line 154:
 
|-
 
|-
 
| 03:07
 
| 03:07
−
|Make sure the '''Menu Bar''' is selected before you drag another '''Menu Item'' here.
+
|Make sure that the '''Menu Bar''' is selected before you drag another '''Menu Item'' here.
  
 
|-
 
|-
Line 186: Line 186:
 
|-
 
|-
 
| 03:58
 
| 03:58
−
| Change the text to '''Open''' and press '''Enter''' to confirm.
+
| Change the text to '''Open''' and press '''Enter''' to confirm.
  
 
|-
 
|-
Line 214: Line 214:
 
|-
 
|-
 
| 04:39
 
| 04:39
−
|In the ''' Palette''' , choose ''' Swing Menus''' category.
+
|In the ''' Palette''' , choose the '''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
 
| 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.  
  
 
|-
 
|-
Line 234: Line 234:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 262: Line 262:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 302: Line 302:
 
|-
 
|-
 
| 06:47
 
| 06:47
−
|Switch back to ''' Design'''  mode.
+
|Switch back to the ''' 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'''.
  
 
|-
 
|-
Line 314: Line 314:
 
|-
 
|-
 
| 07:18
 
| 07:18
−
|Rename the variable as "textarea".  
+
|'''Rename''' the variable as "textarea".  
  
 
|-
 
|-
Line 334: Line 334:
 
|-
 
|-
 
| 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'''.
  
 
|-
 
|-
Line 342: Line 342:
 
|-
 
|-
 
| 08:16
 
| 08:16
−
|Click ''' OK'''.  
+
|Click '''OK'''.  
  
 
|-
 
|-
Line 354: Line 354:
 
|-
 
|-
 
| 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'''.
  
 
|-
 
|-
Line 366: Line 366:
 
|-
 
|-
 
| 08:43
 
| 08:43
−
|In the ''' Properties''' window below the '''Palette''',
+
|In the ''' Properties''' window, below the '''Palette''',
  
 
|-
 
|-
Line 374: Line 374:
 
|-
 
|-
 
| 09:00
 
| 09:00
−
|Press ''' Enter'''  to confirm.
+
|Press '''Enter'''  to confirm.
  
 
|-
 
|-
Line 382: Line 382:
 
|-
 
|-
 
| 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 '''Text Area'''.
  
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 406: Line 406:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 414: Line 414:
 
|-
 
|-
 
| 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.  
  
 
|-
 
|-
Line 430: Line 430:
 
|-
 
|-
 
| 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'''.
  
 
|-
 
|-
Line 438: Line 438:
 
|-
 
|-
 
| 10:57
 
| 10:57
−
|I will copy and '''paste''' this code snippet  
+
|I will copy and '''paste''' this '''code snippet'''
  
 
|-
 
|-
Line 446: Line 446:
 
|-
 
|-
 
| 11:11
 
| 11:11
−
|This inner or outer class will extend the '''fileFilter''' class.
+
|This inner or outer '''class''' will extend the '''fileFilter''' class.
  
 
|-
 
|-
Line 494: Line 494:
 
|-
 
|-
 
| 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:
  
 
|-
 
|-
Line 514: Line 514:
 
|-
 
|-
 
| 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.
  
 
|-
 
|-
Line 522: Line 522:
 
|-
 
|-
 
| 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.  
 
   
 
   
 
|-
 
|-
Line 543: Line 543:
 
| 13:33
 
| 13:33
 
|For more details, please write to:
 
|For more details, please write to:
−
contact@spoken-tutorial.org
+
'''contact@spoken-tutorial.org'''
  
 
|-
 
|-

Revision as of 18:36, 7 June 2016

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

Retrieved from "https://script.spoken-tutorial.org/index.php?title=Netbeans/C2/Adding-a-File-Chooser/English-timed&oldid=26977"