Release 3.8.0: Call Native APIs from QML with JavaScript, Build for the Raspberry Pi and Update to Qt 5.15.2

Felgo 3.8.0 adds Native Code Components to access native iOS and Android features from QML using JavaScript. This removes the need for wrappers and boilerplate code when working with native APIs in your Qt Quick app. You also get a ready-made Felgo Build Kit to cross-compile Qt and Felgo apps for the Raspberry Pi.

QML Native Code Components: 100% Native API Access on Android & iOS

Qt is a great cross-platform framework for developing applications on Desktop, Mobile, Embedded and the Web. All the available C++ and Qt Quick components can run on each supported target platform. Still, certain features of the native platforms are only available with platform-specific APIs and frameworks.

The new Native Code Components give you full native access, out of the box! They allow working with all native iOS and Android platform APIs directly from QML and provide a bridge between Qt Quick and the underlying native platform.

feature-graphic-nativecomp

For example: To determine whether the iOS device that runs your app currently operates in a dark or light UI style (dark mode vs light mode), you only need a few lines of code:

import Felgo 3.0
import QtQuick 2.0

App {
  NavigationStack {
    Page {
      title: qsTr("iOS Dark Mode Check")
      AppButton {
        anchors.centerIn: parent
        text: "Check iOS UI Style"
        onClicked: {
          // 1 is light mode, 2 is dark mode
          text = "UI Style: "+getDarkMode()
        }
      }
    }
  }
  
  function getDarkMode() {
    if(Qt.platform.os === "ios") {
      var uiApplicationClass = NativeObjectUtils.getClass("UIApplication")
      var application = uiApplicationClass.getStaticProperty("sharedApplication")
      var uiStyle = application.getProperty("keyWindow").getProperty("rootViewController").getProperty("traitCollection").getProperty("userInterfaceStyle")
      return uiStyle
    }
    else {
      return 0
    }
  }
}

ios-darkmode-1

Access any Native API, Anywhere!

Creating native integrations is usually a complex task that involves different programming languages and implementations for each platform, as well as C++ wrapper types to provide the native features for usage with Qt Quick.

To make this easier, Felgo provides important platform features with the NativeUtils component and also offers Felgo Plugins for direct usage of 3rd party frameworks in QML. But there may be certain use-cases in your application that still require custom integrations of native code, for example to:

Request app permissions at runtime
Manage the system audio volume
Determine device settings like ‘dark mode’
Retrieve the online state and type of connection (mobile data or WiFi)
Control the system UI, like the Android theme, notification bar or full-screen mode
Get the current battery level
Access SMS messages
Integrate 3rd party frameworks that aren’t available as Felgo Plugin
And much more

Use the NativeObject item to call native APIs, that would only be available with Java or Objective-C code otherwise. You no longer need to provide your own wrappers in C++ to translate between QML and native languages.

It is also possible to embed a native view as part of your Qt Quick scene. The NativeView type can render an Android or iOS view within your QML application. You can use it cross-platform by specifying different native bindings for each of the platforms.

After introducing Native App Integration for embedding Qt views in native apps, Native Components now go the other direction and allow you to interact with native APIs and views directly from QML, using JavaScript. Felgo thus offers full flexibility to mix technologies and choose which part of your application uses Qt cross-platform code or platform-specific native code.

NativeCodeComponents-NativeAppIntegration

For example, you can add a native Button, ImageView or WebView to your Felgo app. This screenshot shows a sample app with these three components on Android and iOS:

Native components are a game-changer for applications that integrate tightly with the underlying target platform and bring many benefits for mobile app development with Qt:

Save Time and Code: Integration of native features for iOS and Android is complex and usually involves different languages like QML, C++, Java, and Obj-C. Use native components for seamless access to platform features without adding boilerplate code for wrapping native APIs.
Cross-Platform by Default: You can add distinct native code for each platform. Native components automatically choose the respective implementation and thus allow for cross-platform usage in QML.
Direct Access to New APIs: When new versions of Android and iOS get released, all new features are immediately available. There is no need to wait for Qt or Felgo to "catch up".
Use Existing Native Documentation: No need to learn any new APIs. With the Native Code Components you reuse existing resources for native iOS and Android development.
Migrate Existing Applications: Together with Native App Integration, the QML Native Code Components give full flexibility when mixing Qt with native technologies. Native App Integration embeds Qt views in iOS or Android apps. Native Components can be used to embed iOS or Android views in Qt Quick.

How to Call Native Android or iOS APIs from QML

With the NativeObject type, you can integrate additional native functionality that is not directly supported by Felgo.

The following example shows how to get the current battery level on Android and iOS. The getBatteryLevel() method uses Qt.platform.os to get the current platform. It then calls a platform-dependent method to retrieve the battery level:

import Felgo 3.0
import QtQuick 2.0

App {
 AppButton {
   anchors.centerIn: parent
   text: qsTr("Check Battery")
   onClicked: {
     var batteryPercent = Math.round(getBatteryLevel() * 100)
     text = "Battery: "+ batteryPercent + "%"
   }
 }

 // returns battery level between 0 and 1 on mobile platforms
 function getBatteryLevel() {
   // call platform-dependent implementation:
   if(Qt.platform.os === "android") {
     return getAndroidBatteryLevel()
   }
   else if(Qt.platform.os === "ios") {
     return getIosBatteryLevel()
   }
   else {
     return 0
   }
 }

 function getAndroidBatteryLevel() {
   var Intent = NativeObjectUtils.getClass("android/content/Intent")
   var IntentFilter = NativeObjectUtils.getClass("android/content/IntentFilter")
   var BatteryManager = NativeObjectUtils.getClass("android/os/BatteryManager")

   var context = NativeObjectUtils.getContext()
   var filter = IntentFilter.newInstance(Intent.getStaticProperty("ACTION_BATTERY_CHANGED"))
   var batteryStatus = context.callMethod("registerReceiver", [null, filter])

   var level = batteryStatus.callMethod("getIntExtra", [BatteryManager.getStaticProperty("EXTRA_LEVEL"), -1])
   var scale = batteryStatus.callMethod("getIntExtra", [BatteryManager.getStaticProperty("EXTRA_SCALE"), -1])

   return level / scale
 }

 function getIosBatteryLevel() {
   var UIDevice = NativeObjectUtils.getClass("UIDevice")
   var device = UIDevice.getStaticProperty("currentDevice")
   device.setProperty("batteryMonitoringEnabled", true)
   return device.getProperty("batteryLevel")
 }
}

ios-battery-level

To get access to native classes, use NativeObjectUtils::getClass(). You can then work with the native object by calling available functions like getStaticProperty, setProperty, or getProperty.

To learn more about QML Native Code Components see the component documentation.

How to Add a Native Android or iOS View

First, add the NativeView and specify which view to instantiate on Android and iOS:

On Android, it can display any instance of android.view.View.
On iOS, it can display any instance of UIView.

You can specify which view class to instantiate on each platform. Use the androidBinding and iosBinding properties for this. This example renders a native button within your Felgo App:

import Felgo 3.0
import QtQuick 2.0

App {
 NativeView {
   id: dynamicNativeButton
   width: dp(170)
   height: dp(48)
   anchors.centerIn: parent

   property string text: qsTr("Native Button")

   androidBinding: NativeViewBinding {
     viewClassName: "android.widget.Button"
     onViewCreated: {
       updateText()
     }

     function updateText() {
       view.callMethod("setText", dynamicNativeButton.text, NativeObject.UiThread)
     }
   }

   iosBinding: NativeViewBinding {
     viewClassName: "UIButton"

     readonly property NativeObject _UIColor: NativeObjectUtils.getClass("UIColor")

     onViewCreated: {
       updateText()

       // configure button visuals:
       view.setProperty("backgroundColor", _UIColor.getProperty("grayColor"))
       view.callMethod("setTitleColor:forState:", [_UIColor.getProperty("blackColor"), 0])
       view.callMethod("setTitleColor:forState:", [_UIColor.getProperty("whiteColor"), 1])
     }

     function updateText() {
       view.callMethod("setTitle:forState:", [dynamicNativeButton.text, 0])
     }
   }
 }
}

The view behaves exactly like it does in a native app. However, it is rendered inside the QML scene graph. The native view's size gets set to the specified size of the QML item. This also means you can take advantage of the power of QML and use z-ordering, anchoring, animations, and more.

Note: Displaying native views is only supported on Android and iOS. On desktop platforms, NativeView displays a dummy view that draws nothing.

Raspberry Pi Build Kit: Run Your Qt & Felgo Project on the Pi

With Qt for Device Creation, you can run Felgo applications on a variety of Embedded platforms like i.MX, QNX, Intel NUC or the Raspberry Pi.

Building applications for Embedded devices requires cross-compilation, meaning that you write and compile your code on your local development PC and then deploy applications to the device. The Qt online installer offers ready-made images for some of the platforms, while other targets like Raspberry Pi require you to cross-compile Qt yourself.

The Raspberry Pi is a great board to get started with embedded development, but the cross-compilation and initial setup is not an easy task. For that reason, Felgo now provides pre-built libraries and a runnable version of the Felgo Developer App to simplify application development for the Raspberry Pi 3, which is the most requested board.

By installing the Dev App on your Pi, you can browse components, try app demos, or directly jump into development with Felgo Live. Instead of dealing with complex cross-compilation steps right away, you can thus get started with only three easy steps:

Flash an SD card and install the Raspberry OS
Download the Dev App and copy it to the Raspberry
Run the Felgo Dev App and start coding

To cross-compile your own Qt and Felgo projects for the Pi, install the Embedded (gcc_armhf_rpi3) Kit with the MaintenanceTool on Linux: The Raspberry Pi 3 Build Kit is available for all Felgo Startup or Business customers. See the Felgo for Embedded Guide for more information on how to build your Felgo app for Raspberry Pi or other Embedded targets.

Highlights of Qt 5.15 - What’s New?

Felgo 3.8.0 also updates the used Qt version to 5.15.2 and thus gives access to latest Qt features and improvements.

Migration Notes:

The Android target now bundles all available ABIs in a combined Build Kit. Configure your desired ABIs in the project settings to include them in your build:

The minimum required Android NDK version also increased to NDK r20.
Felgo for iOS now requires Xcode 11.4 or higher.

Qt Quick Improvements and Qt Quick 3D

You can find new Qt Quick features for Controls, Shapes and Pointer Handlers, or improvements like support for color spaces with the Image element.

The biggest addition of Qt 5.15 is the Qt Quick 3D module. Since the Technology Preview of Qt 5.14, the implementation has matured and is an official part of Qt now. The update also adds features for post-processing effects and spotlights, and a new C++ API for custom geometry. Qt Quick 3D is also fully supported in Qt Design Studio 1.5.

There are also smaller additions to Qt WebEngine, Qt 3D, Qt Multimedia, and Qt Network in the new version. Besides Qt Quick 3D, another Technology Preview that is fully supported now is Qt Lottie. The module allows rendering After Effects animations in Qt applications, based on a JSON format you can export.

QML Language Improvements

You can now specify “required” properties for QML components. Each user of the component has to define those properties. Otherwise, the application won’t compile or print a runtime warning (for dynamically created items).

There’s also a new way to define inline components in a QML file. In contrast to the QML Component type, the inline components can be referred from other files as well, and are usable without the overhead of a Loader.

Qt added a new, declarative way of registering QML types from C++. It is no longer required to specify minor versions or revisions anymore. You can specify the module name and version in a central place, and then only mark up items with the QML_ELEMENT macro.

To learn more about Qt 5.15, see the official release post.

More Features and Improvements

Felgo 3.8.0 includes many more improvements, for example:

The Page::contentPaddingAnchorItem now correctly aligns page content on displays with cutouts.
When the display orientation changes on Android phones with cutouts, the Page::safeArea updates as expected.
You can now use NotificationManager::channelId and NotificationManager::channelName to set up a notification channel for Android.
The Firebase Plugin on iOS no longer fires changed signals after a real-time value key is removed.
Updates the Facebook Plugin to reflect the latest Facebook platform changes for user properties and permission requirements.
Improved support for the Native DatePicker on various iOS versions and devices, like iOS 14.

For all relevant changes, features, and fixes of recent Felgo updates, please check out the changelog.

How to Update Felgo

Try out these new features by following these steps:

Open the Felgo SDK Maintenance Tool in your Felgo SDK directory.
Choose “Update components” and finish the update process to get this release as described in the Felgo Update Guide.
Update Felgo

If you haven’t installed Felgo yet, you can do so now with the latest installer from here. Now you can explore all of the new features included in this release!