Getting started with Uniboard Apps

What is an App?

Essentially, an app or a  widget is a local HTML/CSS/JavaScript web application. This small application performs one specific task; sometimes running within the context a larger program perhaps as a plugin. The XHTML code is entirely based on Web-standards: XHTML/XML, JavaScript/Ajax, CSS.

   Learn more about Apps and Widgets

 

Here are two examples of Uniboard Apps: 

Calculator & Note

 

 

Use Uniboard API to link your app to Uniboard

Uniboard provides an interface that allows Apps to interact with it. You can find all the API references on this page:

   http://support.getuniboard.com/forums/105435/entries/94641

 

Create your first app

Learning JavaScript and jQuery

In order to create your first Uniboard app, you need to know the basics of javaScript programming. To simplify the writing of your app we recommend the use of jQuery library for javaScript. You will find a list of links related to Javascript and jQuery below. 

   https://developer.mozilla.org/en/JavaScript

   https://developer.mozilla.org/en/A_re-introduction_to_JavaScript

   http://docs.jquery.com/How_jQuery_Works

 

The app skeleton

   Download the Uniboard App template

   Download the icon template

 

The myfirstapp.wgt folder contains all the files you need to build your first Uniboard App. You must first unzipp it in order to browse its content. The steps for processing a widget package are described on the W3C website:

   http://www.w3.org/TR/widgets/#configuration-document0

 

Structure of an App folder

 myfirstapp.wgt

 config.xml

 icon.png

 index.html

 myfirstapp

 images

 scripts

 jquery-1.3.2.min.js

 styles

 master.css

 

The configuration document

A configuration document is an XML document that has a widget element at its root that is in the widget namespace. A widget package has exactly one configuration document located at the root of the widget package. All the informations about the widget must be written here: your name, your email, the default size of the widget, etc…

 

<?xml version="1.0" encoding="UTF-8"?>

<widget xmlns="http://www.w3.org/ns/widgets" 
	xmlns:ub="http://uniboard.mnemis.com/widgets"
        id="http://www.example.net/widgets/helloworld" 
        version="1.0"
        width="350"
        height="147" 
	ub:resizable="true">
		
		<name>Hello World</name>
		<author href="http://www.example.net"
	            	email="info@example.com">Your name</author>
		<description>My first Uniboard App!</description>
		<preference name="skin"
		            value="uniboard"/>
		<content src="index.html"/> 

</widget>

 

Start scripting

In this example the widget will allow us to draw figures on the board and change the color and thickness of the pen with cutom parameters.

   Download the example

 

 

In order to draw lines on Uniboard, we will use the function uniboard.drawLineTo(x,y,width) as desccribed on the API references page. For example, the bunch of functions below will draw a house at the center of the board:

uniboard.setTool("pen");
uniboard.moveTo(x-100, y-100);
uniboard.drawLineTo(x-100, y+100, stroke);
uniboard.drawLineTo(x+100, y+100, stroke);
uniboard.drawLineTo(x+100, y-100, stroke);
uniboard.drawLineTo(x-100, y-100, stroke);
uniboard.drawLineTo(x, y-200, stroke);
uniboard.drawLineTo(x+100, y-100, stroke)

 

To keep the data from one page to another or after Uniboard is closed, you may use the savePref and loadPref functions:

		function loadPref(name, defaultValue){

			var pref = defaultValue;
									
			if (uniboard.datastore.document.getItem(name) !== "") {

				pref = uniboard.datastore.document.getItem(name);

			};		

			return pref;

		};

		function savePref(name, value){

			uniboard.datastore.document.setItem(name, String(value));

		};

Test your App

In order to view your app in action on Uniboard, simply drag and drop the .wgt folder on the board or copy the folder in the application folder:

for Windows users

System/Program Files/Uniboard X/interactive/

for Mac users

User/Library/Application Support/Uniboard/interactive content/