Information Technology Reference
In-Depth Information
Figure 13-23.
Configuring Adobe Dreamweaver CS5.5 to build out our HTML5 application as a native application
with PhoneGap
Let's take a quick look at some code, in Listing 13-1, from a PhoneGap sample so you
can get a feel for how to structure your HTML5 PhoneGap application.
Listing 13-1.
PhoneGapExample
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width"
/>
<title>Training App</title>
<linkrel="stylesheet" href="assets/css/master.css" type="text/css" media="screen" />
<scriptsrc="phonegap.js" type="text/JavaScript" charset="utf-8"></script>
<scriptsrc="assets/js/xui.js" type="text/JavaScript" charset="utf-8"></script>
<scriptsrc="assets/js/lawnchair/adaptors/LawnchairAdaptorHelpers.js"
type="text/JavaScript" charset="utf-8"></script>
<scriptsrc="assets/js/lawnchair/adaptors/DOMStorageAdaptor.js" type="text/JavaScript"
charset="utf-8"></script>
<scriptsrc="assets/js/lawnchair/adaptors/WebkitSQLiteAdaptor.js" type="text/JavaScript"
charset="utf-8"></script>
<scriptsrc="assets/js/lawnchair/Lawnchair.js" type="text/JavaScript" charset="utf-
8"></script>
<scriptsrc="assets/js/dsl.js" type="text/JavaScript" charset="utf-8"></script>
<scriptsrc="assets/js/app.js" type="text/JavaScript" charset="utf-8"></script>
</head>
<body>
<div id="title_bar">Phone<strong>Gap</strong> Training App</div>
<div id="welcome" class="view">
<div class="app_button" id="map_button">Show My Location</div>
<div class="app_button" id="settings_button">Settings</div>
</div>
<div id="map" class="view">
<div class="map_image"><img id="static_map" src="assets/img/staticmap.png"></div>
