beebs93/app.js

## app.js
// Set master UI background color
Ti.UI.backgroundColor = '#000';

// Set vars
var winMain,
vwWebMain,
lblValue,
vwBtn;

// Set global event listener as Firebase callback
Ti.App.addEventListener('fireBaseCallback', function(e){
	Ti.App.info('Firebase message: ' + e.message);

	lblValue.text = e.message;
});

// Initialize main window
winMain = Ti.UI.createWindow({
	backgroundColor: 'blue'
});

// Load webview (with Firebase-infused goodness)
vwWebMain = Ti.UI.createWebView({
	url: Ti.Filesystem.resourcesDirectory + 'web/firebase.html',
	width: 1,
	height: 1,
	visible: false	// This will simply act as our Firebase vehicle so no need to show it
});

// Label to show the latest value
lblValue = Ti.UI.createLabel({
	text: 'Default text',
	width: 'auto',
	height: 'auto',
	font: {
		fontSize: 18
	},
	color: '#fff'
});

// Button to retrieve the latest value
vwBtn = Ti.UI.createView({
	width: 100,
	height: 100,
	backgroundColor: '#fff',
	top: 10,
	left: 10
});

vwBtn.addEventListener('click', function(e){
	var sLatestValue = vwWebMain.evalJS('sValue');

	alert('Latest value: ' + sLatestValue);
});

// Consolidate views
winMain.add(vwWebMain);
winMain.add(lblValue);
winMain.add(vwBtn);

// Open window
winMain.open();

## firebase.html
<!-- Source of Ti.UI.Webview -->
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Firebase</title>
	<script type="text/javascript" src="js/firebase.js"></script>
</head>
<body>

<script type="text/javascript">
var sFbRef = 'http://YOUR_FIREBASE_REF_URL_HERE';
var oFb = new Firebase(sFbRef);
var sValue;

oFb.on('child_added', function(e) {
	var oMsg = e.val();

	sValue = oMsg.value;

	Ti.App.fireEvent('fireBaseCallback', {
		message: sValue
	});
});
</script>
</body>
</html>

## index.html
<!-- Web-based app example -->
<!DOCTYPE HTML>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Firebase</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/firebase.js"></script>
</head>
<body>
<div>
	<a id="addEntry" href="javascript:{}" title="Add entry">Add entry</a>
</div>

<div id="message"></div>

<script type="text/javascript">
jQuery(document).ready(function($){
	var oFb = new Firebase('http://YOUR_FIREBASE_REF_URL_HERE');
	var tmrMsg = null;

	var $message = $('div#message');
	var $link = $('a#addEntry');

	$link.on('click', function(e){
		var oDate = new Date();
		var iTs = Math.floor(oDate.getTime()/1000);

		oFb.push({
			name: 'Name_' + iTs,
			value: 'Value_' + iTs
		});

		clearTimeout(tmrMsg);

		$message.stop().fadeTo(0, 1).text('Data pushed');

		tmrMsg = setTimeout(function(){
			$message.fadeTo(1000, 0);
		}, 2000);
	});
});
</script>
</body>
</html>
	// Set master UI background color
	Ti.UI.backgroundColor = '#000';

	// Set vars
	var winMain,
	vwWebMain,
	lblValue,
	vwBtn;

	// Set global event listener as Firebase callback
	Ti.App.addEventListener('fireBaseCallback', function(e){
	Ti.App.info('Firebase message: ' + e.message);

	lblValue.text = e.message;
	});

	// Initialize main window
	winMain = Ti.UI.createWindow({
	backgroundColor: 'blue'
	});

	// Load webview (with Firebase-infused goodness)
	vwWebMain = Ti.UI.createWebView({
	url: Ti.Filesystem.resourcesDirectory + 'web/firebase.html',
	width: 1,
	height: 1,
	visible: false // This will simply act as our Firebase vehicle so no need to show it
	});

	// Label to show the latest value
	lblValue = Ti.UI.createLabel({
	text: 'Default text',
	width: 'auto',
	height: 'auto',
	font: {
	fontSize: 18
	},
	color: '#fff'
	});

	// Button to retrieve the latest value
	vwBtn = Ti.UI.createView({
	width: 100,
	height: 100,
	backgroundColor: '#fff',
	top: 10,
	left: 10
	});

	vwBtn.addEventListener('click', function(e){
	var sLatestValue = vwWebMain.evalJS('sValue');

	alert('Latest value: ' + sLatestValue);
	});

	// Consolidate views
	winMain.add(vwWebMain);
	winMain.add(lblValue);
	winMain.add(vwBtn);

	// Open window
	winMain.open();
	<!-- Source of Ti.UI.Webview -->
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Firebase</title>
	<script type="text/javascript" src="js/firebase.js"></script>
	</head>
	<body>

	<script type="text/javascript">
	var sFbRef = 'http://YOUR_FIREBASE_REF_URL_HERE';
	var oFb = new Firebase(sFbRef);
	var sValue;

	oFb.on('child_added', function(e) {
	var oMsg = e.val();

	sValue = oMsg.value;

	Ti.App.fireEvent('fireBaseCallback', {
	message: sValue
	});
	});
	</script>
	</body>
	</html>
	<!-- Web-based app example -->
	<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title>Firebase</title>
	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script type="text/javascript" src="js/firebase.js"></script>
	</head>
	<body>
	<div>
	<a id="addEntry" href="javascript:{}" title="Add entry">Add entry</a>
	</div>

	<div id="message"></div>

	<script type="text/javascript">
	jQuery(document).ready(function($){
	var oFb = new Firebase('http://YOUR_FIREBASE_REF_URL_HERE');
	var tmrMsg = null;

	var $message = $('div#message');
	var $link = $('a#addEntry');

	$link.on('click', function(e){
	var oDate = new Date();
	var iTs = Math.floor(oDate.getTime()/1000);

	oFb.push({
	name: 'Name_' + iTs,
	value: 'Value_' + iTs
	});

	clearTimeout(tmrMsg);

	$message.stop().fadeTo(0, 1).text('Data pushed');

	tmrMsg = setTimeout(function(){
	$message.fadeTo(1000, 0);
	}, 2000);
	});
	});
	</script>
	</body>
	</html>