WEBVTT

1
00:00:00.410 --> 00:00:03.360
We are so
close to being done with this app.

2
00:00:03.360 --> 00:00:07.520
All we have left is to figure out how
to manually create our own back stack.

3
00:00:07.520 --> 00:00:11.510
This is one of the headaches about reusing
views in an activity like we are, but

4
00:00:11.510 --> 00:00:12.690
I think it's worth it.

5
00:00:12.690 --> 00:00:14.380
In our case it's kind of easy.

6
00:00:14.380 --> 00:00:17.210
We're using ints to control
the pages being loaded.

7
00:00:17.210 --> 00:00:20.250
All we need to do is keep track of
the ints we use in our own stack and

8
00:00:20.250 --> 00:00:21.360
we will be set.

9
00:00:21.360 --> 00:00:24.310
Lucky for us,
Java has a great stack class.

10
00:00:24.310 --> 00:00:26.502
Let's create a new member variable and
see how it works.

11
00:00:26.502 --> 00:00:30.257
So let's switch to store activity, got to
make sure that we're in the right one.

12
00:00:30.257 --> 00:00:35.333
And up here at the top,
let's create a new private stack.

13
00:00:35.333 --> 00:00:38.617
And it's a generic, so we can't use int,
that's a primitive type,

14
00:00:38.617 --> 00:00:41.720
remember we've got to use
the full blown object.

15
00:00:41.720 --> 00:00:43.540
So we can type Integer like
this with a capital I.

16
00:00:43.540 --> 00:00:47.080
And let's name this pageStack.

17
00:00:47.080 --> 00:00:48.210
And we can set it right here.

18
00:00:48.210 --> 00:00:55.640
Let's set this equal to a new Stack
type Integer, and there we go.

19
00:00:55.640 --> 00:00:58.760
So adding items to a stack,
like adding a piece of paper on a stack,

20
00:00:58.760 --> 00:01:01.330
is called pushing
something onto the stack.

21
00:01:01.330 --> 00:01:03.860
So in this example every
time we load a page,

22
00:01:03.860 --> 00:01:07.440
we want to push that page
number onto this new stack.

23
00:01:07.440 --> 00:01:09.030
So let's go down to load page.

24
00:01:10.490 --> 00:01:13.400
And here the very first thing
we can do is add a new line.

25
00:01:14.880 --> 00:01:17.710
And from our new pageStack variable,

26
00:01:17.710 --> 00:01:23.320
we want to push the integer,
which in this case is pageNumber.

27
00:01:23.320 --> 00:01:24.210
All right, easy enough.

28
00:01:24.210 --> 00:01:28.060
So this is going to build up a stack
of the pages as we go through them.

29
00:01:28.060 --> 00:01:29.810
Now, it's time for the opposite.

30
00:01:29.810 --> 00:01:33.430
When we remove something from a stack,
it's called popping from a stack.

31
00:01:33.430 --> 00:01:37.320
And we want to pop from the stack each
time the user taps on the back button.

32
00:01:37.320 --> 00:01:41.360
When the back button is pressed, a method
called onBackPressed is called, and

33
00:01:41.360 --> 00:01:44.260
we can override that to
add our own custom code.

34
00:01:44.260 --> 00:01:45.940
So let's add that down at the bottom here.

35
00:01:45.940 --> 00:01:47.520
It's an activity method.

36
00:01:47.520 --> 00:01:50.754
So at the very bottom before
the last curly brace,

37
00:01:50.754 --> 00:01:54.452
let's type onBackPressed and
Enter for autocomplete.

38
00:01:54.452 --> 00:01:55.418
So in this case,

39
00:01:55.418 --> 00:02:00.210
the call to super.onBackPressed will
execute the normal back function.

40
00:02:00.210 --> 00:02:03.530
If we leave it alone, it will pop or
exit the current activity and

41
00:02:03.530 --> 00:02:06.820
go back to main activity, no matter
which page of the story we're on.

42
00:02:06.820 --> 00:02:09.940
We only wanna do that when
we're on the very first page.

43
00:02:09.940 --> 00:02:15.586
Lets start by popping the current page
number from our page stack, pageStack.pop.

44
00:02:15.586 --> 00:02:18.000
We don't need to know
what the page number is,

45
00:02:18.000 --> 00:02:20.080
we can just simply remove it
from the top of the stack.

46
00:02:20.080 --> 00:02:22.540
All right let's think through
this a little bit more.

47
00:02:22.540 --> 00:02:24.710
If we're on the first page of our story,

48
00:02:24.710 --> 00:02:27.260
there will be one page
number on the stack.

49
00:02:27.260 --> 00:02:31.390
So this first line will pop it off,
meaning that the stack will now be empty.

50
00:02:31.390 --> 00:02:34.000
So we can now run a check for
an empty stack like this.

51
00:02:34.000 --> 00:02:40.670
If pageStack.isEmpty() and now in this case,

52
00:02:40.670 --> 00:02:46.380
we want to call super.onBackPressed,
and go back to our main activity.

53
00:02:46.380 --> 00:02:47.740
If it's not empty though,

54
00:02:47.740 --> 00:02:51.840
here in the else block, then that means
we're on a further page in our story.

55
00:02:51.840 --> 00:02:54.250
We want to load the previous page.

56
00:02:54.250 --> 00:02:55.930
Now this gets a little tricky.

57
00:02:55.930 --> 00:03:00.090
If we get the previous page number and
then call load page with it, then we will

58
00:03:00.090 --> 00:03:05.090
push that same page number on to the stack
again because that line we added up here

59
00:03:05.090 --> 00:03:10.140
in load page, the very first line, you'll
push the page number back on to the stack.

60
00:03:10.140 --> 00:03:13.310
That means that we would end up with
the same page number two times in a row

61
00:03:13.310 --> 00:03:14.340
on the stack.

62
00:03:14.340 --> 00:03:17.910
I think it's better to always push
the page number in this load page method.

63
00:03:17.910 --> 00:03:21.200
So we can work around this by popping
the previous page from the stack

64
00:03:21.200 --> 00:03:24.510
right when we call
loadPage back down here.

65
00:03:24.510 --> 00:03:28.740
So what I mean is we'll reload
the page right away and for

66
00:03:28.740 --> 00:03:33.880
the page number, we'll pop it
right out stack, pageStack.pop

67
00:03:33.880 --> 00:03:38.690
will actually return the popped int, so we
can pass it right back into the loadPage.

68
00:03:38.690 --> 00:03:42.590
This looks a little bit funny because we
end up calling pop twice in a row, but

69
00:03:42.590 --> 00:03:45.190
it's only because this second call to pop

70
00:03:45.190 --> 00:03:49.490
will then be pushed right back on
because we're reloading the page.

71
00:03:49.490 --> 00:03:51.610
So let's review this whole
thing one more time.

72
00:03:51.610 --> 00:03:54.420
Let's say we're on page one
after starting at page zero.

73
00:03:54.420 --> 00:03:57.410
Our stack will have zero, followed by one.

74
00:03:57.410 --> 00:04:00.340
So let's review this one more time,
I review it here with comments.

75
00:04:00.340 --> 00:04:04.410
Let's say we're on page one
after starting on page zero.

76
00:04:04.410 --> 00:04:07.010
Our stack will have
zero followed by a one.

77
00:04:07.010 --> 00:04:11.450
This first call to pop up here
will pop page one from our stack,

78
00:04:13.370 --> 00:04:15.680
leaving only page zero on the page stack.

79
00:04:15.680 --> 00:04:19.380
It's not empty, so when we check here
we're going to skip down to the else

80
00:04:19.380 --> 00:04:23.460
block, and now this second
block will remove page zero.

81
00:04:25.810 --> 00:04:33.540
But, we are then calling load page,
with that zero, and we reload the page and

82
00:04:33.540 --> 00:04:38.970
we will push page zero
back on to the stack.

83
00:04:38.970 --> 00:04:40.380
I know this can get a little confusing,

84
00:04:40.380 --> 00:04:43.190
which is why I'm trying to
talk through it, in detail.

85
00:04:43.190 --> 00:04:44.540
I think we're ready to try it out though.

86
00:04:44.540 --> 00:04:45.860
I'm going to delete this.

87
00:04:45.860 --> 00:04:48.550
The key is to talk through it and
do a lot of testing.

88
00:04:48.550 --> 00:04:49.510
So let's test it out.

89
00:04:49.510 --> 00:04:52.690
All right.

90
00:04:52.690 --> 00:04:54.700
Let's test a few different cases here.

91
00:04:56.270 --> 00:04:58.090
Start the adventure, and

92
00:04:58.090 --> 00:05:01.750
we'll click through until we
get all the way to the end.

93
00:05:01.750 --> 00:05:02.830
And now let's use our back button.

94
00:05:02.830 --> 00:05:06.560
Let's see if we go back through the same
pages, yeah, it's working, look at that.

95
00:05:06.560 --> 00:05:08.270
All right, we're back at page zero,

96
00:05:08.270 --> 00:05:13.590
and if we hit back again,
we go back and the name field is empty.

97
00:05:13.590 --> 00:05:14.140
Let's try it again.

98
00:05:16.030 --> 00:05:18.580
Come in here, we'll go back to the end.

99
00:05:18.580 --> 00:05:19.420
And at this point,

100
00:05:19.420 --> 00:05:22.370
let's click on the up button and we should
go all the way up to main activity.

101
00:05:22.370 --> 00:05:24.240
And our name is cleared, very good.

102
00:05:25.780 --> 00:05:27.090
Let's try it one more time.

103
00:05:28.240 --> 00:05:29.010
Let's go through.

104
00:05:30.370 --> 00:05:32.210
Click on a couple of things.

105
00:05:32.210 --> 00:05:36.190
Let's play again, and keep going through.

106
00:05:37.460 --> 00:05:38.950
Sure thing, we can just keep clicking.

107
00:05:40.020 --> 00:05:44.660
And we should be able to click on
the back button and go all the way back.

108
00:05:45.670 --> 00:05:46.960
We could even go back, in this case,

109
00:05:46.960 --> 00:05:49.610
through previous stories; which
if we really wanted to fix,

110
00:05:49.610 --> 00:05:54.390
we could clear our stack each time we
hit play again and load page zero.

111
00:05:56.960 --> 00:05:59.100
But this is great, our app is complete!

112
00:05:59.100 --> 00:06:01.920
You have done it,
you have created the interactive story.