With Microsoft’s new Operating System, Windows 8, preview out I decided to have a go at creating an app for it. The app I made was a simple “Hello World” app in which you type your name into an input box and when you press enter the app says hello to you. To do this you need to have Windows 8 preview and Microsoft Studio Express 2012 RC for Windows 8. I shall talk you through the steps to make this app in this blog. 1) Creating the App The first thing you need to do (after installing Windows 8 and Microsoft Studio express 2012 RC) is to create a blank app. To do this open up Studio Express, click “File” and then click “New Project”. A menu will pop up with options for different apps. Select “Blank App” and name it “HelloWorld”. When you are done click “OK” and you will have created a blank app for you to play with! 2) Creating Your Start Page Now that you have a blank app we now need to set up your start page. The start page is what will appear when you start up your app. At the moment, if you have left the default code, when you click the start button your start page will be a black screen with “Content goes here” displayed. To change this you need to go to the default.html file and replace the code for “Content goes here” with the following code (*NOTE: leave the CSS code alone. Can use it later to set the background):
<body> <h1>Hello, world!</h1> <p>What's your name?</p> <input id="nameInput" type="text" /> <button id="helloButton">Say "Hello"</button> <div id="greetingOutput"></div> </body>
This should create a start page with the Heading “Hello, world!” with a sentence under saying “what is your name?” along with an input box and a button. 3) Creating and Registering Event Handler for the App To get your Hello World to work you now need to go to the default.js file and create an event handler for your app. This is where you write the code to provide interactivity for your HTML code. Leave any default code in there and in the boundaries of the function type in the following: function buttonClickHandler(eventInfo) { var userName = document.getElementById("nameInput").value; var greetingString = "Hello, " + userName + "!"; document.getElementById("greetingOutput").innerText = greetingString; } Now that the event handler has been created you need to register it. To do this you need to add the following code app.onactivated section of the default.js file: var helloButton = document.getElementById("helloButton"); helloButton.addEventListener("click", buttonClickHandler, false); Now if you’ve done it right then when you start up and type in your name and click then button then it should display “Hello, *yourname*!” If this works for you then congratulations! You can now expand on what you have done here like changing the background using CSS or add different functions so that you get different messages appear with different names. I hope you found this blog useful.