Post on 21-May-2015
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
02/04/2012
Réalisation
Cartographie
3
Liens
4
goo.gl/CqDItA
Cibles
- Développeurs Javascript .- Développeur mobile .- Développeur Web.
Connaissances JS
Connaissances CSS
Regarder la première Vidéo
et prérequis
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
Le matériel
Installations
Manipulation des informationsPrésentation des données
Le marché du smartphone
9
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)
02/04/2012
L’ Interface Utilisateur
Spécificités iOS
12
Spécificités android
13
Gestion de l’UI
14
Windows
View 1
View 2
View 3 View 3
Element1
Element2
Les layouts (vertical)
15
Windows
View 1 L’élément suivant s’empile en dessous de l’autreElement1
Element2 On jouera sur la propriété top de l’ élément pour espacer celui-ci.
10 px
20 px
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.
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
L’intégration
18
Les évènements
19
- Clic sur un bouton.
- Une fenêtre qui s’ouvre.
- La localisation de l’utilisateur qui change
- ….
02/04/2012
Exercice de découpage
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
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>
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
Demo Projet alloy-> arborescence-> tiapp.xml
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
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
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>
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>
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
Le contrôleur (de pages en pages)
30
Window1
HelloWord
Window2
TotoAlloy.createController(‘windows2’, ’toto’)
31
Demo ouverture windows avec passage de paramètres
Le contrôleur (pour inclusion
dynamique)
32
window
rowTata
Titi
Toto
var row = Alloy.createController(‘row’,args).getView()$.window.add(row)
Le modèle
33
Toto
User{Id : ‘INT AUTOINCREMENT’,Login : ‘TEXT’,Password : ‘TEXT’},adapter : sql
Créer un modelvar user= Alloy.createModel(‘user’,{login:’toto’,password:’titi’});user.save()
Lire une collectionvar userCollection= Alloy.createCollectionl(‘user’);userCollection.fetch()
Ada
pter
sql
sqlLite
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.
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
ToDoApp
15%
15%
70%
15%85%
75% 25%50dp
QUESTIONSET REPONSES
MERCI