Windows Phone app dev note

Build target:

  • Windows Phone OS 7.1 – can run on WP7.5 to WP8 devices
  • Windows Phone OS 8 – can run on WP8 devices only

Visual Studio 2010 supports Windows Phone OS 7.1 (Silverlight 4)
Visual Studio 2012 supports Windows Phone OS 7.1 & 8 (Silverlight 5)


  • If build target is WP OS 7.1, can only use API from SDK 7.1, can’t use new API from SDK 8 even when compile with the latest SDK. Either to use WP7Toolkit or reflection method to be able to access SDK 8 API
  • If build target is WP OS 7.1, only support WVGA screen resolution only, and only WP OS 7.1 tile
  • If build target is WP OS 8, can only run on WP8 devices – so, to to support more WP devices, need to compile 2 xap files for both build target

App Icons

  • Windows Phone OS 7.1 = 62 x 62 PNG
  • Windows Phone OS 8 = 99 x 99 PNG

Tile Icons

  • Windows Phone OS 7.1 = 173 x 173 PNG
  • Windows Phone OS 8 (Ref. about tile sizes & templates)
    • 3 sizes – small (app list), medium & wide (start screen)
    • 3 templates – flip, cycle & iconic
  • Small
    • flip & cycle: 159 x 159
    • iconic: 110 x 110
  • Medium
    • flip & cycle: 336 x 336
    • iconic: 202 x 202
  • Wide
    • flip & cycle: 691 x 336

App image for windows phone store = 300 x 300 non-transparent png

Splash images.

Windows Phone OS 7.1

  • WVGA = 480 x 800 – SplashScreenImage.jpg

Windows Phone OS 8

  • WVGA = 480 x 800 – SplashScreenImage.Screen-WVGA.jpg
  • WXGA = 768 x 1280 – SplashScreenImage.Screen-WXGA.jpg
  • 720p = 720 x 1280 – SplashScreenImage.Screen-720p.jpg


  • If compiled with target Windows Phone OS 7.1, it only support WVGA screen resolution, when displayed on 720p, will have extra padding on top of the app

Titanium app components interaction using events and callbacks


Events are used to broadcast an action happened to zero or many receipients.

Example, in a list of items, when user click on ‘Load more’ button at the bottom of the list, at least 2 actions need to be executed simultaneously – show the loading indicator and start fetching more data from web service.

var btn = Ti.UI.createButton({ title: 'Load more' });
btn.addEventListener('click', function() {
btn.addEventListener('click', function() {;

Another example is, when the loading data process is done, an event is being broadcasted.

webservice.addEventListener('data_received', function(data) {
    if (win) {

Here, if the current window is still opened, at least one receipient will respond to that event, or else there’s no receipient at all.


Callbacks are used as an immediate respond to be called right after a block of code has done executing. Callbacks can only be attached to only one function call – only have one receipient that respond to it. Callbacks are suitable to use on a function call that will return result asynchronously, but return response differently everytime.

Example, when calling a function to retrieve ID3 tag info from an MP3 file, a callback is passed when the retrieve process is done.

var ID3 = require('module.id3tag');

	file: Ti.Filesystem.getFile('song.mp3'),
	success: function(e) {'Song artist: ' + e.artist);

Object oriented Javascript with CommonJS in Titanium app

Class definition

// class definition + commonjs module
function ClassName() {
    // code...
module.exports = ClassName;

Use normal javascript function as class definition. Follow certain class / function naming convention to make sure you are not confused between a class or a function. For example, class name use Pascal case (ClassName), while function name use camel case (isFunctionName).

Public / private methods

By utilising the scope of function or variable definition, we can make that function/variable to be public or private

function ClassName() {

	// public method
	this.getData = function() {}
	// private method
	function processData() {}


After instantiating ClassName, we can invoke public method on the object. Private method will never be accessible outside of the class scope

var cls = new ClassName();

Public / private properties / variables

function ClassName(args) { // `args` will be private variable

	// private properties/variables
	var pageNum = 1;
	// public properties
	this.version = 1.0;

	// getter
	this.getPageNum = function() {
		return pageNum;
	// setter
	this.setPageNum = function(num) {
		pageNum = num;

Similar to public method, only public properties are accessible from the object created. Developer can use getter/setter method to access private properties. Getter/setter method is useful if you want to keep private variables from being modified outside of the class.

It’s a good practice to use getter/setter on object properties, because we can control who can modify the object properties and when it is modified by external component, we can customize the behavior.

// for example, here is method set the page number of an object.
// in this setter method, we can customize the behavior in case 
// the external component provide invalid input
this.setPageNum = function(num) {
	if (num < 1) {
		num = 1;
	if (num > maxNum) {
		num = maxNum;
	pageNum = num;

Static method/properties

ClassName.getName = function() {};
ClassName.appName = 'test';

// static properties can also used as constant
ClassName.APP_ID = 'xxx';


There are no direct way to achieve class inheritance similar to what Java, Python or other languages that have true OOP feature. In Javascript however, we can extend an object functionality by defining it in another class.

function NewClassName() {

	var self = new ClassName();
	// extend object with new method
	self.processSomething = function() {};
	return self;


Another way to customize a class is that class must provide some kind of abstraction. So that when instantiating the class, we can pass some arguments to it to modify its behavior (kind of polymorphism).

function AnotherClassName() {
	var self = new ClassName({
		id: 1,
		name: 'abc',
		onClick: onClick
	function onClick() {
		// code...
	self.doSomething = function() {};

	return self;

// using the child class, we still can invoke methods from parent class
var acn = new AnotherClassName();

Random pic

Pengisar daa…
Sample simple
Simple sample
Nak beli dosa?
Tulisan jawi: “chiz nyiza”