Titanium studio et les modules
-
Upload
gautier-pialat -
Category
Documents
-
view
674 -
download
2
Transcript of Titanium studio et les modules
Titanium Studio et les modules
Y a-t-il des modules pour titanium ? Quels sont les modules intéressants ? Et moi si veux programmer de manière modulaire ?
Modules, librairies and co#4 Meetup Paris Titanium
Gautier Pialat
Qui suis-je ?
2
Que fais-je ? ou vais-je ?- Consultant sur des projets Business Intelligence- Aide à la mise en place de projets agiles (Scrum)
- Co-Fondateur de captainspot (SM et développeur sur Titanium)
- Passionné par l’agile, le Lean startup et l’entreprenariat- Interventions chez Leeaarn
Le menu
3
Les différents plats
Le marketPlace titanium
4
les généralités
- MarketPlace ->Search Results > Newest first- Veille techno !!
- Gestion des modules obsolètes absente.- Attention aux vieux modules
- Préférer le téléchargement des modules gratuits et open source sur github!
- 24 modules passés en open source
- Modules : License violation detected - Créer un nouveau projet - Récupérer guid et copier dans ancien projet- La Solution
Des modules du marketplace
5
les mesures
- Module gérant le SDK 2 de google analytics (tableaux de bords orientés Mobile)
- Disponible depuis mars 2013
- Compatible Android et Iphone.
Des modules du marketplace
6
le push android
Des modules du marketplace
7
les open sources !!
Bar code scanner
BumpCharts (iOS)
columnimage factory Maps v2
(android)
Identifie ton besoin puis prends des modules
Une librairie utilitaire
8
Titan Up
- Une librairie utilitaire- https://github.com/jpriebe/TitanUp
- Respecte CommonJS
- Des informations sur le téléphone.
- Aide à une gestion propre de la géolocalisation et des vues MapsV1
- Aide pour le design de composants graphiques génériques (crossPlatform)
La librairie : Titan Up
9
Les informations devices
- Device.os - Retourne ios ou android
- Device.physical(Height|Width)- Récupérer les dip ou px longueur et largeur
- Device.isTablet- Savoir si on est sur une tablette
- Device.working(Width|Height)- Récupérer les dip ou px longueur et largeur (sans les menus, nav bars…)
Titan Up
10
Le location manager et
mapviews - TU.LocationManager
- Utilise les meilleures options de géolocs.
- Une fois la localisation trouvée un refresh par minute.
- TU.UI.Views.ManagedMapView
- Constat : crash android 2 instances de mapview par appli (map V1).
- Gestion d’instance unique
- Inclure une mapview dans une vue via une fonction ?- Lors de appel fonction si vue différente alors on supprime la mapview de l’ancienne vue et on
la met dans la nouvelle vue.
Titan Up
11
Aide pour UI- TU.UI.EventThrottle
- Prévenir les doubles clics
- TU.UI.Sizer(numeric) - Permet de calculer les dip pour iphone et les px pour android.
- TU.UI.Theme- Mettre dans un endroit centralisé ces fonts et couleurs
- TU.UI.Views.SimplePicker (ios et android)
- TU.UI.Views.SelectBar (ios et android)
Modules et Common JS
12
Moi aussi je veux être
modulaire !!!- Constat : pauvreté de la doc CommonJS coté
éditeur (comme souvent !!)
- Ne plus utiliser les includes :- Risque de collision de variables
- Ne pas utiliser les multi contextes
- Quelques règles de l’approche modulaire :- Ne charger les modules que quand cela est nécessaire- N’exporter que ce dont vous avez besoin- Utiliser prototype dès que vous le pouvez
Modules et Common JS
13
Les modules génériques
HelloModule.js
var _textHello = '‘hello'‘;var _textCoucou = '‘coucou '‘;var _counter = 0;
function sayHello () {_counter ++; return _textHello;}
function sayCoucou () {_counter ++; return _textCoucou ; }
function countNBHelloOrCoucou(){return _counter ++; }
exports.sayHello = sayHello;exports.sayCoucou = sayCoucou;exports.countNBHelloOrCoucou = countNBHelloOrCoucou;
app.js
var HelloM= require ('/HelloModule'); HelloM.sayHello();HelloM.sayCoucou();alert(HelloM. countNBHelloOrCoucou())
- Module générique non objet- Export des fonctions nécessaires
- Besoin de fonctions jouant un rôle utilitaire ?
Modules et Common JS
14
Les classes statiques
PointCounter.js
//variables statiques privéesvar _points = 0;var _defaultPoints = 3;
function MyClass (){}
// méthode statique privéevar _ pointsCounter = function (){_points = _points + _defaultPoints;return _points ;};
// méthode statique publiqueMyClass.winPoints = function (){return _pointsCounter() ;};
module.exports = PointCounter;
app.js
var Counter= require ('/PointCounter');
Counter. winPoints();alert(‘’J’ai déjà ‘’+Counter.winPoints()+’’ points’’ );
- Module objet- Export du module- Classe objet utilitaire ?
Modules et Common JS
15
Les classes
Point.js
function Point(x,y){ var _x = x; var _y= y; var _point = null;
var _pointCreator = function () {
point = {x : _x , y : _y} };
this.xgetPoint = function () { return _point; }
this.printPoint = function () { return ‘’Point x = ’’+_point .x+’’ et y = ‘’+_point .y; }
_pointCreator();
}
module.exports = Point;
pointFactory.js
var Point = require(/Point);var p1 = new Point(5,2);var p2 = new Point(12,-2);
alert(p1.printPoint);
- Module objet- Export de l’objet nécessaire- Besoin d’objets ?
Modules et Common JS
16
Les classes et prototype
Person.js
function Person(firstName,lastName) { this.firstName = firstName; this.lastName = lastName;} Person.prototype.fullName = function() { return this.firstName+' '+this.lastName;}; module.exports = Person;
contacts.js
var Person = require('Person');var arrayP = new array();
arrayP.push(new Person(‘erwan',‘sarcelette');)arrayP.push(new Person(‘lucie',‘durant');)arrayP.push(new Person(‘damien',‘louis');)
var i;for(i=arrayP.length;c--;){Ti.API.info(arrayP[i].fullName());}
- Utiliser prototype- Besoin de bcp d’objets et de performance?
La fonction prototype est définie une fois au chargement de l‘objet => gain de performance !!
On ne peut pas accéder aux membres et méthodes privés
Modules et Common JS
17
et on peu l’utiliser pour les UI ?
MyWindow .js
function MyWindow (params){ var _self = null; var _iv = null; var _imageurl = 'http://www.google.com/images/srpr/logo3w.png';
if (typeof params.imageurl != "undefined") { _imageurl = params.imageurl; delete params.imageurl; }
_self = Ti.UI.createWindow (params);
_iv = Ti.UI.createImageView ({ top: 0, image: _imageurl });
_self.add (_iv);
_self.changeImage = function (imageurl) { _iv.setImage (imageurl); };
return _self;}
module.exports = MyWindow;
app.js
var MyWindow = require ('/MyWindow');
var w = new MyWindow ({ imageurl: 'http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png'});
w.open ();
setTimeout (function () { w.changeImage ('https://s-static.ak.fbcdn.net/rsrc.php/v2/yv/r/aWMatkshsiW.png');}, 3000);
- Classe qui encapsule (wrapper)- Fonction qui étend l’objet graphique(parasitic inherance)
- Besoin d’objets graphiques modulaires
QUESTIONSET REPONSES
18
Sources utiliées pour la
présentation
19
- http://smorgasbork.com/component/content/article/38-titanium-mobile/135-titanium-mobile-beyond-the-prototype (CommonJS)
- https://marketplace.appcelerator.com/home (maketplace)
- Appcelerator Titanium : Patterns and Best Practices(livre et commonJS)
- https://github.com/appcelerator/titanium_modules (module open sources titanium)
- http://iamyellow.net/post/40100981563/gcm-appcelerator-titanium-module (push notification android)
- https://github.com/MattTuttle/titanium-google-analytics (gg analytics)