| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>Demo of Google SMD</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../image/resources/image.css"; |
|---|
| 8 | body, html { |
|---|
| 9 | width:100%; |
|---|
| 10 | margin:0; padding:0; |
|---|
| 11 | } |
|---|
| 12 | .logo { |
|---|
| 13 | border:0; vertical-align:middle; |
|---|
| 14 | } |
|---|
| 15 | .summary { |
|---|
| 16 | color:#666; |
|---|
| 17 | font:8pt Arial,sans-serif; |
|---|
| 18 | } |
|---|
| 19 | #container { |
|---|
| 20 | width:720px; |
|---|
| 21 | margin:0 auto; |
|---|
| 22 | } |
|---|
| 23 | #loader { |
|---|
| 24 | position:absolute; |
|---|
| 25 | top:3px; |
|---|
| 26 | left:3px; |
|---|
| 27 | visibility:hidden; |
|---|
| 28 | height:50px; |
|---|
| 29 | width:50px; |
|---|
| 30 | background:url("../../../dojox/image/resources/images/loading.gif") no-repeat center center; |
|---|
| 31 | } |
|---|
| 32 | </style> |
|---|
| 33 | |
|---|
| 34 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug: true, parseOnLoad: true"></script> |
|---|
| 35 | <script type="text/javascript"> |
|---|
| 36 | dojo.require("dojox.rpc.Service"); |
|---|
| 37 | dojo.require("dojo.io.script"); |
|---|
| 38 | |
|---|
| 39 | var google, tehloader = null; |
|---|
| 40 | function init(){ |
|---|
| 41 | |
|---|
| 42 | google = new dojox.rpc.Service(dojo.moduleUrl("dojox.rpc","SMDLibrary/google.smd")); |
|---|
| 43 | |
|---|
| 44 | tehloader = dojo.partial(dojo.style,"loader","visibility"); |
|---|
| 45 | var getResults = function(e){ |
|---|
| 46 | |
|---|
| 47 | tehloader("visible"); |
|---|
| 48 | |
|---|
| 49 | dojo.query("li","top").forEach(function(item){ |
|---|
| 50 | dojo.byId("archive").appendChild(item); |
|---|
| 51 | }); |
|---|
| 52 | |
|---|
| 53 | var searchType = dojo.byId("searchType").value || "webSearch"; |
|---|
| 54 | google[searchType]({ q: dojo.byId("test").value }) |
|---|
| 55 | // generic succes handler: |
|---|
| 56 | .addCallback(function(returned){ |
|---|
| 57 | var ret = returned.responseData; |
|---|
| 58 | var info = ret.cursor; |
|---|
| 59 | var data = ret.results || []; |
|---|
| 60 | dojo.forEach(data,function(item){ |
|---|
| 61 | var li = dojo.doc.createElement('li'); |
|---|
| 62 | li.innerHTML = "<a target='_new' hr"+"ef='"+ (item.unescapedUrl || item.url) +"'>" + item.title + "</a><br />" + |
|---|
| 63 | "<span class='summary'>" + (item.content || item.streetAddress || "unknown") + "</span>"; |
|---|
| 64 | |
|---|
| 65 | console.log(item); |
|---|
| 66 | dojo.byId("top").appendChild(li); |
|---|
| 67 | }); |
|---|
| 68 | tehloader("hidden"); |
|---|
| 69 | }) |
|---|
| 70 | // something bad happened: |
|---|
| 71 | .addErrback(function(err){ |
|---|
| 72 | console.warn('ooops', err); |
|---|
| 73 | tehloader("hidden"); |
|---|
| 74 | }); |
|---|
| 75 | }; |
|---|
| 76 | |
|---|
| 77 | dojo.connect(dojo.byId("doit"), "onclick", getResults); |
|---|
| 78 | |
|---|
| 79 | } |
|---|
| 80 | dojo.addOnLoad(init); |
|---|
| 81 | |
|---|
| 82 | </script> |
|---|
| 83 | </head> |
|---|
| 84 | |
|---|
| 85 | <body> |
|---|
| 86 | <div id="loader"></div> |
|---|
| 87 | <div id="container"> |
|---|
| 88 | <h2><a href="http://google.com"><img class="logo" src="http://www.google.com/logos/Logo_40wht.gif" alt="Google" /></a> Ajax API SMD</h2> |
|---|
| 89 | |
|---|
| 90 | <input id="test" name="test" type="text" size="30" value="The Dojo Toolkit"/> |
|---|
| 91 | <select id="searchType"> |
|---|
| 92 | <option value="webSearch">web</option> |
|---|
| 93 | <option value="localSearch">local</option> |
|---|
| 94 | <option value="videoSearch">videos</option> |
|---|
| 95 | <option value="blogSearch">blog</option> |
|---|
| 96 | <option value="newsSearch">news</option> |
|---|
| 97 | <option value="bookSearch">books</option> |
|---|
| 98 | <option value="imageSearch">images</option> |
|---|
| 99 | </select> |
|---|
| 100 | <button id="doit" type="submit" value="search">Search</button> |
|---|
| 101 | |
|---|
| 102 | <div id="current"> |
|---|
| 103 | <h3>Results:</h3> |
|---|
| 104 | <ul id="top"></ul> |
|---|
| 105 | </div> |
|---|
| 106 | |
|---|
| 107 | <div id="past"> |
|---|
| 108 | <h3>Old Searches:</h3> |
|---|
| 109 | <ul id="archive"></ul> |
|---|
| 110 | </div> |
|---|
| 111 | |
|---|
| 112 | <hr> |
|---|
| 113 | |
|---|
| 114 | <p>There are many per-serivce options available. This demo just pulls data and tries ...</p> |
|---|
| 115 | <p>That's all folks. Unit tests to come when we address the io.script issue.</p> |
|---|
| 116 | |
|---|
| 117 | |
|---|
| 118 | </div> |
|---|
| 119 | |
|---|
| 120 | |
|---|
| 121 | </body> |
|---|
| 122 | </html> |
|---|
