Welcome to CS 142. In this class you will be learning how to program computers in a very new and fun way. We have worked hard to produce a tool set (PHUN: pronounce "fun") which will help you get used to the programming concepts you will need throughout the rest of your computing career. This lab will help you get started by introducing using the programming environment called "Eclipse". This is a complete walkthrough which will help you set up your lab computer (or home computer) for programming in this class. I have put together screen shots of each screen you will see and each thing which must be accomplished along the way to getting your first "Hello World" application up and running.
Index Of Topics
I recommend that you get a "thumb drive" or "flash drive". These are little USB sticks which you can plug into any computer anywhere, and carry your files with you. Sometimes the CS network is flaky and you might loose your files if you keep them on the network drive. This is an extremely rare occurrence, but it always seems to happen just when you've almost finished your application and you need to turn it in that night. A thumb drive also allows you to easily take your work home with you so you can program at school or at home.
Thumb drives require just a little bit of babying if you are going to use them correctly. When you first plug in your thumb drive, you will get an icon which will appear in the task bar called the "New Hardware Icon". This is the little green arrow you see in Figure 1.
|
|
| Figure 1 - New Hardware Icon |
If you have plugged in your thumb drive, but do not see this icon, click on the chevrons ( << ) and it will almost certainly appear.
Windows trys to keep your computer running quickly by not necessarily saving files out to the thumb drive right away. It keeps them in the RAM (memory) of the computer, and writes them out when it deems it the right time. This allows Eclipse (and other applications saving to the thumb drive) to think they have saved a file right away so they can resume doing work. These applications are then more responsive to you. However, if you just pull out the thumb drive when windows has not actually written out all the files, then those files will have old data in them, or worse, will be corrupted (a mish mash of new and old data). So, to get windows to write out its data so that the drive is ready to be removed, left-click (normal click) on the green arrow, and the menu you see in Figure 2 will appear.
 |
| Figure 2 - Safely remove your thumb drive |
Click on the menu item that will appear, and Window will either tell you that the thumb drive can be removed, or it will tell you it is too busy to let you do that. If it is too busy, close down all your applications, wait a few seconds (about 10) and try again. If it still fails, log off the machine and then you can just pull out the drive.
Eclipse is a free development environment for developing java applications. This tool is available as a free download at www.eclipse.org. It is installed on all the Windows lab machines. This is a very powerful tool, but can be very cryptic. A large part of this lab is helping you to get to know the terminology of Eclipse and Java so that you can program more effectively and ask questions in class with greater clarity.
If you are going to do all your development at home, you will want to download and install Eclipse on your home computer. This is not difficult, but it is not as straight-forward as installing most applications: there is no installation application. Follow these simple steps for setting up Eclipse on your home computer. If you are not installing Eclipse on your home computer, just continue reading after these bullet points:
Java is a style of programming. It was developed in 1995 by Sun Microsystems and has gone through 5 major revisions. We will be using Java 5.0, sometimes called J2SE 5.0 or J2SE 1.5. It is also available as a free download from java.sun.com. Java is a powerful and expressive way of programming, and it is also very safe. It is difficult to actually do harm to a computer while programming in Java, so you have nothing to worry about as you go forward in this class.
Before we begin with Eclipse, make sure that you have your thumb drive plugged in. We will be saving all your data (called your "Workspace" by Eclipse), to the thumb drive.
Start Eclipse by clicking on its icon in the Start Menu as shown in Figure 3:
 |
| Figure 3 - Launching Eclipse |
A purple splash screen with the Eclipse icon on it will show for a moment, and then the "Workspace Selection" dialog will appear (as in Figure 4).
 |
| Figure 4 - Workspace selection |
Click on the "Browse" Button and select your Thumb Drive, as in Figure 5
 |
| Figure 5 - Selecting your Workspace. |
Then create a new folder by clicking "Make New Folder" and name it "CS 142". Select that file by left-clicking and click the OK button. Then you should be presented with the changed window in Figure 6.
 |
| Figure 6 - Placing the Eclipse Workspace on your Thumb Drive |
Put a check mark next to "Use this as the default and do not ask again", and then click the OK button in the form in Figure 6. By putting that checkmark there, you will not be prompted with the figures 4 through 6 the next time you come back and launch Eclipse. Finally, as Eclipse starts up for the first time, you will be given the screen in Figure 7.
 |
| Figure 7 - The Eclipse Start Page |
Time to setup your workbench - the place you will spend all your time writing code for this class. The first thing to do is create a Project you will be working in. This only needs to be done once, but you may consider creating a separate project for each lab, or even just each class you are in. Click on "File->New->Project" as shown in Figure 8.
 |
| Figure 8 - Creating a new Project |
When you click on that menu item, the New Project Wizard will appear (Figure 9).
 |
| Figure 9 - The "New Project" wizard. |
Make sure "Java Project" is selected, and then click "Next >" to get to the screen in Figure 10.
 |
| Figure 10 - The properties of the new project. |
In the screen shown in Figure 10 you need to give your project a name. In this case I have chosen "Homework" but you may want to choose something like "CS142" or "CS142Lab1". Make sure that you set your project compliance to 5.0 (right in the middle of the dialog). This will ensure that you are using Java 5.0 instead of Java 1.4. When you have set things up properly, click "Finish" and you will be back at the screen in Figure 7.
Now we can finally go see our workbench. Click on the curved arrow in the center-right of the main Eclipse screen (as highlighted in Figure 11)
 |
| Figure 11 - The "Go To The Workbench" icon |
You should now see the application as shown in Figure 12.
 |
| Figure 12 - The Initial configuration of the workbench. |
If you ever want to get back to the main Eclipse Start Page, you can click the curved arrow icon in the lower right of that screen, however, I doubt you will ever want to go back.
One of the mose important places you will refer to frequently is the "Package Explorer" on the left side of your screen. This is where you will be able to find your files and open them (by double-clicking them). Already, you can see your first project listed in the package explorer (In my case, it is called "Homework").
Alright, sick of configuring things? Well, we have just a little more to do before you can write your first piece of code to make your computer do something you specifically tell it to. We need to create a place where we can put our code files so that java can compile them into code for us. In Java, similar code files are grouped into a package. A single application may have many packages, and a single package will probably have many files. Our first application is going to have one package, and one file inside that package. Right-click on your newly-created Project ("Homework" in my case") and select "New->Package". You can also click "File->New->Package" if you prefer. The right-click option is demonstrated in Figure 13.
 |
| Figure 13 - Start creating a new package |
When you select that menu option, you will get the "New Package" wizard, shown in Figure 14.
 |
| Figure 14 - New Package Wizard |
Give your package a "Name". In my case, it is called "helloworld". You cannot put symbols or spaces in your package name, and the name cannot start with numbers. You might prefer a name like one of these:
The last name, although it has a period in it, represents nested packages (one inside another) so that in the future, you could create a package called cs142.lab2, and later cs142.lab3 to differentiate your various labs from each other.
Click "Finish" once you have chosen a name for your package. Then, in the Package Explorer you will be able to see your newly create package (as highlighted in Figure 15)
 |
| Figure 15 - The newly created package is highlighted |
The other item underneath "Homework" is the Java Runtime Edition (JRE) System Library. It is critical to make Java run correctly. The reason it is there is because your code will reference/use it. Notice that it has jre1.5 next to it: this is the version of the Java Runtime Edition, which in our case is 5.0 (alternately known as 1.5, as mentioned earlier).
Finally! We can start writing code. In Java, all your code goes into class files. In the world of computing, a "class" is more like a "type" or "kind". In this case, think of class in terms of the phrase "a class of trees" or "a class of sports". These are more like groups of similar items, and has nothing to do with the classes you take in school.
To start writing code, we need to create a new class inside our new package so that we can write code for it. To do this, right-click on the package and select "New->Class" as shown in Figure 16.
 |
| Figure 16 - Creating a new class |
When you select this option, you will get the "New Java Class" wizard as shown in Figure 17.
 |
| Figure 17 - "New Java Class" wizard. |
In this dialog, give your first class a name. In my case, I gave it the name "MyFirstClass". Simialar to packages, the name you provide cannot have spaces or punctuation in it. Also, the name cannot begin with numbers.
Make sure to put a check mark next to "public static void main(String[] args)". And then click Finish. You will then be looking at the screen shown in Figure 18.
 |
| Figure 18 - Just created your first class file |
Notice at the top of the file is a statement that says "package helloworld;". Java needs this statement to help it organize your files when it compiles them into code. Notice that it matches the package you put this class file in (as can be seen in the Package Explorer").
One of the first things you will want to do, to identify your code as yours, and to help the TAs grade your code is to put a comment at the top of the class. To do this:
public class MyFirstClass/** and press "Enter"@author tag. If the @author
tag does not exist, create it on a separate line from the rest of the commentsYou can see the expected code in Figure 19.
 |
| Figure 19 - Adding comments to your code |
Comments are a way of tagging your code with human-readable information. As you go to work in the real world, you will find that you will have to come back to code you or someone else has written a long time ago (e.g. 2 weeks or more), and you will find that you cannot remember why you wrote what you did. By putting in comments, you can put little reminders to yourself or other workers about what you are doing. The compiler sees comments but just ignores them. There are 2 kinds of comments you can put into Java code:
/* followed by several lines of code,
and closed by */./**, we identified to Java that
these comments are "java docs". Java doc-style comments allow another tool to come
along and extract information about the purpose of classes and their methods to
documents that other people can read in a web browser. If this statement about java
docs does not make sense, just ignore it. You will come back to java docs in the
future.//
everything that comes after that is considered a comment, but only until the next
line of code. This can be seen in the public static void main(String[] args)
method created inside MyFirstClass.
Now notice the main method that was dumped out for you (as shown in
Figure 18). Most of the time, when you create new classes, you do not
want this code to be generated. But for each application you create, you need a
place for code to start running, and the static void main(String[] args)
method tells Java to "start here!". We are also going to start there. Put your cursor
on the line after that //TODO: Auto-generated method stub comment.
Now, to write your first piece of code, do one of the two options listed next. The
first option is a little weirder, but gets you introduced to some of the power of
Eclipse. The second option is slower, but more direct:
sysoutSystem.out.println();"Hello world"System.out.println("Hello world");
This Paragraph is an explanation of the "Content Assist" option. If you did not
use this option, proceed to the next paragraph. "Content Assist"
is a wonderful invention which has taken the programming world by storm. Programmers
are inhernetly lazy: they only want to type a few characters at a time. This led
to a lot of code with messy names like strcpy. Nowadays, because memory is so cheap,
we can finally rename methods like strcpy to more meaningful names like "StringCopy".
That just doubled the number of characters I need to type, but it is so much easier
to read. "Content Assist" helps reduce the number of keys I actually have to type:
preserving the energy I get from soda and pizza for more important things like watching
homestar runner movies. By pressing
"Ctrl+Space" you activate content assist, and it searches for all the things that
have a name similar to what you have already typed, so that you can select the option
you are looking for. If you typed sys instead of sysout,
you would have seen a menu pop up with several options available. Now in Eclipse,
sysout is a special option called a "template". Because we as programmers
frequently write data out to the console, the line System.out.println();
becomes tedious to regularly type, so that template will do all that typing for
you. "Ctrl+Space" is your friend, and by using it regularly, you can make Eclipse
do more work for you, which is why it is there.
When you are done entering this text, you should have code that looks like the code in Figure 20:
 |
| Figure 20 - My first line of code, ever! |
Congratulations, you have written 1 line of code. Now its time to actually make this code perform the work it was designed to do. To do this, you need to run your new application. To do this, in the Package Explorer, right-click on "MyFirstClass.java" and select "Run As->Java Application" as shown in Figure 21.
 |
| Figure 21 - Running your first application |
When you click this, you may be shown the dialog in Figure 22 asking you to save your unsaved files.
 |
| Figure 22 - Save unsaved files |
Click "OK" to save and continue. Normally, I press "Ctrl+S" regularly while working with my code to get Eclipse to save them for me, then I am not prompted with the "Save Resources" dialog.
After clicking "OK" you may briefly see the dialogs shown in Figures 23 and 24.
 |
| Figure 23 - Waiting for Eclipse to finish compiling |
 |
| Figure 24 - Waiting for Eclipse to launch our first application |
In the future, when you have larger projects, these dialogs may show up for a longer time. Eclipse is just trying to turn the code you wrote into code that your computer will understand. We write code using text, which is easy for people to read, but not so easy for computers to execute. A compiler takes code and turns it into either machine code or byte code, which the computer can then use to execute everything it needs to execute. Eclipse is continually compiling code for you, looking for any errors that it can find. Any time you save a file, Eclipse recompiles that file, and any other files that depend on that file. Most of the time you will never notice that it is even doing this, so that when you tell it to run, it just runs.
Anyway, in the process of reading the last paragraph, your program probably started up, ran, and then quit. Probably beore you got through the first work of the last paragraph. Let's see what happend. Your application is considered a "console application", because it dumps all its output to the "console". Back in the bad old days before computer graphics, people could only interact with computers at consoles, and would only input text, and would only get text back on their displays. Your console application is doing the same thing. Eclipse has a built-in console, which appeared for your running application. This console is located at the bottom of your Eclipse window, as shown in Figure 25.
 |
| Figure 25 - The Eclipse console showing the output of your first application |
Congratulations, you got the computer to run an entire application and to output "Hello World" to the console. Congratulate yourself: this is no small feat! Most of your life you have worked with applications that do things for you, but never have you written code which was made into an application, and run for you.
Now, let's change your code a little bit. Change the message you print out to "Hello World, From [Your Name Here]" (except, you may want to put your name in place of "[Your Name Here]"). The new code can be seen in Figure 26.
 |
| Figure 26 - The changed message to the console |
By running your application the first time (Figure 21) Eclipse remembered where that start point is, and so you can re-run your application with a single click instead of multiple menu clicks. Just click on the little Green Beetle (Figure 27) in the tool bar and your application will be run again. You could also click the green "Play" button next to the beetle, if you would like. It doesn't matter at this point.
 |
| Figure 27 - Rerun your application by clicking the "green beetle" (de-bug) button |
Your console output should now look like what you see in Figure 28 (hopefully with your name instead of "[Your Name Here]"). ;)
 |
| Figure 28 - Your updated console output |
Congratulations again! You have sucessfully changed your application and got it to do something a little different from what it used to do.
So, in the process of writing code, we programmers can sometimes make mistakes.
Thankfully we have tools like Eclipse which can help us catch many of those problems
before we even try and run our applications. Lets create one of those problems right
now to see how Eclipse tries to help us. Take off the 'n' on println
so that it reads printl. As you can see, Eclipse puts a little red
squiggly underneath the incorrect text (Figure 29).
 |
| Figure 29 - Eclipse is watching for errors in your code. |
Eclipse is telling you that it does not know where the printl method
is. If you were to put your cursor to the right of the 'l' and press
"Ctrl+Space" (to get Content Assist) it would finish typing the method name for
you.
A method is a piece of code which makes the computer do something.
main is also a method: one which you wrote. As we go forward in this
class, you will write many methods to make your computer do a myriad of fun things.
Make sure 'n' is still missing from println. Then press
"Ctrl+S" to save your file. Eclipse will now do a more-thorough recompilation of
your code. You will then get an error in your problem list (Figure
30) at the bottom of your screen. You will need to click on "Problems" to
bring that tab to the front.
 |
| Figure 30 - Problems with your code are listed under the "Problems" list. |
This gives you a small description of the error the compiler found. If you hover your mouse over the little lightbulb with the red x (to the far left of your error, like in Figure 31), you will see the same Description pop up in a tool tip. Also notice that when you saved, little red x's appears all over eclipse: in the Package Explorer, next to the name of your file in the code window (middle), and in the Outline of your class (far right).
 |
| Figure 31 - Errors make Eclipse light up like a Chrismas tree with helpful error flags |
Another helpful error flag is the little red square that appears just to the right of the scroll bar in the code window (just below the little blue square). By clicking on this little red square, Eclipse will go right to that error. When you have large code files, and have to scroll a lot to get from error to error, these little red squares become a very handy shortcut. As you scroll, these squares will not move: they show you where all the different messages are in your whole file, not just where you are looking on the screen.
There are 3 other kinds of flags that can appear in your code, so 4 in total.
| Color | Meaning | Description |
|---|---|---|
| Red | Error | This is a problem that must be fixed for your code to even run |
| Yellow | Warning | This is a potential problem, but the code will still run. These are often just notes of unnecessary code |
| White-Yellow | Reference | When you click on a method, you will see all the places it is used (inside that class) light up down the right |
| Blue | Comment | This is a TODO (or some other kind) of comment that needs your attention sometime |
You can see examples of the other three flags in Figure 32.
 |
| Figure 32 - The different flags available in Eclipse |
You can see the two yellow, and the blue tags in Figure 32.
However, the two yellow tags are hard to differentiate until you create them yourself.
Type import java.lang.Double; at the top of your class file, just below
the "package" declaraition (first line), and you will see a Warning tag show up.
Then click on println directly, and a moment later it will be highlighted
in yellow. Then you can see the flag show up next to the scroll bar.
Notice also that the Warning flag shows up in the "Package Explorer", "Code window", "Outline", and "Problems" windows as little triangles with exclamation points. This is to help you track down potential problems easily.
Eclipse is a wonderful tool, and has a lot of ways to configure it to make your life easier. This section will help you set up some configuration options I have found to be very helpful to have while I program.
First, we need to get to the Preferences dialog so that you can configure the properties of Eclipse. To do this, click the "Window->Preferences..." menu item as shown in Figure 33.
 |
| Figure 33 - Getting to the Preferences dialog. |
This will open up the dialog shown in Figure 34.
 |
| Figure 34 - The preferences dialog |
Once you are in the preferences dialog, the first thing we want is to start showing line numbers in your code editor. Expand to and click on the node "General->Editors->Text Editors". This will show the dialog in Figure 35.
 |
| Figure 35 - Showing line numbers |
Once you are at that screen, put a check mark next to "Show line numbers" and then click "OK" Your code window will now look like the window in Figure 36.
 |
| Figure 36 - Line numbers shown in the code editor (down the left side) |
Another useful setting is to have Eclipse warn you when you do not have the @Override
annotation in the places it should be. Do not worry about what this annotation is
or what it does for now, but you will start using it eventually and it is worth
getting errors about it, because it helps you have more explicit code. Get back
into the Preferences dialog (Figure 33), and then navigate
to and click on the "Java->Compiler->Errors/Warnings" node. You will see the
dialog in Figure 37.
 |
| Figure 37 - Java compiler errors and warnings preferences dialog |
Click on "Annotations" and you will get the listing of options in Figure 38.
 |
Figure 38 - Setting missing @Override annotations to cause compiler
errors |
In that dialog, go down to the "Missing @Override annotation" option
and change it to a "Warning" instead of "Ignore". After you click "OK" Eclipse will
tell you that it needs to rebuild everything. Click "OK" and you can continue using
Eclipse like normal.
For this section of CS 142, we have put together a novel framework for you to use to develop applications in Java. This framework is 3D and produces 3D objects you can view and make move around in a 3D world. To get started, however, you need to tell Eclipse where this framework is so that your code can actuall use it.
When Eclipse is building applications and tries to run them, it uses the Build Path to find all the classes that you will reference in your code. To reference the PHUN Framework, we need to configure the Build Path for your project in Eclipse. Right-click on your Project ("Homework" in my case), and click on the "Build Path->Configure Build Path...", as shown in Figure 39.
 |
| Figure 39 - Configuring the Build Path in Eclipse |
In the Properties window that opens, click the Libraries tab, then click the "Add External JARS..." button on the right side, as shown in Figure 39.1.
 |
| Figure 39.1 - Configuring the Build Path in Eclipse |
You will be presented with the JAR Selection dialog shown in Figure 40.
 |
| Figure 40 - JAR Selection dialog |
In this dialog, under the file name, type in C:\java\cs142.jar and then click "Open". If you are working at home, you will have to get the JAR yourself, and place it somewhere useful. Once you click "Open" you will see a new addition to your Libraries in your Properties window, as can be seen in Figure 39.2.
 |
| Figure 39.2 - The PHUN Framework is added to external Libraries |
Click OK when you're finished adding the PHUN Library. Once you click "OK" you will see a new addition to your project in your Package Explorer window, as can be seen in Figure 41.
 |
| Figure 41 - The PHUN Framework is now referenced |
Now that you have the PHUN Framework referenced, you should not ever need to add this JAR again. If you plan to create a separate project, instead of a separate package, for every lab you do, then you will have to add this jar to every project you create.
Now, there is an example application inside that JAR which we can run to see a little about what our framework can do. To run this example application, right-click on the cs142.jar, and click on "Run As->Java Application" as shown in Figure 42.
 |
| Figure 42 - Running the example application inside the CS 142 JAR |
Once you click that, a new window should show up, showing the available sample projects. The window will look like the image in Figure 42.1.
 |
| Figure 43 - The PHUN application output |
Select the "DancingMan" item and click "OK". A new window should show up, running the example application, and should look like the image in Figure 43. You may try out any of the 'samplecode' items in the list.
 |
| Figure 43 - The PHUN application output |
Congratulations! You have now included the work provided by someone else (in this case, the CS 142 Teacher and TAs), and were able to run it. As we go forward in this class, we will be referencing this JAR much more, and will be writing a lot of code which uses it.
What is a JAR? A JAR is a Java ARchive. If you are to produce a lot of code, you will be producing a lot of java files. If you want someone to be able to use your code, it can be really painful to give people a whole mess of files and expect them to find their way around those files. For this reason, you can create a JAR to group up all your code into a single file so that it is easier for people to move around and use.
I hope this labe went well for you, was understandable, and helped you learn a lot of the terms you need to know and use to get going in this class.
You may have noticed, in the process of doing this lab, that Windows popped up a Security Alert about Java, like you can see in Figure 44.
 |
| Figure 44 - The Windows Firewall at work |
This is just a warning that happens whenever an application tries to connect to the Internet. Eclipse does this periodically, and Java applications may do this. However, you do not have access to the System Configuration so that you can let Java access the Internet. Only the System Administrators can alter this. Just click "OK". In this class, we will not be doing anything that will cause these kinds of Alerts, and your applications will not be bothered by this blocking which Windows does.
Another thing you may consider doing is to make launching Eclipse easier by putting Eclipse on your desktop. You can do this by right-clicking on the Eclipse icon in the start menu, and clicking "Send To->Desktop create shortcut)", as shown in Figure 45.
 |
| Figure 45 - Sending Eclipse to the Desktop |
By sending that icon to the desktop, you will then have the Eclipse icon on your desktop so that you can double-click it to launch it.