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, Scriptaculous, Application HTML
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" content="text/html; charset=UTF-8" />
<meta name="language" content="en" />
<meta name="author" content="Padraic Brady" />
<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!" onclick="sendMessage()" />
<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!" onclick="changeName()" />
</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" content="text/html; charset=UTF-8" />
<meta name="language" content="en" />
<meta name="author" content="Padraic Brady" />
<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.
|
