Outline

• Phone 7
• iPhone Networking

Introduction and Review

• Last day, we saw how to use Android to send and receive data over a Socket connection.
• We also saw how to use WebView's on Android and how to use a HttpURLConnection to get a web page and then process it using code.
• It is what is used to get web pages from a web server.
• We then switched to talking about Phone 7, we saw that Phone 7 has a WebBrowser class similar to WebView.
• We also did a demo of how to store stuff to a file on Phone 7 using the IsolatedStorageFile class.
• Today, we will look at the analog of HttpUrlConnection for Phone 7, briefly talk about Linq, and then start talking about networking on iPhone.

Phone 7 Filesystem, Sockets, and More

• Unlike Windows Mobile, Phone 7 hides the filesystem from the end user.
• Data can't be shared between application using the filesystem. This is why we use the IsolatedStorageFile class.
• If apps want to share data, the data should be in the "cloud", aka internet.
• Also, with the initial release of Phone 7 the Windows socket api is not exposed.
• So how can we use the cloud? One way is to use web services as we described last day. (We gave a REST-like syntax for urls and can imagine those urls running the corresponding code on a server.)
• Let's look at how to get data from the web and process it in Phone 7.

How to process Data Sources

• Microsoft has long had several technologies to try to make it easy to access data based on different underlyling technologies.
• For example, you can have ODBC datasources for an Oracle Database, for an Access Database, or for an Excel file.
• Similarly, you can do similar things using ADO (in some ways analogous to IBM CICS).
• The problem with these technologies is you still end up with an awkward mix of manipulate database code and programming language code.
• Linq is an attempt to have as part of the programming language, a syntax for accessing structured data such as databases, xml, etc.
• The advantage of having Linq be a part of the language is that syntax checking of the code that accesses the data become possible/ more transparent. In some sense, it is similar to technologies like embedded C or SQL/J except that Linq works for other things than just databases and you aren't aware of having a separate pre-compiler.
• Linq has been part of .NET since 2007, and was developed from the Cω Microsoft research project.
• Our web demo will use Linq to parse an RSS feed.
• RSS stands for Really Simple Syndication. It was developed at Netscape in the late 90's. It and a related family of standards are the most common way to present news feeds on the web.

Example RSS Document

<?xml version="1.0" encoding="iso-8859-1" ?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:ynews="http://news.yahoo.com/rss/">
<channel>
<title>Yahoo! News: Top Stories</title>
<copyright>Copyright (c) 2010 Yahoo! Inc. All rights reserved.</copyright>
<link>http://news.yahoo.com/top-stories</link>
<category>topstories</category>
<description>Top Stories</description>
<language>en-us</language> 
<lastBuildDate>Wed, 13 Oct 2010 19:40:30 GMT</lastBuildDate>

<ttl>5</ttl> 
<image>
<title>Yahoo! News</title>
<width>142</width>
<height>18</height>
<link>http://news.yahoo.com/top-stories</link>
<url>http://l.yimg.com/a/i/us/nws/th/main_142c.gif</url>
</image>
<item>
<title>20 miners free; Chile rescue past halfway mark 
    (AP)
</title>

 <link>http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101013/ap_on_re_la_am_ca/lt_chile_mine_collapse</link>
 <guid isPermaLink="false">ap/20101013/lt_chile_mine_collapse</guid>
<source>AP</source>
<category>world</category>
<pubDate>Wed, 13 Oct 2010 19:06:00 GMT</pubDate>
<description>&#60;p>&#60;a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101013/ap_on_re_la_am_ca/lt_chile_mine_collapse">&#60;img src="http://d.yimg.com/a/p/ap/20101013/capt.c9e04375d841434dacd9a7d0fe948cd9-c9e04375d841434dacd9a7d0fe948cd9-0.jpg?x=130&amp;y=86&amp;q=85&amp;sig=gYhF500qE..xP1I.3gV47Q--" align="left" height="86" width="130" alt="In this photo released by the Chilean government, miner Mario Gomez, left, gestures as he meets his wife for the first time after being rescued from the collapsed San Jose gold and copper mine where he had been trapped with 32 other miners for over two months near Copiapo, Chile, Wednesday, Oct. 13, 2010.  (AP Photo/Hugo Infante, Chilean government)" border="0" />&#60;/a>AP - The miners who spent 69 agonizing days deep under the Chilean earth were hoisted one by one to freedom Wednesday, their rescue moving with remarkable speed while their countrymen erupted in cheers and the world watched transfixed.&#60;/p>&#60;br clear="all"/></description>

<media:content url="http://d.yimg.com/a/p/ap/20101013/capt.c9e04375d841434dacd9a7d0fe948cd9-c9e04375d841434dacd9a7d0fe948cd9-0.jpg?x=130&amp;y=86&amp;q=85&amp;sig=gYhF500qE..xP1I.3gV47Q--" type="image/jpeg" height="86" width="130"/>
<media:text type="html">&#60;p>&#60;a href="http://us.rd.yahoo.com/dailynews/rss/topstories/*http://news.yahoo.com/s/ap/20101013/ap_on_re_la_am_ca/lt_chile_mine_collapse">&#60;img src="http://d.yimg.com/a/p/ap/20101013/capt.c9e04375d841434dacd9a7d0fe948cd9-c9e04375d841434dacd9a7d0fe948cd9-0.jpg?x=130&amp;y=86&amp;q=85&amp;sig=gYhF500qE..xP1I.3gV47Q--" align="left" height="86" width="130" alt="photo" title="In this photo released by the Chilean government, miner Mario Gomez, left, gestures as he meets his wife for the first time after being rescued from the collapsed San Jose gold and copper mine where he had been trapped with 32 other miners for over two months near Copiapo, Chile, Wednesday, Oct. 13, 2010.  (AP Photo/Hugo Infante, Chilean government)" border="0"/>&#60;/a>&#60;/p>&#60;br clear="all"/></media:text>
<media:credit role="publishing company">(AP)</media:credit>
</item>

....<!-- More item's -->
</channel>
</rss>

Demo Web App

• We are going to make a new Phone 7 app. In our MainPage.xaml we will add a TextBox to hold the Uri of an RSS feed, we will add a Button which says read, and finally we will have a ListBox to store the RSS feed items.
• The idea of the app will be, when the user clicks read, the RSS feed at the given Uri is downloaded and each of its items will be put into the ListBox.
• To say how we want to format a particular item in the ListBox, we will use a ListBox.ItemTemplate

MainPage.xaml

<phone:PhoneApplicationPage 
    x:Class="ParseWebContentTest.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: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="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    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">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="MY FEED" Style="{StaticResource PhoneTextNormalStyle}"/>
        </StackPanel>

        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <TextBox Height="75" HorizontalAlignment="Left" Name="textBox1" Text="https://www.pollett.org/users/cpollett/blog/index.rss" VerticalAlignment="Top" Width="293" Margin="9,0,0,0" />
            <Button Content="Read" Height="72" HorizontalAlignment="Left" Margin="296,3,0,0" Name="button1" VerticalAlignment="Top" Width="160" Click="button1_Click" />
            <ListBox Height="610" HorizontalAlignment="Left" Margin="10,72,0,0" Name="listBox1" VerticalAlignment="Top" Width="460" >
                <ListBox.ItemTemplate>
                    <DataTemplate>
                        <StackPanel Orientation="Horizontal" Height="130">
                            <StackPanel Width="370">
                                <TextBlock Text="{Binding Title}" Foreground="#FFC8AB14" FontSize="28" />
                                <TextBlock Text="{Binding Link}" TextWrapping="Wrap" FontSize="24" />
                            </StackPanel>
                        </StackPanel>
                    </DataTemplate>
                </ListBox.ItemTemplate>
            </ListBox>
        </Grid>
    </Grid>

</phone:PhoneApplicationPage>

More Demo Web App

• Note in our template, in the TextBlocks' Text attribute we have for one {Binding Title} and for the other {Binding Link}. This Silverlight is similar to a data binding in Flex/Actionscript. It says to use the Title and Link that we are going to come from our our Linq query.
• Next let's look at the C# and Linq code we have in our MainPage.xaml.cs ...

MainPage.xaml.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Xml.Linq; // to add this you need to first do an Add Reference for your project...
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;

namespace ParseWebContentTest
{
    /* This will be a little class to hold an RSS item
       Notice how we can quickly set up accessors methods in C #
    */
    public class RssItem
    {
        public string Title { get; set; }
        public string Link { get; set; }
    }

    //Here is the class where the work is done
    public partial class MainPage : PhoneApplicationPage
    {
        // Constructor
        public MainPage()
        {
            InitializeComponent();
        }

        // Handles Read button clisk and start downloading RSS page
        private void button1_Click(object sender, RoutedEventArgs e)
        {
            WebClient myrss = new WebClient(); // WebClient is analog to HttpUrlConnection for Android
            string site = textBox1.Text;

            // set up a callback for when the feed has been downloaded
            myrss.DownloadStringCompleted += new DownloadStringCompletedEventHandler(myrss_DownloadStringCompleted);

            //start the download but don't block
            myrss.DownloadStringAsync(new Uri(site));
        }

        // handle the downloaded feed items
        void myrss_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e)
        {
            if (e.Error != null) return;

            XElement rssItems = XElement.Parse(e.Result);//here is where we parse the RSS feed

            /*
                Here is where we use Linq. Notice the syntax is similar 
                to SQL but order is from .. where .. select
                The thing analagous to a SQL table in this case are the item's in the RSS feed.
                The Descendants("item") is acting roughly like a syntax-checked XPath query.
                A "row" returned roughly will correspond to a title and link.
             */
            listBox1.ItemsSource = from item in rssItems.Descendants("item") 
                                   select new RssItem
                                   {
                                       Title = item.Element("title").Value,
                                       Link = item.Element("link").Value
                                   };

        }
    }
}

Demo RSS App screenshot

Networking on the iPhone

• The iPhone analog of WebView is UIWebView.
• You could drag and drop this into a view using Interface Builder.
• But since we haven't done UI stuff programmatically yet, let's consider how we could do it.
• Create a new window-based application then modify the delegate:

  - (void)applicationDidFinishLaunching:(UIApplication *)application {    
  
      // Override point for customization after application launch
      [window makeKeyAndVisible];
  
  	CGRect bounds = [[UIScreen mainScreen ] applicationFrame];
  	UIWebView *webView = [[UIWebView alloc] initWithFrame:bounds];
  	webView.scalesPageToFit = YES;
  		
      [window addSubview:webView];
  	
  	NSURL *url = [NSURL URLWithString:@"http://www.pollett.org"];
  	NSURLRequest *request = [NSURLRequest requestWithURL:url];
  	[webView loadRequest:request];
  }
  

Some UIWebView and UiWebViewDelegate methods

• A UIWebView object manages browser history and you can use these to control browsing programmatically with calls like: [webView goBack]; [webView goForward]; [webView reload]; [webView stopLoading];
• The web view class also supports a set of delegate methods which will be called automatically when certain events occur.
• To set the handler for this methods you could create a subclass of UIWebViewDelegate and then set it with the command:

  webView.delegate = myDelegate;
  

• Here are some of the messages you can override:
  • -(BOOL)webView:(UIWebView *)webView, shouldStartLoadWithRequest:(NSURLRequest *)request, navigationType:(UIWebViewNavigationType)navigationType; -- this is called when the web view is instructed to load content. It should return YES to commence loading. The possible navigationType parameters are: UIWebViewNavigationTypeLinkClicked, UIWebViewNavigationTypeFormSubmitted, UIWebViewNavigationTypeBackForward, UIWebViewNavigationTypeReload, UIWebViewNavigationTypeFormResubmitted, UIWebViewNavigationTypeOther.
  • -(void)webViewDidStartLoad:(UIWebView)webView; -- notified when the web view begins loading a request
  • -(void)webViewDidFinishLoad:(UIWebView)webView; -- notified when the web view finishes loading a request
  • -(void)webView:(UIWebView *)webView, didFailLoadWithError:(NSError *)error -- Notified if an error occurs in the loading of a request

Getting the Response into Data

• So what if we want a quick and dirty way to get the response of a web service?
• We can do:

  NSData *myData = [NSData dataWithContentsOfURL: [NSURL URLWithString: @"http://web_service_url"]];
  

• Many objects actually have a way to directly use an NSData object. For instance, if the response was an image we could do:

  UIImage *image = [UIImage imageWithData: myData]; 
  

• To get a string out of myData for parsing we could do:

  NSString *string = [NSString stringWithFormat:@"%.*s", [myData length], [myData bytes]];