Your SlideShare is downloading. ×
0
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Browser MVC with YQL and YUI
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Browser MVC with YQL and YUI

3,682

Published on

YQL is a highly rich and dynamic utility for capturing data from any place on the web. When we couple this functionality with YUI we have wonderful functionality for designing apps and sites easily …

YQL is a highly rich and dynamic utility for capturing data from any place on the web. When we couple this functionality with YUI we have wonderful functionality for designing apps and sites easily and that scale around MVC design patterns.

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,682
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
52
Comments
0
Likes
6
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Browser MVC with YQL and YUI<br />Jonathan LeBlanc<br />Technology Evangelist<br />Yahoo! Developer Network<br />Twitter: @jcleblanc<br />
  • 2. 2<br />Geo Maker<br />Available At: http://icant.co.uk/geomaker/index.php<br />
  • 3. 3<br />Yahoo! Social Updates<br />Available At: <br /> www.nakedtechnologist.com/<br />php_widget_oauth/<br />yql_php_widget.html<br />
  • 4. 4<br />Christian Heilmann’s Website<br />Available At: http://icant.co.uk/<br />
  • 5. 5<br />Fetching Dynamic Data with YQLBrowser MVC Model Component <br />
  • 6. 6<br />
  • 7. 7<br />YQL Query StructureSELECT * FROM Internet<br />
  • 8. 8<br />YQL Test Console<br />Available At: http://developer.yahoo.com/yql/console<br />
  • 9. 9<br />Running Queries - SELECT Query Structure<br />SELECTmyColumn, myTitle<br />FROMmyTable<br />WHEREmyColumn = &apos;value&apos; ANDmyTitle = &apos;title‘<br />LIMIT3 OFFSET10<br />
  • 10. 10<br />Running Queries - INSERT / UPDATE / DELETE<br />Modify Data on the Internet<br />Create Tweets, Add Blog Entries, Update Databases<br />Current Tables Using I/U/D<br />Twitter Status, bit.ly URL Shortner, Yahoo! Profile Status / Update <br />Stream, Amazon <br />SimpleDB<br />
  • 11. 11<br />Running Queries - INSERT Query Structure<br />INSERT INTObitly.shorten (login, apiKey, longUrl) <br />VALUES (’ME&apos;, &apos;API_KEY&apos;, &apos;http://yahoo.com&apos;) <br />
  • 12. 12<br />Running Queries - UPDATE Query Structure<br />UPDATE social.profile.status<br />SET status=&quot;Using YQL UPDATE&quot; <br />WHEREguid=“NJFIDHVPVVISDXZKT7UKED2WHU”<br />
  • 13. 13<br />Running Queries - DELETE Query Structure<br />DELETE FROM twittertable<br />WHERE tweetid=&quot;12345&quot; <br />AND username=&quot;twitter_username&quot; <br />AND password=&quot;twitter_password<br />
  • 14. 14<br />Running Queries – Sub-selects with the IN clause<br />SELECT * FROM flickr.photos.search<br />WHERE (lat, lon) <br />IN (SELECT centroid.latitude, centroid.longitude FROM geo.places WHERE text=&quot;SFO&quot;)<br />
  • 15. 15<br />Running Queries – Available Tables<br />YQL Command: SHOW Tables<br />Number of Standard Tables: 105<br />Number of Community Tables: 600<br />Total Number of Tables: 705<br />Contribute Tables to: <br />http://www.github.com/yql/yql-tables/<br />
  • 16. 16<br />Running Queries – Table Syntax<br />YQL Command: DESC tablename<br />
  • 17. Running Queries – URL Format<br />http://query.yahooapis.com/v1/yql?[params]<br />http://query.yahooapis.com/v1/public/yql?[params]<br />Params<br />q=[QUERY]<br />format=[XML / JSON] <br />diagnostics=[true / false]<br />debug=[true / false]<br />env=[.env file link]<br />callback=[function name]<br />17<br />
  • 18. 18<br />Running Queries – URL Format<br />http://query.yahooapis.com/v1/yql?[params]<br />http://query.yahooapis.com/v1/public/yql?[params]<br />Params<br /><ul><li>q=[QUERY]
  • 19. format=[XML / JSON / JSONP / JSONP-X]
  • 20. diagnostics=[true / false]
  • 21. debug=[true / false]
  • 22. env=[.env file link]
  • 23. callback=[function name]</li></li></ul><li>19<br />YQL Open Data TablesWrap Your Own API or Data Source<br />
  • 24. 20<br />Open Data Tables – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br /> &lt;bindings&gt;&lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 25. 21<br />Open Data Tables – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br /> &lt;bindings&gt;&lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 26. 22<br />Open Data Tables – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;<br /> &lt;author&gt;Jonathan LeBlanc&lt;/author&gt; <br /> &lt;description&gt;My Table&lt;/description&gt; <br /> &lt;documentationURL&gt;www.site.com&lt;/documentationURL&gt; <br /> &lt;sampleQuery&gt;SELECT * FROM {table} &lt;/sampleQuery&gt;<br /> &lt;/meta&gt; <br /> &lt;bindings&gt;&lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 27. 23<br />Open Data Tables – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br />&lt;bindings&gt;&lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 28. 24<br />Open Data Tables – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br />&lt;bindings&gt;<br />&lt;select itemPath=&quot;&quot; produces=&quot;XML&quot; &gt; <br /> &lt;urls&gt; <br /> &lt;urlenv=&quot;all”&gt;http://www.site.com/{user}&lt;/url&gt; <br /> &lt;/urls&gt; <br /> &lt;inputs&gt; <br /> &lt;key id=&quot;user&quot; type=&quot;xs:string&quot; paramType=&quot;path&quot; <br /> required=&quot;true&quot; /&gt; &lt;/inputs&gt; <br /> &lt;/select&gt; <br /> &lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 29. 25<br />Open Data Tables – Invoking a Table Definition<br />The USE clause<br />USE &apos;http://github.com/yql/yql-tables/raw/master/google/google.buzz.updates.xml&apos;<br />AS buzz.updates; <br />SELECT * FROM buzz.updates<br />WHERE user=&apos;nakedtechnologist&apos;<br />
  • 30. Google Buzz Table<br />Available At: http://github.com/yql/yql-tables<br />
  • 31. 27<br />YQL ExecuteExtending Open Data Tables<br />
  • 32. 28<br />YQL Execute – Use Benefits<br />Augment data<br /><ul><li>city / state to APIs that just return zip code</li></ul>Create APIs from web pages<br /><ul><li>celebrity birthdays scraped from IMDB</li></ul>Data Transformations<br /><ul><li>convert the results from xml to Google&apos;s kml format</li></ul>Move business logic of your application to the cloud<br />
  • 33. 29<br />YQL Execute – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br /> &lt;bindings&gt;<br />&lt;select itemPath=&quot;&quot; produces=&quot;XML&quot; &gt; <br /> &lt;urls&gt;&lt;/urls&gt; <br /> &lt;inputs&gt;&lt;/inputs&gt; <br /> &lt;/select&gt; <br /> &lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 34. 30<br />YQL Execute – XML File Syntax<br />&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;<br />&lt;table xmlns=&quot;http://query.yahooapis.com/v1/schema/table.xsd&quot;&gt; <br /> &lt;meta&gt;&lt;/meta&gt; <br /> &lt;bindings&gt;<br />&lt;select itemPath=&quot;&quot; produces=&quot;XML&quot; &gt; <br /> &lt;urls&gt;&lt;/urls&gt; <br /> &lt;inputs&gt;&lt;/inputs&gt;<br />&lt;execute&gt;&lt;/execute&gt; <br /> &lt;/select&gt; <br /> &lt;/bindings&gt;<br />&lt;/table&gt;<br />
  • 35. Global Disaster Alert and Coordination System Table<br />Available At: http://github.com/yql/yql-tables<br />
  • 36. 32<br />YUI Data Handling &amp; ManipulationBrowser MVC Controller Component <br />
  • 37. 33<br />YUI Visualization: Controller<br />DATA PROCESSING<br />GET<br />Connection Manager <br />HANDLING &amp; MANIPULATION<br />DOM<br />Event<br />Uploader<br />
  • 38. 34<br />YUI Visualization: Controller (GET Utility)<br />&lt;script type=&quot;text/javascript&quot;&gt;//public YQL query URLvaryqlPublicQueryURL = &quot;http://query.yahooapis.com/v1/public/yql?&quot;;//YQL QueryvarsQuery = &apos;SELECT * FROM maps.map WHERE zip=&quot;94085&quot;&apos;;//prepare the URL params for YQL queryvarsURL = yqlPublicQueryURL + &quot;q=&quot; + encodeURI(sQuery) + &quot;&amp;format=json&amp;callback=getYQLDataCallback&quot;;//make GET request to YQL with provided queryvartransactionObj = YAHOO.util.Get.script(sURL, {    onSuccess : onYQLReqSuccess,    onFailure : onYQLReqFailure,    scope : this});return transactionObj;<br />&lt;/script&gt; <br />
  • 39. 35<br />YUI Visualization: Controller (Connection Manager)<br />&lt;script type=&quot;text/javascript&quot;&gt;//YQL QueryvarsQuery = &apos;select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_profileUrl, publishedTime from social.updates where guid=me | sort(field=&quot;lastUpdated&quot;) | reverse()&apos;;//prepare the URL &amp; post data for the Yahoo! connection manager POSTvarsURL = &quot;private_data_fetch.php&quot;;varpostData = &quot;q=&quot; + sQuery;//define connection manager event callbacksvar callback = {    success:parseYQLResults,    failure:onYQLReqFailure};//make POST request to YQL with provided queryvartransactionObj = YAHOO.util.Connect.asyncRequest(&apos;POST&apos;, sURL, callback, postData);<br />&lt;/script&gt; <br />
  • 40. 36<br />YUI VisualizationBrowser MVC View Component<br />
  • 41. 37<br />YUI Visualization: View<br />VISUALIZATION UTILITIES<br />AnimationButtonCalendarColor PickerCarouselChartsData TableImageLoader<br />Layout ManagerMenuProgressBarSliderStylesheetSWF UtilityTabViewTreeView<br />
  • 42. 38<br />YUI Visualization: Pseudo<br />They Go Both Ways<br />Drag and Drop<br />ImageCropper<br />Rich Text Editor<br />
  • 43. 39<br />Conclusion<br />Build applications faster<br />(and that run faster)<br />
  • 44. This Presentation <br />http://www.slideshare.net/jcleblanc<br />YQL Documentation<br />http://developer.yahoo.com/yql<br />YUI Documentation<br />http://developer.yahoo.com/yui<br />YQL Console<br />http://developer.yahoo.com/yql/console<br />YQL Github Account (Contribute Tables)<br />http://github.com/yql/yql-tables<br />
  • 45. 41<br />Thank YouQuestions? <br />

×