Scala.js tutorial: How to start building single-page web applications

Table of Contents1 - Single-page applications2 - 1. Getting started (dependencies)3 - 2. Create hello3.html4 - 3. Create Hello3.scala5 - 4. Run the code!6 - Summary/Discussion7 - Resources8 - More facades9 - Other tutorials in this series10 - Bonus!11 - Source code

In this final, third part of my three-part introductory series on Scala.js I’ll demonstrate a technique that can help you build single-page web applications with Scala.js. That is, the body of your HTML page will look like this:

    <div id="root"></div>          

    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-jsdeps.js"></script>
    <script type="text/javascript" src="./target/scala-2.12/scala-js-hello-world-fastopt.js"></script>

After that, your entire application will then be written in Scala/Scala.js, which is converted into JavaScript code in the scala-js-hello-world-fastopt.js file.

A Scala.js tutorial: “Hello, world” with an HTML button click

Table of Contents1 - 1. Create a new HTML page2 - 2. Make updates to use jQuery3 - 3. The new Scala code4 - 4. Setting the main class5 - 5. Running this example6 - Discussion7 - Summary

In my first “Hello, world” Scala.js tutorial I showed how to get started with Scala.js, including some necessary setup/configuration work. That tutorial ended by showing how to get the string “Hello, world” displayed in a browser.

In this tutorial I’ll take this a little further and show how to create an HTML button you can click that results in the string “Hello, world” being displayed in a JavaScript alert window. When the button is clicked, the alert window will be displayed by your Scala/Scala.js code.

A sample Scala/JavaFX application

As a brief note to self, here’s an example JavaFX application written in Scala:

object MainWindow {
    def main(args: Array[String]) {
        Application.launch(classOf[MainWindow], args: _*)

class MainWindow extends Application  {
    override def start(stage: Stage) {
        val borderPane = new MainBorderPane
        val scene = new Scene(borderPane, 600, 400)
        stage.setTitle("Al’s Pizza")

How to create a LibGDX ImageButton

I just started working with LibGDX, so I don’t know if there’s a better way to create a LibGDX Scene2d ImageButton, but I can confirm that this approach works:

Texture hikeTexture = new Texture(Gdx.files.internal("hike_btn.jpg"));
Texture hikeTexturePressed = new Texture(Gdx.files.internal("hike_btn_pressed.jpg"));
hikeButton = new ImageButton(
    new TextureRegionDrawable(new TextureRegion(hikeTexture)),
    new TextureRegionDrawable(new TextureRegion(hikeTexturePressed))
hikeButton.setPosition(60, 300);  //hikeButton is an ImageButton

I currently use this code in the show() method of a class that implements Screen, and it works as desired.

Android: How to send a message from a Thread to a Handler

As a quick example of how to use a Thread with a basic Handler in an Android application, the following code creates a view where the text in the TextView is updated to show the current date and time when the Button is tapped.

Java source code

First, here’s the Java source code for a file class named ThreadHandlerActivity:

Android source code to show a popup dialog with a text field

I am working on a way to rapidly mock up Android applications using Android Studio, i.e., to rapidly prototype Android applications on the fly, and little snippets of code help to make this happen. For instance, this snippet of code shows how to show a popup dialog to prompt a user to enter information into a text field:

An Android ListView with the Back/Up/Home button enabled

Without much discussion, here’s an Android ListView/ListFragment with its Back/Up/Home button enabled:

An Android ListFragment/ListView with Back/Up button enabled

(That button used to be a Home button, but now it’s used for the Back/Up action.)

And here’s the source code for that ListView/ListFragment:

How to center elements in an Android LinearLayout (horizontally)

I was just working on centering some components in an Android LinearLayout and came upon this helpful advice:

android:gravity takes care of its children,
android:layout_gravity takes care of itself

So, in my case, where I wanted to center two buttons horizontally in a LinearLayout, I used android:gravity="center".