Advanced Gadget and UI Development Using Google's AJAX APIs
-
Upload
best-tech-videos -
Category
Documents
-
view
953 -
download
1
description
Transcript of Advanced Gadget and UI Development Using Google's AJAX APIs
![Page 1: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/1.jpg)
![Page 2: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/2.jpg)
Advanced Gadget and UI Development Using Google’s AJAX APIsDerek Collison5/29/2008
![Page 3: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/3.jpg)
Agenda
• The Application Concept• Basic Building Blocks• The Google AJAX APIs
– Background– Google AJAX Search API– Google AJAX Feed API– Google AJAX Language API
• Goals– Utilize the Raw AJAX APIs and advanced features– Show how Reader and Google CSE are utilized– How to wrap the application as a gadget
3
![Page 4: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/4.jpg)
The Application Concept
• Showcase the content on all of Google’s Blogs• Provide a tag cloud view for categories• Also a hierarchical view of all blogs grouped by tag• Allow search over all blogs• Provide language translation where applicable• Deploy as an iGoogle gadget
4
![Page 5: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/5.jpg)
The Basic Building Blocks• HTML/DOM• CSS• Javascript• Tools
– Editor– Debugger - Firebug
– Performance - YSlow
• The Google AJAX Apis– Search– Feed– Language
• Google Reader (www.google.com/reader)• Google Custom Search Engines (www.google.com/cse)• iGoogle
5
![Page 6: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/6.jpg)
ToolsFirefox and Firebug (http://www.getfirebug.com/)Don’t develop without them!
6
![Page 7: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/7.jpg)
Google AJAX APIs
AJAX APIs
• RESTful data access layer– JSON/JSON-P
• JavaScript Runtime– Designed for ease of use
• JavaScript Controls and UI elements– Custom integration and styling
Delivering the Web to Your Applications (Search, Feeds, Language)
7
![Page 8: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/8.jpg)
Google AJAX APIs Background• Comprehensive access to Google Systems (Search, Feeds, Language)• End to end API stack:
– Data Access via JavaScript Methods and REST
– Built in Native UI and Large Suite of Advanced Controls
• Large, diverse customer base– Sites: Long Tail and Short Tail Sites (100 pv/d – 10m+ pv/d)– Developers: Pro Web Developers – Scripters – Bloggers
• High Speed, Low Latency, Globally Available
RESTful Data Access
JavaScript Runtime
JavaScript Controls and UI
AJAX
8
![Page 9: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/9.jpg)
Google AJAX Search API
• Web• Video• News• Image• Local• Book• Blog
9
![Page 10: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/10.jpg)
Google AJAX Feed API
• Load• Find• Lookup
10
![Page 11: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/11.jpg)
Google AJAX Language API
• Translation• Language Detection
11
![Page 12: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/12.jpg)
12
The Application Prototype
![Page 13: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/13.jpg)
Prototype Demo
![Page 14: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/14.jpg)
14
What we saw
• The tag cloud view• A detail entry/snippet view• The hierarchical blog view• Search control and results• Translation capabilities
![Page 15: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/15.jpg)
15
How do we build it?
• Building Blocks– Google Reader (content feeds)– Custom Search Engine– AJAX APIs (Feed, Search, Language)
• Getting Started– Build standalone HTML/CSS/JS– google.load()– google.setOnLoadCallback()
• Putting it all together– Application details
• Making an iGoogle Gadget– Wrapping things into iGoogle
![Page 16: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/16.jpg)
16
Building The Application
• Subscriptions– Blog management
• Tags– Grouping Subscriptions/Blogs– Tag based pages– Tag based feeds
• Tag Cloud– All blogs top 20
• Hierarchical View– All categorized blogs
Building Blocks - Google Reader - www.google.com/reader
![Page 17: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/17.jpg)
17
Building The ApplicationBuilding Blocks - Google Reader - www.google.com/readerTags and Categorization
![Page 18: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/18.jpg)
18
Building The ApplicationBuilding Blocks - Google Reader - www.google.com/readerTags and Sharing Feeds
![Page 19: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/19.jpg)
19
Building The ApplicationBuilding Blocks - Google Reader - www.google.com/readerTags and Sharing Feeds
![Page 20: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/20.jpg)
20
Building The ApplicationBuilding Blocks - Google Reader - www.google.com/readerTags and Sharing Feeds - Ads Verticals Examplehttp://www.google.com/reader/shared/user/X/label/Ads%20Verticals
![Page 21: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/21.jpg)
21
Building The ApplicationBuilding Blocks - Google Reader - www.google.com/readerTags and Sharing Feeds - Ads Verticals Feedhttp://www.google.com/reader/public/atom/user/X/label/Ads%20Verticals
![Page 22: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/22.jpg)
22
Building The Application
• CSE– Custom Search Engine– Better alternative than site restriction for large # of sites– Enables search of all blogs– All Google Blogs > 100 blogs– Integrates directly with AJAX WebSearch
Building Blocks - Custom Search - www.google.com/cse
![Page 23: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/23.jpg)
23
Building The ApplicationBuilding Blocks - Custom Search - www.google.com/cse
![Page 24: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/24.jpg)
24
Building The Application
• Feed API– Utilize Google Reader’s tag based feeds– Mixed Format (XML and JSON) for tag cloud– FeedControl for HTML generation
• Search API– Blog or Web Search– Customer Search Engine– Why not Blog Search?
• Language API– Detecting non-native languages– Allow translation
Building Blocks - The Google AJAX APIs
![Page 25: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/25.jpg)
25
Building The ApplicationGetting Started - The HTML and CSS
<div id='container' class='container'> <div id='tabs' class='tabs'> <div id='categories' class='tabHeader tabActive'> Categories </div> <div id='blogs' class='tabHeader tabInactive'> Blogs </div> <div id='search' class='tabHeader tabInactive'> Search </div> </div> <div id='tabView' class='tabView'> <div id='tabContentFrame' class='tabContentFrame'></div> </div> <div id='feedView' class='feedView'> <div id='feedContentView' class='feedContentView'></div> </div> <div id='searchView' class='searchView'></div> </div>
![Page 26: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/26.jpg)
26
Building The ApplicationGetting Started - The HTML and CSS
Tabs
TabView
DetailView
Search
![Page 27: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/27.jpg)
27
Building The Application
• Bootstrapping the APIs and the application
Getting Started - The Google AJAX APIs
<script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript">
google.load('feeds', '1'); google.load('search', '1'); google.load('language', '1'); google.setOnLoadCallback(ogbInit);
</script>
![Page 28: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/28.jpg)
28
Building The Application
• Initializing the application
Getting Started - The Google AJAX APIs
function ogbInit() { initData(); hookUI(); bootTagWeights();};
• Boot the top articles over all blogs using Google Reader Tag– Reader tag ‘officialgoogleblogs-all’– Utilize mixed format (XML and JSON) for source identifier– Generate tag weights based on time and number of entries
![Page 29: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/29.jpg)
29
Building The Application
• The top entries for tag cloud generation
The Google AJAX Feed API
function bootTagWeights() { var url = urlFromLabel('officialgoogleblogs-all'); var feed = createFeed(url, google.feeds.Feed.MIXED_FORMAT); feed.load(tagWeightsLoaded);};
function createFeed(url, opt_format) { var format = (opt_format || google.feeds.Feed.JSON_FORMAT); var feed = new google.feeds.Feed(url); feed.setResultFormat(format); feed.setNumEntries(30); return feed;};
![Page 30: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/30.jpg)
30
Building The Application
• tagWeightsLoaded callback
The Google AJAX Feed API
function tagWeightsLoaded(result) {
... // Pull out source from top blog entries.. var ns = 'http://www.w3.org/2005/Atom'; var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { var e = entries[i]; var sns=google.feeds.getElementsByTagNameNS(e.xmlNode,ns,'source'); var ins= google.feeds.getElementsByTagNameNS(sns[0], ns, 'id'); var id = ins[0].firstChild.nodeValue; ... } ...
};
![Page 31: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/31.jpg)
31
Building The Application
• tagWeightsLoaded callback - source
The Google AJAX Feed API
![Page 32: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/32.jpg)
32
Building The ApplicationThe Tag Cloud and Tag selection
TagView
![Page 33: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/33.jpg)
33
Building The Application
• Loading and Displaying the Blog Feeds
The Google AJAX Feed API
function ogbShowFeed(url) { showStatus('Loading...'); var feed = createFeed(url); feed.load(function(result) { feedLoaded(result, url); });};
function feedLoaded(result, url) { var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { feedControl.createHtml(entries[i]); if (entries[i].html) { feedView.appendChild(entries[i].html); } }};
![Page 34: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/34.jpg)
34
Building The Application
• The FeedControl and HTML generation• Change JSON entry into standardized HTML nodes• HTML attached to the JSON entry• Applicable CSS classes
The Google AJAX Feed API - FeedControl
function feedLoaded(result, url) { var entries = result.feed.entries; for (var i=0; i <entries.length; i++) { feedControl.createHtml(entries[i]); if (entries[i].html) { feedView.appendChild(entries[i].html); } }};
![Page 35: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/35.jpg)
35
Building The ApplicationThe Google AJAX Feed API - FeedControl
HTML
![Page 36: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/36.jpg)
36
Building The Application
• Override the default CSS class rules• Base Structure
The Google AJAX Feed API - FeedControl
<!-- One .gf-result per entry -->
<div class="gf-result"> <!-- Hyperlinked Entry Title --> <div class="gf-title"> <a class="gf-title"></a> </div> <!-- Author (Only if entry.author is present --> <div class="gf-author"></div> <!-- Published Date (Only if entry.publishedDate is present --> <div class="gf-relativePublishedDate"></div> <!-- Snippet entry.contentSnippet --> <div class="gf-snippet"></div> </div>
![Page 37: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/37.jpg)
37
Building The Application
• Override the default CSS class rules
The Google AJAX Feed API - FeedControl
#feedContentView .gs-title { text-decoration : none; } #feedContentView .gf-result, #feedContentView .gs-result { padding-bottom : 8px; width : 90%; overflow : hidden; } #feedContentView .gf-title a, #feedContentView .gs-title a { font-size : 16px; color : #DD8800; } #feedContentView .gf-snippet, #feedContentView .gs-snippet { color : #DDDDDD; padding-left : 5px; }
![Page 38: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/38.jpg)
38
Building The ApplicationThe Blogs View
Blogs
![Page 39: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/39.jpg)
39
Building The ApplicationThe Blogs View
• Custom JSON Objects– Maps all blogs to tags– Build view based on all tags and corresponding blogs– Tag selection and blog selection both generate detail view
var blogs = [ { 'id': 'feed/http://feeds.feedburner.com/GoogleAdsenseChinaBlog', 'title': 'AdSense-\u4e2d\u6587', 'alternate': { 'href': 'http://adsense.googlechinablog.com/', 'type': 'text/html' }, tags : ['publishers'] }, ....];
![Page 40: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/40.jpg)
40
Building The ApplicationThe Google AJAX Search API
SearchControl
![Page 41: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/41.jpg)
41
Building The ApplicationThe Google AJAX Search API
// Generate Search Form and Searcher searchForm = new google.search.SearchForm(false, searchView); searchForm.setOnSubmitCallback(null, searchSubmit);
searcher = new google.search.WebSearch(); searcher.setResultSetSize(google.search.Search.LARGE_RESULTSET); searcher.setSiteRestriction('000333901043914979043:yiaplyr6ps0'); searcher.setSearchCompleteCallback(null, searchComplete);
• Search Control– Place into DIV
• Searcher– CSE– searchComplete callback
![Page 42: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/42.jpg)
42
Building The ApplicationThe Search Results View
Search Results
![Page 43: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/43.jpg)
43
Building The ApplicationThe Google AJAX Language API - Translation
Original
![Page 44: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/44.jpg)
44
Building The ApplicationThe Google AJAX Language API - Translation
Translated
![Page 45: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/45.jpg)
45
Building The ApplicationThe Google AJAX Language API - Translation
• Detecting Language– Load feed and then detect language of each entry– If not equal to CurrentLocale, add Translate icon
{feedControl.createHtml(entries[i]);feedView.appendChild(entries[i].html)var cb = detectCallbackFunction(url, i);// Check for translation by detecting snippet google.language.detect(entries[i].contentSnippet, cb);
}
function detectCallback(result, url, i) { var entry = feedView.entries[i]; if (result.language != google.language.CurrentLocale) { log('Entry can be translated');
addTranslateIcon(entry); }};
![Page 46: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/46.jpg)
46
Building The ApplicationThe Google AJAX Language API - Translation
• Translating an entry– Translate icon triggers translation of title and snippet– Callback will replace contents appropriately– Icon will toggle back and forth
function processTranslation(index, elementId, result) { // Grab the correct item and replace.. var entry = feedView.childNodes[index]; var node; if (elementId == 'title') { node = entry.title(); } else { node = entry.snippet(); } node.innerHTML = result.translation;};
![Page 47: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/47.jpg)
47
Building The iGoogle GadgetiGoogle Gadget
![Page 48: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/48.jpg)
48
Building The iGoogle GadgetThe template
<?xml version="1.0" encoding="UTF-8" ?><Module> <ModulePrefs title="All Google Blogs" directory_title="All Google Blogs" title_url="http://googleblog.blogspot.com" author="Derek C." author_affiliation="Google" author_location="Bay Area, CA" author_email="[email protected]" scrolling="false" category="tools" height="450" > </ModulePrefs><Content type="html"> <![CDATA[ <<HTML version inserted here>>]]></Content></Module>
![Page 49: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/49.jpg)
49
Building The iGoogle GadgetAssets and absolute paths
• All iGoogle gadgets run through intermediary hosts– gmodules.com– Assets, like backgrounds and images and JS files, need to be
accessible..container { width:360px; height:450px; margin-top : 5px; margin-left : auto; margin-right : auto; position:relative;
background:transparent url(background.png); ==>
background:transparent url (http://foo.com/googleio/background.png);}
![Page 50: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/50.jpg)
Reference
• General Documentation– http://code.google.com/apis/ajaxsearch– http://code.google.com/apis/ajaxfeeds– http://code.google.com/apis/ajaxlanguage
• FeedControl– http://code.google.com/apis/ajaxfeeds/documentation/
reference.html#FeedControl
• Development Tools– Firebug
• http://getfirebug.com
– Firebug Tutorial• http://code.google.com/support/bin/answer.py?
answer=94630&topic=11530
50
![Page 51: Advanced Gadget and UI Development Using Google's AJAX APIs](https://reader034.fdocuments.net/reader034/viewer/2022051322/5466f9b2af795997368b5344/html5/thumbnails/51.jpg)