Photo Gallery Example Using ASP.NET and Flex

I have been dabbling with Flex recently with the intent to try and create a simple XML driven Flash photo gallery with scrolling thumbnails. I am happy with the results so far, although I plan on improving the UX, error handling, load time and adding the ability to browse several categories. Once that's done I'm considering doing the whole project again in Silverlight ^_^

FlexFlickrGallery

Live Demo

ASP.NET Web Handler

I decided to have the list of photos for the gallery delivered as XML using a standard .NET web handler. This way I can add or delete photos in the future without having to tinker with the Flex application. Since my photos are hosted at Flickr, I chose to use the Flickr.NET API to gather information from a specific photo set on my account and let the web handler format the result as XML. I will eventually also have the web handler respond dynamically to different URL parameters in order to browse more than one photo set. There are a couple of good examples available at the FlickrNet API Library on CodePlex if you haven't used this API before. The most important thing to remember is if you are hosted on a shared server such as 1and1 (like me), you may find that you need to specify a proxy in both the <flickrNet /> and the <defaultProx /> locations in order to make any web requests outside of your host. You will also need to get you API key and secret from Flickr to add to the web.config.

web.config

Setting up flickr.dll and 1and1 proxy: 

<configuration>

  <configSections>

    <section name="flickrNet" type="FlickrNet.FlickrConfigurationManager,FlickrNet" 

       allowLocation="true" />

  </configSections>

  <flickrNet apiKey="yourFlickrAPIKeyGoesHere" secret="yourSecretGoesHere" 

       cacheDisabled="true" >

    <proxy ipaddress="ntproxy.1and1.com" port="3128" />

  </flickrNet>

  <appSettings>

    <add key="UserId" value="yourFlickrUserIdGoesHere"/>

  </appSettings>

 

  <!-- rest of web.config -->

 

  <system.net>

    <defaultProxy>

      <proxy usesystemdefault="False"

       bypassonlocal="False"

       proxyaddress="http://ntproxy.1and1.com:3128"

       />

    </defaultProxy>

  </system.net>

</configuration>

Formatting the information returned from Flickr is accomplished by using Mark Rasmussen's XML Output Fluent Interface, which has really been saving me quite a bit of time lately. You can find the class and implementation examples on his site. In this case, I decided to just wrap it under the default web application namespace. Otherwise you'll need to add the appropriate 'using' statement if you decide to add it to another namespace.  Here is the complete code for the web handler:

The Web Handler

flickrfeed.ashx: 

<%@ WebHandler Language="C#" Class="Handler" %>

 

using System;

using System.Web;

using FlickrNet;

 

public class Handler : IHttpHandler

{

    public void ProcessRequest(HttpContext context)

    {

        String output;

        context.Response.ContentType = "text/xml";

        context.Response.ContentEncoding = System.Text.Encoding.UTF8;

 

        // Assign the XML document

        output = XMLdata();

 

        context.Response.Cache.SetExpires(DateTime.Now.AddSeconds(600));

        context.Response.Cache.SetCacheability(HttpCacheability.Public);

        context.Response.Write(output);

    }

 

    public bool IsReusable

    {

        get { return true; }

    }

 

    public String XMLdata()

    {

        // Get data

 

        Flickr flickr = new Flickr();

        Photoset photos = flickr.PhotosetsGetPhotos("72157600111054287");

 

 

        // Create XML document

        XmlOutput xo = new XmlOutput()

        .XmlDeclaration()

        .Node("images").Within();

 

        foreach (Photo pic in photos.PhotoCollection)

        {

            String _title = "";

            String _image = "";

            String _thumbnail = "";

 

            if (pic.Title != "")

            {

                _title = pic.Title;

            }

            if (pic.MediumUrl != "")

            {

                _image = pic.MediumUrl;

            }

            if (pic.ThumbnailUrl != "")

            {

                _thumbnail = pic.ThumbnailUrl;

            }

            xo.Node("pic").Within()

            .Node("title").InnerText(_title)

            .Node("image").InnerText(_image)

            .Node("thumbnail").InnerText(_thumbnail)

            .EndWithin();

        }

        return xo.GetOuterXml();

    }

}

An Example of the XML Output

FlexFlickrGallery XML

Flex Gallery

Now that I have my Flickr XML feed up and running the way I want it, I can import it into Flex by retrieving it with HTTPService named "photos" and returning it as E4X: 

<mx:HTTPService id="photos" url="flickrfeed.ashx" result="xmlQuery(event)" resultFormat="e4x" />

Note that you may need to use a fully qualified URL, such as "http://www.example.com/directory/flickrfeed.ashx" if you want to host your gallery in a different location than your feed. The HTTPService is launched using the "send()" method via the application's "creationComplete" event: 

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"

     creationComplete="photos.send()" backgroundGradientAlphas="[1.0, 1.0]"

     backgroundGradientColors="[#002579, #1D0000]">

At which point the result event is sent to xmlQuery(event) method to create the thumbnails, load the first image and title. One of my goals for the gallery was to have scrolling thumbnails. This proved a little more difficult than I had anticipated, and I still have work to do on controlling the speed and scrolling bounds more accurately.

The scrolling thumbnail effect is achieved in part by using a simple mask, by nesting the larger HBox containing the thumbnail images within a smaller containing HBox. To keep scroll bars from appearing when the content exceeds the bounds of the container, you must set the verticalScrollPolicy and horizontalScrollPolicy to "off". The Move effects are declared in separate MXML tags and added via event parameters within the individual button controls. You can specify a particular target control for the effects using the "target" parameter in the effect tag, and additionally calling the effect using the "play()" or "stop()" methods from the button control: 

<mx:Button label="&gt;" id="rightBtn" mouseOver="mr.play()" mouseOut="mr.stop()"  

     height="40" width="33"/>

 

<mx:Move id="mr" xTo="0" duration="1500" target="{tscroller}" />

Flex Flickr Gallery

You can view the FlexFlickrGallery MXML source here.

Here are a couple of Flex related links I found to be useful:

Again, this is just a first step and I always welcome any suggestions and feedback.

5 Comments

Comments have been disabled for this content.