Qt and JavaScript: A Perfect Match for Native App Development

By Eric Bader

There are many developer platforms and languages to choose from if you’re planning on building native cross-platform apps. In this article, we’ll take a look at a highly popular one, yet one that you wouldn’t immediately think of for pure native development, and that is JavaScript.

JavaScript , while best known as a dynamic programming language used for extending web browser capabilities and web-based scripting, is also a powerful language for building behavior into native, non browser-based applications, thanks to the The Qt Company’s QML API and Esri’s ArcGIS Runtime SDK for Qt that extends it.

A brief introduction to QML

If you can read and understand JSON syntax and JavaScript, QML is easy to grasp. QML is the language for building Qt Quick applications. It offers a declarative, highly-readable syntax for designing and building responsive and fluid user interfaces for native desktop, embedded, and mobile applications. QML can be compiled for Windows, Linux, Mac OS, iOS, and Android platforms and devices. The Qt platform itself contains a powerful JavaScript engine, enabling the behaviors behind the declared Qt Quick UI controls to be written in pure JavaScript. This is an extremely powerful and attractive feature for developers who are crossing the bridge from Web to native app development.

A little more about QML and JavaScript

QML implements ECMA 5th edition Script Specification Standard – http://doc.qt.io/qt-5/qtqml-javascript-hostenvironment.html. Why is that important? It means:

You can write native JavaScript functions directly in your QML or as separate JavaScript files
You have access to the language standard types and functions, such as Object, Array, Math, and Date.
Syntax for if statements, switch statements, ternary operators, for loops, while loops, and more are no different than using JavaScript in the browser

However, QML runs natively and not in a browser. This means that there isn’t the need for using JavaScript frameworks such as Dojo or jQuery. It is also means that instead of using the ArcGIS API for JavaScript to leverage location in your app, you will instead use the ArcGIS Runtime SDK for Qt and its QML API. This is because Esri’s JavaScript API is designed for building Web applications, and Esri’s QML API is designed for building native applications.

The bottom line is that if you want to build cross platform native apps (and there are many reasons why you would want to do that) and you have JavaScript skills, QML is probably the lowest bar of entry to begin writing cross platform native apps.

A “Quick” example of Qt Quick

Here is a very simple QML program that prints the current date to the console when a user clicks a button.

    Button {
        id: btn
        text: qsTr("What is the date today?")
        onClicked: show()
    }

    function show() {
        var date = new Date().toDateString();
        console.log("Today's date is " + date);
    }

The interesting part of this code snippet is the JavaScript function show(). This gets fired when the button’s Clicked signal handler is called. In the show function, notice that the JavaScript object Date() is created and used to get the value that is displayed.

An ArcGIS Runtime example

ArcGIS Runtime SDK for Qt is built on top of the Qt SDK and inherits the same platform features and benefits. Here is a code snippet that demonstrates the use of JavaScript code to perform an “identify” task when the user clicks on the map. Using the location of the click, some features are selected.

            onMouseClicked: {
                featureLayer.identifyFeatures(mouse.x, mouse.y);
            }

            function identifyFeatures(x,y) {
                var ids = featureLayer.findFeatures(x,y,1,5);
                ids.forEach(function(itemId) {
                   featureLayer.selectFeature(itemId);
                });
            }

The onMouseClicked signal handler will call the featurelayer.identifyFeatures JavaScript function when the map is clicked on or touched, passing along the X and Y of where the click occurred. Using this location, features are selected and highlighted on the map.

Summary

JavaScript developers can easily use their skills to build great cross-platform, native applications that run on devices outside of the browser. The Qt SDK and QML APIs allow access to all of the services and sensors on the device to give app users the pure native application experience.

ArcGIS Runtime SDK for Qt extends the Qt Quick application framework, giving native app developers the ability to build great ArcGIS apps for all platforms and devices using their JavaScript skills.

ArcGIS Blog