The End User Interface

The example application we're going to build is a simple calculator. Not overly useful, admittedly, but it will hopefully provide a simple and clear example of what Sitellite's RPC package can do. We'll start our example with the PHP code and the template that will generate the end user interface of our RPC example application.

inc/app/calculator/boxes/index/index.php
<?php

// import the RPC package
loader_import ('saf.Misc.RPC');

// set the page title
page_title ('RPC Calculator');

// initialize the RPC client - loads the necessary JS files
// and sets up the handler for server responses
echo rpc_init ('return calc_handler (arguments[0]);');

// display the calculator
echo template_simple ('calc.spt', $parameters);

?>

As you can see, the PHP code is pretty short, as it doesn't have much to do other than to initialize the appropriate JavaScript libraries and to display the template for the user interface.

inc/app/calculator/html/calc.spt
<script language="javascript">

function calc (f) {
	// these are the values we'll pass to the RPC request
	func = f.elements.func.options[f.elements.func.selectedIndex].value;
	v1 = f.elements.v1.value;
	v2 = f.elements.v2.value;

	// the RPC request is an ordinary URL request,
	// in this case to another Sitellite box
	rpc_call (
		'/index/calculator-rpc-action?func=' + func + '&v1=' + v1 + '&v2=' + v2
	);

	// return false so the form doesn't submit
	return false;
}

function calc_handler (ans) {
	// this is called automatically when the server responds
	if (ans === false) {
		ans = 'invalid entry';
	}
	document.getElementById ('answer').innerHTML = ans;
	return false;
}

</script>

<form onsubmit="return calc (this)">
<p>
	<input type="text" name="v1" size="5" />
	<select name="func">
		<option value="add">+</option>
		<option value="sub">-</option>
		<option value="mult">*</option>
		<option value="div">/</option>
		<option value="mod">%</option>
	</select>
	<input type="text" name="v2" size="5" />
	<input type="submit" value="Go" />
</p>
</form>

<p>
= <span id="answer" style="font-weight: bold"> </span>
</p>

What you see here are two JavaScript functions, one to perform the RPC request and the other to handle the response, and an HTML form for end user interaction.

If we add two more files to our new "calculator" app, we'll be ready to see it in action:

inc/app/calculator/conf/config.ini.php
; <?php /* DO NOT ALTER THIS LINE, IT IS HERE FOR SECURITY REASONS

default_handler         = index
default_handler_type    = box

app_name                = Calculator Example
;admin_handler          = ""
;admin_handler_type     = app

; DO NOT ALTER THIS LINE, IT IS HERE FOR SECURITY REASONS */ ?>

inc/app/calculator/boxes/access.php
sitellite_access = public
sitellite_status = approved
sitellite_action = on

You should now be able to view the initial user interface of the example application by going to the following URL (be sure to replace "www.example.com" with your actual web site location):

http://www.example.com/index/calculator-app

Page 1: Since the launch of Google's Gma...
Page 2: The End User Interface
Page 3: The Server-Side Handler
Page 4: Further Thoughts

All Tutorials