Android Progress Notification module

Android Progress Notification module is a module to display notification in Android notification area which contains progress bar. In addition, it also support setting the number of notification, useful if you have a number of grouped notifications.

nc_progress_notif_1 nc_progress_notif_2

Continue reading Android Progress Notification module

Facebook login phishing

Lately I’ve seen a few facebook posts that look like this:


Generally it posts something about interesting facebook features or links to adult-ish blog post. When navigate to that link, it’s a regular facebook post. Similarly for links to blog post, it’s also a normal blog post. However they require you to click another link in order to obtain what is being offered:


Here, the link given is When open this link, it shows a phishing facebook login page.


Note: DON’T enter your login information there!

Be careful, always see the URL address before you enter any login information, on any website, especially e-commerce sites

Titanium app hex color value with alpha channel

Color values are represented in hexadecimal value:


  • 0 – red, 0 – green, 0 – blue
  • color = black


  • 255 – red, 255 – green, 255 – blue
  • color = white

‘ff’ in hexadecimal is 255 in decimal, (2 ^ 8) – 1 = 255.

In CSS, to represent color with alpha channel, we can use the rgba() syntax:

rgba(0, 0, 0, 0.6)

  • 0 – red, 0 – green, 0 – blue
  • black with 60% opacity

In Titanium, rgba() syntax only available on iOS, but hex value also can be used to represent alpha channel, and it supported by both iOS & Android


  • 0 – red, 0 – green, 0 – blue
  • ff – 255 / 100% opacity


  • 255 – red, 204 – green, 0 – blue
  • 90 – 144 / 56% opacity

To easily maintain colors in app, this function is to transform rgba value into Titanium hex color format

function rgbaToHex(r, g, b, a) {
    var toHex = function(n) {
        return ('00' + (n | 0).toString(16)).slice(-2);
    return '#' + toHex(((a * 100) / 100) * 255) + toHex(r) + toHex(g) + toHex (b);


  • (n | 0) is shortcut for parseInt(), to ensure the value passed in is integer. We don’t want the hex color value to have decimal point, e.g: #2.4ccc
  • .toString(16) is Number object function (not Object.toString()) to convert number into hexadecimal format
  • ('00' + value).slice(-2) is to add string padding to the left of the string, so that it will always have 2 characters. We don’t want the value to have one character, #0ccff is invalid value


var view = Ti.UI.createView({
    backgroundColor: rgbaToHex(255, 204, 0, 0.5)

ActionBarImplBase can only be used with a compatible window decor layout

ActionBarImplBase can only be used with a compatible window decor layout

This error occured in android 2.3 if you’re trying to use ActionBar feature on theme that disable ActionBar

Let’s say you define a style that enable actionbar overlay mode

<style name="MyTheme" parent="Theme.AppCompat">
     <item name="android:windowActionBarOverlay">true</item>
     <item name="windowActionBarOverlay">true</item>

Then one style extends this base style, but disable the actionbar

<style name="MyDifferentTheme" parent="MyTheme">
     <item name="android:windowActionBar">false</item>
     <item name="windowActionBar">false</item>

This will cause the crash. To fix it, the new style either need to extend different parent style, or disable the actionbar feature

<style name="MyDifferentTheme" parent="MyTheme">
     <item name="android:windowActionBar">false</item>
     <item name="windowActionBar">false</item>
     <item name="android:windowActionBarOverlay">false</item>
     <item name="windowActionBarOverlay">false</item>

Lazyloading JS modules in Titanium app

In NodeJS project, usually modules are loaded at the beginning of the file:

var fs = require('fs');
var path = require('path');
var express = require('express');

When this NodeJS application being run, it loads all of the dependencies & start executing the program. In large application, there will be delay before the application can start operating, because of the dependencies loading.

For desktop or server application, this won’t be much issue, but in mobile app like Titanium, if it loads the whole dependencies during app launch, it might cause unresponsive app & consume large memory, even when those modules haven’t being used yet.

Another problem is there might be circular dependencies issue, in which module A require module B, but module B also require module A, and this lead to module A variable in B to become an empty object. Example:

// db.js - database module
var Person = require('model/Person');

// Person.js - data model
var db = require('db');
db.execute('sql'); // TypeError, undefined is not a function

Restructuring the code flow is one method to fix, but in my experience, it cause a lot of repeated code

// Person.js
var Person = {};
Person.setup = function() {
     var db = require('db');

Person.getById = function() {
     var db = require('db');

Person.getAll = function() {
     var db = require('db');

Because of this, I use the lazyloading approach & make use of JS object getter to both solve the problem & make the code cleaner. The idea is to have a global variable, which will be included in each of the modules we have in a Titanium app, and this global object holds a reference to every modules we packaged into the app. This reference will then call a getter to do require() and return the actual module to the caller.

In addition, modules are categorized into folders which can act as namespace, to eliminate class name conflict

// globals.js
var g = {};

var modules = [

modules.forEach(function(mod) {
     var parts = mod.split('/');
     var namespace = parts[0];
     var className = parts[1];
     var obj = g[namespace];
     if (!obj) {
          obj = {};
     Object.defineProperty(obj, className, {
          get: (function(path) {
               return function() {
                    return require(path);
          set: function() {}

module.exports = g;

Now, the Person model class can be refactored like below:

// Person.js
var g = require('globals');
var Person = {};
Person.setup = function() {
Person.getAll = function() {

This is just a basic implementation of the idea, and you can extend it to support subnamespace & native module.