1 00:00:00,730 --> 00:00:05,580 IT guys in this video we're going to be looking at the State pattern which is another behavioral type 2 00:00:05,580 --> 00:00:06,480 pattern. 3 00:00:06,480 --> 00:00:11,470 And I think it's awesome and it sort of reminds me of how state managers like Reebok's work. 4 00:00:11,520 --> 00:00:17,340 We have a state that we can change it throughout our script so if we want to do certain things on certain 5 00:00:17,340 --> 00:00:20,590 states or display certain content we can do that. 6 00:00:20,610 --> 00:00:25,440 So we're actually going to build a little project here which will be a bootstrap template or a bootstrap 7 00:00:25,440 --> 00:00:30,390 Web site with a couple of links here home about and contact and we're going to make each one of these 8 00:00:30,390 --> 00:00:34,750 a state and will display different content depending on the state we're in. 9 00:00:34,770 --> 00:00:39,470 Now I'm not going to waste time going through and typing out all the markup here. 10 00:00:39,510 --> 00:00:42,980 It's just standard bootstrap template with a now bar. 11 00:00:43,140 --> 00:00:44,820 You can see this is the nav bar. 12 00:00:44,850 --> 00:00:50,640 Then we have a container with an H1 one with the idea of heading in an idea of content and then we just 13 00:00:50,640 --> 00:00:58,260 have our javascript down here including the dependencies the bootstrap J.S. and our app J.S.. 14 00:00:58,350 --> 00:01:03,780 Now you can just take this from the project files if you want or you can type it out if you want. 15 00:01:03,780 --> 00:01:08,250 So let's go to our app J.S. and we're going to go ahead and get started here. 16 00:01:08,400 --> 00:01:09,560 So we're going to have. 17 00:01:09,600 --> 00:01:11,460 What we're going to call a page state. 18 00:01:11,460 --> 00:01:18,630 So let's create a variable called Page state and we're going to set that to a function. 19 00:01:19,920 --> 00:01:26,140 And here let's create a variable called current state. 20 00:01:26,220 --> 00:01:30,080 Actually this should be a let. 21 00:01:30,510 --> 00:01:35,090 So let currents state and going to set it equal to new. 22 00:01:35,400 --> 00:01:44,430 So we're going to set a constructor and then home state and then we would just want to pass this on 23 00:01:44,430 --> 00:01:45,460 do that now. 24 00:01:45,760 --> 00:01:50,590 We want to pass and this which pertains to this function this page. 25 00:01:51,060 --> 00:01:56,070 Now we're going to have two functions or two methods within the page state. 26 00:01:56,070 --> 00:01:57,790 So one is going to be called Star. 27 00:01:57,900 --> 00:02:01,830 So we're going to see this dog start or you could call it a nit. 28 00:02:01,830 --> 00:02:03,390 Let's actually call it in. 29 00:02:03,930 --> 00:02:09,630 So initialize and we'll set that to function. 30 00:02:12,160 --> 00:02:18,670 And inside here we're going to save this change and then set new 31 00:02:21,850 --> 00:02:22,880 Homestake. 32 00:02:22,930 --> 00:02:28,180 OK so this change is another function we're going to create and that's going to be used to just change 33 00:02:28,180 --> 00:02:29,530 the current state. 34 00:02:29,530 --> 00:02:33,010 Now when we call initialize it's just going to load the home state. 35 00:02:33,010 --> 00:02:34,400 That's the point of it. 36 00:02:34,540 --> 00:02:36,150 So let's create the change 37 00:02:40,730 --> 00:02:48,330 in all we're going to do is set current state equal to state OK and the state is going to be passed 38 00:02:49,110 --> 00:02:50,250 like that. 39 00:02:50,850 --> 00:02:57,030 So now all we have to do is create the different states in what we want to happen inside of them. 40 00:02:57,030 --> 00:03:06,780 So let's go ahead and go down here you will put a semi-colon here and then let's create the home state. 41 00:03:07,110 --> 00:03:14,350 So say Konst state equals function. 42 00:03:15,570 --> 00:03:18,810 And it's going to take in a page. 43 00:03:19,690 --> 00:03:20,210 OK. 44 00:03:20,220 --> 00:03:29,420 And then this page let's say document Daut queries selector and I want to select the idea of heading 45 00:03:29,820 --> 00:03:35,370 because what we're doing is modifying the output we're modifying the UI depending on the state we're 46 00:03:35,370 --> 00:03:35,940 in. 47 00:03:35,940 --> 00:03:42,600 So let's say the heading we want the text content to equal and I'm going to put null here because I 48 00:03:42,600 --> 00:03:44,460 actually don't want a heading. 49 00:03:44,730 --> 00:03:48,840 All I want is a Jumbotron displayed on the home page. 50 00:03:48,840 --> 00:03:59,720 So what we'll do is take out just copy this and we're going to take the content of the page of the state 51 00:03:59,730 --> 00:04:07,140 and we're going to say Dot in our HVM now set that to a set of tactics and then we'll go ahead and go 52 00:04:07,140 --> 00:04:11,820 to get bootstrap dot com. 53 00:04:11,880 --> 00:04:21,330 Let's go to the documentation and let's go to components and I want a Jumbotron component which is right 54 00:04:21,330 --> 00:04:22,190 here. 55 00:04:22,530 --> 00:04:28,170 So I'm just going to grab this and copy it and then put it in here. 56 00:04:29,090 --> 00:04:29,600 OK. 57 00:04:29,620 --> 00:04:35,260 And then we'll just tab this over and that should be it for our home state. 58 00:04:35,430 --> 00:04:39,190 So basically we're just modifying the heading in the content. 59 00:04:39,210 --> 00:04:47,220 So now for the about stay it's go right underneath this. 60 00:04:47,750 --> 00:04:56,210 And let's say about stay and same thing we're going to have a variable call it about stay and set it 61 00:04:56,210 --> 00:04:57,360 to function 62 00:05:03,200 --> 00:05:08,180 you will go ahead and pass the page. 63 00:05:08,780 --> 00:05:14,320 Inside here we're going to see document Daut queries selector. 64 00:05:14,330 --> 00:05:22,520 We want to select the heading we're going to set the text content equal to 65 00:05:25,550 --> 00:05:28,920 about us like that. 66 00:05:28,990 --> 00:05:29,320 All right. 67 00:05:29,330 --> 00:05:35,690 And then for the each team now should just copy this right here. 68 00:05:38,100 --> 00:05:44,190 So for each team I'm going to get rid of all this up this template and we're just going to put in here 69 00:05:46,530 --> 00:05:47,910 a paragraph. 70 00:05:48,330 --> 00:05:49,920 I can't use em in here. 71 00:05:52,520 --> 00:05:59,270 You know we'll just say this is the about page. 72 00:05:59,280 --> 00:06:03,700 All right so that's our about state now we'll do the contact. 73 00:06:03,790 --> 00:06:11,400 So I'm actually going to copy this pasted in. 74 00:06:11,470 --> 00:06:13,740 This will be the contact state. 75 00:06:19,700 --> 00:06:26,030 And let's set the heading to contact us and then we're going to need a form. 76 00:06:26,030 --> 00:06:30,820 So I'm actually going to just paste this into the in each team already here. 77 00:06:31,790 --> 00:06:36,060 So it's just a very simple form and that's it. 78 00:06:36,060 --> 00:06:44,190 That's our three states now we need to do is go down here and we need to first of all instantiate the 79 00:06:44,190 --> 00:06:44,990 page state. 80 00:06:45,000 --> 00:06:48,390 So we'll say constructs and say instantiate 81 00:06:52,600 --> 00:07:05,380 I'll say Konst cage and we'll set that equal to new page day and then we want to initialize will say 82 00:07:05,460 --> 00:07:09,850 in the first state. 83 00:07:09,850 --> 00:07:12,690 So we do that by calling page dot net 84 00:07:17,890 --> 00:07:22,120 and let's just save that and see what we get and we get the initial state. 85 00:07:22,150 --> 00:07:22,500 All right. 86 00:07:22,510 --> 00:07:30,550 So if we were to change this in the Senate right here if we were to change this to new about like that 87 00:07:30,730 --> 00:07:34,990 then we're going to get about what we want the homestate to be the initial state. 88 00:07:35,020 --> 00:07:41,530 Now we want to do is make it so that when we click these links up here we call event listeners that 89 00:07:41,530 --> 00:07:42,660 will change the state. 90 00:07:42,670 --> 00:07:44,230 So let's do that. 91 00:07:44,230 --> 00:07:49,310 So we'll say UI variables. 92 00:07:49,720 --> 00:08:01,810 So we'll say home the goals document dot use get element by the home put a comma here and then we'll 93 00:08:01,810 --> 00:08:03,100 do the about 94 00:08:12,080 --> 00:08:15,820 I don't think that I put ideas and then we just make sure we did that. 95 00:08:16,350 --> 00:08:21,380 Yeah so each link here should have an ID home about in contact. 96 00:08:21,450 --> 00:08:23,100 So that's a vote. 97 00:08:23,160 --> 00:08:25,770 Put another comma and we'll do contact 98 00:08:29,880 --> 00:08:33,830 semi-colon there and contact. 99 00:08:34,050 --> 00:08:36,740 OK so now we have our UI variables. 100 00:08:36,740 --> 00:08:39,500 Now we want to add our event listeners. 101 00:08:39,500 --> 00:08:42,500 So let's do the one for home. 102 00:08:42,500 --> 00:08:46,490 So we'll say home Daut at eventless Center. 103 00:08:46,730 --> 00:08:53,750 We want to listen for a click and then when we call that click let's do a function that actually can 104 00:08:53,750 --> 00:09:03,050 use an arrow function it will take in an event parameter and let's say page dot change OK we're using 105 00:09:03,050 --> 00:09:10,260 our our page function up here and we're calling change and that's going to take in a state. 106 00:09:10,460 --> 00:09:15,200 So the state that we want is going to be about. 107 00:09:15,230 --> 00:09:17,240 So I'm sorry the home. 108 00:09:17,240 --> 00:09:24,980 So we're going to say new home state like that and then we're just going to prevent the default behavior 109 00:09:26,120 --> 00:09:34,370 of the link that the click link so we'll say prevent default and then we're going to do the same for 110 00:09:34,370 --> 00:09:42,420 the other ones so let's go ahead and copy that. 111 00:09:42,500 --> 00:09:50,170 So this will be about or say about an event listener. 112 00:09:50,180 --> 00:09:55,200 Click page change and we're going to change it now to the About state. 113 00:09:56,380 --> 00:09:58,040 And then we have our contacts 114 00:10:01,090 --> 00:10:05,520 which will take our contact variable. 115 00:10:05,690 --> 00:10:11,930 Call the event listener and then we're going to say new contacts date and that's it. 116 00:10:11,930 --> 00:10:18,530 So let's save let's go back so we have our initial homestate Let's click about we get the about page 117 00:10:18,530 --> 00:10:22,210 or the about state contact and we get the contact. 118 00:10:22,250 --> 00:10:22,480 All right. 119 00:10:22,490 --> 00:10:28,340 And we didn't create any extra files we don't have an about TGM our contact page to him. 120 00:10:28,520 --> 00:10:31,810 It's all strictly in our javascript. 121 00:10:31,800 --> 00:10:38,920 All right so this is kind of not really a practical example because this isn't like a dynamic application. 122 00:10:38,990 --> 00:10:44,440 Usually you'd have like an edit state stuff like that list state. 123 00:10:44,450 --> 00:10:49,070 But I wanted to make this simple so we're just using actual pages. 124 00:10:49,070 --> 00:10:50,830 All right so that's going to do it for this video guys. 125 00:10:50,990 --> 00:10:53,420 Thanks for watching and I'll see you in the next one.