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 TableView realizzata

La SearchBar funziona da filtro per la TableView

1 Stella2 Stelle3 Stelle4 Stelle5 Stelle (1 voti, media: 4,00 di 5)
Loading...
You can leave a response, or trackback from your own site.

4 Responses to “Appcelerator Titanium: sviluppare app per Android e iPhone – Seconda Parte”

  1. Andrea ha detto:

    Ciao, dovrei sviluppare un’applicazione per ipad ma prima di utilizzare questo framework vorrei sapere queste cose:
    1) devo comunque avere un mac per poter installare l’ios sdk giusto?
    2) per installare l’app sugli ipad devo pagare la licenza apple e pubblicare l’app sull’app store?
    Grazie in anticipo per la risposta

    • angeloonline ha detto:

      ciao andrea, grazie per aver letto il mio articolo ti rispondo:
      1) si per forza devi avere un Mac con l’ios sdk, in windows puoi sviluppare solo per Android e BlackBerry
      2)no puoi testarla sull’ipad o iphone pubblicandola con il Titanium Studio, in teoria potresti installarla su ogni device apple così facendo ma dovresti ripetere l’operazione ogni volta

  2. Daniele ha detto:

    Ciao! domanda, ma il codice l’hai scritto direttamente nel file app.js? non ci sono dei percorsi da rispettare e dove posizionare i diversi files? basta scrivere tutto in app.js?

    • angeloonline ha detto:

      Ciao e grazie per aver letto l’articolo 🙂
      Si il codice è stato scritto tutto nel file app.js

Leave a Reply

*