Building native applications for all PC and mobile platforms from a single JavaFX project with Gluon Mobile and GitHub Actions

Frank Delporte
Nov 25, 2020 · 9 min read

The post “Starting a JavaFX Project with Gluon Tools” shows you how to start a Gluon Mobile Multiview project with a few clicks in IntelliJ IDEA thanks to the “Gluon plugin”.

In this post, we will use such a project and build it with GitHub Actions as a native application for Windows, macOS, iOS, Linux, and Android from one single code base!

Yes, that’s right!
True “Write Once, Run Everywhere”!!!

Image for post
Image for post

The application

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Based on “Gluon Mobile Multiview”

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

It’s not finished yet…

There are still some things to do:

  • The buttons to open a web URL on the “About” screen, use com.gluonhq.attach.browser.BrowserService which only supports iOS and Android. So either the Gluon-library needs to be extended, or this app needs to check the environment and run the appropriate command.
  • The layout of the color calculator screen doesn’t fit in a landscape layout so needs to be reworked.
  • The resistor drawing should scale to use the available space.
  • General work to do for a pixel perfect layout on all devices.

Any help and pull requests are welcome on the GitHub project ;-)

GitHub Actions

By adding .yml-files to the directory “.github/workflows” in your project, these will be run as configured. A simple example is provided on “Introduction to GitHub Actions” which checks out the pushed code, installs the software dependencies, and runs bats -v:

name: learn-github-actions
on: [push]
jobs:
check-bats-version:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
- run: npm install -g bats
- run: bats -v

Gluon

Gluon client plugin

One of the advantages is a much faster startup time, since the JVM no longer needs to be started. The resulting application will be entirely integrated into the native operating system.

More info is available on the docs pages on the Gluon website.

Gluon GitHub Build License Action

Gluon created such a build action which you can integrate into the build process of your JavaFX native application: “gluon-build-license” to correctly use your Gluon license key in the build process. You will need to add this license to your GitHub project repository secrets.

This license-step is optional! If you don’t have one, a popup will be shown at startup of your application. You can request a free license to Gluon if you are working on a student or open-source project, as described on “Free Gluon Licenses”.

Image for post
Image for post

Build as a native application with GraalVM

The build process on GitHub Actions

General description

  • Give the build file a name
  • Define on which branch commits and/or pull requests you want the build to start
  • Define the OS to run on
  • Download GraalVM
  • For desktop: Make a staging directory in which the build results will be copied
  • Build the application with Maven, GraalVM, and the Gluon client plugin
  • Desktop: copy the application to the staging directory for desktop and upload staging into the Package which is the result of the build process
  • Apps: upload to Apple TestFlight or Google Play

Depending on the OS some additional steps are settings are required as described further.

Desktop applications

Linux JAR + native application

For Linux, a list of extra libraries is required, which is done with an additional step after the download of GraalVM.

- name: Install libraries
run: sudo apt install libasound2-dev libavcodec-dev libavformat-dev libavutil-dev libgl-dev libgtk-3-dev libpango1.0-dev libxtst-dev

This build process produces both a JAR and a Linux native application. For the first one we run a Maven package:

- name: Build JAR with Maven
run: mvn -B package

Because the build process is running on a Linux machine, we can define the target as desktop to build a native Linux application with the Gluon Maven client plugin and need to provide the GraalVM location:

- name: Gluon Build
run: mvn -Pdesktop client:build client:package
env:
GRAALVM_HOME: ${{ env.JAVA_HOME }}

Windows native application

To build the Windows version of the application, Visual Studio is required, which can be done with two additional steps:

  • microsoft/setup-msbuild: GitHub Action to facilitate configuring MSBuild in the workflow PATH for building .NET Framework applications.
  • egor-tensin/vs-shell: GitHub action to setup the Visual Studio shell environment.
- name: Add msbuild to PATH
uses: microsoft/setup-msbuild@v1.0.2
- name: Visual Studio shell
uses: egor-tensin/vs-shell@v1

The rest of the script is similar to the Linux one and at the end, we only copy the exe-file to the package.

MacOS native application

Xcode is required to build Apple applications. Again we can add this to our steps by using an existing action:

- uses: maxim-lobanov/setup-xcode@v1
with:
xcode-version: '11.7.0'

And the resulting file “target/client/x86_64-darwin/Resistor Calculator” is copied to the package.

Smartphone applications

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

All the required steps to build AND upload to both the stores are included in the GitHub Actions!!!

You will need a developer account for both stores and the required keys. As I don’t have them (yet), a fork has been made by Gluon and these steps only run fully if the needed keys are provided as you can see on the fork in the GluonHQ GitHub repository.

iOS app (MacOS build)

Additional settings are required which you can hide from your script by defining them in the secrets-section of your GitHub project, just like we already did with the Gluon license key.

Image for post
Image for post
Image for post
Image for post
Image for post
Image for post

Again we can use existing GitHub Actions to extend our previous “MacOS native” build file:

By using these with our secret keys, all the required steps can be run inside a single GitHub action. For instance, the final step to upload the application to TestFlight:

- uses: Apple-Actions/upload-testflight-build@master
if: ${{ github.repository_owner == 'gluonhq' }}
with:
app-path: target/client/arm64-ios/Resistor Calculator.ipa
issuer-id: ${{ secrets.APPSTORE_ISSUER_ID }}
api-key-id: ${{ secrets.APPSTORE_KEY_ID }}
api-private-key: ${{ secrets.APPSTORE_PRIVATE_KEY }}

Android app (Linux build)

Actions used in this file (which is based on the previous “Linux native” file):

The additional steps for Google Play include initialization of the Android Keystore:

- name: Setup Android Keystore
if: ${{ github.repository_owner == 'gluonhq' }}
id: android_keystore_file
uses: timheuer/base64-to-file@v1
with:
fileName: 'my.keystore'
encodedString: ${{ secrets.GLUON_ANDROID_KEYSTORE_BASE64 }}

And finally, the upload is done with:

- name: Upoad to Google Play
if: ${{ github.repository_owner == 'gluonhq' }}
uses: r0adkll/upload-google-play@v1
with:
serviceAccountJsonPlainText: ${{ secrets.ANDROID_SERVICE_ACCOUNT_JSON }}
packageName: be.webtechie.resistorcalculatorapp
releaseFiles: target/client/aarch64-android/gvm/Resistor Calculator.apk
track: beta

Conclusion

Gluon is also working on a sample using this work-flow, which is available on github.com/gluonhq/hello-gluon-ci.

Originally published at https://webtechie.be.

Javarevisited

Medium’s largest Java publication, followed by 8500+ programmers. Follow to join our community.

Frank Delporte

Written by

Author of ‘Getting Started with Java on Raspberry Pi’, http://webtechie.be , https://twitter.com/frankdelporte

Javarevisited

A humble place to learn Java and Programming better.

Frank Delporte

Written by

Author of ‘Getting Started with Java on Raspberry Pi’, http://webtechie.be , https://twitter.com/frankdelporte

Javarevisited

A humble place to learn Java and Programming better.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store