Twittering Around in Expression Blend Part 1

by Donald Burnett

Expression Blend has some really cool features that expose a lot of web functionality. Today I will start a tutorial about how to create a WPF application  I have been using a service called “Twitter” one of my friends called it the greatest internet “stalking” program in the world. Sometimes your friends or associates need to know what you are up to and what’s going on. Twitter works from your instant messenger or your phone.  One of the nice things about twitter is it offers both a public and private log. People only know what you tell them about what you are doing, and you can have private info available to others that you specify.  It’s great around work or even if you have friends that want to see what you are up to and find yourself too busy to talk to on the phone.

Anyway let’s dive in.. For this first tutorial you will need just Microsoft Blend, no visual studio required. So lets dive in, open blend and create a project in C# or VB.net.. Right now since we won’t be doing any code-behind pages or any customization you won’t really need it. We will just be focusing on the XAML and XML.

 

Step 1: create a new project

 

 

A little background on the twitter web service which we will be connecting to and pulling information. It is a webservice based on a very old and simple API called REST. REST is a very common web service API, it’s used by Amazon, Google, and a number of webservice providers, it sends data out in standard XML, JSON, RSS and ATOM formats. Microsoft was really great with their databinding inside blend and you can literally attach an XML data source from the webservice and instantly do one way or two way data binding to the application. Binding allows you to pull data from the web service or push it back to it if you have permissions of course.

Step 2: create an XML datasource

In the Data area in the lower right corner of the blend screen click on the +XML button

 

Step 3: in the datasource dialog type the following:

If you are having problems reading it, type what you see below:

http://twitter.com/statuses/public_timeline.rss

 

Step 4:  Make sure your schema useage is set correctly (click on the down arrow before the okay in the dialog box) make sure it’s set to infer schema from XML Data, there are other options here including setting up an XPATH but we’ll cover those in a later tutorial.

 

Step 5: Click Okay on the dialog

 

Now you have just created your XML datasource, and if you look down in the right corner you will see the fields and the datasource ready to databind..

Note: it polled the datasource and apparently came to us as an RSS formatted feed..

The next step is filling in the application with data and binding..

 

Step 6: drill down to the item (Array) line and then click and drag and drop that on the blend design surface..

 

Step 7: A menu item will pop up when you drop onto the surface you will then get an opportunity to select the type of WPF control you will bind to. Since this is a list of data I am going to select “LISTBOX”.

 

Step 8: Next a list box will pop up with ITEMSOURCE selected, and it will ask the type of databinding (one way, two way, etc.) leave it at default for this tutorial.. For now just click OK.

 

 

 

Step 9: Next another dialog will pop up asking you about how the data should look when inserted in the ListBox..

Note under item there are a number of drop downs, it allows you to bind the fields from the feed into different types of XAML controls. For now Item being a stackpanel is fine and the fields: Title, Description, pubDate, guid, link all can be just a TextBlock which is the standard text control.

Click OK

Step 10:  The design surface now has a list box with some sample data polled from the source, and you are done, you have just pulled data from the webservice.

 

Step 11: To test this works now go up to the project menu and select test project

 

 

Step 12:  your application now compiles and runs and bam you have a feed from Twitter, it’s their unauthenticated feed public timeline

 

You will notice that it might not be very useful but it is a working example of how to access the twitter API.. If we wanted to check out  what your friends were doing from a certain timeframe (say since tuesday march 27, 2007)  you could just go back up to step 3:

Where it says URL for XML data type the following instead:

http://twitter.com/statuses/friends_timeline.rss?since=Tue%2C+27+Mar+2007+22%3A55%3A48+GMT

 

The twitter API is very open you can specify just one person (if you want to spy on them) or a number of people. We will work on this during the next tutorial session. If you want to learn more about the Twitter API in the meantime you can check out the API documentation at:

http://groups.google.com/group/twitter-development-talk/web/api-documentation

They have more examples about how to poll the web service.  All of this without even entering Visual Studio for anything pretty neat huh?

If you want to see the code generated (it’s pure XAML) see below:

 

Code Sample 1.

<Window
 xmlns=”
http://schemas.microsoft.com/winfx/2006/xaml/presentation
 xmlns:x=”
http://schemas.microsoft.com/winfx/2006/xaml
 x:Class=”TWITTER_APP.Window1″
 x:Name=”Window”
 Title=”Window1″
 Width=”640″ Height=”480″ xmlns:d=”
http://schemas.microsoft.com/expression/blend/2006” xmlns:mc=”http://schemas.openxmlformats.org/markup-compatibility/2006” mc:Ignorable=”d”>

 <Window.Resources>
  <XmlDataProvider x:Key=”rssDS” d:IsDataSource=”True” Source=”
http://twitter.com/statuses/public_timeline.rss”/>
  <DataTemplate x:Key=”itemTemplate”>
   <StackPanel>
    <TextBlock Text=”{Binding Mode=OneWay, XPath=title}”/>
    <TextBlock Text=”{Binding Mode=OneWay, XPath=description}”/>
    <TextBlock Text=”{Binding Mode=OneWay, XPath=pubDate}”/>
    <TextBlock Text=”{Binding Mode=OneWay, XPath=guid}”/>
    <TextBlock Text=”{Binding Mode=OneWay, XPath=link}”/>
   </StackPanel>
  </DataTemplate>
 </Window.Resources>

 <Grid x:Name=”LayoutRoot”>
  <ListBox Margin=”115,59,67,73″ ItemTemplate=”{DynamicResource itemTemplate}” ItemsSource=”{Binding Mode=Default, Source={StaticResource rssDS}, XPath=/rss/channel/item}”/>
 </Grid>
</Window>

About these ads
Explore posts in the same categories: Uncategorized

4 Comments on “Twittering Around in Expression Blend Part 1”

  1. John Burke Says:

    Hi,

    I get to step 5 and then cannot expand my data source.

    I have tried this on a number of different development environments and get the same result. Nothing. Help would be great. Thanks.


  2. Undeniably believe that which you said. Your favourite justification appeared to be on
    the net the easiest thing to be aware of.
    I say to you, I certainly get irked even as folks consider worries that they
    just don’t recognise about. You managed to hit the nail upon the highest and also outlined out the entire thing without having side effect , other people could take a signal. Will probably be again to get more. Thanks


  3. I really like looking through a post that will make men and women think.

    Also, thank you for permitting me to comment!

  4. sex advice Says:

    Thank you for some other informative web site. The place else may I am getting that type of information written in such an
    ideal manner? I have a mission that I’m simply now
    working on, and I have been at the glance out for such information.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


Follow

Get every new post delivered to your Inbox.

%d bloggers like this: