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