2.3 Hello, World!

In the previous session, we created what's called a hosted app. It's really nothing more than a shell around an already existing web app. So all of the logic, all of the assets, everything is already on the web, and we just created an app that basically, well it's, as I said, a shell around an existing application. Chances are though that if you're watching this course, that's really not what you want. You want to create your own application so that the logic and the assets are part of the application itself. And you might want to go out to the web to retrieve data or something along those lines. And that is definitely something that we are going to work towards. But in this lesson we're still going to keep things rather simple. And we're going to create a hello world application. So let's go ahead and create a new universal app. And let's just call it Hello World. And we're going to start off with the same type of application as the previous lesson. We have default js and if we look at the files, we have all the same files basically. We have that default HTML and it has the same markup. So let's go ahead and run this, where we can see what it's going to look like in the browser. Or I'm sorry, not the browser, in the application. And you can see that there's really nothing going on here, and that's because, well, there's nothing in the markup really, except for content goes here. Now, behind the application you can see that we already have some of the tools like we would have within the Edge developer tools. We have the DOM explorer, we have the CSS stuff that we could use, and we could also actually get to the F12 developer tools. Just go back to the application, press F12 and viola you have those as well. So, there are a lot of tools we could also debug our code that is something that we will definitely do later in this course. But of course we want to do something a bit more here than just showing content but first, let's change this from ui-dark to ui-light and lets just see what that looks like. It basically just changes the theme so that instead of a dark theme we have a light theme. So that's nice to have. And of course you can use your own themes if you want but we have two out of the box. Okay, so let's add some different content here. Let's have a message with an h1 that just says, Hello World. Then we will have a text box that somebody could enter their name. We will have a button that they will click in order to display a message that'll say hello and then whatever name that they input. So let's go ahead and add that markup. So we will have an input element and its type of course is text. And lets set the ID to name input. And that's really all that we need for that element. But we also need a button to click. Let's give it an ID of name dash button. And the text is going to be Say Hello. And then we need a div element that's going to be for our message. This will be the output. So let's give it an id of Message output. And we won't have any content there. So, basically we want some JavaScript that's going to retrieve the button elements so that we can add an event listener for the click event. We're going to get the value of the input and then use that in the output. So lets go back to default js and ideally, this would be inside of another file, but we're going to, once again, keep things simple, and just do this here. Now, if we look at this file, we are going to see that there are some things going on. Like, you can see that this onactivated event handler is being assigned. This fires whenever the application is activated, but an app can be activated for a variety of different reasons. And you can see one of them here is the application is launched. And then if you just look at the code and look at the comments you can figure out what's going on here. So if the application was launched well there's two reasons why an application could be launched. It could be a newly launched application which is, essentially, what we have for this if statement. The comments make that very clear. Or we can have an application that's launched that has been suspended. And then we have this "else" here. So, for a newly launched application, we might need to initialize some things. And then, if an application is being launched from suspension, then we might need to initialize some other things. So, that's what we could do there. Now, in our case we want to set up our event listener whenever our application is activated. So you can think of this as kind of the load event within our application. So we are going to setup our event listener and we're going to do it inside of this if statement. We want to setup this event listener only if or application has been launch. So ideally we would do something this, var button equals documents dot get element by ID. And let's see that was name dash button and then we will say button ads event listener. We want to listen for the click event and we will have our function. And inside of this function, we would retrieve our input element. So let's go ahead and save our name input = document.getelementById("name-input") and then we will get to that value and then output a message. Let's go ahead and get the output message as well, so document get element by ID, and I believe I called that output-message. So inside of the event listener, we'll save our name equals name, Input. And we will get to that value. And then we will say output message and we can use the inner HTML property. And we can use the new es 2015 feature of stream interpolation. So we will use Back text here. We can say 'hello' and then 'dollar sign, open, curly brace, and then name. So it's going to take the value of name and then place it here. We don't have to do any type of concatenation or anything like that. So let's run this and we are going to see that this works exactly like we would think. Although it helps if you type things correctly. So let's break here. Let's just go ahead and stop running our application and we want getElementById, there we go. So we will run this again, and now we will see that it works exactly like we would think. So my name is Jeremy, so I'm going to say Jeremy, say Hello And once again, unable to set property innerHTML of undefined or null. So apparently I did something wrong. Let's see. Message outputs is the ID and I said outputMessage details, details its always the small little details that gets you. So finally last time lets do our name, say hello, and hello Jeremy. Well as I said earlier, this is just a very simple Hello World application. This was here so that you can get an idea of what it is that we're going to be working with, and that is just normal web technologies. So all of the ideas and concepts that we've been using for forever as far as the web is concerned can be applied to Windows 10 universal apps. Now with saying that, the applications that we write are a little more than, of course, what we looked at in this lesson. There are more than just dev elements, more than just normal form elements, and that's when the WinJS library comes into play. And in the next lesson when we start to actually writing our application, we're going to use some of the controls that WinJS gives us.