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 define our new note form and we learn how to create dialogues.
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
[Jim Hoskins] So inside of this field container is where we actually want to put our label
0:00
and our input, so let's just add this in right now for our title,
0:04
which is going to be a normal text input.
0:08
So first, we'll start with our label, and we want to give it a for= attribute
0:10
to associate the label with the input, like any good HTML form.
0:14
So I'll say for="title">Title</label.
0:18
And then, let's create an input with an id="title"
0:23
so the for attribute can be correctly linked with the input.
0:28
We'll give it the name="title"
0:32
so we know this is the title attribute for our form
0:37
and we'll give it a blank value="">.
0:40
And so let's see how this looks in the browser.
0:43
So I've refreshed; we don't have any errors in our console here.
0:46
If we load up our new form, we get Title and we can add some text in here
0:49
and it looks pretty good.
0:55
If we look at it on the Simulator and we bring up New Note,
0:57
we see that the title field shows up with a nice underline beneath it
1:01
to separate it from other fields.
1:05
If we rotate around, the label shows up next to it,
1:08
and we can see in this browser, at least--if we click on the label itself,
1:11
we can see it's correctly associated with the input,
1:14
so the label and input are linked correctly.
1:18
Now let's go back to our code.
1:23
So the next thing we want to add is the ability to put in a body,
1:27
and this is going to be much like our title field,
1:31
except that instead of being an input of type text,
1:34
it's going to be a text area.
1:36
So basically, I'm just going to sort of copy/paste and modify this,
1:40
so let's just take our fieldcontainer, add another one,
1:45
and we'll call this "body" and "body" and "body"
1:49
and then change the label text to be Body as well.
1:56
Now, this will create a normal input
1:59
which would work just fine, but this is a single line input field.
2:01
So instead of that, let's actually change this to a text area.
2:05
So we'll just change from the input to textarea.
2:09
Keep the id and the name--
2:14
we don't want a value for textarea.
2:16
Close this out.
2:17
and we can see that jQuery Mobile adapts to this
2:22
and creates a multi-line field.
2:26
So we can start adding fields to here, and it will actually autoexpand,
2:28
which is a really cool feature of jQuery Mobile: it will actually change the height
2:32
of our text area in order to facilitate the amount of text that's in it.
2:37
Now, we're going to start without adding our geolocation information in here,
2:43
so later on, we'll add a field to say
2:47
whether or not we want to add our location data to our form.
2:51
But for right now, let's just add our Save button in order to save our information--
2:54
our Submit button.
2:58
So let's go back to our code.
3:02
I'm just going to use a button in order to create our div.
3:04
We don't want to use an <a tag because we actually want it to submit,
3:07
or we could use an input of type submit, but let's just use the button tag
3:11
to create our Save button.
3:14
Let me bring this up on the screen a little bit.
3:16
We'll do <button, and by default, jQuery Mobile will style this as a button,
3:19
so we don't need to have the data-role of button
3:24
but we do want to have a data-icon.
3:27
For our Save icon, we want the check mark,
3:30
so I'm going to add data-icon="check">.
3:32
And I like the blue theme that we saw before on our first button--
3:36
like this one, right here.
3:39
I'd like this to be our Submit button style as well,
3:41
so I'm going to give it a data-theme="b">
3:45
and we'll give it the >Save</> title there and let's close out our button.
3:51
So now if we go back to the browser and we refresh it
3:58
and we load it up, we get a nice little form here, Title and Body and Save.
4:02
Now, you can see right now it's just sort of submitting back to the homepage,
4:08
and we're going to add the JavaScript to actually handle this,
4:11
get the information from the form, and save it into our local database,
4:14
but that's going to be a little bit later.
4:18
Now, one thing I don't like about this is how it acts like a different page in our theme.
4:21
So for instance, we click on New Note and it slides in from the right,
4:26
making it seem like it's a whole other page.
4:30
What I'd actually like for it to do is to act a little bit more like a dialog--
4:32
to sort of pop up anywhere that we are in our application
4:37
and not really slide back and forth.
4:40
Now, there's another thing I don't really care for about how this works.
4:43
jQuery Mobile is awesome in that it changes the URL to match the page that you're on,
4:46
so if I click new here, you can see that it goes to #new here (or hash sign new)
4:51
and if we were to actually refresh, jQuery Mobile can look at the URL
4:57
and know that we want to land on this page.
5:01
However, this is really more of a modal dialog box, in my mind, than a whole other page
5:04
that you should allow to be bookmarked,
5:09
so I'm going to change the behavior of this page around a little bit
5:12
to act it make a little bit more like a dialog.
5:15
jQuery Mobile actually has the ability to create dialogs
5:17
by simply using the data-rel attribute on the button that creates it.
5:20
So let's go back to our code
5:25
and let's change our button.
5:29
We'll start with our big button,
5:31
but eventually you'll want to do it for both buttons on the homepage--
5:33
and change it so it acts more like a dialog.
5:35
I'm going to roll up our New form for now just so we don't have to look at it,
5:38
and let's look at our homepage.
5:41
So in our button in our content area,
5:44
I want to change this to act more like a dialog.
5:47
So in order to do that, I'm going to add a data-rel attribute
5:51
and this rel is going to be "dialog".
5:57
So if I save this out and we go back to our page and refresh,
6:00
now if we click this button--which now acts like a dialog--
6:04
you can see it gives it a different styling; it's sort of contained within this background
6:08
and it looks more like a window or a dialog.
6:14
It doesn't have the same sort of title bar.
6:16
We can't really put buttons up here and it adds a close button here X
6:18
which will just take us back.
6:23
So this is a little bit better.
6:25
I like how it looks; it sort of indicates that it's just sort of a pop-up overlay.
6:26
But another cool thing is that it changes how the URL is structured.
6:31
So if we refresh, instead of seeing New here,
6:35
it adds a UI state of dialog,
6:38
and this will allow us to move back and forth using the history,
6:40
but if we were to bookmark this or just, say, refresh it,
6:45
It doesn't bring up the form again, which is kind of what I want.
6:48
I don't want to be able to bookmark our Note.
6:50
Now, notice we only did the data-rel dialog to this button
6:53
and not the one in our title bar, so if we click on this one,
6:57
even though it's the same page, it solves it differently,
7:00
much more like a page than a dialog
7:03
and we get the same information here.
7:05
So how we create a dialog is all about the link that links you to it
7:07
and not about the actual page itself.
7:12
So I'm going to go back to our code
7:15
and I'm going to make sure to add our data-rel="dialog"
7:18
to the New button that is in our tile bar, which is right up here.
7:21
So I'm just going to add data-rel="dialog" and now they should both act like dialogs.
7:27
Now, I still don't really care for the transition, which is something that's easily changed
7:36
and we can look at jQuery Mobile here to test it out.
7:40
And actually, I'm going to look at the documentation from our iPhone Simulator
7:43
because the effects are going to be much more integrated with the actual Simulator
7:47
then a large browser like Chrome.
7:53
Now, you can still sort of see some of the transitions in Chrome,
7:55
but the effect is better on an actual device.
7:58
So I'm just going to go to the homepage of our documentation here,
8:01
and if we click on the Pages and dialogs and the Page transitions,
8:08
we learn a little bit about how transitions work,
8:13
and this uses the data-transition property and then one of the different
8:16
data-transition types or keywords.
8:21
Now, the default is slide, which comes in from the left and it'll go back the same way;
8:24
or we could slide up, and that's kind of cool.
8:29
I think it really works for a dialog.
8:31
Let's take a look at some of the other ones.
8:34
We could slide down--also cool for dialogs, I think.
8:36
Pop, which has a really cool effect where it sort of comes at us,
8:40
and so far, that's my favorite.
8:44
Let's take a look at it again.
8:46
We could also do a fade, which is just a simple fade from one page to the other.
8:48
And flip, which is really cool, and we could use that.
8:52
For my taste, I think pop makes the most sense for our dialog here.
8:58
All we need to do is add a data-transition of pop into our link.
9:03
So going back to our code, right here,
9:08
we can add a data-transition="pop"
9:12
So let's go back into our Simulator here, just so we can get the full effect.
9:16
Let's go back to the homepage and refresh.
9:23
So now if I click it, we get a cool pop-up dialog, and I think that looks really slick.
9:27
Now, since we only did it to this button, if we click on New here,
9:35
it's going to have the same slide over transition,
9:38
so we need to make sure to add a data-transition here.
9:40
So we'll just copy our data-transition here,
9:45
and we'll paste it into the link that is right up here in our header.
9:51
And we can even change it, so let's say we want to do the "flip."
9:56
So if we refresh it and we click this,
10:04
we see we get a flip transition on that button and it'll flip back,
10:09
or we can get the popping transition on that one.
10:13
Now, depending on how you want your application, that could work,
10:16
but for me, I want a consistent view of our New form
10:19
so I'm going to change that to data-transition="pop".
10:23
So if we test it again in our Simulator, we get a popping transition here.
10:28
We get a popping transition here.
10:34
We can fill out some information.
10:36
We can add as much information as we want.
10:46
And if we click Save,
10:49
it just sort of sends us back here and we don't actually save any information.
10:52
So the next step is to start writing the JavaScript code utilizing Backbone
10:55
in order to save our code.
10:59
So now we have the user interface for our application built using jQuery Mobile.
11:01
In the next Master Class in this series,
11:05
we'll write the code to manage the data in our application.
11:07
We'll see how to use Backbone.js to model and store the information
11:11
as well as manage updates to the application interface.
11:14
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