Facelift for the Windows Phone 7 Social Viewer Template

Facelift for the Windows Phone 7 Social Viewer Template

I’ve just checked in the latest Social Viewer template to http://socialviewer.codeplex.com which among a number of bug fixes (including the fix to get Twitter auth working again) also includes a significant facelift.

Previously you defined a number of sources (RSS, Atom, Facebook, Twitter or your own) then grouped them into lists. These lists would then appear in a panorama. This sort of worked for a small number of lists, say 2-4, but you ended up with list after list after list – probably a pivot would be better suited to displaying all the lists.

I’m not a big fan of using a pivot as the starting point for an application so I wanted to craft a better experience that demonstrated the use of both the panorama and pivot controls, as well as using more of the features of the social viewer template itself. What we ended up with is a template that is broken into a main panorama which shows highlights, a more detailed pivot showing a number of on-demand lists and then of course the reading page. Let’s walk through them.

Main Panorama

The main panorama is essentially the launching point for the application. The first pane includes a vertical list of items that is entitled “what’s new” in keeping with the what’s new lists across the core platform. This is a simple list allowing you to easily scan the list for items of interest. Items appear dimmed/greyed to indicate it has been read.

Next we have the recent panorama item where we introduce a bit of a change in pace – you’ll again notice this across the core platform, where you’ll see the panorama broken up into different styles of panes. Here we’re including items that have got images/enclosures to add some life to the panorama.

Lastly we have a pane that is sort of a menu in that it links to different parts of the application. As the template can take advantage of trial mode, there is also a Purchase menu item that is not visible here, linking the user off to the Marketplace link for the application to be purchased.

image image image image

On-Demand Pivot

Clicking on the Developers link on the main panorama navigates the user to a page which contains the pivot control. The control is data bound to a collection of lists. As the user flicks between the lists, the corresponding feeds are downloaded and processed on-demand (as you can see in the second image with the progress bar still visible).

image image image image

Reading

Clicking on any of the items from any of the lists on the Main Panorama or the On-Demand Pivot will navigate the user to the reading page. Here the full post is available, along with any links (see second image) that the user may want to navigate to. The user can also opt to share the post via Facebook, email the post or tweet a reference to the post.

image image image

Settings and About

The last two pages of the template are the Settings and About pages. These are provided out of the box to allow the user to manage their Facebook and Twitter credentials, and to list relevant information about the sources of the data for the application. The About page also provides a mechanism whereby the user can review (via Marketplace) or provide feedback (via email) on the application.

image image

I would love feedback on the latest version of the social viewer template – http://socialviewer.codeplex.com (the updated version is still on the source code tab until I finish testing the updates)

Published

Published

 Visual Studio Magazine (Mobile Corner)

 

BuildMobile (Windows Phone)

Books

MSDN

Display PDFs in your Windows Phone 7 application

Display PDFs in your Windows Phone 7 application

I just downloaded and was experimenting with the CTP of ComponentOne Studio for Windows Phone. Normally I don’t give these third party control libraries much interest as they’re usually expensive and generally just add another dependency to your application that you have no control over. This is particularly true with mobile applications where performance is so critical.

Anyhow, the one thing that caught my eye in this control library is that there is a PDF Viewer control. There is full documentation available online, including details of this control. What interested me was the following:

View and Save PDF Files

The C1PdfViewer control can be used to view and save PDF files on the Windows Phone device. C1PdfViewer has no external dependency on Adobe Reader to view or save files. Content is parsed and rendered as native XAML elements.

That it awesome that they’re rendering the PDF as native XAML.

After downloading the CTP I was a little lost to start with as I couldn’t see the controls appear within Visual Studio. However they ship a cool Sample Explorer which I was able to use to play around with their samples.

image

After taking a look at the sample I decided to see how easy it was to create a simple application that displays a PDF. Rather than loading the PDF from a resource within the application which is what the sample demonstrates, I decided to load a test PDF located at  http://www.blhr.org/media/documents/test.pdf

The XAML for MainPage is:

<phone:PhoneApplicationPage
    x_Class=”PDFViewer.MainPage”
   
   
   
   
    Loaded=”MainPageLoaded”>

    <Grid>
            <c1Pdf:C1PdfViewer x_Name=”pdfViewer”
                               ViewMode=”FitWidth”
                               Visibility=”Collapsed” />
    </Grid>
</phone:PhoneApplicationPage>

And the code to load the PDF is quite simple:

public partial class MainPage : PhoneApplicationPage {
    public MainPage() {
        InitializeComponent();
    }
    private WebClient wc = new WebClient();
    private void MainPageLoaded(object sender, RoutedEventArgs e) {
        wc.OpenReadCompleted += WcOpenReadCompleted;
        wc.OpenReadAsync(new Uri(http://www.blhr.org/media/documents/test.pdf));
    }
    void WcOpenReadCompleted(object sender, OpenReadCompletedEventArgs e) {
        pdfViewer.LoadDocument(e.Result);
        pdfViewer.Visibility = Visibility.Visible;
    }
}

Running this displays the pdf in the application:

image

Warning: There are some definite limitations with this control that are outlined both on the website and within the documentation. For example my first test PDF didn’t render (http://www.education.gov.yk.ca/pdf/pdf-test.pdf) throwing an exception relating to do with the compression format. The guidance is currently to only use this control for rendering PDFs that you have control over.

 

Windows Phone 7 Social Viewer Template v2 Published

Windows Phone 7 Social Viewer Template v2 Published

If you want to jump start your Windows Phone application development, why not download the Social Viewer template available at http://socialviewer.codeplex.com. You can use this to simplify the creation of apps that read data from Facebook, Twitter, Blogs and any other data feed you might have.

The template integrates directly into Visual Studio 2010 (which you’ll need to do Windows Phone 7 development – http://create.msdn.com) and appears in the New Project dialog.

image

Like most Visual Studio 2010, once you’ve created a new project you can simply hit F5 to run it in the emulator or on a device. Pan left-right to see the different lists. Select an item to read the full item.

image  image  image  image

You can easily change the feeds and the lists that are displayed to the user in the configuration.xaml file. Add api keys for Facebook, Twitter and AdGACto allow the user to post to Facebook or Twitter, and to integrate Ads into your application.

Get the Social Viewer Template v2 from http://socialviewer.codeplex.com today and get building your WP7 applications.