About Pi Downloads Documentation Plugins Developer Forum Issues

Getting Started to pi.js2009-01-06 09:23:30

Summary

This tutorial helps to begin with developing web based applications with pi.js.
Pi library utilizes development of web based applications and provides developers a comfortable development environment. I'll try to explain this with a simple calculator example. We start by creating a function named "calculator";
function calculator(){
	// ...
}

pi.util.Init.push(calculator);
pi.util.Init function keeps the functions that will run after the page is loaded completely as an array. We added calculator function to this array since we will generate the user interface after page loads. Now let's generate the interface with the help of pi.element.
function calculator(){
	var main = new pi.element("div").addStyle({
		"width": "200px",
		"border": "1px solid red",
		"padding": "5px"
	}).insert(document.body);
	main.child.add(new pi.element("h1").addStyle({
		"font": "bold 14px sans-serif",
		"textAlign": "center"
	}).update("Calculator"));
	var input = new pi.element("input").insertAfter(new pi.element("label").update("Calculation:").insert(main));
	new pi.element("button").event.addListener("click", function(){
		input.update(eval(input.element.value))
	}).update("Evaluate").insert(main)
};
pi.util.Init.push(calculator);
In the example we created the element 'main' which will keep all other elements and assigned css style to the element. Afterwards we created the title of our calculator, calculation input and evaluate button. You should see that we've used insertAfter method when we are creating the input element.By this method, we've created the input from behind a label.Finally, we have attached a function that evaluates calculation and prints result to the input, to the button we've created.You can see this example in the bottom of this page. Curry is the most important tools of pi.js, it provides customizing scope and argument lists of functions.Let's solve a problem to mean it.How can we show a "hello alert" after waiting 5 seconds with javascript?
setTimeout(function(){
	alert("Hello");
},5000);
In this solution, we've created a new function.But we can solve the problem by better way with curry method pi.js added into Function class.
setTimeout(
	alert.curry(window,"Hello"), 5000
);
This time, we determine scope and argument list of the function will be executed by curry method.You can use pi.util.Curry instead of the curry method. You can take a look at features of pi.js and other examples at the reference pages.

Examples

Example #1: Simple Calculator Example

Source files of the above example:

calculator.html

<div id="calculator">
</div>

calculator.js

function calculator(){
	var main = new pi.element("div").addStyle({
		"width": "200px",
		"border": "1px solid red",
		"padding": "5px"
	}).insert(pi.get("calculator"));
	main.child.add(new pi.element("h1").addStyle({
		"font": "bold 14px sans-serif",
		"textAlign": "center"
	}).update("Calculator"));
	var content = new pi.element("div").insert(main);
	var input = new pi.element("input").update("( 600+900-(1500/3) )%3").insertAfter(new pi.element("label").update("Input:").insert(main));
	new pi.element("button").event.addListener("click", function(){
		input.update(eval(input.element.value))
	}).update("Evaluate").insert(main)
};
pi.util.Init.push(calculator);