Created
June 21, 2012 04:23
-
-
Save beebs93/2963823 to your computer and use it in GitHub Desktop.
Simple example of integrating Firebase with Appcelerator
This file contains 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.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(); |
This file contains 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.value; | |
| Ti.App.fireEvent('fireBaseCallback', { | |
| message: sValue | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |
This file contains 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
sir this code is not working
i am getting these error ..
couldn't load URL: app://com.dev.firebaseReadWrite/Users/imac5/Library/Developer/CoreSimulator/Devices/BD26069A-EC33-4DBF-845B-978D00653074/data/Containers/Bundle/Application/AF7C5B54-725A-4FA6-A890-CC05325925F6/firebaseReadWrite.app/web/firebase.html
..
i am coping these are three file in my resource.
u should have to upload also your firebase structure. , i think it ll be helpful.
THANKS AND REGARD
Nitin Sharma