Heads up! To view this whole video, sign in with your Courses Plus account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll wireframe the form views of our job board. These are the Rails view in which a user can create or modify a job.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
[Master Class] [Designer and Developer Workflow] [Wireframing the Forms View]
0:00
We've created our index view and our show view,
0:08
but now, we need to create a form that will be for the new view
0:12
and the edit view for our jobs.
0:17
So, let's go ahead and just duplicate this as a new mockup, and we'll go ahead and save it,
0:21
and we'll call this "New View," and once we get into the CSS, we can go ahead and just
0:28
slightly modify our new job view to also be our edit job view.
0:35
So, I'll go ahead and save that out, and we'll keep a fairly consistent styling here.
0:42
So, let's just go ahead and change this page title or job title to say
0:47
"New Job" or maybe something more friendly like "Post a New Job."
0:55
That looks good, and we can delete some of these other things that we don't need.
1:02
And we're actually going to keep this button here because we will need a submit button.
1:09
We'll come back to that in a second.
1:16
So now, we need to create our form fields.
1:19
Now, if you recall, we had a job title, a company name,
1:22
a job description, and a see more link.
1:27
So, I'll go ahead and jump over to text here, and I'll just create my labels.
1:31
So, I'll say "Job Title," duplicate that, and change it to say "Job Description."
1:41
I'll duplicate that, and we'll create our label for company name,
1:55
and then finally, we'll go ahead and call this our details link,
2:06
and in parantheses, we'll say that it's optional.
2:14
And right now, I don't think this link will actually be optional.
2:19
In fact, I don't think we'll have any real serious form validation right now.
2:23
But, we can add that in a future iteration.
2:28
So, we'll go ahead and create our details link there, and now,
2:32
we have all of the labels that we're going to need to create this form.
2:37
So, now we can go ahead and start creating some of the form fields.
2:42
So, I'll go ahead and jump over to our containers here,
2:47
and we'll just grab a rectangle here, and we'll change this into a text box, just like that.
2:53
And we'll put that right under our job title,
3:05
and we'll move our labels down here a little bit, duplicate this text box
3:10
and put it right under company name.
3:15
And we'll need a larger input for our job description,
3:18
and this will probably actually be a text area in the markup.
3:25
So, we'll move some things out of the way and put that down there.
3:35
Maybe we'll move that up a little bit.
3:42
There we go.
3:48
And now, we can go ahead and put the rest of our stuff down here.
3:51
We'll copy another text field, and we'll put it here for our details link.
3:57
And then finally, we have our submit button down here at the bottom,
4:05
and for the submit button I'll just go ahead and change this to say something more friendly
4:13
like "Create New Job" or maybe "Create New Job Posting."
4:19
And again, we can always change this to say something else like "Post New Job"
4:31
or really whatever we want, it doesn't matter.
4:36
We just need to make sure that we create the space for it now
4:39
so that we know it's something we need to include on the page.
4:42
So, this is looking pretty good.
4:46
We could probably tighten up this layout a little bit and maybe put some of these
4:48
form fields adjacent to one another or move a few of these things up and adjust the spacing.
4:52
But so far, I think this looks pretty good.
4:59
So, we have this space over here, and we could go ahead and put in maybe some
5:05
paragraph text that just outlines a few guidelines for how a job posting
5:10
should be structured, but really, I'm just going to leave this space blank right now
5:16
because I have a feeling that we're going to flesh that out in a future iteration.
5:22
For example, we might be able to have tool tips come up on each one of these form fields
5:29
as the person filling it out works their way down the page.
5:35
So, we would want to leave this space open
5:39
just in case we wanted to add a feature like that.
5:42
However, I think we can go ahead and just get away with having
5:45
a fairly simple form to start out with.
5:48
So, I'll go ahead and save that out.
5:51
So, just to review, we have our index view, our show view, and our new or edit view.
5:56
And those are really all the views that we need to get started with for this iteration.
6:05
So now, I think we're ready to go ahead and jump into code.
6:13
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up