Formation Titanium

485 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
485
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
12
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation Titanium

  1. 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. 2. 02/04/2012 Réalisation
  3. 3. Cartographie 3
  4. 4. Liens 4 goo.gl/CqDItA
  5. 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. 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. 7. Le matériel
  8. 8. Installations
  9. 9. Manipulation des informations Présentation des données Le marché du smartphone 9
  10. 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. 11. 02/04/2012 L’ Interface Utilisateur
  12. 12. Spécificités iOS 12
  13. 13. Spécificités android 13
  14. 14. Gestion de l’UI 14 Windows View 1 View 2 View 3 View 3 Element1 Element2
  15. 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. 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. 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. 18. L’intégration 18
  19. 19. Les évènements 19 - Clic sur un bouton. - Une fenêtre qui s’ouvre. - La localisation de l’utilisateur qui change - ….
  20. 20. 02/04/2012 Exercice de découpage 
  21. 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. 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. 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. 24 Demo Projet alloy -> arborescence -> tiapp.xml
  25. 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. 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. 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. 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. 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. 30. Le contrôleur (de pages en pages) 30 Window1 HelloWord Window2 TotoAlloy.createController(‘windows2’, ’toto’)
  31. 31. 31 Demo ouverture windows avec passage de paramètres
  32. 32. Le contrôleur (pour inclusion dynamique) 32 window rowTata Titi Toto var row = Alloy.createController(‘row’,args).getView() $.window.add(row)
  33. 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. 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. 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. 36. ToDoApp 15% 15% 70% 15%85% 75% 25% 50dp
  37. 37. QUESTIONS ET REPONSES
  38. 38. MERCI

×