05 - Loading HTML from a file
In this chapter, we're going to create a html file, load it, and then show a dialog box on button press.
Preparing Folder
First, let's make a new folder in /a/. Name it project. This is where we'll put our html file.
Next up, go to /a/project and create a new file named index.html. This is where we'll put all of our html.
Creating a html file
Open the index.html file with CodeMirror, paste this, and then save it.
<html>
<head>
<!-- The head, this is where scripts and styles go -->
</head>
<body>
<!-- The body, this is where the actual html goes -->
HTML Test <br>
<button>Click me!</button>
</body>
</html>
This is a html file containing the text "HTML Test", and a button saying "Click me!" below it.
Loading the content
To show this inside of a window, we need to convert it to something called a "Blob", then use that as the window url. To do this, we can use $file.getUrl with the path and a callback. We're going to use a 200x125 window. This is how to do it, assuming the html file is in /a/project/index.html:
$file.getUrl("/a/project/index.html",function(blob){
$window({
url: blob,
title: "HTML Example",
width: 200,
height: 125
})
})
It works! You may notice that the button does not look like it should in Windows 93, and we're going to fix this in a later chapter.