1. Titanium Studio et les modules
Modules, librairies and co
#4 Meetup Paris Titanium
Y a-t-il des modules pour titanium ? Quels sont les
modules intéressants ? Et moi si veux programmer
de manière modulaire ?
Gautier Pialat

2. Qui suis-je ?
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
2

3. Le menu
Les différents plats
3

4. Le marketPlace titanium
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
4

5. Des modules du marketplace
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.
5

6. Des modules du marketplace
le push android
6

7. Des modules du marketplace
les open sources !!
Bar code Bump
Charts (iOS)
scanner
column
image
Maps v2
factory
(android)
Identifie ton besoin puis prends des modules
7

8. Une librairie utilitaire
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)
8

9. La librairie : Titan Up
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…)
9

10. Titan Up
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.
10

11. Titan Up
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)
11

12. Modules et Common JS
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
12

13. Modules et Common JS
Les modules génériques - Module générique non objet
- Besoin de fonctions jouant un rôle
- Export des fonctions nécessaires
utilitaire ?
HelloModule.js app.js
var _textHello = '‘hello'‘;
var _textCoucou = '‘coucou '‘; var HelloM= require ('/HelloModule');
var _counter = 0;
HelloM.sayHello();
function sayHello () HelloM.sayCoucou();
{ alert(HelloM. countNBHelloOrCoucou())
_counter ++;
return _textHello;
}
function sayCoucou ()
{
_counter ++;
return _textCoucou ;
}
function countNBHelloOrCoucou()
{
return _counter ++;
}
exports.sayHello = sayHello;
exports.sayCoucou = sayCoucou;
exports.countNBHelloOrCoucou = countNBHelloOrCoucou;
13

14. Modules et Common JS
Les classes statiques
- Module objet
- Classe objet utilitaire ? - Export du module
PointCounter.js
app.js
//variables statiques privées
var _points = 0;
var _defaultPoints = 3; var Counter= require ('/PointCounter');
function MyClass ()
{ Counter. winPoints();
} alert(‘’J’ai déjà ‘’+Counter.winPoints()+’’ points’’ );
// méthode statique privée
var _ pointsCounter = function ()
{
_points = _points + _defaultPoints;
return _points ;
};
// méthode statique publique
MyClass.winPoints = function ()
{
return _pointsCounter() ;
};
module.exports = PointCounter;
14

15. Modules et Common JS
Les classes - Module objet
- Besoin d’objets ? - Export de l’objet nécessaire
Point.js pointFactory.js
function Point(x,y)
{
var _x = x; var Point = require(/Point);
var _y= y; var p1 = new Point(5,2);
var _point = null; var p2 = new Point(12,-2);
var _pointCreator = function ()
{ alert(p1.printPoint);
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;
15

16. Modules et Common JS
Les classes et prototype
- Besoin de bcp d’objets et de performance? - Utiliser prototype
Person.js contacts.js
function Person(firstName,lastName) {
this.firstName = firstName; var Person = require('Person');
this.lastName = lastName; var arrayP = new array();
}
Person.prototype.fullName = function() {
arrayP.push(new Person(‘erwan',‘sarcelette');)
return this.firstName+' '+this.lastName; arrayP.push(new Person(‘lucie',‘durant');)
}; arrayP.push(new Person(‘damien',‘louis');)
module.exports = Person; var i;
for(i=arrayP.length;c--;)
{
Ti.API.info(arrayP[i].fullName());
}
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
16

17. Modules et Common JS
et on peu l’utiliser pour les UI ? qui encapsule (wrapper)
- Classe
- Besoin d’objets graphiques modulaires - Fonction qui étend l’objet graphique
MyWindow .js (parasitic inherance)
function MyWindow (params)
app.js
{
var _self = null;
var _iv = null; var MyWindow = require ('/MyWindow');
var _imageurl = 'http://www.google.com/images/srpr/logo3w.png';
if (typeof params.imageurl != "undefined") var w = new MyWindow ({
{ imageurl:
_imageurl = params.imageurl; 'http://l.yimg.com/a/i/ww/met/yahoo_logo_us_061509.png'
delete params.imageurl; });
}
_self = Ti.UI.createWindow (params); w.open ();
_iv = Ti.UI.createImageView ({ setTimeout (function () {
top: 0, w.changeImage ('https://s-
image: _imageurl
}); static.ak.fbcdn.net/rsrc.php/v2/yv/r/aWMatkshsiW.png');
}, 3000);
_self.add (_iv);
_self.changeImage = function (imageurl)
{
_iv.setImage (imageurl);
};
return _self;
}
module.exports = MyWindow;
17

18. QUESTIONS
ET REPONSES
18

19. Sources utiliées pour la présentation
- 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)
19