Using the exercise files - jQuery Mobile Tutorial

I have provided a set of exercise files for you to use as you progress through the course. So, let's take a moment and see how those are organized. Now, I've placed the exercise files right here on my desktop. But, that's not required. I just did it to make it easy to access. If you want to put these in your documents folder or whatever location you use when you're developing, that's fine. They're just web files so you can open and edit them from anywhere. Okay, so let's open the folder and you'll see that the exercise files are organized according to the chapters in this course. So we have chapter one through chapter eight. And there's also a file in here called ExampleSnippets.txt. The ExampleSnippets file contains the code that I'm going to copy and paste as we build each finished example, which will save you from having to sit there and watch me type code. So that should make things a bit more efficient. Alright, let's take a look inside one of the chapters. The examples in most of the chapters are organized according to the same pattern. So there's an _start version and there's an _finished version. The _finished version is the complete example for that particular subject. So, if you want to jump ahead and see how things are built, maybe play around with them inside the browser's developer tools or whatever you want to do, I provided the finished example. Now, in each example, I'm going to start off with the _start version and use the code in the ExampleSnippets file to build towards the completed version. Okay, so let's go back up a level. The Exercise Files folder is also where I have placed the jQuery library and the jQuery mobile folder as well. So I'm going to show you how to get these in just a moment but they need to be in the top level of the Exercise Files folder because that's where each one of the exercises expects to find these libraries. Alright, couple of other things you should know. First, I'm going to be using a tool in this course called Aptana Studio. And you can see the icon on the desktop right here. In fact, let's switch over to that app really quick. Okay, here we are in Aptana Studio. Now, I'm going to be using Aptana Studio because it's a free development tool and it works across platforms. It runs on the Mac and Windows and Linux. So whatever OS you happen to be using, Aptana Studio will work on it. It's based on Eclipse and again, it's perfectly free. The other reason I'm going to use it is because it has a built in web server. Now, most of the examples in the course, you'll be able to just simply double-click on and run them in your browser, but jQuery Mobile uses Ajax to do some things like fetch pages from the server and insert them into the current document's DOM in order to simulate having multiple different screens in one web file. Now, in order to make Ajax requests, you have to have a web server to do that. So, you can either use the web server you're currently using to develop or, if you want to use Aptana Studio, there's one built in. Now, if you're not familiar with Aptana Studio, there's a course here on lynda.com that I produced, and it's called Up and Running with Aptana Studio, and it's only about an hour long, and it shows you how to download it, how to install and configure it. So, if you want to follow along with me using the same tool that I'm using, go watch that course, and it'll show you how to use Aptana Studio. Now, in Aptana Studio, once I've got it installed, I'm going to browse to where the exercise files are on my desktop right here. And I'm going to right-click and I'm going to say Promote to Project, and when this dialogue comes up, I'm going to make sure that the Web Primary is what is checked because we're building a web project. I'll click finish, and then I can close the local file system. This basically makes it easy for me to access all the exercise files and run them in the development web server. Okay, so that's Aptana Studio. Let's jump over to the jQuery Mobile and jQuery sites really quick. Okay, so here we are on jQuery Mobile and this is located at jquerymobile.com. And you can see that there's a button over here called Latest stable. This is where you download jQuery Mobile from. When you click on this, this will download a ZIP file which contains the contents of the jQuery Mobile folder that I showed you in the Exercise Files folder just a few moments ago. So, extract that ZIP file and put the folder at the root level of the Exercise Files, and then over here on jQuery, you have to have jQuery as well because jQuery Mobile is dependent on jQuery. And you can see this big bright button right here that says Download jQuery. And I'm going to be using version 1.11. So, download that, put it in the Exercise Files and you should have everything set up and ready to go.