Building the PacktNews app using the Silverlight for Windows Phone 7.5 Pivot control

Now that we have learnt how to use the Patch News API, let us move ahead to build our PacktNews app using the Windows Phone Pivot control. We will use a free icon from http://findicons.com/icon/169293/news?id=376465# for the PacktNews app.

It is also a good idea to have a look at the taxonomy (in other words, category structure) of the Patch News API. There are two levels of taxonomy supported: category and subcategory level, as shown in the following table:

Taxonomy type

Category

Subcategory

Vertical

news

national

  

local

  

crime

  

politics-and-political-analysis

  

opinion

 

lifestyle

activism

  

arts-and-entertainment

  

crafts

  

fashion

  

food-and-restaurants

  

nightlife

  

shopping

  

real-estate

  

health

  

travel

  

recreation

  

parenting-family-and-children

  

personal

  

religion

  

community

 

education

colleges-and-universities

  

high-schools

  

libraries

 

business

finance

  

marketing

  

small-business

  

advertising

  

business-promotion

 

science-and-technology

 
 

sports

 

Format

stories

blog-posts

  

news-articles

  

press-releases

 

reviews-and-ratings

 
 

event-listings

 

Author type

mainstream-media

 
 

independent-new-media

 
 

sharing-and-community-sites

 
 

business-and-organizations

corporations

  

small-businesses

  

real-estate-agents-and-brokers

  

non-profit-and-not-for-profit-organizations

  

sports-teams

  

religious-institutions

  

political-parties

 

individuals

general

  

celebrities

 

educational-institutions

colleges-and-universities

  

high-schools

  

libraries

 

government

 

These taxonomies can be used with include or exclude parameters, based on the taxonomy type. For example, the&author-type=individuals parameter can be used to fetch news stories submitted by individuals only. We will use a combination of these taxonomies to build PacktNews, so let's get started:

  1. Create a new Windows Phone Application from Visual Studio 2010 Express and name it PacktNews.
  2. We will need the MD5Managed.cs file from the previous example, so include that in your project. Add the Json.NET (Newtonsoft.Json) to your project by adding a reference to the downloaded DLL file. It is a good idea to copy the DLL and any other referenced files within your project folder.
  3. As we will be using the Pivot control, we need to add the Windows.Phone.Controls namespace to our MainPage.xaml by adding the following code within the<phone:PhoneApplicationPage> tag:
    xmlns:controls="clr-namespace:
Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
  4. Add a Pivot control to the Grid named ContentPanel, and name it"packtNewsPivot".
    <controls:Pivot Title="PactkNews" Name="packtNewsPivot"
SelectionChanged="changeData">
  5. The changeData method is called on the SelectionChanged event; this triggers when we switch between the multiple pivot items.
  6. We add three PivotItem controls to the parent pivot: one for News, another for showing nearby Places, and the third one for nearby Events. Each pivot item has its own ListBox: myNewsBox, myPlacesBox, and myEventsBox respectively.
  7. We add an Application Bar and system shell tray with a progress indicator, similarly to how we did in the PacktEvents app in Chapter 4, Events App - PacktEvents.
  8. The full source code of the MainPage.xaml file is shown as follows:
    <phone:PhoneApplicationPage
x:Class="PacktNews.MainPage"
xmlns="http://schemas.microsoft.com/winfx/2006/
xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
xmlns:phone="clr-namespace:
Microsoft.Phone.Controls;assembly=Microsoft.Phone"
xmlns:shell="clr-namespace:
Microsoft.Phone.Shell;assembly=Microsoft.Phone"
xmlns:controls="clr-namespace:
Microsoft.Phone.Controls;assembly=Microsoft.Phone.Controls"
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
xmlns:mc="http://schemas.openxmlformats.org/markup-
compatibility/2006"
mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="696"
FontFamily="{StaticResourcePhoneFontFamilyNormal}"
FontSize="{StaticResourcePhoneFontSizeNormal}"
Foreground="{StaticResourcePhoneForegroundBrush}"
SupportedOrientations="Portrait" Orientation="Portrait"
shell:SystemTray.IsVisible="True">
<!--LayoutRoot is the root grid where all page content is
placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1"
Margin="12,0,12,0">
<TextBlock Height="30"HorizontalAlignment="Left"
Margin="20,130,0,0" Name="statusText"
Text="Status: "VerticalAlignment="Top"
Width="444" />
<controls:Pivot Title="PactkNews"
Name="packtNewsPivot"
SelectionChanged="changeData">
<controls:PivotItem Header="News">
<ListBox Height="569"
HorizontalAlignment="Left"
Name="myNewsBox"
VerticalAlignment="Top"
Width="456" Tap="fireWeb" />
</controls:PivotItem>
<controls:PivotItem Header="Places">
<ListBox Height="569"
HorizontalAlignment="Left"
Name="myPlacesBox"
VerticalAlignment="Top"
Width="456" Tap="fireWeb" />
</controls:PivotItem>
<controls:PivotItem Header="Events">
<ListBox Height="569"
HorizontalAlignment="Left"
Name="myEventsBox"
VerticalAlignment="Top"
Width="456" Tap="fireWeb" />
</controls:PivotItem>
</controls:Pivot>
</Grid>
</Grid>
<phone:PhoneApplicationPage.ApplicationBar>
<shell:ApplicationBarIsVisible="True"
IsMenuEnabled="True">
<shell:ApplicationBarIconButton
IconUri="/Images/appbar.sync.rest.png"
Click="changeData" Text="Refresh"/>
<shell:ApplicationBar.MenuItems>
<shell:ApplicationBarMenuItem Text="Settings"/>
</shell:ApplicationBar.MenuItems>
</shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
<shell:SystemTray.ProgressIndicator>
<shell:ProgressIndicatorIsIndeterminate="True"
IsVisible="True" Text="Loading ..."
x:Name="loadingBar" />
</shell:SystemTray.ProgressIndicator>
</phone:PhoneApplicationPage>
  9. Notice that we added a Refresh menu button in the Application Bar, which calls the changeData method to reload the content from the API—on demand.
  10. Most of our code in the MainPage.xaml.cs file will be similar to the HelloNews example we saw earlier. However, some new variables and methods are introduced in the PacktNews project to handle each of the three pivot items.
  11. We begin by declaring three instances of WebClient in our main class:
    WebClient myNewsWebclient,
myPlacesWebClient,myEventsWebClient;
  12. The three instances of WebClient mentioned in the previous step have their own callback functions defined in the MainPage() constructor:
    myNewsWebclient = new WebClient();
myPlacesWebClient = new WebClient();
myEventsWebClient = new WebClient();
myNewsWebclient.DownloadStringCompleted += new
DownloadStringCompletedEventHandler
(myNewsWebclient_DownloadStringCompleted);
myPlacesWebClient.DownloadStringCompleted += new
DownloadStringCompletedEventHandler
(myPlacesWebClient_DownloadStringCompleted);
myEventsWebClient.DownloadStringCompleted += new
DownloadStringCompletedEventHandler
(myEventsWebClientDownloadStringCompleted);
  13. The changeData method detects which pivot item has been selected, and makes the appropriate API call to the Patch News API. For the News pivot, we use the general API we saw in the HelloNews example. However, for the Places pivot, we call the API with some additional parameters by examining the Patch News API closely. These parameters return us stories for specific verticals, in our case we will choose lifestyle | food-and-restaurants, lifestyle | arts-and-entertainment, and lifestyle | nightlife verticals. Similarly, for the Events pivot, we will use the format=event-listings parameter in the API call:
    private void changeData(object sender, EventArgs e)
{
// Start MD5 process
byte[] bs = System.Text.Encoding.UTF8.GetBytes(key + secret
+ timeInSecs);
byte[] hash = md5.ComputeHash(bs);
StringBuilder sb = new StringBuilder();
foreach (byte b in hash)
{
sb.Append(b.ToString("x2").ToLower());
}
// End of MD5 process
if (packtNewsPivot.SelectedIndex == 0)
{
loadingBar.IsVisible = true;
Uri uri = new Uri("http://news-api.patch.com/v1.1/nearby/"
+ latitude + "," + longitude + "/stories?dev_key=" + key +
"&sig=" + sb + "&radius=5000");
if (!myNewsWebclient.IsBusy)
{
myNewsWebclient.DownloadStringAsync(uri);
}
}
else
if (packtNewsPivot.SelectedIndex == 1)
{
loadingBar.IsVisible = true;
Uri uri = new Uri("http://news.api.patch.com/v1.1/nearby/
"+ latitude + "," + longitude + "/stories?dev_key=" + key
+ "&sig=" + sb + "&radius=5000&vertical=lifestyle
&vertical=food-and-restaurants&vertical=arts-and-
entertainment&vertical=nightlife");
if (!myPlacesWebClient.IsBusy)
{
myPlacesWebClient.DownloadStringAsync(uri);
}
}
else
if (packtNewsPivot.SelectedIndex == 2)
{
loadingBar.IsVisible = true;
Uri uri = newUri("http://news-
api.patch.com/v1.1/nearby/" + latitude +
"," + longitude + "/stories?dev_key=" + key + "&sig="
+ sb + "&radius=5000&format=event-listings");
if (!myEventsWebClient.IsBusy)
{
myEventsWebClient.DownloadStringAsync(uri);
}
}
}
  14. The myNewsWebclient_DownloadStringCompleted, myPlacesWebClient_DownloadStringCompleted, and myEventsWebClientDownloadStringCompleted methods are quite similar, except for the distinction that they fill their respective list boxes with the data parsed from the JSON payload, received from the respective API calls. For the sake of clarity, the myNewsWebclient_DownloadStringCompleted method is shown as follows:
    private void myNewsWebclient_DownloadStringCompleted(object
sender, DownloadStringCompletedEventArgs e)
{
myNewsBox.Items.Clear();
JObject
json=(JObject)JsonConvert.DeserializeObject(e.Result);
int i = 1;
foreach (var story in json["stories"])
{
String titleText = (string)story["title"];
String storyUrl = (string)story["story_url"];
StackPanel storyStackPanel = new StackPanel();
storyStackPanel.Name = storyUrl;
TextBlock titleTextBlock = new TextBlock();
titleTextBlock.TextWrapping = TextWrapping.Wrap;
titleTextBlock.Name = "titleTextBlock" + titleText;
titleTextBlock.Text = i + ") " +titleText + ".
";
titleTextBlock.FontSize = 28;
storyStackPanel.Children.Add(titleTextBlock);
myNewsBox.Items.Add(storyStackPanel);
i++;
}
loadingBar.IsVisible = false;
}
  15. Running the application in the emulator produces the following screenshot (with location as New York):
    Building the PacktNews app using the Silverlight for Windows Phone 7.5 Pivot control
  16. The Places pivot page looks like the following screenshot:
    Building the PacktNews app using the Silverlight for Windows Phone 7.5 Pivot control
  17. And finally, the Events pivot page looks like the following screenshot:
    Building the PacktNews app using the Silverlight for Windows Phone 7.5 Pivot control
  18. Remember from the XAML code, we added the Tap="fireWeb" code to each of the three list boxes. The fireWeb method detects which pivot item is selected and gets the selected StackPanel object and the Name attribute. (We use the Name attribute of the StackPanel object to pass the story URL to the WebBrowserTask.)
    private void fireWeb(object sender, GestureEventArgs e)
{
StackPanel selectedStory = new StackPanel();
WebBrowserTask web = new WebBrowserTask();
if (packtNewsPivot.SelectedIndex == 0)
{
selectedStory = myNewsBox.SelectedItemasStackPanel;
}
else
if (packtNewsPivot.SelectedIndex == 1)
{
selectedStory = myPlacesBox.SelectedItemasStackPanel;
}
else
{
selectedStory = myEventsBox.SelectedItemasStackPanel;
}
web.Uri = new Uri(selectedStory.Name);
web.Show();
}
  19. Clicking on any news story from any of the pivot items would fire up the web browser on your Windows Phone and launch the news story page, as shown in the following screenshot:
    Building the PacktNews app using the Silverlight for Windows Phone 7.5 Pivot control

You can find this example project in the code files for the book underChapter 5, titled PacktNews.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.128.197.164