Appcelerator Titanium: sviluppare app per Android e iPhone – Seconda Parte

Continuiamo il nostro tutorial sul framework Titanium andando a fare dei semplici esempi di utilizzo delle API che mette a disposizione.

Proviamo a creare dei pulsanti e ad associarvi degli eventi quali ad esempio il click del mouse.

var b1 = Titanium.UI.createButton({
	title:'I am a Button',
	height:40,
	width:200,
	top:10
});

Come si evince dal codice su riportato abbiamo creato un pulsante con titolo I am a button di altezza 40 pixel e larghezza 200 pixel e distante dal bordo superiore 10 pixel.

Per associare un evento al pulsante, utilizziamo il metodo addEventListener che accetta come parametri due argomenti: il nome dell’evento da gestire e la funzione da richiamare quando l’evento viene lanciato:

b3.addEventListener('click', function()
{
// codice che gestirà l'evento
}

Inseriamo il seguente codice:

function(){
	b3.enabled=false;
	b3.title = 'I am Disabled';
	setTimeout(function()
	{
		b3.enabled=true;
		b3.title = 'I am Enabled';
	},1000);
}

Quando andremo a cliccare il pulsante, questo si disabiliterà e mostrerà la label I am Disabled, ma dopo un secondo verrà riabilitato, infatti la funzione setTimeout esegue il primo parametro (tipicamente una funzione) dopo un determinato intervallo di tempo specificato in millisecondi.

Creiamo ora uno slider:

var basicSlider = Titanium.UI.createSlider({
	min:0,
	max:10,
	value:5,
	width:100,
	height:'auto',
	top:30
});

Esso avrà come attributi fondamentali il valore minimo e massimò che potrà assumere (min e max) ed il valore iniziale value.
Gestiamo l’evento di change (slittamento dello slider) utilizzando il codice seguente:

basicSlider.addEventListener('change',function(e)
{
	basicSliderLabel.text = 'Basic Slider - value = ' + Math.round(e.value);
});

dove basicSliderLabel sarà una Label così definita:

var basicSliderLabel = Titanium.UI.createLabel({
	text:'Basic Slider - value = 0' ,
	color:'#999',
	font:{
		fontFamily:'Helvetica Neue',
		fontSize:15
	},
	textAlign:'center',
	top:10,
	width:300,
	height:'auto'
});

Utilizziamo ora il componente SearchBar, lo instanziamo utilizzando il seguente codice:

var search = Titanium.UI.createSearchBar({
	barColor:'#000',
	showCancel:true,
	height:43,
	top:0
});

l’unica cosa da notare è l’attributo showCancel che permette di visualizzare (se impostato a true) una icona per cancellare il contenuto della barra. E’ possibile impostare un valore di default agendo sull’attributo value ad esempio:

search.value = ‘foo’;

così facendo verrà visualizzato sulla barra il valore foo.

Analizziamo ora il componente TableView; esso permette di creare una tabella dotata della funzionalità di scroll fornendo in input una lista di dati in formato JSON.

Definiamo dunque una lista di dati da fornire in input alla TableView:

var data = [
	{title:'Anatra', header:'A', hasChild:true},
	{title:'Cane', header:'C', hasChild:true},
	{title:'Gatto', header:'G', hasChild:true},
	{title:'Leone', header:'L', hasChild:true},
	{title:'Lupo', hasChild:true},
	{title:'Toro',header:'T',  hasChild:true}
];

abbiamo quindi una serie di elementi del tipo attributo:valore , in particolare title sarà il nome dell’elemento nella tabella, header sarà una sorta di testata del singolo elemento ed hasChild fa in modo di visualizzare alla destra dell’elemento una freccetta come immagine.
Passiamo ora a creare la TableView passandogli come valore la variabile data definita in precedenza:

var tableview = Titanium.UI.createTableView({
	data:data
});

Proviamo ora a combinare la SearchBar che abbiamo definito prima con questa TableView, il tutto è facilmente combinabile andando a valorizzare l’attributo search con il nome della searchBar:

// create table view
var tableview = Titanium.UI.createTableView({
	data:data,
	search:search,
	filterAttribute:'title'
});

il filterAttribute specifica su quale campo della lista data agire con la ricerca.

La TableView realizzata

La SearchBar funziona da filtro per la TableView