-
-
Save lis186/8778991 to your computer and use it in GitHub Desktop.
Simple example of integrating Firebase with Appcelerator
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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.API.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(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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; | |
| Ti.App.fireEvent('fireBaseCallback', { | |
| message: sValue | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment