You can write to system.TemporaryDirectory, system.CachesDirectory and system.DocumentsDirectory. I would probably recommend using the temporary directory for this usage.
This is what I did for a weather app I built for my wife. I need a Google Map with an overlay from Weather Underground. I need to provide several variables to the html.
local header = [[\<!DOCTYPE html\> \<html\> \<head\> \<title\>Google Maps JavaScript API v3 Example: Map Simple\</title\> \<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"\> \<meta charset="utf-8"\> \<style\> html, body, #map\_canvas { margin: 0; padding: 0; height: 100%; } \</style\> \<script src="https://maps.googleapis.com/maps/api/js?key=mykeyhere"\>\</script\> \<script\> var map; var radarOverlay; var mapBounds; var API\_calls = 0; var rateLimitTimer;]] local body = [[function initialize() { var myLatLong = new google.maps.LatLng(latitude, longitude); var mapOptions = { zoom: 8, center: myLatLong, mapTypeId: google.maps.MapTypeId.ROADMAP, zoomControl: false, scaleControl: false, panControl: false, streetViewControl: false, overviewMapContro: false }; map = new google.maps.Map(document.getElementById('map\_canvas'), mapOptions); google.maps.event.addListener(map, 'idle', function() { API\_calls++; if (API\_calls \> 9) { // rate limit return(true); } var center = map.getCenter(); var bounds = map.getBounds(); var zoom = map.getZoom(); ne = bounds.getNorthEast(); sw = bounds.getSouthWest(); var URL = 'http://api.wunderground.com/api/mykeyhere/animatedradar/image.gif?num=5&delay=50&maxlat=' + ne.lat() + '&maxlon=' + sw.lng() + '&minlat=' + sw.lat() + '&minlon=' + ne.lng() + '&width=' + screenWidth + '&height=' + screenHeight + '&rainsnow=1&smooth=1&noclutter=1'; if (radarOverlay) { radarOverlay.setMap(null); } radarOverlay = new google.maps.GroundOverlay( URL, bounds ); radarOverlay.setMap(map); }); rateLimitTimer = setInterval(function () { API\_calls--; if (API\_calls \< 0) { API\_calls = 0; } }, 30000); } google.maps.event.addDomListener(window, 'load', initialize); \</script\> \</head\> \<body\> \<div id="map\_canvas"\>\</div\> \</body\> \</html\>]]
So there are two parts, some fixed HTML for the head and another part that represents a bulk of the body. I then write some JS code in between the two:
if event.phase == "will" then local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "w" ) if fp then fp:write(header) fp:write("var latitude = " .. tostring(myData.latitude) .. ";\n") fp:write("var longitude = " .. tostring(myData.longitude) .. ";\n") fp:write("var screenWidth = " .. tostring( display.contentWidth) .. ";\n") fp:write("var screenHeight = " .. tostring( display.contentHeight - 50) .. ";\n") fp:write(body) fp:close() end else webView = native.newWebView( display.contentCenterX, display.contentCenterY - 25, display.contentWidth, display.contentHeight - 50 ) local path = system.pathForFile( "radar.html" , system.TemporaryDirectory ) local fp = io.open( path, "r" ) if fp then fp:close(); webView:request( "radar.html", system.TemporaryDirectory ) else webView:request( "radar.html", system.ResourceDirectory ) end end
In the scene:show’s will phase, I write out header, the JS to construct the var’s with my unique values for the user, then the body. Once I get to the “did” phase, I create the webView and if I can get a path to the HTML I just wrote out (should always unless there is some storage issue), I have the webView load the HTML I wrote out, if I can’t open that file for some reason, I fall back to a complete HTML file in the resource directory that won’t have customized location data. This is a lot, but I wanted to include the pretty much complete example.
Hope this helps.
Rob
