Tips’n’Tricks for pureMVC on Titanium

Howdy people, its been a while. Anyway, here are some useful info on pureMVC framework. Titanium is not really meant for OOP, classes are not really welcome inside this framework. Most of the files are meant to be included as if they were AS2 #include somefile.as with procedural code instead of real OOP. This has its own advantages and drawback, main advantage is that newbies can quickly set up something that they later name as “Application”. Reminds me the times of flash 7 where designers used to tweak code directly on timeline and later they would say “i fixed it”. However the drawback is that you cant control the display tree and the whole structure application goes through the window. That is not how a real professional app should be built. pureMVC comes in to save the day with the encapsulation of most views and windows and a strong event based UI interaction. But lets get to the point here.

Heres tip #1:
All of your windows should be at least a viewComponent of a mediator. Even better is to use a separate component to wrap the window inside a class and just attach simple events to the component. Usually any outcome of UI interaction with the window is either open another window or close the window and go back to the previous one. Surely there are a lot of things you do inside a window, like input text, move stuff around etc, but at the end of it all ist still a back or next action. pureMVC has a good control on its components and if you remove a mediator or a component from memory, its is gone for good, no memory leaks at all.

Tip #2:
Use commands, A LOT, they will save your butt, its your best friend. Don’t be afraid of huge amount of classes, its normal, and the more classes you have the more localized your bug is and easier to find/resolve

Tip #3:
Remove unused mediators, reinitiating a mediator requires very little time, event if you have a huge table component, dont be affraid of killing it.

Tip #4:
If you have any piece of code that is similar to something you used before, write a wrapper component class for it. A good example is a custom title bar on the head of the window.
instead of using this piece of code in every window you create
[cc lang=”JavaScript”]
var backBTN=Ti.UI.createImageView({
image:’images/components/back_btn.png’,
width:65,
height:24,
top:0.5*(57-25),
left:10
});
var title=Ti.UI.createView({
width:’100%’,
height:57,
backgroundImage:’images/components/title_background.png’,
top:0
});
title.add(backBTN);
backBTN.addEventListener(‘click’,this.doBackClick.bind(this));

var titleLabel= Ti.UI.createLabel({
text:’Some title’,
width:200,
height:24,
textAlign:’center’,
color:’#FFFFFF’,
top:0.5*(57-25)
});
titleLabel.font={fontWeight:’bold’,fontSize:16};
title.add(titleLabel);
this.view.add(title);
[/cc]

You can use component and save yourself a lot of time by doing this:
[cc lang=”JavaScript”]
TitleBarComponent=new Class({
Extends: Events,
view:null,
initialize:function(title,hasBack){
this.view=Ti.UI.createView({
width:’100%’,
height:57,
backgroundImage:’images/components/title_background.png’,
top:0
});
if(hasBack){
var backBTN=Ti.UI.createImageView({
image:’images/components/back_btn.png’,
width:65,
height:24,
top:0.5*(57-25),
left:10
});
this.view.add(backBTN);
backBTN.addEventListener(‘click’,this.doBackClick.bind(this));
}
var titleLabel= Ti.UI.createLabel({
text:title,
width:200,
height:24,
textAlign:’center’,
color:’#FFFFFF’,
top:0.5*(57-25)
});
titleLabel.font={fontWeight:’bold’,fontSize:16};
this.view.add(titleLabel);
},
getView:function(){
return this.view;
},
doBackClick:function(){
this.fireEvent(‘back’);
}
});
[/cc]
and once you have this, simply create a class
[cc lang=”JavaScript”]
this.window.add(new TitleBarComponent(‘Some Title’).getView() );
[/cc]