 Okay, you can see here that I am in Windows XP inside a virtual machine here Just to show another way of packaging our application for Another operating system so far as far as desktops. We've shown cross-platform options as far as Wrapping our code. We haven't had to rewrite our code. Just write some code to package it in. We've done C++ and Python using both Qt and GTK and Webkit and these are great cross-platform There are some issues, you know You have to with the C++ compile it and you have to compile it for each operating system You can cross compile for Windows from Linux although it can be cumbersome especially when you get into More more packages like Qt and with Python You have to have Python installed. You got to have Webkit installed You got to have your GTK or Qt installed on that system or make an installer that installs all that stuff And even with the C++ there's still going to be libraries that you're going to have to distribute with your package Here I'm going to show you a way where you can make your application Act like a desktop application with stuff that's already on Windows machine A plus to this is that you're good to go if you package it like this I'm really right now. We're wrapping it and then in the next trial I'm going to show you how to package it as an execute. I'm going to show you a few different ways of doing that But right here you can see this is our application. I have it running in Chrome right now. I Can search by the way This is a series be sure to if you haven't watched the previous videos in this series click on the annotation on the screen We'll bring you to the playlist and the first video We made this a little web app that basically just searches through this list when you type something in In the search bar there Here I have it running in the browser and that's great It will run on any operating system with a modern browser You can also see it's running in Chrome there, but I can right-click it here and open it with Internet Explorer I mainly use mainly use I never really use Windows other than for testing out applications I write And so that's why I have Windows in a virtual box is mainly for doing this sort of thing opening up here in Internet Explorer basically I said that because you know I'm running an older version of Internet Explorer Which is going to make the application actually look a little different. I think that's why it looks a little different in this case But when I go to open it up Internet Explorer first off I'm running it on a local machine and it warns me that I'm trying to activate in this case It's Java scripts from the local machine. I'm going to click allow the block content click Yes, then we get our application. You can see it looks a little different Even though it is the same program And you also have all your Internet Explorer bars and some people will have a lot more than just what set up here so it's not very Application program desktop field to it in either sense So we want to make it so that we just have this in a window without all the other mess And the way we're going to do that in this tutorial using hta now you can do a similar thing with visual basic script I'm not going to really go over that but basically the same concept I think this using an hta file actually makes it a little more customizable as far as how the window looks Either case. I think that it will use whatever Internet Explorer you have installed on your machine. So whether you're using hta files or visual basic scripts It's going to render it using Internet Explorer. So make sure your code works with Internet Explorer Which is probably the hardest browser to get things working with but in this case working with jQuery and jQuery mobile and everything should be compatible So let's jump right in. Let me delete that. I don't need that because I'm about to create that So once again, here's our application Also, another good thing about doing it this way with the hta files You don't get those warnings like we did when we opened it in Internet Explorer all that Because you're trying to make an application for someone a program for someone you get that every time they're gonna be like, oh, no Should I click okay? What's that bar? So I'm gonna take my index HTML file here. I'm going to copy it. I'm gonna paste it You could just rename it, but I'm saving the original. I'll call it index dot hta Which stands for? HTML application as are you sure you want to change it? Yes, and now gives it an icon that looks Pretty much like a default exe icon on Windows, which is a little more application like But as I said in the future tutorial, we're going to package all this into an exe file And in which case you could change the icon in Depending on what technique you use anyway I can click this now and you can see just by changing my HTML to an hta file It now opens up in its own little window. It has scroll bar everything works I can type up here to search But it doesn't have all the extra toolbars. You didn't get the warnings that you would get with Internet Explorer and Right there off the bat boom You've got what looks like an application the title bar is what the title of the HTML file or in this case hta file is But you have a lot more options when you're working with these hta files So let me minimize that and go here if you just do a quick Google search for hta This is probably the first page. It comes up. It's Microsoft's page on hta and right at the bat you can see here is something to put in the header of the hta file And I'm just going to copy the entire thing right there Basically, it's just got some option options here border none caption. No, you can set an icon You can tell it do you want to show up in the taskbar? No How many instances like if well, we'll go over all this in a second. So let me Go in here. I'm going to edit this using Notepad plus plus because if I actually open it up in regular notepad It's going to look it's all gonna be on one line because I created it in Linux And so the end line character is different But a notepad plus plus is a free open-source application And it's it's very good if you're stuck with Windows. So inside our header tag here I am going to paste the stuff I just copied from the Microsoft website So these are just a few of the options if I just do that and save this and I go back and I click my hta file We get a full-screen application takes up the full screen. We got our scroll bar on the side We don't see our toolbar at the bottom. So if you wanted to make your web app Run as a local full-screen application. That's how you do it We can close this by hitting alt f4 like you would with most applications. I have also found I'm pretty sure It's been a while since I've done this but JavaScript has I think it's JavaScript has an option to close current window And if you put that into your HTML file or hta file as a button you can close the window with that button so Even though we don't have our toolbar at the top of our window we can make our own Close button and basically make our own little toolbar at the top of our application if we want. Let's go into Our our little hta file here. I'll remove this window state Maximized you can have options like minimized if you want to start off minimized So I'll remove that line save it run it again and this time it opens up And the screen here and once again we have no border because we set to have no border because we have a lot of options set in here But it's not full screen anymore. Let's look at some of the other options here System menu. We'll remove that one in a single instance. So Here it says yes So what basically what that means is if I click this to open it and it's already opened and I go to click it again Instead of opening a new instance. It's just going to bring up the instance. It's already open So if you don't want the person to open up more than one instance of your application We will set that setting of Single instance to yes, you can set to no or remove that line now if I Save it and run it and then run it again You can see I have two instances of it running once again alt f4 to close each of those Another option here is the icon which we'll get to in a minute because we're not seeing our border or actually our task bar here so we're Not seeing our icon here. We have border set to none let me Remove that line save it and run it again And now you'll see we still don't have a task bar, but you can actually see a border around the window So you can now resize it and you have that border. That's one of the advantages I think to HTA. I could not figure out how to remove this border using visual basic script So it's nice sometimes if you don't want that border To remove it you have to use HTA as far as I know if anyone knows otherwise you can let me know Alt f4 again to close it now that we have a border. We can also remove this System menu which is your default little menu at the top So I'll remove that run it. Oh I'm mistaken I'm not sure what system menu was Oh caption caption is actually what I was thinking of I think we'll see Remove the caption save it run it again, and there now we're back to having our application with a little toolbar here Little caption bar, I guess according to the HTA where they can have buttons to maximize minimize and X to close Still have this other instance open I can alt f4 to close that now that we have our toolbar Or our task bar there at the top. I can go in here. You can see I downloaded an icon It's a it's got to be an ICO file. I tried it with a PNG It did not work could have been be due to the size because it was larger But I think it has to be an ICO file an icon file Which you can create with GIMP Of just tux here, so I'm gonna go in here. It's in the current folder. So I can just say here Tux dot I co save Unfortunately, it'd be nice if it changed the icon here it doesn't but when we run our application You can see up here right next to the title. It's the little icon of tux So that's just a quick look at HTA files once again I know most my viewers are not Windows users but if you want to quickly make an application for Windows and you want to use HTML HTML 5 CSS with some JavaScript in it and Make it seem like a application. This is one way of doing it and in Future tutorials in this series. We'll see how to make those into executables I can think of two ways off the top of my head that are are simple to do But before we finish the tutorial, I did want to show you something else now this is Yeah, it's saying error loading page because it's trying to load Something that isn't there Here's another HTA file. Let me open that up a notepad plus plus and In fact, I'm going to remove this head part first just to give you an example So let's say we had that program. We were just running and when you clicked on something it linked to something else using H hyperlink reference so in this class case index.html which is Inside the same folder right here. It's our original File What I'm going to do here is that's this file. Let me make sure I have this save If I open this up Obviously, it's just the word test and when you click it It opens it up an Internet Explorer opens up the link in Internet Explorer Obviously in most cases, you're not going to want that you're going to want to link to within what you're working with so another option we can put in the head of our HTA file here just like we had all the other options was navigable Yes, that means it will navigate within our application so let me close that now that I have that saved and Run it again now when I click test it opens up my application and So you want to make sure you do that? I should also I believe if I wanted to Change this to HTTP So filmsbychris.com save that Reopen it Now when I click this hopefully There we go. It opens up my website. So if your application has more than one page, and it's going to be linking to external or local HTML files Any any URL links you want to make sure that you set navigable equal to yes Otherwise it will open it up in a separate Internet Explorer window That's all I have to show about the HTA files in this tutorial Once again, I know most my viewers aren't windows users, but you should know this stuff in case you want to quickly take your application and Very simply like you saw just taking our original HTML file and Renaming it dot HTA gave us a basic window like this So and it gives it that application feel not that web page web application feel So I thank you for watching visit my website filmsbychris.com. That's Chris at the K There should link be a link in the description If you have questions, please visit my site and go to the IRC link join us in the IRC channel It's on free node pound films by Chris once again Chris with a K Try to avoid asking technical questions in the comments below Good chance. They won't get answered the good chance They probably won't even be seen by me because I get a lot of comments Also feel free to comment below. Let me know you like these tutorials give thumbs up If you're liking this series on packaging applications for different operating systems So once again, thank you for watching and I hope that you have a great day