• Overview
  • Transcript

2.2 Create a Hosted App

The easiest Windows 10 application you can write is a hosted web app. It basically puts an existing web application in a Windows 10 window. For more power, you can even allow the web app to access Windows system APIs!

2.2 Create a Hosted App

The first type of application that we are going to write is probably the easiest. It's called a hosted app. And basically, it means that all of the logic, all of the UI, basically everything about the application is already on the web. So basically, it's an existing web application and we are just going to provide a shell around that. Now, one of the reasons why you might want to take this approach is, if you already have a web app and it works well, regardless of resolution or the device that is connecting to that website. So if it works well on a desktop or a tablet or a phone, then you've already done all of the hard work, you could just create a hosted app. Now, the downside is that nothing is then stored within the application package itself, it's all being downloaded, and that could be a bad thing, but most of the time users are connected, especially if it is a phone. So, if you have an existing web application that works well in any device any resolution, then this might be something that you want to do. So we're going to create a new project. Make sure that you are choosing JavaScript. And then, Universal under Windows. Now, you might have some other entries here that would have Universal app for Windows 8.1, things like that. Avoid those. We don't want an 8.1 app. We want just the Universal Windows. And let's call this HostedApp and this is going to create our application and it's going to pull up a file called default JS, by default. This is not the starting point of our application, but it is as far as the JavaScript is concerned. The starting points right now is this default html file. It looks just like a normal html file. There are some references to some style sheets and JavaScript files. These three files are all part of what's called WinJS. This is the library that Microsoft has created For writing Windows applications and we will be talking more about WinJS as we go through this course but for right now these files are all part of WinJS and then there are some files that are for this app specifically. So if we wanted to add even more CSS and JavaScript, we can do that very easily just like a normal web page. But for now, we're going to close default.html. We're also going to close default.js, because we're not going to write any code here. Instead, we're going to open up package.appxmanifest. This is the manifest file for our application. And it contains a variety of settings. Here on the Application tab, we can have the display name. So let's put a space here, so Hosted App. So that whenever we run the application up in the title bar, it's going to say, Hosted App. We have the start page. This is where we can dictate what page is used as the start page. You can see that it is default.html. And then, we can also check the supported rotations is we wanted to do that, and we can also look at some of the other things. If we go to capabilities, these are all of the things that we need to declare about our application. So if we needed access to the device's Bluetooth and to the microphone, then we would need to check that. We are essentially declaring that our application needs access to these things In order to function properly, and then the operating system is going to prompt the user, do you want to allow this app to have access to Bluetooth microphone and if they choose yes, then we have access to those things. And then there's this content URI's, this is something else that we are going to use within this lesson. Now basically, this means that if we want to load a webpage, directly within our application, and we are seeing that within our application, then we need to come here, and we need to specify those URLs. And that is something that we will do, here in a few moments. First, we're going to go back to the application tab and we're going to change the start page. We're just going to say http:// and then tutsplus.com so that the start page is going to take us To TutsPlus.com. So, let's run this. We can click on local machine. Now, we don't have to run this on our local machine if we don't want to. If we wanted to run it within the emulator, we could do that. Or if we had a remote machine or if we had an actual device, we could do that as well. But I'm going to choose local machine. And this is going to fire up our application. Now, the first thing we see is this screen. This is the splash screen and we have control over the splash screen. If we go over here to images, you can see that we have this splash screen scale and there's a variety of other images here, so we can control that, but notice that we're not going past this. That's because we didn't ad in that content URI. So, we have to come here and we have to say that we want to go or we want to be able to go to tutsplus.com and we want to see that within our application window. We want to include that and we can also control whether or not this application has access to the system API, so when our t is the Windows run time for this universal apps. So, for right now, we're going to say none but later on we're going to come back and change this, so that we can actually call system API's from within the application. So let's save this, let's restart and then we are going to see that our application is going to navigate to tutsplus.com. We can resize the window and we can see that it has resized in that based upon. What the developers at envato has done for this website. So, at first glance, it looks like that this works well on any screen size. So, this would be something that envato could do, if they wanted to. Now let me be clear here, this is a web page loaded within our application. So for all intent and purposes, there is not much difference between what we have here and the firing up edge and going to taskbar.com. We haven't given any special capabilities to this application. So this is basically just a trimmed down version of Edge, because we don't have all the extra features like tabs and stuff like that displaying the website. So let's do something a bit more interesting. And let's change this, so that the website that we specified has access to run the system API's. So let's change this from tutsplus.com and let's go to codepen.io and we need to go to the content URI's section and we need to add two entries here. The first is for codepen.io, and we want to change the WinRT access. Let's just go with all. Now normally, this is something that we probably wouldn't want to do, unless if we had complete and total control over everything. But even then, this is kinda scary if you give a website complete and total access to WinRT. That's probably something that I would not do, unless if it was an Internet site, or something along those lines. So let's have another entry, where we are going to use a wildcard, an *.codepin.io. Now you would think that this would be sufficient, but it's not. We need the base domain, as well as a wildcard for, or the sub-domains. We're going to grant that all access to WinRT. And so, let's run this. This is going to take us to CodePen. And we are going to create a new pen. And basically, we are going to create a button that whenever we click it's going to display a pop-up message. Basically, like an alert, except that we don't have alert in the windows API's. Instead, we have to use the Windows API to essentially do the same thing. So let's go ahead and write that function, let's call it foo. And, we need to create a message box object. So let's call that, message box, we want to new up windows.ui.popups.messagediaglogue, and then our message, let's just say, hello world. And then, we will show that message box, so we've created the message box, now we want to show it, we do that with a method. Called show async, and that will give us our message. Now we just want a button, so let's add that element. Let's use the on click event and we're going to call foo. Now if we're If you were typing this, you might run into an error, because remember that this is a webpage running within the context of a Windows application. So, it's going to be seeing everything that we're typing in and in some cases you might get to the on click, and then you might run into an error and it's not popping up for me this time. It did earlier, there it is. It says that there's a critical error on line seven. So we can just continue and everything's going to be fine, but you can see. Where it is taking what we are typing in, and then it recognizes that, hey, there's something wrong here. So that's what that error is, and we can just ignore it. So we will call the foo function, whenever we click on the button, and let's just have the text of Click Me. So we're going to save it, and then we're going to click on this button, and we are going to see a message box that says, Hello, World! Now this is not alert, in fact we can change this foo function, so that is calls alert, and we are not going to see anything at all because that is not part of the API, so we have alert Let's save this. We click on the button, nothing happens. So we are calling the Windows API from within CodePen, and that is actually executing. The reason is because in our manifest, we gave this website access to the system APIs and that gives us a lot of power. And, of course, with a lot of power comes a lot of responsibility. So we've created our first app, it was very easy to do, and really, it required no code. But in the next lesson, we are going to actually write our own application. It's still going to be very simple, but we're not going to, I'm going to say cheat in this case, and rely on an already existing web app. This is something that we are going to write ourselves.

Back to the top