hixie: Add an example for pushState(). (whatwg r4012)

hixie: Add an example for pushState(). (whatwg r4012)

http://dev.w3.org/cvsweb/html5/spec/Overview.html?r1=1.3173&r2=1.3174&f=h
http://html5.org/tools/web-apps-tracker?from=4011&to=4012

===================================================================
RCS file: /sources/public/html5/spec/Overview.html,v
retrieving revision 1.3173
retrieving revision 1.3174
diff -u -d -r1.3173 -r1.3174
--- Overview.html 28 Sep 2009 23:42:53 -0000 1.3173
+++ Overview.html 29 Sep 2009 00:13:48 -0000 1.3174
@@ -215,7 +215,7 @@
    <h2 class="no-num no-toc" id="a-vocabulary-and-associated-apis-for-html-and-xhtml">A vocabulary and associated APIs for HTML and XHTML</h2>
    <!--ZZZ:-->
    <!--<h2 class="no-num no-toc">W3C Working Draft 25 August 2009</h2>-->
-   <h2 class="no-num no-toc" id="editor-s-draft-28-september-2009">Editor's Draft 28 September 2009</h2>
+   <h2 class="no-num no-toc" id="editor-s-draft-29-september-2009">Editor's Draft 29 September 2009</h2>
    <!--:ZZZ-->
    <dl><!-- ZZZ: update the month/day (twice), (un)comment out--><!--
     <dt>This Version:</dt>
@@ -317,7 +317,7 @@
   track.
   <!--ZZZ:-->
   <!--This specification is the 25 August 2009 Working Draft.-->
-  This specification is the 28 September 2009 Editor's Draft.
+  This specification is the 29 September 2009 Editor's Draft.
   <!--:ZZZ-->
   </p><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- relationship to other work (required) --><p>This specification is also being produced by the <a href="http://www.whatwg.org/">WHATWG</a>. The two specifications are
   identical from the table of contents onwards.</p><!-- UNDER NO CIRCUMSTANCES IS THE FOLLOWING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- UNDER NO CIRCUMSTANCES IS THE PRECEDING PARAGRAPH TO BE REMOVED OR EDITED WITHOUT TALKING TO IAN FIRST --><!-- context and rationale (required) --><p>This specification is intended to replace (be a new version of)
@@ -48745,7 +48745,71 @@
   last entry for that <code>Document</code> object in the session
   history.</p>
 
-  </div><!-- XXX add a pushState() example here, for bug 7621 --><h4 id="activating-state-object-entries"><span class="secno">6.10.3 </span><dfn title="activate the state object">Activating state object entries</dfn></h4><div class="impl">
+  </div><div class="example">
+
+   <p>Consider a game where the user can navigate along a line, such
+   that the user is always at some coordinate, and such that the user
+   can bookmark the page corresponding to a particular coordinate, to
+   return to it later.</p>
+
+   <p>A static page implementing the x=5 position in such a game could
+   look like the following:</p>
+
+   <pre>&lt;!DOCTYPE HTML&gt;
+&lt;!-- this is http://example.com/line?x=5 --&gt;
+&lt;title&gt;Line Game - 5&lt;/title&gt;
+&lt;p&gt;You are at coordinate 5 on the line.&lt;/p&gt;
+&lt;p&gt;
+ &lt;a href="?x=6"&gt;Advance to 6&lt;/a&gt; or
+ &lt;a href="?x=4"&gt;retreat to 4&lt;/a&gt;?
+&lt;/p&gt;</pre>
+
+   <p>The problem with such a system is that each time the user
+   clicks, the whole page has to be reloaded. Here instead is another
+   way of doing it, using script:</p>
+
+   <pre>&lt;!DOCTYPE HTML&gt;
+&lt;!-- this starts off as http://example.com/line?x=5 --&gt;
+&lt;title&gt;Line Game - 5&lt;/title&gt;
+&lt;p&gt;You are at coordinate &lt;span id="coord"&gt;5&lt;/span&gt; on the line.&lt;/p&gt;
+&lt;p&gt;
+ &lt;a href="?x=6" onclick="go(1)"&gt;Advance to 6&lt;/a&gt; or
+ &lt;a href="?x=4" onclick="go(-1)"&gt;retreat to 4&lt;/a&gt;?
+&lt;/p&gt;
+&lt;script&gt;
+ var currentPage = 5; // prefilled by server
+ function go(d) {
+   history.pushState(currentPage, 'Line Game - ' + currentPage, '?x=' + currentPage);
+   setupPage(currentPage + d);
+ }
+ onpopstate = function(event) {
+   setupPage(event.state);
+ }
+ function setupPage(page) {
+   currentPage = page;
+   document.title = 'Line Game - ' + currentPage;
+   document.getElementById('coord').textContent = currentPage;
+   document.links[0].href = '?x=' + (currentPage+1);
+   document.links[0].textContent = 'Advance to ' + (currentPage+1);
+   document.links[1].href = '?x=' + (currentPage-1);
+   document.links[1].textContent = 'retreat to ' + (currentPage-1);
+ }
+&lt;/script&gt;</pre>
+
+   <p>In systems without script, this still works like the previous
+   example. However, users that <em>do</em> have script support can
+   now navigate much faster, since there is no network access for the
+   same experience. Furthermore, contrary to the experience the user
+   would have with just a na&iuml;ve script-based approach,
+   bookmarking and navigating the session history still work.</p>
+
+   <p>In the example above, the <var title="">data</var> argument to
+   the <code title="dom-history-pushState"><a href="#dom-history-pushstate">pushState()</a></code> method
+   is the same information as would be sent to the server, but in a
+   more convenient form, so that the script doesn't have to parse the
+   URL each time the user navigates.</p>
+
+  </div><h4 id="activating-state-object-entries"><span class="secno">6.10.3 </span><dfn title="activate the state object">Activating state object entries</dfn></h4><div class="impl">
 
   <p>When an entry in the session history is activated (which happens
   during <a href="#traverse-the-history" title="traverse the history">session history

Received on Tuesday, 29 September 2009 00:14:59 UTC