Part 2: Markup and stylesheets with transpiled ActionScript

How to use transpiled ActionScript with HTML
by Josh Tynjala

This is the second part in an ongoing series of tutorials about how to integrate HTML and transpiled ActionScript. In Part 1: Build the HTML DOM in ActionScript, we learned how to create HTML elements on the page using only ActionScript code. We ended up with a simple widget that calculates the monthly payment for a loan. We're going to rebuild the same HTML widget from scratch, but this time around, we're going to use real HTML markup and a stylesheet.

ActionScript will help us find the elements that were created in HTML, and then we'll hook up all of the appropriate events and perform the final calculation. In other words, we'll let HTML and CSS do what they do best, and likewise, ActionScript will provide the business logic that brings it all together.

Source Code

Find the complete source code for this tutorial on Github. We'll break the code into bite-sized chunks (with detailed explanations) below. However, to see the bigger picture, feel free to dive into the full project.

Creating the HTML document

Rather than create all of the HTML elements in our constructor using ActionScript, let's build the document with real HTML. We created an HTML file in Part 1, but it was pretty minimal:

This time, we're going to add some more content. At the beginning of the element, we'll add a new

    
Loan Payment Calculator
    

        Principal
        
    
    

        Interest
        
    
    

        Years
        
    
    
Payment: 1687.71 per month
    Calculate New Payment

You may recall that we manually created all of these elements using ActionScript last time. By creating the form using HTML markup instead, it's easier to visualize the hierarchy of the DOM, and we'll soon end up with significantly less ActionScript code to read (compared to that big constructor from last time).

Querying the HTML DOM

With all of the form controls created in markup instead of ActionScript, we need to find a way to access them in ActionScript so that we can listen for events and read their values. Let's simplify the class we created in Part 1.

Start out by removing all of the code from the LoanPaymentCalculator constructor:

public function LoanPaymentCalculator()
{
}

private var _principalInput:HTMLInputElement;
private var _interestInput:HTMLInputElement;
private var _yearsInput:HTMLInputElement;
private var _paymentResultSpan:HTMLSpanElement;

We'll keep the member variables that stored the form controls, but we need to initialize them somehow. Inside the constructor, we'll query the document for each control:

this._principalInput = document.getElementById("principal-input") as HTMLInputElement;
this._interestInput = document.getElementById("interest-input") as HTMLInputElement;
this._yearsInput = document.getElementById("years-input") as HTMLInputElement;
this._paymentResultSpan = document.getElementById("result-text") as HTMLSpanElement;

In the markup, we gave each of the form controls an id. We pass that to getElementById() to find the underlying HTMLElement (which can be cast to a more specific type, if needed, and we do exactly that in the code above).

Similarly, we'll query the document for

var calculatorForm:HTMLFormElement = document.getElementById("calculator-form") as HTMLFormElement;
calculatorForm.addEventListener("submit", form_submitHandler, false);

private function calculatePayment(principal:Number, interestRate:Number, years:int):Number
{
    var effectiveInterestRate:Number = (interestRate / 100) / 12;
    var totalPaymentCount:int = years * 12;
    return principal * (effectiveInterestRate / (1 - Math.pow(1 + effectiveInterestRate, -totalPaymentCount)))
}

private function form_submitHandler(event:Event):void
{
    event.preventDefault();

    var principal:Number = parseFloat(this._principalInput.value);
    var interestRate:Number = parseFloat(this._interestInput.value);
    var years:int = parseInt(this._yearsInput.value, 10);
    var payment:Number = calculatePayment(principal, interestRate, years);
    this._paymentResultSpan.textContent = payment.toFixed(2);
}