Part 3: Integrate Material Design Lite with ActionScript

How to use transpiled ActionScript with HTML
by Josh Tynjala

This is the third part in an ongoing series of tutorials about how to integrate HTML and transpiled ActionScript. In Part 1: Build the HTML DOM in ActionScript and Part 2: Markup and stylesheets with transpiled ActionScript, we learned two different ways to build a simple HTML widget that calculates the monthly payment for a loan. Whether creating a form by calling document.createElement() in ActionScript, or defining elements in real HTML markup and calling document.getElementById(), we know the most common ways to work with HTML in ActionScript.

In the final installment of this tutorial, we're going to revisit our widget a third time to discover another way to style it. We'll learn how to add Google's popular Material Design Lite library to our page.

This time around, our ActionScript code won't need any changes. We're focusing on purely visual changes this time, so we'll be modifying the markup and loading different styles.

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.

What is Material Design Lite?

Material Design Lite was created by Google to make it easy to style a website following their guidelines. Abbreviated as MDL, this CSS framework works well on both mobile and desktop, and it degrades gracefully on older web browsers. It's a great way to give your website an app-like look and feel with a familiar style.

First, add the following markup to the element of your HTML file:

This loads the styles for Material Design Lite and some JavaScript that enhances the components, without relying on any heavy frameworks.

Rebuilding the form

Let's start out by reworking our

container. We're going to style it as an MDL Card:

We add class="mdl-card mdl-shadow--2dp" to the

element. This will style it like a "card", with a drop shadow to give it some depth.

Then, our content is divided into three sections:

title
supporting text
actions

The "title" section is like a header for the card. Obviously, we'll display the title there, but we could also add a special background and other controls too.

The "supporting text" section is where we'll put the main controls of our form. We'll add our inputs here again in a moment.

The "actions" section is like a footer for the card. It's a good place to put the form's submit button, since that's the main action the user will take.

Title and actions content

Let's start by filling in sections for the title and actions.

The mdl-card__title class for the title tells MDL to style it like a title bar. We use the mdl-card__title-text class on the heading to ensure that the text is sized correctly for this purpose:


    Loan Payment Calculator

The mdl-card__actions class creates a new section for buttons or other controls that trigger actions related to the card's content. The mdl-card--border class gives it a border to divide it from the rest of the card's content:

We added our form's submit button to the actions container, with some extra CSS classes to set its styles. For complete details about how to style buttons with MDL, see Material Design Lite Components: Buttons.

Supporting text content

In Part 2, you may recall that we created several form controls with a and an inside a

element, like this:


    Principal

With MDL, our markup won't change all that much. Mainly, we'll add some CSS classes to each element so that MDL knows to style them correctly:


    Principal

For complete details about how to style inputs with MDL, see Material Design Lite Components: Text Fields.

Tips & Tricks

If you'd like to use Google's , you can load it from Google Fonts by adding the following markup to your HTML file's section:

In the markup above, we load the normal and medium weights. You are free to load additional styles, if required.

Final Result

Go ahead and open index.html in your web browser. You should see something like this:

We've finished our loan payment calculator widget using transpiled ActionScript and HTML. No plugin required of course!

What's Next?

Material Design Lite isn't the only CSS framework out there. Bootstrap is another popular one that would be just as easy to use with transpiled ActionScript. Both MDL and Bootstrap offer great foundations to help you get started building a more app-like experience in the web browser.

While our project is only a little widget, it should give you a taste of what it's like to build a single page web application with transpiled ActionScript and HTML. There's still more to learn about building web apps, of course. Stay tuned for future tutorials that cover things like navigating between views and updating the browser history, and loading HTML templates to display different parts of your app.

If you want to dig into the example above a little deeper, download the complete source code for Part 3 on Github. The repository contains the code from all three parts of this tutorial. Go ahead and study everything in context, and compare the different techniques.

Download the Code View Full Repository Return to Intro