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

|Hello.Welcome to the tutorial on '''Adding a File Chooser''' to a '''Java Application'''.

|In this tutorial, we will:

|Create an '''application''', Create the application '''form'''.  

|Add the '''File Chooser''',

|00:14

|Configure the '''File Chooser''' and

| '''run''' the '''application'''.

|For this demonstration, I am using the '''Linux Operating System, Ubuntu''' version '''12.04'''

| and '''Netbeans IDE''' version '''7.1.1'''.

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

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

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

|Choose the "Java" '''Category''' and the "Java Application" '''Projects''' type.  

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

|Clear the '''Create Main Class''' check-box.

|Make sure that the '''Set as Main Project''' check-box is selected.

|Here, we will create the '''JFrame''' '''container''' and add a few components to it.

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

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

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

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

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

| and type: '''"Demo Application"'''.

|Next, let us add a menu item that allows to open the '''FileChooser''' from the running application.

|Make sure that 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'''.

|Drag it to the '''Menu Bar''' and drop it onto the '''File''' item of the '''Menu Bar.'''

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

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

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

|Select ''' Menu Item'''.

|Drag it to the ''' Menu Bar''' below the '''Open''' menu item on the '''form'''.

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

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

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

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

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

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

|Right-click the menu-item '''Exit'''.

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

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

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

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

|let us include the statement ''' System.exit(0);'''  into the ''' ExitActionPerformed()'''  method body.

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

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

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

|If your ''' Navigator'''  window is not open, choose ''' Window, Navigating, a Navigator''' to open it.  

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

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

|Click '''OK'''.

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

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

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

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

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

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

|This example reads the file contents and displays them in the '''Text Area'''.

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

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

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

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

|and click '''OK'''.

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

|I will copy and '''paste''' this '''code snippet'''

|into the source of our '''class''', below the '''import statement'''s.

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

|Click '''OK'''.

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

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

|In this tutorial, you learnt to:

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

| Configure the '''File chooser'''.

|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 keyboard short-cuts for all the menu items.

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

|I have already created a similar assignment where the '''file chooser''' displays the '''Save''' option under the '''File''' menu

|and gives you the option to '''save''' the text file which you open.

|About the Spoken tutorial project:

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

|It summarizes the '''Spoken Tutorial''' project.  

|The Spoken Tutorial project team: * conducts workshops using Spoken Tutorials.  

| Gives certificates to those who pass an online test.  

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

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

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

|This tutorial has been  contributed by '''IT for Change'''.