Programming Assignment 5
Web Application Development using Eclipse

Due on Tuesday March 31 before midnight


Description

The goal of this project is to learn server-side web application development using Eclipse. More specifically, you will develop a photo-album application that uses cloud storage and JavaServer Faces (JSF).

This project must be done individually. No copying is permitted. Note: We will use a system for detecting software plagiarism, called Moss, which is an automatic system for determining the similarity of programs. That is, your program will be compared with the programs of the other students in class as well as with the programs submitted in previous years. This program will find similarities even if you rename variables, move code, change code structure, etc.

Note that, if you use a Search Engine to find similar programs on the web, we will find these programs too. So don't do it because you will get caught and you will get an F in the course (this is cheating). Don't look for code to use for your project on the web or from other students (current or past). Don't try to hire a freelancer to do the coding for you. Just do your project alone using the help given in this project description and from your instructor and GTA only.

Platform

You will do this project on your own PC/laptop using Eclipse. Directions:

Install Eclipse IDE for Java EE Developers from http://www.eclipse.org/downloads/. Choose "Eclipse IDE for Java EE Developers", download the latest version (Luna) and unzip. It will create a folder named "eclipse". Start Eclipse by going to the "eclipse" folder and by double-clicking on eclipse.exe.

Download and unzip Apache Tomcat 7.0 (the Core). Start Eclipse and click on Window → Show View → Other... → Servers to get the Servers window. On the Servers window click to define a new server then select Apache/Tomcat v7.0. Choose your apache-tomcat folder and push "finish". You should now see "Tomcat v7.0 Server at localhost" listed under the Servers tab at the bottom.

To install JSF, download the Oracle Mojarra JavaServer Faces from http://javaserverfaces.java.net/. The current stable version is JavaServer Faces RI 2.2 (do not use 1.2). Download the JavaServer Faces javax.faces-2.2.10.jar. Also download the JSTL tag libraries jstl-1.2.jar from here. On Eclipse, do: Preferences → Java/Build Path/User Libraries → New.... Use the user library name: JSF (make it a System library) and add the External JARs: javax.faces-2.2.10.jar and jstl-1.2.jar. Make the Web Page editor to be your default as follows: Preferences → General /Editors/File Associations, select *.jsp, and then make Web Page Editor the default.

To create a JavaServer Faces project on Eclipse do: select File → New → Project.., then select Web → Dynamic Web Project and set the name for the project: project5. In the Configuration section, select the JavaServer Faces v2.2 Project (it must be v2.2). On the Web Module page, check on Generate web.xml deployment descriptor. On the JSF Capabilities page, add the JSF library and click Finish. Create a album.jsp file by right-click and select New JSP File... with File name: album.jsp, then Use JSP Template: New JavaServer Faces (JSF) Page (html) and push Finish. If you don't see the GUI editor, right-click on the file text and select Open With → Web Page Editor. If you don't see the palette, right-click on the GUI canvas and select Show → Palette. You can move the palette to the right column by dragging and dropping. Use the JSF HTML sub-menu.

To add the Dropbox jar in your classpath, download the Core API SDK. Then right click on project5 on eclipse and go to the Properties → Java Build Path → Add External JARs... and add the dropbox-core-sdk-1.7.7.jar and jackson-core-2.2.4.jar from the lib in the Core API SDK.

Documentation

Use them as a reference only:

Project Requirements

Your code must use the Dropbox API to upload, delete, and retrieve photographs, and the Core API in Java. You will first need to create a Dropbox account and a Dropbox API app with both Files and datastores, which will have the App name: cse5335.

Project Requirements

You will develop a trivial photo-album application on Dropbox using JSF and Java. Your task is to support the following operations:

Note that the images that you display/delete are those stored in your cse5335 dropbox directory. You should not display any local images stored on your PC.

Detailed Directions

You need to create an album.jsp JSF file to implement the GUI from the project requirements. For example, you may start from the following JSF and improve it (this is not the full JSF):

<f:view>
  <h:form enctype="multipart/form-data">
    <h:panelGrid border="0" columns="2">
      <h:panelGrid border="0" columns="1">
        <h:panelGrid border="0" columns="2">
          <h:inputFile value="#{album.file}"/>
          <h:commandButton value="Upload" action="#{album.upload}"/>
        </h:panelGrid>
        <h:panelGrid border="0" columns="2">
          <h:selectOneListbox value="#{album.display}">
            <f:selectItems value="#{album.photos}"/>
          </h:selectOneListbox>
          <h:commandButton value="display"></h:commandButton>
        </h:panelGrid>
        <h:panelGrid border="0" columns="2">
          <h:selectOneListbox value="#{album.delete}">
            <f:selectItems value="#{album.photos}"/>
          </h:selectOneListbox>
          <h:commandButton value="delete"></h:commandButton>
        </h:panelGrid>
      </h:panelGrid>
      <h:graphicImage url="#{album.photoURL}"></h:graphicImage>
    </h:panelGrid>
  </h:form>
</f:view>
You also need to create a session bean Album with an instance album that contains the application logic. Some of its methods are:
// the URL of the photo to be displayed in the image section
String photoURL = "";
// display the chosen photo
public void display ( String url ) { photoURL = url; }
// retrieve all photo URLs from Dropbox and create a map from a file name to a photo URL
public Map<String,String> getPhotos () { ... }
public void delete ( String url ) { ... }
The getter method for album.photos (ie, getPhotos) must return a key/value map (from string to string), where the key of the map is the description (ie, the file name) and the value is the photo URL. This map is derived by querying Dropbox.
Hint: How to retrieve the URL of a dropbox image to display it in the graphicImage tag? You may use the DbxClient.createShareableUrl method. But you may have to replace the www with dl in the returned link:
client.createShareableUrl(path).replace("://www.", "://dl.");

These are just suggestions; feel free to change the code.

What to Submit

Create a WAR file by right-clicking on project5, then Export → WAR file, Web project: project5. You need to submit your project5.war, your album.jsp file, and your Album.java file using the following form.

Submit Project #5:

Last modified: 03/19/15 by Leonidas Fegaras