1 00:00:00,000 --> 00:00:06,000 [Master Class] [Designer and Developer Workflow] [Adding Plugins] 2 00:00:06,000 --> 00:00:10,000 So, now we've gotten our application up and running, and we've created the basic scaffolds 3 00:00:10,000 --> 00:00:13,000 and sent that over to Nick so he can start working on his. 4 00:00:13,000 --> 00:00:16,000 But, there's a couple more clean up things I want to do before 5 00:00:16,000 --> 00:00:20,000 I consider this iteration finished for me. 6 00:00:20,000 --> 00:00:22,000 The first thing I want to do is go ahead and add the ability to use 7 00:00:22,000 --> 00:00:25,000 SASS style sheets in our application. 8 00:00:25,000 --> 00:00:31,000 SASS is an alternative way to write style sheets, much like HAML is an alternative to ERB. 9 00:00:31,000 --> 00:00:33,000 So, I want to make sure to get that up and running so Nick can start building 10 00:00:33,000 --> 00:00:36,000 the style sheets with SASS. 11 00:00:36,000 --> 00:00:40,000 Then we want to go ahead and add jQuery to our application so we can use it later, 12 00:00:40,000 --> 00:00:45,000 and then there's a couple things like, for instance, the root of our application. 13 00:00:45,000 --> 00:00:48,000 It shows us the welcome page, and we want to go ahead and change that 14 00:00:48,000 --> 00:00:51,000 to show the list of jobs. 15 00:00:51,000 --> 00:00:55,000 So, the first thing we want to do is go ahead and install SASS. 16 00:00:55,000 --> 00:01:00,000 I'm going to go ahead and stop the server, and let's open up the gem file, 17 00:01:00,000 --> 00:01:07,000 and let's add the gem SASS. 18 00:01:07,000 --> 00:01:12,000 Now, there's a lot of stuff sort of bundled in here, a lot of commented out stuff. 19 00:01:12,000 --> 00:01:15,000 I'll have to go ahead and clean this out so it's a little bit easier to see. 20 00:01:15,000 --> 00:01:18,000 We can add back in anything we need, so all I'm doing right now is deleting 21 00:01:18,000 --> 00:01:24,000 all these commented lines so we can see very quickly what is required of our application. 22 00:01:24,000 --> 00:01:30,000 So, I'll save this out, and once again, we'll run bundle install. 23 00:01:37,000 --> 00:01:43,000 So, now we've got SASS installed, and let's go ahead and test this out. 24 00:01:43,000 --> 00:01:49,000 If we open up our public style sheets folder, what we're going to want to do is 25 00:01:49,000 --> 00:01:59,000 add a new folder that will call SASS, and this is the directory all of our SASS files will be in. 26 00:01:59,000 --> 00:02:14,000 And let's create a sample SASS file we'll call application.sass. 27 00:02:14,000 --> 00:02:25,000 And let's go ahead and just add body and set the background color to a light grey, 28 00:02:25,000 --> 00:02:27,000 just to see if it's all working. 29 00:02:27,000 --> 00:02:35,000 So, let's start up our server again, and if the SASS is configured properly, 30 00:02:35,000 --> 00:02:45,000 every file that we create here will now be accessible in stylesheets/application.css. 31 00:02:45,000 --> 00:02:58,000 So, let's go ahead and try to see if we can get to /stylesheets/application.css. 32 00:02:58,000 --> 00:03:01,000 Looks like there's an error and that's my fault. 33 00:03:01,000 --> 00:03:06,000 Rails only generates the CSS file from the SASS file anytime we load a dynamic page, 34 00:03:06,000 --> 00:03:12,000 so if I just try to go to application.css, it hasn't generated the file. 35 00:03:12,000 --> 00:03:17,000 However, by generating this error page, it now has triggered the SASS to CSS conversion, 36 00:03:17,000 --> 00:03:25,000 so if I refresh, we should see the CSS file generated from the SASS, so there we go. 37 00:03:25,000 --> 00:03:33,000 And we can go back to our SASS file here, and we'll add some more definitions. 38 00:03:33,000 --> 00:03:37,000 And let's see if it updates the file when we refresh it. 39 00:03:37,000 --> 00:03:41,000 So, these are going to be generated every time a dynamic page is called, 40 00:03:41,000 --> 00:03:50,000 so let's open up another page. 41 00:03:50,000 --> 00:03:54,000 And if we try to refresh it again, we'll see that now it has rendered a dynamic page, 42 00:03:54,000 --> 00:03:57,000 it'll update the application.css. 43 00:03:57,000 --> 00:04:01,000 So, let's go ahead and just add the application.css to our layout 44 00:04:01,000 --> 00:04:05,000 just to see if it's working. 45 00:04:05,000 --> 00:04:14,000 So, that's going to be in app, views, layouts, application.html.erb apparently. 46 00:04:14,000 --> 00:04:19,000 So, it looks like there was a little error with all of our generation and destruction, 47 00:04:19,000 --> 00:04:25,000 so what we can do is go ahead and reformat this to be a HAML page 48 00:04:25,000 --> 00:04:28,000 so we don't leave an existing ERB file just sitting around. 49 00:04:28,000 --> 00:04:36,000 Let's go ahead and convert this, and we can do this pretty quickly by hand. 50 00:04:36,000 --> 00:04:42,000 So, we're going to replace the doc type with !!! 5. 51 00:04:42,000 --> 00:04:50,000 This will be HTML, replace this with head, tab it in. 52 00:04:50,000 --> 00:04:57,000 Change this to title, remove the closing tag. 53 00:04:57,000 --> 00:05:04,000 We can simply remove those and remove the trailing. 54 00:05:04,000 --> 00:05:08,000 It's pretty easy to convert small pieces of ERB to HAML. 55 00:05:08,000 --> 00:05:11,000 We don't need the closing tag. 56 00:05:11,000 --> 00:05:18,000 We'll create a body tag. 57 00:05:18,000 --> 00:05:22,000 The yield for the actual page will just be indented underneath it, 58 00:05:22,000 --> 00:05:24,000 and we can get rid of these. 59 00:05:24,000 --> 00:05:28,000 So, let's see if we did the translation properly and go back to here. 60 00:05:28,000 --> 00:05:34,000 If we refresh, it looks like it's exactly the same, so we translated it just fine. 61 00:05:34,000 --> 00:05:41,000 And let's go ahead and see what style sheets is loading up. 62 00:05:41,000 --> 00:05:45,000 So, we can see it's loading up application.css in Scaffold, 63 00:05:45,000 --> 00:05:48,000 and I'm sure Scaffold is overriding the rules that I wrote here, but we can see 64 00:05:48,000 --> 00:05:54,000 that it's loading up, and if we look at the data here, it looks like it's just fine. 65 00:05:54,000 --> 00:05:56,000 Now, I'm pretty sure Nick's going to go ahead and get rid of scaffold.css 66 00:05:56,000 --> 00:06:00,000 and begin working on his own style sheets, so I'm not really going to touch that, 67 00:06:00,000 --> 00:06:04,000 but now I know I have SASS installed and it's working properly, 68 00:06:04,000 --> 00:06:09,000 so I'm going to go ahead and commit that, push it, and send him a notice about it. 69 00:06:09,000 --> 00:06:15,000 So, I'll do git add., git status, just to check out what's going on. 70 00:06:15,000 --> 00:06:20,000 Updating our gem file, we updated our application.html.haml. 71 00:06:20,000 --> 00:06:25,000 We're updating our application.css in SASS, and let's go ahead, and looks like 72 00:06:25,000 --> 00:06:30,000 we haven't staged our delete for our html.erb since we renamed it. 73 00:06:30,000 --> 00:06:40,000 So, let's go ahead and git add app/views/layouts.application.html.erb. 74 00:06:40,000 --> 00:06:46,000 So, if we do git status again. 75 00:06:46,000 --> 00:06:57,000 So, let's go ahead and do git rm app/views/layouts/applicaton.html.erb. 76 00:06:57,000 --> 00:07:01,000 So, we're staging that we removed the ERB and instead, added the HAML. 77 00:07:01,000 --> 00:07:08,000 So, if we take a look at our git status again, we can see that looks pretty correct for us. 78 00:07:08,000 --> 00:07:19,000 So, let's go ahead and git commit and add a message "Added SASS Support, 79 00:07:19,000 --> 00:07:25,000 and application.sas." 80 00:07:25,000 --> 00:07:33,000 Let's go ahead and pull to see if Nick has updated any changes at this point. 81 00:07:33,000 --> 00:07:43,000 Not seeing anything, so let's go ahead and push. 82 00:07:43,000 --> 00:07:46,000 So, now that I've updated this, I think Nick's going to be pretty interested 83 00:07:46,000 --> 00:07:50,000 that I added SASS support, so I'll send him a message. 84 00:07:50,000 --> 00:07:53,000 "Hey Nick, just wanted to let you know that I added SASS support." 85 00:07:53,000 --> 00:07:57,000 "So, if you put a SASS file in layouts/stylesheets/SASS 86 00:07:57,000 --> 00:08:03,000 it'll automatically be compiled into the root stylesheet's folder. Enjoy!" 87 00:08:03,000 --> 00:08:08,000 So, now we've added SASS, there's a couple more quick things I want to do. 88 00:08:08,000 --> 00:08:12,000 One is adding jQuery into our project, and the way we do that is using the 89 00:08:12,000 --> 00:08:20,000 rails/jqueryrailsgem. 90 00:08:20,000 --> 00:08:25,000 Now, what this is, is it just adds the ability to use Rails from jQuery in Rails 3, 91 00:08:25,000 --> 00:08:29,000 and Rails 3.1 jQuery will be the default, so this step won't be necessary. 92 00:08:29,000 --> 00:08:34,000 But right now, we are working in Rails 3.0.9. 93 00:08:34,000 --> 00:08:38,000 All we need to do is add this gem jQuery Rails to our gem file, 94 00:08:38,000 --> 00:08:42,000 so let's open up our gem file once again. 95 00:08:42,000 --> 00:08:44,000 Paste that in. 96 00:08:44,000 --> 00:08:51,000 And again, we'll run a bundle install. 97 00:08:51,000 --> 00:08:55,000 Okay, so now we've installed the jQuery Rails, and there's one last thing 98 00:08:55,000 --> 00:09:00,000 we need to do to to initialize it. 99 00:09:00,000 --> 00:09:02,000 And we can see this here. 100 00:09:02,000 --> 00:09:04,000 We're going to run rails generate jquery:install. 101 00:09:04,000 --> 00:09:10,000 We can pass UI to enable jQuery UI, however, I don't believe we'll be using it right now. 102 00:09:10,000 --> 00:09:19,000 So, let's go ahead and just do rails generate jquery:install. 103 00:09:19,000 --> 00:09:21,000 So, it's gone ahead and removed any prototype, 104 00:09:21,000 --> 00:09:24,000 which we did not actually have in there, 105 00:09:24,000 --> 00:09:28,000 and it copied jQuery 1.6 into our JavaScript's directory, as well as the 106 00:09:28,000 --> 00:09:34,000 jQuery unobtrusive JavaScript adaptor, which will allow a lot of the JavaScript helpers 107 00:09:34,000 --> 00:09:37,000 that are included in Rails to work with jQuery. 108 00:09:37,000 --> 00:09:42,000 So, let's start up our server. 109 00:09:42,000 --> 00:09:46,000 So now, if we go and check out our page and refresh and take a look, 110 00:09:46,000 --> 00:09:49,000 right now it's only letting application.js. 111 00:09:49,000 --> 00:09:54,000 And we do have our jquery.js and our jQuery UJS installed. 112 00:09:54,000 --> 00:09:59,000 Now, these are actually being included by using javascript_include_tag :defaults, 113 00:09:59,000 --> 00:10:05,000 and this is defined in our config application.rb file, and if we scroll down here to 114 00:10:05,000 --> 00:10:09,000 config.action_view.javascript_expansions of defaults, 115 00:10:09,000 --> 00:10:13,000 we can see what files are included in there, and what we need to do is add 116 00:10:13,000 --> 00:10:18,000 jQuery and jQuery UJS to this list. 117 00:10:18,000 --> 00:10:26,000 So, what we can do is type in "jquery" and "jquery_ujs," 118 00:10:26,000 --> 00:10:33,000 save it out and if we go back and restart our server, and we come back to our browser 119 00:10:33,000 --> 00:10:41,000 and refresh, we can see now jquery.js and jquery_ujs 120 00:10:41,000 --> 00:10:46,000 are being loaded into our page before application.js. 121 00:10:46,000 --> 00:10:50,000 So, this is a good point for us to commit, so I'm going to stop the server. 122 00:10:50,000 --> 00:10:57,000 We'll git add., git status. 123 00:10:57,000 --> 00:11:01,000 All right, so we've modified our gem file. 124 00:11:01,000 --> 00:11:04,000 We've updated our application.rb and added our jQuery files. 125 00:11:04,000 --> 00:11:09,000 That looks good, so let's go ahead and do "git commit -n. 126 00:11:09,000 --> 00:11:18,000 We'll do "Added jQuery to our app." 127 00:11:18,000 --> 00:11:28,000 I'll go ahead and push origin master, and we've gone ahead and pushed this up. 128 00:11:28,000 --> 00:11:30,000 And there's one last thing I want to do. 129 00:11:30,000 --> 00:11:36,000 When we start up our server and we go to the root directory, we get this welcome page. 130 00:11:36,000 --> 00:11:41,000 So, instead of this, I want to show the job listing page. 131 00:11:41,000 --> 00:11:48,000 So, there's a couple steps involved in this. 132 00:11:48,000 --> 00:11:54,000 So first, let's go into public and let's remove this index.html, 133 00:11:54,000 --> 00:11:59,000 which is the page that we're seeing there. 134 00:11:59,000 --> 00:12:02,000 Go ahead and move this to the trash, and now if we try to view the page, 135 00:12:02,000 --> 00:12:05,000 we'll see that no route matches /. 136 00:12:05,000 --> 00:12:09,000 So, what we need to do is add the route for our root. 137 00:12:09,000 --> 00:12:19,000 To do that, we can go into config, routes.rb and right here, 138 00:12:19,000 --> 00:12:27,000 we will type in "root," and we'll add the option "to" 139 00:12:27,000 --> 00:12:32,000 and point it to the controller "jobs" and the action "index." 140 00:12:32,000 --> 00:12:37,000 So, let's go ahead and restart our server, and if we refresh, 141 00:12:37,000 --> 00:12:41,000 we're now seeing our job listing on the home page. 142 00:12:41,000 --> 00:12:48,000 So, let's go ahead and commit that, stop the server, do "git add." 143 00:12:48,000 --> 00:12:53,000 If we take a look at the git status, we added our updates to the routes.rb, 144 00:12:53,000 --> 00:12:57,000 but we need to go ahead and remove public/index.html. 145 00:12:57,000 --> 00:13:04,000 Do "git rm public/index.html." 146 00:13:04,000 --> 00:13:09,000 Now if we look at git status, that looks pretty good. 147 00:13:09,000 --> 00:13:13,000 So, we'll go ahead and create our commit. 148 00:13:13,000 --> 00:13:25,000 We'll say "Removed index.html and set root to jobs index." 149 00:13:25,000 --> 00:13:33,000 That looks good, we'll go ahead and push that to the master. 150 00:13:33,000 --> 00:13:36,000 And let's go back to our server and just take one last look at it 151 00:13:36,000 --> 00:13:39,000 and see if we missed anything. 152 00:13:39,000 --> 00:13:41,000 So, if we go to the homepage, we can see all of our jobs. 153 00:13:41,000 --> 00:13:44,000 We can add a new job. 154 00:13:44,000 --> 00:13:52,000 We can go back, and we can edit existing jobs and view jobs on their own page. 155 00:13:52,000 --> 00:13:55,000 So, looking back on what we set out to do in this iteration, 156 00:13:55,000 --> 00:13:59,000 I think I checked all the major points that we wanted to do. 157 00:13:59,000 --> 00:14:03,000 I'll stick around until Nick is done and see if he has anything else for me to do, 158 00:14:03,000 --> 00:14:07,000 but I think I'm pretty much done with what we set out to do in this iteration.