getting 04b up to speed

infil00p · Jun 17, 2010 · b1b83b8 · b1b83b8
1 parent 37c7ec8
commit b1b83b8
Show file tree

Hide file tree

Showing 3 changed files with 163 additions and 6 deletions.
diff --git a/04b - javascript - network reachability/application.js b/04b - javascript - network reachability/application.js
@@ -0,0 +1,60 @@
+/**
+  storing our JavaScript in a separate file allows us to manage
+  our app's behaviour separately from the markup and presentation
+  
+  if you have a larger app, you will want to split your application
+  code into multiple js files
+**/
+
+function loadItUp(initializationFunction) {
+	if (document.readyState == 'loaded' || document.readyState == 'complete') {
+		initializationFunction();
+	} else {
+		if (navigator.userAgent.indexOf('Browzr') > -1) {
+			setTimeout(initializationFunction, 250)	
+		} else {
+			document.addEventListener('deviceready', initializationFunction, false);
+		}
+	}
+}
+
+function appInit() {
+  // there are 4 interaction points in the app:
+  // "Show My Location" button (welcome view)
+  document.getElementById('map_button').ontouchend = function () {
+    displayView('map');
+  }
+
+  // "Settings" button (welcome view)
+  document.getElementById('settings_button').ontouchend = function () {
+    displayView('settings');
+  }
+
+  // "Go Back" button (map view)
+  document.getElementById('back_button').ontouchend = function () {
+    displayView('welcome');
+  }
+
+  // "Save" button (settings view)
+  // we want to override the default behaviour, so we return false
+  document.getElementById('save_button').ontouchend = function () {
+    displayView('welcome');
+    return false;
+  }
+}
+
+// this function will allow us to hide the current view and
+// to display a new one
+function displayView(id) {
+  var views = ["welcome", "map", "settings"];
+  var i=0;
+
+  while (i < views.length) {
+    if (views[i]==id) {
+      document.getElementById(id).style.display = "block";
+    } else {
+      document.getElementById(views[i]).style.display = "none";
+    }
+    i++;
+  }
+}
diff --git a/04b - javascript - network reachability/index.html b/04b - javascript - network reachability/index.html
@@ -4,17 +4,47 @@
 		<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
 		<title>Training App</title>
 		<link rel="stylesheet" href="master.css" type="text/css" media="screen" />
-		<!--
 		<script type="text/javascript" src="phonegap.js"></script>
-		-->
+		<script type="text/javascript" src="application.js"></script>
 	</head>
-	<body>
-		<!-- Now we add the main views of our app. -->
+	<body onload="loadItUp(appInit);">
+ 		<div id="title_bar">PhoneGap 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="staticmap.png">
+		  </div>
+		  <p>This is where you are</p>
+
+		  <div class="app_button" id="back_button">Go Back</div>
 		</div>
+
 		<div id="settings" class="view">
+		  <form id="settings_form">
+		    <p>Map Type</p>
+		    <select>
+		      <option value="roadmap">Road Map</option>
+		      <option value="satellite">Satellite</option>
+		      <option value="terrain">Terrain</option>
+		      <option value="hybrid">Hybrid</option>
+		    </select>
+		    <p>Zoom Level</p>
+		      <select>
+  		      <option value="10">Super Far</option>
+  		      <option value="12">Far</option>
+  		      <option value="15" selected>Normal</option>
+  		      <option value="18">Close</option>
+  		      <option value="20">Super Close</option>
+  		    </select><br>
+		    <button id="save_button">Save</button>
+	    </form>
 		</div>
+
 	</body>
 </html>
diff --git a/04b - javascript - network reachability/master.css b/04b - javascript - network reachability/master.css
@@ -1,7 +1,74 @@
+body {
+  background: blue;
+  margin: 0;
+  font: 18px Helvetica;
+  text-align: center;
+}
+
+#title_bar {
+  background: black;
+  color: white;
+  height: 25px;
+  padding: 10px 5%;
+  width: 90%;
+}
+
+.app_button {
+  background: gold;
+  border: khaki;
+  margin: 15px auto;
+  padding: 5px;
+  width: 200px;
+  -webkit-border-radius: 5px;
+}
+
+#back_button {
+  background: grey;
+}
+
 /**
  * Since all of the views are the same, we'll set them to static widths and heights to match our device.
  **/
+
 .view {
 	width: 320px;
-	height: 480px;
-}
+	/* on the iPhone, we have to account for the 20px status bar at the top */
+	/* 480 - 20 = 460 */
+	/* then 460 - 40 to account for our title bar */
+	height: 420px;
+
+	/*  only one view is displayed at a time
+	    so we'll set the views to default to be un-displayed
+	    and then override this based on the element id */
+	display: none;
+}
+/* our three views */
+#welcome {
+  display: block;  
+}
+#settings {
+  background: white;
+}
+#map {
+  background: black;
+  color: white;
+}
+
+.map_image {
+  margin: auto;
+  height: 250px;
+  padding-top: 35px;
+  width: 250px;
+}
+
+#settings_form {
+  display: block;
+  padding: 20px;
+}
+
+button {
+  font: 18px Helvetica;
+  height: 30px;
+  width: 100px;
+  -webkit-appearance:push-button;
+}