1. Le développement
Qu'es ce que le cross-platform mobile ? A quel
besoin répond il ? Qu’es ce que titanium mobile?
mobile cross-platform avec titanium
#1 Découverte et réalisation première app

2. 02/04/2012
Réalisation

3. Cartographie
3

4. Liens
4
goo.gl/CqDItA

5. Cibles
- Développeurs Javascript .
- Développeur mobile .
- Développeur Web.
Connaissances JS
Connaissances CSS
Regarder la première
Vidéo
et prérequis

6. Pourquoi ?
6
Que fais-je ? ou vais-je ?
- Consultant sur des projets Business Intelligence
- Aide à la mise en place de projets agiles (Scrum)
- Développeur Titanium.
- Co-Fondateur de captainspot (SM et développeur sur Titanium)
- Passionné par l’agile, le Lean startup et l’entreprenariat
- Intervention chez Leeaarn
- Peu de ressources en Français
Titanium.
- Solution sous représentée par
rapport à phonegap, sencha,
jquery mobile.
- Solution assez mature pour faire
des applications que l’on peut
mettre en production

7. Le matériel

8. Installations

9. Manipulation des
informations
Présentation des données
Le marché
du smartphone
9

10. Titanium Studio
Ready for production ?
10
- Framework Alloy stable, maintenu et moyennement
documenté.
- Faible nombre de bugs fourni dans l’API Titanium.
- Résolution des fuites de mémoire présent autrefois.
- Industrialisation :
- Tests avec Jasmine.
- Déploiement rapide sur appareil lors des tests avec TiShadow.
- Support du i18n.
- Performances satisfaisantes pour la majorité des
applications.
- Code plus facilement maintenable (alloy)

11. 02/04/2012
L’ Interface
Utilisateur

12. Spécificités iOS
12

13. Spécificités android
13

14. Gestion de l’UI
14
Windows
View 1
View 2
View 3 View 3
Element1
Element2

15. Les layouts (vertical)
15
Windows
View 1 L’élément suivant
s’empile en dessous
de l’autre
Element1
Element2 On jouera sur la
propriété top de
l’ élément pour
espacer celui-ci.
10 px
20 px

16. Les layouts (horizontal)
16
Windows
View 1 L’élément suivant
s’empile à droite du
précédent.Element1 Element2
Si l’élément n’a plus
de place il va en
dessous
Element3
On utilisera les
propriétés top et left.

17. Les layouts (asolute)
17
Windows
View 1 Les éléments ne sont
pas positionnés les un
par rapport aux autresElement1
Eviter de les utiliser
car pas responsive
Element2

18. L’intégration
18

19. Les évènements
19
- Clic sur un bouton.
- Une fenêtre qui s’ouvre.
- La localisation de l’utilisateur qui change
- ….

20. 02/04/2012
Exercice de découpage 

21. 02/04/2012
Solution(1)
8%
12%
80%
Layout vertical avec 3
vues niveau de ma
window
Inclusion d’un Label
Layout horizontal
80% 20%
Padding

22. 02/04/2012
Solution(2)
<Alloy>
<Window class="container" layout = "vertical">
<View height="8%" backgroundColor="blue">
<Label height="Ti.UI.Size" width="Ti.UI.Size">myFriends</Label>
</View>
<View height = "12%" layout="horizontal" backgroundColor="cyan">
<View width="80%">
<TextField top="3" bottom="3" left="3" right="3"></TextField>
</View>
<View width ="20%" backgroundColor="red">
<Button top="3" bottom="3" left="3" right="3">OK</Button>
</View>
</View>
<View height="80%">
</View>
</Window>
</Alloy>

23. Titanium Studio
Et le développement ?
23
AprèsAvant (développement classique)
- Non séparation du style et des
éléments graphiques
- Difficultés pour séparer les couches.
- Pré-requis : avoir une bonne
connaissance des bonnes pratiques
JS.
- Framework MVC
- Séparation éléments
graphiques et du style
- Support blackbone et
underscore
- Abstraction d’une bonne
partie des problématiques de
performance

24. 24
Demo Projet alloy
-> arborescence
-> tiapp.xml

25. Les ids
<Alloy>
<Window id="winEvent" backgroundColor="blue">
<Label color = "white" top= "50">Events</Label>
</Window>
</Alloy>
- Pour poser un style sur un élément graphique.
#winEvent dans un tss
- Pour récupérer un élément graphique dans le contrôleur :
$.winEvent

26. L’event binding
<Alloy>
<Window class="container">
<Label id="label" onClick="doClick">Hello, World</Label>
</Window>
</Alloy>
- Assurer l’ exécution de la fonction doClick lors du clic sur le label c

27. Le require
Accueil
<Alloy>
<Require type="view" src="header" id="headerV"/>
</Alloy>
var title = $.headerV.getView('title');
Title.text = ‘accueil’;
Header.xml
<Alloy>
<View>
<Label id="title"></Label>
</View>
</Alloy>

28. Le Conditionnal code
<Alloy>
<Window class="container">
<View layout = "vertical">
<Label id="label" platform='ios'>Je suis un label ios</Label>
<Label id="label" platform='android'>Je suis un label android</Label>
</View>
</Window>
</Alloy>

29. You got the style !
Quoi Id Class Element
Nommage dans tss préfixe # préfixe . Nom élément
Dominant 1 3 2
Ou l’utiliser Fichier de style
local
Fichier de style
global
Ne pas l’utiliser

30. Le contrôleur (de pages en pages)
30
Window1
HelloWord
Window2
TotoAlloy.createController(‘windows2’, ’toto’)

31. 31
Demo
ouverture
windows avec
passage de
paramètres

32. Le contrôleur (pour inclusion dynamique)
32
window
rowTata
Titi
Toto
var row = Alloy.createController(‘row’,args).getView()
$.window.add(row)

33. Le modèle
33
Toto
User
{
Id : ‘INT AUTOINCREMENT’,
Login : ‘TEXT’,
Password : ‘TEXT’
},
adapter : sql
Créer un model
var user= Alloy.createModel(‘user’,{login:’toto’,password:’titi’});
user.save()
Lire une collection
var userCollection= Alloy.createCollectionl(‘user’);
userCollection.fetch()
Adaptersql
sqlLite

34. Le data-binding
34
<Alloy>
<Collection src="book" />
<Window class="container">
<TableView dataCollection="book">
<TableViewRow title="{title}" />
</TableView>
</Window>
</Alloy>
Je parcourir les livres
dans une tableView
en affichant le titre de
ceux-ci.

35. 02/04/2012
ToDoApp
Travailler avec une
tableView et des
tableViewRows
Créer des
tableViewRows avec
l’instruction
createController
Travailler avec les UI
et les styles
Travailler avec des
modèles et des
collections
Gérer des
évènements

36. ToDoApp
15%
15%
70%
15%85%
75% 25%
50dp

37. QUESTIONS
ET REPONSES

38. MERCI