Created
April 24, 2012 21:13
-
-
Save richardcalahan/2483866 to your computer and use it in GitHub Desktop.
PhoneGap HTML config
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
NOTES! | |
This is the single html page to be loaded by phonegap. | |
The only elements to be hard coded are the initial host locations for the | |
css/js assets. Currently set to my rails app on the network. | |
(note, localhost won't work in development. Must be an explicit IP) | |
In a phonegap app, we have to explicitly declare a host for all ajax request. | |
This is because the main html page is not being served from a web server. | |
It resides permanently on the users phone. | |
A simple GET/POST ajax request to, for example, '/events.json' will not work. | |
In order for our javascript to know where to make ajax requests, it must first | |
hit the 'whereami' endpoint of the server, which returns the hostname as JSONP | |
and sets a global variable APP_CONFIG.host. This variable is used in all | |
subsequent ajax requests. | |
All logic to interface with phone gap should start in base.js in the rails app. | |
The html file above should be as thin and logic free as possible to allow for | |
easy updates. | |
Word. | |
Richard |
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
<!DOCTYPE html> | |
<html> | |
<head> | |
<title></title> | |
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> | |
<meta charset="utf-8"> | |
<link rel="stylesheet" media="screen" href="http://10.0.1.18:3000/assets/application.css" type="text/css" /> | |
<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script> | |
<script type="text/javascript">function host_location(host){window.APP_CONFIG = window.APP_CONFIG || {}; window.APP_CONFIG.host = host; }</script> | |
<script type="text/javascript" src="http://10.0.1.18:3000/whereami?callback=host_location"></script> | |
<script type="text/javascript" src="http://10.0.1.18:3000/assets/application.js"></script> | |
<script type="text/javascript"> function onBodyLoad() { document.addEventListener("deviceready", App.phonegap_device_ready, false); }</script> | |
</head> | |
<body onload="onBodyLoad()"> | |
<div id="viewport"> | |
<nav class="main"> | |
<div class="scrollable"></div> | |
</nav> | |
<section class="main"></section> | |
</div> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment