0
Bienvenue !1ère soirée Meetup Mobile Montpellier30 mai 2013
Programme de la soirée● Introduction● Présentation dAppcelerator Titanium● Présentation du travail de Pedro Vitorino● Prés...
Et pendant ce temps là sur Twitter...Comme devant TheVoice,vous pouvez commenterla soirée en utilisant le hashtag#MobileMtp
PrésentationTitanium MobileDamien LaureauxMeetup Mobile Montpellier30 Mai 2013
PrésentationDamien LaureauxExpert mobile chez Isiapps,filiale mobile dIsimediaIsiapps est le premier partenaireAppcelerato...
PrésentationJe développe des applications iPhone, iPad etAndroid depuis plus de 3 ans en utilisant leframework Appcelerato...
PrésentationFormateur depuis peu pourClever Institut sur la formationAppcelerator Titanium / Alloyà Paris et Montpellier
AppceleratorTitaniumPrésentation dAppcelerator Titanium
La plateforme AppceleratorAppcelerator Titanium est une plateformeouverte de développement permettant de créerdes applicat...
La plateforme AppceleratorLa plateforme Appcelerator
Le framework TitaniumIl comprend un SDK open source avec plus de5 000 APIs, Titanium Studio, un puissant IDEbasé sur Eclip...
Cycle de vie dune application
Des services complémentairesPour répondre à ce cycle de vie, Appceleratora construit un ensemble de servicescomplémentaire...
Le choix de milliers dentreprisesAppcelerator Titanium est la plateforme dedéveloppement mobile la plus plébiscitée pourde...
+50 000 applications mobilesAvec plus de 50 000 applications mobilesdéployées sur 110 000 000 de terminaux, leframework Ti...
Simplifie le dévelopementTitanium simplifie le processus dedéveloppement des applications mobilespermettant aux développeu...
Les développeurs Web peuventdevenir productifs immédiatementpour créer des applications nativesmobiles riches à partir dun...
Plateformes compatiblesLe SDK Titanium permet de créer desapplications pour les plateformes suivantes :● iPhone● iPad● And...
Exemple dapplication Titanium
Le futur de TitaniumDéveloppements en cours :● Windows Phone 8 (fin 2013)● Windows 8 (fin 2013)
Licence AppceleratorAppcelerator a choisi la licence Apache 2 pourle SDK Titanium ainsi que pour TitaniumStudio, ce qui le...
Titanium VSPhoneGapComparaison entre Titaniumet PhoneGap
Titanium VS PhoneGapDe loin, Titanium et PhoneGap paraissentsimilaire...Le but commun est de créer une applicationmobile c...
Lapproche de PhoneGapLapproche de PhoneGap est de proposer uneapplication native socle dans laquelle on vaembarquer des pa...
Points forts de PhoneGapLa création dune application mobile simple estfacilitée par lutilisation du HTML5 et JS.Cest pour ...
Points faibles de PhoneGapLa qualité du rendu est dépendant de laplateforme... iOS utilise Webkit comme moteurde rendu et ...
Points faibles de PhoneGapLes performances sont donc variables dun OSà un autre et les animations de transition sontgérées...
Points faible de PhoneGapLe workflow peut être aussi un point noir si lonutilise pas PhoneGap Build car il faut configurer...
Titanium StudioPrésentation de lIDE Titanium Studio
PrésentationA lorigine, Aptana Studio était un IDE opensource basé sur Eclipse et adapté audéveloppement Web (PHP, HTML, C...
Fonctionnalités spécifiquesEn plus des fonctionnalités dEclipse, celleshéritées dAptana, Titanium Studio apportedautres fo...
Autres fonctions de Ti Studio● Intégration de Git, SVN, etc...● Navigateur intégré pour les tests HTML/Web● Déploiement HT...
Espace de travail de Ti Studio
Dashboard de Titanium Studio
Chaîne doutilsPour créer une application mobile de bout enbout, il faut un certain nombre doutils pour :● La gestion du pr...
La chaîne doutils pour AndroidExemple de la chaînedoutils nécessaire àla création duneapplication Androidnative.
La chaîne doutils pour iOSExemple de la chaînedoutils nécessaire àla création duneapplication iOS native.
La chaîne doutils Titanium StudioAvec Titanium Studio,lensemble de lachaîne nécessaire àun projet mobile esttraité en util...
InterfaceutilisateurAndroid et iOSDifférences entre les UI diOS et dAndroid
PrésentationComme nous lavons vu plus tôt, les interfacesdiOS et dAndroid ont des éléments communsmais aussi beaucoup de c...
Composants de linterface iOS
Composants de linterface Android
Pour un développeur Web...Une window est léquivalent dune pageUne view est léquivalent dune divLespace de nom Ti.UI fourni...
SDK Titanium 3.0Présentation du SDK Titanium Mobile 3.0
IntroductionLa caractéristique unique de Titanium vis à visdes différentes solutions mobiles cross-plateform disponibles, ...
IntroductionAppcelerator, ne souhaitant pas être limitée parlaffichage Web natif, ils se sont engagés dansune intégration ...
IntroductionDe plus, vous aurez accès aux fonctionnalitéssuivantes :● APIs spécifiques à chaque plateforme● Géolocalisatio...
Vue densemble du SDK TitaniumPerformance nativePerformance native + Interface native(tableaux, animations, gestes, etc.)Gé...
Développer pour plusieurs OSLAPI Titanium fournit une variable "plateforme"qui peut être utilisée avec des instructions if...
Les windowsUne window est un conteneur de niveausupérieur qui peut contenir dautres views.Elle peut être ouverte et fermée...
Les viewsLes views sont la base de tous les composantsde linterface utilisateur.Après avoir créer une view, il est importa...
Les événementsLa liste des événements déclenché par lesobjets Titanium est différente en fonction deceux-ci, il est donc c...
Framework AlloyPrésentation du framework MVC Alloy
IntroductionLe framework Alloy est un nouveau frameworkdAppcelerator, conçu pour développerrapidement des applications Tit...
Modèle-Vue-ContrôleurAlloy utilise une structure model-view-controller(MVC) pour séparer lapplication en3 composants diffé...
Les ModèlesLes modèles fournissent la logique métier,contiennent les règles, les données et létat delapplication.Les modèl...
Les VuesLes vues fournissent les composants delinterface graphique pour lutilisateur ou permetà lutilisateur dinteragir av...
Les ContrôleursLes contrôleurs fournissent le ciment entre lescomposants du modèle et la vue sous la formedune logique dap...
Avantage du MVCUn avantage du MVC est la possibilité deréutiliser le code en séparant la fonctionnalité.Par exemple, vous ...
Backbone.jsBackbone.js est un framework MVC léger, àlorigine créé pour les applications Web.
Alloy : MVC avec BackboneLes modèles dAlloy sont construits autour deBackbone.js, profitant des API Model etCollection de ...
Underscore.jsAlloy intégre aussi le support de la librairieUnderscore.js, qui fournit un ensemble defonctions supplémentai...
Structure et conventionsPour simplifier le développement, Alloy utiliseune structure de répertoire et des conventionsde no...
Structure et conventionsPar exemple, au moment de la génération,Alloy va chercher les fichiers requisapp/views/index.xml e...
Exemple de structureappcontrollersandroidindex.jsindex.jsviewsiosindex.xmlindex.xml
WidgetsLes widgets sont des composants autonomesqui peuvent être facilement intégrés dans lesprojets Alloy.Ils ont été con...
WidgetsLes widgets ont leurs propres modèles, vues,contrôleurs, styles et médias et doivent setrouver dans le répertoire a...
Le fichier ViewLe fichier view déclare la structure de linterfacegraphique.Cet exemple défini une window avec uneimage et ...
Le fichier StyleLe fichier style formate et style les composantsdu fichier view dans un format proche desfeuilles de style...
Le fichier StyleFichier app/styles/index.tss"Window": {backgroundColor: "white"},"#logoLabel": {bottom: 20,width: Ti.UI.SI...
Le fichier ControllerLe fichier contrôleur contient la logique deprésentation, qui répond à lentrée delutilisateur.Par exe...
Le fichier ControllerFichier app/controllers/index.jsfunction clickImage(e) {Titanium.UI.createAlertDialog({title:Image Vi...
Compilation et exécutionAvec Titanium Studio, il suffit de cliquer sur lebouton Run et de sélectionner le type determinal ...
Constantes AlloyConstantes définies par Alloy, à utiliser dans lecontrôleur :OS_IOStrue si la cible de compilation en cour...
Constantes AlloyENV_DEVtrue si la cible du compilateur actuel est de compiler pourle développement (en cours dexécution da...
Resources AlloyAlloyLove, liste de widgets pour Alloy :http://alloylove.com/Widget Tweets View :https://github.com/FokkeZB...
Projet JUG Mobile TitaniumLes sources de lapplication JUG Mobile codéavec Titanium + Alloy lors de la soirée Titaniumdu 20...
Annexes
Ressources TitaniumBlog Developer
Ressources Titaniummy.appcelerator.com
Documentation TitaniumDocumentation
Github AppceleratorGithub Appcelerator
Inspiration mobile sur Pinterest+7 600 captures décran dinterface mobile
Autres lienshttp://timoa.com(nouvelle version à venir)@timoaGithub : https://github.com/timoa
Questions / RéponsesAvez-vous des questions ?
Merci !
Upcoming SlideShare
Loading in...5
×

1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy

364

Published on

Présentation d'Appcelerator Titanium et du framework MVC Alloy à la 1ère soirée du Meetup Mobile Montpellier.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
364
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "1er Meetup Mobile Montpellier - Présentation Appcelerator Titanium - Alloy"

  1. 1. Bienvenue !1ère soirée Meetup Mobile Montpellier30 mai 2013
  2. 2. Programme de la soirée● Introduction● Présentation dAppcelerator Titanium● Présentation du travail de Pedro Vitorino● Présentation de Consomap● Buffet
  3. 3. Et pendant ce temps là sur Twitter...Comme devant TheVoice,vous pouvez commenterla soirée en utilisant le hashtag#MobileMtp
  4. 4. PrésentationTitanium MobileDamien LaureauxMeetup Mobile Montpellier30 Mai 2013
  5. 5. PrésentationDamien LaureauxExpert mobile chez Isiapps,filiale mobile dIsimediaIsiapps est le premier partenaireAppcelerator en France
  6. 6. PrésentationJe développe des applications iPhone, iPad etAndroid depuis plus de 3 ans en utilisant leframework Appcelerator Titanium.Certifié TCAD et TCMD, je fais partie de lacentaine dexperts sélectionnés parAppcelerator pour aider la communautéTitanium via le programme "Titan".
  7. 7. PrésentationFormateur depuis peu pourClever Institut sur la formationAppcelerator Titanium / Alloyà Paris et Montpellier
  8. 8. AppceleratorTitaniumPrésentation dAppcelerator Titanium
  9. 9. La plateforme AppceleratorAppcelerator Titanium est une plateformeouverte de développement permettant de créerdes applications natives entre les différentsterminaux mobiles et systèmes dexploitation,dont iOS, Android, Windows, BlackBerry,Tizen, HTML5 et bientôt Windows Phone.
  10. 10. La plateforme AppceleratorLa plateforme Appcelerator
  11. 11. Le framework TitaniumIl comprend un SDK open source avec plus de5 000 APIs, Titanium Studio, un puissant IDEbasé sur Eclipse, et Alloy, un framework MVC.
  12. 12. Cycle de vie dune application
  13. 13. Des services complémentairesPour répondre à ce cycle de vie, Appceleratora construit un ensemble de servicescomplémentaires dont :● Appcelerator Analytics● Appcelerator Cloud Services● Appcelerator Functional Test *● Appcelerator Performance Management ** Services faisant partie de la nouvelle offre Appcelerator Platform
  14. 14. Le choix de milliers dentreprisesAppcelerator Titanium est la plateforme dedéveloppement mobile la plus plébiscitée pourdes milliers dentreprises, y compris eBay,Merck, Mitsubishi Electric, NBC et PayPal.
  15. 15. +50 000 applications mobilesAvec plus de 50 000 applications mobilesdéployées sur 110 000 000 de terminaux, leframework Titanium aide les entreprises àdéployer 60% plus vite et obtenir un avantageconcurrentiel significatif.
  16. 16. Simplifie le dévelopementTitanium simplifie le processus dedéveloppement des applications mobilespermettant aux développeurs de développerrapidement, tester, compiler et publier desapplications mobiles en utilisant JavaScript.
  17. 17. Les développeurs Web peuventdevenir productifs immédiatementpour créer des applications nativesmobiles riches à partir dune seulebase de code sans avoir à gérer demultiples outils de développement, delangages et méthodologies.Simplifie le développement
  18. 18. Plateformes compatiblesLe SDK Titanium permet de créer desapplications pour les plateformes suivantes :● iPhone● iPad● Android mobile & tablette● Mobile Web (HTML5)● BlackBerry 10● Liseuse Nook Color● Assistant de navigation Denso● Tizen (Intel / Samsung OS basé sur Linux)
  19. 19. Exemple dapplication Titanium
  20. 20. Le futur de TitaniumDéveloppements en cours :● Windows Phone 8 (fin 2013)● Windows 8 (fin 2013)
  21. 21. Licence AppceleratorAppcelerator a choisi la licence Apache 2 pourle SDK Titanium ainsi que pour TitaniumStudio, ce qui les rend gratuits pour uneutilisation personnelle et commerciale.
  22. 22. Titanium VSPhoneGapComparaison entre Titaniumet PhoneGap
  23. 23. Titanium VS PhoneGapDe loin, Titanium et PhoneGap paraissentsimilaire...Le but commun est de créer une applicationmobile cross-platform en utilisant des langagescomme le JavaScript.Ils sont tous les 2 open-sources et sponsoriséspar de grosses sociétés.
  24. 24. Lapproche de PhoneGapLapproche de PhoneGap est de proposer uneapplication native socle dans laquelle on vaembarquer des pages HTML5 et du JavaScriptpour communiquer avec celle-ci.Les pages HTML5 sont affichées dans unefenêtre navigateur (WebView) proposée sur laplupart des plateformes mobile.
  25. 25. Points forts de PhoneGapLa création dune application mobile simple estfacilitée par lutilisation du HTML5 et JS.Cest pour cela que léquipe de PhoneGap naimplémentée quune partie des API natives, cequi permet ainsi de porter PhoneGap surdautres plateformes plus rapidement.Laccès au développement mobile est ainsifacilité pour les développeurs Web.
  26. 26. Points faibles de PhoneGapLa qualité du rendu est dépendant de laplateforme... iOS utilise Webkit comme moteurde rendu et offre les meilleurs performancesmais celui dAndroid est juste fonctionnel surles versions 2.xLe support dHTML5 peut être incomplet entrenavigateurs et donc entre les OS mobile.
  27. 27. Points faibles de PhoneGapLes performances sont donc variables dun OSà un autre et les animations de transition sontgérées en JavaScript et nutilise paslaccélération matérielle (GPU).Comparé à du natif, la surcouche navigateur +moteur JavaScript rend une applicationPhoneGap plus lente et réactive dès lors quelon utilise beaucoup de données ou traitement(liste, animation, etc).
  28. 28. Points faible de PhoneGapLe workflow peut être aussi un point noir si lonutilise pas PhoneGap Build car il faut configureret utiliser un IDE par plateforme :● XCode pour iOS● Eclipse pour Android● Visual Studio pour Windows Phone● etc...
  29. 29. Titanium StudioPrésentation de lIDE Titanium Studio
  30. 30. PrésentationA lorigine, Aptana Studio était un IDE opensource basé sur Eclipse et adapté audéveloppement Web (PHP, HTML, CSS,Javascript, Python ou encore Ruby).Aptana a été racheté par Appcelerator et cestcomme ça quest né Titanium Studio.
  31. 31. Fonctionnalités spécifiquesEn plus des fonctionnalités dEclipse, celleshéritées dAptana, Titanium Studio apportedautres fonctions indispensables :● Gestion de projet (création pas à pas,éditeur pour tiapp.xml, nettoyage desprojets)● Configuration de projet (choix de lAPI,réglages émulateurs, etc...)● Console de sortie et filtres● Menu "Démarrer" et "Déploiement"● Déploiement mobile et distribution (stores)
  32. 32. Autres fonctions de Ti Studio● Intégration de Git, SVN, etc...● Navigateur intégré pour les tests HTML/Web● Déploiement HTML/Web, PHP (ftp, sftp,ftps)
  33. 33. Espace de travail de Ti Studio
  34. 34. Dashboard de Titanium Studio
  35. 35. Chaîne doutilsPour créer une application mobile de bout enbout, il faut un certain nombre doutils pour :● La gestion du projet● Ecrire le code source● Compiler le code source● Debugger lapplicaton● Simuler lapplication● Signer et distribuer lapplication
  36. 36. La chaîne doutils pour AndroidExemple de la chaînedoutils nécessaire àla création duneapplication Androidnative.
  37. 37. La chaîne doutils pour iOSExemple de la chaînedoutils nécessaire àla création duneapplication iOS native.
  38. 38. La chaîne doutils Titanium StudioAvec Titanium Studio,lensemble de lachaîne nécessaire àun projet mobile esttraité en utilisant unseul logiciel.
  39. 39. InterfaceutilisateurAndroid et iOSDifférences entre les UI diOS et dAndroid
  40. 40. PrésentationComme nous lavons vu plus tôt, les interfacesdiOS et dAndroid ont des éléments communsmais aussi beaucoup de composantsgraphiques spécifiques à celles-ci.
  41. 41. Composants de linterface iOS
  42. 42. Composants de linterface Android
  43. 43. Pour un développeur Web...Une window est léquivalent dune pageUne view est léquivalent dune divLespace de nom Ti.UI fournit plusieurscontrôleurs spécifiques (button, textfield,picker, scrollview)Les objets UI sont composés de la mêmemanière que les fragments du DOM JavaScript
  44. 44. SDK Titanium 3.0Présentation du SDK Titanium Mobile 3.0
  45. 45. IntroductionLa caractéristique unique de Titanium vis à visdes différentes solutions mobiles cross-plateform disponibles, est quil créevéritablement des applications natives.Cest ce qui contraste avec les solutions Webqui offrent des fonctionnalités via une vue Webaméliorée comme la solution PhoneGap.
  46. 46. IntroductionAppcelerator, ne souhaitant pas être limitée parlaffichage Web natif, ils se sont engagés dansune intégration beaucoup plus profonde avecles plateformes iOS et Android par exemple.Cela donne aux développeurs la possibilitédutiliser des services et composants UI natifs,avec des performances quasi-natives,caractéristiques que vous ne trouverez pasdans dautres solutions cross-plateformmobiles.
  47. 47. IntroductionDe plus, vous aurez accès aux fonctionnalitéssuivantes :● APIs spécifiques à chaque plateforme● Géolocalisation● Partage sur les réseaux sociaux● Multimédia● Données en ligne ou stockées en local● Extensibilité via des modules● et bien dautres !
  48. 48. Vue densemble du SDK TitaniumPerformance nativePerformance native + Interface native(tableaux, animations, gestes, etc.)GéolocalisationRéalité augmentée, géolocalisation,boussole, cartes nativesRéseaux sociauxAuthentification à Facebook, Twitter,Yahoo YQL. E-mail et carnet dadresse natifDonnéesBase SQLite locale, webservices,enregistrement simplifié de clef / valeurMultimédiaAppareil photo, caméra, lecture enstreaming / local, format audio / vidéoAnalyticsStatistiques dutilisation personnalisé, utilisation/ adoption de lapp. par lutilisateurTitanium+PlusBase de données cryptée, ecommerce,publicité, lecteur de code barre, etcOutils développementCréer, tester et publier votre application avec lemême outil peu importe la plateforme
  49. 49. Développer pour plusieurs OSLAPI Titanium fournit une variable "plateforme"qui peut être utilisée avec des instructions if.Les ressources qui peuvent être spécifiques àune plateforme :● Fichier de code● Images, texte et autres types de fichierLa configuration de chaque plateforme setrouve dans le fichier tiapp.xml
  50. 50. Les windowsUne window est un conteneur de niveausupérieur qui peut contenir dautres views.Elle peut être ouverte et fermée.A louverture, la window et les views enfantssont ajoutées à la pile de rendu de lapplication,au-dessus de toutes les windowsprécédemment ouvertes.
  51. 51. Les viewsLes views sont la base de tous les composantsde linterface utilisateur.Après avoir créer une view, il est important dene pas oublier de lajouter à son view parent ouà une window, sinon elle ne saffichera pas.
  52. 52. Les événementsLa liste des événements déclenché par lesobjets Titanium est différente en fonction deceux-ci, il est donc conseillé de consulter ladocumentation.Les événements peuvent aussi être utiliséspour communiquer entre différente partie delapplication ou module CommonJS.
  53. 53. Framework AlloyPrésentation du framework MVC Alloy
  54. 54. IntroductionLe framework Alloy est un nouveau frameworkdAppcelerator, conçu pour développerrapidement des applications Titanium dequalité.Il est basé sur larchitecture MVC et contient unsupport intégré pour Backbone.js etUnderscore.js
  55. 55. Modèle-Vue-ContrôleurAlloy utilise une structure model-view-controller(MVC) pour séparer lapplication en3 composants différents :● Les modèles● Les vues● Les contrôleurs
  56. 56. Les ModèlesLes modèles fournissent la logique métier,contiennent les règles, les données et létat delapplication.Les modèles sont spécifiés avec des fichiersJavaScript qui fournissent un schéma de latable, la configuration de ladaptateur et de lalogique.
  57. 57. Les VuesLes vues fournissent les composants delinterface graphique pour lutilisateur ou permetà lutilisateur dinteragir avec les données dumodèle.Les vues sont construites à partir descomposants graphiques du SDK Titanium etdéfinies à laide de balises XML et de feuillesde style Titanium Style Sheets (.tss).
  58. 58. Les ContrôleursLes contrôleurs fournissent le ciment entre lescomposants du modèle et la vue sous la formedune logique dapplication.Les contrôleurs Alloy ont généralement unerelation directe avec les vues.Les contrôleurs ont accès à tous les élémentsde la vue et peuvent profiter des événementsde lAPI Backbone.js.
  59. 59. Avantage du MVCUn avantage du MVC est la possibilité deréutiliser le code en séparant la fonctionnalité.Par exemple, vous pouvez avoir des vuesspécifiques pour les différents terminaux, touten gardant le code du contrôleur relativementle même, et les données du modèleinchangées.
  60. 60. Backbone.jsBackbone.js est un framework MVC léger, àlorigine créé pour les applications Web.
  61. 61. Alloy : MVC avec BackboneLes modèles dAlloy sont construits autour deBackbone.js, profitant des API Model etCollection de celui-ci.On définit les modèles en JavaScript pourétendre les fonctionnalités des modèles et descollections Backbone.
  62. 62. Underscore.jsAlloy intégre aussi le support de la librairieUnderscore.js, qui fournit un ensemble defonctions supplémentaires à JavaScript commepar exemple, la manipulation des tableaux.
  63. 63. Structure et conventionsPour simplifier le développement, Alloy utiliseune structure de répertoire et des conventionsde nommage pour organiser lapplication plutôtque dutiliser des fichiers de configuration.Tout dossier ou fichier qui ne respecte pas lesconventions suivantes, sont ignorés par Alloy.
  64. 64. Structure et conventionsPar exemple, au moment de la génération,Alloy va chercher les fichiers requisapp/views/index.xml etapp/controllers/index.js, puis le fichieroptionnel de style app/styles/index.tss.Alloy a besoin de ses fichiers pour créer lavue-contrôleur suivante :Resources/alloy/controllers/index.js.
  65. 65. Exemple de structureappcontrollersandroidindex.jsindex.jsviewsiosindex.xmlindex.xml
  66. 66. WidgetsLes widgets sont des composants autonomesqui peuvent être facilement intégrés dans lesprojets Alloy.Ils ont été conçus comme un moyen deréutiliser le code dans de multiples applicationsou pour être utilisés plusieurs fois dans unemême application.
  67. 67. WidgetsLes widgets ont leurs propres modèles, vues,contrôleurs, styles et médias et doivent setrouver dans le répertoire app/widgets.Des widgets sont déjà fournis avec Alloy et ilest recommandé de créer ce type decomposant pour rendre le plus modulablepossible son application et pouvoir réutiliserceux-ci dans dautres applications.
  68. 68. Le fichier ViewLe fichier view déclare la structure de linterfacegraphique.Cet exemple défini une window avec uneimage et un label.Fichier app/views/index.xml<Alloy><Window><ImageView id="logoImage" onclick="clickImage"/><Label id="logoLabel">Cliquer sur le logo Apple</Label></Window></Alloy>
  69. 69. Le fichier StyleLe fichier style formate et style les composantsdu fichier view dans un format proche desfeuilles de style CSS.Par exemple, le style suivant définit la couleurde fond de la window, la position, dimensionset couleur du label et position, dimensions etchemin de limage.
  70. 70. Le fichier StyleFichier app/styles/index.tss"Window": {backgroundColor: "white"},"#logoLabel": {bottom: 20,width: Ti.UI.SIZE,height: Ti.UI.SIZE,color: #999},"#logoImage": {image: "/images/apple_logo.jpg",width: 24,height: 24,top: 100}
  71. 71. Le fichier ControllerLe fichier contrôleur contient la logique deprésentation, qui répond à lentrée delutilisateur.Par exemple, le code suivant crée une boîte dedialogue lorsque lutilisateur clique sur limage.
  72. 72. Le fichier ControllerFichier app/controllers/index.jsfunction clickImage(e) {Titanium.UI.createAlertDialog({title:Image View,message:Vous avez cliqué !}).show();}$.index.open();
  73. 73. Compilation et exécutionAvec Titanium Studio, il suffit de cliquer sur lebouton Run et de sélectionner le type determinal (Android, iPhone, iPad, etc...) pourlancer la compilation.Alloy va générer les fichiers Titanium à partir duprojet Alloy (contenu du répertoire app) quiseront ensuite compilés par Titanium Studio.
  74. 74. Constantes AlloyConstantes définies par Alloy, à utiliser dans lecontrôleur :OS_IOStrue si la cible de compilation en cours est iOSOS_ANDROIDtrue si la cible de compilation en cours est AndroidOS_MOBILEWEBtrue si la cible de compilation en cours est Mobile Web
  75. 75. Constantes AlloyENV_DEVtrue si la cible du compilateur actuel est de compiler pourle développement (en cours dexécution dans le simulateurou émulateur)ENV_TESTtrue si la cible du compilateur actuel est de compiler pourles essais sur un appareilENV_PRODUCTIONtrue si la cible du compilateur actuel est de compiler pourla production (exécuté après une installation du paquet)
  76. 76. Resources AlloyAlloyLove, liste de widgets pour Alloy :http://alloylove.com/Widget Tweets View :https://github.com/FokkeZB/nl.fokkezb.tweetsViewWidget Calendrier :https://github.com/hamasyou/titanium_alloy_calendar
  77. 77. Projet JUG Mobile TitaniumLes sources de lapplication JUG Mobile codéavec Titanium + Alloy lors de la soirée Titaniumdu 20 mars 2013, se trouve sur mon compteGithub.Vous pouvez y contribuer ou le récupérer pourdémarrer un projet par exemple.https://github.com/timoa/JUGMobile_Titanium
  78. 78. Annexes
  79. 79. Ressources TitaniumBlog Developer
  80. 80. Ressources Titaniummy.appcelerator.com
  81. 81. Documentation TitaniumDocumentation
  82. 82. Github AppceleratorGithub Appcelerator
  83. 83. Inspiration mobile sur Pinterest+7 600 captures décran dinterface mobile
  84. 84. Autres lienshttp://timoa.com(nouvelle version à venir)@timoaGithub : https://github.com/timoa
  85. 85. Questions / RéponsesAvez-vous des questions ?
  86. 86. Merci !
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×