<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US">
<head>
<title>NAJAX Page Skeleton</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body
{
background-color: #fff;
color: #000;
font: normal 0.85em tahoma, verdana, arial, serif;
margin: 0;
padding: 1em;
}
h1
{
border-bottom: 0.1em solid #e0e0e0;
font-size: 2em;
}
h2
{
border-bottom: 0.1em solid #efefef;
font-size: 1.5em;
}
p
{
line-height: 1.5em;
}
ins
{
text-decoration: none;
}
dfn
{
font-size: 0.8em;
font-style: normal;
}
code
{
background-color: #f7f7f7;
font-size: 1em;
}
pre
{
background-color: #efefef;
border: 0.1em solid #ccc;
font-size: 1em;
padding: 1em;
}
pre strong
{
color: #600;
}
a
{
color: #008;
text-decoration: underline;
}
a:hover
{
color: #00c;
text-decoration: underline;
}
a:active
{
color: #00f;
text-decoration: underline;
}
a:visited
{
color: #080;
text-decoration: underline;
}
</style>
</head>
<body>
<h1>NAJAX Page Skeleton</h1>
<p>
This tutorial will teach you step-by-step how to use NAJAX.
</p>
<h2>Step 1 - Basic Class</h2>
<p>
It's a good idea to create a separate file for each class that
you would like to use in NAJAX. Let's create our first class -
<code>FirstClass</code>. It has only one function -
<code>toUpper</code> that converts a given string to upper case.
</p>
<ins><ins><dfn>FirstClass.class.php</dfn></ins></ins>
<pre>
<?php
class FirstClass
{
function toUpper($str)
{
return <a href="http://bg.php.net/strtoupper">strtoupper</a>($str);
}
}
?>
</pre>
<h2>Step 2 - Applying Meta Data</h2>
<p>
Next, we need to apply meta data to the class.
The data tells NAJAX the real name of the methods in the class,
which methods to export and which to skip. Note that the meta
data is not necessary.
</p>
<ins><dfn>FirstClass.class.php</dfn></ins>
<pre>
<?php
class FirstClass
{
function toUpper($str)
{
return <a href="http://bg.php.net/strtoupper">strtoupper</a>($str);
}
<strong>function <a href="../source/NAJAX/_config_najax_config_php.html#defineNAJAX_CLIENT_METADATA_METHOD_NAME">najaxGetMeta</a>()
{
<a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#mapMethods">mapMethods</a>($this, array('toUpper'));
<a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#publicMethods">publicMethods</a>($this, array('toUpper'));
}</strong>
}
?>
</pre>
<p>
You should use <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#publicMethods">publicMethods</a>
rather than <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#privateMethods">privateMethods</a>.
</p>
<h2>Step 3 - NAJAX Initialization</h2>
<p>
Let's create our main file. We'll include <code>FirstClass.class.php</code>
and the main NAJAX file - <code>najax.php</code>.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
?>
</pre>
<p>
Next, we need to tell NAJAX which classes it's allowed to access. This is
not necessary, but it's recommended. Then we run the server and halt the
script execution if the request is a NAJAX callback.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<strong><a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}</strong>
?>
</pre>
<p>
One of the most important steps it to register NAJAX client files.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}
?>
<strong><?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?></strong>
</pre>
<h2>Step 4 - Exporting Objects</h2>
<p>
Next, we'll export an instance of <code>FirstClass</code> to the client.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}
?>
<?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?>
<strong><script type="text/javascript">
var obj = <?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?>;
</script></strong>
</pre>
<h2>Step 5 - Error Handling</h2>
<p>
There are various situations in which NAJAX will throw an exception -
the server did not respond, script error, invalid response...
It's a good idea to 'trap' these exceptions and to process them -
otherwise an error box is displayed to the user.
</p>
<p>
When we make a call to <code>toUpper</code> in case of error NAJAX
will try to execute a method called <code>onToUpperError</code>.
If this method exists and it returns <code>true</code> the exception
is processed and NAJAX won't display an error box.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}
?>
<?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?>
<script type="text/javascript">
var obj = <?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?>;
<strong>obj.onToUpperError = function(error) {
alert(error.message);
return true;
}</strong>
</script>
</pre>
<h2>Step 6 - Using the Class</h2>
<p>
The final step is to make some use of <code>FirstClass</code> class.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}
?>
<?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?>
<script type="text/javascript">
var obj = <?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?>;
obj.onToUpperError = function(error) {
alert(error.message);
return true;
}
<strong>alert(obj.toUpper('Hello World!'));</strong>
</script>
</pre>
<p>
The above peace of code has one drawback - your browser will freeze
during the request to the server. Add <code><a href="http://bg.php.net/sleep">sleep</a>(3)</code>
to <code>toUpper</code>. You'll see what I mean. To avoid this you should
make your calls asynchronous.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
<?php
<a href="http://bg.php.net/require_once">require_once</a>('FirstClass.class.php');
<a href="http://bg.php.net/require_once">require_once</a>('najax.php');
<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#allowClasses">allowClasses</a>('FirstClass');
if (<a href="../source/NAJAX/NAJAX_Server.html">NAJAX_Server</a>::<a href="../source/NAJAX/NAJAX_Server.html#runServer">runServer</a>()) {
<a href="http://bg.php.net/exit">exit</a>;
}
?>
<?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?>
<script type="text/javascript">
var obj = <?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?>;
obj.onToUpperError = function(error) {
alert(error.message);
return true;
}
<strong>obj.toUpper('Hello World!', function(result) {
alert(result);
});</strong>
</script>
</pre>
<h2>Final Words</h2>
<p>
This tutorial does not cover most of the advanced features available in
NAJAX, such as extensions (NAJAX_HTML), class maps, server and client
events... I hope I'll have time to write another tutorial on how
to use them.
</p>
<p>
Happy coding.
</p>
</body>
</html> |