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

{| Border=1

{| Border=1

|-

|-

|Hello

|Hello

|-

|-

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

|-

|-

|In this tutorial, we will

|In this tutorial, we will

|-

|-

|Create the application'''

|Create the application'''

|-

|-

|Create the application form.  

|Create the application form.  

|-

|-

|Add the '''File Chooser'''

|Add the '''File Chooser'''

|-

|-

|Configure the '''File Chooser. '''

|Configure the '''File Chooser. '''

|-

|-

|And run the application

|And run the application

|-

|-

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

|-

|-

| and Netbeans IDE v7.1.1

| and Netbeans IDE v7.1.1

|-

|-

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

|-

|-

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

|-

|-

|Let us first create the '''Java''' Application:  

|Let us first create the '''Java''' Application:  

|-

|-

|Launch the '''IDE.'''

|Launch the '''IDE.'''

|-

|-

|From the main menu, choose '''File''' and '''New Project '''

|From the main menu, choose '''File''' and '''New Project '''

|-

|-

|Choose the '''Java''' category and the Java Application project type.  

|Choose the '''Java''' category and the Java Application project type.  

|-

|-

|And click '''Next. '''

|And click '''Next. '''

|-

|-

|In the '''Project Name''' field, let's type '''JFileChooserDemo. '''

|In the '''Project Name''' field, let's type '''JFileChooserDemo. '''

|-

|-

|Clear the '''Create Main Class''' checkbox.

|Clear the '''Create Main Class''' checkbox.

|-

|-

|Make sure that the '''Set as Main Project''' checkbox is selected.

|Make sure that the '''Set as Main Project''' checkbox is selected.

|-

|-

| Click '''Finish.'''

| Click '''Finish.'''

|-

|-

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

|-

|-

|Right click on the '''Source Packages''' node.

|Right click on the '''Source Packages''' node.

|-

|-

|Choose '''New > Other..'''  

|Choose '''New > Other..'''  

|-

|-

|Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type.

|Choose the '''Swing GUI Forms''' categories and the '''JFrameForm''' type.

|-

|-

|Click '''Next.'''

|Click '''Next.'''

|-

|-

|For Class Name, type '''JFileChooserDemo. '''

|For Class Name, type '''JFileChooserDemo. '''

|-

|-

|In the Package field, type '''jfilechooserdemo.resources.'''

|In the Package field, type '''jfilechooserdemo.resources.'''

|-

|-

|Click '''Finish.'''

|Click '''Finish.'''

|-

|-

|In the '''Properties window''', select the '''Title''' property.

|In the '''Properties window''', select the '''Title''' property.

|-

|-

| And type '''Demo Application.'''

| And type '''Demo Application.'''

|-

|-

|Press '''Enter''' to confirm.

|Press '''Enter''' to confirm.

|-

|-

|In the '''Palette''', open the '''Swing Menus''' category.

|In the '''Palette''', open the '''Swing Menus''' category.

|-

|-

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

|-

|-

|Right-click the '''Edit''' item of the '''Menu Bar''' component.

|Right-click the '''Edit''' item of the '''Menu Bar''' component.

|-

|-

|Select '''Delete''' in the context menu.

|Select '''Delete''' in the context menu.

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

|Right click '''jMenuItem1''' in the '''Design''' view.

|Right click '''jMenuItem1''' in the '''Design''' view.

|-

|-

|And choose '''Change Variable Name''' from the context menu.

|And choose '''Change Variable Name''' from the context menu.

|-

|-

| Rename the item to '''Open''' and click '''OK.'''

| Rename the item to '''Open''' and click '''OK.'''

|-

|-

|Make sure that the '''jMenuItem1''' is still selected in the '''Design''' view.

|Make sure that the '''jMenuItem1''' is still selected in the '''Design''' view.

|-

|-

|Press the '''Space bar''' to edit the text of the component.

|Press the '''Space bar''' to edit the text of the component.

|-

|-

|  Change the text to '''Open''' and press '''Enter''' to confirm.

|  Change the text to '''Open''' and press '''Enter''' to confirm.

|-

|-

   

   

|Specify the action handler for the '''Open''' menu item.

|Specify the action handler for the '''Open''' menu item.

|-

|-

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

|-

|-

|The GUI builder automatically switches to the source view

|The GUI builder automatically switches to the source view

|-

|-

   

   

|A new event handler method ''' OpenActionPerformed()'''  is generated.

|A new event handler method ''' OpenActionPerformed()'''  is generated.

|-

|-

|Let us switch back to the ''' Design'''  view.

|Let us switch back to the ''' Design'''  view.

|-

|-

|Let's add a menu item to exit the ''' File Chooser.'''  

|Let's add a menu item to exit the ''' File Chooser.'''  

|-

|-

|In the ''' Palette''' , choose ''' Swing Menus'''  category.

|In the ''' Palette''' , choose ''' Swing Menus'''  category.

|-

|-

|Select ''' Menu Item '''  

|Select ''' Menu Item '''  

|-

|-

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

|-

|-

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

|-

|-

|Right click ''' jMenuItem1'''  in the ''' Design'''  View.

|Right click ''' jMenuItem1'''  in the ''' Design'''  View.

|-

|-

| Choose ''' Change Variable Name'''  from the context menu.

| Choose ''' Change Variable Name'''  from the context menu.

|-

|-

|Rename the item to ''' Exit'''  and click on ''' OK.'''  

|Rename the item to ''' Exit'''  and click on ''' OK.'''  

|-

|-

|Make sure that the ''' jMenuItem1'''  is still selected in the ''' Design'''  View.

|Make sure that the ''' jMenuItem1'''  is still selected in the ''' Design'''  View.

|-

|-

|Press the ''' Space bar'''  to edit the text of the component

|Press the ''' Space bar'''  to edit the text of the component

|-

|-

|Change the text to ''' Exit'''  and press ''' Enter'''  to confirm.

|Change the text to ''' Exit'''  and press ''' Enter'''  to confirm.

|-

|-

|Specify the action handler for the ''' Exit'''  menu item.

|Specify the action handler for the ''' Exit'''  menu item.

|-

|-

|Right click the menu item Exit.

|Right click the menu item Exit.

|-

|-

|Choose ''' Events, Action, Action Performed()'''  from the context menu..  

|Choose ''' Events, Action, Action Performed()'''  from the context menu..  

|-

|-

|The GUI Builder automatically switches to the '''Source''' view.

|The GUI Builder automatically switches to the '''Source''' view.

|-

|-

|A new event handler method named ''' ExitActionPerformed()'''  is generated.  

|A new event handler method named ''' ExitActionPerformed()'''  is generated.  

|-

|-

|The ''' ExitActionPerformed'''  node appears in the ''' Navigator'''  window above the  ''' OpenActionPerformed()'''  node.

|The ''' ExitActionPerformed'''  node appears in the ''' Navigator'''  window above the  ''' OpenActionPerformed()'''  node.

|-

|-

|If you cannot view your ''' Navigator,'''  

|If you cannot view your ''' Navigator,'''  

|-

|-

| go to the ''' Window'''  menu in the menu bar,

| go to the ''' Window'''  menu in the menu bar,

|-

|-

|choose ''' Navigating'''  and click on ''' Navigator.'''  

|choose ''' Navigating'''  and click on ''' Navigator.'''  

|-

|-

|Here, you can see the ''' ExitActionPerformed'''  node appearing above the ''' OpenActionPerformed'''  node.

|Here, you can see the ''' ExitActionPerformed'''  node appearing above the ''' OpenActionPerformed'''  node.

|-

|-

|To make the ''' Exit'''  menu item work,

|To make the ''' Exit'''  menu item work,

|-

|-

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

|-

|-

|Switch back to ''' Design'''  mode.

|Switch back to ''' Design'''  mode.

|-

|-

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

|-

|-

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

|-

|-

|Rename the variable as ''' textarea.'''  

|Rename the variable as ''' textarea.'''  

|-

|-

|Let us next add the actual ''' File Chooser.'''  

|Let us next add the actual ''' File Chooser.'''  

|-

|-

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

|-

|-

|And in the ''' Navigator''' , right click the '''Jframe''' node.

|And in the ''' Navigator''' , right click the '''Jframe''' node.

|-

|-

   

   

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

|-

|-

   

   

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

|-

|-

|Right click the ''' JFileChooser'''  node and rename the variable to ''' fileChooser.'''  

|Right click the ''' JFileChooser'''  node and rename the variable to ''' fileChooser.'''  

|-

|-

|Click ''' OK'''  

|Click ''' OK'''  

|-

|-

|We have now added the ''' File Chooser.'''  

|We have now added the ''' File Chooser.'''  

|-

|-

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

|-

|-

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

|-

|-

|Click to select the ''' JfileChooser'''  in the ''' Navigator'''  window.

|Click to select the ''' JfileChooser'''  in the ''' Navigator'''  window.

|-

|-

|Now let's edit its properties in the ''' Properties'''  dialog box.

|Now let's edit its properties in the ''' Properties'''  dialog box.

|-

|-

|In the ''' Properties'''  window below the Palette,

|In the ''' Properties'''  window below the Palette,

|-

|-

|Change the '''dialogTitle''' to '''This is my open dialog.'''

|Change the '''dialogTitle''' to '''This is my open dialog.'''

|-

|-

|Press ''' Enter'''  to confirm.

|Press ''' Enter'''  to confirm.

|-

|-

|Now switch to the '''Source''' mode.

|Now switch to the '''Source''' mode.

|-

|-

|Now, to integrate the ''' FileChooser'''  into your application..  

|Now, to integrate the ''' FileChooser'''  into your application..  

|-

|-

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

|-

|-

|This example reads the file contents and displays them in the TextArea.

|This example reads the file contents and displays them in the TextArea.

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

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

|-

|-

|In the '''fileFilter''' dialog box, select '''Custom Code''' from the combo-box..  

|In the '''fileFilter''' dialog box, select '''Custom Code''' from the combo-box..  

|-

|-

|Type '''new MyCustomFilter()''' in the text field.

|Type '''new MyCustomFilter()''' in the text field.

|-

|-

|and Click OK.

|and Click OK.

|-

|-

|To make the custom code work, we will write the '''MyCustomFilter''' class.

|To make the custom code work, we will write the '''MyCustomFilter''' class.

|-

|-

|This inner or outer class will extend the '''fileFilter '''class.

|This inner or outer class will extend the '''fileFilter '''class.

|-

|-

|I will copy and paste this code snippet  

|I will copy and paste this code snippet  

|-

|-

|Into the source of our class below the import statements.

|Into the source of our class below the import statements.

|-

|-

|This inner or outer class will extend the '''fileFilter''' class.

|This inner or outer class will extend the '''fileFilter''' class.

|-

|-

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

|-

|-

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

|-

|-

|Click OK.

|Click OK.

|-

|-

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

|-

|-

|Open any text file to display its contents in the text area.  

|Open any text file to display its contents in the text area.  

|-

|-

|Let me select the '''Sample.txt''' file, and choose '''Open.'''

|Let me select the '''Sample.txt''' file, and choose '''Open.'''

|-

|-

|The '''fileChooser''' displays the contents of the text file.

|The '''fileChooser''' displays the contents of the text file.

|-

|-

|To close the application select '''Exit''' in the '''File''' Menu

|To close the application select '''Exit''' in the '''File''' Menu

|-

|-

|In this tutorial, you learnt to,  

|In this tutorial, you learnt to,  

|-

|-

|Add a '''File chooser''' to a Java application and

|Add a '''File chooser''' to a Java application and

|-

|-

|Configure the '''File chooser'''

|Configure the '''File chooser'''

|-

|-

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

|-

|-

|Add a '''Save''' menu item under the menu bar  

|Add a '''Save''' menu item under the menu bar  

|-

|-

|Add keyboard short-cuts for all the menu items

|Add keyboard short-cuts for all the menu items

|-

|-

|Add a code snippet to the Save action, to save the file.

|Add a code snippet to the Save action, to save the file.

|-

|-

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

|-

|-

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

|-

|-

|About the Spoken tutorial project

|About the Spoken tutorial project

|-

|-

|Watch the video available at the link shown on the screen.  

|Watch the video available at the link shown on the screen.  

|-

|-

|It summarizes the Spoken Tutorial project.  

|It summarizes the Spoken Tutorial project.  

|-

|-

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

|-

|-

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  

|The Spoken Tutorial project team conduct workshops using Spoken Tutorials.  

|-

|-

|Gives certificates to those who pass an online test.  

|Gives certificates to those who pass an online test.  

|-

|-

|For more details please write to contact@spoken-tutorial.org

|For more details please write to contact@spoken-tutorial.org

|-

|-

|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

|-

|-

| 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

|-

|-

|More information on this mission is available at link provided here

|More information on this mission is available at link provided here

|-

|-

|This tutorial has been  contributed by  IT for Change  

|This tutorial has been  contributed by  IT for Change  

|-

|-

|Thank you for joining us.

|Thank you for joining us.