Spring 2009 CIS 121 Lab 7 - NetBeans Lab

weaverchurchΛογισμικό & κατασκευή λογ/κού

15 Αυγ 2012 (πριν από 5 χρόνια και 2 μήνες)

195 εμφανίσεις

1


Spring 2009 CIS 121 Lab 7
(

NetBeans Lab

)

Objectives:

(1)

Give students an introduction to a new programming IDE that permits a Java WYSIWYG development of
GUI applications.

(2)

Learn how such IDEs permit transitions between a design
-
mode and a code
-
mode

(3)

Learn ho
w to set both properties and event listener code for components in the interface.

It is assumed that all students have already loaded the latest version of NetBeans onto their machines

(see Intro to
NetBeans handout)
.

Steps: Please try to foll
ow these as
closely as possible
.

Take a peek at the bottom of page 4.

(1)

Double click on the NetBeans icon on your desktop.


(2)

Note what is available as you may click on each of the two tabs seen on the intro page (for “Welcome to
NetBeans IDE” and “My NetBeans”


lots of

cool stuff there to come back and review!


(3)

On Menu click on File/New Project in the right column select Java Desktop Application and then click on
Next. [or is it Java Application?] Accept the default settings (e.g. that this Project will be called
“Des
ktopApplication1”), and then click on Finish. You are ready to design it now! That was fairly painless!
Look at the screen and study it some… notice: (a) there is a window already for you that has a File and
Help menu already present [a progress bar on
the bottom that you might use…. Or not], (b) above the
screen work area you should see a
pair of buttons labeled “Source” and “Design”


click them both to see
what happens… that’s easy! (c) off to the top right there is a palette (scrollable) of JCompone
nts [both
Swing Containers and Swing Controls] available for clicking and dragging onto the window we are
designing


WAIT!!! We will get to that in a minute or so… (d) on the mid
-
right we see a description of the
Properties/Binding/Events/Code associated
with the currently selected component in the work area. To
see this change, click first on the File/Help menu bar of your work
-
area and see what the mid right shows
you. Then click on the main panel in your work area and now see what shows in the mid
-
rig
ht. Now click
on the bottom “status panel” in your work area window. We can use the properties on that mid
-
right
menu to update the desired properties of any part of our new window. We will see more on that later.
For now let’s get started!


(4)

Click and
drag one of the Swing Control Labels from the upper right Palette onto your work area window.
You can click and drag it to any location you want and you can click and drag on one of its corners to
resize it. Play with it! Notice that the text on the lab
el says jLabel1 and further (as seen on mid
-
right) that
the “name” (as used in our code) will also be jLabel1. On the mid
-
right screen be sure that the
“Properties” tab is selected and then scroll it if need be until the “text” field is showing. Click in

the text
-
field following the word
text

and type
My Label

there and hit the Enter key. Bingo. The label on the
screen is updated by your change in text
-
property. Now double click on the label in your work area and
you can also change the text to “
Hello W
orld
” there right on the spot. With the label as the selected
component on the mid
-
right screen click to the right of
font
. It should open up a new window that
allow
2


you to pick a font
-
face and size. Pick Times New Roman and then pick 18
-
point font. As

a result you
might need to resize the label on your screen by clicking and dragging the corner or side. Off to the right
on Properties screen click to the right of foreground double click on the “…” after it to get a color menu.
Pick some shade of red.

Ok time to test our program now… we have after all finished the classical Hello
World program! To do so, either click on Run/Run Main Project or on F6 or on the right
-
pointing green
arrow head on the tool bar. It works!!!! If you click on Help and th
e About choice you will see a default
splash screen. We could of course come back and edit that to fit our own needs.

If you look at the tabs
near the top/center (just above our work area) you will see that you can jump from DesktopApplication1
[not where

we usually want to be], to DesktopApplication1AboutBox.java [where we could edit the splash
screen], to DesktopApplicaiton1View.java [where we usually want to be during our code/design work!] It
is here that we can toggle between Design and Source modes.

Click on the upper right X to exit NetBeans.


(5)


Time for some more changes, the title bar of our program was not right, so let’s go fix that first. To do so
we edit the DesktopApplication1AboutBox.java (switch to Design mode on that screen).

Double clic
k on
the Title near the top on that one and change the Application message to “My Cool Product” (i..e update
the appTitlelabel (text) there). F6 to run

it again. Notice the title of

you
r

main window has changed and
the Help/about screen has also been cha
nged.


(6)

Ok… time to put some working parts onto
window.
Go back to the DesktopApplication1View window (by
top tab picked) if need be. Be sure you are in the Design
-
mode there. From Swing Controls palette on the
right, click and drag a Button (JButton) ov
er onto your window. Click and drag it to place it where you
want it and to size it as needed. On the right side click the text entry under the properties to change the
word on the Button to “Color my World”. Now F6 to run it again. Of course button st
ill does nothing, but
hopefully the prototype layout is looking good! Notice the change in outline color around your button
when the mouse goes over it.


(7)

In class and labs we saw that we now need to create an ActionListener and to add that listener to o
ur
button. Doing that is a LOT easier here!! Be sure that your new button is the selected component in the
work area. In the mid
-
right screen [where Properties may now be showing] click on the “Events” tab
there.
At the top of that list you will see “a
ctionPerformed” and a <none> to the right of it. Click on that
<none> and jButton1ActionPerformed should appear. With that choice selected now click on the Code
tab directly above. You are now in a dedicated handler for the button. In that method type:


if (jLabel1.getText().equals("Color me blue...")) {


jLabel1.setForeground(Color.RED);


jLabel1.setText("Color me red...");



}

else {


jLabel1.setForeground(Color.BLUE);


jLabel1.setText("Color me blue...");

}


Notice when you type this i
n that an icon appears in the code editor to the left of this line, indicating that
the line has caused some problems [in this case that the class Color is not recognized]. Click on that icon
to the left and an explanation pops up and in this case a small

window offering a remedy of
“Add import
for java.awt.Color” is offered. Click on the offer. The symbol to the left of the line goes away. Thank you
3


NetBeans! Click F6 to run it again and notice how your button works. PS: how many lines of code have
w
e actually typed in so far?
EIGHT!


(8)

Back to our work area. Click and drag to make our window significantly larger. Click and drag another
button from palette over to our screen and change its text to say “Read File”.
Then click and drag a Text
Area ove
r from the palette. Size it to be fairly tall and also fairly wide taking up the majority of the space
in your enlarged window.
Move buttons or label as needed to make it so. With the text area selected,
use the Properties tab on the right to find the f
ield “editable” with a check box next to it. Be sure that the
box is UNCHECKED.


(9)

On the Palette on the right, scroll if need be, and click on the small + to the left of Swing Windows to
cause that offering to expand. Use that to click and drag a File C
hooser from the palette over to the work
area. When you “let it go” you do not see it in your work area, as that window is part of your project, but
is not part of your window per se. However, if you look on the lower left side of the screen there is a
l
isting of all of the components available [you may need to click on the “Inspector” tab to see this. One of
the items on that list is jFileChooser1 (the one we just added). You may use this list on the left to select
some item that becomes the selected i
tem for which the properties table on the right shows its details
and permits choices.
Note, in subsequent lines we may need to use the suggestion
-
helper (clicking on left
icon) to help us import both File and FileChooser. When in doubt give that icon a
chance to help out.


(10)

Click on the Read File button and then on the Events tab on the right. Click to the right of
actionPerformed to create the needed listener


then click on the Code tab.
In that event handler enter
the line
s
:

if (jFileChooser1.showOpe
nDialog(null) == JFileChooser.APPROVE_OPTION) {


try {


jLabel1.setText("Picked: " + jFileChooser1.getSelectedFile().getName());


// Fill text area with contents.


File selectedOne = jFileChooser1.getSelectedFile();


BufferedInputStream o
urFile = null;


ourFile = new BufferedInputStream(new FileInputStream(selectedOne));


byte[] theContents = new byte[ourFile.available()];


ourFile.read(theContents,0,theContents.length);


jTextArea1.setText(new String(theContents,0,theConte
nts.length));


ourFile.close();


}


catch (Exception ex)


{ System.out.println("OH OH
--

file related problem."); }


}


[More on use of Try
-
Catch blocks later in course!]

F6 to run and test it again. Our file chooser is no
w in use
.

Up to
1
9

typed lines now.


(11)

Let us add three radio buttons to the upper right of this screen (or wherever you like on yours). Move
things to open up a bit of space. We are going to add a panel with a label and three radio
-
buttons on it.
Click and drag a

Panel from the Swing Containers on the Palette to some space on your window. Make it
4


somewhat large. On the properties for it click on the 3
-
dots to the right of Border and select Etched
Border. Put a label onto that new panel and have it say “Pick Col
or” and set the font for that label to Arial
18 point. Click and drag a Button Group to your panel. Note it will be a non
-
visible bean! But we can
name it and add radio buttons to it for grouping purposes

(its name in NetBeans, by default, is
buttonGrou
p1
)
.

As we click on various visible components on the screen to select them (to set its
properties for example) we can see where to click. To select an “invisible” bean


like our ButtonGroup


we use the Inspector Window on the right margin (you may hav
e to use Window command on menu bar
to open it if not already open). Click and drag a Radio Button onto our new panel and change its text to
“Red” [you can use a right click on it and select edit text]. For your radio button click on the <none> to
the ri
ght of buttonGroup for it and select
buttonGroup1
. Repeat the steps for our Red radio button to put
on a Black and Blue radio button (also adding them to the same ButtonGroup).

Note that you can click
and drag on the panel you added and the label and 3 r
adio buttons move with it.


(12)

Select your Red radio button. On the properties window click on the “Events” tab there. Now click on the
<none> after actionPerformed and hit Enter. It transports you to the
Source
-
Mode (versus the Design
mode). The header f
or your radio
-
button Action performed is added automatically. Type in:
jTextArea1.setForeground(Color.red);

now do the same using blue and black for the other two radio
buttons. Note: you can use the Design tab at the top to get from Source
-
mode back to
Design
-
mode. F6
time.
We typed only 22 lines ourselves to get this. Done!





At the end our screen looked like this.