Tutorial Three: The Image Viewer
In this tutorial, we build a simple image viewer.
Part One
Startup:
- If Forte For Java is still on the Running Workspace from the previous tutorial, terminate any currently executing processes (via the Execution View listing), and switch back to the GUI Editing workspace. If you have any Forms or Editor windows open from previous tutorials, save your work if necessary, and close them.
- In the Explorer, click the Filesystems tab and navigate to the
examples
directory. Right-click theexamples
directory, and select New Package - call it imageviewer. You will see the new package appear in the Explorer.- Right-click the new package, select New From Template | Swing Forms | JFrame. Name the new JFrame ImageViewer. Click Finish - the Editor, Form Editor and Component Inspector windows will open.
- Select
ImageViewer
node in the Component Inspector and set itstitle
property to Image Viewer and press ENTER.Adding Components:
- First we will add a menu to the JFrame. Flip to the Swing tab of the Component Palette, and select JMenuBar. Click anywhere on the Form Editor surface to add the menu bar. You will see a menu appear on the form surface. In the component listing in the Component Inspector, you will see a menu bar. If you expand its node, you will see a menu listed. Initially the menu has no item.
- We will add some elements to this menu, using the Menu Editor. Right-click on the menu (
JMenu1
) in the Component Inspector and choose New | JMenuItem. You will seeJMenuItem
appear belowJMenu1
.
- Right-click on
JMenu1
again and choose New | Separator. You will see the separator appear below the first menu item.- Next we will add a second menu item. Again right-click on
JMenu1
and select New | JMenuItem. It will appear below the separator in the menu listing.- With the JMenu selected in the Component Inspector, scroll through the list of its properties to the
text
property; set this toFile
. Press ENTER to set the new value. Change itsvariable name
fromjMenu1
to fileMenu.- Select the first menu item in the Component Inspector, change its
text
to Open, and itsvariable name
to openMenuItem.- Similarly for the second menu item, change its
text
to Exit, and itsvariable name
to exitMenuItem.- Next we will add a JDesktop to the frame, where the images will be displayed. Select JDesktopPane from the Swing (Other) tab of the Component Palette, and place it on the center panel of the Form Editor surface. Set its
variable name
in the Component Inspector property listing to desktop.Adding the Code:
Now we need to generate the event handlers for the menu items. There are several ways of doing this. We will demonstrate two of them here.
Adding the event handler:
- Firstly, for the Open menu item, simply double-click the item in the component list in the Component Inspector. You will see the Editor jump towards the bottom of the code, and the new handler generated.
- For the Exit menu item, this time actually select Exit from the Menu on the Form Editor surface. You will again see the new handler generated in the Editor window.
We will now add some code to these event handlers.
Adding code for the event handlers:
- Firstly, for the File | Exit Menu item: find the
exitMenuItemActionPerformed
handler. There will be a line immediately following reading// Add your handling code here
. Add the following line immediately below this:System.exit(0);- Next, for the File | Open menu item: find the
openMenuItemActionPerformed
handler - this should be just below the Exit menu handler - and copy the following code immediately below the// Add your handling code here comment line
.java.awt.FileDialog fd = new java.awt.FileDialog (this); fd.show (); if (fd.getFile () == null) return;This code simply displays the standard File | Open dialog, and returns if the Cancel button is clicked.
- Add the following four lines immediately below this (making sure that any lines that wrap below do not wrap when you paste them to the Editor):
ImageFrame ifr = new ImageFrame (fd.getDirectory () + fd.getFile ()); desktop.add (ifr, javax.swing.JLayeredPane.DEFAULT_LAYER); ifr.setSize (200, 200); ifr.setLocation (0, 0);This is the code that handles the display of the images. We will create ImageFrame in Part Two.
Save the form from the File menu, and close the Form Editor.
In Tutorial Three: Part Two, we will build the ImageFrame.
Beginning | Prev | Next |