INDEX

Application example

This example implements an application that exposes RPC method that returns random integer. The example also implements an active tile. The mechanism in the tile calls the RPC method every five seconds and outputs the result to the tile. As a bonus feature this example also implements application web page. Clicking the tile opens the web page into a window of its own (see window.open).

This example demonstrates how to make web pages (including tiles) remote operation safe.

Like in the spacelet example this example also has the manifest and executable files.

files for the

Below is the directory structure of the application.

application
├── spaceify.manifest
├── randomz.js
└── www
    ├── tile.html
    ├── index.html
    ├── rand.js
    ├── logo.png
    └── css
        └── tile.css
        └── index.css

The applications manifest and its executable file randomz.js are directly below the application directory. The executable could be somewhere else but the start_command field of the manifest (node randomz.js) executes it from the application directory.

The tile and application web page forces to add the www directory so that they can work. The tile.html file in the www directory tells Spaceify that application supplies its own tile. The rand.js contains the JavaScript code the tile uses. The index.html file contains the application web page example and the logo image is displayed on that web page. Notice how index.html is specifically named like this to support the remote operation system. The css files are placed to a directory of their own just to make things tidy - so no Spaceify forced structure there.

The manifest

spaceify.manifest
{
  "provides_services": [
    {
      "service_name": "spaceify.org/services/randomz",
      "service_type": "open"
    }
  ],
  "name": "RandomZ",
  "unique_name": "randomz",
  "version": "1.0.0",
  "type": "sandboxed",
  "category": "educational",
  "start_command": "node randomz.js",
  "short_description": "Application example.",
  "appstore_description": "Application example.",
  "developer": {
    "name": "Spaceify Oy",
    "url": "http://spaceify.net",
    "email": "admin@spaceify.net"
  },
  "implements": [
    "WEB_SERVER"
  ]
}

The manifest contains all the mandatory identifying fields. The provides_services field makes the service available and the start_command tells Spaceify how to start the application.

Server-side

Applications do not have to have server-side and client-side application code. Applications can function perfectly fine within the edge. Other applications can call its methods and it can call theirs, or it just provides services for others. However, It is not impossible to connect to the services of an application from the client-side (web pages) code. The services just have to be open so that web pages can connect to them. In this application we use the client-side server-side approach.

The server-side application

The SpaceifyApplication class is used for controlling the application. After the application is started and its start method is called, the provided service is used to expose the "get" RCP method. The get method generates random number from the [-1024, 1024] range and return it to the caller.

randomz.js
var spaceify = require("/var/lib/spaceify/code/spaceifyapplication.js");
 
function RandomZ()
	{
	var self = this;
 
	// The provided service
	var service = null;
	var serviceName = "spaceify.org/services/randomz";
 
	// This method is called if app is started succesfully
	self.start = function()
		{
		// Get the provided service and expose the RPC method
		service = spaceify.getProvidedService(serviceName);
		service.exposeRpcMethod("get", self, get);
		}
 
	// This method is called if starting the app fails
	self.fail = function()
		{
		}
 
	// Send random integer to the caller of this RPC method
	var get = function(name, callObj, callback)
		{
		var sign = (Math.random() >= 0.5 ? 1 : -1);
		var number = Math.floor(Math.random() * 1024) * sign;
 
		callback(null, number);
		}
	}
 
// Start the app
var randomZ = new RandomZ();
spaceify.start(randomZ);

The client-side web page and JavaScript code

Like was discussed above this application implements a tile and web page. The tile is interactive and contains addtional JavaScript code file. The web page is static and only displays text and image. Changing the web page to be dynamic is possible just by studying how the tile is implemented.

The tile.html and rand.js

tile.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title></title>

	<link rel="stylesheet" sp_href="css/tile.css">

	<!-- Remote operation | Spaceify's API | Tiles app code -->
	<script src="libs/spaceify.loader.js"></script>
	<script spe_src="libs/spaceify.api.js"></script>
	<script sp_src="rand.js"></script>

	<script>
	var app;
	var unique_name ="randomz";

	<!-- Wait before doing anything -->
	window.addEventListener("spaceifyReady", function()
		{
		// Use this class when working with applications
		app = new SpaceifyApplication();

		// Init this app and connect to the application on the edge
		var rand = new Rand(app, "rdiv");
		app.connect(rand, unique_name);
		}, false);

	<!-- Open the applications web page -->
	window.addEventListener("click", function()
		{
		window.open(unique_name, "index.html", "_blank");
		});
	</script>
</head>

<body>
	<div class="tile">
		<div class="tileText" id="rdiv">
		</div>
	</div>
</body>

</html>

Tile uses the remote operation system to initialize itself; the sp_* and spe_* properties for resources in the tags. The loader loads the resources dynamically and after the resources are loaded the "spaceifyReady" event is emitted. The SpaceifyApplication class, the same one used in the server-side example, is used to connect to the server-side application.

(It is possible to use app.start(… because connect is an alias of start. The is a matter of perpective. It can be seen that the client-side application is started but technically only connections to the server-side application are made.)

The Rand class is used to handle the client-side connection. After the conection is established the getRequiredService method of the SpaceifyApplication class is called to get the open service of the application (randomz.js). The "get" method is initially called once and then every five seconds. The result is 'printed' to the rdiv DOM element.

rand.js
function Rand(app, id)
	{
	var self = this;
 
	var rdiv = document.getElementById(id);
 
	// The required service
	var service = null;
	var serviceName = "spaceify.org/services/randomz";
 
	// This method is called if connection to the app was succesfull
	self.start = function()
		{
		// Get the service and call "get" RPC method of the app
		service = app.getRequiredService(serviceName);
		service.callRpc("get", [], self, got);
 
		// Call "get" every five seconds
		setInterval(function()
			{
			if(service)
				service.callRpc("get", [], self, got);
			}, 5000);
		}
 
	// This method is called if connecting to the app failed
	self.fail = function()
		{
		var node = document.createTextNode("Failed to connect to the app.");
		rdiv.appendChild(node);
		}
 
	// Print the response from the get RPC call
	var got = function(err, response)
		{
		rdiv.removeChild(rdiv.lastChild);
 
		var node = document.createTextNode(err ? err.message : response);
		rdiv.appendChild(node);
		}
	}

The application web page

Clicking the tile opens the application web page. The web page contains now only static text and an image. The application web pages can contain anything developers want - within the boundariews of remote operation rules. This example could be further developed to display the random number. Following the tile implementation gives great starting point for this.

index.html
<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">

	<title>RandomZ</title>

	<!-- Load web pages stylesheet -->
	<link rel="stylesheet" sp_href="css/index.css">

	<!-- Load resources to the elements having sp_* and spe_* properties -->
	<script src="libs/spaceify.loader.js"></script>
</head>

<body>
	<img sp_src="logo.png">

	<div>
		RandomZ
	</div>
</body>

</html>

Installing the application

The application requires the resources listed in the directory structure. They are downloadable from the links below.

logo.png tile.css index.css

Create the application package manually and copy the files to their directories. Install the application to the Spaceify edge from the current working directory (where the application/ directory is) with the spm command like this.

spm install

A ready-made application package is available to download in URL https://spaceify.org/downloads/randomz.zip. Instal it with spm like this.

spm install randomz.zip

Testing the application

The application can be tested by browsing to the Spaceify edges landing page in URL edge.spaceify.net. The randomz tile displays the random integer and nothing else. Clicking the tile opens the application web page.

Close
copyright © Spaceify.org 2014