[gtv-resources] r52 committed - Add new examples directory for hosting GTV web examples linked from Co...

4 views

Skip to first unread message

gtv-re...@googlecode.com

unread,

Jun 10, 2011, 8:06:55 PM6/10/11

to google-tv-w...@googlegroups.com

Revision: 52
Author: dani...@google.com
Date: Fri Jun 10 17:06:06 2011
Log: Add new examples directory for hosting GTV web examples linked
from Codesite.

Add new examples on using browser location hash to enable back/fwd events.

http://code.google.com/p/gtv-resources/source/detail?r=52

Added:
/trunk/examples
/trunk/examples/location-hash-content
/trunk/examples/location-hash-content/LocationHashDemo.zip
/trunk/examples/location-hash-content/flash_hash_demo.swf
/trunk/examples/location-hash-content/images
/trunk/examples/location-hash-content/images/android-logo.png
/trunk/examples/location-hash-content/images/chrome-logo.png
/trunk/examples/location-hash-content/images/gtv-horizontal.png
/trunk/examples/location-hash-content/images/gtv-logo.png
/trunk/examples/location-hash-content/images/remote-logo.png
/trunk/examples/location-hash-flash.html
/trunk/examples/location-hash-html.html

=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/LocationHashDemo.zip Fri Jun 10
17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/flash_hash_demo.swf Fri Jun 10
17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/images/android-logo.png Fri Jun
10 17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/images/chrome-logo.png Fri Jun 10
17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/images/gtv-horizontal.png Fri Jun
10 17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/images/gtv-logo.png Fri Jun 10
17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-content/images/remote-logo.png Fri Jun 10
17:06:06 2011
Binary file, no diff available.
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-flash.html Fri Jun 10 17:06:06 2011
@@ -0,0 +1,114 @@
+
+<!DOCTYPE html>
+<html lang="en">
+
+
+
+<head>
+<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+<title>AS3: Using Location Hash To Maintain State</title>
+<style>
+body {
+ height: 720px;
+ margin: 0px;
+ overflow: hidden;
+ width: 1280px;
+}
+</style>
+</head>
+
+<body scroll='no'>
+
+<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
+ id="flash_hash_demo" width="1280" height="720"
+
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
+ <param name="movie" value="location-hash-content/flash_hash_demo.swf" />
+ <param name="quality" value="high" />
+ <param name="bgcolor" value="#869ca7" />
+ <param name="allowScriptAccess" value="sameDomain" />
+ <param name="allowFullScreen" value="true" />
+ <embed src="location-hash-content/flash_hash_demo.swf" quality="high"
bgcolor="#869ca7"
+ width="1280" height="720" name="flash_hash_demo" align="middle"
+ play="true"
+ loop="false"
+ quality="high"
+ allowScriptAccess="sameDomain"
+ allowFullScreen="true"
+ type="application/x-shockwave-flash"
+ pluginspage="http://www.adobe.com/go/getflashplayer">
+ </embed>
+</object>
+
+
+<script type="text/javascript">
+/**
+ * SWF object used to call methods defined in AS3 by ExternalInterface.
+ * @type Object
+ */
+var swfObj = document['flash_hash_demo'];
+
+/**
+ * Flag tells my onhashchange event handler whether my app should be
updated
+ * whenever hash value changes. Enabled by default. If hash change comes
from
+ * my app, use this flag to stop my onhashchange event handler from
executing.
+ * @type boolean
+ */
+var allowHashToUpdateFlash = true;
+
+/**
+ * Returns the value of the location hash.
+ */
+function getLocationHash () {
+ return window.location.hash.substring(1);
+}
+
+/**
+ * Called by AS3 Flash app to update location hash. Hash changes made
through
+ * this function should be ignored by the event handler.
+ */
+function setLocationHash(str) {
+ // Tell the event handler to ignore this change since we manually
updated it.
+ allowHashToUpdateFlash = false;
+
+ window.location.hash = str;
+}
+
+/**
+ * Listen for hash changes. Use flag to determine whether hash changes
should
+ * propagate updates to my Flash app.
+ */
+window.onhashchange = function(e) {
+ if (allowHashToUpdateFlash) {
+ swfObj.updateApp(getLocationHash(), false);
+ } else {
+ allowHashToUpdateFlash = true;
+ }
+};
+</script>
+
+</body>
+</html>
=======================================
--- /dev/null
+++ /trunk/examples/location-hash-html.html Fri Jun 10 17:06:06 2011
@@ -0,0 +1,241 @@
+
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<title>HTML: Using Location Hash To Maintain State</title>
+<style>
+body {
+ background-color: #000;
+ color: #f0f0f0;
+ font-family: 'Droid Sans TV', arial, serif;
+ margin: 0;
+ overflow: hidden;
+ padding: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+ul,
+li,
+p {
+ margin: 0;
+ padding: 0;
+}
+ul {
+ list-style-type: none;
+}
+
+.center {
+ margin: 0 auto;
+ text-align: center;
+ width: 800px;
+}
+
+
+/* Styles for top header and title area */
+#header {
+ background-color: #444;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%,
from(#4D4D4D), to(#393939));
+ border-bottom: 1px solid #676767;
+ height: 62px;
+}
+#header img {
+ float: left;
+ padding-top: 8px;
+}
+#header h2 {
+ color: #fff;
+ float: left;
+ font-size: 24px;
+ font-weight: normal;
+ margin: 19px 0 0 18px;
+ text-shadow: #222 0px 2px 3px;
+}
+
+
+/* Style for main content */
+.main-content p {
+ color: #888;
+ font-size: 20px;
+ margin: 50px 0;
+}
+
+.button-bar button {
+ background-color: #333;
+ border: 3px solid #f0f0f0;
+ color: #f0f0f0;
+ font-size: 30px;
+ font-weight: bold;
+ margin-right: 10px;
+ height: 50px;
+ width: 180px;
+}
+
+.button-bar button:hover {
+ background-color: #676767;
+ border-color: #bfc;
+ cursor: pointer;
+}
+
+#hash-label {
+ color: #cfc;
+ font-size: 20px;
+ margin: 30px 0;
+}
+
+#image-placeholder {
+ display: inline-block;
+ height: 128px;
+ width: 128px;
+}
+</style>
+</head>
+
+<body>
+
+<section id="header">
+ <div class="center">
+ <img src="location-hash-content/images/gtv-horizontal.png">
+ <h2>HTML: Using Location Hash To Maintain State</h2>
+ </div>
+</section>
+
+<section class="main-content center">
+ <p>
+ Click on the buttons below to create new entries in the browser
history.
+ <br>
+ User can then navigate forward/backward to traverse between states.
+ </p>
+
+ <div class="button-bar">
+ <button onclick="MyApp.updateApp(1, true);" type="button">ONE</button>
+ <button onclick="MyApp.updateApp(2, true);" type="button">TWO</button>
+ <button onclick="MyApp.updateApp(3, true);"
type="button">THREE</button>
+ <button onclick="MyApp.updateApp(4, true);" type="button">FOUR</button>
+ </div>
+
+ <div id="hash-label">#</div>
+
+ <div id="image-placeholder"></div>
+</section>
+
+
+<script type="text/javascript">
+/**
+ * My web app instance
+ */
+var MyApp = {};
+
+MyApp.updateHashLabel = function(str) {
+ document.getElementById('hash-label').innerHTML = '#' + str;
+};
+
+MyApp.updateApp = function(hashValue, allowAppToUpdateHash) {
+ var index = parseInt(hashValue, 10);
+ var imageNode = document.getElementById('image-placeholder');
+
+ switch (index) {
+ case 1:
+ imageNode.style.backgroundImage =
+ 'url(location-hash-content/images/android-logo.png)';
+ break;
+ case 2:
+ imageNode.style.backgroundImage =
+ 'url(location-hash-content/images/chrome-logo.png)';
+ break;
+ case 3:
+ imageNode.style.backgroundImage =
+ 'url(location-hash-content/images/gtv-logo.png)';
+ break;
+ case 4:
+ imageNode.style.backgroundImage =
+ 'url(location-hash-content/images/remote-logo.png)';
+ break;
+ default:
+ imageNode.style.backgroundImage = 'none';
+ break;
+ }
+
+ // Update hash label
+ MyApp.updateHashLabel(hashValue);
+
+ // Create new entry in browser location history to mark new app state
+ if (allowAppToUpdateHash) {
+ setLocationHash(index);
+ }
+};
+
+
+/**
+ * Flag tells my onhashchange event handler whether my app should be
updated
+ * whenever hash value changes. Enabled by default. If hash change comes
from
+ * my app, use this flag to stop my onhashchange event handler from
executing.
+ * @type boolean
+ */
+var allowHashToUpdateApp = true;
+
+/**
+ * Returns the value of the location hash.
+ */
+function getLocationHash () {
+ return window.location.hash.substring(1);
+}
+
+/**
+ * Called by my app to update location hash. Hash changes made through
+ * this function should be ignored by the hash change event handler.
+ * @param {string} str
+ */
+function setLocationHash(str) {
+ // Tell the event handler to ignore this change since its manually
updated.
+ allowHashToUpdateApp = false;
+
+ window.location.hash = str;
+}
+
+/**
+ * Listen for hash changes. Use flag to determine whether hash changes
should
+ * propagate updates to my app.
+ */
+window.onhashchange = function(e) {
+ // Update app only if hash change is allowed per flag.
+ if (allowHashToUpdateApp) {
+ MyApp.updateApp(getLocationHash(), false);
+ } else {
+ allowHashToUpdateApp = true;
+ }
+};
+
+/**
+ * Checks if any hash values exist on initial load and restores app state.
+ */
+window.onload = function() {
+ var hashValue = getLocationHash();
+ if (hashValue) {
+ MyApp.updateApp(hashValue, false);
+ }
+};
+</script>
+
+</body>
+</html>

Reply all

Reply to author

Forward

0 new messages