The Flickr® and Picasa® connectors allow you to create client applications displaying photos from Flickr® or Google Picasa® web albums. Images may be presented on a standard XDIME page, or by the Gallery widget on devices that support the Client Framework 1 widgets. Once a mobile site is published, the user can upload images to a Flickr or Picasa feed, and the mobile website will then display the newly uploaded images from the specified feed.
The Flickr® and Picasa® connectors allow you to create client applications displaying photos from Flickr® or Google Picasa® web albums. Images may be presented on a standard XDIME page, or by the Gallery widget on devices that support the Client Framework 1 widgets. Once a mobile site is published, the user can upload images to a Flickr or Picasa feed, and the mobile website will then display the newly uploaded images from the specified feed.
The picasa:list-photos element retrieves photos from Google Picasa web albums. Its user-id attribute allows authors to display images or albums that belong to the selected user. The album and album-id attributes specify an album by the name or ID. You may also display a single image from the selected album using photo-id. The tags attribute may contain a space separated list of tags. Only the images with specified tags will be displayed on an XDIME page. Finally, the query attribute allows you to search images by an arbitrary string. If specified, then only the photos that contain defined string in either their title, or one of their tags will be returned.
As the number of returned photos may be large, the response is paginated, i.e. split into pages. You can specify the maximum number of images in each response page using the page-size attribute. Its value must be in the range between 1 and 500. The default is 10. The page-index attribute specifies the number of a page to be returned.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:pipeline="http://www.volantis.com/xmlns/marlin-pipeline"
xmlns:picasa="http://www.volantis.com/xmlns/2008/08/picasa">
<head>
<title>Picasa album by id</title>
</head>
<body>
<pipeline:transform href="picasa2xdime.xsl">
<picasa:list-photos user-id="testvolantis" album-id="5240956067202995025"/>
</pipeline:transform>
</body>
</html>Picasa returns requested data in the form of a feed. You must use an XSL transform to convert the feed to an XDIME presentation markup. The object element can display images on an XDIME page.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:atom="http://www.w3.org/2005/Atom"
xmlns:openSearch="http://a9.com/-/spec/opensearchrss/1.0/"
xmlns:exif="http://schemas.google.com/photos/exif/2007"
xmlns:geo="http://www.w3.org/2003/01/geo/wgs84_pos#"
xmlns:gml="http://www.opengis.net/gml"
xmlns:georss="http://www.georss.org/georss"
xmlns:photo="http://www.pheed.com/pheed/"
xmlns:media="http://search.yahoo.com/mrss/"
xmlns:batch="http://schemas.google.com/gdata/batch"
xmlns:gphoto="http://schemas.google.com/photos/2007">
<xsl:template match="atom:feed">
<h1>
<xsl:value-of select="atom:title"/>
</h1>
<xsl:for-each select="atom:entry">
<div>
<object>
<xsl:attribute name="src">
<xsl:value-of select="atom:content/@src"/>
</xsl:attribute>
<xsl:attribute name="srctype">
<xsl:value-of select="atom:content/@type"/>
</xsl:attribute>
<param name="mcs-external-label">
<xsl:attribute name="value">
<xsl:value-of select="atom:title"/>
</xsl:attribute>
</param>
</object>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>The flickr:list-photos element retrieves images from the Flickr service. The api-key attribute identifies your application. Please note that it is your responsibility to request and manage your own API key. Refer to Flickr Services for further information.
The photoset-id specifies a photoset. The remaining attributes, namely user-id, tags, query, page-size and page-index have the same meaning as the attributes described in the previous section.
If neither user-id, nor photoset-id is specified, then tags and/or query must be specified, otherwise an error will be thrown.
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:pipeline="http://www.volantis.com/xmlns/marlin-pipeline"
xmlns:flickr="http://www.volantis.com/xmlns/2008/08/flickr">
<head>
<title>Flickr photos by user</title>
</head>
<body>
<pipeline:transform href="flickr2xdime.xsl">
<flickr:list-photos api-key="to-be-provided-by-page-author" user-id="30193659@N08"/>
</pipeline:transform>
</body>
</html>An XSL transform converts the Flickr service response to an XDIME presentation markup.
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet xmlns="http://www.w3.org/2002/06/xhtml2"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:flickr="urn:flickr:">
<xsl:template match="/">
<h1>Flickr gallery</h1>
<xsl:for-each select="//photo">
<div>
<p>
<xsl:value-of select="@title"/>
</p>
<object srctype="image/jpeg">
<xsl:attribute name="src">http://farm<xsl:value-of select="@farm"
/>.static.flickr.com/<xsl:value-of select="@server"/>/<xsl:value-of select="@id"
/>_<xsl:value-of select="@secret"/>.jpg</xsl:attribute>
<param name="mcs-external-label">
<xsl:attribute name="value">
<xsl:value-of select="@title"/>
</xsl:attribute>
</param>
</object>
</div>
</xsl:for-each>
</xsl:template>
</xsl:stylesheet>You can find more XDIME examples illustrating the use of the connectors in the ${MCS_HOME}/webapps/mcs.war/projects/connectors/ subdirectories. Refer to the Client Framework 1 Sample Application to learn how to use the connectors with the Gallery widget.