Searching is fine…let’s make it easier, or even fun! Part 2

Getting Images from Live Search API

So, if you read part I of this post, by now you should have an idea of the type of experience and components that I aimed to develop…
a web server rendering a client page with inside a custom control used to show and animate images found on Microsoft Live Search by invoking a web service running on web server…
Wow, that was mouthful! :-)

I hope the following diagram will help you navigate this architecture and have a feeling for the interactions among components… some details will follow

Ok, let’s get it started…

Sketching out the Web Control

I wasn’t sure exactly how the control would look like, so I decided to sketch it using a user control (.ascx) instead of starting with a full blown web control. That way I was able to experiment with the UX while figuring out the properties I needed for the control to support my user experience, and I would not have to work on the design time support until the control design was hardened…

Creating the first instance of the control was a piece of cake.
After all, I needed just a label for the image Title, an Image for the picture, a label for the image Description (which I decided to use to show the images’ source), and the Play/Stop, Next, Prev buttons to control the slide show. Pretty much something like this…

<asp:Panel ID="PD_SearchImagesSlideShow" runat="server" CssClass="searchimages_pd_slideshow">
            <asp:Panel ID="PD_Photo" CssClass="searchimages_pd_photo">
                <asp:Panel ID="PD_Title" CssClass="searchimages_pd_title" runat="server">
                    <asp:Label ID="lblImageTitle" runat="server"   />
                </asp:Panel>                                          
                <asp:Image  ID="myImage"  runat="server" CssClass="searchimages_pd_image" />                             
                <asp:Panel ID="PD_Desc" CssClass="searchimages_pd_desc" runat="server">
                    <asp:Label ID="lblImageDescription" runat="server"  />
                </asp:Panel> 
            </asp:Panel>
            <asp:Panel ID="PD_Btns"  runat="server" CssClass="searchimages_pd_btns">           
                <asp:Button ID="Btn_Previous" runat="server" Text="Previous"  />
                <asp:Button ID="Btn_Play" runat="server" Text="Play"/>
                <asp:Button ID="Btn_Next" runat="server" Text="Next"/>              
            </asp:Panel>
</asp:Panel>    

Oh, I almost forgot, the controls needed also an Ajax SlideShow extender, which comes with the Microsoft Ajax Control Toolkit. That would make the trick of requesting the images from my web service and animating them in a slide show on the client. If you are not familiar with extenders, think of them as Javascript that is associated with server controls (once they are instantiated in a web page) and used to extend (i.e. improve, aka make cool) their functionalities.

<ACT:SlideShowExtender ID="SlideShowExtender" AutoPlay="true" Loop="true"
                 ImageTitleLabelID="lblImageTitle"
                 TargetControlID="myImage"                                    
                 ImageDescriptionLabelID="lblImageDescription"  
                 PreviousButtonID="Btn_Previous"
                 PlayButtonID="Btn_Play" PlayButtonText="Play"  StopButtonText="Stop"
                 NextButtonID="Btn_Next"                                    
                 SlideShowServicePath="~/services/..." SlideShowServiceMethod="SearchPhotos"  
                 UseContextKey="true"
                 runat="server">                                   
</ACT:SlideShowExtender> 

For example (see snippet above), in the case of the SlideShow extender, you associate that to (at least) an image and – at runtime - the extender will fetch images from a web service and replace the content of the associated image in response to a client timer event. 
  So, the effect would be that of a… slideshow – precisely!

Now, the control was showing up correctly in a test .aspx page even before my second coffee and before my kids woke up… brilliant!
Was it the second, or third one? … It must have been the second…
I couldn’t see any sun light outside yet…

Now the interesting part, the control’s properties and logic…

Control Properties ? 

• Width and Height – to make sure the control could be properly sized in different web pages.
• QueryText – I needed a string for the query that should be issued to Microsoft Live Search.
• MaxNumberOfImages  - to define the maximum number of images the client would request to the web service and, ultimately, to Microsoft Live Search.

That was it. I was determined to keep it simple…

Control Logic ?

A handful of statements to initialize the control, a few other lines for the presentation, just enough to arrange and scale the controls inside the panel based on the Width and Height defined by the user.
Then, I had to make sure the SlideShow extender would carry the right parameters for the web service invocation, namely: QueryText and MaxNumberOfImages.

Hmmm… the SlideShow’s ContextKey property used to pass information to the invoked web service is a string though…
you can’t pass the two properties just like that.
Not too bad though. I just had to serialize both properties and assign the serialized string to the ContextKey property. 
  You know? I used to hate serialization, but now Microsoft .NET offers plenty of choices to do it, it’s not fun yet.. but much better. 
  I just needed a wrapper object for the two properties.
  So, I created the Query object to carry that information and to implement the serialization.

Web Service

I developed of the web service in phases…

At first, I tested the client / server interaction, then I carried on with requesting images to Microsoft Live Search APIs.
  I started with a simple stub for the web service, encapsulating just enough logic so that it would return a few images taken from my web’s images directory…   Hey, it was not much, I know…, but that would do it for a first test of the service, and it would also show a slideshow on the client too.

That worked out quite well!
  By breakfast time, my control was invoking the web service, and showing a slide show of the returned images on the client. 
  The end to end lacked only the integration with Microsoft Live Search.
  I was almost done, wasn’t I? :-)

Plus, it was about time to enjoy some quality time with my family…
Yet, they were all sleeping… why would I wake them up?
And, Oh.. Noooo… :-)  it was snowing again!

Well,… I went downstairs to prepare a cup of coffee, while reading the documentation of Microsoft Live Search APIs.
  I had not made up my mind yet whether I would use the HTTP Get or SOAP as protocol. I knew HTTP would probably be a little bit lighter weight, but that meant I would need to deal with parsing some XML documents back and forth. Then, I opted to use SOAP, out of laziness I guess… the facility offered by the typed objects provided with the SOAP APIs was way too appealing.

Even more intriguing were the neatly assembled samples provided with the APIs. I had them working , and I adapted them within my web service code even before I finished my coffee… the third one!

Finally, I had a prototypical implementation of the end to end scenario that exercised the whole architecture.
And, it was working quite well.

However, a few doubts started crossing my mind when I got fancy with the queries using Live Search operators like site: or language: or location:. 
  These questions became more pressing when, with specific reference to image queries, I started using some other operators in order to filter results on image properties such as ImageAspectRatio (Tall, Wide, Square), ImageType (Photo, Graphics), etc… 
  I was a bit frustrated I had to write an application to do build a long and complicated query to interoperate with the Microsoft Live Search.
Truth to be told, everything was working fine, but my experience as a developer could have been better… 
  The reasons was that the components I had built so far, did not know anything about these operators. Their knowledge was only in my mind and hmm…. in Microsoft Live Search APIs’.
  And, I thought it was a pity none of my components would expose that knowledge in a more useful way.

I knew it!

All that had little to do with my little project.
  I was already thinking how Microsoft Live Search APIs could be extended and/or simplified… :-)

I could not help it though.  

I had to take another look at that Query wrapper. 
  Yep, its responsibilities could be expanded with great benefit for the overall solution.

But that was enough for the day… and for this part!