[an error occurred while processing this directive] File: eclipse.shtml Creator: George Ferguson Created: Thu Sep 6 15:46:13 2012 Time-stamp: [an error occurred while processing this directive] File: templates/doc-start.shtml Creator: George Ferguson Created: Tue Dec 6 12:31:29 2011 Time-stamp: [an error occurred while processing this directive] File: site-settings.shtml Creator: George Ferguson Created: Tue Dec 6 13:49:49 2011 Time-stamp: Site (or subsite)-wide settings. [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head.shtml Creator: George Ferguson Created: Tue Dec 6 12:34:15 2011 Time-stamp: SSI variables for this template: head_title if given, else ``sitename | title'' [an error occurred while processing this directive] File: head-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:52 2011 Time-stamp: SSI variables for this template: head_title: complete content of title element if given site_title trailing part of title (if given) section_title middle part of title (if given) page_title leading part of title (if given) title title shown on page, also used as leading part of title (if given) [an error occurred while processing this directive] (none) [an error occurred while processing this directive] File: head-meta.shtml Creator: George Ferguson Created: Tue Dec 6 14:29:18 2011 Time-stamp: SSI variables for this template: meta_description meta_keywords meta_generator [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-stylesheets.shtml Creator: George Ferguson Created: Tue Dec 6 14:22:58 2011 Time-stamp: SSI variables for this template: site_stylesheet, page_stylesheet stylesheet0, stylesheet1, ...: URL for stylesheets [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: head-scripts.shtml Creator: George Ferguson Created: Tue Dec 6 14:23:19 2011 Time-stamp: SSI variables for this template: site_script, page_script script0, script1, ...: URLs of javascript scripts [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-start.shtml Creator: George Ferguson Created: Tue Dec 6 13:20:46 2011 Time-stamp: SSI variables for this template: body_class page_class page_id [an error occurred while processing this directive] [an error occurred while processing this directive] File: body-header.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:12 2011 Time-stamp: Content above banner, if any. [an error occurred while processing this directive] File: body-banner.shtml Creator: George Ferguson Created: Tue Dec 6 13:27:12 2011 Time-stamp: Duplicate URCS Drupal banner. hajim urcs
Computer Science @ Rochester
Computer Science Department : Hajim School of Engineering & Applied Sciences Skip to main content
University of Rochester

Department of Computer Science

Page does not exist.

Missing Page

Sorry. The page that you requested does not exist on the Department of Computer Science web site.

Return to the CS Homepage

[an error occurred while processing this directive] File: body-title.shtml Creator: George Ferguson Created: Tue Dec 6 14:34:49 2011 Time-stamp: SSI variables for this template: section_name First line of title on page (if any) title Title shown on page

[an error occurred while processing this directive] DMS102/CSC170D: Introduction to Web Development
Spring 2013 [an error occurred while processing this directive]
Using Eclipse for Web Development

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).

Doing Without Eclipse

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.

Another interesting option is to use Aptana Studio. This cross-platform package is derived from Eclipse, and looks similar to Eclipse, but is specialized for Web development. It includes many things that you don't need for CSC170/DMS102, but you might find it easier than trying to customize Eclipse.

Getting and Installing Eclipse

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:

  • Linux: Use your package manager or software installation app to install the latest "OpenJDK" package.
  • Windows: Download and install the Oracle JRE from java.com.
  • Macs: Systems running OSX 10.6.x (Snow Leopard) or before have Java pre-installed. However it may or may not be a security risk, so investigate the issue and you should probably disable Java applets in your browser. Systems running OSX 10.7 (Lion) or later (10.8 Mountain Lion is current) should install Oracle's JRE for MacOSX from java.com (and cross your fingers ;-)).

Setting Up Eclipse for Web Development

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:

  1. Under the "Help" menu, select the "Install New Software..." item.
  2. Next to the menu labeled "Work with:", click the "Add" button to add a new software repository from which we can download new packages (tools). Yes, it's amazing to me that this isn't set to something reasonable by default, but...
  3. Enter "Juno" (without the quotes) for the "Name" field and put the following URL in the "URL" field: 
          http://download.eclipse.org/releases/juno
  4. Wait a moment, and the list of available packages should be populated with items from this "Juno" repository.
  5. Type "web" (without the quotes) in the box labeled "type filter text" above the list of packages.
  6. Wait a few moments and the list should be filtered to include only a few packages, each of which include the word "web" in their names.
  7. Check the item named "Eclipse Web Developer Tools".
  8. Then click "Next", follow along, click "Next" again (I think), accept the license agreement, and eventually click "Finish". The package will be downloaded and added to your Eclipse installation. You will probably be told to restart Eclipse, so do that.
Now ideally we would get rid of the Java programmer packages and be left with an Eclipse that really had just the tools we want. Unfortunately this is harder to do than it should be, so we will just try to ignore the clutter and use what we need. (See update below under "Creating a Web Project".)

Creating a Web Page in Eclipse

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.)

Creating a Web Project

  1. From the "File" menu, select "New" and pull right to get "Project...". That is, create a new project.
  2. Under the "General" category, select simply "Project", meaning a generic, empty project. You could also select a "Static Web Project" from the "Web" category, but that includes some stuff that we don't really need. But it would be ok--try it!
  3. Give your project a name, click through "Finish", and you'll see your new project in the "Package Explorer" on the left-hand side of the Eclipse workspace.

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.

Creating a Web Document

  1. With your project selected, from the "File" menu select "New" and pull-right to "Other...". That is, create something new that you will pick from the choices it gives you.
  2. If you want a totally empty file like we did in class and lab, select simply "File" from the "General" category. You go on to give it a name that ends with ".html" and then click "Finish" to create the file.
  3. With the web tools installed, you can select "HTML File" from the "Web" category, which will give you some more options.
    • After giving the name of the file (ending in ".html"), you can choose to use a "template" for your file. This is very handy since it saves you typing the stuff that every HTML document has in it. For CSC170, you would make sure "Use HTML Template" is checked, and then pick "New HTML File (5)", meaning use the HTML5 template.
Either way, your newly-created file should be displayed in the center pane of Eclipse. You can also find it inside the folder created for your project in the Package Explorer.

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".

Working With Your Web Document

Eclipse can display your HTML document in two different ways:

  • "HTML Editor" view, where you see and can edit the HTML code describing the page; and
  • "Web Browser" view, where you see the document as the browser would render it, but you can't change it.
This is good. You need to have both views while you're developing a document.

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:

  • First find the file in the Package Explorer (that is, within your project folder on the left-hand side).
  • Then right-click on it (control-click for one-button Mac users) and you'll get a menu of options for acting on the file.
  • Pull right from the "Open With..." item and select either "HTML Editor" or "Web Browser" to get the corresponding view. (If you don't havet he web tools installed, I think "Text Editor" is your choice for editing.)
  • You can also drag the file from the Project Explorer into the part of the center work pane where the file tabs are. This will also open the file, although I'm not sure which view you get.

At this point, your basic work flow is as follows, and as we did in class and in lab:

  1. Edit the HTML code of the document in the editor view.
  2. Save your changes. FYI: Eclipse will mark the tab of a document with an asterisk if it has unsaved changes.
  3. Switch to the Web Browser view (or do the right-click "Open With" thing to get that view).
  4. Click the "Refresh" button, which is the set of two curved yellow arrows next to the red square "Stop" button. The builtin browser reads the document and renders the page anew.
  5. If something isn't right, switch back to the editor view to make changes and start the loop over again.

Previewing With Other Browsers

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.

  • You can just launch the browser separately (e.g. from the Start menu, the taskbar, your dock on a Mac, your launcher for linux, the command line, whatever).
    • Then you want to "Open" the file from the "File" menu. You will have to browse in order to find the file. It will be inside wherever you put your Eclipse workspace, which is usually in your home directory on Windows and Linux, and in your "Documents" folder on Macs (I think).
    • You then switch between Eclipse for editing and the browser for previewing just like you switched between tabs before. Don't forget to Save in Eclipse and then "Refresh" or "Reload" the page in the browser to see the changes.
  • You can also configure Eclipse to use an external browser for the previews, rather than its builtin browser in a tab. This is set in the Eclipse Preferences ("Window" menu > "Preferences" on Windows and Linux, "Eclipse" menu > "Preferences" on Macs).
    • Under the "General" category, select "Web Browser".
    • You can see the choices. The easiest thing is to select "external web browser" and leave "Use system web browser" checked.
    • Otherwise you need to tell Eclipse where your browsers are and how to invoke them. I suggest that you look on the web for tips on how to do this. Eclipse's documentation is really terrible.

Storing Your Work on a Flash Drive

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.

  • You can do this by telling it to use the flash drive from the beginning, when you first launch Eclipse.
  • You do this when Eclipse starts and asks you which workspace to use, if you haven't told it to stop bothering you with that question.
  • Or you can do it at any time by selecting "Switch Workspace" from the "File" menu.

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.

  1. Select "Import" from the "File" menu.
  2. Under the "General" category, select "Existing Projects into Workspace".
  3. Leave "Select root directory" checked and "Browse" to the location of the workspace from which you want to import.
  4. It should populate the list of projects for you, and can check the ones you want (or click "Select All").
  5. If you check "Copy projects into workspace", it will leave them where they were also. This is probably not a bad idea.
  6. Click "Finish" and the project should appear in your Package Explorer.

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.

An Important Note About Backups

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.

  • If you're using your own computer, back it up regularly. You can use flash drives, external disk drives, or backup services on the internet ("in the cloud"). You can use software like Windows Backup or Apple's Time Machine, or just copy files by hand.
  • If you're using a flash drive, copy the contents from one flash drive to another regularly. Make sure you put the new stuff on the backup drive, and not vice-versa!
  • Either way, you can never have enough backups. Flash drives are cheap. Buy a couple and use one as a primary and the others as backups. We are not creating huge amounts of data. It will not take long to back it up even several times.
Bottom line: Drives will die. Backups are a fact of life. You are responsible for them.

[an error occurred while processing this directive] File: doc-finish.shtml Creator: George Ferguson Created: Tue Dec 6 13:46:48 2011 Time-stamp: [an error occurred while processing this directive] File: body-footer.shtml Creator: George Ferguson Created: Tue Dec 6 14:43:56 2011 Time-stamp: Content at bottom of page, if any.

Last update: Thursday, 24-Jan-2013 16:10:32 EST

[an error occurred while processing this directive] File: body-finish.shtml Creator: George Ferguson Created: Tue Dec 6 13:47:36 2011 Time-stamp: [an error occurred while processing this directive]