1 fullpage=true 2 page.title=Develop 3 header.hide=1 4 carousel=1 5 tabbedList=1 6 @jd:body 7 8 <style> 9 #noplayer-message { 10 position: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® 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> 26 27 28 <div class="wrap"> 29 <!-- Slideshow --> 30 <div class="slideshow-container slideshow-develop col-16"> 31 <a href="" class="slideshow-prev">Prev</a> 32 <a href="" class="slideshow-next">Next</a> 33 <div class="frame"> 34 <ul> 35 <li class="item carousel-home"> 36 <div class="col-8"> 37 <img 38 src="http://4.bp.blogspot.com/-g05If_eKKRQ/UAcrVLI-OYI/AAAAAAAAAr8/AWvunVb5S-w/s320/nexus7.png" 39 class="play no-shadow no-transform" /> 40 </div> 41 <div class="content-right col-6"> 42 <p class="title-intro">From the blog:</p> 43 <h2>Getting Your App Ready for Jelly Bean and Nexus 7</h2> 44 <p>For many people, their first taste of Jelly Bean will be on the beautiful 45 Nexus 7. While most applications will run just fine on Nexus 7, who wants 46 their app to be just fine? Here are some tips for optimizing your application 47 to make the most of this device.</p> 48 <p><a 49 href="http://android-developers.blogspot.com/2012/07/getting-your-app-ready-for-jelly-bean.html" class="button">Read 50 more</a></p> 51 </div> 52 </li> 53 <li class="item carousel-home"> 54 <div class="col-8"> 55 <img 56 src="http://1.bp.blogspot.com/-6qyjPxTuzv0/T6lde-Oq_fI/AAAAAAAABXc/zle7OFEGP44/s400/fddns%2Bcopy.png" 57 class="play no-shadow no-transform" /> 58 </div> 59 <div class="content-right col-6"> 60 <p class="title-intro">From the blog:</p> 61 <h2>Using DialogFragments</h2> 62 <p>In this post, I'll show how to use DialogFragments with the <a 63 href="http://developer.android.com/reference/android/support/v4/app/DialogFragment.html">v4 support 64 library</a> (for backward compatibility on pre-Honeycomb devices) to show a simple edit dialog and 65 return a result to the calling Activity using an interface.</p> 66 <p><a 67 href="http://android-developers.blogspot.com/2012/05/using-dialogfragments.html" class="button">Read 68 more</a></p> 69 </div> 70 </li> 71 <li class="item carousel-home"> 72 <div class="col-8"> 73 <img 74 src="http://1.bp.blogspot.com/-6K1kfNOdek8/T72bXvtTSQI/AAAAAAAABmw/kYzmJt0_328/s1600/google-play-subscriptions.png" class="play"></div> 75 <div class="content-right col-6"> 76 <p class="title-intro">From the blog:</p> 77 <h2>In-app Subscriptions in Google Play</h2> 78 <p>Starting today, developers can use In-app Billing to sell monthly or annual 79 subscriptions from inside of their apps. All subscriptions are auto-renewing, for every app and game 80 and every type of subscription product.</p> 81 <p><a class="button" 82 href="http://android-developers.blogspot.com/2012/05/in-app-subscriptions-in-google-play.html">Read 83 more</a></p> 84 </div> 85 </li> 86 <li class="item carousel-home"> 87 <div class="col-8"> 88 <img 89 src="{@docRoot}images/home/developers_live.png" class="play"></div> 90 <div class="content-right col-6"> 91 <h2>Learn what great apps are made of</h2> 92 <p>Every week we host a live broadcast in which we review a collection of apps and games 93 nominated by the creators. It's no-holds-barred and we tell you exactly what is flawed or 94 fantastic in each app and how to make improvements.</p> 95 <p><a href="" class="button" onclick="$('ul#DevelopersLive li:first 96 a').click();return false;">Watch the latest review</a></p> 97 </div> 98 </li> 99 </ul> 100 </div> 101 </div> 102 <!-- /End slideshow --> 103 </div> 104 <div class="wrap"> 105 <!-- news and feature feed --> 106 <div class="feed col-8" style="margin-left:0"> 107 <ul class="feed-nav"> 108 <li class="active">DEVELOPER NEWS</li> 109 <li>FEATURED DOCS</li> 110 </ul> 111 <div class="feed-container"> 112 <div class="feed-frame"> 113 <!-- DEVELOPER NEWS --> 114 <ul> 115 <li><a href="http://android-developers.blogspot.com/2012/06/android-sdk-tools-revision-20.html"> 116 <div class="feed-image" style="background:url('http://1.bp.blogspot.com/-Kp1qE5du6l8/T-xurIjfPgI/AAAAAAAABAM/kuWQwPgi0rw/s640/newactivity+(1).png') no-repeat 0 0"> 117 </div> 118 <h4>Android SDK Tools, Revision 20</h4> 119 <p>Along with the preview of the Android 4.1 (Jelly Bean) platform, we launched Android SDK Tools R20 and ADT 20.0.0. Here are a few things...</p> 120 </a></li> 121 <li><a href="http://android-developers.blogspot.com/2012/04/faster-emulator-with-better-hardware.html"> 122 <div class="feed-image" style="background:url('../images/emulator-wvga800l.png') no-repeat 0 0"> 123 </div> 124 <h4>A Faster Emulator with Better...</h4> 125 <p>Today were thrilled to announce several significant improvements to the emulator, including a dramatic...</p> 126 </a></li> 127 <li><a href="http://android-developers.blogspot.com/2012/04/android-c2dm-client-login-key.html"> 128 <div class="feed-image" style="background:url('../images/develop/auth-code.png') no-repeat 0 0"> 129 </div> 130 <h4>Android C2DM Client Login key...</h4> 131 <p>In the upcoming weeks, some of the older Client 132 Login authentication keys will expire. If you generated the token youre...</p> 133 </a></li> 134 <li><a href="http://android-developers.blogspot.com/2012/04/accessibility-are-you-serving-all-your.html"> 135 <div class="feed-image"> 136 </div> 137 <h4>Accessibility</h4> 138 <p>We recently published some new resources to help developers make their Android applications more accessible... </p> 139 </a></li> 140 141 </ul> 142 <!-- FEATURED DOCS --> 143 <ul> 144 <li><a href="{@docRoot}guide/google/play/billing/index.html"> 145 <h4>Google Play In-app Billing</h4> 146 <p>In-app Billing is a Google Play service that lets you sell digital content from inside your applications. You can sell products as standard in-app products (one-time purchase) or with subscriptions (recurring...</p> 147 </a></li> 148 <li><a href="{@docRoot}guide/topics/providers/contacts-provider.html"> 149 <h4>Contacts Provider</h4> 150 <p>The Contacts Provider is a powerful and flexible Android component that manages the device's central repository of data about people. You can use it to build powerful social features...</p> 151 </a></li> 152 <li><a href="{@docRoot}training/efficient-downloads/index.html"> 153 <h4>Transferring Data Without Draining the Battery</h4> 154 <p>This training class demonstrates the best practices for scheduling and executing downloads using techniques such as caching, polling, and prefetching.</p> 155 </a></li> 156 <li><a href="{@docRoot}training/backward-compatible-ui/index.html"> 157 <h4>Creating Backward-Compatible UIs</h4> 158 <p>This training class demonstrates how to use UI components and APIs available in newer versions of Android in a backward-compatible way, ensuring that your application still runs on previous versions...</p> 159 </a></li> 160 </ul> 161 </div> 162 </div> 163 </div> <!-- /news and feature feed --> 164 <!-- video feed --> 165 <div class="feed col-8" style="margin-right:0"> 166 <ul class="feed-nav"> 167 <li class="active">DEVELOPERS LIVE</li> 168 <li>VIDEO PLAYLISTS</li> 169 </ul> 170 <div class="feed-container"> 171 <div class="feed-frame"> 172 <ul id="DevelopersLive"> 173 </ul> 174 <ul id="VideoPlaylists"> 175 </ul> 176 </div> 177 </div> 178 </div> 179 <!-- /video feed --> 180 </div> 181 182 <br class="clearfix"/> 183 184 185 186 187 188 189 190 191 192 193 <script src="//swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js" type="text/javascript"></script> 194 <script type="text/javascript"> 195 196 /* Load a video into the player box. 197 * @param id The YouTube video ID 198 * @param title The video title to display in the player box (character escaped) 199 * @param autoplay Whether to automatically play the video 200 */ 201 function loadVideo(id, title, autoplay) { 202 swfobject.embedSWF('//www.youtube.com/v/' + id + '&rel=1&border=0&fs=1&autoplay=' + 203 (autoplay?1:0), 'player', '525', '330', '9.0.0', false, false, {allowfullscreen: 'true'}); 204 $("#videoPlayerTitle").html("<h2>" + unescape(title) + "</h2>"); 205 $("#player-wrapper").show(); 206 setTimeout(function(){$('#noplayer-message').show()}, 2000); 207 } 208 209 /* Draw all videos from a playlist into a 'videoPreviews' list 210 * @param data The feed data returned from the youtube request 211 */ 212 function renderVideoPlaylists(data) { 213 var MAX_LIST_DESC_LENGTH = 130; // the length at which we will trim the description 214 var MAX_VIDEO_DESC_LENGTH = 100; // the length at which we will trim the description 215 var MAX_LIST_LENGTH = 4; // number of videos to put in the list 216 var feed = data.feed; 217 var entries = feed.entry || []; 218 var playlistId = feed.yt$playlistId.$t; 219 220 var $ulVideos = $('<ul style="display:none"/>'); 221 var summary = feed.media$group.media$description != null ? feed.media$group.media$description.$t : feed.subtitle.$t; 222 223 var $liPlaylist = $('<li class="playlist"></li>'); 224 var $aPlaylist = $('<a href="" onclick="togglePlaylist(this);return false;"></a>'); 225 $liPlaylist.append($aPlaylist); 226 $aPlaylist.append('<h4>' + feed.title.$t + '</h4>'); 227 228 var playlistDescription = summary.substr(0, MAX_LIST_DESC_LENGTH); 229 playlistDescription += playlistDescription.length == MAX_LIST_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 230 $aPlaylist.append('<p>' + playlistDescription + '</p>'); 231 232 // Loop through each entry (each video) and add it to the 'videoPreviews' list 233 var length = feed.entry.length < MAX_LIST_LENGTH ? feed.entry.length : MAX_LIST_LENGTH; // max of 4 videos per list 234 for (var i = 0; i < length; i++) { 235 var entry = entries[i]; 236 237 var title = entry.title.$t; 238 var id = entry.media$group.yt$videoid.$t; 239 var thumbUrl = entry.media$group.media$thumbnail[0].url; 240 var fullDescription = entry.media$group.media$description.$t; 241 var playerUrl = entry.media$group.media$content[0].url; 242 243 var shortDescription = fullDescription.substr(0, MAX_VIDEO_DESC_LENGTH); 244 shortDescription += shortDescription.length == MAX_VIDEO_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 245 246 var img = $('<img src="' + thumbUrl + '" width="60" height="45"/>'); 247 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 248 var pShortDescription = $('<p>' + shortDescription + '</p>'); 249 var h5Title = "<h5>" + title + "</h5>"; 250 var li = $('<li class="playlist-video"/>'); 251 252 li.append(a); 253 a.append(img).append(h5Title).append(pShortDescription); 254 255 $ulVideos.append(li); 256 257 // use the first entry's thumbnail for the playlist 258 if (i == 0) { 259 $aPlaylist.prepend('<img src="' + thumbUrl + '" width="120" height="90"/>'); 260 } 261 } 262 263 if (feed.entry.length > MAX_LIST_LENGTH) { 264 // add item to go to youtube for playlist 265 $ulVideos.append('<li class="more"><a href="//www.youtube.com/playlist?list=PL' + playlistId + '">More »</a></li>'); 266 } 267 268 $liPlaylist.append($ulVideos); 269 $('#VideoPlaylists').append($liPlaylist); 270 } 271 272 273 function renderDevelopersLivePlaylist(data) { 274 275 var MAX_DESC_LENGTH = 125; // the length at which we will trim the description 276 var feed = data.feed; 277 var entries = feed.entry || []; 278 var playlistId = feed.yt$playlistId.$t; 279 280 var ul = $('#DevelopersLive'); 281 282 // Loop through each entry (each video) and add it to the '#DevelopersLive' list 283 for (var i = 0; i < 4; i++) { 284 var entry = entries[i]; 285 286 var title = entry.title.$t; 287 var id = entry.media$group.yt$videoid.$t; 288 var thumbUrl = entry.media$group.media$thumbnail[0].url; 289 var fullDescription = entry.media$group.media$description.$t; 290 var playerUrl = entry.media$group.media$content[0].url; 291 var shortDescription = fullDescription.substr(0, MAX_DESC_LENGTH); 292 shortDescription += shortDescription.length == MAX_DESC_LENGTH ? "..." : ""; // add ellipsis if we've chopped the description 293 294 var img = $('<img src="' + thumbUrl + '" width="120" height="90"/>'); 295 var a = $('<a href="#" onclick="loadVideo(\'' + id + '\',\'' + escape(title) + '\',true); return false;" />'); 296 var pShortDescription = $('<p>' + shortDescription + '</p>'); 297 var h4Title = "<h4>" + title + "</h4>"; 298 var li = $('<li/>'); 299 300 li.append(a); 301 a.append(img).append(h4Title).append(pShortDescription); 302 303 ul.append(li); 304 } 305 } 306 307 308 309 /* This 'playlist' object defines the playlist IDs for each tab. 310 * Each name inside 'playlist' corresponds to class names for the tab that the playlists belong to (eg: "googleioTab" and "googleioBox" divs). 311 * Each string in 'ids' is the ID of a YouTube playlist that belongs in the corresponding tab. 312 */ 313 var playlists = { 314 'googleio' : { 315 'ids': ["4C6BCDE45E05F49E"] 316 }, 317 'fridayreview' : { 318 'ids': ["B7B9B23D864A55C3"] 319 }, 320 'officehours' : { 321 'ids': ["7383D9AADA6E6D55"] 322 }, 323 'about' : { 324 'ids': ["D7C64411AF40DEA5"] 325 } 326 }; 327 328 /* Request the playlist feeds from YouTube */ 329 function showVideosPlaylists() { 330 for (var x in playlists) { 331 var ids = playlists[x].ids; 332 for (var i in ids) { 333 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 334 + ids[i] + 335 "?v=2&alt=json-in-script&max-results=50&callback=renderVideoPlaylists&orderby=published'><\/script>"; 336 $("body").append(script); 337 } 338 } 339 } 340 341 342 /* Request the playlist feeds from YouTube */ 343 function showDevelopersLivePlaylist() { 344 var playlistId = "B7B9B23D864A55C3"; /* The Friday Review */ 345 var script = "<script type='text/javascript' src='//gdata.youtube.com/feeds/api/playlists/" 346 + playlistId + 347 "?v=2&alt=json-in-script&max-results=10&callback=renderDevelopersLivePlaylist&orderby=published'><\/script > "; 348 $("body").append(script); 349 } 350 351 352 function togglePlaylist(listLink) { 353 var $list = $(listLink).parent(); 354 var $ul = $list.find('ul'); 355 if ($ul.is(":visible")) { 356 $ul.slideUp(function() { 357 $list.css({'height':'inherit'}); 358 }); 359 } else { 360 $list.closest('ul').find('li.playlist').find('ul').slideUp(); 361 $ul.slideDown(); 362 $list.css({'height':'auto'}); 363 } 364 } 365 366 showDevelopersLivePlaylist(); 367 showVideosPlaylists(); 368 </script>
