Join Michael Lehman for an in-depth discussion in this video Understanding the data model, part of Building a Note-Taking App for Windows Phone 8 and Windows Store.
In this chapter, we're going to talk about the data model. And we're going to build a common data model to use in both the Windows Phone and the Windows Store version of plain old notes. In both Windows Phone and Windows Store apps, the ViewModel convention is used where the model holds the data structure for the app. the view holds the user interface definition. And the view model handles data manipulation and persistence. Things like adding an item to a list of items and storing and retrieving data from external devices. So first we're going to take a look at the raw out of the box templates for a windows phone app and a windows store app.
And take a look at what the data model looks like as provided initially by Microsoft. And then, we're going to look at the data model which is both a model and a view model. That were going to build in this chapter and then we'll look at how that's different than what's in the Windows Phone and Windows store app and how we're going to create a common one. So, let's go off to visual studio and build a out of the box, from the template, symbol application, for Windows Phone and for Windows Store. And take a look at the codes that's generated from the template. So first let's go build a out of the box Windows Phone app. I'm going to go to Templates > Visual C# > Windows Phone > Windows Phone DataBound app.
This is an app that has not only the View already preconstructed, but also a sample model and view model for us to use. And so we're going to call this OOB in phone. And if we take a look at what's in the solution, since we're looking just at the data model at this point, we'll see two things in the View Models folder, an Item View Model and a Main View Model. Now, the Main View Model is that view model that I was talking about where it contains the collection of items and maintains the individual items in your data model. The item view model is the information for a single individual item. So first of all let's go take a quick look at what the item view model looks like. And the way XAML works with data binding, for those of you coming from the iOS and Android platforms, this is similar to maintaining the data in your model and handling the way that you notify.
The user interface, the things have changed in the model. In an iOS app, this is something like how things happen when you want to reload the table data after you've changed the data model underneath the table. And similarly, in an Android app, when you've changed data in the table and you need to inform the adapter that the data has changed. The way that's done in Windows Phone and Windows Store is by using this basic interface called I notify property changed. And basically the infrastructure uses introspection to bind the data from the data model to the user interface. And then every time you make a change in the data, you have to call a method in the I notify property changed interface in order to tell external watchers that the data inside this data model has changed.
So if we look at this very simple data model, we can see. That we have our item view model, which is the name of our class. And it extends, INotifyPropertyChanged. And every data property in here has two parts. It has a backing variable. In this particular case, string _id. And a public property, which has a getter, which simply returns the value of that ID and a setter, which checks to see if the new value is different than the value of the id, if the value is different than that of the underbar id backing variable. It not only sets the value, here on line 30, it also calls this method notified property change, and passes in the string name of this property. This is how, when the user interface is bound in a property, if there were any, that when the data item is changed, the user interface can automatically change. In the out of the box template for the item view model in a Windows phone there are three properties here.
There's line one, line two, and line three. They have their corresponding backing variables here line one, line two, and line three and their corresponding getters and center properties, line one. Line two and line three. Now we take a look at line three here and you can see it looks just like line one except that the backing variable is underscore line three, instead of underscore line one. But they all share this same notify property changed method, so let's take a look at the notify party change method because it's shared by every single property. The way it works is that there's a .net event here, a property changed event. And the way the system works underneath the covers is when you do a binding from XAML to this data property it adds a listener in this event handler. So that they can find out when properties have changed, and then the method notify property changed, which is part of that interface that I mentioned. Top, I notify property changed, takes in a property name and looks to see whether or not anybody's listening.
If the handler isn't empty, that means at least one other piece of the code is listening. Then we raised a property changed event and pass it a property changed event args structure, which is passed in the property name and that's how, when the Xaml says, this field is bound to the line 1 property, when line 1 changes, it's listing for changing on the model. The model says, hey line 1 changed. The Xaml binding logic can then go retrieve the value of the line 1 property. And change the way it looks on the user interface. Now, let's take a look at the view model here in main view model. Similarly, it's an I notify property change based class as well but instead of representing a single data item, it represents a collection of data items. In this case, a collection as you can see here on line 12. Of item view model objects and that's how when we look at our app we'll come back here to the main page and take a quick look you can see our app has my you know item one item two item three item four and the way that works is that the main view model serves up a collection of items.
And similarly this collection of items can be observable that way when someone meaning in your code in your code behind adds an item to the collection or deletes an item in the collection. The zammel run time can automatically update the list so that the data that you changed in the background either disappears from the user interface or appears in the user interface. Now in this audio box code, they've provided a sample property in this view model in order to have a single data item view model on the main view model. Nothing really uses this in the code. And they just show this in order to be able to show you how you would hear. Localize this.
What's important in terms of looking at this code from our point of view is that there's this Boolean property, is data loaded, which is used to determine, when the app starts up, whether the data has to be loaded from some external backing store or whether the data's already loaded And you can simply just use it. And there's another method here called load data, which in this particular sample out of the box automatically creates, as you can see, a bunch of items of type item view model. Fills them with the various properties, and then adds them to the items collection for this main view model.
It's just the way you can have the data bound app have some data when you initially fire it up. The ting that's important to understand here is that a view model oftentimes has multiple layers. A view model is implemented on top of i notify property changed. And oftentimes, at least in terms of the out of the box template, The view model will have some code that's just automatically created for the developers so that they can see something on the screen when they just run the app right out of the box. So, just so that we can see what this looks like, let's go ahead and run this app.
And we're running it on one of the Windows phone emulators. In this case the WVGA emulator. For those of you coming from iPhone and Android Similarly to iOS and similar to Android, there are multiple configurations for the Windows Phone emulator, such as there are for three and a half inch iOS device, four inch iOS device, and iPad, and different sized screens for Android. Unlike the iOS emulator, the Windows Phone emulator is actually a full-blown virtual machine. So sometimes it takes a while to start up.
So the emulator's now started up, now we're deploying our simple app to the emulator and you can see here now we have a list of things. We can scroll our list of items, and if we pick one we can look at the data for a specific item. And that's interacting with this view model that's created. Now that we've taken a look at how a eye notify property changed view model was used in Windows phone. Let's go take a look at the same exact thing in Windows store and then we'll take a look at the common data model that we're building for the plain old notes apps for this course. Now let's do the second part.
Let's build an out of the box Windows store app using the template provided by Microsoft Inside Visual Studio. So we'll start out the project We're still in templates, visual C#. We're going to go to Windows Store now, and we're going to create a split app. A split app, as it says over here in the description, is a two page project that has a set of grids at the beginning, this area down here, and then an individual list of items with details. And we're going to use that because we're going to look at this. Out of the box data model when we actually build (UNKNOWN) nodes we're actually going to delete the grid at the front because we're not doing groups of notes, we're just doing a single list of notes and then we're going to add an additional page to allow you to edit your notes on the end of this.
But we're going to start with this split app template and we'll call this OOBWindows Store. The reason we're looking at this again, remember, is we're going to go and look at the data model and how the data model is used by the application. So, I'm going to close this and look inside the data model folder, you know it's not called view models anymore, it's called data model in Window's store, but it essentially has the same thing in it. So let's go take a quick look at this. And the first thing you notice is that it's not based on i notify property changed.
Except that it really is. Let's go take a look at what this bindable base class actually is. This is just a class provided by Microsoft to make it easier to create I notify property changed based. Objects without having to write a bunch of code over and over again. If we take a look at bindable base, you'll see it only has three things. It has an on property changed method, a property changed event, and a set property using generics that allows you to set the property and automatically file the property changed. So we take a look and we see on line 17 here, there's our event handlers, just as we saw on Windows phone.
Here's the set property method. The set property method looks very much like what we saw on Windows phone, except that this is automatically then says did we have to change anything because the values are the same or different. And then automatically calls on property change in order to be able to change the name of the property And then finally our own property change looks very similar to the one we saw in Windows Phone. It simply says, go get the event handler. If the event handler does not equal null, then raise a property changed event, passing in the name of the property as the argument. So now having seen that behind the scenes, you can see that when you build a common data model, because we're going to build one that looks more like the one in Windows Phone. Because it implements the same i property changed, again remember up here, I notify property changed interface because it implements that. It's equivalent to the way the data model is implemented in the template for a Windows store app.
So let's go back and take a look at that sample data source, which is based on this common bindable base class that we just looked at. So the way they've got it set up, very similar and straightforward. But it's slightly different because of the way the data is created in this template. There's a few classes in here. There's Sample Data Common, Sample Data Item, Sample Data Group and Sample Data Source. Now, similar to Windows Phone, the Sample Data Item is the individual item that the app uses. In the Windows store template, and we'll take a look at that in just a second before we carry on with all the more detail of this, it's actually set up as a two level data store.
There's groups, and inside each group there's items, and then of course inside each item there's data. So in our Plain Ol' Notes we're only going to have one level, so when we actually start building our data model. We're only going to have one level, so we'll have items in a data source. And sample data common, is simply something they created in order to be able to use it, to be able to share between data group and data item for the purpose of this template. So that each individual group and data item can share the fact that they each have, as you can see here, a title, a sub title, a description, and a path. And if we go look at sample data item, you'll see that that's based on sample data common, it has one additional property beyond the items in the common, which is the content for the actual content of the item, this method right here, this property.
And it also has a group property that indicates which groups this data item belongs to. Now in Plain Old Notes, we don't have groups. So we don't have that. But you get the idea. There's basically this simple data item which has a title, and some contents in the Windows Store implementation. And then down here when we look at sample data source, this looks very much like the main view model that we saw. In Windows Phone. It has an observable collection of sample data groups, and it has a method to allow you to get the particular individual group, or to get all the groups.
It also has methods because this is a two-level data store, to allow you to get a specific item based on that item ID. And finally, as we saw before, there's code here which initializes the groups and items putting some initial data in there. Let's take a look at this app in action. When you're running a Windows Store app, you have two choices. Because, unlike Windows Phone, you don't have to have a separate virtual machine because the machine you're running on, developing using Visual Studio 2012 Has to be a Windows 8 machine.
Therefore you're guaranteed to able to run the machine on the same OS that you're developing on. Very similar to the way you've always done it in Windows 7 and before. But there's two ways to do that. You can either run it on the same machine as if it were the same machine, in other words if your development machine. Has the facilities that you need. For example, you want to test, touch, and swipe, and different orientation changes, that's great. If you're machine doesn't actually have those capabilities you can run it on what's called the simulator. So, we're going to run it first on the local machine, then on the simulator, and you'll see that even though local machine and simulator are different.
The differences are not that they're pointing to different machines, they're actually portals to the same machine. They're just different ways, of allowing you to experience the user interaction. So, first of all, we'll run it on the local machine and you see here's our groups. We click into a group and we can see the list of items, as we change items, you see that the item detail, shows up over here. Now let's go ahead and go back to the desktop, stop that, notice that quitting the app and going back to the desktop, does not automatically stop the debugging. So often times in Windows Store you'll have to hit the stop button if you don't want to wait for it to time out.
Now, let's look at the same thing on the simulator. The simulator is essentially a miniaturized version of the user interface. You'll notice it's exactly the same machine that you had when you were running on your actual desktop. But it looks more like a surface. It has a home button to stop the image. You come back to the desktop. See, it's the same desktop as we have on our development system. If we come back to the Windows screen, and we scroll over here to the right, you can see we have our out-of-box Windows store icon, and we can bring the app back up again.
Also, you'll notice, over here in the simulator, you have the mouse mode, which is what we've been using here, or you can also have the Touch mode, that allows you to do things for example swipe in from the right to bring up the charms as well as tap. You can see that the way the visual highlightings done just as it does on a Windows Store device with a touch screen. You can also take screen shots, you can Change the orientation to make sure that your app supports multiple orientations. Rotate left and right. You can also do pinch and zoom, and do rotation in touch mode.
All right, that's a quick look at the out of the box template for Windows Phone, and the out of the box template for Windows Store. Next up, we're going to go look at the actual data model we're going to build beginning with the properties that are in our data model.
Like its companions, it will take you through building a complete mobile app from scratch; but this installment uses C#/XAML with the Windows Phone SDK and Windows Store SDK to get the job done. Author Michael Lehman explains the app's class structure, model, and page flows, and then shows you how to build the data model from scratch, handle orientation and size changes, create the "code behind" the markup, implement persistence, and test your app on a device emulator.
These three related courses use the same assets to develop the same app. (See Building a Note-Taking App for iOS and Building a Note-Taking App for Android for more information.) Compare and contrast the different steps and discover the similarities and differences!
- Previewing the sample note-taking app
- Understanding the app structure
- Reviewing concepts unique to Windows Phone and Windows Store apps
- Creating the data model
- Exploring public properties and class methods
- Building the XAML
- Enhancing the data model
- Building the code behind
- Sharing asset with Android and iOS