Using MVC and optimized code structure in Titanium Appcelerator Projects

Posted By : Anuj Khurana | 06-Jul-2012

In this blog you will find how we can optimize the code structure for titanium projects . Here I try to use common JS format as much as possible to structure the app. I specially created some UI constants for the theme so we keep it DRY.

Below I am outlining few components in code structure using a demoProject for explaination . You can also download the demoProject source from github location mentioned below.

app.js

var platform= Ti.Platform.osname;
var win = require('/ui/windows/' + platform + 'ui/firstWindow').createFirstWindow()
win.open();

I created three directories ipadui/iphoneui/androidui where I have declared the UI stuff for the screens.

In this demoProject I include underscore.js utility-belt library for JavaScript that provides a lot of the functional programming support.

Directory Structure

When you open the project you will find the directories as displayed in the image below. Here I created some directories manually for controller,UI and library.

Directory Structure

  • Controllers contains all operations performed on button clicks and other event listeners. Controllers are common for all platforms (android/iOS).
  • Lib contains all library files which is useful in project for example underscore.js, events.js etc.
  • UI contains all screens UI designs for all platforms.

UI constants for the theme

In UI directory I have created a ui.js and declare functions for UI constans. These functions are common for all the UI screens. It helps us to keep our code DRY.

ui.js

var _ = require("/lib/underscore");
var applyDefaults = function(params, defaults) {
	params = params || {};
	_.defaults(params, defaults);
};

Here I include underscore.js and create a function “applyDefaults” for overriding the default value if user define any value.

Create window

Here I define the window default properties like layout, backgroundImage which is common for all screens. There is no need to define them in all screens. We can keep our code DRY by defining the default params in ui.js.

ui.js

exports.createWindow = function(params) {
	params = params || {};
	var defaults = {
		layout : 'vertical',
		title:'New Window',
    	backgroundImage:'/images/back.png',
   		barColor : '#121212',
	};
	applyDefaults(params, defaults);
	return Ti.UI.createWindow(params);
};

In firstWindow.js we need to define only the title. All the other property will comes from ui.js. The title value will be override.

We need to include ui.js in firstWindow.js

firstWindow.js

var ui = require('/ui/ui');
var win = ui.createWindow({
	title : "Welcome",
	});

 

Create button

Here I define the button default properties like backgroundImage, color, height, width which is common for all screens. There is no need to define them in all screens.

ui.js

exports.createButton = function(params) {
	params = params || {};

	var defaults = {
		title : 'Default button',
		backgroundImage : '/images/button.png',
		color : '#dbdbdb',
		height : '37dp',
		width : '80%',
		top : '10dp',
	};
	if(platform == "ipad") {
		defaults.width = 300;

	}
	applyDefaults(params, defaults);
	return Ti.UI.createButton(params);
}; 

 

In firstWindow.js we need to define only the title and top. All the other property will comes from ui.js. The title and top value will be override.

firstWindow.js

var submit = ui.createButton({
		title : "Submit",
		top : 20,
	});

 

Create Text Field

Here I define the textField default properties like height, width which is common for all screens. There is no need to define them in all screens.

ui.js

exports.createTextField = function(params) {
	params = params || {};

	var defaults = {
		height : '37dp',
		top : '10dp',
		width : '80%',
		keyboardType : Ti.UI.KEYBOARD_DEFAULT,
		returnKeyType : Ti.UI.RETURNKEY_DEFAULT,
		borderStyle : Ti.UI.INPUT_BORDERSTYLE_ROUNDED
	};
	if(platform == "ipad") {
		defaults.width = 300;

	}
	applyDefaults(params, defaults);
	return Ti.UI.createTextField(params);
};

 

In firstWindow.js we need to define only top. All the other property will comes from ui.js. The top value will be override.

firstWindow.js

var fieldUserName = ui.createTextField({
		top : 3,
	});
var fieldEmail = ui.createTextField({
		top : 3,
	});

 

Create controller for firstWindow

In ui directory I define only UI stuff in separate directory for iphone, ipad and android. No there is need to define common controller for all three platforms.

Including the /controllers/firstWindow.js

ui/windows/firstwindow.js

Ti.include('/controllers/firstWindow.js');
var controller = createController(win);

 

In /controllers/firstWindow.js we define the EventListener for submit button. This is accessable on all platforms.

/controllers/firstWindow.js

function createController(win) {
	var platform= Ti.Platform.osname;
	win.submit.addEventListener('click', function() {
		if(win.fieldUserName.value == "" || win.fieldEmail.value == "") {
			alert('please fill both fields');

		} else {
			var secondWindow = require('/ui/windows/' + platform + 'ui/secondWindow').createSecondWindow(win.fieldUserName.value);
			secondWindow.open();
		}
	});
};

 

Using this code structure we can simplify our project code structure.

To download this Demo Project Please click on the link below:

https://github.com/anuj6117/demoProject.git

Hope it Helps !

Anuj Khurana

[email protected]

http://oodlestechnologies.com/

About Author

Author Image
Anuj Khurana

Anuj is a passionate technology enthusiast with a wealth of industry experience.His expertise in areas such as Blockchain Solutions, Fin-tech Application Development, White Label solutions, and Cryptocurrency development positions him as a valuable asset in organization. With his strong interest and experience in Blockchain Solutions, He contribute to the development and implementation of innovative solutions leveraging blockchain technology which include developing smart contracts, decentralized applications ,or exploring the potential of blockchain in various industries like finance, supply chain, healthcare, and more. Moreover, his proficiency in Fin-tech Application Development showcases his understanding of the intersection between technology and financial services and his experience with White Label solutions he is familier with creating customizable and rebrandable software products that can be tailored to meet specific client needs. Overall, Anuj's diverse skill set and industry experience make him well-equipped to contribute to organization's technology initiatives, driving innovation and helping to stay at the forefront of the rapidly evolving Blockchain technology landscape and allowing organization to tap into the growing crypto market.

Request for Proposal

Name is required

Comment is required

Sending message..