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

Revision as of 16:55, 14 July 2015

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.

Contributors and Content Editors

PoojaMoolya, Pratik kamble, Sandhya.np14

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

Revision as of 16:55, 14 July 2015

Contributors and Content Editors

Navigation menu

Personal tools

Namespaces

Variants

Views

Actions

Search

Navigation

Tools

@@ Line 31: / Line 31: @@
 | 00:14
 |Configure the '''File Chooser. '''
 |-
@@ Line 48: / Line 47: @@
 |00:31
 |In this tutorial, we will learn to add a File chooser to a '''Java''' Application using the '''javax.swing.JFileChooser''' component.
 |-
@@ Line 55: / Line 53: @@
 |-
 |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.
@@ Line 134: / Line 103: @@
 | 01:45
 |Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type.
 |-
@@ Line 173: / Line 141: @@
 |-
 |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.
 |-
@@ Line 233: / Line 177: @@
 |-
 | 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.
@@ Line 270: / Line 201: @@
 |-
 | 04:25
 |A new event handler method ''' OpenActionPerformed()'''  is generated.
@@ Line 284: / Line 213: @@
 |-
 | 04:39
+|In the ''' Palette''' , choose ''' Swing Menus'''  category.
-|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.
-| 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.
@@ Line 333: / Line 247: @@
 | 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.
-|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,
@@ Line 393: / Line 287: @@
 | 06:18
 |choose ''' Navigating'''  and click on ''' Navigator.'''
 |-
 | 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: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.
@@ Line 475: / Line 339: @@
 | 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.'''
-|Change the '''dialogTitle''' to '''This is my open dialog.'''
 |-
 | 09:00
 |Press ''' Enter'''  to confirm.
 |-
 | 09:03
+|Now switch to the '''Source''' mode.
-|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.
-|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.
-|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.