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>
No comments:
Post a Comment