CommonJs + titanium

Question

this question is closer from commonJs than titanium in my mind. i code a big file. quite ugly (1st peace of code). You can jump it if you want.

The probleme : I have 2 view in my code ,i would like to put them into diferent file unfortunatly, i do nothing well with : export.modules. check the seconde & third peace of code

 var fenetreBase =   Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();

var viewimage = Titanium.UI.createView({backgroundColor:'red'});
var logo = Titanium.UI.createImageView({ image:'/image/test.jpg', top:0, left:0, width:"10%", height:"7%"});
var label1 = Ti.UI.createLabel({ backgroundColor:"blue", color: "white", text: 'Graphe', textAlign:Titanium.UI.TEXT_ALIGNMENT_CENTER, left:"10%", width: "90%", height:"7%", top:0});
var logo2 = Titanium.UI.createImageView({ image:'/image/test.jpg', top:0, left:0, width:"10%", height:"7%"});
var label2 = Ti.UI.createLabel({ backgroundColor:"blue", color: "white", text: 'Graphe', textAlign:Titanium.UI.TEXT_ALIGNMENT_CENTER, left:"10%", width: "90%", height:"7%", top:0});
var mapvisu = Titanium.UI.createImageView({ image:'/image/test.jpg', top:"7%",left:0, width:"100%",height:"93%"});
var viewgraphe = Titanium.UI.createView({backgroundColor:'red'});
var concentration = Titanium.UI.createImageView({image:'/image/test.jpg',top:"7%",left:0,width:"100%",height:"31%"});
var meteo = Titanium.UI.createImageView({image:'/image/test.jpg',top:"38%",left:0,width:"100%",height:"31%"});
var emission = Titanium.UI.createImageView({image:'/image/test.jpg',top:"69%",left:0,width:"100%",height:"31%"});

viewgraphe.add(label2);
viewgraphe.add(logo2);
viewgraphe.add(concentration);
viewgraphe.add(meteo);
viewgraphe.add(emission);

viewimage.add(logo);
viewimage.add(label1);
viewimage.add(mapvisu);

fenetreBase.add(viewimage);
fenetreBase.add(viewgraphe);

viewimage.visible = false;
viewgraphe.visible = true;

i 'd like 3 file : "app.js" , "vueimage.js" , "vueGraphe.js".with app.js =

var fenetreBase =  Titanium.UI.createWindow({fullscreen:true,backgroundColor:"white",exitOnClose:true});
fenetreBase.open();

vueImage = require("vueimage");
vueGraphe = require("VueGraphe");

fenetreBase.add(vueImage ou vueGraphe)//depends need.

with vueimage.js & vuegraphe.js look like that :

function vueimage(title) { var self = Ti.UI.createView({backgroundColor:'white'});
self.add(.....);//item i need
};

module.exports = vueimage;

if sb can tell me how to figure out that thing. All my try were concluded by dismal failure or hard shutdown. :s.

Answer 1

Well, first of all make sure you read this guide by Tappcelerator about using commonJS in Titanium: https://wiki.appcelerator.org/display/guides/CommonJS+Modules+in+Titanium

A bit of a quick background, commonJS is a javascript library for dependency loading in javascript, which makes it easy to break a javascript program into pieces of independent code, each running in it's own scope.

Titanium makes use of commonJS from version 1.8 of the SDK. and using it gives you great clean code, breakable into defined pieces, running in their own scoped, and very great for performance.

in Titanium you could use this in one of the following ways: (1) you either make a module with function that you can call from the object requiring them (which is pretty much like static methods), or (2) you have the entire module act as an object with it's own functions (prototyped) and exposed by one function.

for example:

Module (myModule.js):

function sayHello(name) {
      alert('Hello ' + name);
}
exports.sayHello = sayHello;

App (app.js):

var myModule = require('/myModule');
myModule.sayHello('developer82');

the other way to do that (and this one I think is what you're looking for):

Module (myView.js):

function myView() {
     var some_view = Ti.UI.createView({ /* properties */ });
     // your logic comes here
     return some_view;
}

module.exports = myView;

App (app.js):

var myView = new (require('/myView'))();

of course there are other ways to go about this like creating something that you can require and implement something like createMyView function (see peracetic inheritance).

hope this answers you question.