--- /dev/null Thu Jan 01 00:00:00 1970 +0000
+++ b/src/cm/media/js/lib/yui/yui_3.10.3/docs/jsonp/jsonp-gallery.html Tue Jul 16 14:29:46 2013 +0200
@@ -0,0 +1,453 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+ <meta charset="utf-8">
+ <title>Example: Reusing a JSONPRequest Instance to Poll a Remote Server</title>
+ <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic,700italic">
+ <link rel="stylesheet" href="../../build/cssgrids/cssgrids-min.css">
+ <link rel="stylesheet" href="../assets/css/main.css">
+ <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
+ <link rel="shortcut icon" type="image/png" href="../assets/favicon.png">
+ <script src="../../build/yui/yui-min.js"></script>
+
+</head>
+<body>
+<!--
+<a href="https://github.com/yui/yui3"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub"></a>
+-->
+<div id="doc">
+ <div id="hd">
+ <h1><img src="http://yuilibrary.com/img/yui-logo.png"></h1>
+ </div>
+
+
+ <h1>Example: Reusing a JSONPRequest Instance to Poll a Remote Server</h1>
+ <div class="yui3-g">
+ <div class="yui3-u-3-4">
+ <div id="main">
+ <div class="content"><style scoped>
+ #out {
+ margin-top: 2em;
+ }
+ #out h4 {
+ border-right: 100px solid #ccc;
+ }
+</style>
+
+
+<div class="intro">
+ <p>
+ This example shows how to create a reusable JSONPRequest for polling as
+ well as how to configure success and failure callbacks. See the API
+ docs and user guide for a full listing of available configurations.
+ </p>
+
+ <p>
+ For this example, we will use a JSONP service hosted on <a
+ href="http://yuilibrary.com">YUILibrary</a> to fetch information about
+ a random Gallery module and render some of the information on the page.
+ </p>
+</div>
+
+<div class="example yui3-skin-sam">
+<div id="demo">
+ <input type="button" id="start" value="Start polling">
+ <input type="button" id="stop" value="Stop polling">
+ <div id="out">
+ </div>
+</div>
+
+<script>
+YUI().use("jsonp", "transition",function (Y) {
+
+ var url = "http://yuilibrary.com/gallery/api/random?callback={callback}",
+ outputDiv = Y.one("#out"),
+ gallery;
+
+ // Using the configuration object syntax
+ gallery = new Y.JSONPRequest(url, {
+ on: {
+ success: function (response) {
+ var module = response.modules[0],
+ author = module.owner;
+
+ // Some users don't have a rank
+ if (!author.rank) {
+ author.rank = "user";
+ }
+
+ // Format the author info and store as a property of the
+ // module object for use by Y.Lang.sub
+ // ('this' refers to the JSONPRequest object by default)
+ module.authorHTML = Y.Lang.sub(this.authorTemplate, author);
+
+ outputDiv.setHTML(Y.Lang.sub(this.moduleTemplate, module));
+
+ // Add some flare to the poll interval by showing a "time left"
+ // indicator via the header's border
+ Y.one("#out h4")
+ .setStyle("borderRightWidth", "100px")
+ .transition({
+ borderRightWidth: 0,
+ duration: 7
+ }, function () {
+ if (gallery.polling) {
+ gallery.send();
+ }
+ });
+ },
+
+ failure: function () {
+ gallery.polling = false;
+ outputDiv.setHTML(this.failureTemplate);
+
+ // Wire up the Try again button
+ outputDiv.one("button").on("click", function () {
+ gallery.send();
+ });
+ }
+ }
+ });
+
+
+ gallery.moduleTemplate =
+ '<h4><a href="{url}">{title}</a></h4>' +
+ '<p class="author">{authorHTML}</p>' +
+ '<div>{summary}</div>';
+
+ gallery.authorTemplate =
+ '<img src="{icon}" height="30" width="30">' +
+ ' {fullname} <span class="rank">({rank})</span>';
+
+ gallery.failureTemplate =
+ '<p class="error">Ack, I couldn\'t reach the Gallery web service!</p>' +
+ '<button>Try again</button>';
+
+ gallery.polling = false;
+
+
+ // Click the button to send the JSONP request
+ Y.one("#start").on("click", function (e) {
+ if (!gallery.polling) {
+ gallery.polling = true;
+ gallery.send();
+ }
+ });
+
+ Y.one("#stop").on("click", function (e) {
+ gallery.polling = false;
+ });
+
+});
+</script>
+
+</div>
+
+<h3>The data</h3>
+<p>The structure of the JavaScript object returned from YUILibrary's JSONP service will look like this:</p>
+
+<pre class="code prettyprint">{
+ modules: [
+ {
+ url: (the url to the module),
+ title: (the title of the module),
+ summary: (short description of the module),
+ ...,
+ owner: {
+ icon: (url to the author's thumb image),
+ fullname: (the author's full name),
+ rank: (YUI Team member?, Contributor? etc),
+ ...
+ }
+ }
+ ],
+ ...
+}</pre>
+
+
+<p>We'll use these objects to populate an HTML template with data <em>{placeholder}</em>s using <code>Y.Lang.sub( template, object )</code>.</p>
+
+
+<h3>Start simple</h3>
+<p>To make a single call to the YUILibrary Gallery API, we can just use</p>
+
+<pre class="code prettyprint">Y.jsonp("http://yuilibrary.com/gallery/api/random?callback={callback}", handleJSONP);</pre>
+
+
+<p>But since each call to <code>Y.jsonp()</code> creates a new instance of <code>Y.JSONPRequest</code>, we may as well store the instance and reuse it.</p>
+
+<pre class="code prettyprint">var gallery = new Y.JSONPRequest("http://yuilibrary.com/gallery/api/random?callback={callback}", handleJSONP);
+
+gallery.send();</pre>
+
+
+<h3>Add polling</h3>
+<p>JSONPRequest doesn't have any built-in polling mechanism, but <code>Y.later()</code> can handle this for us.</p>
+
+<pre class="code prettyprint">var url = "http://yuilibrary.com/gallery/api/random?callback={callback}";
+
+function handleJSONP(response) {
+ // populate template from the response object and add to the output div
+ ...
+
+ Y.one("#out").setHTML( Y.Lang.sub(template, module) );
+
+ // After 7 seconds, call the API for a new module
+ Y.later(7000, this, this.send);
+};
+
+var gallery = new Y.JSONPRequest(url, handleJSONP);
+gallery.send();</pre>
+
+
+<h3>Add failure protection</h3>
+<p>In case the Gallery API is busy or some other problem arises, we'll also want to handle this case and display an error. We can do this by passing a configuration object as the second parameter rather than a simple success callback.</p>
+
+<pre class="code prettyprint">var gallery = new Y.JSONPRequest(url, {
+ on: {
+ success: function (response) {
+ // populate output div from the template and response object
+ ...
+
+ Y.one("#out").setHTML( Y.Lang.sub(template, module) );
+
+ // After 7 seconds, call the API for a new module
+ Y.later(7000, this, this.send);
+ },
+
+ failure: function () {
+ Y.one("#out").setHTML( failureTemplate );
+ }
+ }
+ });
+
+gallery.send();</pre>
+
+
+<h3>Add flare</h3>
+<p>Now we'll add a bit of flourish, by adding a visual indicator of how long until the next module is requested. We'll replace the call to <code>Y.later()</code> with a call to <code>node.transition()</code> using a shrinking border to show the remaining time. Then when the transition is complete, we call <code>send()</code> again.
+
+<pre class="code prettyprint">var gallery = new Y.JSONPRequest(url, {
+ on: {
+ success: function (response) {
+ // populate output div from the template and response object
+ ...
+
+ Y.one("#out").setHTML( Y.Lang.sub(template, module) );
+
+ // Add some flare to the poll interval by showing a "time left"
+ // indicator via the header's border
+ Y.one("#out h4")
+ .setStyle("borderRightWidth", "100px")
+ .transition({
+ borderRightWidth: 0,
+ duration: 7
+ }, function () {
+ gallery.send();
+ });
+ },
+
+ failure: function () {
+ Y.one("#out").setHTML( failureTemplate );
+ }
+ }
+ });
+
+gallery.send();</pre>
+
+
+<h3>Stop the poll</h3>
+<p>The final step is to add the ability to start and stop the polling. We'll manage this by adding a property to the <code>gallery</code> JSONPRequest instance named <code>gallery.polling</code>. See the full code listing below for the implementation.
+
+<h3 id="fullcode">Full Code Listing</h3>
+<h4>HTML</h4>
+<pre class="code prettyprint"><div id="demo">
+ <input type="button" id="start" value="Start polling">
+ <input type="button" id="stop" value="Stop polling">
+ <div id="out">
+ </div>
+</div></pre>
+
+
+<h4>JavaScript</h4>
+<pre class="code prettyprint"><script>
+YUI().use("jsonp", "transition",function (Y) {
+
+ var url = "http://yuilibrary.com/gallery/api/random?callback={callback}",
+ outputDiv = Y.one("#out"),
+ gallery;
+
+ // Using the configuration object syntax
+ gallery = new Y.JSONPRequest(url, {
+ on: {
+ success: function (response) {
+ var module = response.modules[0],
+ author = module.owner;
+
+ // Some users don't have a rank
+ if (!author.rank) {
+ author.rank = "user";
+ }
+
+ // Format the author info and store as a property of the
+ // module object for use by Y.Lang.sub
+ // ('this' refers to the JSONPRequest object by default)
+ module.authorHTML = Y.Lang.sub(this.authorTemplate, author);
+
+ outputDiv.setHTML(Y.Lang.sub(this.moduleTemplate, module));
+
+ // Add some flare to the poll interval by showing a "time left"
+ // indicator via the header's border
+ Y.one("#out h4")
+ .setStyle("borderRightWidth", "100px")
+ .transition({
+ borderRightWidth: 0,
+ duration: 7
+ }, function () {
+ if (gallery.polling) {
+ gallery.send();
+ }
+ });
+ },
+
+ failure: function () {
+ gallery.polling = false;
+ outputDiv.setHTML(this.failureTemplate);
+
+ // Wire up the Try again button
+ outputDiv.one("button").on("click", function () {
+ gallery.send();
+ });
+ }
+ }
+ });
+
+
+ gallery.moduleTemplate =
+ '<h4><a href="{url}">{title}</a></h4>' +
+ '<p class="author">{authorHTML}</p>' +
+ '<div>{summary}</div>';
+
+ gallery.authorTemplate =
+ '<img src="{icon}" height="30" width="30">' +
+ ' {fullname} <span class="rank">({rank})</span>';
+
+ gallery.failureTemplate =
+ '<p class="error">Ack, I couldn\'t reach the Gallery web service!</p>' +
+ '<button>Try again</button>';
+
+ gallery.polling = false;
+
+
+ // Click the button to send the JSONP request
+ Y.one("#start").on("click", function (e) {
+ if (!gallery.polling) {
+ gallery.polling = true;
+ gallery.send();
+ }
+ });
+
+ Y.one("#stop").on("click", function (e) {
+ gallery.polling = false;
+ });
+
+});
+</script></pre>
+
+</div>
+ </div>
+ </div>
+
+ <div class="yui3-u-1-4">
+ <div class="sidebar">
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+ <li data-description="Get basic GitHub user info using a Y.jsonp(url, callback).">
+ <a href="jsonp-github.html">Getting Cross Domain JSON Data Using Y.jsonp()</a>
+ </li>
+
+
+
+ <li data-description="Create a reusable JSONPRequest object to poll the YUILibrary.com Gallery web service, fetching info on a random Gallery module.">
+ <a href="jsonp-gallery.html">Reusing a JSONPRequest Instance to Poll a Remote Server</a>
+ </li>
+
+
+
+
+
+
+ </ul>
+ </div>
+ </div>
+
+
+
+ <div class="sidebox">
+ <div class="hd">
+ <h2 class="no-toc">Examples That Use This Component</h2>
+ </div>
+
+ <div class="bd">
+ <ul class="examples">
+
+
+
+
+
+
+ <li data-description="Wrapping async transactions with promises">
+ <a href="../promise/basic-example.html">Wrapping async transactions with promises</a>
+ </li>
+
+
+
+ <li data-description="Extend Y.Promise to create classes that encapsulate standard transaction logic in descriptive method names">
+ <a href="../promise/subclass-example.html">Subclassing Y.Promise</a>
+ </li>
+
+
+ </ul>
+ </div>
+ </div>
+
+ </div>
+ </div>
+ </div>
+</div>
+
+<script src="../assets/vendor/prettify/prettify-min.js"></script>
+<script>prettyPrint();</script>
+
+<script>
+YUI.Env.Tests = {
+ examples: [],
+ project: '../assets',
+ assets: '../assets/jsonp',
+ name: 'jsonp-gallery',
+ title: 'Reusing a JSONPRequest Instance to Poll a Remote Server',
+ newWindow: '',
+ auto: false
+};
+YUI.Env.Tests.examples.push('jsonp-github');
+YUI.Env.Tests.examples.push('jsonp-gallery');
+YUI.Env.Tests.examples.push('basic-example');
+YUI.Env.Tests.examples.push('subclass-example');
+
+</script>
+<script src="../assets/yui/test-runner.js"></script>
+
+
+
+</body>
+</html>