 Okay, so far we've been doing a lot this year on web development both client side with javascript and jQuery and server side with PHP And as I said, I keep building up to you know, we're gonna obviously take these web applications and make them kind of standalone applications in some cases, but basically make them more of a application you would install and Whether it be on a phone tablet Linux Windows on Mac and It's all the same once you write the program if written properly you should run on every operating system a major operating system With little to no change. It's just a matter of packaging them So first thing we're gonna do in this tutorial is just make a very simple jQuery searchable List application and then in the other videos in this series. We are going to I'm going to show you how to package them for different operating systems Android Windows Linux I don't have any Mac or iPhone OSes, but the concept will pretty much be the same, but first we need a very basic application I haven't really gotten this jQuery mobile in any of my tutorials, but you'll see here It's very simple to we're just going to use some examples off their website and create a very basic application So here we go. First thing I'm going to do is I am going to Google jQuery Mobile or just go to jQuery mobile comm here. You can go to downloads and download the jQuery mobile script but what I'm actually gonna do is I'm gonna click on this themes which brings you to their theme roller and Let's make this full screen here and we'll get rolling and this makes it very simple for you to design themes and They recommend having a few different themes that you can call from so if for example I can make this kind of a a red theme over here and all this though This looks kind of ugly as it is you can call colors from different elements So it's good to have a few different things so that later on if you do want a certain bar to be red to make It stand out you can make one thing red So you know just drag some colors over and create some themes whether they be ugly or not You can add more if you want and obviously this is theme a b and c So at this point, I'm going to just click Download my theme they require to give it a name. It doesn't really matter what you name it I'm just gonna call it list since we're making a list application And I'll say download zip and it downloads a zip file with everything you need in it. So now we'll Close that up a little bit and let's go full screen here What am I doing full screen here? There we go And at this point, I'm going to that I downloaded that zip file to my downloads folder I'm just going to copy it to my working directory here. So I'm going to copy from my downloads jQuery Every time you download a jQuery mobile theme, it's going to be called jQuery mobile theme and then have a Random number after that. I'll copy it to my current directory and unzip it and And now I can say I can open it up in my web browser There's nothing server-side in here. So you can just run it locally, which is good for what we're doing So I'll just use my Google Chrome and open up the example index HTML and This is what it looks like here. They just give you some examples of a slider bar here and and some buttons Nothing doesn't know if it really does anything at this point. We're going to clear most of that out anyway But if I Google search jQuery mobile list view Or I can just go to the documentation page which if I just do list view it's going to bring me to the documentation on their list view with all their different options here and So I'm going to come over here to the side and I'm going to find a Inset search filter bar and once again, I'm not going over the details of this Their documentation is really great and I'll probably do maybe more in-depth tutorials in the future But for right now, I'm just going to go to this example And look at the source code and I'm just going to copy This list view here So we have a list view Filter is set to true It has no theme set so it's going to fall to a although we could choose different themes since we created three of them And that inset true. I think that just makes it not go the full screen kind of gives it this Let's go back here kind of gives it this rounded look where if you didn't have that it would be more like this list view over here Also, you notice that they highlight when I hover over them and they have little arrows. That's because these are Links so they have the Hyperlink reference here. They don't really go anywhere. They're gonna link back to itself But I'm just going to copy that and Then come down to my editor here. I'm going to use Vim as my text editor But obviously use whatever editor you prefer and I'm going to open up the example HTML that we were looking at Obviously, you probably want to change the title for your actual application and here it's linking to The JavaScript on the website depending on what you're doing you may want to do that You may want to download it probably in a future tutorial will probably download them since we're going to be creating standalone Applications all depending on whether your application is going to require Interaccess or not If you're going to require it might as well hosted online you can host it on your own server But at this point I'm going to come in here and I'm going to go down to the div tag that says Content and I'm going to delete everything inside that div tag You can also see that the content div tag is set to data theme a Which is going to be our default theme, which is the the gray theme I Will paste in our list here save that and if I go back to our Web browser here go back to the tab where I had opened up the index dot HTML and hit f5 to refresh You can see our list view here, and you can see that the search filter is actually using our theme B theme Which we might change because that's actually kind of ugly right there, but we have a filter set to true if I go back into the code here You can see that it says data filter true And that means that we have this little search bar at the top of our list and we can start typing so you can see their Example is lists of of car manufacturers, so I can start typing I can type in C Now knows it down to all that contain the letter C if I do see H You can see Chrysler and Porsche are the two that come up because they both have CH's in it One thing I want to note this is you know obviously great for mobile devices The list is very easy to click also great for desktop applications, which is what another thing we're going to be using it for here That's why I'm using this as an example That but the search filter here. I find if the list is extremely long Mobile devices such as phones are a little slow so you can see how fast I type and it quickly finds it all If I had a list that was like I'd say over 50 or a hundred things in the list It takes two or three seconds for my phone at least to filter through the list Not the end of the world, but something to keep in mind if you're going to have extremely long lists You might be better doing Requesting stuff from the server using PHP or whatever server side script and calling requests. That's what I do on my website with the List of videos but once again Depends on the size of your list this list might be generated on the server side any way depending on what you're listing if the list Is going to change you may want to be dynamic But that's something to keep in mind if the list is going to be really long and you're going to want to run a mobile devices Might want to think of a better way to filter through and I'm saying if it's over 50 might want to test it It's over a hundred you probably want to narrow down the list because it looks like I don't know There's what 20 to 30 things in this list So double that it might start running a little slow on a mobile device just saying okay So we pretty much have our mobile or application which can be run on mobile or Desktop application and this is great. This is something that Once again, you can set up on your website and have people go straight through to the browser Which I personally recommend I think mobile devices or even desktop devices if it doesn't have to be local I think it should be on the web. I'm not saying I mean I understand that a lot of people don't like cloud-based stuff because you're giving away your data But I'm saying in a way that you can create your own application on your own server I mean servers are so cheap now you can get yourself a pogo plug for 15 to 20 bucks run your own web server on it Also, if you're not requiring server side scripts, you can host it. I'm pretty sure on something like Dropbox So definitely depending on what you're doing different situations But that's our basic application But since we are going to be making this a program that you may want to run completely locally without any server-side stuff and and You know, you may or may not want The user be able to use this application with or without web access. So if you don't have web access It will be installed locally. That's where we were talking about earlier It's linking to the full links of all these things except for our CSS theme which is created with the roller Which is in a sub folder here. You may want to download all these things locally So I'm going to do that real quick as part of this tutorial So this this CSS the jQuery mobile CSS file I am just going to I'm gonna put it all in the main folder here. So I'm gonna say W get That file so now you can see if I list out that file is now here and If I go back into my script here, I can now Just remove the link and just give it the file name since it's in the local directory the current directory and I will do the same for this. I'll highlight that and Copy the address and then I'll highlight this So now I can W get This and I can W get This one as well So if I list you can see I've got my to my jQuery my jQuery mobile a javascript in here So now I can go back into my index HTML here and just give it the file names and we can obviously go back and Make sure I did everything properly by f5. Everything looks good. Everything works fine It's just all running local now rather than going out to the internet for that javascript stuff all depending on What you're doing with your application and of course as I also said earlier You might want to give it a different name So if you're running it in a web browser, it will show up as a title will say my list view Okay, so we got our basic application once again, we'll run on pretty much any device with a modern browser right now But we're going to look into packaging it to make it seem more like or make it actually a standalone application That you can install on your machine locally rather than opening it up in a web browser Because there might be situations where you want to do that So I hope you continue watching this series as I release the videos over the coming weeks Be sure to check out the annotation for the full playlist So you can see them all in order as they come out. Thank you for watching Please visit filmsbychrist.com. That's Chris the K. There should be a link in the description and I hope that you have a great day