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

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

| 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

|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

| 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

| 01:51

| 01:54

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

| 02:02

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

|02:12

|02:17

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

|02:22

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

|02:30

| 02:32

| 02:40

|02:50

|02:55

| 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

| 03:41

| 03:48

| 03:53

| 03:58

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

| 04:04

| 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

| 04:31

| 04:35

| 04:45

|Select ''' Menu Item'''.

| 04:48

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

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

| 06:12

| 06:14

| 06:18

| 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

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

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

| 09:00

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

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

| 10:57

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

| 11:04

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

| 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

| 11:55

| 12:00

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

| 12:06

| 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

| 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