1 / 41

Browser MVC with YQL and YUI

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.

jcleblanc
Download Presentation

Browser MVC with YQL and YUI

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Browser MVC with YQL and YUI Jonathan LeBlanc Technology Evangelist Yahoo! Developer Network Twitter: @jcleblanc

  2. Geo Maker Available At: http://icant.co.uk/geomaker/index.php 2

  3. Yahoo! Social Updates Available At: www.nakedtechnologist.com/ php_widget_oauth/ yql_php_widget.html 3

  4. Christian Heilmann‟s Website Available At: http://icant.co.uk/ 4

  5. Fetching Dynamic Data with YQL Browser MVC Model Component 5

  6. 6

  7. YQL Query Structure SELECT * FROM Internet 7

  8. YQL Test Console Available At: http://developer.yahoo.com/yql/console 8

  9. Running Queries - SELECT Query Structure SELECTmyColumn, myTitle FROMmyTable WHEREmyColumn = 'value' ANDmyTitle = 'title„ LIMIT3 OFFSET10 9

  10. Running Queries - INSERT / UPDATE / DELETE Modify Data on the Internet Create Tweets, Add Blog Entries, Update Databases Current Tables Using I/U/D Twitter Status, bit.ly URL Shortner, Yahoo! Profile Status / Update Stream, Amazon SimpleDB 10

  11. Running Queries - INSERT Query Structure INSERT INTObitly.shorten (login, apiKey, longUrl) VALUES (‟ME', 'API_KEY', 'http://yahoo.com') 11

  12. Running Queries - UPDATE Query Structure UPDATE social.profile.status SET status="Using YQL UPDATE" WHEREguid=“NJFIDHVPVVISDXZKT7UKED2WHU” 12

  13. Running Queries - DELETE Query Structure DELETE FROM twittertable WHERE tweetid="12345" AND username="twitter_username" AND password="twitter_password 13

  14. Running Queries – Sub-selects with the IN clause SELECT * FROM flickr.photos.search WHERE (lat, lon) IN (SELECT centroid.latitude, centroid.longitude FROM geo.places WHERE text="SFO") 14

  15. Running Queries – Available Tables YQL Command: SHOW Tables Number of Standard Tables: 105 Number of Community Tables: 600 Total Number of Tables: 705 Contribute Tables to: http://www.github.com/yql/yql-tables/ 15

  16. Running Queries – Table Syntax YQL Command: DESC tablename 16

  17. Running Queries – URL Format http://query.yahooapis.com/v1/yql?[params] http://query.yahooapis.com/v1/public/yql?[params] Params • q=[QUERY] • format=[XML / JSON] • diagnostics=[true / false] • debug=[true / false] • env=[.env file link] • callback=[function name] 17

  18. Running Queries – URL Format http://query.yahooapis.com/v1/yql?[params] http://query.yahooapis.com/v1/public/yql?[params] Params • q=[QUERY] • format=[XML / JSON / JSONP / JSONP-X] • diagnostics=[true / false] • debug=[true / false] • env=[.env file link] • callback=[function name] 18

  19. YQL Open Data Tables Wrap Your Own API or Data Source 19

  20. Open Data Tables – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/tabl e.xsd"> <meta></meta> <bindings></bindings> </table> 20

  21. Open Data Tables – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/tabl e.xsd"> <meta></meta> <bindings></bindings> </table> 21

  22. Open Data Tables – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd"> <meta> <author>Jonathan LeBlanc</author> <description>My Table</description> <documentationURL>www.site.com</documentationURL> <sampleQuery>SELECT * FROM {table} </sampleQuery> </meta> <bindings></bindings> </table> 22

  23. Open Data Tables – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/tabl e.xsd"> <meta></meta> <bindings></bindings> </table> 23

  24. Open Data Tables – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd"> <meta></meta> <bindings> <select itemPath="" produces="XML" > <urls> <urlenv="all”>http://www.site.com/{user}</url> </urls> <inputs> <key id="user" type="xs:string" paramType="path" required="true" /></inputs> </select> </bindings> </table> 24

  25. Open Data Tables – Invoking a Table Definition The USE clause USE 'http://github.com/yql/yql- tables/raw/master/google/google.buzz.upd ates.xml' AS buzz.updates; SELECT * FROM buzz.updates WHERE user='nakedtechnologist' 25

  26. Google Buzz Table Available At: http://github.com/yql/yql-tables

  27. YQL Execute Extending Open Data Tables 27

  28. YQL Execute – Use Benefits Augment data - city / state to APIs that just return zip code Create APIs from web pages - celebrity birthdays scraped from IMDB Data Transformations - convert the results from xml to Google's kml format Move business logic of your application to the cloud 28

  29. YQL Execute – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd" > <meta></meta> <bindings> <select itemPath="" produces="XML" > <urls></urls> <inputs></inputs> </select> </bindings> </table> 29

  30. YQL Execute – XML File Syntax <?xml version="1.0" encoding="UTF-8"?> <table xmlns="http://query.yahooapis.com/v1/schema/table.xsd" > <meta></meta> <bindings> <select itemPath="" produces="XML" > <urls></urls> <inputs></inputs> <execute></execute> </select> </bindings> </table> 30

  31. Global Disaster Alert and Coordination System Table Available At: http://github.com/yql/yql-tables

  32. YUI Data Handling & Manipulation Browser MVC Controller Component 32

  33. YUI Visualization: Controller DATA PROCESSING GET Connection Manager HANDLING & MANIPULATION DOM Event Uploader 33

  34. YUI Visualization: Controller (GET Utility) <script type="text/javascript"> //public YQL query URL varyqlPublicQueryURL = "http://query.yahooapis.com/v1/public/yql?"; //YQL Query varsQuery = 'SELECT * FROM maps.map WHERE zip="94085"'; //prepare the URL params for YQL query varsURL = yqlPublicQueryURL + "q=" + encodeURI(sQuery) + "&format=json&callback=getYQLDataCallback"; //make GET request to YQL with provided query vartransactionObj = YAHOO.util.Get.script(sURL, { onSuccess : onYQLReqSuccess, onFailure : onYQLReqFailure, scope : this }); return transactionObj; </script> 34

  35. YUI Visualization: Controller (Connection Manager) <script type="text/javascript"> //YQL Query varsQuery = 'select lastUpdated, link, loc_iconURL, loc_longForm, profile_nickname, profile_pr ofileUrl, publishedTime from social.updates where guid=me | sort(field="lastUpdated") | reverse()'; //prepare the URL & post data for the Yahoo! connection manager POST varsURL = "private_data_fetch.php"; varpostData = "q=" + sQuery; //define connection manager event callbacks var callback = { success:parseYQLResults, failure:onYQLReqFailure }; //make POST request to YQL with provided query vartransactionObj = YAHOO.util.Connect.asyncRequest('POST', sURL, callback, postData); </script> 35

  36. YUI Visualization Browser MVC View Component 36

  37. YUI Visualization: View VISUALIZATION UTILITIES Animation Button Calendar Color Picker Carousel Charts Data Table ImageLoader Layout Manager Menu ProgressBar Slider Stylesheet SWF Utility TabView TreeView 37

  38. YUI Visualization: Pseudo They Go Both Ways Drag and Drop ImageCropper Rich Text Editor 38

  39. Conclusion Build applications faster (and that run faster) 39

  40. This Presentation http://www.slideshare.net/jcleblanc YQL Documentation http://developer.yahoo.com/yql YUI Documentation http://developer.yahoo.com/yui YQL Console http://developer.yahoo.com/yql/console YQL Github Account (Contribute Tables) http://github.com/yql/yql-tables

  41. Thank You Questions? 41

More Related