Skip to content

Instantly share code, notes, and snippets.

@richardcalahan
Created April 24, 2012 21:13
Show Gist options
  • Save richardcalahan/2483866 to your computer and use it in GitHub Desktop.
Save richardcalahan/2483866 to your computer and use it in GitHub Desktop.
PhoneGap HTML config
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
<!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