Creating your first HTML5 Application: Hello World

In this tutorial, we will get started with a new Script# HTML5 Application project and continue working towards building a basic spreadsheet application.

Prerequisites

• Using the development branch
• Understanding of the [AMD Pattern] (http://requirejs.org/docs/whyamd.html)
• Familiarity with [RequireJS] (http://www.requirejs.org/)

---

Step 1: Create a new HTML5 Application Project and call it Spreadsheet

---

Step 2: Take a look at the project files under Solution Explorer

1. AssemblyInfo.cs contains assembly level information for the C# DLL that's generated when the project is built. In our project, the file name will be called Spreadsheet.DLL. In addition, it also defines a script template which will be used for the generated file.

2. FxCop.ruleset contains code analysis rules. Generally, you can ignore this file.

3. Script.Web is a reference to the Script# HTML Library. You can explore the available API's explosed by that library by double clicking that reference and viewing it in the Object Browser.

4. packages.config contains package references. You will not need to modify this file. It is automatically updated as you add or remove references. In addition, Nuget will use this file to automatically download project references.

5. Page.cs is a static class with a static constructor that gets executed when the resulting Javascript file is loaded.

---

Step 3: Create an HTML file

Create a static HTML file called Spreadsheet.html and set its "Copy to Output Directory property" as "Copy Always":

---

Step 4: Add script references

Let's wire up our Spreadsheet.js file along with its dependencies by adding the following script tags to the head section of Spreadsheet.html:

<script src="http://requirejs.org/docs/release/2.1.9/comments/require.js"></script>
<script src="ss.js"></script>
<script src="Spreadsheet.js"></script>

• require.js is an Javascript File and Module Loader that will allow us to load modules defined using the AMD pattern.

• ss.js is short for ScriptSharp.js. It provides us with some utility functions and types so we can program just like we normally would in C#.

• spreadsheet.js is the Script# compiler generated Javascript file that contains our code

---

Step 5: Modify Spreadsheet.html

Add the following code in the body section to create a button with an id="sayHello":

<button id="sayHello">Say Hello!</button>

---

Step 4: Modify Page.cs

So far we have an HTML page with a button and a few Javascript files referenced in that HTML page. However, there's nothing interesting happening yet. So, let's add an event listener to the button and make it popup an alert box on click:

Let's add the following code to the static constructor in Page.cs:

    Document.GetElementById("sayHello").AddEventListener("click", delegate(ElementEvent @event) {
        Window.Alert("Hello World...");
    }, false);

Now, build the application and look inside the bin\Debug folder:

You will notice that there's a file called Spreadsheet.js. Let's open this file and take a look at it:

Notice that the C# code in Page.cs was translated to:

document.getElementById('sayHello').addEventListener('click', function(eevent) {
    alert('Hello World...');
}, false);

---

Step 6: Run Spreadsheet.html

Double click on bin\Debug\Spreadsheet.html to open it in a web browser. You should see a button. When you click it, it should display an alert. If you don't see the alert, you should look at the debugger's console for errors. The process of debugging script# projects entails debugging the generated HTML/Javascript file in the browser.