Spring 2009 CIS 121 NetBeans Intro.doc

weaverchurchSoftware and s/w Development

Aug 15, 2012 (5 years and 9 months ago)


CIS 121 : Introduction to

Activity 1: Download It.

Your work in previous labs and in Chapters 13 and 15 of your textbook have relied on the use of 3
primary layout managers (i.e. FlowLayout, BorderLayout, and GridLayout). While these “work” they

a bit clumsy in trying to align things the way that you may have in your mind’s eye. What is needed is a
GUI development tool that works in a What
Get (WYSIWYG “wizzy
wig”) fashion.
Other tools (such as Visual Studios, JBuilder

and some older Eclipse plug
ins) do provide such a
development environment. These tools allow you to seamlessly switch back and forth between the
mode of making your windows look the way that you want (by click and drag sizing and
positioning) and

the Code
mode where you do such things as write your main application and methods
to implement the needed Listeners for your JComponents. We would like to experience the use of such
a tool! Java itself was first brought to us by Sun Microsystems Inc.

and they continue to play a MAJOR
support role in its continued development! Sun offers a free Java programming IDE that supports the
WYSIWYG development of GUI’s while at the same time supporting most of the coding enhancements
that Eclipse provides. Th
eir tool is called NetBeans. So, to broaden your exposure to design and
development tools we are now including a learning experience that uses NetBeans. We will soon have a
lab experience that will use this tool. To give us more time in lab to work on i
t we would like you to
come to class with NetBeans already loaded onto your laptop. What follows are some directions on
getting NetBeans.

Step 1
: In browser go to the web site:

Step 2
: Click on Download under Java SE column (the first)

39 MB… if you care to, and have space to
burn, you can download the “richer” packages.

Step 3
: Click on Save file to save the installation file that will download.

Step 4

t 39 MB download. That should download the file:

windows.exe (as of February 2009

Version 6.5 of NetBeans).

Step 5
: Run that exe. Accept the license agreement [like you have a choice…]. Click on “Next” taking
their defaults

unless you need for some reason to change one or more of them.

Step 6
: TOTAL installation onto hard drive is about 152 MB. Do it… unless you are too short on space…
in which case tell your Mom/Dad that you need a new laptop!

Step 7
: Register your use of p
roduct for later update info (not required).

Step 8
: Double click on NetBeans IDE 6.5 on your desktop. Peruse around and look over some of the
cool tutorials and intros available. You are now ready for our NetBeans Lab that is coming soon!

Activity 2 :

System Version of Hello World

This first
exercise is to just show you how to get into NetBeans, create a standard output device
program and to get it to run. Yes… as required by law we will call it HelloWorld.

Step 1
: Double click on NetBeans icon

on desktop and then on the menu bar select File / New Project.
On the resulting screen in the right column click on Java Application (later for a GUI front end we will be
picking Java Desktop Application). Now click on Next button. Edit the project nam
e to be
HelloWorldVersion1. Observe on the screen that your projects from NetBeans will be stored in a folder
called NetBeanProjects in your MyDocuments. Now click on the Finish button.

Step 2
: Look at the screen for a minute. What exactly you see may d
epend on how you may have left
NetBeans from any prior work with it. But in general the screen will have

(a) a menu/tool bar at the top (as usual),

(b) in the center of the screen will have a “work area” where you can type in your Java code or as we

see in an upcoming activity you can use a tab at the top of that work area to switch to Design mode
(versus Code mode)

In design mode you will be able to create GUI layouts for your program interfaces,

(c) on the bottom of the screen you may see one or
more windows where [based on tab you select] you
may be seeing the output window [where System.out stuff is sent] or a Task window

the outcome of
the compile phase is also shown in that output window at the bottom,

(d) on the left and right sides of th
e screen we can have multiple windows that may be in the state of :

(can open using Window / select to open or reopen one of them), (2)
Open but minimized

[icon on left or right margin, NOT the bottom]

in this state the window will reopen if y
ou mouse over
the icon for it on the left or right margin

from this state you may choose to close or “Pin” the window
or (3)
Open and Pinned
. In this last state it stays open on the screen without the mouse being on it.
From this state you may choose t
o close or minimize the window. In future exercises for example we
will open up “Palette” and “Properties” windows that will be on the right side of the center work area.
Play with these for a few minutes! Close all left
windows if any are open. Go to
the Window command
on the toolbar and pick File. This will open on the left side of the screen either “Pinned” to the screen or
minimized to an icon on the left margin. Mess with it and a few other of the named windows like
Properties and Palette [they g
o to the right].

Step 3
: In main method type


And stop. You see that NetBeans wants to help. Finish the line
(intentional typo):


Hello World


Observe the small red stop sign to the left
of the line to indicate an error. Yo
u can click on that icon to get a description of that error. Fix the tt
problem. To compile and run our program we can either: (a) click on the right
pointing green arrow
head on the tool bar, or (b) hit F6, or (c) click on Run and then select Run Main Pr
oject. Done! The
NetBeans IDE provides MOST of the same nice features that you may have found in Eclipse (including
that loved auto
completion feature!). Where NetBeans will “shine” (over Eclipse) is in its ability to
create GUI
based applications that
support What
Get (WYSIWYG) screen layouts.

Activity 3:
GUI Version of Hello World

In the previous version we just used a non
GUI System output to show our message. Now we create a
frame into which to add our Hello World message.

: Double click on NetBeans icon on desktop and then on the menu bar select File / New Project.
On the resulting screen in the right column click on
Java Desktop Application
. Now click on Next
button. Edit the project name to be HelloWorldVersion2. Now

click on the Finish button. Some files
from previous work (like version 1 of HelloWorld) might still be open and thus cluttering up our list of
open files. On that file
tab above the work area click on the X to close all except:
va, HelloWorldVersion2View.java, and HelloWorldVersion2AboutBox.java
(those are the only 3 related to this task).

Step 2
: Look at the screen for a minute. What exactly you see may depend on how you may have left
NetBeans from any prior work with it. But
you should see in the center work area a Window that
already has File and Help in the menu bar. On the right hand side you are “probably” seeing a Palette
Window in the upper right “pinned” to the screen and a Properties Window pinned to the lower right.

you do not see these, then use the Window command on the menu bar and click on those two to
“open” them. Once opened a given window is either

(always showing) or is

(an icon
on the side margin that opens only when the mouse goes over
it). For either of those two cases you can
switch to the other case by using an icon in the upper right of it. NetBeans has already written an entire
program for you (albeit a do
nothing one). Run it now [recall: F6 or Green Right Arrow]. Try the
About option. We can later come back and put our own data into that about

Step 3
: Just above the work area, but under the line of tabs for currently open files, you should see two
buttons with Design and Source on them. Use those two buttons on
ce or twice to go back and forth.
Notice the changes to the screen when you do this! In particular the windows showing on the left and
right “change” as your working
mode changes. Leave yourself in the Design mode for now. Click and
drag on the screen
that you are creating to make it larger. Now be sure that the content of the two
windows (for Palette and Properties) is large enough to read. You can click and drag on border
between those and work area to get more space. Click on a few different

parts of your window (the one
you are designing). Look at the data on the right in the Properties Window. It is showing you all of the
properties/settings for such things as your JMenuBar (at top), your JPanel (middle) and your
JProgressBar (lower right
). Now click and drag a “Label” from the Swing Controls part of the Palette
window (upper right) onto your window in your work area. Now click and drag to move it about, and to
expand it. Double click on the word jLabel1 and change the text for that lab
el to “Hello World” and hit
the Enter key. F6 to run it! Now in Design mode click on that label to be sure that it is the “selected
component” on the screen (so its properties are showing on lower right). Now in the Properties where
you see the one labe
led “foreground” click on the …Button on the right (3 dot button). Click on some
color on the Color selection screen and then OK. Now click on the three dots to the right of the font
property. Use that screen (with scrolling) to set the font to Times Ne
w Roman and a Size of 48 (points).
Depending on the size you may have to click and drag on the design screen to make your label larger so
that the full message shows. Click and drag to move your label to the center. F6. Done!