Share on Facebook0Tweet about this on TwitterShare on Google+0Share on Reddit0Digg thisPin on Pinterest0Email this to someone

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	      	  						    //
//////////////////////////////////////////////////////////////////////////////////////////////////
If you enjoyed this post, why not leave a comment or consider a Donation as a token of your appreciation. If you need help implementing something you saw on this site or any other project why not Hire Me?
Titanium Alloy iOS Android Module: Custom Alert Module to replace Titanium.UI.AlertDialog
Tagged on:                                                                             

Leave a Reply

Your email address will not be published. Required fields are marked *

Loading Facebook Comments ...