mashup

Mix 2011 Session List using OData, datajs and jQuery

amaniar — Mon, 18 Apr 2011 21:16:46 GMT

At the recent Mix 2011 conference the datajs team talked about this new cross-browser JavaScript library that makes writing data centric web apps easier.

Its fairly simple to use and can be very powerful.

Here is a quick application I threw together using the library. The code uses datajs, jQuery, jQuery UI and jQuery templates.

Microsoft has an OData Service at http://live.visitmix.com/odata/Sessions which exposes all Mix sessions. I used this source to get a list of all sessions using the datajs library and bound them to a template using the templating library.

The below code uses the OData.read function to read the list of sessions and then binds the results to the sessionTemplate template.

//enable jsonp since this is a cross dom

OData.defaultHttpClient.enableJsonpCallback = true;

//read all sessions and bind to sessionsTemplate

OData.read("http://live.visitmix.com/odata/Sessions?$orderby=Title asc",

function (data, request) {

results = data.results;

$("#sessionTemplate").tmpl(

results,

{

getTags: getTags

}

).appendTo("#sessionList");

The getTags method is passed into the template so the tags can be loaded for each session when it renders.

function getTags(sessionId) {

//get list of all tags for this session

OData.read("http://live.visitmix.com/odata/Sessions(" + sessionId + ")/Tags",

function (data, request) {

//bind to the tagTemplate

$("#tagTemplate").tmpl(data.results).appendTo("#" + sessionId);

});

return "";

}

Here is the sessions template:

<li><b><a href='http://channel9.msdn.com/events/mix/mix11/${SessionCode}' target="_blank">${Title}</a></b> <p>${Abstract}</p>

//call the getTags method to get the tags html

Tags: {{html $item.getTags($item.data.SessionID)}}

</p>

</li>

</script>

The Tags template: (links to channel9 page for that tag)

<a href='http://channel9.msdn.com/Events/MIX/MIX11?t=${TagValue}' target="_blank">${TagValue}</a> 

</script>

The Tags section in the sessionList template invokes the getTags function passed to it which in turn makes a request using the OData library for all tags for the current session.

Example - tags for session with ID of 150: http://live.visitmix.com/odata/Sessions(150)/Tags

I also used the jQuery autocomplete plugin to create a autocompleted textbox so users can search for a session by title.

$("#searchTextbox").autocomplete({

source: function (request, response) {

response($.map(results, function (item) {

if (item.Title.toLowerCase().indexOf($.trim(request.term.toLowerCase())) != -1) {

return {

label: item.Title,

sessionId: item.SessionID

}

}))

select: function (event, ui) {

OData.read("http://live.visitmix.com/odata/Sessions(" + ui.item.sessionId + ")",

function (data, request) {

$("#sessionList").empty();

$("#sessionTemplate").tmpl(data).appendTo("#sessionList");

});

}

The above code uses the source method of the autocomplete plugin to populate the list of sessions and then overrides the select method to bind to the selected session.

You can read more about the autocomplete plugin here.

Note: This isnt the most efficient way of loading data as it doesnt use paging, background fetching or local storage provided by HTML5 and datajs. Just wanted to demo the odata portion of the datajs library and how it can be used.

Hope to change this to use local storage in the future.

You may view the entire sample here: http://www.asifmaniar.com/Samples/Mix-2011-sessions-using-OData-and-datajs.aspx

Building a Silverlight Flickr Application using Windows Communication Foundation

amaniar — Wed, 30 Sep 2009 20:08:32 GMT

Flickr is a popular photo-sharing website. It’s primarily used by people to store, organize and share their photos. Flickr allows both public and private photos and the ability of people being able to comment on them.

Like many other social websites Flickr has a public API that can be used to get access to their data via low level web service calls. We shall use an open source Flickr API library called FlickrNet to take care of the low level web service calls for us.

In this post we shall be using the FlickrAPI to build a simple Silverlight based application. The completed application will display 10 random public photos for any Flickr username/email with the ability to view a larger photo along with any comments.

The Flickr API provides a means for application developers to interface with Flickr assets - photos, users, comments, blogs, groups, and so forth. In order to use the Flickr API you must have an API key, which you can get for free from the Flickr API Keys page at http://www.flickr.com/services/api/keys.

After downloading the FlickrNet.dll we create a web application and a silverlight application. We add the FlickrNet.dll as a reference into the web app and add a Silverlight enabled - WCF service for transmitting data to the Silverlight application.

Next we add flickrNet config section to our web application and populate it with our API key.

Note: You might want to disable caching by adding disableCache="true" to the config section if you get permission exceptions in production.

…

</configSections>

We also add a FlickrPhoto and FlickrComment classes to represent a Flickr photo and comment respectively.

The Solution looks like this:

Next we implement a method in the WCF Service that returns the top 10 random pics for a given user name.
For this you can use the PeopleFindByUsername method to find the user and then create a PhotoSearchOptions object and set the PerPage property to 200 so we get the first 200 photos for the user.

We order the returned list randomly and then select the top 10 photos with the help of some linq.

FoundUser userInfo = flickr.PeopleFindByUsername(username);

flickrUserId = userInfo.UserId;PhotoSearchOptions options = new PhotoSearchOptions();

options.UserId = flickrUserId;

options.PerPage = 200;

//get 10 pics randomly

Photos searchResults = flickr.PhotosSearch(options);

pics = (from p in searchResults.PhotoCollection.OrderBy(p=>Guid.NewGuid())

select new FlickrPhoto

{

PhotoId = p.PhotoId,

Title = p.Title,

MediumUrl = p.MediumUrl,

WebUrl = p.WebUrl,

LargeUrl = p.LargeUrl,

ThumbnailUrl = p.ThumbnailUrl,

SmallUrl = p.SmallUrl}).Take(10).ToList();

Next we will add a ServiceReference to this service from our Silverlight project called FlickrServiceReference. Now we have a client side proxy called FlickrServiceReference which we can use to talk to our web service.

In the silverlight application you can then accept a Flickr username/email from the user and call the Web services GetRandomPhotos method and bind the results to an ItemsControl as shown in the following code snippet.

FlickrServiceReference.FlickrServiceClient service = new SilverlightApplication.FlickrServiceReference.FlickrServiceClient();

service.GetRandomPicsCompleted += new EventHandler<SilverlightApplication.FlickrServiceReference.GetRandomPicsCompletedEventArgs>(service_GetRandomPicsCompleted);

service.GetRandomPicsAsync(“FlickrUsername”);

Using a DataTemplate for the ItemsControl to show the Thumbnails inside a ScrollViewer so we can scroll the photos. We use data binding to bind the image source to the ThumbnailUrl property.

Here is a snippet of the scroll viewer that wraps the thumbnails

<ItemsControl x:Name="icPhotos" HorizontalAlignment="Left" VerticalAlignment="Top"

BorderBrush="#FFB83636" BorderThickness="1,1,1,1" RenderTransformOrigin="0.5,0.5" >

<ItemsControl.ItemTemplate>

<StackPanel.Resources>

</Storyboard>

</Storyboard>

</StackPanel.Resources>

<StackPanel.RenderTransform>

</TransformGroup>

</StackPanel.RenderTransform>

<Image Source="{Binding Path=ThumbnailUrl}" MaxWidth="100" MaxHeight="100" Margin="10" MouseLeftButtonDown="Image_MouseLeftButtonDown"/>

</StackPanel>

</DataTemplate>

</ItemsControl.ItemTemplate>

</ItemsControl>

</ScrollViewer>

You will notice we have added two animations called grow and shrink that will fire on MouseEnter and MouseLeave on the stackpanel. As a result the images zoom by 10% every time the cursor is hovered over them.

Next we add some more markup to display a large image along with any comments when a thumbnail is clicked.

OnMouseLeftButtonDown event of the thumbnail is wired to call the GetComments method on the web service and bind the returned Comments to a ItemSource property of the DataGrid. The larger image is bound to the images mediumUrl.

The GetComments Method returns a List of FlickrComments for the Photo ID.

public List<FlickrComment> GetComments(string pid)

{

Flickr flickr = new Flickr();

string flickrUserId = string.Empty;

List<FlickrComment> comments = new List<FlickrComment>();

try

{

Comment[] commentResults = flickr.PhotosCommentsGetList(pid);

comments = (from c in commentResults

select new FlickrComment

{

CommentHtml = c.CommentHtml,

DateCreated = c.DateCreated,

PhotoId = c.PhotoId,

AuthorUserName = c.AuthorUserName,

CommentId = c.CommentId

}).ToList();

}

catch (FlickrApiException)

{

// report error

}

return comments;

}

Check the live demo here.

Download Source code here:

Resources:
http://www.flickr.com/services/api/keys/
http://flickrnet.codeplex.com/
http://www.4guysfromrolla.com/articles/091609-1.aspx
http://www.asifmaniar.com/samples/Flickr-Silverlight-WCF.aspx