Le blog de Sébastien Porati

DailyQuote : application iPhone/Android avec Titanium [Màj]

avr 04

Sébastien PoratiIPhone, Projets android, application, dailyquote, IPhone, javascript, titanium View Comments

[Màj] Vous pouvez désormais télécharger les sources du billet.

Maintenant que nous savons à quoi ressemble notre application, nous pouvons nous lancer dans le développement et lui donner vie

Nous allon utiliser Titanium. Comme expliqué précédemment, Titanium permet de développer des applications iPhone/Android en Javascript. L’outil transforme ensuite ce code Javascript en code natif pour les différentes plate-formes.

Installation de Titanium et des SDK (iPhone / Android)

La première étape est de télécharger et installer Titanium. Il vous faudra aussi installer les SDK des différentes plate-formes. Lorsque vous lancerez le logiciel (Titanium Developer) pour la première fois, il vous demandera de créer un compte.

Le logiciel permet ensuite de créer les applications, lancer les simulateurs iPhone et Android, et de packager les applications développées pour pouvoir les déployer.

Création d’une application

Créons maintenant notre application. Pour cela, il suffit de cliquer sur le bouton New Project, de bien choisir Mobile comme Project Type et de remplir les différentes informations demandées.

Exploration du projet créé

Voyons un peu ce que le logiciel nous a généré!

Petites explications rapides des principaux fichiers/répertoires:

• le fichier tiapp.xml contient des informations de description/configuration de l’application
• le répertoire Ressources contient le code source Javascript. Les sous-répertoires iphone et android contiennent les ressources spécifique à chaque plate-forme : images, icones, fichiers de code source …
• le répertoire build contient les versions natives transformées par le logiciel pour les différentes plate-formes

Contenu du fichier tiapp.xml :

<?xml version="1.0" encoding="UTF-8"?>
<ti:app xmlns:ti="http://ti.appcelerator.org">
  <id>mobileapps.dailyquote.tutorial</id>
  <name>DailyQuoteTutorial</name>
  <version>1.0</version>
  <publisher>sebastien</publisher>
  <url>http://sebastien.porati.me/blog/</url>
  <description>No description provided</description>
  <copyright>2010 by sebastien</copyright>
  <icon>default_app_logo.png</icon>
  <persistent-wifi>false</persistent-wifi>
  <prerendered-icon>false</prerendered-icon>
  <statusbar-style>default</statusbar-style>
  <statusbar-hidden>false</statusbar-hidden>
  <analytics>true</analytics>
  <guid>00353b97-2a47-4b24-8b33-06de4d1cca36</guid>
</ti:app>

Contenu du fichier Ressources/apps.js :

// this sets the background color of the master UIView (when there are no windows/tab groups on it)
Titanium.UI.setBackgroundColor('#000');

// create tab group
var tabGroup = Titanium.UI.createTabGroup();

//
// create base UI tab and root window
//
var win1 = Titanium.UI.createWindow({
    title:'Tab 1',
    backgroundColor:'#fff'
});
var tab1 = Titanium.UI.createTab({
    icon:'KS_nav_views.png',
    title:'Tab 1',
    window:win1
});

var label1 = Titanium.UI.createLabel({
	color:'#999',
	text:'I am Window 1',
	font:{fontSize:20,fontFamily:'Helvetica Neue'},
	textAlign:'center',
	width:'auto'
});

win1.add(label1);

//
// create base UI tab and root window
//

// ...

win2.add(label2);

//
//  add tabs
//
tabGroup.addTab(tab1);
tabGroup.addTab(tab2);  

// open tab group
tabGroup.open();

Le fichier app.js fait en réalité 65 lignes, mais pour éviter la « répétition » de code, j’en ai caché une partie.
Que peuvent bien donner si peu de lignes? Une petite application iPhone/Android avec 2 onglets et un texte différent lorsque l’on clique chaque onglet.

Pas mal sans rien faire Maintenant, c’est à nous de jouer !

Place au code

Dans le fichier app.js, on va créer les 4 onglets Citations/Favorites/Options/A propos en se basant sur le code générée. On va juste ajouter une ligne sur la création de la fenêtre pour l’onglet Citations.

var quotesWindow = Titanium.UI.createWindow({
    title:'Citations',
    backgroundColor:'#fff',
    url:'quotesWindow.js'
});

La ligne ajoutée est celle faisant référence au fichier Javascript (quotesWindow.js) qui contiendra le code ge gestion de l’onglet.

On va donc s’occuper désormais de notre champs de recherche et de notre liste de citations. On va donc ajouter ce code dans le fichier quotesWindow.js.

Création de la barre de recherche. On peut aussi y voir comment capturer 3 événements : change, return et cancel. La fonction Titanium.API.info permet de logger dans la console du logiciel.

//
// SEARCH BAR
//
var searchBar = Titanium.UI.createSearchBar({
    barColor:   '#385292',
    showCancel: true
});
searchBar.addEventListener('change', function(e) {
    Titanium.API.info('Search text : ' + e.value); // log
});
searchBar.addEventListener('return', function(e) {
   searchBar.blur();
});
searchBar.addEventListener('cancel', function(e) {
   searchBar.blur();
});
});

Notre (fausse) liste de citations : un simple tableau d’objets Javascript. Dans un cas réel, on récupérerait cette liste à partir d’une base de données locale ou d’un webservice.

// Samples quotes
var quotes = [
    { quote: 'Quote 1', author: 'Author 1' },
    { quote: 'Quote 2', author: 'Author 2' }
];

Le code de création des lignes : un label pour l’auteur et un label pour la citation. Pour l’exemple, je ne me suis pas attardé sur la mise en forme, mais il existe tout un tas de propriétés qui vous permettront de placer les différents composants graphique à votre guise.

// Quote rows
var quotesViewData = [];

// Create quote rows
for (var i = 0 ; i < quotes.length; i++) {
    Titanium.API.info('Quote : ' + i);

    var quoteData = quotes[i];

    var quoteRow = Ti.UI.createTableViewRow();
    quoteRow.selectedBackgroundColor = '#fff';
    quoteRow.height  =100;
    quoteRow.className = 'datarow';

    //
    // AUTHOR
    //
    var authorLabel = Ti.UI.createLabel({
        color:  '#576996',
        font:   { fontSize: 16, fontWeight: 'bold', fontFamily: 'Arial'},
        left:   70,
        top:    2,
        height: 30,
        width:  200,
        text:   quoteData.author
    });

    quoteRow.add(authorLabel);

    //
    // QUOTE
    //
    var quoteLabel = Ti.UI.createLabel({
        color:  '#222',
        font:   { fontSize: 16, fontWeight: 'normal', fontFamily: 'Arial'},
        left:   70,
        top:    21,
        height: 50,
        width:  200,
        text:   quoteData.quote
    });

    quoteRow.add(quoteLabel);

    // NOTE: Cette ligne permet de définir le texte qui sera utiliser pour la recherche.
    quoteRow.filter = quoteLabel.text + ' - ' + authorLabel.text;
    quoteRow.quoteId = i;

    quotesViewData.push(quoteRow);
}

Affichage de la liste des citations. On fournit à l’objet TableView le tableau contenant les lignes, et la barre de recherche. Sur le clic d’une ligne, on ajoute du code pour logger dans la console l’id de la ligne cliquée.

// create table view
var quotesTableView = Titanium.UI.createTableView({
    data:            quotesViewData,
    search:          searchBar,
    filterAttribute: 'filter'
});
quotesTableView.addEventListener('click', function(e) {
    Titanium.API.info('Quote ' + e.rowData.quoteId + ' clicked');
});

// add table view to the window
Titanium.UI.currentWindow.add(quotesTableView);

Execution dans le(s) simulateur(s)

Il nous reste plus qu’à lancer le simulateur à partir du logiciel pour voir à quoi cela ressemble.

TADA !

Un petit coup d’oeil sur la console pour voir nos logs.

Conclusion

Je pense que le code et les photos parlent d’eux même ! Je ne connais pas le développement en Objective-C mais je pense qu’il n’est pas aussi rapide et aussi simple. De plus, ce simple code Javascript permet aussi de développer en même temps sur Android. Cependant, je pense qu’il n’est pas possible de coder tout type d’application avec cet outil, je pense notamment aux jeux. Mais il faut savoir qu’on peut étendre les fonctionnalités de Titanium avec des modules codés en Objective-C (et/ou Java).

Et vous, vous en pensez quoi alors de Titanium ?

PS: J’ai passé moins de  20 minutes à préparer le code de l’application, et plus de 2 heures à écrire le billet. Pff, c’est fatiguant  ;) J’espère que vous apprécierez. Je suis preneur de toutes remarques sur le fond et/ou la forme.

Articles similaires:

1. DailyQuote : maquettage avec Balsamiq Mockups
2. Nouveau projet : nom de code « DailyQuote »
3. Application IPhone: Ego
4. DailyQuote : Changement de techno !
5. DailyQuote : sous-projet iPush