Simple Silverlight 2 app - APIDemo - Part 2, Building the FeaturePics API Demo

This post is a continuation of Simple-Silverlight-2-app-APIDemo-Part-1-Building-the-DiggSample. You might want to start with that, as this part modifies it as necessary to extract data using the Developer's Search API. You can see a sample of the xml returned with Sample Query. So the task is to map the fields returned by the FeaturePics query into the display formerly used for the DiggSample.

First step was to copy all the files to a new directory and rename the project, including the namespace, to APIDemo. This could have been done without changing the namespace or copying the files, but I wanted to retain a working copy of the DiggSample while creating ApiDemo.

The Image Class

The DiggSample has the public class DiggStory where the data for each Digg Story is stored. I created a similar class:

namespace APIDemo
    public class FPImage
        public int ImageId { get; set; }
        public string ImageName { get; set; }
        public string Caption { get; set; }
        public Uri ImagePage { get; set; }
        public string ImageFile { get; set; }
        public int Width { get; set; }
        public int Height { get; set; }
        public string Author { get; set; }
        public Uri AuthorPage { get; set; }

The API Query

Now that I have a place to store individual image records, it was time to obtain the data to display. If you followed the DigSample tutorial, you know that the api query is in Page.xaml.cs and looks like this:
        string diggUrl = String.Format('{0}?count=20&', topic);

The FeaturePics API accepts one or more keywords, so I replace spaces, if any, with %20. The FeaturePics query version looks like this:

        string fpUrl = String.Format('{0}&NumberPerPage=30', topic.Replace(' ', '%20'));

This query should return a set of 30 images related to the contents of 'topic'. I should probably note there are other similar query possibilities returning data sets with somewhat different characteristics, but this is a good example.

Testing the Query

I assigned the FPImage fields to the expected query fields, compiled, and entered the first search term, cat. Nothing. Nothing at all was processed by my code. In the course of debugging the problem I noted these declarations:

  <?xml version='1.0' encoding='utf-8' ?>
- <ImageSet xmlns:xsi='' xmlns:xsd='' xmlns=''>

This is a standard .NET Web Service xml output format, but it was the first time I have coded the consumption of such a web service, and I wasted some time learning the necessary syntax. All of the field tags contain the "" string as well as the field name. One way to specify the tag name is:

ImageId = (int)image.Element("{}ImageId"),

Or, you can define the namespace once:

    // define the namespace declaration
    XNamespace nsFP = "";

and subsequently use that definition:

                ImageId = (int)image.Element(nsFP + "ImageId"),

This is how I ended up populating the FPImage class:

void DisplayImages(string xmlContent)
    XDocument xmlImages = XDocument.Parse(xmlContent);
    // define the namespace declaration
    XNamespace nsFP = "";
    var images = from image in xmlImages.Descendants(nsFP + "ImageExt")
             where image.Element(nsFP + "ImageFile").Value != null
             select new FPImage
                ImageId = (int)image.Element(nsFP + "ImageId"),
                ImageName = ((string)image.Element(nsFP + "ImageName")).Trim(),
                ImageFile = (string)image.Element(nsFP + "ImageFile"),
                ImagePage = new Uri((string)image.Element(nsFP + "ImagePage")),
                Caption = !String.IsNullOrEmpty((string)image.Element(nsFP + "Caption")) ? (string)image.Element(nsFP + "Caption") : "No caption found",
                Author = !String.IsNullOrEmpty((string)image.Element(nsFP + "Author")) ? (string)image.Element(nsFP + "Author") : "Artist attribution not found",
                AuthorPage = new Uri((string)image.Element(nsFP + "AuthorPage")),
                Width = (int)image.Element(nsFP + "Width"),
                Height = (int)image.Element(nsFP + "Height")
    ImagesList.SelectedIndex = -1;
    ImagesList.ItemsSource = images;

Some of the early FeaturePics images do not have the Caption or Author fields filled in, so I provide a replacement string.

Displaying the results

The main result page is Page.xaml. Not many changes were made here, text labels were changed to refer to FeaturePics rather than to Digg, and field names were changed to map those found in FPImage.

The image details are displayed in StoryDetailsView.xaml, and it too is very similar to the version in DiggSample. I added a row for the Artist's Images link, and changed the dimensions both of the page itself, and of the column widths. These changes were made in StoryDetailsView.xaml. And of course the field names were changed to match those in FPImage. There were also some CSS type changes made in App.xaml.

Using the control

The DiggSample uses an extremely simple html page to display the control. I wanted something that would show off the possibilities a bit better, so I set about creating APIDemo.html.

The biggest change here was setting height and width constraints on the #silverlightControlHost CSS definition. The page width was also limited and text added above and to the right of the control.

After these changes the control would not display in FireFox. After some trial and error, I found that deleting the CSS body "overflow: auto; " improved the IE display and fixed the FireFox problem.

The point of these changes is, of course, to demonstrate that the APIDemo control could be a part of any web page. It is one possible way to use the FeaturePics search API. And best of all, I learned a bit about Silverlight in the process.

Project files

You can download a copy of my project:

28. August 2008 11:32 by Kal | Comments (0) | Permalink
Comments are closed


<<  March 2021  >>

View posts in large calendar

Month List