Windows Phone 8 – Wrapping up the Contact Details Screen in Conference Buddy

Introduction

As a quick introduction, Conference Buddy is an app being written in Windows Phone 8 as well as Windows 8. We will continue working on the Windows Phone 8 app in this blog post.

Let’s take a look at what we have covered so far and what is coming up:

• Speech Recognition – Is a powerful way for your end-users to navigate and interact with your app using their voice.
• MultiResolutionImage –Makes it easy for Windows Phone 8 developers to support images in the various screen resolutions supported in Windows Phone 8.
• DataForm (Part 1) –This new component allows you to automatically generate the UI for your input forms, with support for validation and custom layouts.
• DataForm (Part 2) – We expanded on what we learned earlier about RadDataForm and showed you how to persist data to isolated storage using our control with the very popular Json.net.
• Dynamic AppBars for Conference Buddy – We discussed how to implement dynamic Application Bars as your user navigates between pages.
• Wrapping up the Contact Details Screen – We will complete the contact details page and explore how we can create the multiple Pivot items into an easily readable JSON file.

Initial Setup

Just like last time, I’m going to assume your development environment is setup and RadControls for Windows Phone 8 is installed. If you don’t have them yet then you can be downloaded from your account.

The Contact Details Page.

We can tell from the contact details page that we have been working with that our application will contain several pivot items of data including the “request follow up” section as shown in Figure 1.

Figure 1: The Request Follow Up PivotItem from the Contact Details Page.

As stated earlier, this data is being persisted to IsolatedStorage on the phone and the first pivot item looks like the following in JSON format:

{"Email":"michael.crump@telerik.com","FirstName":"Michael","LastName":"Crump","Title":"Mr","Company":"Telerik","PhoneNumber":"111-111-1111"}

In this blog post, we are going to wrap up this screen by adding in notes, subscriptions and request follow up. Just as a friendly reminder, you may click on the image above to see a larger version.

Back to our MainPage.xaml

Starting with the App Bar

We talked about dynamic app bars earlier and all I did was add in the one for the “Request Follow Up” screen. The “Notes” and “Subscriptions” use the same exact App Bar, so we are able to re-use those resources.

All 4 PivotItems

We were able to wrap up this screen with the following code: 

<!--Pivot item two-->

 <phone:PivotItem Header="notes">

 <ScrollViewer>

 <TextBox x:Name="txtNotes"/>

 </ScrollViewer>

 </phone:PivotItem>

 <!--Pivot item two-->

 <phone:PivotItem Header="subscriptions">

 <ScrollViewer>

 <StackPanel>

 <CheckBox x:Name="chkSubRegRaffle" Content="Register for the raffle"/>

 <TextBlock Text="See Telerik's Privacy Policy Terms" Foreground="Green" Margin="0, 0, 0, 20"/>

 <TextBlock Text="Receive updates about" />

 <CheckBox x:Name="chkSubDevToolsProducts" Content="Telerik DevTools Products"/>

 <CheckBox x:Name="chkSubALMProducts" Content="Telerik ALM Products"/>

 <CheckBox x:Name="chkSubTestingProducts" Content="Telerik Testing Products"/>

 <CheckBox x:Name="chkSubHTML5Products" Content="Telerik HTML5 Products"/>

 </StackPanel>

 </ScrollViewer>

 </phone:PivotItem>

 <!--Pivot item two-->

 <phone:PivotItem Header="request follow up">

 <ScrollViewer>

 <StackPanel>

 <TextBlock Text="Follow Up Type" />

 <RadioButton x:Name="rdContact" Content="Request for contact" GroupName="gnRequestFollowUp"/>

 <RadioButton x:Name="rdSuggestion" Content="Request for suggestion" GroupName="gnRequestFollowUp"/>

 <RadioButton x:Name="rdProblemReport" Content="Problem Report" GroupName="gnRequestFollowUp"/>

 <RadioButton x:Name="rdOther" Content="Other" GroupName="gnRequestFollowUp"/>

 <TextBlock Text="Product" />

 <telerikInput:RadListPicker x:Name="rlpProduct" SelectedItem="Windows 8" />

 <TextBlock Text="Subject" />

 <TextBox x:Name="txtSubject"/>

 </StackPanel>

 </ScrollViewer>

 </phone:PivotItem>

The screens look like the following once complete (please note that we have not applied any styling to the app yet!)

Now that our UI is complete, we can focus on the code to save these request in a valid JSON file.

MainPage.xaml.cs File

RadListPicker

As you can tell from the “Request Follow Up” screen, we added in yet another control by Telerik called RadListPicker. Since you already have seen the XAML to create it from the XAML snippet shown earlier, you can easily add items to it in code as shown below:

List<string> _product=new List<string>()

{

 "Windows 8",

 "Windows Phone 8",

 "WPF",

 "Silverlight"

};

this.radListPicker.ItemsSource=_product;

Simply declare a generic list and add it to the ItemSource property.

Serializing Data from Multiple PivotItems with Json.net

As stated earlier, we are going to use Json.net to serialize our Customer class. We can do this by first instantiating a MainViewModel.cs.

public class MainViewModel : INotifyPropertyChanged

{

 public MainViewModel()

    {

        customers = new List<Customer>();

    }

 private List<Customer> customers;

 public List<Customer> Customers

    {

        get

        {

 return customers;

        }

        set

        {

            customers=value;

            NotifyPropertyChanged("Customers");

        }

    }

 public event PropertyChangedEventHandler PropertyChanged;

 protected void NotifyPropertyChanged(string p)

    {

 if (PropertyChanged != null)

            PropertyChanged(this, new PropertyChangedEventArgs(p));

    }

}

Next, I’m going to append each contact saved to a file called mycontacts.json and just write the contents out to a MessageBox where you can see the data being captured.

//Add currently entered data to Customers

_vm.Customers.Add(cust);

List<Customer> customers=_vm.Customers;

string JSON=JsonConvert.SerializeObject(customers);

IsolatedStorageFile myIsolatedStorage=IsolatedStorageFile.GetUserStoreForApplication();

IsolatedStorageFileStream fileStream=myIsolatedStorage.OpenFile("mycontacts.json", FileMode.Create, FileAccess.Write);

using (StreamWriter writer=new StreamWriter(fileStream))

{

    writer.Write(JSON);

    writer.Close();

    MessageBox.Show(JSON);

}

But one last thing that I’ll need to do is see if the file exist as the user navigates to this page and Deserialize the object first. This will allow us to append onto the same file with each successful write.

protected override void OnNavigatedTo(System.Windows.Navigation.NavigationEventArgs e)

{

    IsolatedStorageFile myIsolatedStorage = IsolatedStorageFile.GetUserStoreForApplication();

    IsolatedStorageFileStream fileStream2 = myIsolatedStorage.OpenFile("mycontacts.json", FileMode.OpenOrCreate, FileAccess.ReadWrite);

 using (StreamReader streader = new StreamReader(fileStream2))

    {

 string json = streader.ReadToEnd();

        List<Customer> customers = JsonConvert.DeserializeObject<List<Customer>>(json);

        _vm.Customers = customers;

    }

}

We could further validate this JSON by using http://jsonformatter.curiousconcept.com/#jsonformatter.

Conclusion

We wrapped-up the main logic around the “contact details” page today and will start taking a look at charting in the next blog post. As always, the source code to this project is available here and if you have any questions, then just let me know.

Don’t forget the Nokia premium developer program allows you to get RadControls for Windows Phone for free and they have a lot of additional resources to help you get started.

-Michael Crump (@mbcrump)