Part 26 - Exercise: The Daily Rituals App

Part 26 - Exercise: The Daily Rituals App

Update: 2014-05-05
Share

Description

Download the source code for this lesson at http://absolutebeginner.codeplex.com/

In this exercise we’ll build a project that combines many of the things we talked about previously into a single example.  The Daily Rituals project is essentially it's a goal-tracking app.  The idea is, for 30 days, you'll track your progress against all the goals you've created. 

clip_image002

For example, I'll create a new ritual or goal for myself.  I’ll click the + Add icon in the Command Bar …

clip_image004

  Which allows me to add a new Ritual.  I’ll create dummy data for this demo, the Goal Name “Ritual 1” and the Goal Description: “Description of my new ritual”, and I will click the Add button …

clip_image006

I’ll return to the main screen where I can see a list of rituals.  (I’ve added a second one in the screen shot, below):

clip_image008

I can click the “I Did This Today” button which will keep track of the days I completed this goal and it will show progress on a Progress Control below the Ritual.  The progress bar will fill up over 30 days of establishing these daily rituals.

I’ll begin by (1) creating a new Blank App project (2) called Daily Rituals.  (3) I’ll click the OK button on the New Project dialog to create the project.

clip_image010

First, I’ll create a new folder called DataSource:

clip_image012

Then right-click to Add > New Item … in that folder.

In the Add New Item dialog, (1) I’ll add a Class (2) named DataSource.cs then (3) click the Add button:

clip_image014

First, I’ll create a simple Ritual class using the prop code snippet to create the auto-implemented properties.  I’ll also add the proper using statement for the ObservableCollection<T> using the Control + [dot] keyboard shortcut.

clip_image016

Second, I’ll flesh out the DataSource class adding a private field of type ObservableCollection<Ritual> called _rituals.  I’ll create a new instance of ObservableCollection<Ritual> in the constructor.  As you may anticipate, the rest of the DataSource class will define methods that operate on this private field.

clip_image018

We’ll follow the pattern we’ve seen several times before now, creating a helper method called ensureDataLoaded() that will determine whether or not the _rituals collection contains instances of Ritual.  If not, then we’ll call the (yet to be implemented) getRitualDataAsync() method.

clip_image020

We delegate the responsibility of retrieving data from a serialized file back into an object graph stored in the _rituals collection to the getRitualDataAsync() method.  We’ve seen this code before when working with serialized types that we need to “re-hydrate” back into an object graph.  Most of the heavy lifting is performed by the DataContractJsonSerializer and the ApplicationData.Current.LocalFolder.OpenStreamForReadAsync() method.

clip_image022

There are several things we’ll have to fix with this code, including the creation of a constant for the fileName which I’ll define near the top of the DataSource class:

clip_image024

… and I’ll also need to add various using statements to satisfy all of the class references:

clip_image026

Next, I’ll implement the corollary to the getRitualDataAsync(), the saveRitualDataAsync() method which will be delegated the responsibility of persisting / “de-hydrating” the object graph stored in the _rituals field to disk.  Here again, most of the heavy lifting is performed by the DataContractJsonSerializer and the Application.Current.LocalFolder.OpenStreamForWriteAsync() method.

clip_image028

We will want to allow one of our pages to add new Rituals to the _rituals collection.  Therefore, we’ll implement a public method that will do that:

clip_image030

Furthermore, we’ll want to retrieve the _rituals collection:

clip_image032

We have enough of the data model in place.  Next we can focus on the AddRitual.xaml page.  I’ll right-click the project name and select Add > New Item … to display the Add New Item dialog.  I’ll (1) select a Blank Page, (2) name it AddRitual.xaml, and (3) click the Add button:

clip_image034

Before we begin work on the new page, we’ll need to be able to reference the DataSource class from the entire project.  To do so, (1) in the App.xaml.cs, (2) I’ll create a public static field called DataModel (3) which will necessitate the need to add a using statement to the DataModel namespace.

<img title="clip_image036" src="https://files.channel9.msdn.com/wlwimages/19940ab4423a448c83e6a3180155d1c1/clip_

00:00
00:00
x

0.5x

0.8x

1.0x

1.25x

1.5x

2.0x

3.0x

Sleep Timer

Off

End of Episode

5 Minutes

10 Minutes

15 Minutes

30 Minutes

45 Minutes

60 Minutes

120 Minutes

Part 26 - Exercise: The Daily Rituals App

Part 26 - Exercise: The Daily Rituals App

Bob Tabor, Matthias Shapiro, Larry Lieberman