Telerik blogs

In an earlier postings I described the project that I’ll be creating with Phil Japikse and Michael Crump, code-named Conference Buddy.   In a recent posting we looked at a wire-frame that illustrated some of the data we’ll be collecting. clip_image001In another post, I described how I might use the flip-view to move among the various data-gathering and display “pages.”

Once we gather the data, we’d like to save it to a format that will be consistent across Windows 8 C# and Windows 8 Javascript, as well as Windows 8 Phone.  For now, we’ve settled on JSON as a common persistence and wire-format.  While JSON stands for JavaScript Object Notation, there are good libraries for converting .NET objects to JSON and back.  We’ll be using one of the most popular: JSON.NET – an open source serializer for converting between .NET objects and JSON.

You can download JSON.NET from CodePlex or through NuGet; we’ll do the latter for this posting. 

To get started, we return to our earlier FlipView project, and we’ll add a Customer class to hold the data gathered on the first page,

public class Customer
{
public string Email { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Title { get; set; }
public string Company { get; set; }
public string PhoneNumber { get; set; }
}

All we need do now is to move the data entered by the user into an instance of Customer and serialize it to JSON (we’ll cover writing the actual file to local storage in a subsequent posting).

In keeping with eliminating chrome from the application and moving buttons and other navigation to the AppBar, we’ll add our Save and Delete buttons to an AppBar for this application as described in this blog post.

The Save Click Event Handler

The job of the Save button event handler is to extract the data from our TextBoxes and to populate a Customer object,

private void Save_Click( object sender, RoutedEventArgs e )
{
Customer cust = new Customer();
cust.Company = Company.Text;
cust.Email = Email.Text;
cust.FirstName = FirstName.Text;
cust.LastName = LastName.Text;
cust.PhoneNumber = PhoneNumber.Text;
cust.Title = Title.Text;

Serializing to JSON

With the Customer object populated, we’re ready to serialize to JSON.  The first task is to load the JSON.NET clip_image003library, which we do using NuGet.  To do so, click on Tools –> Library Package Manager –> Package Manager Console.  This will open the console window at the bottom of your screen, providing you the Package Manager prompt   ( PM>  ).  Enter the command to load Json.NET:

PM> Install-Package Newtonsoft.Json

Remember to put in the hyphen between Install and Package.  A few seconds later the package will have been installed.

Add a using statement to the top of your file,

using Newtonsoft.Json;

and you are ready to go. The actual serialization requires just one line of code,

string JSON = JsonConvert.SerializeObject( cust );

That’s it!  With that you’ve serialized the information from the user into a JSON string (as shown in the figure. Click on the figure clip_image004to see full size).

All that’s left is to implement Delete_Click which will clear out the entries in the data form. Since we want to do so after serializing the data as well, we’ll factor that out into a helper method,

Here’s the complete code for both button handlers and for the helper method,

private void Save_Click( object sender, RoutedEventArgs e )
{
Customer cust = new Customer();
cust.Company = Company.Text;
cust.Email = Email.Text;
cust.FirstName = FirstName.Text;
cust.LastName = LastName.Text;
cust.PhoneNumber = PhoneNumber.Text;
cust.Title = Title.Text;

string JSON = JsonConvert.SerializeObject( cust );

ClearFields();
}

private void ClearFields()
{
Company.Text = string.Empty;
Email.Text = string.Empty;
FirstName.Text = string.Empty;
LastName.Text = string.Empty;
PhoneNumber.Text = string.Empty;
Title.Text = string.Empty;
}

private void Delete_Click( object sender, RoutedEventArgs e )
{
ClearFields();
}

We’ve gathered information from the user and stored it into a JSON string. The next step is to write that to LocalStorage and then, eventually, to a service on the Web for back-end processing.

Download Source Code

Win8_Download (2)


jesseLiberty
About the Author

Jesse Liberty

 has three decades of experience writing and delivering software projects. He is the author of 2 dozen books and has been a Distinguished Software Engineer for AT&T and a VP for Information Services for Citibank and a Software Architect for PBS. You can read more on his personal blog or follow him on twitter

Comments

Comments are disabled in preview mode.