This document describes how to use the Eclipse Integrated Development Environment (IDE) for Web Development in CSC170. Eclipse is pre-installed on University workstations, and has some nice features for working with HTML, CSS, and Javascript. On the other hand, it's also kind of cluttered and confusing and infinitely configurable (which is both a good and a bad thing).
If you want to use something else to create your web documents and programs for the course, you are welcome to do so. On Windows, people often use Notepad or Notepad++ and just save related files in a common folder. On Macs, you can use Apple's development tools (XCode), which would be massive overkill for this course, or a text editor like TextEdit (which comes with the system), TextWrangler, BBEdit, vim, or even emacs. On Linux, you'd probably be using vim or emacs if you're not using Eclipse.
Whatever you choose (including Eclipse), you need to be able to create and edit your files, load them into your browser to view them, and ultimately upload them to BlackBoard. None of these steps require Eclipse. But if you want to use Eclipse, read on for some suggestions. And even if you're not planning to use Eclipse, please see the Important Note About Backups at the end of this document.
Eclipse is pre-installed on the University workstations. However, some of you may want to use Eclipse on your personal computer as well. This section gives you a quick set of directions that has worked for me. However it is very, very obvious that this is not as easy as it should be. And excellent rant about this is this blogpost from 2008. The situation is unfortunately no better in 2012.
Note that as of this writing, the University machines are running Eclipse version 3.7 "Indigo". The current version is (as of this writing) is 4.2 "Juno". The differences are not major, but keep it in mind if you're installing your own. Also, Ed Tech may update the lab installation any time.
Ok, the first thing you see if you go the Eclipse Download Page is great long list of more or less promising-sounding "flavors" of Eclipse. Think of Eclipse as a toolbox (they call it a "platform"). Each of the possible downloads consists of the basic toolbox (platform) and some set of tools to go with it. Now how do you know what set of tools you need? It's very hard to tell. The names are cryptic, the descriptions are poor and cryptic, and honestly I can't really help you. Also, some packages that were built for one release (e.g., Indigo) are no longer provided for the next release (e.g., Juno).
Relax. Download the "Eclipse Classic" package. This includes the core platform and the Java development environment. Ok, we won't be doing Java development in this course (as opposed to CSC171, 172, 173, ...). And it will clutter everything up with Java-related stuff, but we will just learn to ignore it.
Download the correct package for the machine on which you plan to use it. Generally speaking, a 32-bit executable will work on a 64-bit platform, and definitely not the other way around. 64-bit executables will work better on 64-bit platforms though (and may be the only things that works).
When the download is complete, unpack the archive that it gave you, usually by double-clicking it. On Macs this seems to be a compressed tar archive (".tgz") which Safari may have unpacked into an uncompressed tar archive (".tar"). On Windows you get a ZIP archive (.zip). On linux you get a .tgz file. I had no problems with this on any of the three platforms, but I will note that there is a warning about zip on Windows on this wiki page, which is also more generally about installation.
You can put the resulting "eclipse" folder anywhere you want. On a Mac, this would probably be your "Applications" folder. On Windows, "C:\Program Files" would be a good place (but note that this does not make it appear in the Start Menu, the "All Programs" list, or the taskbar). On Linux if you didn't use your package manager, you might put somewhere like "/opt", or just in your home directory. You can also just leave it your home directory or even on your Desktop. It doesn't care. You do need to be able to find it though.
Inside the "eclipse" folder that you just unpacked is the "eclipse" executable ("eclipse.exe" on Windows if Windows wants to show you the file extensions; "Eclipse.app" on MacOSX). Try to run the Eclipse executable by double-clicking it. If all goes well, you can continue to the next section on adding some web-related components to Eclipse.
If it doesn't work, the most likely problem is that you don't have a so-called "JRE" installed. You see, Eclipse is itself an application written in the Java programming language, and to run a Java application (like Eclipse) you need a "Java Runtime Environment" or JRE. Getting that depends on your platform and version and various other things. There are suggestions at the above-linked wiki page. My summary of these suggestions is:
Ok. So you have Eclipse on your machine and you launch it. The first thing it will do is ask you where you want to store your "Workspace". This is the place where Eclipse will store all your project files. You can accept the default for now. If you plan to work off a flash drive, you can tell it to use a folder on the Flash drive instead, but let's not worry about that for now.
After Eclipse finishes loading, the first thing you should see is a sort of "Topics" screen. Exactly what this looks like varies from version to version of Eclipse. Feel free to browse the helpful topics if you like. Eventually you need to get to the "Workspace" (I just click on it right away).
You could go ahead and work with Eclipse as it is. You could create an empty project, add a generic (empty) file, edit it, and so on. But you will see that the "Classic Eclipse" configuration is really setup for programmers using the Java programming language. I've found that by adding a few more tools to the toolbox, we can make Eclipse a bit more useful for developing web pages. Unfortunately this is also harder than it ought to be:
http://download.eclipse.org/releases/juno
Ok. So you have Eclipse installed and you've added the web development tools. Now to make a document, like I did in class and like we all did in lab. (Even if you haven't added the extra tools, you'll do roughly the same steps--they just might look a bit different.)
Update: I have found that if you install the web tools, it will install what Eclipse calls a "Web Perspective". What this means is that after creating a project, you can select "Open Perspective..." from the "Window" menu, pull right to "Other..." and select "Web" from the choices. This will change the menus and buttons to something much less cluttered and more suitable for web development. For what it's worth, creating a "Static Web Project" automatically switches to the Web perspective. I also have a "Web" perspective button in the upper right of my workspace, but your mileage may vary on that.
By the way, if you lose the Package Explorer for some reason (like you clicked somewhere and it vanished), you can get it back under the "Window" menu, "Show View", pull right to select "Package Explorer".
Eclipse can display your HTML document in two different ways:
We found, however, that different flavors of Eclipse seem to show different views by default. Without the web tools, it seemed to show only the browser view. With the web tools, I think it defaults to the code view, which is really what you want to start creating. In any event, it's easy to get the other view:
At this point, your basic work flow is as follows, and as we did in class and in lab:
Eclipse's builtin web browser is not bad--certainly good enough for fairly simple web pages. But eventually you will probably want to look at your pages in a "real" browser like Firefox, Safari, Internet Explorer, Chrome, Opera, etc. You have two choices.
Because you tend to work on different machines at different times, and because the lab computers are wiped out regularly, you have to look after storing your files yourself. If you're working on your own computer, then of course Eclipse stores the files there. But if you're using only the University computers, or you want to bring your files into lab without your computer, read on.
The easiest way to do this is to have Eclipse create a Workspace on your flash drive.
For example, on my Mac I created a folder called "Eclipse Workspace" (without the quotes) on my flash drive. Then since I had already run Eclipse and had already checked the "don't bug me about workspaces" checkbox, I selected "Switch Workspace" from the "File" menu. Since there were no other workspaces listed, I selected "Other..." and browsed to the folder on the flash drive. After a few moments, Eclipse restarted in the new (empty) workspace. Any projects and files you create in this workspace appear in the flash drive (you can go look at them in the Finder).
I quit Eclipse on my mac, ejected the flash drive, and plugged it into my Windows machine. I then launched Eclipse on Windows. This time I hadn't checked the "use this as the default and don't ask again" item, so it started by asking me for the workspace to use (otherwise I would have done "Switch Workspace" from the "File" menu). I clicked "Browse" and navigated to the "Eclipse Workspace" folder on my flash drive. Eclipse proceeded to launch and the projects and files that I had created on my mac were there on Windows.
Nothing about this was specific to Macs and Windows. It would work equally well between two Windows machines, such as two University computers, a University computer and your own computer, etc. Note however that swapping a flash drive between Macs and Windows requires that it be formatted as a Windows volume (which MacOSX's Disk Utility calls "DOS FAT-32" I believe).
If you have projects and files in another workspace and want to get them into the Workspace on your flash drive, you need to be working with the Workspace on your flash drive and then add the necessary files and folders to Eclipse from their location elsewhere.
Finally, one more item: if you want to rename a project or file in Eclipse, right-click and select "Refactor" then pull right to "Rename". Very intuitive. Also I found that this gave me an error when I tried to rename a project (in order to import a project with the same name), but the renaming worked anyway. Go figure.
One last thing: However you store your files: Make Backups! It is almost guaranteed that at some point your flash drive or your computer will die on you. My experience is that this seems to happen more frequently near important deadlines and just after you've done a whole lot of work.
Last update: Friday, 07-Sep-2012 13:26:11 EDT