- Read Tutorial
- Watch Guide Video
I've been looking forward to filming this guide for awhile. There are so many powerful view helper methods provided inside of rails and a lot of people don't know about them. Even developers who have been building Rails apps for years haven't delved into them just because there's so many of them. Even if you've used a few you might find a few in this guide that would be helpful.
Open Sublime Text, I'm going to open up the index view. Here we have render blogs, In order to make changes here we're going to have to go in the blogs partial. I also want to add a new header element up here. Eventually, we're going to change that style out. We're not going to have our blogs in a table format that wouldn't make any sense but we'll wait till the style section for that.
Right now I'm just going to add
We'll say date and now inside of the partial which is _blog.html.erb
we need to add one more td and inside of here I'm going to place the blog.created_at
Say blog.created_at and save. Let's start up the rails server, open up a browser window. I have the blogs open here and if I hit refresh you can see now we have a date, it's not very pretty. This is the date like it's stored inside of the database, this is a Rail's Date object we can perform all kinds of calculations and filters but it doesn't look very good when it's shown to the user.
We're going to implement something that is going to render how long ago this was created. In other words, if we create a new blog post, the second that we hit save and it pops us onto the next page it should say created 3 seconds ago or something like that. For these ones that were created on the 12:31 2016 this would say created 12 days ago or whatever it would be. Now think of what you would have to do if you were to build this from scratch. You would have to build in all kinds of conditionals, you would convert the data type to be able to see what the value is. There's a lot of things that would go into it but we are going to do this with a single line of code.
I'm going to come right here (_blog.html.erb) and say <td>Published <%= distance_of_time_in_words(blog.created_at, Time.now) %>
. It takes two arguments. First, it takes the date as an argument and this is the date that we are counting down from. Then it takes in the current time which is just time now. It doesn't have to be time now, if you want to create something that counted down from some other date or some date in the future or anything like that then you could put it here. I want time now because I want to know how long ago the blog was created from the time that a user is looking up the site.
ago </td>
I'm going to save and assuming I name the method correctly then this should work. Hit refresh and there you go, now it says 12 days. If you come back here, the one I created yesterday says one day. We can add to that, right here we can add a string that says "ago." Now if I hit refresh you can see it says 12 days ago. We can also add on the front of it so we can say published, now it says published 12 days ago. This is one of my favorite methods, think of all of the things that I would have to do in order to build this kind of functionality.
Create a new blog post and if I switch back to the blog and come all the way down you can see it says published less than a minute ago. Imagine having to do that, counting the days would be one thing ut to be able to convert this and to be able to say phrases, like published or say less than a minute ago that, is pretty cool.
The other ones I'm just going to show you, I'm not actually going to keep in the source code because they're not really a fit. I still want to show you how they work. This next one we are going to use and I'm going to put on the Contact page. We haven't done very much with the contact page but I think this is a perfect spot for it.
Since this is our portfolio site, we may want people to contact us. I'm going to put a phone number here, make sure you put it inside of a tag and it's going to be number_to_phone. This takes a string as an argument, I can say 5 5 5 5 5 5 5 5 5 5 and that is a phone number.
If I come back to the site and go to contact, you can see that it converts this right into a phone number. Imagine you're building a CRM type software where you are managing all kinds of contacts and you stored the phone numbers with a value like this. However, you wanted it rendered on the screen looking like this. You would have to do quite a bit of work in order to implement something that parsed through the system and took each item and put the dash in the middle. I think that's another very helpful method and that's the one we're going to keep.
I'm going to show you just a few other ones and I definitely recommend for you to go through the action view documentation, It shows you all of the view help or methods that are available and I'll post a link on where you can go to that.
Next one is number_to_currency, let's say that this is 150. Save this and it shows $150.00. If you go through the documentation on that one you'll see you have all kinds of different options. You can use other international monetary symbols. You can have the decimals removed.
This one, I'm going to say number_to_percentage. Let's say that we put 80.4. hit refresh, this gives us 80.400%. Once again that can also take some arguments and some other options and then you can scale this down if you only want it to say eighty point four or something like that. By default, it'll add those items on there. You may wonder why in the world would I want to do this, I could just pass in a % symbol. You could pass in the % but if you don't have to and if you use a method, this is considered a much better practice. Whenever you see a senior rails developer code base you very rarely will see things like this because in order to get the same type of behavior you would have some kind of iterator. Pretend that this was in each block and you had some code here and it was some object and it's some type of number that we want to be a percent. We could close this off and then do space and percent and yes that would work, however, I can tell you from experience you don't see a lot of professional developer code that looks like that. Instead, you see is a lot of method calls and you rely on code instead of hardcoding values. There's a lot of reasons, when you use a method like the number_to_percentage, it takes arguments so it makes it much easier to change the formatting of the data. It also looks a lot cleaner.
The last one we're going to cover in this guide is going to be number_with_delimiter, let me throw in a bunch of random numbers and hit refresh. It adds commas and does some things like that. However, there are many times where you just have a number and you want to represent it with commas and with those kinds of values and you don't want to have to try to parse through that yourself. This does it does for you automatically. This is something I use quite a bit out of all of the helper methods I would say I probably use a number with delimiter and number to currency the most whenever I have a fun project. Distance_of_time_in_words is one that I use quite a bit as well. I definitely recommend that you look at the look at the documentation and see which ones that would be a fit for your projects.
I'm going to keep this code in for this one commit so that you can access it in the source code.
- git status
- git add .
- git commit -m "Integrated helper methods from ActionView" -git push origin view
This is the last guide in this section outside of our deep dive I'm going to close out our tasks. Finish. Deliver accept
And this time let's create let's merge everything in via the command line. Since we haven't done that one in a while so
- git status
- git checkout master
- git merge view
everything worked. There are no conflicts. And now I can do
- git push
If I come up here to GitHub and go to dev camp portfolio you can see right here, everything is working.
Excellent job. In the next guide, we're going to be taking a deep dive into action view, which is the module and the mini framework that essentially rules how Rails works with views and how Rails works with views in relation to the rest of the application.