Join Michael Lehman for an in-depth discussion in this video Solution: Building the data model from scratch, part of Building a Note-Taking App for Windows Phone 8 and Windows Store.
Alright, here's the solution for our first challenge. Building the data model. Since this is the first challenge in this course, I'm actually going to go ahead and build the project, which is going to become the final Windows phone application, in the end. So I'm going to say new project. In my case, I'm going to browse to the Example files fo, Exercise Files folder. And in here chapter five, create the new project. I'm going to call it bon for wp final notes for Windows phone and I'm going to come up and select templates, visual c sharp, Windows phone. Windows phone data bound app.
So that's the template I want to use to begin starting this particular app. I'm going to go over here and I'll click OK. Select that I want Window Phone H and now we got the standard set up as we talked about earlier when we look at how the view models are set up in Windows phone. So, step one is creating this particular solution. Step two, I'm going to come down here, and I'm going to delete the item view model, and the main view model from my solution. I'm simply going to say exclude from project. And now I'm going to add two new classes.
Add new item class. First class is going to be called note model singular. And the second class is going to be called NotesModel. Alright, there's our two base classes, that's step two of our challenge. Alright, now I'm just going to go and start filling in Note Model. Alright, remember we said Note model is going to implemnet, iNotify property changed. And you'll notice that iNotify property changed isn't recoginized because it's in a different name space. So if we type in the middle there and use control period, it will tell us which particular name space we need to bring in.
With this case, system.componentmodel. Alright there,now we've got the inotify property changed interface. We can right click here and select Implement Interface, and that automatically tells us what we have to implement in order to be able to be completely implementing inotify property changed. And in this particular case it's simply the event handler so that's how we get the event handler in there. Now let's implement our notify property changed method private void notify property changed and type in the string with our property name.
And then we're going to do we'll have our handler property changed event handler and we'll see if the handler has anybody listening. Then we'll fire off the property. (SOUND). Now pass in our property name. That's the implementation of that method. Now we need to do our three properties. So remember, we have backing store for each one. First one is private string_id. And we have private. String _note and private sting _firstline.
Now we'll implement the getters and setters that go along with each one of those. So public string I.D. get return backing store set. Say if the value is being passed in here is not equal to the backing store, then we set the backing store and we call notify property changed and pass in our string that represents this property, in this case id. And we want to have this string always match this variable up here. Because the name of the property is how things are bound in XAML to the user interface.
And in order to make sure that the user interface gets updated when the properties get updated the string you pass into notify property changed has to be the same as the name of the property that you're in. Alright and one more brace to close that out and we'll format that. One more brace alright there's our property again. Public property name, public getter, public setter, check the value, if it's not the same set the value and call notify property changed. Now we need to implement the remainder of our public properties so they're going to look just like this. I'm going to copy and paste that and brave the copy and paste demons that are going to make sure that I don't accidentally forget to do something here. So I'm going to set Change it to Note, change the backing thing to underbar note, and change the NotifyPropertyChanged to Note. Now, it's very important, remember that we needed to do something else inside this. In addition to simply setting the value, we wanted to call our first line property. So take the value, look, we forgot to change these. Even though that ID property is private, it's still public to the whole class we've got here.
So we got to make sure we do that. So there. Now that looks functional. Now let's go add the additional code. Let's get the lines. And do a string array and break it it all the return characters. And then we'll say if line's dot length, is greater than 0. Meaning there's any lines in there. Then we're going to set the first line property equal to lines subzero dot replace. Because we're going to replace all of the line feed characters, which it should only be one, with an empty string.
Because we don't want our first line property to have a line feed at the end of it. And then finally, we've got our notified property changed and we're passing in note. Now you noticed our first line property setter says it doesn't exist because we not have to go and implement that. So once again let's go copy our property code here, and we'll come back down here underneath first line and implement it. Change the property name to first line and copy this variable name and replace it every place we see id. And then change this to say FirstLine.
Alright, that's the implementation of the note model. Let's do a build and see what happens. What you're going to see is that the main view model, which we excluded from our project, can no longer be found. We're going to go ahead and implement the notes model. And then we'll go back and substitute the places where it's looking for main view model. To make it look for our notes model to make sure that the UI's wired up to our data model to try it out. So we're done with the note model let's open up the notes model class and implement that. So as before its I notify property changed and as before we need system.componentmodel.
Now, we need that same notify property changed method. So I'm simply going to come back to the notes model and copy out the event handler variable and the method and come to the notes model and paste that in. So there, now I've got that. And then, you might recall that I wanted to have a variable to tell me what the next ID number of the next note that I'm going to. The hand out is. In this case, I'm going to just simply say int nextNoteNumber. And I'll initialize that in my load data method. All right, now we've got that set of infrastructure.
Now we need to create the items collection. So this is public, because the items collection needs to be bindable by your XAML, ObservableCollection of type NoteModel. And it's called items because we're going to use that name in our Zambo so it has to match the name. And it has public getter and a private setter. In order to get observable collection, once again we'll select Ctrl + Period and get systems.collections.objectmodel.
Alright, now that all resolves. Now, let's build a constructor for this class, public notes model. And in that, we'll say, this.items equals new observablecollection note model. And that's all we need to do with the constructor. But we needed to make sure that the item's property is built in the constructor. Because the XAML code might very well call a reference to the item's property, even before we get a chance to fill it in. So it has to be there, and not null when that call happens. Next up, we want our IsDataLoaded property.
Again public get, private set, then we want to have our methods. We want to be able to create a note, public note model, create new note, and there we say note model result. Equal to new note model. And we're going to initialize it with ID equal to next note number to string and note equal to empty string. And then we'll say next note number, plus, plus. Because we've used one.
Go onto the next one. Add this new item we just did. This .items.add to our items collection and then we'll return it. Alright that's our create new note method remember we wanted to have a public void update model method. And finally we wanted to have a load data method. Actually, as I recall that's supposed to be called update notes not update model. Alright, that means we've changed something in one of those items we wanted persistent.
Remember, we're going to be coming back to persistance later. Finally, the last thing we need is load data. So we say public void LoadData. And we're going to create three new items and add them to the items collections, so this.items.add, new note model, ID = '"1" for the first one. Note, it's going to be the beginning of a lyric of a song I wrote, so this is life new line, I often say new line.
It's something other then what was advertised in the brochure. And then we have brace and a closed paren, and semicolon, and another closed brace. Well actually we don't need that final closed brace. Alright and now we're simply going to copy this and duplicate it three times, copy one, two, three. So we can have note number two and note number three. Note number two, wants to say plan camping trip for April. And note number three , something from the Bard. But soft, what light through yonder window breaks. Alright, and now our data's loaded, so we say this.IsDataLoaded = true. because our data's now loaded.
Alright, that's the implementation of our data model. Once again, let's build it and make sure that we haven't gotten any typos in there, alright? We're still sitting here, we still have our two errors because we got rid of Main View Model, and now we need to hook this up to our user experience, our XAML and our code in order to try this out and make sure that our data model seems to work. Alright, let's try out our data model by fixing these two errors. So we'll come into App.xaml.cs. We'll just double click on the error, and where it says MainViewModel we're going to make that be NotesModel, one place there and one place here.
Now that's pretty straightforward. There's another place here we need to fix. And that makes everything we needed to change in the code. But there's one other thing we need to change the XAML because we no longer have Line one, line two, and line three properties. Let's go to the zamo for the main page. And look at this particular list box. And let's flip these around. Make this big enough so we can see everything here. And put all of our attributes on a separate line so we can see what we're doing. And you can see we have binding the items That's how we get connected to our data model. For right now there's two items in this long list selector item template for line one and line two of the data model that was originally in this template. We're going to come in here, delete this text block and change this binding from line one to say note so that we retrieve note property from our data. So let's go ahead and give this a whirl.
First of all, let's build it and make sure it builds. All right. And that means we forgot to put the word public some place. Notes model. needs to say public class. And make sure, pardon me, note model needs to be public class. And let's make sure that notes model, it's already a public class. All right. Let's do a build again. And what have we got, the same kind of thing probably? Items, there says Note model is less accessable than Note model items. Well, let's go take a look, right.
Public. because I didn't actually get public on the right one. I got public on the Notes model to start with, and now the Note model also has to be public. So let's build again, and now item view model. Alright, because our item view model is no longer called item view model, it's now called, note mode. And that has to do with when we navigate from the first page to the detail page. And our build succeeded. Let's go ahead and give it a shot and see what we see. Up comes our emulator, And there's our data.
And notice, because we're using the note property, we see the entire note in our list selector. What we really want to do here is have just the first line. So, let's come back here to our main page (UNKNOWN) and instead of saying Binding to Note, let's bind to First Line. Try it again and there now you can see that it has only the first line of each one of our notes. Okay and that's the solution to this challenge. Let's take a quick look and review just what we did. We created the note model class which included our first line I.D. and note backing variables.
Our first line I.D. and note properties. And an implementation of NotifyPropertyChanged. Then we created our NotesModel class, which contained our Items and IsDataLoaded properties and the methods CreateNewNote, LoadData, NotesModel, NotifyPropertyChanged, and UpdateNotes. And then finally, we came to the app.xaml.cs, and changed the class of the view model that was implemented by the original template, from main view model to notes model. And then, finally, we came into the main page, xaml.cs.
And changed the type of the selected item in our list selector to be note model. Instead of ItemViewModel. And then, last but not least, we came into our MainPage.xaml, and left only one text block inside of our ItemTemplate for the list selector, and pulled out first the Notes and then the FirstLine property. To show our list of notes in our application adjust the first line of each and that's the end of building the data model. Next up we're going to talk about how to build the user experience for the final app for Windows phone and then we'll talk about the same thing for Windows store.
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