CS422

Lab4 - PeteTwitt

IMPORTANT: Here is the  grading form that will be use in the presentations. Make sure to go over the tests in this form at least 3 times in the machines you will be using in the presentation to make sure that your presentation will go smoothly. We reserve the right to change (slightly) this form before the presentation.

1. Introduction

In this lab you will write a web application called "PeteTwitt" that will have a functionality similar to the one offered by twitter. After registering, a user will be able to update periodically short descriptions of what she/he is doing. Other people will be able to search the name of that person and get a list of the most recent entries typed by that user. This is a team project with a maximum of 4 members.

2. Description

You will be using the following tools:
You will install those three products in your computer to setup your development environment.

Also, I recommend you that you get familiar with the original Twitter application before you start this project so you get an idea of how the aplication should work. Create your account and subscriibe to your tweets of your friends.

3. Setup your environment.

To create the environment follow these steps:

a) Install Flex - You can get a 60 day trial version from the "Flex Page". Select "Try Flex Builder 3". You also can get Flex for educational purposes by following the procedures in "Flex For Education"

b) Install JDK 1.6 - This is the Java JDK that you will use to compile your servlets and to run Tomcat. You can get it from the Java SE web site. Select the version that includes "netbeans" if you are comfortable with that environment. Otherwise, you can use the editor and the "javac" command line command.

c) Install Tomcat and initial files. Tomcat and the initial flex files are provided in the file petetwitt.zip. Download this file and unzip it in C:.

d) Set the flex environment. Open Flex and select File->Switch Workspace->Other and browse into C:\petetwitt\petetwitt-flex-workspace and select it. The select Run->Debug->PeteTweet You will get a dialog window with a basic twitter application.

e) Run the tomcat server. Open a windows' cmd window by going to Start->Run and type cmd. Then type "cd C:\petetwitt" and type build-petetwitt.bat. You may need to edit the file build-petetwitt.bat  to change the variable JAVAC if your JDK is in a different place. Then type C:\petetwitt\tomcat\bin\startup.bat to run tomcat.

f) Connect your browser to petetwitt. To connect your browser to the tomcat server connect to http://localhost:8080/petetwitt in your browser. You will see the basic twitter dialog.

In The basic twitter dialog type "Hello" and click submit.

If you get a security error, then you will need to right click on the twitter dialog, and select Settings->Advanced->Global Security Settings Panel->Edit Locations->Add Location->Browse for Files and browse C:\petetwitt\petetwitt-flex-workspace\petetwitt\bin-debug\petetwitt.swf and select Open. Then close the window. this will allow to run your petetwitt application from inside your Flex dev environment.
Now in Flex select Run->Terminate to kill the previous petetwitt app and select Run->Debug to restart it again. Type in the "What are you doing?" field and press submit multiple times. This will send the twitts to the server and get back a list of all "previous petetwitts".

4. Developping the Client Side

In Flex there are two types of files: .mxml files and .as Action Script files.  Mxml files are XML files that describe the layout of the UI elements such as buttons, lists, text areas, labels etc. You can also add some snippets of Action Script but it is recommended that if the code section is large you create a separate ActionScript file with the name of the class.

The User Interface (UI) will be completely implemented in Flex. You will use the Flex environment that you installed before The Flex files are in the folder C:\petetwitt\petetwitt-flex-workspace\petetwitt\src. Currently, the initial UI that is contained in petetwitt/ has two files: petetwitt.mxml and com/twitt/TwittSender.as

For example, the file petetwitt.mxml defines the initial dialog for petetwitt that contains the different fields. You can see the components of the dialog by selecting the ">>" link in the upper right hand corner of Flex to change  the Flex perspective to "Flex Development", select petetwit.mxml and the press in the "Design" button to switch to the design view. 

The bottom of the file petetwitt.mxml describes the Buttons, labels and TextArea that define the dialog as well as a piece of ActionScript code that describes initialization code what to do when the submit button is pressed. the submit button calls the method twittSender.submit.

The method twittSender() submit is defined in com/twitt/TwittSender.as. Submit() assembles a request like:

  http://localhost:8080/petetwitt/ ui?command=submitTwitt&twittText=Hello how are you&user=me

Then submit() registers a callback method twittCompleteHandler that is called when the response comes back.

This request is sent to the tomcat server that concatenates the current twitt with the old twitts and returns a string of the form "twitt1| twitt2 | twitt3 ... "

When the response comes back, the function twittCompleteHandler is called. This function gets the response data and then  calls the split function that creates an array and passes the twitts list to the twittList element in the twitter dialog.

Check other elements the you can use by browsing the Flex 3 Component Explorer. You can see here components like buttons, text areas, tabs, etc. You will also see the mxml source  needed to generate these elements

5. Developping the Server Side

The server Java files are in C:\petetwitt\tomcat\webapps\petetwitt\WEB-INF\classes\com\petetwitt. The main class is UIMain.java. You will need to add the functionality there and create other classes if necessary. Currently this file processes the twitts and adds them to a string variable. You will add fuunctionality to store it in a database.

In the file UIMain.java there is a class UIMain that extends the class HttpServlet. The UIMain implements two main methods: doGet() and doPost() that are called when a request arrives. In the code of doGet() you can see how the URL variables are obtained by using the call like:

String command = request.getParameter("command");

Also, data is sent back to the client by calls such as:

out.println(allTwitts);

Currently all twitts are stored in the variable allTwitts. You will need to store that information in a database together with the date and the user.

6. Adding the database

We recommend also to install MySQL and use this database for storing the user information and the twitts. You can download the MySQL community server from http://dev.mysql.com/downloads/mysql/5.1.html#win32.
It is imp[ortant that you remember the password you have chosen during the installation since you will use it later.

Also, you will need to download the MySQL/Java connector from http://dev.mysql.com/usingmysql/java/. The connector allows the communication between Java and MySQL using JDBC. Place the connector jar file mysql-connector-java-5.1.7-bin.jar in the tomcat/lib file. Also, add this file in the CLASSPATH in the build-petetwitt.bat so you can compile and run the tomcat server.

There is a good article that walks you through to setup MySQL, create your database, and using it from Java in:

http://www.developer.com/java/data/article.php/3417381

You will need to create your own Data Base tables based on the information you want to store. Use the sql client command line that you can execute with Start->All Programs->MySQL->MySQL Server 5.1->MySQL Client Command Line. To see how to create and use the database see the links: Creating a database, Creating tables, Loading data into a table, Retrieving information from a table. You can type these commands in the MySQL Client Command Line.

Also here is an example of communicating MySQL and Java. See accessDB(). You need to create a DB and table with the fields that this servlet needs and uncomment the lines that access the DB.

Note: You may use other type of database if you want but please send e-mail first to cs422-ta@cs.purdue.edu.

7. PeteTwitt Features

You need to implement the following features in your peteTwitt program:


8. Turnin in your project


The deadline of this project is April 26th at 11:59pm. You will present your projects during the
the PSO times. You can sign up for the available times on April 23th during lecture.

To submit your files create an empty directory called petetwitt-src with the following. Please be careful with your submission to prevent future grading problems.
  1. A petetwitt/README file with
a) The name of your teamates.
b) What required features in your project did not work.
c) List of extra features.

    2. A petetwitt/TEAMMATES file with the login and names for each team member. The login and the name should be separated by a colon and one team member per line.

Example:

jsmith: John Smith
psellers: Peter Sellers
dmessing:Debra Messing
gclooney: George Clooney

    3. A directory petetwitt-src/webapps-petetwitt with your Java sources.
       Copy the directory:
         cp -r tomcat/webapps/petetweet petetwitt-src/webapps-petetwitt

    4. Your flex workspace:
        Copy the directory:
         cp -r petetwitt-flex-workspace petetwitt-src/petetwitt-flex-workspace

Good Luck!