blob: 153ebcbf9f73f5668471b169f5013190958e23b7 [file] [log] [blame]
Scott Main50e990c2012-06-21 17:14:39 -07001fullpage=true
2page.title=Develop
3header.hide=1
4carousel=1
5tabbedList=1
6@jd:body
7
8<style>
9#noplayer-message {
10position:absolute;top:50%;left:0;width:100%;z-index:-1;text-align:center;display:none;
11}
12#player-frame object {z-index:1;}
13</style>
14
15<div id="player-wrapper">
16 <div id="player-frame">
17 <div id="noplayer-message">
18 <!-- busted flash player message -->
19 Your video is supposed to appear here.<br/>
20 Make sure you have the <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash&reg; Player</a>.
21 </div>
22 <div id="player"><!-- Youtube embeds here... actually replaces this div --></div>
23 <a class="close" onclick="$('#player-wrapper').hide()">close video</a>
24 </div>
25</div>
Scott Main50e990c2012-06-21 17:14:39 -070026<div class="wrap">
27 <!-- Slideshow -->
28 <div class="slideshow-container slideshow-develop col-16">
29 <a href="" class="slideshow-prev">Prev</a>
30 <a href="" class="slideshow-next">Next</a>
31 <div class="frame">
32 <ul>
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070033 <li class="item carousel-home">
34 <div class="col-8">
Scott Main9748abb2012-11-29 14:28:44 -080035 <img src="{@docRoot}images/google/maps-v2-trulia-n7.png"
36class="play no-shadow no-transform" style="margin:0 0 0 40px;max-height:250px;height:250px;
Scott Mainb74844c2012-11-29 21:13:30 -080037 max-width:409px;width:409px" />
Scott Main9748abb2012-11-29 14:28:44 -080038 </div>
39 <div class="content-right col-6" style="width:350px">
40 <h2>New MapView APIs!</h2>
41 <p>Google Maps Android API version 2 is now available with enhanced
42 features such as 3D buildings, vector-based map tiles, rich overlay capabilities,
43 indoor maps, support for fragments, and much more.</p>
44
45 <p>The APIs are bundled with Google Play services and are
46 compatible with Android 2.2 and higher.</p>
47 <p><a
48href="{@docRoot}google/play-services/maps.html" class="button">Read more</a></p>
49 </div>
50 </li>
51 <li class="item carousel-home">
52 <div class="col-8">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070053 <img
54src="http://4.bp.blogspot.com/-lfjzgG5Dqrk/UHMThRtpRwI/AAAAAAAABpk/h4d3nsmkgPM/s400/mint.png"
55class="play no-shadow no-transform" />
56 </div>
57 <div class="content-right col-6">
58 <h2>Building Great Apps for Tablets</h2>
59 <p>Tablets are a growing part of the Android installed base and they offer new opportunities for user engagement and monetization. If you are targeting tablets, check out the <strong>Tablet App Quality Checklist</strong> for tips and techniques on how to deliver a great app experience for tablet users. </p>
60 <p><a
61href="/distribute/googleplay/quality/tablet.html" class="button">Read
62more</a></p>
63 </div>
64 </li>
65 <li class="item carousel-home">
66 <div class="col-8">
67 <img
68src="http://1.bp.blogspot.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div>
69 <div class="content-right col-6">
70 <h2>In-app Subscriptions with Trials</h2>
71 <p>You can now set up a <strong>free trial period</strong> for any Google Play in-app subscription, making it easy for users try your subscriber content before automatically converting to a full subscription. Free trials give you a new way to bring users into your products and engage them effectively. </p>
72 <p><a class="button"
Dirk Dougherty2b286bb2012-11-29 17:25:09 -080073href="{@docRoot}google/play/billing/billing_subscriptions.html#trials">Read
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -070074more</a></p>
75 </div>
76 </li>
77 <li class="item carousel-home">
78 <div class="col-8">
79 <img
80src="http://2.bp.blogspot.com/-MgN5DnoO5XU/UHYGYzTcAOI/AAAAAAAABs4/jTS7sKkfBcM/s1600/pubsites.png" class="play"></div>
81 <div class="content-right col-6">
82 <p class="title-intro">From the blog:</p>
83 <h2>New Google Play Developer Console</h2>
84 <p>All developers can now try the <strong>new Google Play Developer Console</strong>. With a streamlined publishing flow, new language options, and new user ratings statistics, you’ll have better tools for delivering great Android apps that delight users.</p>
85 <p><a
86href="http://android-developers.blogspot.com/2012/10/new-google-play-developer-console.html" class="button">Read
87more</a></p>
88 </div>
89 </li>
Scott Main50e990c2012-06-21 17:14:39 -070090 <li class="item carousel-home">
91 <div class="col-8">
92 <img
Scott Main67922bb2012-07-23 14:33:42 -070093src="http://4.bp.blogspot.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png"
94class="play no-shadow no-transform" />
95 </div>
96 <div class="content-right col-6">
97 <p class="title-intro">From the blog:</p>
98 <h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2>
99 <p>For many people, their first taste of Jelly Bean will be on the beautiful
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700100 <strong>Nexus 7 tablet</strong>. Most applications will run just fine on Nexus 7, but who wants
101 their app to be just fine? Here are some tips for optimizing your app
Scott Main67922bb2012-07-23 14:33:42 -0700102 to make the most of this device.</p>
103 <p><a
104href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read
105more</a></p>
106 </div>
107 </li>
Scott Main50e990c2012-06-21 17:14:39 -0700108 </ul>
109 </div>
110 </div>
111 <!-- /End slideshow -->
112</div>
113<div class="wrap">
114 <!-- news and feature feed -->
115 <div class="feed col-8" style="margin-left:0">
116 <ul class="feed-nav">
117 <li class="active">DEVELOPER NEWS</li>
118 <li>FEATURED DOCS</li>
119 </ul>
120 <div class="feed-container">
121 <div class="feed-frame">
122 <!-- DEVELOPER NEWS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700123 <ul>
124 <li><a href="http://android-developers.blogspot.com/2012/10/google-play-seller-support-in-india.html">
125 <div class="feed-image" style="background:url('http://4.bp.blogspot.com/-ekT-9XQi0YY/UH7WT2XjSdI/AAAAAAAABwc/fI5QaPi7QEk/s320/india-apps1.png') no-repeat 0 0"></div>
126 <h4>Google Play Seller Support in India</h4>
127 <p>Developers in India can sell paid applications, in-app products, and subscriptions in Google Play, with monthly payouts to their local bank accounts...</p>
128 </a></li>
129 <li><a href="http://android-developers.blogspot.com/2012/09/google-play-services-and-oauth-identity.html">
130 <div class="feed-image" style="background:url('https://lh4.ggpht.com/7z4NItEg-X21zvFGAarKonk-VaysBYthJ30u1JjaQ0-5fjyHNawnmoNeG--4FCACog=w124') no-repeat 0 0"></div>
131 <h4>Google Play services and OAuth Tools</h4>
132 <p>The rollout of Google Play services to all Android 2.2+ devices worldwide is now complete, and all of those devices now have new tools for working with OAuth 2.0 tokens...</p>
133 </a></li>
134 <li><a href="http://android-developers.blogspot.com/2012/08/creating-your-own-spelling-checker.html">
135 <div class="feed-image" style="background:url('http://2.bp.blogspot.com/-QKlztEdM1aA/UC1bH6Kv4UI/AAAAAAAAADo/fQS8-EfBYIQ/s320/spell-check-framed-new.png') no-repeat 0 0"></div>
136 <h4>Creating A Spelling Checker Service</h4>
137 <p>If you are an IME developer, the Spelling Checker framework gives you a great way to provide an even better experience for your users...</p>
138 </a></li>
139 <li><a href="http://android-developers.blogspot.com/2012/04/accessibility-are-you-serving-all-your.html">
140 <div class="feed-image"></div>
141 <h4>Accessibility</h4>
142 <p>We recently published some new resources to help developers make their Android applications more accessible... </p>
143 </a></li>
144 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700145 <!-- FEATURED DOCS -->
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700146 <ul>
147 <li><a href="{@docRoot}distribute/googleplay/spotlight/tablets.html">
148 <h4>Tablet Stories</h4>
149 <p>More developers are investing in a full tablet experience for their apps. Here are some stories from developers who are seeing real results as they expand their offering to include Android tablets. </p>
150 </a></li>
151 <li><a href="{@docRoot}distribute/googleplay/quality/core.html">
152 <h4>Core App Quality Guidelines</h4>
153 <p>This document helps you assess basic aspects of quality in your app through a compact set of core app quality criteria and associated tests. All Android apps should meet these criteria.</p>
154 </a></li>
155 <li><a href="{@docRoot}guide/topics/ui/notifiers/notifications.html">
156 <h4>Updated Notifications API Guide</h4>
157 <p>The Notifications API Guide is updated to include information about building Jelly Bean rich notifications using the Support Library APIs for backwards-compatibility.</p>
158 </a></li>
159 <li><a href="{@docRoot}guide/topics/ui/dialogs.html">
160 <h4>Updated Dialogs API Guide</h4>
161 <p>The Dialogs API Guide now shows to use DialogFragment class, a simpler way to manage your dialogs and embed them in alternative layouts.</p>
162 </a></li>
163 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700164 </div>
165 </div>
166 </div> <!-- /news and feature feed -->
167 <!-- video feed -->
168 <div class="feed col-8" style="margin-right:0">
169 <ul class="feed-nav">
170 <li class="active">DEVELOPERS LIVE</li>
171 <li>VIDEO PLAYLISTS</li>
172 </ul>
173 <div class="feed-container">
174 <div class="feed-frame">
Dirk Dougherty76cdbdc2012-10-22 21:30:29 -0700175 <ul id="DevelopersLive">
176 </ul>
177 <ul id="VideoPlaylists">
178 </ul>
Scott Main50e990c2012-06-21 17:14:39 -0700179 </div>
180 </div>
181 </div>
182 <!-- /video feed -->
183</div>
184
185<br class="clearfix"/>
Scott Main50e990c2012-06-21 17:14:39 -0700186
187
188
189
190
191
192
193
194
195
196<script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script>
197<script type="text/javascript">
198
199/* Load a video into the player box.
200 * @param id The YouTube video ID
201 * @param title The video title to display in the player box (character escaped)
202 * @param autoplay Whether to automatically play the video
203 */
204function loadVideo(id, title, autoplay) {
205 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' +
206 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'});
207 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>");
208 $("#player-wrapper").show();
209 setTimeout(function(){$('#noplayer-message').show()}, 2000);
210}
211
212/* Draw all videos from a playlist into a 'videoPreviews' list
213 * @param data The feed data returned from the youtube request
214 */
215function renderVideoPlaylists(data) {
216 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description
217 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description
218 var MAX_LIST_LENGTH = 4; // number of videos to put in the list
219 var feed = data.feed;
220 var entries = feed.entry || [];
221 var playlistId = feed.yt$playlistId.$t;
222
223 var $ulVideos = $('<ul style="display:none"/>');
224 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t;
225
226 var $liPlaylist = $('<li class="playlist"></li>');
227 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>');
228 $liPlaylist.append($aPlaylist);
229 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>');
230
231 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH);
232 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
233 $aPlaylist.append('<p>' + playlistDescription + '</p>');
234
235 // Loop through each entry (each video) and add it to the 'videoPreviews' list
236 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list
237 for (var i = 0; i < length; i++) {
238 var entry = entries[i];
239
240 var title = entry.title.$t;
241 var id = entry.media$group.yt$videoid.$t;
242 var thumbUrl = entry.media$group.media$thumbnail[0].url;
243 var fullDescription = entry.media$group.media$description.$t;
244 var playerUrl = entry.media$group.media$content[0].url;
245
246 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH);
247 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
248
249 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>');
250 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
251 var pShortDescription = $('<p>' + shortDescription + '</p>');
252 var h5Title = "<h5>" + title + "</h5>";
253 var li = $('<li class="playlist-video"/>');
254
255 li.append(a);
256 a.append(img).append(h5Title).append(pShortDescription);
257
258 $ulVideos.append(li);
259
260 // use the first entry's thumbnail for the playlist
261 if (i == 0) {
262 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>');
263 }
264 }
265
266 if (feed.entry.length > MAX_LIST_LENGTH) {
267 // add item to go to youtube for playlist
268 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More &raquo;</a></li>');
269 }
270
271 $liPlaylist.append($ulVideos);
272 $('#VideoPlaylists').append($liPlaylist);
273}
274
275
276function renderDevelopersLivePlaylist(data) {
277
278 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description
279 var feed = data.feed;
280 var entries = feed.entry || [];
281 var playlistId = feed.yt$playlistId.$t;
282
283 var ul = $('#DevelopersLive');
284
285 // Loop through each entry (each video) and add it to the '#DevelopersLive' list
286 for (var i = 0; i < 4; i++) {
287 var entry = entries[i];
288
289 var title = entry.title.$t;
290 var id = entry.media$group.yt$videoid.$t;
291 var thumbUrl = entry.media$group.media$thumbnail[0].url;
292 var fullDescription = entry.media$group.media$description.$t;
293 var playerUrl = entry.media$group.media$content[0].url;
294 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH);
295 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description
296
297 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>');
298 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />');
299 var pShortDescription = $('<p>' + shortDescription + '</p>');
300 var h4Title = "<h4>" + title + "</h4>";
301 var li = $('<li/>');
302
303 li.append(a);
304 a.append(img).append(h4Title).append(pShortDescription);
305
306 ul.append(li);
307 }
308}
309
310
311
312/* This 'playlist' object defines the playlist IDs for each tab.
313 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs).
314 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab.
315 */
316var playlists = {
Scott Mainbce26802012-11-15 10:26:40 -0800317 'designinaction' : {
318 'ids': ["PLWz5rJ2EKKc8j2B95zGMb8muZvrIy-wcF"]
Scott Main50e990c2012-06-21 17:14:39 -0700319 },
320 'about' : {
Scott Mainbce26802012-11-15 10:26:40 -0800321 'ids': ["PL611F8C5DBF49CEC6"]
322 },
323 'developersstrikeback' : {
324 'ids': ["PLWz5rJ2EKKc8nhhIOieejm1PxYHmPkIPh"]
325 },
326 'googleio' : {
327 'ids': ["PL4C6BCDE45E05F49E"]
Scott Main50e990c2012-06-21 17:14:39 -0700328 }
329};
330
331/* Request the playlist feeds from YouTube */
332function showVideosPlaylists() {
333 for (var x in playlists) {
334 var ids = playlists[x].ids;
335 for (var i in ids) {
336 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
337 + ids[i] +
338 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>";
339 $("body").append(script);
340 }
341 }
342}
343
344
345/* Request the playlist feeds from YouTube */
346function showDevelopersLivePlaylist() {
Scott Mainbce26802012-11-15 10:26:40 -0800347 var playlistId = "PLB7B9B23D864A55C3"; /* The App Clinic */
Scott Main50e990c2012-06-21 17:14:39 -0700348 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/"
349 + playlistId +
350 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > ";
351 $("body").append(script);
352}
353
354
355function togglePlaylist(listLink) {
356 var $list = $(listLink).parent();
357 var $ul = $list.find('ul');
358 if ($ul.is(":visible")) {
359 $ul.slideUp(function() {
360 $list.css({'height':'inherit'});
361 });
362 } else {
363 $list.closest('ul').find('li.playlist').find('ul').slideUp();
364 $ul.slideDown();
365 $list.css({'height':'auto'});
366 }
367}
368
369showDevelopersLivePlaylist();
370showVideosPlaylists();
Dirk Dougherty49be1ef2012-11-29 21:11:24 -0800371</script>