In Chapter 1, Advanced TypeScript Features, we looked at the basics of creating a UI using Bootstrap. We will take the same basic page and adjust it to fit our needs with a couple of little tweaks. Our starting point is this page, which stretches across the full width of the screen by setting the container to use container-fluid, and divides the interface into two equal parts by setting col-lg-6 on both sides:
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
</div>
<div class="col-lg-6">
</div>
</div>
</div>
When we add our text area and label components to our form, we find that rendering them in this row does not automatically expand them to fill the height of the screen. We need to make a couple of adjustments. First, we need to manually set the style of the html and body tags to fill the available space. To do this, we add the following in the header:
<style>
html, body {
height: 100%;
}
</style>
With that in place, we can take advantage of a new feature in Bootstrap 4, which is applying h-100 to these classes to fill 100% of the space. We are also going to take this opportunity to add the text area and label, as well as giving them IDs that we can look up from our TypeScript code:
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-6">
<textarea class="form-control h-100" id="markdown"></textarea>
</div>
<div class="col-lg-6 h-100">
<label class="h-100" id="markdown-output"></label>
</div>
</div>
</div>
Before we finish off our page, we are going to start writing TypeScript code that we can use in our application. Add a file called MarkdownParser.ts to hold our TypeScript code and add the following code to it:
class HtmlHandler {
public TextChangeHandler(id : string, output : string) : void {
let markdown = <HTMLTextAreaElement>document.getElementById(id);
let markdownOutput = <HTMLLabelElement>document.getElementById(output);
if (markdown !== null) {
markdown.onkeyup = (e) => {
if (markdown.value) {
markdownOutput.innerHTML = markdown.value;
}
else
markdownOutput.innerHTML = "<p></p>";
}
}
}
}
We created this class so that we could get the text area and the label based on their IDs. Once we have these, we are going to hook into the text area, key up the event, and write the keypress value back to the label. Notice how, even though we are not in a web page at this point, TypeScript implicitly gives us access to standard web page behaviors. This allows us to retrieve the text area and label based on the IDs we previously entered, and to cast them to the appropriate type. With this, we gain the ability to do things such as subscribe to events or access an element's innerHTML.
Once we have these interface elements, we hook up to the keyup event. When the event is fired, we look to see if we have any text in the text area and set the HTML of the label with the content (if it is present), or the empty paragraph (if it is not present). The reason we have written this code is because we want to use it to ensure that we properly link up our generated JavaScript and the web page.
We can now revisit our web page and add the missing bits so that we can update our label when our text area changes. Just before the </body> tag, add the following to reference the JavaScript file that TypeScript produces, in order to create an instance of our HtmlHandler class and hook the markdown and markdown-output elements together:
<script src="script/MarkdownParser.js">
</script>
<script>
new HtmlHandler().TextChangeHandler("markdown", "markdown-output");
</script>
As a quick review, this is what the HTML file looks like at this point:
<!doctype html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<style>
html, body {
height: 100%;
}
</style>
<title>Advanced TypeScript - Chapter 2</title>
</head>
<body>
<div class="container-fluid h-100">
<div class="row h-100">
<div class="col-lg-6">
<textarea class="form-control h-100" id="markdown"></textarea>
</div>
<div class="col-lg-6 h-100">
<label class="h-100" id="markdown-output"></label>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script src="script/MarkdownParser.js">
</script>
<script>
new HtmlHandler().TextChangeHandler("markdown", "markdown-output");
</script>
</body>
</html>
If we run our application at this point, typing in the text area automatically updates the label. The following screenshot shows what our application looks like in action:
Now we know that we can automatically update our web page, we have no more changes that need to be made to it. All the code that we are about to write will be done entirely in the TypeScript file. Going back to our list of requirements, we have done enough to satisfy the last three requirements.