Blend For ActionScript Coders #3: Simplest RSS reader.
Previous parts:
I think we are quite ready for our first application in Blend, that is RSS Reader, we also “meet” closer with XAML today.
Idea
Ok, our current RSS reader should be really simple, since this is our first time with layout in Blend. I say, we need one TextBox (something like TextInput\TextArea in Flex), one Button, and ListBox which will hold data from RSS feed. We Also have to create some custom class which will present every feed item in appropriate form, but this is another story.
Practice
Create project in Blend and call it RSSReader, dont bother with C# yet, we wont need it for some time.
In “Objects and Timeline” panel right-click on LayoutRoot, and change it’s layout type to StackPanel:
Now add another StackPanel and ListBox in LayoutRoot, and then add TextBox and Button to the StackPanel.
Objects Properties:
ListBox:
- HorizontalAlignment : Left
- VerticalAlignment : Top
- Margin : 5,5,5,5
- Name :feedList
- Width : 615
- Height : 389
Inner StackPanel:
- HorizontalAlignment : Center
- VerticalAlignment : Center
- Margin : 5,5,5,5
- Height : 25
- Orientation : Horizontal
TextBox:
- HorizontalAlignment : Left
- VerticalAlignment : Top
- Name : urlField
- Width : 577.553
- Height : 24
- Text : http://weblogs.macromedia.com/mxna/xml/rss.cfm?query=byMostRecent&languages=1
Button:
- HorizontalAlignment : Right
- VerticalAlignment : Center
- Name : readButton
- Content : Read
If you done everything right, you will get this layout:
XAML Code:
Press File -> New Item -> User Control. Call it “FeedItemView”, leave Include Code File checked, we won’t use C# in this control but you might want to play around with project after we finished. Switch to newly created control, and switch LayoutRoot to StackPanel just like we did before.
Add Label and TextBox to the LayoutRoot, and setup controls
StackPanel:
- HorizontalAlignment : Left
- VerticalAlignment : Top
- Name : LayoutRoot
Label:
- HorizontalAlignment : Center
- VerticalAlignment : Center
- Name : titleField
- Width : 565
- FontWeight : Bold
TextBox:
- HorizontalAlignment : Center
- VerticalAlignment : Center
- Margin : 5,5,5,5
- Name : contentField
- Width : 565
- BorderThickness : 0,0,0,0
- MinLines : 2
- IsReadOnly : True
- IsUndoEnabled : False
Check your XAML code:
If everything is ok that’s mean we’ve done with layout and can go to next part - coding.
Logic
Before we begin to code, you will need to download RSS.NET framework, which will download and parse our feeds. You can find source files here and I’ve compiled them for you.
Press “Project” -> Add Reference
And target RSS.NET.dll file. Ok, save project and open C# IDE, go to Window1.xaml.cs file. Now, lets thing what we need:
- Event handler for button click.
- Method wich downloads RSS.
- Method which fills our ListBox.
- And method which clears ListBox.
private void onReadButtonClick(object sender, EventArgs e)
{
clearFeed(); //Clear ListBox
fillFeed(); //And fill it with new items
}
private void clearFeed()
{
feedList.Items.Clear();
}
private void fillFeed()
{
RssItemCollection feedItems = RssFeed.Read(urlField.Text).Channels[0].Items; //Download and parse RSS Feed
foreach (RssItem feedItem in feedItems)
{
FeedItemView feedItemView = new FeedItemView(); //create instance of FeedItemView
feedItemView.titleField.Content = feedItem.Title; //Set title
feedItemView.contentField.Text = feedItem.Description; //Set Description (witch is content of feed item
feedList.Items.Add(feedItemView); //Add item to list box
}
}
Press F5 and look at what you have done :D