PROJECT 1

Project 1 intends to let you play with collaborative Web tool architecture. You have less than three weeks to deliver Project 1 on November 8th. So, I have provided you with the basic components. You just need to understand how they work and how to extend them. Then, within your project team, you should discuss what work you should do to best demonstrate your understanding.

Your starter code is on-line. You can run the beginning page here. Figure 1 shows what the application looks like when it is running.

Figure 1 -- Project 1 Before Your Changes

I will grade you on thoroughness, design, and functionality. The goal is for you to learn by doing. So, try making changes to the code that confirm your assumptions. Make changes for the sake of seeing the result. You don't have to turn in all the changes you make, just the changes you think add value. As you work, always think in terms of the components of collaborative software. They are:

Complex Java projects usually place each of the above components into a separate package. Packages enhance reusability as they are tied to folders in your file system and can be incorporated into multiple projects. You will be given 2 packages, one which I have created for your use and another which is maintained by an Open Source project team (see the VNet networking package) with lead developer from The Rochester Institute of Technology.

Code Description

I now review the different files you are to start with for Project 1.

ProjectPage.html is the simple Web page you can use to set up the collaboration tool. The page uses HTML, JavaScript, and embeds a Java applet. You should focus on extending the JavaScript within this page. I will be testing your changes on the Internet Explorer 6.0 Web browser (the most versatile Web browser available at this time). Read through the page and test yourself as to whether you understand all that it is doing. Discuss it with your team and ask questions in class whenever we have project question time.

Project 1 Chat and Whiteboard

Project1.java is your main Project 1 Java file. The Project1 class extends the Applet class that is part of all Java language versions. You reference the Project1 class within the Project1.html Web page and the Project1 class is then responsible for distributing control to all your other Java classes. Project1.java provides you a simple shared whiteboard and shared text chat. You are responsible to extend the code to demonstrate that you understand how to do it by delivering an attractive and functional application. Required steps are listed after this Code Description section.

Chatter.java is where you store all the attributes you need to know about each participant in the collaborative session. So far, you will see a name and unique ID for each participant. Consider adding to this class to include other important information pieces to store on each participant.

UserList.java provides a visual scrollable list of all the current participants in a collaborative session (i.e. all the names of people currently on-line sharing the same application). UserList keeps an internal hashtable (a hashtable is a very popular programming data structure that stores values based on keys (usually short text values) and can search to find the stored details when requested to do so).

UserListObserver.java provides an interface (we'll discuss interfaces a lot in class over the next few weeks) for all your classes to use when they want to be notified of events that occur within the UserList. Observers and Listeners are important programming concepts inate to the Java programming language. For now, just think of UserListObserver as a way to standardize events within your project.

ChatPanel.java coordinates the visuals for the shared text chat. The ChatPanel class contains a text input area, text send button, text output area, status area, and a UserList. The ChatPanel distributes events that occur within in the chat area of the Project1 applet.

CTextArea.java provides a drawing canvas on which the code currently draws text strings sequentially based on the time participants typed them. The CTextArea allows for color changes as well as font changes and style changes.

Whiteboard2.java
extends a simple whiteboard application made available on the Web by John Hopkins University. The JHU version was not written for collaborative use but we will add a messaging interface to tie it into the ChatPanel and share the messaging layer.

I will be explaining the different pieces and expanding on your responsibilities by the end of this evening. But, for those code-readers out there, you can take a look at the code anytime:

SimpleWhiteboard2.java provides the bare bones minimal features necessary for a Java-based whiteboard application.

Project 1 Networking

ClientThread.java sets up a separate thread for messaging. Since messages arrive from other participants asynchronously (without any synchronization to local user interactions), it is good programming technique to run messaging in a separate thread. Each thread is a separate process which can share the computer's components in a sequential instruction processing manner. Threads compete for resources and a good operating system makes sure they all run optimally. Threads are an interesting and invaluable concept to understand. We'll cover them in class thoroughly.

ClientThreadObserver.java lets other classes know when events have occurred within the ClientThread. Try to see all the similarities to the UserListObserver class.

Dispatcher.java is the only class within the vnet networking package that knows about the other packages in your project. So, if a message is to come from or go to the network within Project 1, it has to be directed to do so from the Dispatcher class. Think of a taxi dispatcher and the job he or she does. Only the Dispatcher can add new message types or change existing message types within Project 1. I am making that a requirement.

VFieldInputStream.java
makes it easier for you to interpret the bits coming in from the network by parsing them into fields. We won't really be using the fields much for Project 1 but you will need to understand the idea for Project 2.

VFieldOutputStream.java
forces you to package your bits into fields so they can be more easily interpreted by the application receiving them. We won't really be using many field types much for Project 1 but you will need to understand the idea for Project 2.

The other four classes from the vnet package define the fields you will have access to for VField input and output streams:

VField.java
VIP.java
VMFString.java
VSFString.java

Specific Project Tasks

You should start by satisfying the requirements here:
  1. First, look at the messaging and how it works. You will find that the code you start with does not do very sophisticated message passing. You want to pass strings of text with delimeters (or fixed width fields) that can be parsed by your application and perform meaningful work. Start by tracking how a chat message that is entered in the ChatPanel class gets transmitted and where it comes into other participants' applications. Then, figure out how to add color to the message so each participant can send text of varying color. You will even note that the application Web page has a drop down list you can make active with color selection.
  2. Once you understand the chat messaging and get basic color passing to work, tackle the more extensive task of passing messages for the whiteboard activity. To implement a shared whiteboard for just the four features you start with, you will need four different messages (one for passing text, one for passing lines, one for passing ovals, and one for passing rectangles).
  3. Now, share the pen color from the chat applet with the pen color for the whiteboard. This task will show you how to share variables across Java classes. If a participant changes the pen color using the HTML drop down list, change the pen color variable for both the whiteboard and chat.
  4. Getting the messaging working is a significant accomplishment. You should be well on your way at this point. Try adding another feature to the whiteboard. To do that, you will need to add a new graphic (the pencil, oval, and rectangle are all 25 by 25 pixel images) to the whiteboard canvas (on the left column). Update the user interface to track when your new feature is selected and add to your messaging so that the actions are shared by each participant.
  5. After you complete these four tasks, you should be creative as a team to add more functionality to the whole collaborative tool environment. You should also make the tool look more attractive. You can get a lot of bonus points by doing so and you'll have a better understanding of what is possible when you define your own Project 2 assignment. Consider adding more control features in the JavaScript. Consider adding more Java class files with more features. Consider any work that will help you learn about how collaborative software is written.

Team Identification

Here are your teams again. Each team will connect to a different port on the collaboration server and each team will have their own directory on the server as well from which to deliver your tool over the Web. I provide a table to help you identify the necessary information here:

DIRECTORY:teamXteam1team2team3team4team5team6team7
PORT:81888190819281938194819581968198
-------------------------------------------------------------------------
MEMBERS:BruceMichaelHieuBobbyJoshHimanshuColinJung
MikeFannyJustinChrisAlexColinMinh
LayneNikkiAndrewJamieTomBinhDerek
BJAnhChristinaFeng