Below is the code I created for a Custom Alert Module for Titanium Alloy that runs on both iOS and Android – it is used as a replacement for the Titanium.UI.AlertDialog
For this module to work in Android you need to be able to target the spesific window, to do this we set a Alloy.Globals var
In app.js
// set Alloy.Globals.openWindow Alloy.Globals.openWindow = '';
In every new Window eg. index.js
// set Alloy.Globals.openWindow Alloy.Globals.openWindow = $.indexWindow;
Usage:
// require module customAlert in app/assets/lib/
var customAlert = require('customAlert');
//createAlert AlertDialog with params
var notificationData = {
cancelIndex: 2, // The Index is used to identify the Cancel button - It will always be appended to the end of the Button List
buttonNames: ["YES","NO","CANCEL"], // AS MANY BUTTONS AS NEEDED CAN BE ADDED HERE
message: "The Message",
title: "The Title",
click: function(e){
//START IF - Check what Button was clicked and run appropriate Function
if (e.index == 0){
Ti.API.info('The YES Button was clicked');
}else if (e.index == 1){
Ti.API.info('The NO Button was clicked');
}else{
Ti.API.info('The Cancel button was clicked');
};
//END IF - Check what Button was clicked and run appropriate Function
},
};
// show notification
customAlert.show(notificationData);
Module Code:
customAlert.js
////////////////////////////////////////////////////////////////////////////////////////////////////
/// Start customAlert Functions ///
exports.show = function (data){
var title = data.title;
var message = data.message;
var cancelIndex = data.cancelIndex;
var buttonNames = data.buttonNames;
// START IF - iOS or Android
if (Ti.Platform.name == 'iPhone OS'){
// Set alertWindow
var alertWindow = Ti.UI.createWindow({
backgroundImage: '/images/transparent_black.png', // YOU SHOULD ADD A 1px X 1px semit-transparent image to your resources folder
});
}else{
// Set alertWindow
var alertWindow = Ti.UI.createView({
backgroundImage: '/images/transparent_black.png', // YOU SHOULD ADD A 1px X 1px semit-transparent image to your resources folder
width: Ti.UI.FILL,
height: Ti.UI.FILL,
});
};
// END IF - iOS or Android
// create alertView container
var alertView = Ti.UI.createView({
backgroundColor:'white',
opacity: 0.90,
borderRadius:5,
width: "85%",
height: Ti.UI.SIZE,
layout: 'vertical',
});
// create alertTitleView
var alertTitleView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
});
// create alertTitleLabel
var alertTitleLabel = Ti.UI.createLabel({
text: title,
color: 'black',
textAlign: 'center',
font: {
fontSize: '20dp',
},
touchEnabled: false,
top: "15dp",
left: 5,
right: 5,
});
alertTitleView.add(alertTitleLabel);
alertView.add(alertTitleView);
// create alertMessageView
var alertMessageView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
});
// create alertMessageLabel
var alertMessageLabel = Ti.UI.createLabel({
text: message,
color: 'black',
textAlign: 'center',
font: {
fontSize: '16dp',
},
touchEnabled: false,
bottom: "15dp",
left: 5,
right: 5,
});
alertMessageView.add(alertMessageLabel);
alertView.add(alertMessageView);
// set buttonArray
var buttonArray = [];
// set cancelButton
var cancelButton = '';
// START Loop - through Menu Buttons and create
for (var m=0; m<buttonNames.length; m++){
// set buttonIndex
var buttonIndex = m;
// START IF - iOS else Android
if (Ti.Platform.name == 'iPhone OS'){
// Start Create alertButtonRow
var alertButtonRow = Ti.UI.createTableViewRow({
className:'buttonRow',
height: "45dp",
width: Ti.UI.FILL,
top: 0,
layout: "vertical",
selectedBackgroundColor: "#c8c8c8",
});
}else{
// Start Create alertButtonRow
var alertButtonRow = Ti.UI.createView({
height: "45dp",
width: Ti.UI.FILL,
top: 0,
layout: "vertical",
});
};
// END IF - iOS else Android
// create alertButtonView
var alertButtonView = Ti.UI.createView({
width: Ti.UI.FILL,
height: Ti.UI.FILL,
backgroundSelectedColor: "#c8c8c8",
buttonIndex: buttonIndex,
});
// create alertButtonView
var alertButtonSeperator = Ti.UI.createView({
width: Ti.UI.FILL,
height: "1dp",
backgroundColor: "#c8c8c8",
top: 0,
});
// START IF - check buttonIndex and set vars
if (buttonIndex == cancelIndex){
var fontSizeVar = '14dp';
var colorVar = 'black';
}else{
var fontSizeVar = '18dp';
var colorVar = '#639a13';
};
// END IF - check buttonIndex and set vars
// create alertButtonLabel
var alertButtonLabel = Ti.UI.createLabel({
text: buttonNames[m],
color: colorVar,
textAlign: 'center',
font: {
fontSize: fontSizeVar,
},
touchEnabled: false,
left: 5,
right: 5,
});
// add eventlistener to Button
alertButtonView.addEventListener('click', function() {
if (data.click){
data.click({index: this.buttonIndex});
// START IF - iOS or Android - CLOSE WINDOW
if (Ti.Platform.name == 'iPhone OS'){
alertWindow.close();
}else{
var currentWindow = Alloy.Globals.openWindow;
currentWindow.remove(alertWindow);
};
// END IF - iOS or Android - CLOSE WINDOW
};
});
alertButtonView.add(alertButtonSeperator);
alertButtonView.add(alertButtonLabel);
alertButtonRow.add(alertButtonView);
// START IF - buttonIndex is cancelIndex set cancelButton else add to buttonArray
if (buttonIndex == cancelIndex){
var cancelButton = alertButtonRow;
}else{
buttonArray.push(alertButtonRow);
};
// END IF - buttonIndex is cancelIndex set cancelButton else add to buttonArray
};
// END Loop - through Menu Buttons and create
// Push cancelButton to end of buttonArray
buttonArray.push(cancelButton);
// START IF - iOS or Android
if (Ti.Platform.name == 'iPhone OS'){
// Create tableView with rows as buttons
var buttonTableView = Ti.UI.createTableView({
data:buttonArray,
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
separatorColor: "transparent",
scrollable: false,
});
// add buttonTableView to alertView
alertView.add(buttonTableView);
}else{
// START Loop - through createButtons and add
for (var b=0; b<buttonArray.length; b++){
alertView.add(buttonArray[b]);
};
// END Loop - through createButtons and add
};
// END IF - iOS or Android
// add alertView to Window
alertWindow.add(alertView);
// START IF - iOS or Androdi OPEN WINDOW
if (Ti.Platform.name == 'iPhone OS'){
alertWindow.open();
}else{
var currentWindow = Alloy.Globals.openWindow;
currentWindow.add(alertWindow);
};
// END IF - iOS or Androdi OPEN WINDOW
};
// END Function - customAlert Functions //
//////////////////////////////////////////////////////////////////////////////////////////////////
Titanium Alloy iOS Android Module: Custom Alert Module to replace Titanium.UI.AlertDialog