Prototype and Scriptaculous
For this chat application we'll be using two popular
javascript libraries: Prototype and Scriptaculous.
Prototype is a Javascript
framework that aims to ease development of dynamic
web applications. At
the risk of being dubbed a traitor to
PHP (just kidding!) it's integrated into the
Ruby On Rails framework which seems to set a lot of gold standards these days. Prototype features class-based Javascript covering areas of particular interest to web developers such as an
AJAX component, shortcut methods to commonly used Javascript functions, extensions to Javascript classes, and more besides.
Some of the finest documentation for Prototype 1.4.0 can be found at
http://www.sergiopereira.com/articles/prototype.js.html. We will be using the current 1.5.0_rc1 version packaged with the Scriptaculous library but this excellent documentation still applies.
Scriptaculous (which is built on top of Prototype) offers visual effects. A lot of visual effects. These combination effects are not just for eye candy either. Using Scriptaculous, complex effects like sliders, drag and drop and similar features can be implemented quite easily without much effort. We won't be digging into this library very much but you can catch the example combination effects by visiting
http://wiki.script.aculo.us/scriptaculous/show/CombinationEffectsDemo.
Prototype and Scriptaculous Setup
Setting up Prototype and Scriptaculous is a simple task. Download the Scriptaculous package from
http://script.aculo.us/downloads and extract it to the ./public/javascript directory. Rename the package directory to "scriptaculous". Scriptaculous already includes the Prototype 1.5.0rc_1 library so we're good to go.
All we need do now is include the javascript files for both libraries in our chat application's
HTML.
Chat Application HTML
Our chat application will operate from a single HTML (XHTML 1.1) page without requiring page reloads. The lack of reloading is due to our use of AJAX. AJAX is based primarily on XMLHttpRequest which is a browser object in most modern browsers (including the recently released Internet Explorer 7). XMLHttpRequest allows a browser to process requests in the background asynchronously, i.e. without preventing the user from interacting with the currently loaded page. Combined with Javascript, XMLHttpRequest can allow requests to be issued with responses processed by Javascript which can update the currently displayed page without reloading it.
The single HTML page of our
tutorial chat application is quite minimal (the better for you to modify it). It comprises two main sections to hold chat messages and a user list. A third section contains input elements for users to input messages and change their screen name. The chat message and user list sections are left empty in the
template since we'll be replying on our client side javascript to dynamically update their contents via AJAX. A
form element is conspicuously missing html4strict
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en">
<head>
<title>Chat Tutorial Application</title>
<meta http-equiv="Content-Type" c />
<meta name="language" c />
<meta name="author" c />
<link rel="stylesheet" href="public/styles/chat.css" type="text/css" />
</head>
<body>
<div style="text-align: center;">
<h2>Chat Application</h2>
<p>This a simple Chat Application. Simply set your screen name and start chatting...</p>
<div id="chatholder">
<!-- Headers -->
<div class="left">Chat Messages</div>
<div class="right">Online Screen Names</div>
<div class="clear"></div>
<!-- Chat and User List Panels -->
<div id="chatpane" class="left"></div>
<div id="userlist" class="right"></div>
<div class="clear"></div>
<div id="control">
<p>Your current username is: <span id="screenname">
<?php echo $this->escape($this->screenName) ?>
</span>.</p>
Chat: <input type="text" value="" id="textmessage" size="50" maxlength="255" />
<input type="button" value="Say it!" />
<span id="loading" style="display:none;">Loading...</span>
<br />
<br />
Change Screen Name: <input type="text" value="" id="changename" size="15" maxlength="32" />
<input type="button" value="Change!" />
</div>
</div>
</div>
</body>
</html>
This HTML template should be stored as index.tpl.php in our application/views directory. We only have one PHP variable to worry about, namely the default screen name assigned to a new visitor. As you may have noted, we have not included a form element. We don't intend on submitting any forms. Instead we'll use JavaScript to grab the value of each input element for sending to the server in an AJAX request.
Accompanying our HTML we also have a separate CSS file containing the styling. This should be stored as chat.css in the public/styles directory.
css
body {
background-color: #f2ebce;
}
#chatholder {
background-color: #eada9d;
border: 2px groove #fd9a26;
padding-bottom: 5px;
}
.left {
width: 70%;
margin: 4px;
background-color: #ffffdd;
border: 1px solid #fd9a26;
float: left;
}
.right {
position: relative;
margin-left: 71%;
margin: 4px;
background-color: #ffffdd;
border: 1px solid #fd9a26;
overflow: hidden;
}
#chatpane.left {
height: 250px;
overflow: scroll;
margin-top: 0px;
background-color: #ffffff;
}
#userlist.right {
height: 250px;
background-color: #ffffff;
}
#control {
text-align: left;
}
#loading {
background-color: #fd9a26;
color: #eada9d;
font-weight: bold;
width: 90px;
margin-left: 100px;
}
p {
text-align: left;
}
p.message {
margin: 0px;
}
span.screenname, #screenname {
font-weight: bold;
}
.clear {
clear: both;
}
Both the styling and the HTML can be modified as you see fit. This bare bones template only contains the basic required markup we need to operate and display a chat application. With time, inspiration (and a lot of Internet Explorer testing) something more aesthetically pleasing could be accomplished.
Amending IndexController
When we initially start this web application, we'll be using the default IndexAction() method on the IndexController class we quickly glossed over earlier. Now that we have this template in place, we can test it by ensuring the Controller's IndexAction() method parses and echoes it to a user's browser. The required change utilises the Zend_View class which we earlier instantiated in our index.php Bootstrap file before storing to the
Zend Framework's static Registry implementation. php
class IndexController extends Zend_Controller_Action
{
public function IndexAction()
{
/*
* Get View from Registry
*/
$view = Zend_Registry::getInstance()->get('view');
/*
* Render template and add to Response body
*/
$this->getResponse()->setBody(
$view->render('index.tpl.php')
);
}
}
Try opening the chat application in your browser once again. As you can see, the chat application design is in place if a bit overly simplistic. It cannot yet be used as a chat application. For that we'll need to include our Javascript libraries and make use of them.
Including the Javascript Libraries
With our preliminary design in place our next step is including our Javascript libraries on the page. We will end up using three Javascript files. The first two will be the Prototype and Scriptaculous libraries. The third will be our own Javascript which will manage AJAX requests and handle the responses from the server.
To start, we amend the <head> section in the HTML to: html4strict
<head>
<title>Chat Tutorial Application</title>
<meta http-equiv="Content-Type" c />
<meta name="language" c />
<meta name="author" c />
<link rel="stylesheet" href="public/styles/chat.css" type="text/css" />
<script src="public/javascript/scriptaculous/lib/prototype.js"
type="text/javascript"></script>
<script src="public/javascript/scriptaculous/src/scriptaculous.js"
type="text/javascript"></script>
<script src="javascript/chat.js" type="text/javascript"></script>
</head>
The change has included the prototype.js, scriptaculous.js and chat.js files. The chat.js file does not yet exist. We might as well create this file now. Create a new empty chat.js file and store it in the javascript directory in the root chat-tutorial directory. We will be adding javascript to this file in
Part 5 of this tutorial.
The next section of this tutorial will return to the server side where we'll start off by implementing a storage solution for our chat messages using XML. If XML seems like a challenging prospect then put your fears aside. PHP5's SimpleXML extension is coming to the rescue :). It has its own odd quirks, but nothing too challenging.
The Zend Framework is a community based project. If you are interested in learning more or contributing to it, visit this page.
