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
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
You will be using the following tools:
You will install those three products in your computer to setup your
- Flex - You will use this
tool to build the User Interface (UI). This is an environment where you
can build interactively dialogs and GUI components such as lists,
buttons, images etc. Flex generates a .swf file (Flash file) that can
be executed inside a browser. The full UI will be written in
Flex. You can also use Flex to write programs that will be executed in
the browser using ActionScript. ActionScript is a Java like language
that is powerful and easy to understand.
- Tomcat - This is a web
server fully written in Java that can be used to run Java Servlets and
JSP. You will write the server side using Java servlets and Tomcat. The
UI will send HTTP requests to this server and the server will responde
with the data requested. Tomcat and the UI will use HTTP anx XML to
- MySQL - The server will
store the user inforation and the "tweets" in a database stored in
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
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
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
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:
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
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:
Currently all twitts are stored in the variable allTwitts. You will
need to store that information in a database together with the date and
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:
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
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 email@example.com.
7. PeteTwitt Features
You need to implement the following features in your peteTwitt program:
- User creation
- Nice UI to input twitts.
- Nice UI to show the twitts of others.
- Search other user's twitt's
- Pictures of the users
- Allow Colors and Fonts in the twitts. Use the RichTextEditor Flex
component. See the component explorer for an example.
- See other features that twitter offer.
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
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.
- 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.
jsmith: John Smith
psellers: Peter Sellers
gclooney: George Clooney
3. A directory petetwitt-src/webapps-petetwitt with
your Java sources.
Copy the directory:
4. Your flex workspace:
Copy the directory: