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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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