 Okay, so we've been working on this series on taking our application that we've created using HTML JavaScript CSS as the front end and packaging it so that You can run it as so it seems at least like it's a standalone or a local application Some cases we do have it running completely locally today We're gonna look at a technique that you could do locally or remotely either way it would appear the same to the user I've gone over the benefits both in previous videos. This is a series So there should be an annotation on the screen that will bring you to the playlist for this video If you haven't started beginning this playlist you may want to in that One of the first videos we created this application, which is a simple little JQuery mobile application with a list of items that could be clickable They they really don't do anything now other than link back to themselves But the sir the list is searchable. So it's it's a basic little application Just to give you a feel of what you could do here That's what it's kind of supposed to look like I've used a different theme for the little filter bar there. I'm using Internet or I'm using Windows XP in the latest Internet Explorer for Windows XP is Internet Explorer 8 which displays a little different you can see the same application functionality same It's just a little block here looking I'm pretty sure, you know, if you use newer versions of Internet Explorer, it probably I'm guessing. I don't have a copy in front of me would look more like it's supposed to as it does in Chrome here But the technique we've been using using it using I just dropped my mouse hold on one second Okay, that's a new there we go. Okay What was I saying the Yes, the newer versions of Internet Explorer, I'm assuming old display properly I don't have versions in front of me functionality is the same. We have been using HTA files, which are HTML application files something that Microsoft develop is one of the things I think they've kind of done right It's nice makes it easy. I did mention previous videos that you could also use a visual basic script and open up Internet Explorer Directly, but give it other options like no toolbars. No address bar remove the status bar These are all things that you can do with a visual basic script. So it's similar to HTA. There are some benefits for one and the other So I figure in this tutorial. I'm going to show you how to do a visual basic script real quick that would do that But either way, it's I believe it's using Internet Explorer as a background So whatever version of Internet Explorer you're using will be What it's used to display your application? Right now, it's not a big deal if you're someone still on Windows XP It's still functional even though it looks a little different and that's just in this case with the CSS But as time goes on if people are using Internet Explorer, these techniques may not work anymore once new HTML and JavaScript Techniques come out and they're not updating they'll work on Windows XP in something like Firefox or Chrome But Internet Explorer or an application where we're using Internet Explorer. They may not work in the future So if you're watching this years from now Be aware these techniques may not work Perfectly in Windows XP. Just keep that in mind. Anyway jumping in Now initially this is there are a few extra things in here now But this is our project here, which is an HTML file which before we relabeled as HTA which gave us an application that looked like this. So it's just like it is in the web browser just with out the borders I mean without the toolbars No address bar. We gave it a little icon there Today we're going to be using a program that is I know it's in Windows XP I'm pretty sure I've checked that it's in Windows Vista and 7. I can't speak for 8 It's actually a program that's been in Windows for a long time that a lot of people don't know about It's called iExpress and it's for creating installer packages And it's very simple to use the only real drawback I see to it is that it can't package as far as I know Folders so in this particular case we have this one folder with some CSS files it and a folder within that that has a few image files so we could either move all those into the current folder and Modify our scripts a little bit Package them in a zip file and have the installer extract that that would be one option Although that'd be an extra step kind of extracting and then extracting again Which I'm not looking to do here So what I'm going to actually do is I'm going to show you how to open up Internet Explorer using a visual basic script Without the address bar or toolbars or status bar and point it to your site to your the same file But running on a Internet host So if you have a website once again the benefits of this is that you can modify your program anytime you want Without the user having to update stuff So what I'm going to do is I create a new folder here and within it I create a visual basic script I'll open it up here in notepad plus plus and I'll just explain it all out right now First thing we're going to do is we're going to create an object It's going to be a windows shell object or a windows script object So that's what we're doing there and that's kind of just for this last step here It's kind of why we're creating that next we're going to create an Internet Explorer object once again This is an object you're creating the name of it there You can call it the most part which whatever you'd like But it is an object that we're creating and it is an Internet Explorer application Next we're going to say take that app that object Internet Explorer object navigate in this case We're going to navigate to the same Program that we wrote locally, but hosted on a web server So it's on my films like chris.com ford slash scripts ford s slash List and if you're watching this video years from now that might be gone. So don't go. Hey, where is that? And then we're going to set a whole bunch of options and these are just a few of the options you can set if you Google There's a lot more options We're going to say address bar equal to zero or you can write false That means no address bar same for the toolbar status bar there We're going to set a width we've been doing eight six hundred by eight hundred kind of giving it a long feel since this kind of It would give you the same feel that you would on a mobile application Although in this particular case the window will be resizable. There are options for visual basic scripts to take the Internet Explorer object and And make it non sizable. So there's a lot of other options I'm also going to set the position of it of three hundred Left and 150 right. I'm sure there's an option in there where you can get the screen width and divide it in half and Subtract half the width of our application Just to center it up or there might just be a center option. I don't know off the top of my head Next once this is ready, it's going to sleep for a tenth of a second Not really remember why I put that in there, but it's in my notes So that's why I put it in there might be able to skip that and then we're going to say that it's visible One it's true. You can set that to zero and this program will actually run in the background Which in this particular case is somewhat pointless since it's mainly we're creating a user interface this way So it'd be silly to have a hidden user interface unless you're really trying to screw with someone Maybe you could put like a flash file in there have it open up a youtube channel So they're hearing stuff but not seeing it and they're going. Where is that coming from? I have seen malicious programs like that. They've been around for a long time um And then this last step without this when it opens up the internet explorer window It's going to open up in the background So if you have other windows, you won't see it right away. You'll see it show up down here On your little toolbar down here at the bottom um your taskbar But it's actually we'll open up behind those and you have to minimize stuff to get to it or click on it down there what this does it says take our windows script object that we created up there and make uh what the Object the internet explorer object make it active which would bring it to focus So without that it opened up in the background out of focus. This will give it focus So went over that real quick. Let's go ahead and you can see it right here. I called it index.vbs I'll double click that and you can see right there is our application And it works Okay, not as nice, uh, I don't believe as far as I know with the visual basic script Whether you can set the title for the toolbar up here Uh and the icon unless you actually do that in the html on the page Uh just like you would with a regular web browser But I think you'll always get the url and then the title and then it will say internet explorer So that's why I had been using ht. I think it feels a little more Application like but for the most part this is this will work And if it goes off you do have your scroll bar, which you could I believe disable as well So now we want to take that and you could do this as I said with with any script and we're going to Make an exe file from with it from iExpress which once again is built into as far as I know every version of windows It's actually if you go through the windows system 32 folder They have actually as much as I dislike Microsoft They have a lot of really neat applications in there that have been around since like windows 3.1 and windows 95 That are actually really good that a lot of people don't know about Which is sad. It's like they've been going downhill for the last 30 years. Okay. Anyway I'll just type iExpress here in my run bar click. Okay It's we're going to create a new one. So we'll create that You have some options here to extract files only. So if you just want to make a self-extracting zip file Basically, that's what this will be self-extracting exe file something to do with active x We're just going to do extract and run installer installation, which we're not actually going to run installation We're just going to run our vbs script We'll click next here We'll give our package a title because if if your program is really large if it's extracting a lot you you can have A status bar a progress bar going you're not going to see that with this in fact We're going to disable it because this is um So such a small application, but we'll call it my list It'll be the title of our package When you first write do you want uh to prompt the user with a message you could you can have a welcome message or whatever We're going to say no to that though Do you want to split your license? Do you want to say hey? This is uh this program's written on the gpl not necessarily a bad idea But once again if you're actually doing an installer that'd be a good idea We're just trying to make a program you click on and run you can throw it on a usb drive Download it through an email and just click on it and run you're not want we're not trying to install every time So next we're going to add our files Before we add the files though because we're going to have our vbscript this just like uh our last technique of using uh seven zip We are actually going to you need to have an executable program Either an exe file A batch script or actually probably a cm COM file would work as well But we're just going to create right here a simple little batch file I'm going to just call it one dot bat just because that's why I called it in the previous tutorial Call it pretty much whatever you want. We'll edit it and now In the last video when we used a batch file we used start and the name of the file we wanted to start up That won't work here mainly because I think when you run Uh iExpress mainly probably because it's so old It doesn't use cmd if you're familiar at all with one of those you can type in cmd in the run box and you get A a terminal you can also type in command. Oops if you spell command right And you get a window as well and they look pretty similar But they're actually very different um Command I believe is older than cmd and comparing the two is like comparing um You know Bash to a standard shell they look the same they act the same in a lot of ways But then everyone tells you hit a thing that's different right off the bat. You'll notice that uh, this will display full long names Command uh shortened names that can't have file names longer than a certain length typed out And there's just a bunch of little things. There's no auto completion. There's no history So I think iExpress is using command Rather than cmd. So what we're going to do is we're actually going to tell it to use cmd So it's going to start command and then command will start cmd. We'll say cmd ford slash c for command So we're telling it to run The index dot vbs and I believe that's all I have to put inside this batch script this batch file We'll go back into our iExpress here and add both those files. So I'll go to where I have them. Oops save So I'll just choose both of those and once again you can add anything except for folders It's kind of sad and once again probably just because the age of the program Um And I have both those in there. I can click next They'll say install program. This is the program that's going to run Uh after it unpackages everything and as you can see when you drop down It shows you any executables inside your package the vbs file did not show up. We'll choose the batch script After your installer your batch script in this case runs. Do you want to run another program? You could you could have a separate program maybe clean things up after your program extracts We'll click next here You have options here to show the installer window Hidden minimize maximize. I'm just going to go with the default so you can play with those options to hang on What you want here? I'm going to click Do you want a message to display after it's done running? No in this case. I don't And then here we're going to say Where do we want to save it as an executable? We'll call it the same folder. I'll just say list Dot exe save that Uh, do we want to hide the extraction process animation from the user in this case? It really doesn't matter once again We have two very very small files here even if it was visible It would flash on the screen so fast most people wouldn't notice it but Uh, we're going to say no in this case if you have a much larger project You probably would want so people know that your program is loading Also, you can say Store files using long names inside the package So if you have files with real long names, you might want to enable that but when you enable it will warn you It is now not compatible with 95 windows 95 before so if you plan on people using windows 95 Or before you may want that not to disable that not a big deal in this case. I'm just going to leave it unchecked either way Next Do you need your program to restart the computer after installs once again? We're not really installing anything. We're more just running it. So I'm going to say no To restart you can say always or if needed And you can choose to prompt or not prompt the user So I'm not going to restart the computer after my program runs. We'll click next here. It's going to ask you to save a self Extracting Directive Which is an s ed file which is basically a text file saving all your settings So if you want to come back in later and make changes you can so we'll just save it to this Same directory and then we'll create our package I'm not going to click finish here because what's nice is if you leave this open If I want to change stuff to my batch script and my batch file I can make the changes I can click back and then next next and it will recompress everything I don't have to go through the whole process again Um, so there we go. We have our our file here that saved all our settings if we want to modify this later on But here's our exe file. Once again, it gives you a nice little stalled installer icon Um, it says microsoft corporation unlike using the sfx file on the previous trail which said I want to say iven or igor something the guy who who created that which you could probably modify in the config text file for that tutorial I believe Or with hex editor anyway Let's go ahead and give this a click There we go we get the we get the uh The the terminal screen there from it with our batch file, but then it opens up our our file our program here And it does work And this is linking directly to my website once again so I can modify this program anytime I want Um, let me go ahead and try something here. I am going to go back back back in our little thing here And I'm going to try saying this to hidden My concern is that it might hide both the batch file and the vbs file, but let's see Uh, just go through it all again and uh Then we'll click that Okay, so in this case it we do want to click hidden and that will hide our terminal screen So you can have that that batch script do whatever you want You can be do it could still be doing stuff in the background after this loads It could be running other processes and stuff and you won't see it if you make it hidden But our gooey interface using internet explorer Does start up there. So once again, I know most of my viewers aren't windows users But it's good to know this stuff if you want to package your applications for other operating systems So in this particular case, I'm using a vbscript and some html Uh and and some css to make a user interface But really the this iExpress will allow you to package up Uh a bunch of stuff and it's built right into windows, uh and and Very simple to use. So not only for this particular project. I hope you find that useful for other projects And I thank you for watching. I hope you're enjoying this series. I hope that you've watched all the videos in this series um, and I Uh, just ask that you visit my website. That's filmsbychrist.com. That's chris the k. There should be a link in the description Hope you don't ask too many questions about this considering. I'm not really a windows user I just know enough like stuff like this to to get my programs running on windows It's really the only reason I have windows into virtual machines the test programs I write because as a good programmer My programs should whenever possible be cross platform, which is kind of the whole point of this series Um, so I hope you don't ask me too many vb questions But I hope that I gave you enough that you can google stuff yourself to find out the answers More on vbscripts, uh and starting internet explorer or with hta files um And also as always, please don't ask technical questions in the comments in general if you do have questions Join us in the irc channel. It's on free note. It's pound films by chris chris with a k Or go to my website and click on the irc link. Uh, that's currently under our social networking tab And uh, you can ask me questions there or other people I don't know how many people they're going to be able to help you with windows questions But if I'm around I'll do my best to help you So I thank you again for watching and I hope that you have a great day So