Browser MVC with YQL and YUI

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

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

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

5
Fetching Dynamic Data with YQLBrowser MVC Model Component

7
YQL Query StructureSELECT * FROM Internet

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

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

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

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

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

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

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")

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/

16
Running Queries – Table Syntax
YQL Command: DESC tablename

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]

19
YQL Open Data TablesWrap Your Own API or Data Source

20
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></bindings>
</table>

21
<meta></meta>
</table>

22
<meta>
<author>Jonathan LeBlanc</author>
<description>My Table</description>
<documentationURL>www.site.com</documentationURL>
<sampleQuery>SELECT * FROM {table} </sampleQuery>
</meta>
</table>

23
<meta></meta>
</table>

24
<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>

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

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

27
YQL ExecuteExtending Open Data Tables

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

29
YQL Execute – XML File Syntax
<meta></meta>
<bindings>
<urls></urls>
<inputs></inputs>
</select>
</bindings>
</table>

30
YQL Execute – XML File Syntax
<meta></meta>
<bindings>
<urls></urls>
<inputs></inputs>
<execute></execute>
</select>
</bindings>
</table>

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

32
YUI Data Handling & ManipulationBrowser MVC Controller Component

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

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

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

36
YUI VisualizationBrowser MVC View Component

37
YUI Visualization: View
VISUALIZATION UTILITIES
AnimationButtonCalendarColor PickerCarouselChartsData TableImageLoader
Layout ManagerMenuProgressBarSliderStylesheetSWF UtilityTabViewTreeView

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

39
Conclusion
Build applications faster
(and that run faster)

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 YouQuestions?

http://www.nakedtechnologist.com	59
http://developer.yahoo.net	29
http://www.slideshare.net	25
http://developer.yahoo.com	8
http://www.berejeb.com	4
http://yahoo-query-language.chayom.com	3
http://www.devetdesign.com	2
http://xianguo.com	1

Browser MVC with YQL and YUI

by Jonathan LeBlanc on Mar 12, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 131

Statistics

Browser MVC with YQL and YUI — Webinar Transcript