Widget Examples‎ > ‎

Slide Show



Develop a Slideshow Widget from Google Playground Sample. 

Generating Code with Google Playground

Copy source code from Google Code Playground. 

Google Playground>>Feed>>Slideshow of Photo Feed



<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Slideshow</title>
    <!-- Scripts for the slideshow -->
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
            type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
width:  250px;
        height200px;
        margin-bottom40px;
        padding5px;
      }
    </style>
    <script type="text/javascript">
    /*
    *  How to make a slideshow with a photo feed using our custom control.
    *  To see the options, go here or click the docs link in the titlebar:
    *  http://www.google.com/uds/solutions/slideshow/index.html
    */
    
    google.load("feeds""1");
    
    function OnLoad({
      var feed  "http://dlc0421.googlepages.com/gfss.rss";
      var options {
        displayTime:2000,
        transistionTime:600,
        scaleImages:true,
        fullControlPanel true
      };
      var ss new GFslideShow(feed"picasaSlideshow"options);
    }
    
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial, sans-serif;border: 0 none;">
  <div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
  </body>
</html> 



Create a new project

Choose File >>New>>Project under eclipse menu.
Then from the New Project Dialog, Select Droidget Wizard>>Project
Fill necessary fields including project name..etc.. 

Also it is required to set the access permission for following URLs to access google feeds from widget. 
For this, Click on Add in the Access section in project creation wizard and add the URLs.
http://google.com/
http://dlc0421.googlepages.com/

and Click Finish

Project with the given name will appear in the Eclipse project explorer.












After finished creating project, access permission <access uri="http://google.com/" subdomains="true"/> ,
<access uri="http://dlc0421.googlepages.com"/> will be appeared in the config.xml file as follows.

<?xml version="1.0" encoding="UTF-8"?>
<widget id="PhotoSample_1279489457855" version="1.0" width="280" height="230">
    <content src="index.html" type="text/html"/>
    <name>Slideshow</name>
    <description>The sample of Slideshow</description>
    <author url="http://www.gclue.jp">GClue</author>
    <icon src="icon.png"/>
    <license></license>
    <access uri="http://google.com/" subdomains="true"/>
    <access uri="http://dlc0421.googlepages.com/" />
</widget>

Edit index.html

Copy source code from Google Playground which describes at first. 


index.html
<!--
  copyright (c) 2009 Google inc.

  You are free to copy and use this sample.
  License can be found here: http://code.google.com/apis/ajaxsearch/faq/#license
-->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>Slideshow</title>
    <!-- Scripts for the slideshow -->
    <script src="http://www.google.com/jsapi" type="text/javascript"></script>
    <script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js"
            type="text/javascript"></script>
    <style type="text/css">
      #picasaSlideshow {
        width:  250px;
        height200px;
        margin-bottom40px;
        padding5px;
      }
    </style>
    <script type="text/javascript">
    /*
    *  How to make a slideshow with a photo feed using our custom control.
    *  To see the options, go here or click the docs link in the titlebar:
    *  http://www.google.com/uds/solutions/slideshow/index.html
    */
    
    google.load("feeds""1");
    
    function OnLoad({
      var feed  "http://dlc0421.googlepages.com/gfss.rss";
      var options {
        displayTime:2000,
        transistionTime:600,
        scaleImages:true,
        fullControlPanel true
      };
      var ss new GFslideShow(feed"picasaSlideshow"options);
    }
    
    google.setOnLoadCallback(OnLoad);
    </script>
  </head>
  <body style="font-family: Arial, sans-serif;border: 0 none;">
  <div id="picasaSlideshow" class="gslideshow"><div class="feed-loading">Loading...</div></div>
  </body>
</html>


Deploy the Widget

Now save and deploy the project
  • From the eclipse menu select Droidget --> packaging
  • Then Droidget-->install packaging
Or 
  • upload the Widget to web server and update the download.html file as follows. Then access the download.html from the smart phone and install the widget from URI.

Download.html
<html>
<head>
    <title>Download</title>
</head>
<body>
    <a href="droidget://www.example.com/PhotoSample.wgt">MapSample</a><br>
</body>
</html>

Preview

Comments