Loading the First Page

Let's hook up our data. 0:00 In our MVP pattern, we have the layout here as the view and 0:02 our story classes as the model. 0:05 Let's load the story into the layout using the presenter StoryActivity. 0:07 Let's create a new member variable because we will use our story 0:12 throughout this activity class. 0:15 So let's add a private Story and just name it story. 0:19 Now down here in onCreate, 0:23 we can initialize it with our new default constructor. 0:25 story = a new Story. 0:28 Okay, now we want to load a page from the story 0:33 both when the activity is first created and when a button is tapped on. 0:37 Sounds like we need a method. 0:41 Let's type the method we want to use right here first. 0:43 loadPage and the first page we would want to load is 0. 0:46 Okay, so now we can use the Android quick fix, Alt plus Enter, and 0:51 create this method loadPage. 0:54 Okay, so here's our new method and I'm going to change the parameter name for 0:56 int i. 0:59 Let's call this pageNumber. 1:00 Inside this new method, let's create a page named page and 1:03 let's hit Alt plus Enter to pull in our new page class. 1:07 Again, we do not want either of these PDF pages down here, so 1:12 pick the right one and let's set it equal to well, now what? 1:17 We need to get a page from our story, so let's keep typing what we want, and 1:21 then we can use Android Studio to help us create another new method. 1:24 So we want from the story to get a page of the given page number. 1:28 All right, so as expected, we don't have this method yet but 1:35 we can use another quick fix. 1:38 Alt Enter. 1:40 Create the method getPage and it adds it over here in our story class. 1:41 Looks like I hit an extra key when I hit Enter, okay. 1:44 So in here, all we wanna do is return the correct page from our pages array 1:48 given the page number parameter. 1:53 So we can just do a one line to return pages and pass in the index pageNumber. 1:55 Again technically we could access the pages array 2:02 directly if we made this a public member variable but 2:05 this little bit of encapsulation is a good program in practice. 2:08 And just to be safe, let's add a little check here to make sure that we 2:11 never request a page that's outside the bounds of the pages array. 2:14 So we can say if pageNumber is greater than or equal to pages.length, 2:18 then we would get an array out of bounds exception so 2:23 instead I'd rather have the app go back to the start then totally crash. 2:26 So let's set pageNumber here equal to 0 as a little safety catch. 2:32 All right, so back in our story activity, 2:36 now we want to wire up the data from this page to our user interface. 2:39 We'll start with variables for the views we want to update. 2:44 We can add them up top again as member variables so 2:46 that we can set them once in onCreate, but then use them in our new loadPage method. 2:49 So let's add view variables for the views we're interested in. 2:54 private ImageView, 2:57 let's call this storyImageView just like we gave it that same ID. 3:00 Then we want private TextView storyTextView. 3:05 Next we need our two buttons private Button choice1Button and 3:10 private Button choice2Button. 3:15 Next we can set these down in onCreate. 3:19 I like to keep my layout code close together so 3:22 I'm going to add some new lines after the call setContentView and 3:24 then type storyImageView = cast it to an ImageView. 3:28 And then call findViewById(R.id.storyImageView). 3:34 We need to do this three more times but for convenience sake, I'm just going to 3:40 paste this in and for your convenience, that code is available to paste below. 3:43 All right, our pieces are in place. 3:47 We have views and we have data so we just need to set the right thing for each view. 3:49 Let's start with the image down here in our loadPage method. 3:53 We earlier learned how to set the source image for 3:57 an image view in the design view of a layout. 4:00 Now we can take a look at how to set the source here in code. 4:02 So type storyImageView. 4:05 And then we want to set the drawable image for this image view, 4:08 so let's type setDrawable, and there isn't a setDrawable method, 4:12 but look at that, it's called setImageDrawable. 4:16 So go ahead and hit Enter for that. 4:19 And this method requires a parameter of type Drawable. 4:21 Let's create one on the line above. 4:25 So we want the Drawable type, and let's just name it image. 4:27 And now because we're in an activity which again, is ultimately a context. 4:32 We can use another shortcut from the context class to get a drawable resource. 4:37 Similar to what we saw previously to get a string resource. 4:41 Now this is a little bit different though. 4:44 We are going to use a method from another compatibility class called ContextCompat. 4:45 So from here we want to use auto complete and type getDrawable 4:52 then we pass in the context which is in this case is this. 4:57 And the ID of the drawable we want to get. 5:01 Let's see, where did we store the ID for the image for a specific page? 5:04 That's right, it's right there in the page class. 5:09 So from our page variable, call getImageId, which will get us 5:11 the appropriate ID to use, then we can add a semicolon and our image is now set. 5:15 Well we need to actually pop it in down here. 5:20 Lets use the image variable as the new parameter. 5:23 We're using this ContextCompat class because Android has evolved how it lets us 5:25 display and customize drawable resources over the years. 5:29 We used to be able to do this in a very similar way to strings, but 5:33 this is a better way to get a drawable now. 5:36 All right, this is quite a bit of work so let's run this and 5:37 make sure we haven't gone off the rails. 5:40 All right, loads up main activity. 5:43 I'll type my name. 5:45 Tap on the button. 5:47 And, okay, we have some success. 5:49 The image is showing up in our activity just like we wanted to see. 5:51 Let's take a quick break, and then we'll see how to add the rest of our layout. 5:55