File: docs/tutorials/page-skeleton.html

Recommend this page to a friend!
docs/tutorials/page-skeleton.html
File:	`docs/tutorials/page-skeleton.html`
Role:	Documentation
Content type:	`text/plain`
Description:	NAJAX Page Skeleton tutorial.
Class:	NAJAX Call PHP class functions from page with Javascript
Author:	By Stanimir Angeloff
Last change:
Date:	19 years ago
Size:	`11,049 bytes`
Download
<!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>
&lt;?php

class FirstClass
{
	function toUpper($str)
	{
		return <a href="http://bg.php.net/strtoupper">strtoupper</a>($str);
	}
}

?&gt;
</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>
&lt;?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>
}

?&gt;
</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>
&lt;?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');

?&gt;
</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>
&lt;?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>

?&gt;
</pre>
<p>
	One of the most important steps it to register NAJAX client files.
</p>
<ins><dfn>index.php</dfn></ins>
<pre>
&lt;?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>;
}

?&gt;
<strong>&lt;?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?&gt;</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>
&lt;?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>;
}

?&gt;
&lt;?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?&gt;

<strong>&lt;script type=&quot;text/javascript&quot;&gt;

var obj = &lt;?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?&gt;;

&lt;/script&gt;</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>
&lt;?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>;
}

?&gt;
&lt;?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

var obj = &lt;?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?&gt;;

<strong>obj.onToUpperError = function(error) {

	alert(error.message);

	return true;
}</strong>

&lt;/script&gt;
</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>
&lt;?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>;
}

?&gt;
&lt;?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

var obj = &lt;?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?&gt;;

obj.onToUpperError = function(error) {

	alert(error.message);

	return true;
}

<strong>alert(obj.toUpper('Hello World!'));</strong>

&lt;/script&gt;
</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>
&lt;?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>;
}

?&gt;
&lt;?= <a href="../source/NAJAX/NAJAX_Utilities.html">NAJAX_Utilities</a>::<a href="../source/NAJAX/NAJAX_Utilities.html#header">header</a>('.') ?&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

var obj = &lt;?= <a href="../source/NAJAX/NAJAX_Client.html">NAJAX_Client</a>::<a href="../source/NAJAX/NAJAX_Client.html#register">register</a>(new FirstClass()) ?&gt;;

obj.onToUpperError = function(error) {

	alert(error.message);

	return true;
}

<strong>obj.toUpper('Hello World!', function(result) {

	alert(result);
});</strong>

&lt;/script&gt;
</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>
About us
Advertise on this site
For more information send a message to info at phpclasses dot org.
File: docs/tutorials/page-skeleton.html

Contents
