Conférence Titanium + Alloy au JUG Montpellier
Upcoming SlideShare
Loading in...5
×
 

Conférence Titanium + Alloy au JUG Montpellier

on

  • 2,748 views

Slides de la conférence que j'ai donné lors de la soirée Titanium + Alloy au JUG de Montpellier.

Slides de la conférence que j'ai donné lors de la soirée Titanium + Alloy au JUG de Montpellier.

Statistics

Views

Total Views
2,748
Views on SlideShare
1,821
Embed Views
927

Actions

Likes
7
Downloads
63
Comments
6

5 Embeds 927

http://www.scoop.it 857
http://news.humancoders.com 66
https://www.facebook.com 2
https://twitter.com 1
http://translate.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
  • @Hajourame Merci Hajar ! D'autres présentations sont en cours de préparation :)
    Are you sure you want to
    Your message goes here
    Processing…
  • suuuperbe présentation tout est bien claire j'ai bien apprécie^^ bon travail ...et merci pour le partage ^^
    Are you sure you want to
    Your message goes here
    Processing…
  • Oui sur Alloy ;) Création de widgets, thèmes, etc...
    Are you sure you want to
    Your message goes here
    Processing…
  • d'autres contenus sur Alloy (qui parait si prometteur)?
    Are you sure you want to
    Your message goes here
    Processing…
  • Merci David ! J'ai d'autres contenus à venir à partir de mai logiquement ;)
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Conférence Titanium + Alloy au JUG Montpellier Conférence Titanium + Alloy au JUG Montpellier Presentation Transcript

  • SoiréeTitanium MobileDamien LaureauxJUG Montpellier20 Mars 2013
  • Présentation Damien Laureaux @timoa Développeur mobile dans une SSII de Montpellier, je développe des applications iPhone, iPad et Android depuis plus de 3 ansen utilisant le framework Appcelerator Titanium.
  • Certifié "Titanium Certified App Developer","Titanium Certified Mobile Developer", je faispartie de la centaine dexperts sélectionnés parAppcelerator pour aider la communautéTitanium via le programme "Titan".
  • AppceleratorTitaniumPrésentation dAppcelerator Titanium
  • La plateforme AppceleratorAppcelerator Titanium est une plateformeouverte de développement pour créer desapplications natives entre les différentsterminaux mobiles et systèmes dexploitation,dont iOS, Android, Windows, BlackBerry,Tizen, HTML5 et bientôt Windows Phone.
  • La plateforme Appcelerator La plateforme Appcelerator
  • 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.
  • Cycle de vie dune application
  • 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 ** disponible depuis le 30 janvier 2013 mais peu dinformations pour le moment.
  • 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.
  • +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.
  • 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.
  • Simplifie le développementLes développeurs ayant delexpérience en développementWeb peuvent devenir productifsimmédiatement pour créer desapplications natives mobiles riches àpartir dune seule base de code sansavoir à gérer de multiples outils dedéveloppement, de langages etméthodologies.
  • 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)
  • 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 les rend gratuits pour uneutilisation personnelle et commerciale.
  • Titanium VSPhoneGapComparaison entre Titaniumet PhoneGap
  • 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.
  • 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.
  • 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.
  • 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 plateformes.
  • 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).
  • 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...
  • 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, CSS,Javascript, Python ou encore Ruby).Aptana a été racheté par Appcelerator et cestcomme ça quest né Titanium Studio.
  • 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 des projets)● 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)
  • 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)● Déploiement et distribution pour PHP, Ruby (Engine Yard, RedHat Cloud, Capistrano)
  • 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 projet● Ecrire le code source● Compiler le code source● Debugger lapplicaton● Simuler lapplication● Signer et distribuer lapplication
  • La chaîne doutils pour Android Exemple de la chaîne doutils nécessaire à la création dune application Android native.
  • La chaîne doutils pour iOS Exemple de la chaîne doutils nécessaire à la création dune application iOS native.
  • La chaîne doutils Titanium Studio Avec Titanium Studio, lensemble de la chaîne nécessaire à un projet mobile est traité en utilisant un seul logiciel.
  • JavaScript+ mobile= Titanium Mobile
  • Lenvironnement Javascript de TiInterpréteur V8 / Rhino sous Android etJavaScriptCore sous iOS.Le code est exécuté dans un "contexteexclusif", similaire au thread JS dans unnavigateur.Le fichier app.js définit le contexte "racine" delapplication et la plupart du temps, un contextesuffit.
  • Base dune application JavaScriptPour la plupart des développeurs, le 1er projetTitanium est leur première application écrite enJavaScript.Il est important dadhérer à certaines règles :● Protéger le scope global (variables globales)● Être modulaire● Sefforcer de garder le code DRY (Dont Repeat Yourself)
  • NamespacesJavaScript partage un seul espace de nomglobal et unique.Placez vos variables dans cet espace pour :● Prévenir des collisions● Fournir un "conteneur" pour vos variables● Suivre le modèle de Titanium : Titanium.UI, Titanium.App, Titanium.API, ...
  • NamespacesCréation de lobjet qui servira de variableglobale pour lapplication :var MyApp = {};MyApp.someproperty = foo;MyApp.somefunction = function() {};Création dun sous namespace :MyApp.DB = {};
  • CommonJSAvantages de lutilisation de CommonJS :● Les modules ont leur propre espace de nom global● Pas daccès à lespace de nom du contexte appelant● Retourne seulement les propriétés et méthodes que vous avez spécifié● Le reste est "privé"
  • Base saine dune application1. Le fichier app.js doit être votre "bootstrap"2. Définir lespace de nom de votre application3. Utiliser Require() pour charger vos modules4. Créer et ouvrir votre premier composant UI
  • Les événementsSimilaires aux événements JavaScript dans unnavigateur Web.On peut utiliser addEventListener() surpratiquement tous les objets JavaScript.On peut aussi programmer de déclencher desévénements sur des objets avec fireEvent().
  • Les évènementsLes événements sont accessibles au travers delapplication, ce qui savère utile pourcommuniquer entre plusieurs contextes(modules CommonJS par exemple) via desdonnées JSON sérialisées.Ti.App.fireEvent(myEvent, { "id": 396 });Ti.App.addEventListener(myEvent, function(e) {Ti.API.log(ID: + e.id); });
  • 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 composantsgraphiques spécifiques à celles-ci.
  • 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 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
  • Position et agencement Position ● top et left ● bottom et right ● center ● size (rendu) Agencement ● Absolute ● Vertical ● Horizontal
  • Agencement absoluPour iOS, le bouton va se positionner à 170ptet pour Android à 170px, du haut de la window.
  • Agencement absoluPour iOS, le bouton va se positionner à 170ptet pour Android à 170px, du haut de la window.
  • Agencement vertical Lagencement vertical permet dempiler les éléments verticalement. La valeur de top devient alors relative à lélément précédent et non à celle de la window.
  • 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, 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.
  • 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.
  • 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 !
  • Vue densemble du SDK TitaniumPerformance native MultimédiaPerformance native + Interface native Appareil photo, caméra, lecture en(tableaux, animations, gestes, etc.) streaming / local, format audio / vidéoGéolocalisation AnalyticsRéalité augmentée, géolocalisation, Statistiques dutilisation personnalisé, utilisationboussole, cartes natives / adoption de lapp. par lutilisateurRéseaux sociaux Titanium+PlusAuthentification à Facebook, Twitter, Base de données cryptée, ecommerce,Yahoo YQL. E-mail et carnet dadresse natif publicité, lecteur de code barre, etcDonnées Outils développementBase SQLite locale, webservices, Créer, tester et publier votre application avec leenregistrement simplifié de clef / valeur même outil peu importe la plateforme
  • 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
  • Répertoires par plateforme Le répertoire Ressources peut contenir les répertoires android, iphone, mobileweb, blackberry afin de placer les fichiers spécifiques à chacune de ces plateformes (images, fichiers JS, etc...).
  • Répertoires par plateformeLors de la compilation, le fichier correspondantà la plateforme (sil existe) est utilisé.
  • InternationalisationQue ce soit pour distribuer votre application enplusieurs langues ou une seule, il est conseillédutiliser li18n avec les projets Titanium.En effet, cest un bon moyen de séparer lestermes utilisés du code source et facilitera lamaintenance de lapplication.Le support multilingue est très simple àimplémenter avec Titanium.
  • InternationalisationDans le code, il faut utiliser :Ti.Locale.getString(welcome_message);ou son alias plus court :L(welcome_message);
  • Composer linterface utilisateur50% ou plus, de votre travail va reposer sur laconstruction des composants de linterfaceutilisateur.Le reste, consiste à créer la logique de gestiondes événements.La maintenance de votre application sera plusfacile si elle est découpée en "petits"composants.
  • 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.
  • 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.
  • 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.
  • Les événementsPour déclencher un événement personnalisé,on utilise la fonction Ti.App.fireEvent() :var dbCount = 15;Ti.App.fireEvent(myApp:saveDB, { count: dbCount});
  • Les événementsOn intercepte ensuite lévénement avec Ti.App.addEventListener() :Ti.App.addEventListener(App:saveDB, function(e) { alert(e.count + éléments sauvés); });
  • Lobjet XMLHTTPRequestDans un navigateur Web, les requêtes Ajaxsont relayées à lobjet XMLHTTPRequest :
  • Lobjet Titanium HTTPClientTi.Network.HTTPClient implémente laspécification XHR (XMLHTTPRequest).Cest une interface client HTTP de bas niveauavec support de tous les "verbes" HTTP (GET,POST, PUT, DELETE, etc).La façon dutiliser XHR devrait être familièreaux développeurs Web utilisant Ajax.
  • JSON en tant que format déchangeJSON est recommandé comme format detransport de données pour Titanium Mobile.Il est très simple de sérialiser les données deréponse :JSON.parse()Convertit un string vers un objet JavaScriptJSON.stringify()Convertit un objet JavaScript vers un string
  • Framework AlloyPrésentation du framework MVC Alloy
  • 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
  • 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
  • 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.
  • 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).
  • 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.
  • 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.
  • Backbone.js Backbone.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 celui-ci.On définit les modèles en JavaScript pourétendre les fonctionnalités des modèles et descollections Backbone.
  • Underscore.js Alloy intégre aussi le support de la librairie Underscore.js, qui fournit un ensemble defonctions supplémentaires à JavaScript comme par exemple, la manipulation des tableaux.
  • 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.
  • 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.
  • Structure des répertoiresapp Contient les modèles, vues, contrôleurs et les médias (images, pdf, sons, vidéos, etc)app/config.json Configuration du projet Alloy.
  • Structure des répertoiresapp/assets Contient les images et autres fichiers que vous avez besoin de copier dans le répertoire Resources. Il peut comporter dautres répertoires comme app/fonts pour les polices.
  • Structure des répertoiresapp/controllers Contient les contrôleurs au format fichier.js correspondant au fichier de la vue app/views/fichier.xml
  • Structure des répertoiresapp/lib Contient les librairies spécifiques à lapplication, la plupart du temps au format CommonJS. Contient le fichier deapp/migrations migration de la DB au format <DATETIME>_fichier.json
  • Structure des répertoiresapp/models Contient les modèles dans le format fichier.jsapp/styles Contient les styles des vues au format fichier.tss appliqué au fichier de la vue app/views/fichier.xml
  • Structure des répertoiresapp/themes Contient les thèmes, avec des styles et médias personnalisés en fonction du thème.app/widgets Contient des widgets permettant dutiliser des composants dune application Alloy à une autre.
  • Structure des répertoiresapp/views Contient les vues au format fichier.xml correspondant aux fichiers app/controllers/fichier.js et app/styles/fichier.tss Contient les fichiersi18ni18n/fr (exemple) de langue au formati18n/en (exemple) strings.xml
  • Structure des répertoiresRessources Contient le projet Titanium généré par Alloy à partir des fichiers présents dans le répertoire app. Tous les fichiers sont écrasés à chaque fois quAlloy génère lapplication Titanium.
  • NotesLes répertoires lib, migrations, themes etwidgets ne sont pas automatiquement crééslors de la création dun nouveau projet.Les répertoires migrations et widgetspeuvent être créés lorsquun composant estgénéré à partir du menu contextuel.Les répertoires lib et themes sont à créermanuellement.
  • Gestion des plateformesLes controleurs, vues et styles peuvent avoirdes fichiers spécifiques pour Android, iOS ouMobile Web (HTML5).Il suffit dajouter un répertoire android, ios oumobileweb dans les répertoires controllers,views ou styles.On peut aussi, utiliser des conditions etattributs dans le code des contrôleurs, vues et
  • Exemple de structureapp controllers android index.js index.js views ios index.xml index.xml
  • 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.
  • 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.
  • BuiltinsAlloy contient aussi des utilitaires additionnelsutilisés pour simplifier certaines fonctionscomme les animations ou la manipulation desvariables par exemple.Ces utilitaires sont appelés des builtins etpeuvent être chargés dans le contrôleur.
  • Utiliser les BuiltinsPour utiliser les builtins, il suffit de les déclarerdans le contrôleur avec le répertoire alloycomme répertoire racine.Dans cette exemple, la vue courante vibrequand on clique sur le bouton shake :var animation = require(alloy/animation);$.shake.addEventListener(click, function(e){ animation.shake($.view);});
  • Installation dAlloyAlloy est installé automatiquement à partir duSDK Titanium 3.0Il est possible de linstaller manuellement, enligne de commande (exemple sur un Mac OSXou Linux Ubuntu) :$ sudo npm install -g alloy
  • 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>
  • 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.
  • 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}
  • 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.
  • Le fichier ControllerFichier app/controllers/index.jsfunction clickImage(e) { Titanium.UI.createAlertDialog({ title:Image View, message:Vous avez cliqué ! }).show();}$.index.open();
  • Le répertoire AssetPour que limage de lexemple puisse êtreutilisée, il faut la copier dans le répertoireapp/asset/images.Elle sera copiée dans le répertoireRessources/images par Alloy durant lacompilation.
  • Compilation et exécutionAvec Titanium Studio, il suffit de cliquer sur lebouton Run et de sélectionner le type determinal pour lancer 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.
  • Utilisation des contrôleursTous les éléments de linterface ayant unattribut id dans une vue sont automatiquementdéfinies et disponibles en tant que propriétépréfixé par la variable spéciale $ dans lecontrôleur.Le $ est une référence au contrôleur.
  • Utilisation des contrôleursFichier app/controllers/index.jsfunction doClick(e) { alert($.label.text);}$.index.open();Fichier app/views/index.xml<Alloy> <Window class="container"> <Label id="label" onClick="doClick">Hello!</Label> </Window></Alloy>
  • Utilisation des contrôleursDans lexemple précédant, le préfixe $.labeldans le contrôleur est utilisé pour accéder àlinstance de lobjet Ti.UI.Label dans la vue.Cette référence est utilisée pour accéderdirectement aux propriétés ou aux méthodesde cet objet.Par exemple, lappel de $.label.hide()cache le label de la vue ou vous pouvezmodifier le texte du label avec $.label.text.
  • Utilisation des contrôleursPour accéder à des contrôleurs externes et desvues, utilisez respectivement les méthodesAlloy.createController (pour ouvrir unenouvelle window par exemple) et Controller.getView.Si lobjet UI du plus haut niveau na pasdidentifiant défini (id), la référence utilisée estle nom du contrôleur préfixé par $.
  • Utilisation des contrôleursMais si un attribut id a été défini, par exemple,<Window id=window>, le contrôleur a besoindutiliser $.window pour accéder à lobjetWindow.$.index ne sera pas défini et lapplicationrenverra une erreur lors de lappel $.index.open().
  • 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
  • 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)
  • Utilisation des widgetsPour utiliser un widget, il faut dabord lajouteren tant que dépendance dans le fichierconfig.json :"dependencies": { "com.appcelerator.loading":"1.0"}
  • Utilisation des widgetsEnsuite, ajoutez-le à une vue dans le projet, enutilisant la balise Require ou Widget (Alloy1.0) :<Widget id="loading" src="com.appcelerator.loading"/>
  • Utilisation des modèlesAvec Alloy, les modèles héritent de la classeBackbone.Model.Ils contiennent les données interactives et lalogique utilisée pour les contrôler et y accéder.Les modèles sont spécifiés avec les fichiersJavaScript qui fournissent un schéma de latable, la config. de ladaptateur et la logiquepour étendre la classe Backbone.Model
  • Utilisation des modèlesLes modèles sont automatiquement définis etdisponibles dans le scope du contrôleur dufichier JavaScript du même nom.Le fichier JavaScript exporte une définition delobjet composé de trois objets différents.Le premier objet, appelé config, définit leschéma de la table et de linformation deladaptateur.
  • Utilisation des modèlesLes deux autres objets extendModel etextendCollection définissent des fonctionspour étendre, outrepasser ou implémenter lesclasses Backbone.Model et Backbone.Collection.
  • Exemple de config. dun modèleexports.definition = { config : { }, extendModel: function(Model) { _.extend(Model.prototype, { }); return Model; }, extendCollection: function(Collection) { _.extend(Collection.prototype, { }); return Collection; }}
  • Lobjet configconfig: { "columns": { "title": "TEXT", "author": "TEXT" }, "defaults": { "title": "-", "author": "-" }, "adapter": { "type": "sql", "collection_name": "books" }}
  • Resources AlloyWidget Drawer Menu (Facebook like) :https://github.com/ricardoalcocer/alloy-widget-drawermenuWidget Tweets View :https://github.com/FokkeZB/nl.fokkezb.tweetsViewWidget Calendrier :https://github.com/hamasyou/titanium_alloy_calendar
  • Annexes
  • Ressources my.appcelerator.com
  • Ressources Documentation
  • Ressources Github Appcelerator
  • Autre ressourcesCompte Twitter : @timoaSite : http://timoa.com (nouvelle version en cours)Interfaces mobile : http://pinterest.com/timoa
  • ProjetJUG MobileSources du projet mobile JUG Mobile
  • Projet JUG Mobile TitaniumLes sources de lapplication JUG Mobile codéen Titanium lors de la 2ème partie se trouvesur Github.Vous pouvez y contribuer ou le récupérer pourdémarrer un projet par exemple.https://github.com/timoa/JUGMobile_Titanium