Prototype/Demo

The prototype or demo project is a simple web application that demonstrates a rudimentary implementation of the Notes function. Features are:

  • web application, deployable in OAS or Tomcat
  • static web page, based on Online Reg "Registration Summary" page.
  • AJAX used to read & write notes data
  • REST API used as the back end for the AJAX calls
  • Spring MVC Controller used to implement REST API
  • Data returned from REST API is in JSON format
  • Remainder of back end is standard Service, DAO, Domain classes.
  • Prototype retrieves existing note and saves changes to the note.

Source Code

The source code itself is in Subversion at:

svn+ssh://svn.mit.edu/csf-playground/notes-proto/trunk

The code is not standard - it was generated by MyEclipse for Spring, and uses JTA/JPA and a third-party DAO superclass.

The demo app is not deployed on an app server.

Screenshots

Assuming the app is running locally, the URL for the demo page would be something like:

http://localhost:8080/notes-proto/index.html

Initial State

In this shot, an existing note has been loaded from the database (via an AJAX GET request). The note is presented "read only", with an Edit button next to it.

Edit Mode

After the Edit button is pressed, the note field becomes editable. The Edit button is removed, and a Save button appears. In the demo, any changes to the text will be persisted to the database if the Save button is pressed. This happens via an AJAX POST request.

Here is the note field in Edit mode:

Adding a new Note

There is one "Add Note" button below all the comments. Clicking this will open up a new empty note field, with its own Save button at the side. Currently (10/3/2012) the Save button does not save data to the database.

Here is the new Note field, resulting in a click on "Add Note":

Miscellanea

  1. The app should deploy locally either on OC4J or Tomcat 7.
  2. You will need to set your dev database username and  password in notes-proto-dao.properties.
  3. Once deployed and running locally, the web interface is (PORT is 8080 or 8888 depending on which app server you use):
    1. http://localhost:PORT/notes-proto/ - this is the CRUD interface for maintaining the data
    2. http://localhost:PORT/notes-proto/index.html - this is the client side, a simple HTML page that uses AJAX to talk to the REST interface.
    3. http://localhost:PORT/notes-proto/Note/10 - an example of a direct call to the REST interface, for testing. This example retrieves note 10 in JSON form.
  4. To work around cross-domain issues in the browser, the REST controller is coded to allow cookies and to allow execution from any domain via these response headers:
    Access-Control-Allow-Credentials: true
    *Access-Control-Allow-Origin: **
  • No labels