1 00:00:00,000 --> 00:00:03,000 [Setting up the Page] 2 00:00:03,000 --> 00:00:06,000 [?music?] 3 00:00:06,000 --> 00:00:09,000 [Jim Hoskins] So far, we've downloaded all of our libraries, 4 00:00:09,000 --> 00:00:12,000 like Backbone, jQuery, jQuery Mobile, and Underscore, 5 00:00:12,000 --> 00:00:16,000 and there's just one more library file that we are going to want to use in our application, 6 00:00:16,000 --> 00:00:19,000 and that is the Backbone localStorage adapter. 7 00:00:19,000 --> 00:00:24,000 Normally, Backbone is intended to be used as a frontend for a web service, 8 00:00:24,000 --> 00:00:27,000 so as we manipulate items in our frontend, 9 00:00:27,000 --> 00:00:32,000 they can be saved and retrieved from some sort of backend application. 10 00:00:32,000 --> 00:00:34,000 However, since our application is offline, 11 00:00:34,000 --> 00:00:38,000 we don't use that type of functionality, so we need to use localStorage 12 00:00:38,000 --> 00:00:43,000 as our synchronization point instead of a web server. 13 00:00:43,000 --> 00:00:46,000 So to get the Backbone localStorage adapter, 14 00:00:46,000 --> 00:00:49,000 we're just going to go to this particular github page 15 00:00:49,000 --> 00:00:52,000 which is the Backbone localStorage adapter. 16 00:00:52,000 --> 00:00:57,000 https://github.com/jeromegn/Backbone.localstorage 17 00:00:57,000 --> 00:01:00,000 It's really just a file that we can drop into our application 18 00:01:00,000 --> 00:01:09,000 and it will now allow us to use localStorage as our backend. 19 00:01:09,000 --> 00:01:13,000 So we can go back here and we can just download this repository 20 00:01:13,000 --> 00:01:15,000 and we'll just make a ZIP file. 21 00:01:15,000 --> 00:01:18,000 Once we've downloaded and opened up our ZIP file, 22 00:01:18,000 --> 00:01:22,000 we're just going to take the Backbone.localStorage and its minified version 23 00:01:22,000 --> 00:01:26,000 and we're just going to place it into our project's JavaScript folder, 24 00:01:26,000 --> 00:01:28,000 just like all of our other libs. 25 00:01:28,000 --> 00:01:31,000 Now, we may want to organize this a little bit differently later 26 00:01:31,000 --> 00:01:36,000 in order to sort of segment out minified and our library JavaScript 27 00:01:36,000 --> 00:01:39,000 versus our application JavaScript, but for right now, 28 00:01:39,000 --> 00:01:42,000 let's just leave it as this and we can worry about optimizing it 29 00:01:42,000 --> 00:01:46,000 a little bit later once we actually have something up and running. 30 00:01:46,000 --> 00:01:49,000 So going back to our text editor, we see that we have some CSS 31 00:01:49,000 --> 00:01:52,000 and JavaScript files all ready to go, 32 00:01:52,000 --> 00:01:54,000 and if we try to bring it up in our browser, 33 00:01:54,000 --> 00:01:59,000 we obviously just get a list of our directories, our CSS, and JavaScript. 34 00:01:59,000 --> 00:02:03,000 So our main file for our application is going to be our index.html page, 35 00:02:03,000 --> 00:02:07,000 which will be the page that we load and will eventually be running 36 00:02:07,000 --> 00:02:08,000 all of our JavaScript. 37 00:02:08,000 --> 00:02:11,000 So let's--in our web directory--create a new file, 38 00:02:11,000 --> 00:02:15,000 and we'll call this index.html. 39 00:02:15,000 --> 00:02:20,000 So our index.html file is going to be an HTML5 file. 40 00:02:20,000 --> 00:02:23,000 To begin an HTML5 document, we need to start with a !DOCTYPE 41 00:02:23,000 --> 00:02:29,000 and the DOCTYPE is DOCTYPE html 42 00:02:29,000 --> 00:02:36,000 and then we need to create our html tag. 43 00:02:36,000 --> 00:02:41,000 I'm going to add lang="en" 44 00:02:41,000 --> 00:02:46,000 and then create our head 45 00:02:46,000 --> 00:02:49,000 and our body 46 00:02:49,000 --> 00:02:52,000 and then add a meta charset="utf-8" 47 00:02:52,000 --> 00:02:57,000 and that will act as a basic backbone for our index file. 48 00:02:57,000 --> 00:03:00,000 So now we want to actually start including all of our resources 49 00:03:00,000 --> 00:03:04,000 like our style sheets JavaScripts. 50 00:03:04,000 --> 00:03:07,000 All right, so now we want to include our CSS files 51 00:03:07,000 --> 00:03:11,000 and create the link tags in order to import them. 52 00:03:11,000 --> 00:03:16,000 One easy way to do this in TextMate is to simply grab your file 53 00:03:16,000 --> 00:03:18,000 and drag it onto the document. 54 00:03:18,000 --> 00:03:22,000 Now, this is going to give us the most verbose link tag that we need, 55 00:03:22,000 --> 00:03:26,000 and actually, in HTML5, we don't need the type 56 00:03:26,000 --> 00:03:32,000 and we can give it a title of "jquery mobile." 57 00:03:32,000 --> 00:03:36,000 I'm actually going to change our text flow so it doesn't break onto multiple lines 58 00:03:36,000 --> 00:03:41,000 by going to View and unchecking soft wrap. 59 00:03:41,000 --> 00:03:43,000 Now, this is going to allow us to overflow, 60 00:03:43,000 --> 00:03:45,000 but most of our lines shouldn't be as long, 61 00:03:45,000 --> 00:03:54,000 so taking a look at our style sheet here, we're loading in the css/jquery.mobile=1.0.a3.css. 62 00:03:54,000 --> 00:03:57,000 Now, depending on your version, it may be a different file name. 63 00:03:57,000 --> 00:04:02,000 And then, we have our media, title, and charset attributes. 64 00:04:02,000 --> 00:04:06,000 So now that we've added our style sheet, let's add our JavaScript script include tags, 65 00:04:06,000 --> 00:04:09,000 and we're going to do that much the same way. 66 00:04:09,000 --> 00:04:11,000 The first thing I want to include is jQuery, 67 00:04:11,000 --> 00:04:13,000 so I'm just going to drag that onto our document, 68 00:04:13,000 --> 00:04:20,000 and that includes our script source src="js/jquery-1.5.1.js. 69 00:04:20,000 --> 00:04:25,000 Now, it gives us a type and a charset; these aren't really necessary in HTML5. 70 00:04:25,000 --> 00:04:28,000 They should be served correctly by the server. 71 00:04:28,000 --> 00:04:32,000 It doesn't hurt to have them, but you don't need, necessarily, our type and charset 72 00:04:32,000 --> 00:04:38,000 in our script tag, but since it printed it out for us, let's just go ahead and leave it in. 73 00:04:38,000 --> 00:04:41,000 The next dependency we're going to add is underscore.js, 74 00:04:41,000 --> 00:04:44,000 so I'm just going to drag that onto the document. 75 00:04:44,000 --> 00:04:49,000 So now we have backbone.js 76 00:04:49,000 --> 00:04:55,000 and then we're going to add our backbone.localStorage. 77 00:04:55,000 --> 00:05:00,000 Finally, I'm going to add our js/jquery.mobile-1.0a3.js. 78 00:05:00,000 --> 00:05:03,000 So let's take a look at our scripts that we included 79 00:05:03,000 --> 00:05:05,000 and why we included them in a particular order. 80 00:05:05,000 --> 00:05:09,000 So we're going to be using jQuery Mobile, and its dependency 81 00:05:09,000 --> 00:05:14,000 is jQuery, so we need to make sure jQuery is loaded before jQuery Mobile. 82 00:05:14,000 --> 00:05:17,000 We're also using Backbone, and its dependency is Underscore, 83 00:05:17,000 --> 00:05:20,000 so we need to make sure Underscore is before Backbone. 84 00:05:20,000 --> 00:05:23,000 Backbone will also utilize jQuery for the views, 85 00:05:23,000 --> 00:05:26,000 so we want to make sure jQuery is before Backbone 86 00:05:26,000 --> 00:05:29,000 and we want to load our Backbone localStorage to make sure Backbone 87 00:05:29,000 --> 00:05:34,000 has been loaded in so we can modify it with the localStorage file. 88 00:05:34,000 --> 00:05:38,000 Now, one last file we want to do is add our application.js file, 89 00:05:38,000 --> 00:05:48,000 so we'll just create a new file and we'll call it application.js 90 00:05:48,000 --> 00:05:53,000 and we're going to add this in right here as our last file. 91 00:05:53,000 --> 00:05:58,000 We'll be modifying this file and breaking it out into other files a little bit later, 92 00:05:58,000 --> 00:06:02,000 and we'll be reorganizing all of our scripts as we go along, 93 00:06:02,000 --> 00:06:05,000 but let's just see if we can get a simple page up. 94 00:06:05,000 --> 00:06:09,000 Let's see what happens now when we go to our browser. 95 00:06:09,000 --> 00:06:11,000 Well, we get a blank page, 96 00:06:11,000 --> 00:06:16,000 so let's see what happens when we add some text into the body. 97 00:06:16,000 --> 00:06:20,000 Well, we get nothing, and that's because we have jQuery Mobile installed 98 00:06:20,000 --> 00:06:22,000 and it's not going to show us the defaults. 99 00:06:22,000 --> 00:06:27,000 So the next good step here is to make sure that all of our resources did load in properly, 100 00:06:27,000 --> 00:06:30,000 and we can do that using the Chrome Developer's Tool 101 00:06:30,000 --> 00:06:35,000 by going to View, and JavaScript Developer Tools 102 00:06:35,000 --> 00:06:39,000 or we can hit Command-Option-J to bring it up. 103 00:06:39,000 --> 00:06:43,000 Now, it looks like we already have an error, and let's see if actually creating 104 00:06:43,000 --> 00:06:46,000 a valid jQuery Mobile page is going to fix that. 105 00:06:46,000 --> 00:06:50,000 Otherwise, we're going to have to dig in and see what went wrong. 106 00:06:50,000 --> 00:06:54,000 If we look at our resources, you can see that all of them 107 00:06:54,000 --> 00:06:57,000 loaded in exactly how we want them. 108 00:06:57,000 --> 00:07:04,000 So let's go ahead and create a page of our jQuery Mobile application. 109 00:07:04,000 --> 00:07:08,000 Hopefully, you've had a chance to at least gloss over the jQuery Mobile docs, 110 00:07:08,000 --> 00:07:12,000 but we'll be going over in more detail how to create our pages. 111 00:07:12,000 --> 00:07:16,000 So the first thing we want to do is create a div, 112 00:07:16,000 --> 00:07:20,000 and we want to give our div an id which is going to be the name of our page. 113 00:07:20,000 --> 00:07:24,000 Let's start off with our homepage, so we're going to give it the id="name". 114 00:07:24,000 --> 00:07:27,000 Now, in jQuery Mobile, we also have to specify 115 00:07:27,000 --> 00:07:30,000 that this particular div represents a page 116 00:07:30,000 --> 00:07:34,000 and we do that using HTML5 data attributes. 117 00:07:34,000 --> 00:07:37,000 Now, we've seen normal attributes in HTML, like id and class, 118 00:07:37,000 --> 00:07:43,000 but HTML5 adds a new API, which allows us to create our own attributes within our tags. 119 00:07:43,000 --> 00:07:47,000 The only restriction is our attributes should be prefixed with data- 120 00:07:47,000 --> 00:07:50,000 and then, they can be whatever we want. 121 00:07:50,000 --> 00:07:55,000 In jQuery Mobile, it's expecting a data-role attribute, 122 00:07:55,000 --> 00:07:59,000 so we're going to create a data-role. 123 00:07:59,000 --> 00:08:03,000 jQuery Mobile has a few different values that it's expecting in the data-role attribute. 124 00:08:03,000 --> 00:08:07,000 One of them is "page" and we're creating a page, 125 00:08:07,000 --> 00:08:09,000 so we'll just add "page." 126 00:08:09,000 --> 00:08:10,000 We'll scroll down a little bit. 127 00:08:10,000 --> 00:08:13,000 So inside of a page, there are a few different things that we can add. 128 00:08:13,000 --> 00:08:18,000 For one thing, we can add a header, which is going to be like the toolbar 129 00:08:18,000 --> 00:08:21,000 or the top of an iOS application, 130 00:08:21,000 --> 00:08:24,000 and that's where we would put things like titles, back buttons, 131 00:08:24,000 --> 00:08:28,000 and other navigation buttons that we want to have on our application. 132 00:08:28,000 --> 00:08:31,000 So all we need to do is add a div. 133 00:08:31,000 --> 00:08:33,000 We don't need to give it a specific id, 134 00:08:33,000 --> 00:08:37,000 but we do need to give it a data-role 135 00:08:37,000 --> 00:08:42,000 and its value is going to be "header." 136 00:08:42,000 --> 00:08:44,000 Now, inside of this, we can add whatever we want. 137 00:08:44,000 --> 00:08:47,000 I'm going to add an h1 heading 138 00:08:47,000 --> 00:08:51,000 and we'll call it Local Notes--the name of our application-- 139 00:08:51,000 --> 00:08:56,000 and that's all I want for the header; at least right now. 140 00:08:56,000 --> 00:08:58,000 So our page has a header. 141 00:08:58,000 --> 00:09:02,000 Now we want to give it a content div, so we're going to create another div 142 00:09:02,000 --> 00:09:07,000 and we're going to give it a data-role="content" 143 00:09:07,000 --> 00:09:09,000 and when jQuery sees a data-role of "content" 144 00:09:09,000 --> 00:09:14,000 it's going to make it the body of that particular jQuery Mobile page. 145 00:09:14,000 --> 00:09:16,000 So this can be just any HTML. 146 00:09:16,000 --> 00:09:22,000 We'll just say Hello World! for now, and that's all we need. 147 00:09:22,000 --> 00:09:25,000 Now, we could add another div inside of our page with the data-role of "footer" 148 00:09:25,000 --> 00:09:28,000 but I have no content for a footer right now, 149 00:09:28,000 --> 00:09:33,000 so let's just see what we get now. 150 00:09:33,000 --> 00:09:37,000 So when we go back to our browser, we now see we get a nice, styled page 151 00:09:37,000 --> 00:09:41,000 with a cool header with Local Notes and Hello World!