Felgo Updates

Felgo Update Guide

After installing the Felgo SDK, you can receive updates with the Maintenance Tool. The Maintenance Tool is located at the installation directory of your Felgo SDK and is called MaintenanceTool.

Run this application and select Update components to check if any updates are available for the Felgo SDK.

You then see a list of packages for which an update is available. To update the packages, click Continue and then Update on the following screen. After all packages were downloaded and installed, you can close the Maintenance Tool by clicking the Done button.

Note: After you updated the SDK, you need to Clean your project so the updated Felgo version is used. To clean your project, open Qt Creator and select Clean Project from the Build menu. Afterwards you can run your project and the updated Felgo version is used.

With your Felgo signup, you get access to all Felgo updates for free. Some of the components are available exclusively for Felgo customers - to upgrade to a Felgo license click here.

Latest Felgo Release

v 3.7.0 (2020-10-20)

Highlights Blog Post: Release 3.7.0: Bluetooth LE (Low Energy) with QML

Felgo 3.7.0 adds new QML APIs to use Bluetooth LE from QML in your Qt and Felgo apps. This gives you a convenient way to use Bluetooth LE to connect to IoT, wearables and other custom devices, directly from QML, without any C++ code.

Felgo 3.7.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Felgo 3.7.0 Migration Hints

This update contains important migration hints for Felgo projects created with earlier versions of the Felgo SDK.

For theming the bottom tab navigation, you now need to use Theme.navigationTabBar instead of Theme.tabBar. You can find more information in the detailed list of changes below.
The new Bluetooth LE APIs require any app to provide a new purpose string for iOS in the Project-Info.plist located in the ios folder of your project, also if you do not use Bluetooth. This will not be visible for your users, unless you actually use Bluetooth. Apple scans uploaded apps for their capabilities, and since the new APIs enable any Felgo app to make use of Bluetooth, it is required to add this purpose string, also if not actively used.
```
 <key>NSBluetoothPeripheralUsageDescription</key>
 <string>App would like to access Bluetooth.</string>
 <key>NSBluetoothAlwaysUsageDescription</key>
 <string>App would like to access Bluetooth.</string>
```
By November 2020 new uploaded Android apps and app updates need an increased minimum and target SDK version in the AndroidManifest.xml file of your projects. The new versions are android:minSdkVersion="21" and android:targetSdkVersion="29".

Felgo 3.7.0 Hotfix iOS Live Client Module

If you make use of the Live Client Module in a new project on iOS, as described here, please create a folder FelgoLive in your project, download this Imports.qml file and paste it into this folder. This will ensure that Qt picks up all the Qt module imports that the Live Client Module prepares. The result should look like this:

Highlights

You can now use Bluetooth LE directly from QML in your Qt and Felgo apps without any C++ code.

This allows you to easily communicate with IoT, wearables and other custom devices using Bluetooth. You can find more information and examples in the documentation Use Bluetooth Low Energy and in the release blog post.

Here is an example of how such a Bluetooth implementation could look like:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       title: qsTr("BLE Battery")

       Rectangle {
         anchors.centerIn: parent
         width: parent.width * 0.6
         height: parent.height * 0.8
         radius: dp(30)
         border.color: 'black'
         border.width: dp(5)

         Rectangle {
           anchors.bottom: parent.bottom
           width: parent.width
           height: parent.height * batteryCharacteristic.value / 100
           color: batteryCharacteristic.value > 80 ? 'green' : (batteryCharacteristic.value > 30 ? 'orange' : 'red')
           radius: parent.radius
         }
       }

       AppText {
         anchors.centerIn: parent
         text: batteryCharacteristic.value + '%'
         fontSize: dp(15)
       }
     }
   }

   BluetoothLeManager {
     discoveryRunning: true

     BluetoothLeDevice{
       id: myBleDevice

       BluetoothLeService {
         uuid: 0x180F // Battery Service
         BluetoothLeCharacteristic {
           id: batteryCharacteristic
           uuid: 0x2A19 // Battery Characteristic
           dataFormat: 4 // 0x04 for uint8

           onValueChanged: {
             // Value updates
             console.log('Battery Level Changed', value)
           }

           onValidChanged: {
             // Read initial value once characteristic is valid
             if (valid) {
               read()
             }
           }
         }
       }

       onConnectedChanged: {
          // Reconnect logic
         if (!connected) {
           console.log('Trying to reconnect')
           connect()
         }
       }
     }

     onDeviceDiscovered: {
       // Match device with service UUID
       if (device.services.indexOf('{0000180f-0000-1000-8000-00805f9b34fb}') > -1) {
         myBleDevice.setDevice(device, true)
         discoveryRunning = false
       }
     }
   }
 }

iOS	Android

This update introduces the AppListItem, a new base type for typical list items in your applications. The AppListItem improves both flexibility and performance compared to the SimpleRow.

This extensive example shows how to create various different common list item layouts using the AppListItem component.

 import QtQuick 2.8
 import QtQuick.Controls 2.2 as QC2
 import Felgo 3.0

 App {
   id: app

   NavigationStack {
     Page {
       title: "Custom AppListItem"
       backgroundColor: Theme.colors.secondaryBackgroundColor

       AppFlickable {
         anchors.fill: parent
         contentHeight: column.height

         Column {
           id: column
           width: parent.width

           bottomPadding: 2*dp(Theme.contentPadding)

           SimpleSection {
             title: "Standard Items"
           }

           AppListItem {
             text: "First"
             rightText: "Longer rightText, really long"
           }
           AppListItem {
             text: "Second with longer text"
             rightText: "Hi"
           }
           AppListItem {
             text: "An active item"
             detailText: "This is disabled so it cannot be clicked"
             active: true
             enabled: false
             lastInSection: true
           }

           SimpleSection {
             title: "Images"
           }

           AppListItem {
             text: "Using an image"
             image: "https://via.placeholder.com/300"
           }
           AppListItem {
             text: "Muted with image"
             image: "https://via.placeholder.com/300"
             muted: true
           }

           AppListItem {
             text: "Image with"
             detailText: "some detailText"
             image: "https://via.placeholder.com/300"
             lastInSection: true
           }

           SimpleSection {
             title: "Custom Items"
           }

           AppListItem {
             text: "Oh look, an icon"
             rightText: "Nice!"
             showDisclosure: false

             leftItem: Icon {
               icon: IconType.heart
               anchors.verticalCenter: parent.verticalCenter
               width: dp(26)
             }
           }
           AppListItem {
             text: "Wi-Fi"
             rightText: "Connected"

             leftItem: Rectangle {
               color: Theme.colors.tintColor
               radius: dp(5)
               width: dp(26)
               height: width
               anchors.verticalCenter: parent.verticalCenter

               Icon {
                 icon: IconType.wifi
                 anchors.centerIn: parent
                 color: "white"
               }
             }
           }
           AppListItem {
             text: "General"

             leftItem: Rectangle {
               color: "grey"
               radius: dp(5)
               width: dp(26)
               height: width
               anchors.verticalCenter: parent.verticalCenter

               Icon {
                 icon: IconType.cog
                 anchors.centerIn: parent
                 color: "white"
               }
             }

             rightItem: Rectangle {
               color: "red"
               radius: width/2
               width: dp(22)
               height: width
               anchors.verticalCenter: parent.verticalCenter

               AppText {
                 anchors.centerIn: parent
                 color: "white"
                 text: "1"
               }
             }
           }
           AppListItem {
             text: "Some Wifi Name"
             showDisclosure: false

             leftItem: Icon {
               icon: IconType.check
               color: Theme.colors.tintColor
               width: dp(26)
               anchors.verticalCenter: parent.verticalCenter
             }

             rightItem: Row {
               spacing: dp(5)
               anchors.verticalCenter: parent.verticalCenter

               Icon {
                 icon: IconType.lock
                 width: sp(26)
                 height: width
                 anchors.verticalCenter: parent.verticalCenter
               }
               Icon {
                 icon: IconType.wifi
                 width: sp(26)
                 height: width
                 anchors.verticalCenter: parent.verticalCenter
               }
               IconButton {
                 icon: IconType.info
                 width: sp(26)
                 height: width
                 size: dp(22)
                 anchors.verticalCenter: parent.verticalCenter
               }
             }
           }
           AppListItem {
             id: listItem
             showDisclosure: false
             mouseArea.enabled: false
             topPadding: 0
             bottomPadding: 0

             leftItem: Icon {
               icon: IconType.moono
               width: sp(26)
               height: width
               anchors.verticalCenter: parent.verticalCenter
             }

             textItem: AppSlider {
               height: dp(45)
               width: listItem.textItemAvailableWidth
               value: 0.3
             }

             rightItem: Icon {
               icon: IconType.suno
               width: sp(26)
               height: width
               anchors.verticalCenter: parent.verticalCenter
             }
           }
           AppListItem {
             text: "Custom detailText item"
             image: "https://via.placeholder.com/300"
             textVerticalSpacing: dp(10)
             lastInSection: true

             detailTextItem: Row {
               spacing: dp(10)
               Icon {
                 icon: IconType.heart
               }
               Icon {
                 icon: IconType.paperplane
               }
               Icon {
                 icon: IconType.automobile
               }
             }
           }

           SimpleSection {
             title: "Switches"
           }

           AppListItem {
             text: "This is a switch"
             showDisclosure: false
             mouseArea.enabled: false

             rightItem: AppSwitch {
               anchors.verticalCenter: parent.verticalCenter
               checked: true
             }
           }
           AppListItem {
             text: "Whole item toggles switch"
             detailText: "Switch checked: " + innerSwitch.checked
             showDisclosure: false

             rightItem: AppSwitch {
               id: innerSwitch
               anchors.verticalCenter: parent.verticalCenter
               enabled: false
             }

             onSelected: {
               innerSwitch.toggle()
             }
           }
           AppListItem {
             text: "A muted item"
             muted: true
             showDisclosure: false
             lastInSection: true

             rightItem: AppSwitch {
               anchors.verticalCenter: parent.verticalCenter
             }
           }

           SimpleSection {
             title: "Radio Button Selected: " + ratioButtonGroup.checkedButton.value
           }

           QC2.ButtonGroup {
             id: ratioButtonGroup
             buttons: [radio1, radio2, radio3]
           }

           AppListItem {
             text: "First Option"
             showDisclosure: false

             leftItem: AppRadio {
               id: radio1
               checked: true
               value: "Option 1"
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               if(!radio1.checked) radio1.toggle()
             }
           }

           AppListItem {
             text: "Second Option"
             showDisclosure: false

             leftItem: AppRadio {
               id: radio2
               value: "Option 2"
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               if(!radio2.checked) radio2.toggle()
             }
           }

           AppListItem {
             text: "Third Option"
             showDisclosure: false
             lastInSection: true

             leftItem: AppRadio {
               id: radio3
               value: "Option 3"
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               if(!radio3.checked) radio3.toggle()
             }
           }

           SimpleSection {
             title: "Checkboxes"
           }

           AppListItem {
             text: "First Option"
             showDisclosure: false

             rightItem: AppCheckBox {
               id: checkBox1
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               checkBox1.checked = !checkBox1.checked
             }
           }

           AppListItem {
             text: "Second Option"
             showDisclosure: false

             rightItem: AppCheckBox {
               id: checkBox2
               checked: true
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               checkBox2.checked = !checkBox2.checked
             }
           }

           AppListItem {
             text: "Third Option"
             showDisclosure: false
             lastInSection: true

             rightItem: AppCheckBox {
               id: checkBox3
               anchors.verticalCenter: parent.verticalCenter
             }

             onSelected: {
               checkBox3.checked = !checkBox3.checked
             }
           }
         }
       }
     }
   }
 }

You can now add a "Sign in with Apple" button to your app using the Apple Sign In Plugin, to comply with Apple's guideline to provide an Apple signup option along with other social signup options.

This plugin offers you 2 new components AppleSignIn and AppleSignInButton to handle signing in with an Apple ID. Here is an example usage:

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "Apple Sign In"

       Column {
         anchors.centerIn: parent
         spacing: dp(15)

         AppleSignInButton {
           id: appleSignInButton
           anchors.horizontalCenter: parent.horizontalCenter
         }

         AppText {
           anchors.horizontalCenter: parent.horizontalCenter
           text: !appleSignInButton.enabled
                 ? "Apple Sign-in unavailable."
                 : appleSignInButton.appleSignIn.isLoggedIn
                 ? "Signed in: " + appleSignInButton.appleSignIn.userName
                 : "Click above to sign in with Apple user"
         }
       }
     }
   }
 }

Felgo Cloud Builds now supports building for desktop platforms (Windows, macOS, Linux). As result of the builds, you get zip files containing ready to use executables. Additionally you can upload signing data to sign Mac and Windows executables.

New Features

On iOS and Android, you can now make use of the native Keychain/KeyStore to store, read and delete data securely and persistent. Writing and reading of such values is straightforward using the Felgo NativeUtils:

 import Felgo 3.0
 import QtQuick 2.0

 App {

   AppButton {
     text: "Store in Keychain"
     onClicked: nativeUtils.setKeychainValue("identifier", "value")
   }

   AppButton {
     text: "Read Keychain"
     onClicked: nativeUtils.getKeychainValue("identifier")
   }

   AppButton {
     text: "Delete from Keychain"
     onClicked: nativeUtils.clearKeychainValue("identifier")
   }
 }

NativeUtils::share() now lets you share images and other files with other apps. Calling this function with a file url, e.g. an image, will open the share dialog with the appropriate options for the file type:

The Android theme now offers a proper default style for bottom tab navigation. By default, Android will still use a navigation drawer, so if you want to use the bottom tabs navigation, you need to set the Navigation::navigationMode property accordingly.

Here is an example:

 import QtQuick 2.3
 import Felgo 3.0

 App {
   Navigation {
     // Use tabs on Android, else default (which is tabs on iOS and drawer on desktop)
     navigationMode: Theme.isAndroid ? navigationModeTabs : navigationModeDefault
     // On Android, only the selected label is shown by default. You can change that by accessing the internal tabs or using the theming
     //tabs.showOnlySelectedLabel: false // can also be changed with Theme.navigationTabBar.showOnlySelectedLabel

     NavigationItem {
       title: "First"
       icon: IconType.heart

       NavigationStack {
         Page {
           title: "First Page"
         }
       }
     }

     NavigationItem {
       title: "Second"
       icon: IconType.book

       NavigationStack {
         Page {
           title: "Second Page"
         }
       }
     }

     NavigationItem {
       title: "Third"
       icon: IconType.bolt

       NavigationStack {
         Page {
           title: "Third Page"
         }
       }
     }
   }
 }

The new bottom tab navigation replaces the top tab navigation if used with the Navigation component. You can still create the top tabs (also known as "segments") using the AppTabBar component.

You can change the theming values of the bottom tab navigation on all platforms using the new Theme.navigationTabBar. Note that this was previously done using Theme.tabBar, you can find details about this theming change in the list of improvements below.

You can now use the new AppRadio control for radio selections in your apps. This control is based on the Qt Quick Controls 2 RadioButton, and adds proper default styling for use across various platforms. It allows you to follow native platform guidelines more easily, to provide your users with a familiar experience.

Here is an example of how to use the new control, and how it can be combined with the new AppListItem for a native UI/UX:

 import QtQuick 2.8
 import QtQuick.Controls 2.3 as QC2
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppRadio"
       backgroundColor: Theme.secondaryBackgroundColor

       Column {
         width: parent.width

         SimpleSection {
           title: "As list items: " + ratioButtonGroup1.checkedButton.value + " selected"
         }

         QC2.ButtonGroup {
           id: ratioButtonGroup1
           buttons: [radio1, radio2, radio3]
         }

         AppListItem {
           text: "First Option"
           showDisclosure: false

           leftItem: AppRadio {
             id: radio1
             checked: true
             value: "Option 1"
             anchors.verticalCenter: parent.verticalCenter
           }

           onSelected: {
             if(!radio1.checked) radio1.toggle()
           }
         }

         AppListItem {
           text: "Second Option"
           showDisclosure: false

           leftItem: AppRadio {
             id: radio2
             value: "Option 2"
             anchors.verticalCenter: parent.verticalCenter
           }

           onSelected: {
             if(!radio2.checked) radio2.toggle()
           }
         }

         AppListItem {
           text: "Third Option"
           showDisclosure: false
           lastInSection: true

           leftItem: AppRadio {
             id: radio3
             value: "Option 3"
             anchors.verticalCenter: parent.verticalCenter
           }

           onSelected: {
             if(!radio3.checked) radio3.toggle()
           }
         }

         SimpleSection {
           title: "Inline: " + ratioButtonGroup2.checkedButton.value + " selected"
         }

         QC2.ButtonGroup {
           id: ratioButtonGroup2
           buttons: [radio4, radio5]
         }

         Rectangle {
           width: parent.width
           height: contentCol.height

           Column {
             id: contentCol
             width: parent.width
             padding: dp(Theme.contentPadding)

             AppRadio {
               id: radio4
               value: "Option 1"
               text: "First Option"
               checked: true
             }

             AppRadio {
               id: radio5
               value: "Option 2"
               text: "Second Option"
             }
           }
         }
       }
     }
   }
 }

The AppButton now allows setting icons left and right of the text. Also some other customizations now got easier to apply.

 import QtQuick 2.8
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppButton"

       Column {
         width: parent.width

         AppButton {
           text: "Icon"
           flat: false
           icon: IconType.heart
         }

         AppButton {
           text: "Left Icon"
           flat: false
           iconLeft: IconType.heart
         }

         AppButton {
           text: "Right Icon"
           flat: false
           iconRight: IconType.heart
         }

         AppButton {
           id: customButton
           text: "Custom left item"
           flat: false
           leftItem: Rectangle {
             width: dp(15)
             height: width
             rotation: 45
             color: "green"
             // Handling the pressed state on iOS in the custom item
             opacity: Theme.isIos && customButton.pressed ? 0.5 : 1
           }
         }

         AppButton {
           text: "Full width"
           flat: false
           width: parent.width
           iconRight: IconType.heart
         }

         AppButton {
           text: "Circle"
           flat: false
           icon: IconType.heart
           height: width
           radius: width/2
         }
       }
     }
   }
 }

Improvements

This update fixes a semantic inconsistency in the theming. Both the main bottom tab navigation (using Navigation) as well as the general tabs (using AppTabBar) shared the same theme, accessible with Theme.tabBar. This resulted in potential issues when using both controls at the same time, but trying to apply different theming. With the introduction of a new style for a bottom tab navigation on Android (see detailed change above), we also split up the themes properly. You can now use Theme.navigationTabBar to style your bottom tab navigation and Theme.tabBar to style general tabs.
For migrating existing projects that already apply theming to the bottom navigation using Theme.tabBar, simply replacing it with Theme.navigationTabBar should be sufficient.
```
 import Felgo 3.0

 App {
   onInitTheme: {
     // Replace tabBar with navigationTabBar to style the bottom tab navigation
     //Theme.tabBar.titleColor = "red"
     Theme.navigationTabBar.titleColor = "red"
   }
 }
```
NativeUtils::safeAreaInsets is now better supported on Android. You can also use the new property Theme::safeAreaTop. It handles proper layouting in combination with Theme::statusBarStyle.

The PullToRefreshHandler can now also be used with AppFlickable or FlickablePage items.

 import QtQuick 2.8
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "Pull to refresh"

       rightBarItem: ActivityIndicatorBarItem {
         visible: refreshSimulator.running
       }

       Timer {
         id: refreshSimulator
         interval: 1500
       }

       AppFlickable {
         id: flickable
         anchors.fill: parent
         contentWidth: width
         contentHeight: column.height

         Column {
           id: column
           width: parent.width

           Repeater {
             model: 30
             AppListItem {
               text: "Item " + index
             }
           }
         }

         PullToRefreshHandler {
           listView: flickable
           onRefresh: {
             refreshSimulator.restart()
           }
         }
       }
     }
   }
 }

You can now change the AppTextField underline color on Android easier using the AppTextField::underlineColor property.
You can now customize the look and feel of a single NavigationBar component, independently of the global theme, with all visual properties also added to the component API. You can access the NavigationBar of a NavigationStack with the NavigationStack::navigationBar property.
Several improvements to the Felgo Live Server and QML Hot Reload in general are applied with this update.

This includes:
- More efficient transfer of source-code changes
- Improved handling of log output in the Live Server to prevent UI stalling
- Avoid of UI freeze while transferring big projects to the Live Client
- Improved handling of z-index with QML Hot Reload
- Prevent potential crashes when using WebStorage with QML Hot Reload
- Visual improvements to Live Server controls

Fixes

Fixes a potential crash during app shutdown when using multi-threading.
Fixes auto-completion information for the AppCheckBox component in Qt Creator.
Fixes a compile-time issue when using Xcode 12 (or newer) to build apps for iOS.

Older Felgo Releases

v 3.6.0 (2020-06-17)

Highlights Blog Post: Release 3.6.0: Modal Dialog and iOS Storyboard Support for Qt & Felgo

Felgo 3.6.0 adds the new AppModal component to display modal dialogs in your apps. You can use this component for both full-screen and custom-height modal dialogs. On iOS, you can now use Storyboard files to create your app launch screen. This update also adds new components and several improvements and fixes.

Felgo 3.6.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Felgo 3.6.0 Migration Hints

This update contains important migration hints for Felgo projects created with earlier versions of the Felgo SDK.

The iOS framework files of Firebase, AdMob and Chartbosst got updated. Please use the latest libraries as listed in the integration guide of each of those plugins. Links to the individual guides can be found lower down in this changelog, at the individual change entries.
iOS apps require to add the launch screen on iOS as Storyboard file beginning with July 2020. The migration steps for existing projects are listed lower down in this changelog.

Highlights

The AppModal can be used to display a modal sheet on top of your app. The AppModal can be used as a container for any custom content.

iOS	Android

New Features

Felgo projects now support using a Storyboard file as launch screen on iOS. Starting July 2020, this is required for any apps published to the Apple App Store.
Newly created projects already contain an empty launch screen file. You can change the launch screen using Xcode:
- Build your project for iOS.
- Open the <build-folder>/<project>.xcodeproj in Xcode.
- Open the Launch Screen.storyboard under Bundle Data.
You can add any default UI elements to the launch screen Storyboard.

You can also migrate existing Felgo projects to use the new launch screen Storyboard:
- Create a new empty Felgo app or game project with Qt Creator.
- From the created empty project: Copy the file ios/Launch Screen.storyboard to your existing project's <project>/ios directory.
- Delete the directory <project>/ios/Assets.xcassets/LaunchImage.launchimage.
- Add the following lines to your <project>/ios/Project-Info.plist, inside the <dict> tag:
```
 <key>UILaunchStoryboardName</key>
 <string>Launch Screen</string>
```
- You can now add your launch screen UI (splash screen images, ...) with Xcode as described above.
The new VersionCheckLoader and VersionCheckDialog items provide a convenient way to notify users about updates for your app.

Improvements

The Felgo Live Server now includes a hint for the Live Client Module, that you need to use if your project contains any custom C++ code. With the Live Client module, you can use QML Hot Reload together with your custom C++ code.
The Firebase Plugin now uses Firebase SDK version 6.26.0 for all Firebase features on iOS.
Note: For existing apps, make sure to add and update all the required frameworks listed in Integration Guide.
The AdMob Plugin now uses the latest GoogleMobileAds SDK version 7.60.0 on iOS.
Note: This new version requires new integration steps.
- Copy the new frameworks GoogleMobileAds, GoogleAppMeasurement, GoogleUtilities, nanopb and FBLPromises from PluginDemo/ios to your project/ios directory.
- Add your AdMob app ID to your ios/Project-Info.plist:
```
 <key>GADApplicationIdentifier</key>
 <string>ca-app-pub-(your-app-id)</string>
```
For more information, see the Integration Guide.
The Chartboost Plugin now uses Chartboost SDK version 8.1.0 on iOS and version 8.0.3 on Android. With those versions, Chartboost no longer supports Chartboost::showMoreApps() and related methods.
Note: For existing apps, make sure to add and update all the required frameworks listed in Integration Guide.

This update also requires additional migration steps for this plugin:

Add the following repository to the allprojects -> repositories node:
```
 maven { url "https://chartboostmobile.bintray.com/Chartboost" }
```
Add the following code as child of the android node, before the defaultConfig node:
```
 compileOptions {
   sourceCompatibility 1.8
   targetCompatibility 1.8
 }
```
The clear button shown with AppTextField::showClearButton now is more reliable and also resets predictive text input when clicked.
The Felgo Live Server now properly reports files changed outside of Qt Creator on Windows.
QML Hot Reload with Felgo Live now properly handles changes in QML Grouped Properties.
Fixes a potential crash with the AdMob Plugin when using an AdMobBanner inside a NavigationStack.

Fixes

Fixes a potential crash with the Amplitude Plugin if no API key is specified.
Fixes a crash when using QML Hot Reload with Felgo Live and removing a property binding from a pure C++ QML type.
Improves appearance of FelgoMultiplayer's matchmaking view on mobile devices.
Fixes a publishing problem with iOS apps using the Firebase Plugin.
Fixes a publishing problem with iOS apps using the AdMob Plugin.
Fixes a publishing problem with iOS apps using the Chartboost Plugin.

v 3.5.0 (2020-04-22)

Highlights Blog Post: Release 3.5.0: Run your Qt and Felgo Apps in the Browser with WebAssembly (WASM)

Felgo 3.5.0 adds support for WebAssembly (WASM) as a new export platform. This allows you to use Felgo and Qt to build applications that also run in the browser, served over the web. With this update you get access to a new target platform, with the same source code and skills you already used to develop mobile, desktop and embedded apps with Felgo and Qt.

Felgo 3.5.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Highlights

This update adds support for WebAssembly (WASM), to target the web as additional platform. Deployment information can be found in the documentation at Deploying Felgo Games & Apps to the Web
With Felgo for WebAssembly, you get an improved version of the Qt WASM port, with several fixes and additional features. You can find a detailed list of the improvements, and much more information about WASM, in the release blog post. You can also use Felgo for WebAssembly with plain Qt applications, that do not include any Felgo components, to benefit from the improvements.

New Features

Updates to Qt Creator 4.11.2 with many improvements and better stability, for a better development experience.

The new FpsMeter component allows you to spot drops in framerate of your app or game and thus identify parts of the UI with bad performance across all platforms or test devices.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   id: app

   Page {
     // ... UI items go here ...
   }

   // Simply place the FpsMeter on top of other UI elements, no additional
   // configuration is required as all properties are set to sensible defaults.
   FpsMeter {
   }

 }

The new method NativeUtils::deviceManufacturer() provides information about the mobile device manufacturer.

Improvements

The Amplitude Plugin can now be used on Desktop and embedded, in addition to Android and iOS.
Note that the Amplitude plugin will now also send events during development on desktop by default. If that is not desired, make sure to remove the apiKey during development, or e.g. check if system.publishBuild is set.
QML Hot Reloading now supports the QML "on"-Syntax. You can add Property Value Sources like PropertyAnimation on x and Property Value Interceptors like Behavior on x at runtime using Hot Reloading.
App::storeWindowGeometry and GameWindow::storeWindowGeometry will now also work for publish builds if set to true. This allows restoring the last window size and position of the app on app start. This property should only be used on desktop.

Fixes

Fixes a potential crash on Android with the Soomla Plugin.

v 3.4.0 (2020-03-18)

Highlights Blog Post: Release 3.4.0: QML Hot Reload with Felgo Live

Felgo 3.4.0 adds hot reloading for QML. This is a major improvement of live reloading, further speeding up development speed with Felgo and Qt.

Felgo 3.4.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Highlights

QML Hot Reload with Felgo Live. Find all the important info about hot reloading your QML code with Felgo and Qt applications here: QML Hot Reload with Felgo Live

Hot Reload with Felgo Live allows you to change your QML & JavaScript source code and view the result in realtime. It applies QML, JavaScript and asset changes instantly on every connected device, immediately after saving. This reduces the long waiting times for build and deployment steps to only a couple of seconds.

Hot Reload applies changes in your source code without losing the state of your application. If you are currently working on a sub page, you will not have to navigate back to it after every change, you will stay exactly where you are in your app.

Learn more in the official docs here.

New Features

OneSignal::notificationReceived() now provides information about the push notification's action buttons.
You can now allow your users to log in using their Google Account with FirebaseAuth::loginUserWithGoogle().

Improvements

NativeUtils::contacts now contains more information about contacts. The new information includes postal addresses, email addresses, company name and phone number types.
The Facebook Plugin now supports the native SDK v5.13.0 on iOS.
Examples now use the latest project format of Felgo, which allows you to provide more configuration values, like the license key, from your *.pro file.

Fixes

NativeUtils::displayImagePicker() no longer leaves behind a temporary file on iOS.
Fixes the Deprecated API Usage warning for UIWebView when uploading an app to the Apple Store.
Fixes an Android SSL version issue while building, which previously required you to apply a hotfix.
Fixes a crash with the OneSignal requestTags method.
Fixes an issue with Android 10 API blacklisting.

v 3.3.0 (2019-12-04)

Highlights Blog Post: Release 3.3.0: Update to Qt 5.13.2 and Qt Creator 4.10.2, Jira Tima App Demo

Felgo 3.3.0 adds support for Qt 5.13.2 and Qt Creator 4.10.2, which brings many features and improvements. This update also adds many new APIs, improvements and fixes to the Felgo components.

Felgo 3.3.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Felgo 3.3.0 Migration Hints

The new Qt version 5.13.2 requires an increase of the minimum and target SDK versions in the AndroidManifest.xml file of your projects. The new versions are android:minSdkVersion="21" and android:targetSdkVersion="28".

Android Hotfix

If you plan to target devices running Android 5, please download this file and overwrite the existing file in <Path to Felgo installation>\Felgo\android_armv7\mkspecs\features\, as well as <Path to Felgo installation>\Felgo\android_arm64_v8a\mkspecs\features\. Also rename the following files in both <Path to Felgo installation>\Felgo\android_armv7\lib\ and <Path to Felgo installation>\Felgo\android_arm64_v8a\lib\:

libcrypto.so --> libcrypto_1_1.so
libssl.so --> libssl_1_1.so

If you use the OneSignal plugin requestTags method, please replace your maven import URL in the build.gradle file, located in the android folder of your project directory, so it looks like this:

 maven { url 'https://sdk.v-play.net/maven-internal/' }

Facebook iOS Hotfix

With Felgo 3.3.0, you need an additional line in your *.pro file, to use the Facebook plugin with iOS. The integration will look like this:

 FELGO_PLUGINS += facebook

 ios {
   LIBS += -framework Accelerate
 }

You can find more information in the plugin integration guide.

Highlights

New Social Network App
This demo shows best practices for UI design with a shared code-base across Android, iOS and desktop. It works with dummy data based on the Jira time tracking software. It uses several of the latest APIs released with Felgo 3.3.0.

It is based on the official Jira Tima mobile app developed by Felgo.

iOS	Android	Desktop

The desktop theme now features hover effects and uses the mouse pointer cursor for all input elements as well as the RippleMouseArea. You also have new styling options for the main navigation on desktop, which are listed in the "New Features" section of this release.

The Dialog and InputDialog components now have a new material style on Android. They can also be further customized with the new ThemeDialog properties.

 import QtQuick 2.0
 import Felgo 3.0

 App {

   onInitTheme: {
     // You can add custom styles for dialogs now
     //Theme.dialog.backgroundColor = "yellow"
     dialog.open()
   }

   NavigationStack {
     Page {
       title: "Dialog"
     }
   }

   Dialog {
     id: dialog
     title: "Do you think this is awesome?"
     autoSize: true
     positiveActionLabel: "Yes"
     negativeActionLabel: "No"
     onCanceled: title = "Think again!"
     onAccepted: close()

     // You can use Theme.dialog.defaultContentPadding to align your
     // custom content with the rest of the dialog UI.
     AppText {
       padding: dp(Theme.dialog.defaultContentPadding)
       wrapMode: Text.WordWrap
       width: parent.width
       text: "This is a very long sentence to get some line breaks in this content!"
       // Colors and alignment are platform depending for the best appearance
       color: Theme.isIos ? Theme.colors.textColor : Theme.colors.secondaryTextColor
       horizontalAlignment: Theme.isIos ? Text.AlignHCenter : Text.AlignLeft
     }
   }
 }

You can now also access the title item with Dialog::titleItem alias as well as manually set Dialog::titleDividerVisible.

AppTextField is now based on Qt Quick Controls 2 and offers several new APIs.
With the new AppTextField::inputMode property, you can use a set of predefined input modes for different types of text fields:
- inputModeDefault: Default text input without any special features.
- inputModeUsername: Displays a clear button by default if the field is not empty and has focus, which can be changed with AppTextField::showClearButton.
- inputModeEmail: Only accepts characters allowed in Emails using the TextField::validator property. Displays a clear button by default if the field is not empty and has focus, which can be changed with AppTextField::showClearButton.
- inputModeUrl: Only accepts characters allowed in URLs using the TextField::validator property. Displays a clear button by default if the field is not empty and has focus, which can be changed with AppTextField::showClearButton.
- inputModePassword: Hides the input using disc characters instead using the TextField::echoMode property. Shows a button to display the password by default, which can be changed using AppTextField::showPasswordVisibleButton. The password can also be displayed using the AppTextField::passwordVisible property.
```
 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppTextField::inputMode"

       AppTextField {
         width: parent.width
         inputMode: inputModeEmail
       }
     }
   }
 }
```
You can find details on other new properties like AppTextField::passwordVisible and AppTextField::showPasswordVisibleButton in the associated documentation.

Note: This also applies to SearchBar which uses an AppTextField internally.

The AppTextField::clickEnabled property is used for text fields without manual input. When the user selects this text field, the AppTextField::clicked signal is fired instead of setting focus to the text field. This makes sense e.g. for date input fields, where you can show a date picker when the field is selected.

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AppTextField::clickEnabled"

       AppTextField {
         id: textField
         width: parent.width
         placeholderText: "Select date"
         clickEnabled: true
         onClicked: {
           nativeUtils.displayDatePicker()
         }

         Connections {
           target: nativeUtils
           onDatePickerFinished: {
             if(accepted) textField.text = date
           }
         }
       }
     }
   }
 }

New component TextFieldRow to construct basic input forms on pages. It displays a label based on AppText together with a text field based on AppTextField.

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "TextFieldRow"

       Column {
         id: column
         width: parent.width

         TextFieldRow {
           width: parent.width
           label: "Text"
           placeHolder: "Add some text"
         }

         TextFieldRow {
           id: dateRow
           width: parent.width
           label: "Date"
           placeHolder: "Select date"
           clickEnabled: true
           onClicked: {
             nativeUtils.displayDatePicker()
           }

           Connections {
             target: nativeUtils
             onDatePickerFinished: {
               if(accepted) dateRow.value = date
             }
           }
         }
       }
     }
   }
 }

The new Theme::contentPadding property helps you streamline your layouts easier and match your content paddings with the overall app layout.
Note: This property must be used with dp().

New Features

Page and ListPage components will now remove focus of any input element if the background is clicked.

The Page offers a new Page::contentPaddingAnchorItem item that can be used to add default padding to your page content.

The item uses the following paddings:

 anchors.leftMargin: nativeUtils.safeAreaInsets.left + dp(Theme.contentPadding)
 anchors.rightMargin: nativeUtils.safeAreaInsets.right + dp(Theme.contentPadding)
 anchors.topMargin: nativeUtils.safeAreaInsets.top + dp(Theme.contentPadding)
 anchors.bottomMargin: nativeUtils.safeAreaInsets.bottom

You can anchor to it or just use its properties like margins or width for your layouts.

 import QtQuick 2.0
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       id: page
       title: "Page::contentPaddingAnchorItem"

       Column {
         id: column
         spacing: dp(Theme.contentPadding)
         anchors.fill: parent.contentPaddingAnchorItem

         AppText {
           width: parent.width
           text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
         }

         // Toggle the padding with this button
         AppButton {
           text: "Toggle padding"
           horizontalMargin: 0
           property bool toggle: true
           onClicked: {
             column.anchors.fill = toggle ? column.parent : column.parent.contentPaddingAnchorItem
             toggle = !toggle
           }
         }
       }
     }
   }
 }

You can now change the app or game's soft input behavior on Android with the new property NativeUtils::softInputMode.

New property Navigation::drawerInline to display the navigation drawer inline with the content and not as overlay. With Navigation::drawerFixed you can also disable collapsing and expanding of the drawer, resulting in a fixed navigation sidebar. This is ideal for big tablets or desktops.

Additionally you can display the drawer in a minified sidebar version containing only icons, with Navigation::drawerMinifyEnabled.

 import QtQuick 2.0
 import Felgo 3.0

 App {
   Navigation {
     id: navigation

     NavigationItem {
       title: "Item1"
       icon: IconType.heart

       NavigationStack {
         Page {
           title: "Page1"

           Column {
             anchors.centerIn: parent
             spacing: dp(15)

             Row {
               AppText {
                 text: "drawerInline "
               }

               AppSwitch {
                 checked: navigation.drawerInline
                 updateChecked: false
                 onToggled: navigation.drawerInline = !navigation.drawerInline
               }
             }

             Row {
               AppText {
                 text: "drawerFixed "
               }

               AppSwitch {
                 checked: navigation.drawerFixed
                 updateChecked: false
                 onToggled: navigation.drawerFixed = !navigation.drawerFixed
               }
             }

             Row {
               AppText {
                 text: "drawerMinifyEnabled "
               }

               AppSwitch {
                 checked: navigation.drawerMinifyEnabled
                 updateChecked: false
                 onToggled: navigation.drawerMinifyEnabled = !navigation.drawerMinifyEnabled
               }
             }
           }
         }
       }
     }
     NavigationItem {
       title: "Item2"
       icon: IconType.star

       NavigationStack {
         Page {
           title: "Page2"
         }
       }
     }
   }
 }

An AppDrawer can now be minified using AppDrawer::minifyEnabled. This will cause the drawer to appear as small sidebar with only icons displayed, while the labels are hidden.
You can add your logo to the navigation drawer now, with the Navigation::drawerLogoSource, Navigation::drawerLogoBackgroundColor and Navigation::drawerLogoHeight properties.
The RippleMouseArea now offers and hover effect on desktop, and uses the mouse pointer cursor on hover, with the new properties RippleMouseArea::hoverEffectEnabled and RippleMouseArea::hoverEffectRadius. This is enabled by default on desktop.
The AppListView now allows you to easily display a SearchBar in the header, with the AppListView::showSearch property. Any search will trigger the AppListView::search signal.
Same as with the AppListView, you can also display the SearchBar within a ListPage now. Additionally the ListPage will fire the signal ListPage::clickedBackground now when the background is clicked. It will also remove focus from any input element if the background is clicked.
Show or hide a divider for the SearchBar with SearchBar::showDivider.
Add new property SwipeOptionsContainer::overshoot and new methods SwipeOptionsContainer::showRightOption() and SwipeOptionsContainer::showLeftOption() to SwipeOptionsContainer.
New convenience properties SimpleRow::badgeColor and SimpleRow::showDisclosure to customize a SimpleRow easier.
The new option Theme.colors.statusBarStyleSystem allows you to display a default system themed status bar on Android. With this the system does not show the app in fullscreen mode. This can be useful for some native features. You can use this style like the following:
```
 App {
   onInitTheme: Theme.colors.statusBarStyle = Theme.colors.statusBarStyleSystem
 }
```

Improvements

The signal Store::storePurchased() now contains additional information about the payment transaction on iOS.
The Facebook Plugin now uses the newest Facebook SDK v5.3.0 on iOS and Facebook SDK v5.5.0 on Android.
Added property OneSignal::shareLocationEnabled to the OneSignal Plugin.
The images returned from NativeUtils::displayImagePicker() and NativeUtils::displayCameraPicker() are now stored in a persistent location. Thus mobile operating systems do not delete them automatically.
Note: For this to work on Android, add the following line to android/res/xml/file_paths.xml:
```
 <files-path name="files" path="."/>
```
The Wikitude Plugin requires an update to your build.gradle file if you use Cloud Builds to distribute a 64-bit Android app. For that, have a look at the Android Integration Steps on how to set the new abiFilters definition.

Fixes

Fixes an issue of TexturePackerSpriteSequence that resulted in an endless loop of the first TexturePackerSprite within the sequence.
Fixes a potential crash when deleting a physics Body with an attached MouseJoint.
Fixes for FelgoMultiplayer logic involving triggerPreviousTurn() method and playerCount property.

v 3.2.0 (2019-05-14)

Highlights Blog Post: Release 3.2.0: Update to Qt 5.12.3 with ECMAScript 7, Image Picker and Qt Creator 4.8.2

Felgo 3.2.0 adds support for Qt 5.12.3 and Qt Creator 4.8.2, which brings many features and improvements. The new long term supported Qt release includes lots of fixes, new modules and adds JavaScript support for ECMAScript 7. The updated Felgo IDE Qt Creator version 4.8.2 is more stable and adds compatibility with the latest toolchains and platforms.

Felgo 3.2.0 comes as a free update for all Felgo developers.

Update Now (New to Felgo? Get started here)

Migration Hints

This update contains important migration hints for Felgo projects created with earlier versions of the Felgo SDK.

Changed Android minimum NDK version The Android Build Kit now uses the Clang compiler instead of GCC, which got removed with NDK r18b. Thus, older NDK versions are no longer supported and we recommend to upgrade to NDK r19c. You can download it here.
Please see the Android deployment guide if you are not sure how to install and use the new NDK.

We also recommend to delete the old shadow build folders and perform a clean/qmake of your project, to avoid Android build caching issues. You can find the shadow build folder path in the Projects tab of Qt Creator.
If you get build issues on Android, similar to No toolchains found in the NDK toolchains folder for ABI with prefix: mips64el, please update your gradle version to com.android.tools.build:gradle:3.2.1. You can find this version if you open android/build.gradle in your project folder. You can find more info in the Gradle Build System guide.
Additional iOS libs for In-App Purchase plugin With this update, you need to add additional files for iOS, if you use the in-app purchase plugin. Please check out the integration guide to see where you can find those files.
- libSoomlaiOSStore.a
- libKeeva.a
- libcrypto.a
- libssl.a
- AppleIncRootCertificate.cer

Highlights

Update to Qt 5.12.3 - Long Term Supported Release
Qt 5.12.3 is the third patch version for Qt 5.12 LTS, which is a long-term-supported release. It incorporates more than 2000 bugs fixes since the previous Qt LTS version, Qt 5.9.7. On top of Qt 5.12.3, the new LTS version will receive many patch releases throughout the coming years. The latest Qt 3D Studio version is based on Qt 5.12 LTS as well.
QML Engine Improvements and JavaScript Support for ECMAScript 7
QML performance and memory consumption improved a lot over the previous Qt versions. Memory usage with Qt 5.12 is 30% lower than with Qt 5.9, the previous LTS version. Qt focuses a lot on improving the QML engine performance, you can read more about Qt 5.12 performance improvements here.

With the new release, you can also take advantage of major improvements to the JavaScript engine that supports QML. Previously compatible with ECMAScript 5, it now fully supports ECMAScript 7. This allows the usage of modern JavaScript and simplifies the integration of Javascript libraries. ECMAScript modules are now also supported and can be loaded both from C++ as well as QML/JS.
Qt Creator 4.8.2: Improved Android Compatibility and Better iOS Device Support
Along with the Qt 5.12.3 update, Felgo 3.2.0 also presents you with Qt Creator 4.8.2. The new IDE version is more stable and adds support for the latest build tools and platforms.

On iOS, the IDE now better detects later iPhone models like the iPhone XS. The update also includes many improvements and fixes for macOS Mojave.

For Android, you can now connect and use the debugger on API level 24 and later. The new Qt Creator is also fully compatible with Android SDK 28.

Note: The Android Build Kit now uses the Clang compiler instead of GCC, which got removed with NDK r18b. Thus, older NDK versions are no longer supported and we recommend to upgrade to NDK r19c. You can download it here.

Make sure to configure the new NDK in the Qt Creator settings for Android:

Before you can build projects, we also recommend to clean previous build folders and project settings:
- Close Qt Creator
- Delete the *.pro.user file of your project
- Remove the previous project build folder
- Open your project in Qt Creator and choose your Build Kits
- Rebuild your project for Android
Qt 5.12 and Qt Creator 4.8 also add basic support for the Android ARMv8 architecture. However, there are no pre-built libraries for this architecture with Felgo 3.2.0 yet. If you require early access to Felgo Android ARMv8 support, don’t hesitate to get in touch.

On Windows, Qt Creator does no longer force the use of ANGLE for OpenGL on user applications. You can also expect less issues with antivirus programs on Windows systems. Read more about the bigger improvements of Qt Creator 4.8 in the official release post.
Set License Key in Your Project Configuration
You can now set your Felgo license key as configuration variable from your project file. The Felgo project configuration now supports the PRODUCT_LICENSE_KEY settings:
```
 CONFIG += felgo

 # Optionally set a license key that is used instead of the license key from
 # main.qml file (App::licenseKey for your app or GameWindow::licenseKey for your game)
 PRODUCT_LICENSE_KEY = ""
```
New projects created with the Qt Creator wizards use this setup by default. If you want to update your existing project, add the following line of code to your main.cpp file right below the felgo.initialize() method:
```
 // Set an optional license key from project file
 // This does not work if using Felgo Live, only for Felgo Cloud Builds and local builds
 felgo.setLicenseKey(PRODUCT_LICENSE_KEY);
```
Setting the license key from within the project file with PRODUCT_LICENSE_KEY requires you to do a full rebuild (clean) of your project.

Note: Setting the license key with PRODUCT_LICENSE_KEY is not possible if using the Felgo Live Client. Felgo Live Client still picks up the license key set with App::licenseKey for your app or GameWindow::licenseKey for your game.

For more information, have a look at our publishing guide section about the license key.
Add Subscriptions for iOS and Android to your Apps and Games
The in-app purchase plugin now supports subscriptions for iOS and Android apps. Today, subscriptions are the best way to monetize your app, offering recurring revenue from your users. Also Apple and Google only take a 15% share on subscriptions after 1 year, compared to the 30% share for regular in-app purchases, so that is another plus!

If you want to use subscriptions or the built-in virtual economy system, we recommend using the Felgo in-app purchase plugin instead of the default Qt Purchasing module.

Note: With this update, you need to add additional files for iOS, if you use the in-app purchase plugin. Please check out the integration guide to see where you can find those files.
- libSoomlaiOSStore.a
- libKeeva.a
- libcrypto.a
- libssl.a
- AppleIncRootCertificate.cer

New Features

The new ImagePicker control allows to choose multiple images from the device gallery in one go. It uses a custom QML GridView, which accesses photos from the device gallery or camera roll.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       id: page
       title: qsTr("Choose Photos")

       // right bar item to accept selection
       rightBarItem: TextButtonBarItem {
         text: "Next"
         enabled: imagePicker.selectedCount > 0

         // your app will probably pop the photo selection page from the stack to move on
         // this example only logs the selected photos
         onClicked: console.debug("SELECTED:", JSON.stringify(imagePicker.selection))
       }

       // image picker view for photo selection
       ImagePicker {
         id: imagePicker
         anchors.fill: parent
       }
     }
   }
 }

You can also build your own UI for picking photos. Call NativeUtils::fetchGalleryPhotos() to load a list of all device photos, which your view can then access with the NativeUtils::galleryPhotos property. To further work with individual images, use NativeUtils::getCachedAssetPath().

Improved Qt Quick Controls 2 and TableView
The update to Qt 5.12.3 adds several more new features. You can now use the TableView as another type of Item View in Qt Quick. It is similar to a ListView but with multiple columns. Unlike the previous implementation of QtQuick Controls 1, it does not do any styling. The TableView provides the optimal solution for instantiating, pooling and reusing delegates on demand as you scroll the table. A TableModel for the view can be created with a custom C++ QAbstractTableModel implementation.

Also, various controls in Qt Quick Controls 2 gained new methods or new functionalities.

Qt Quick Input Handlers

The Pointer Handlers of Qt 5.11 are now renamed to Input Handlers and are fully supported as a first-class feature in Qt Quick. The Input Handlers simplify the creation of complex touch interactions, that used to be difficult to do with MouseArea and TouchArea alone. They can detect events even in cases of deep nesting.

This also applies for the TapHandler, which can detect taps and touch gestures. Unlike MouseArea, it can handle events in multiple nested Items at the same time:

 import QtQuick 2.12
 import Felgo 3.0

 App {
  NavigationStack {
    Page {
      title: "Nested Touch Example"

      // Outer Rectangle
      Rectangle {
        anchors.centerIn: parent
        id: outerRect
        width: dp(200)
        height: dp(200)
        color: tapHandler.pressed ? "lightyellow" : "lightgreen"

        TapHandler {
          id: tapHandler
        }

        // Inner Rectangle
        Rectangle {
          id: innerRect
          anchors.centerIn: parent
          width: dp(75)
          height: dp(75)
          color: tapHandler2.pressed ? "lightblue" : "orange"

          TapHandler {
            id: tapHandler2
          }
        }
      }

    }
  }
 }

It is also easy to make an Item draggable with the DragHandler.

 import QtQuick 2.12
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "Drag Example"

       // Draggable Rectangle
       Rectangle {
         // initial position
         x: (parent.width - width) / 2
         y: (parent.height - height) / 2

         width: dp(200)
         height: dp(100)
         color: dragHandler.active ? "lightyellow" : "lightgreen"

         AppText {
           id: text
           text: "Drag Me!"
           anchors.centerIn: parent
         }

         DragHandler { id: dragHandler }
       }

     }
   }
 }

HoverHandler was added as a new type of handler for detecting mouse hover. As touchscreens generally do not offer hover events, in practice it detects a hovering mouse or tablet stylus.

DelegateChooser Tech Preview and More

As a new tech preview, you can have a look at the DelegateChooser type. It allows to use different delegates in item views like AppListView. Depending on role values from the model or the index, you can choose between multiple delegates:

 import QtQuick 2.12
 import Felgo 3.0

 import Qt.labs.qmlmodels 1.0 // tech preview import

 App {
   NavigationStack {
     Page {
       title: "Multiple Delegates"

       AppListView {
         anchors.fill: parent
         model: [
           {
             text: "Apple",
             detailText: "A delicious fruit with round shape",
             type: "fruit"
           },

           {
             text: "Beer",
             type: "drink"
           },

           {
             text: "Orange",
             detailText: "Another fruit with round shape",
             type: "fruit"
           },

           {
             text: "Wine",
             type: "drink"
           }
         ]

         delegate: DelegateChooser {
           role: "type"

           DelegateChoice {
             roleValue: "fruit"

             // Delegate for "fruit" type
             SimpleRow {
               onSelected: text = "Clicked"
             }
           }

           DelegateChoice {
             roleValue: "drink"

             // Delegate for "drink" type
             Rectangle {
               width: parent.width
               height: dp(50)

               color: Theme.tintColor

               AppText {
                 x: dp(16)
                 anchors.verticalCenter: parent.verticalCenter
                 text: modelData.text
                 color: "white"
               }
             }
           }
         }
       }

     }
   }
 }

There are many more additions you get with Qt 5.12.3, for example:

Qt Location contains an updated MapBox plugin and several minor API enhancements.
Qt WebEngine is now based on Chromium 69 and gained support for client certificates.
New Tech Preview versions of Qt for Python and WebAssembly
Qt Remote Objects and the Qt WebGL Streaming module are now fully supported.

Also note that the following modules are part of the Qt 5.12 release, but are deprecated and considered for removal in subsequent releases of Qt:

Qt Script
Qt Quick Controls 1
Qt Canvas 3D

You can also have a look at the official Qt 5.12 blog post or see the full list of changes here.

Improvements

You can now fully access and modify the internal AppActivityIndicator item of ActivityIndicatorBarItem with the new activityIndicator property.
Qt Creator design mode now shows better item names for all Felgo components:

Fixes

Fixes a bug where FelgoGameNetwork::uploadImage() resulted in an error if uploading multiple images at once.
The FelgoMultiplayer::error signal is now available with autocompletion in Qt Creator.
ActivityIndicatorBarItem rotates correctly when used within NavigationBarRow.
Fixes issues with the NavigationStack transition on iOS when Page::navigationBarHidden is used.
Switching orientations when using a Navigation with tabs at the top now correctly resizes the NavigationStack within the tab content.
Fixed channel configuration and default setting for YouTube Video Player App.
Minor documentation fix of IconButtonBarItem::iconSize.
AppActivityIndicator now supports the icon, iconSize and iconFont properties with auto-completion.

v 3.1.0 (2019-02-20)

Highlights Blog Post: Release 3.1.0: New Felgo Plugins Version, Unified App Configuration and FlickablePage

Felgo 3.1.0 introduces a new base version for Felgo Plugins and simplifies maintenance with a unified app configuration for Desktop, iOS and Android.

Felgo 3.1.0 comes as a free update for all Felgo developers.

Highlights

New Version 3 for Felgo Plugins on Android
To match the new Felgo SDK version 3, the version for Felgo Plugins now also increased to 3. This version change is relevant when building your project for the Android platform. You will notice that the configured plugin dependencies in the android/build.gradle of your project are no longer supported.

To correctly integrate the latest Felgo Plugins in your project, please update the build.gradle configuration to use version 3 of the plugins. For example: To use the AdMob Plugin on Android add
```
 implementation 'net.vplay.plugins:plugin-admob:3.+'
```
instead of
```
 implementation 'net.vplay.plugins:plugin-admob:2.+'
```
to the dependencies block of your build.gradle. Note that the version setting at the end of the line changed to 3.+. The same pattern applies to all other plugin integrations. You can also see the updated integration guide in the Felgo Plugins Documentation.

With this change the Android configuration of your app is correctly set up to use the latest version of Felgo Plugins.
Set Product Identifier and Version in Your Project Configuration
The PRODUCT_IDENTIFIER, PRODUCT_VERSION_CODE and PRODUCT_VERSION_NAME project settings are now fully supported on iOS, Android and Desktop.

The app identifier and version of your app usually requires to be specified at many different places. For example at the qml/config.json on Desktop, or the AndroidManifest.xml or Project-Info.plist for mobile platforms.

With this release, you can specify the relevant values with a single configuration for all platforms. The Felgo project configuration now supports the PRODUCT_IDENTIFIER, PRODUCT_VERSION_CODE and PRODUCT_VERSION_NAME settings:
```
 CONFIG += felgo

 # configure the identifier and version information
 PRODUCT_IDENTIFIER = net.felgo.demos.FelgoProject
 PRODUCT_VERSION_NAME = 1.0.0
 PRODUCT_VERSION_CODE = 1
```
New projects created with the Qt Creator wizards use this setup by default. If you want to update your existing projects to this system, also add the relevant placeholders to your Project-Info.plist:
```
 <key>CFBundleIdentifier</key>
 <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>
 <key>CFBundleShortVersionString</key>
 <string>${PRODUCT_VERSION_NAME}</string>
 <key>CFBundleVersion</key>
 <string>${PRODUCT_VERSION_CODE}</string>
```
Otherwise, the project variables are not used on iOS. For Android, you can modify your build.gradle configuration to also use the specified project settings:
```
 android {
     defaultConfig {
       applicationId = productIdentifier
       versionCode = productVersionCode.toInteger()
       versionName = productVersionName
     }
 }
```
For Desktop platforms no additional steps are required. Each time you run qmake for your project, the values are updated with the latest configuration on all platforms.

New FlickablePage Component for Felgo Apps

Many app pages with custom content require an AppFlickable to make the content scrollable. To reduce boilerplate code, you can now use the new FlickablePage, which already contains a pre-configured AppFlickable and ScrollIndicator:

 import Felgo 3.0
 import QtQuick 2.0


 App {
   NavigationStack {

     FlickablePage {
       title: "Flickable Page"

       // set contentHeight of flickable to allow scrolling if the content is bigger than the page height
       flickable.contentHeight: column.height

       // set false to hide the scroll indicator, it is visible by default
       scrollIndicator.visible: true

       // page content
       Column {
         id: column
         width: parent.width

         // fill column with 100 AppText items using Repeater
         Repeater {
           model: 100
           delegate: Rectangle {
             width: parent.width
             height: dp(50)
             AppText {
               anchors.centerIn: parent
               text: qsTr("Item") + " " + index
             }
           }
         }
       } // Column

     } // FlickablePage

   }
 }

All content items of your FlickablePage get reparented to the internal AppFlickable automatically and are thus scrollable.

Felgo Live Icons on macOS and Linux
It is now easier distinguish the Felgo Live Server and Felgo Live Client on macOS and Linux. The different applications now use different app icons on these systems as well:

Fixes

Fixes an issue that broke compatibility with the old VPLAY_PLUGINS project setting. You can now use the setting to link plugin frameworks on iOS again.

v 3.0.0 (2019-02-14)

Highlights Blog Post: Release 3.0.0: V-Play is Now Felgo - New Release & Roadmap

Felgo 3.0.0 combines all app, game and plugin types into Felgo and unifies component naming conventions.

Felgo 3.0.0 comes as a free update for all Felgo developers.

Highlights

Apps, Games and Plugins Combined in Felgo
You no longer have to use different import statements when working with Felgo. The components of the V-Play Apps, V-Play Games and V-Play Plugins modules are all available with a single import Felgo 3.0 statement:
```
 import Felgo 3.0
 import QtQuick 2.0

 App {

  // Storage, required import VPlay 2.0 before
  Storage {
    id: felgoStorage
  }

  // NavigationStack, required import VPlayApps 1.0 before
  NavigationStack {
    id: appNavStack
    initialPage: Page {
      title: "AdMob Page"

      // AdMob Plugin, required import VPlayPlugins 1.0 before
      AdMobBanner {
        adUnitId: "ca-app-pub-3940256099942544/6300978111" // banner test ad by AdMob
        testDeviceIds: [ "<a testdevice id>" ]
        banner: AdMobBanner.Smart

        anchors.horizontalCenter: parent.horizontalCenter
        anchors.top: parent.top
      }
    }
  }
 }
```
With many recent additions, the line between the Apps and Games SDK got less clear. For example, the Storage type is also relevant for apps but was part of the V-Play Games module. The SocialView, which is based on app components, replaced the VPlayGameNetworkView also for games, and so on.

You can combine both app and game components in your Felgo app. The unified import for all components now further simplifies this. Felgo is still compatible with the old V-Play imports. Your existing V-Play projects still work as they used to.

But we suggest to update your projects for Felgo as soon as you can. The V-Play modules are now deprecated and not maintained further. You can thus only get the latest features and components of future Felgo updates with the new module import.

In case you run into troubles or face an issue after upgrading to Felgo, don’t hesitate to contact us.

Improved Component Names

Especially for the V-Play Games module, many components used to have a ‘VPlay’ suffix, which is now removed. This helps to keep component names short and the code is easier to read:

 import QtQuick 2.0
 import Felgo 3.0

 GameWindow {
  activeScene: scene

  Scene {
    id: scene

    // previously: SpriteSequenceVPlay
    SpriteSequence {
      id: spriteseq
      defaultSource: "spritesheet.png"

      // previously: SpriteVPlay
      Sprite {
        name: "walk"
        frameWidth: 32
        frameHeight: 32
        frameCount: 4
        startFrameColumn: 1
        frameRate: 20
        to: {"jump":0, "walk": 1}
      }

      // previously: SpriteVPlay
      Sprite {
        name: "jump"
        frameWidth: 32
        frameHeight: 32
        frameCount: 4
        startFrameColumn: 5
        frameRate: 10
        to: {"walk":1}
      }
    } // SpriteSequence

    Row {
      spacing: dp(4)
      anchors.centerIn: parent

      AppButton {
        text: "walk"
        onClicked: spriteseq.jumpTo("walk")
      }
      AppButton {
        text: "jump"
        onClicked: spriteseq.jumpTo("jump")
      }
    }

  } // Scene
 } // GameWindow

Note: Some of the renamed components in the V-Play SDK have colliding names with Qt components. For Example, the Qt Quick module also holds a SpriteSequence or Sprite type. Qt Creator auto-resolves the types with the imported modules in the QML file. At the moment, the most recent import gets precedence to earlier ones. The above example thus uses the Felgo SpriteSequence and Sprite types, because we import Felgo after Qt Quick.

To avoid issues and mix-ups due to this auto-resolve, you can make sure to always use a specific module by setting a custom module identifier for the import. This is how you could use the Qt Quick types in the above example, without changing the order of imported modules:

 import QtQuick 2.0 as QtQuick
 import Felgo 3.0

 GameWindow {
  activeScene: scene

  Scene {
    id: scene

    QtQuick.SpriteSequence {
      // ...

      QtQuick.Sprite {
        // ...
      }
    } // SpriteSequence

  } // Scene
 } // GameWindow

This is the full list of components that previously used ‘VPlay’ suffix in their name: Scene3D, Camera, AnimatedSprite, Sprite, SpriteSequence, TexturePackerAnimatedSprite, TexturePackerSprite, TexturePackerSpriteSequence, SoundEffect and Particle.

When you update your project to the new Felgo 3.0 import, please also make sure to use the new names for these components. The name changes only apply for the Felgo module import. Your existing project with V-Play imports is not affected and can still use the old names.

Renamed FelgoGameNetwork, FelgoMultiplayer and SocialView
With the rename of V-Play to Felgo, the game network and multiplayer components got renamed as well. The VPlayGameNetwork type is now FelgoGameNetwork, and VPlayMultiplayer turned into FelgoMultiplayer.

As the VPlayGameNetworkView and VPlayMultiplayerView are in the process of getting deprecated, they do not get the Felgo name. These types have ‘VPlay’ removed and are available as GameNetworkView and MultiplayerView. Only the SocialView will see updates and fixes in the future. It is the new default UI for social services and the preferred component to use:
```
 import Felgo 3.0

 App {
 FelgoGameNetwork {
   id: gameNetwork
   gameId: 285
   secret: "AmazinglySecureGameSecret"
   multiplayerItem: multiplayer
 }

 FelgoMultiplayer {
   id: multiplayer
   appKey: "dd7f1761-038c-4722-9f94-812d798cecfb"
   pushKey: "a4780578-5aad-4590-acbe-057c232913b5"
   gameNetworkItem: gameNetwork
 }

 SocialView {
   id: socialView
   gameNetworkItem: gameNetwork
   multiplayerItem: multiplayer
 }
 }
```

Felgo Project Configuration and FelgoApplication

To integrate the Felgo SDK in your project, set CONFIG += felgo in your *.pro configuration:

 # allows to add DEPLOYMENTFOLDERS and links to the Felgo library and QtCreator auto-completion
 CONFIG += felgo # previously CONFIG += vplay

 # uncomment this line to add the Live Client Module and use live reloading with your custom C++ code
 # for the remaining steps to build a custom Live Code Reload app see here: https://felgo.com/custom-code-reload-app/
 # CONFIG += felgo-live # previously CONFIG += vplay-live

The previous CONFIG += vplay setting is still supported. For live reloading with custom C++ code, the CONFIG += vplay-live setting changed to CONFIG += felgo-live as well. If you use Felgo Plugins in your project, link the iOS Plugin Frameworks with the FELGO_PLUGINS configuration:

 ios {
    QMAKE_INFO_PLIST = ios/Project-Info.plist
    OTHER_FILES += $$QMAKE_INFO_PLIST
 }

 FELGO_PLUGINS += admob # previously: VPLAY_PLUGINS += admob

In your main.cpp, the Felgo application and Live Client class names also got renamed:

 #include <QApplication>
 #include <QQmlApplicationEngine>

 #include <FelgoApplication> // previously: #include <VPlayApplication>

 // uncomment this line to add the Live Client Module and use live reloading with your custom C++ code
 //#include <FelgoLiveClient> // previously: #include <VPLiveClient>


 int main(int argc, char *argv[])
 {
  QApplication app(argc, argv);
  FelgoApplication felgo; // previously: VPApplication vplay;

  // ...

  // to start your project as Live Client, comment (remove) the lines "felgo.setMainQmlFileName ..." & "engine.load ...", and uncomment the line below
  //FelgoLiveClient client (&engine); // previously: VPLiveClient client (&engine);

  return app.exec();
 }

Similar to other changes of this update, the previous class names and includes are still supported as well.

Deprecated Components
With the power of Felgo Apps at hand, there’s no need to use outdated controls that were part of the Games module. You can take advantage of Felgo Apps Controls and Qt Quick Controls 2 for your games as well.

To make the difference clear and match the name pattern of Felgo app controls like AppButton, those game controls now prepend ‘Game’. In case a ‘VPlay’ suffix was used, it is removed:
- ButtonVPlay → GameButton
- SliderVPlay → GameSlider
- SwitchVPlay → GameSwitch
- TextFieldVPlay → GameTextField
- ScrollViewVPlay → GameScrollView
Those types are also marked deprecated and won’t receive updates anymore. We advise to not use these types in future projects.

v 2.18.3 (2019-01-16)

Highlights Blog Post: Release 2.18.3: QML JSON ListModel

Felgo 2.18.3 adds the JsonListModel as a performant and feature-rich QML ListModel enhancement. It helps you transform your JSON data to a model and enables you to detect changes to individual items in your model. You can then only update the changed items in your UI instead of updating the full list. This update also adds several improvements and fixes.

Felgo 2.18.3 comes as a free update for all Felgo developers.

Highlights

You can now use JsonListModel to transform your JSON data into a QML ListModel for usage with e.g. an AppListView.
The JsonListModel type implements the full QML ListModel API and fires individual events for all changes in the data. The list view can thus only update relevant entries or apply transition animations. This is super useful, as you can e.g. fetch new data and simply replace the old JSON. The JsonListModel will detect all changes, and the ListView updates its items accordingly - without a full redraw.

You thus get much better performance and scrolling stays smooth when the list is updated:


Json Model: List jumps to the top after an update.	JsonListModel: The list keeps its scroll position. (the GIF only jumps to the top when it restarts)

The JsonListModel is backed by a performant QSyncable model in Qt C++ and exposed to QML for easy usage. With the JsonListModel you can:

Fetch JSON data from REST APIs with QML and JavaScript.
Pass the data to your C++ list model, which synchronizes the JSON data and prepares it for usage in your view.
Show the model data with a list view in QML, which only renders list items that have changed.

With the JsonListModel you do not require to implement a custom model in C++ anymore. The JsonListModel itself is your C++ model, which is fully usable from QML and can work with JSON list items of any format.

Apart from list views, the model also supports the GridView and Repeater types to display model data.

The following example shows how to use JsonListModel together with AppListView. When adding a new item to the JSON, the JsonListModel detects the change. The AppListView can thus use a transition animation when adding the entry. It is not required to fully redraw the list and existing items in the view are not affected.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   NavigationStack {
     Page {
       id: page
       title: "JSONListModel"

       // property with json data
       property var jsonData: [
         {
           "id": 1,
           "title": "Entry 1"
         },
         {
           "id": 2,
           "title": "Entry 2"
         },
         {
           "id": 3,
           "title": "Entry 3"
         }
       ]

       // list model for json data
       JsonListModel {
         id: jsonModel
         source: page.jsonData
         keyField: "id"
       }

       // list view
       AppListView {
         anchors.fill: parent
         model: jsonModel
         delegate: SimpleRow {
           text: model.title
         }

         // transition animation for adding items
         add: Transition {
           NumberAnimation {
             property: "opacity";
             from: 0;
             to: 1;
             duration: 1000
             easing.type: Easing.OutQuad;
           }
         }
       }

       // Button to add a new entry
       AppButton {
         anchors.horizontalCenter: parent.horizontalCenter
         anchors.bottom: parent.bottom

         text: "Add Entry"
         onClicked: {
           var newItem = {
             "id": jsonModel.count + 1,
             "title": "Entry "+(jsonModel.count + 1)
           }
           page.jsonData.push(newItem)

           // manually emit signal that jsonData property changed
           // JsonListModel thus synchronizes the list with the new jsonData
           page.jsonDataChanged()
         }
       }
     } // Page
   }
 }

Please see the documentation of JsonListModel for more information and examples. The JsonListModel is now also used for all JSON models of the Felgo SDK app demos.

You can find a new app demo which incorporates all core elements that you need in a basic app. It is based on the principles of the Separation of Model, View and Logic Code guide. The demo includes login, app navigation, controls, REST API access, offline caching and also uses the JsonListModel.

You can find the MVC Architecture Demo App along with other app demos in the Felgo SDK and as a project wizard in Qt Creator. The basic app is the best starting point for new applications and combines many features that used to be part of individual wizards before. It is also available for you on GitHub.
To further demonstrate the power of JsonListModel, we also prepared an advanced Todo List Demo App.

It uses list transition animations and shows how to integrate PullToRefreshHandler, VisibilityRefreshHandler or SortFilterProxyModel. The demo supports fetching of todos, creation and storing of drafts, offline caching, paging, sorting and filtering.
New project configuration options to set version information.
Use PRODUCT_VERSION_CODE and PRODUCT_VERSION_NAME variables in your *.pro file to update version information for all platforms. The benefit of this new solution is, that you now need update the version data just at one place instead at multiple places. Version information is then automatically set in your iOS Info.plist file and Android AndroidManifest.xml file every time you run qmake for your project.

To make use of this new Felgo feature you need to modify existing projects. Totally modify three files to make use of the new variables:
- *.pro - Project configuration file
- android/build.gradle - The Android gradle buildscript
- ios/Project-Info.plist - Project information for iOS builds
Note: After installing the update, no modification is required for new created projects (wizard).

In the *.pro project configuration add two new properties:
- PRODUCT_VERSION_CODE: Number of the build, a positive integer. Must be higher than the last code used. (e.g. 1,2,3,4)
- PRODUCT_VERSION_NAME: Public version number shown to users. (e.g. 1.5, 1.6, 2.0.1)
In the build.gradle file in your projects android folder replace your applicationId assignment. You can keep the existing defaultConfig block, but remove the applicationId line above and add:
```
 defaultConfig {
   applicationId = productIdentifier
   versionCode = productVersionCode.toInteger()
   versionName = productVersionName
 }
```
In the Project-Info.plist file in your projects ios folder replace the value in the line below the following keys:
- CFBundleShortVersionString -> ${PRODUCT_VERSION_NAME}
- CFBundleVersion -> ${PRODUCT_VERSION_CODE}
Next time you want to update the version data, just change the PRODUCT_VERSION_ properties in your project configuration file and build the app.

New Features

You can now configure the used NavigationStack page transition with NavigationStack::transitionDelegate property. By default, the NavigationStack uses NavigationStack::transitionDelegateiOS on iOS and NavigationStack::transitionDelegateAndroid on Android.

You can also specify a custom transition using StackViewDelegate:

 import Felgo 3.0
 import QtQuick 2.0
 import QtQuick.Controls 1.4

 App {

   // NavigationStack
   NavigationStack {
     // custom transition delegate
     transitionDelegate: StackViewDelegate {

       pushTransition: StackViewTransition {
         NumberAnimation {
           target: enterItem
           property: "opacity"
           from: 0
           to: 1
           duration: 1000
         }
       }

       popTransition: StackViewTransition {
         NumberAnimation {
           target: exitItem
           property: "opacity"
           from: 1
           to: 0
           duration: 1000
         }
       }
     }

     initialPage: pageComponent
   }

   // Component for pages
   Component {
     id: pageComponent
     Page {
       id: page
       title: "Page 1"

       Rectangle {
         anchors.centerIn: parent
         color: Qt.rgba(Math.random(255), Math.random(255), Math.random(255))
         width: parent.width / 2
         height: parent.height / 2
       }

       AppButton {
         anchors.horizontalCenter: parent.horizontalCenter
         text: "Push"
         onClicked: {
           var properties = { title: "Page " + (page.navigationStack.depth + 1) }
           page.navigationStack.push(pageComponent, properties)
         }
       }
     } // Page
   } // Component
 }

Improvements

The NavigationStack transition for Android now better matches the default Android platform transition.
VisibilityRefreshHandler now also refreshes if it gets visible after the content height of the list changes (for example when filtering).

Fixes

Fix animation of AppActivityIndicator and ActivityIndicatorBarItem to loop infinitely.
The AppTextEdit::cursorInView feature does no longer require the AppTextEdit to use id: textEdit.

v 2.18.2 (2018-11-07)

Highlights Blog Post: Release 2.18.2: MVC, MVVM, Flux with QML

Felgo 2.18.2 adds the latest Qt Creator 4.7, as well as many improvements and fixes. A new comprehensive guide helps you to structure your code, and separate logic from UI (MVC, MVVM, Flux).

Felgo 2.18.2 comes as a free update for all Felgo developers.

Highlights

Felgo now ships with Qt Creator version 4.7, giving you the latest stability improvements, fixes and new features.
Update Note: For using the Qt Quick Compiler, which is the default for building in Release Mode with Qt Creator 4.7, it is required to list each qml file with an own entry in your resources.qrc. Otherwise, the compiler does not find the QML source files.

To deactivate the QML compiler, you can use the CONFIG -= qtquickcompiler setting in your *.pro configuration. This only protects the QML resources and bundles them as assets within your binary. You can also skip a specific .qrc configuration with e.g. QTQUICK_COMPILER_SKIPPED_RESOURCES += bundle_only.qrc.
This Felgo update adds a new comprehensive developer guide: Separation of Model, View and Logic Code in your Qt App using QML
The guide offers a best-practice solution how to separate model, view and logic components in your Felgo apps:

A clean component architecture and data-flow helps to keep create readable code, avoids bugs and makes maintenance or refactoring easy.

You can find the full example of the guide on GitHub:

Get Source Code on GitHub

It is available as a project wizard template in Qt Creator as well:

All Felgo Apps Examples and Demos now also use this best-practice solution.

New Features

Adds method FirebaseAuth::loginUserWithToken() to login a user with a custom authentication token.
You can now configure the Android status bar opacity with the Theme.colors.statusBarOpacity property.

Use AppButton::rippleEffect to control whether to show or hide a ripple effect for the button.

This example hides the effect for a single button:

 import Felgo 3.0

 App {

   AppButton {
     text: "No Ripple Effect"
     onClicked: console.log("clicked")
     rippleEffect: false
   }

 }

You can also use Theme.appButton.rippleEffect to change your app's default setting:

 import Felgo 3.0

 App {

   onInitTheme: {
     Theme.appButton.rippleEffect = false
   }

   AppButton {
     text: "No Ripple Effect"
     onClicked: console.log("clicked")
   }

 }

Improvements

Adds new property FirebaseConfig::name.
You can use more than one FirebaseConfig instance by assigning a different unique name to each instance. These names are used for persistence and should be the same between app starts.
AppActivityIndicator now uses a RotationAnimator instead of a RotationAnimation to rotate the activity or loading indicator also if the UI thread is blocked. This allows a better user experience and more fluid UIs.

Fixes

Fixes a build error when using AdMob Plugin on Android using newer Android build system versions.
Fixes potential crashes when using callback functions with FirebaseDatabase.

v 2.18.1 (2018-09-13)

Highlights Blog Post: Release 2.18.1: JavaScript Promises for REST Services, Tinder Swipe Material Cards, QML QSortFilterProxyModel, QML YouTube Player

Felgo 2.18.1 introduces new components for embedding YouTube videos, for creating material cards and Tinder-like swipe cards. It also simplifies connecting to REST services, with the new HttpRequest component. Felgo 2.18.1 also adds several other fixes and improvements.

Felgo 2.18.1 comes as a free update for all Felgo developers.

Highlights

With the YouTubeWebPlayer component, you can now directly embed YouTube videos in your app with a simple QML API.

The component uses a WebView internally and is based on the YouTube Iframe-Player API. To show how you can use the player in your app, you can have a look at the YouTube Video Player App. It uses the YouTube Data API to browse playlists and videos of a configured channel.

This is how you can use the player in QML:
```
 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "YouTube Player"

       YouTubeWebPlayer {
         videoId: "KQgqTYCfJjM"
         autoplay: true
       }

     }
   }
 }
```
New HttpRequest component for REST API connection, based on DuperAgent. This also includes Promises and image scaling/cropping features. You can find details and examples in the New Features section below and in the documentation.
New AppCard component to create material cards. You can also use Tinder-like swipe gesture with cards. With additional AppPaper and AppCardSwipeArea component, you can create fully custom card-like UI elements that can be swiped in a Tinder-like fashion.

New Features

The Page type now features two more signals appeared() and disappeared(). These signals fire when the page becomes active or inactive on a NavigationStack. They are convenience signals to avoid manual checks of Page::isCurrentStackPage.

 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "Page"

       // this code and manual checks of isCurrentStackPage are no longer required
       onIsCurrentStackPageChanged: {
         if(isCurrentStackPage)
           console.log("Page appeared")
         else
           console.log("Page disappeared")
       }

       // instead, you can use the new signals
       onAppeared: console.log("Page appeared")
       onDisappeared: console.log("Page disappeared")
     }
   }
 }

This example shows how all the Page lifecycle events trigger when working with NavigationStack:

The user pushes a page to the stack. It thus becomes the active stack page and the Page::appeared signal fires.
After completion of the push operation, which caused the page to appear, the Page::pushed signal triggers.
The user now pushes another page to the stack. The Page::disappeared signal fires for the previously pushed page, as it is no longer visible on the stack.
By navigating back from the second to the first page, it becomes active again and the Page::appeared signal fires.
If the user now fully removes the page by again popping from the stack, the Page::disappeared signal fires.
After completion of the pop operation, which removed the page, the Page::popped signal triggers.

Use this snippet to test the signals yourself:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // navigation stack for pages
   NavigationStack {
     initialPage: pageComponent
   }

   // page component
   Component {
     id: pageComponent

     Page {
       id: page
       title: "Page 1"

       // allow to push and pop pages dynamically
       Column {
         anchors.centerIn: parent

         // push additional page
         AppButton {
           text: "Push"
           onClicked: page.navigationStack.push(pageComponent, { title: "Page "+(navigationStack.depth + 1) })
         }

         // pop current page
         AppButton {
           text: "Pop"
           onClicked: page.navigationStack.pop()
         }
       }

       // handle lifecycle signals
       onAppeared: console.log(title+" appeared")
       onDisappeared: console.log(title+ " disappared")
       onPushed: console.log(title+ " pushed")
       onPopped: console.log(title+ " popped")
     }
   }
 }

You can now use the HttpRequest type as an alternative to the default XmlHttpRequest. It integrates DuperAgent, a QML clone of the fantastic SuperAgent library from VisionMedia.

It is available as a singleton item for all components that use import Felgo 3.0:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Component.onCompleted: {
     HttpRequest
       .get("http://httpbin.org/get")
       .timeout(5000)
       .then(function(res) {
         console.log(res.status);
         console.log(JSON.stringify(res.header, null, 4));
         console.log(JSON.stringify(res.body, null, 4));
       })
       .catch(function(err) {
         console.log(err.message)
         console.log(err.response)
       });
   }
 }

Similar to HttpRequest, which matches the DuperAgent Request type, other DuperAgent features are also available in Felgo with the Http prefix:

HttpNetworkActivityIndicator - Allows to check for pending requests of HttpRequest, using HttpNetworkActivityIndicator::enabled.
HttpImageUtils - Provides functionality for scaling and cropping an image file before uploading it via DuperAgent's attach function.

The HttpRequest type also supports response caching of your requests out-of-the-box. To change cache behavior, you can use the HttRequest::config() method. It is also possible to change cache settings for individual requests:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Component.onCompleted: {
     HttpRequest
       .get("http://httpbin.org/get")
       .cacheSave(true) // cache the result of this request, regardless of global cache setting
       .cacheLoad(HttpCacheControl.PreferNetwork) // use network if possible, otherwise load from cache
       .then(function(res) {
         console.log(JSON.stringify(res.body))
       })
       .catch(function(err) {
         console.log(err.message)
       });
   }
 }

The DuperAgent package, which brings the HttpRequest type, also contains an implementation of the Promises/A+ specification and offers an API similar to the Promises API in ES2017. The Promise type works independently of DuperAgents's http features and does not require the Http prefix:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Component.onCompleted: {
     var p1 = Promise.resolve(3);
     var p2 = 1337;
     var p3 = HttpRequest
             .get("http://httpbin.org/get")
             .then(function(resp) {
                 return resp.body;
             });

     var p4 = Promise.all([p1, p2, p3]);

     p4.then(function(values) {
         console.log(values[0]); // 3
         console.log(values[1]); // 1337
         console.log(values[2]); // resp.body
     });
   }
 }

Promises are a convenient and flexible way to handle asynchronous aspects of your application.

You can now use SortFilterProxyModel to conveniently apply filter and sorting settings to your QML ListModel items:

The following example shows the configured entries of the ListModel in a ListPage, and allows to sort the list using the name property:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // data model
   ListModel {
     id: fruitModel

     ListElement {
       name: "Banana"
       cost: 1.95
     }
     ListElement {
       name: "Apple"
       cost: 2.45
     }
     ListElement {
       name: "Orange"
       cost: 3.25
     }
   }

   // sorted model for list view
   SortFilterProxyModel {
     id: filteredTodoModel
     sourceModel: fruitModel

     // configure sorters
     sorters: [
       StringSorter {
         id: nameSorter
         roleName: "name"
       }]
   }

   // list page
   NavigationStack {
     ListPage {
       id: listPage
       title: "SortFilterProxyModel"
       model: filteredTodoModel
       delegate: SimpleRow {
         text: name
         detailText: "cost: "+cost
         style.showDisclosure: false
       }

       // add checkbox to activate sorter as list header
       listView.header: AppCheckBox {
         text: "Sort by name"
         checked: nameSorter.enabled
         updateChecked: false
         onClicked: nameSorter.enabled = !nameSorter.enabled
         anchors.horizontalCenter: parent.horizontalCenter
         height: dp(48)
       }
     } // ListPage
   } // NavigationStack
 } // App

Please see the documentation of SortFilterProxyModel for more details and relevant types.

Improvements

Automatically remove focus from SearchBar text field if it gets invisible.

Fixes

Fixes a crash in the Felgo Live Client when using WikitudeArView.
When a device goes online, the App::isOnline property now becomes true only after a short delay. This is required, as otherwise the network adapter might not be ready yet, which can cause immediate network requests to fail.

v 2.18.0 (2018-08-08)

Highlights Blog Post: Release 2.18.0: Update to Qt 5.11.1 with QML Compiler and Massive Performance Improvements

Felgo 2.18.0 updates to Qt 5.11.1 and adds several improvements and fixes.

Felgo 2.18.0 comes as a free update for all Felgo developers.

Highlights

Update to Qt 5.11.1 with numerous big improvements, such as:
- Major changes to QML compiler pipeline and QML engine, for improved performance on all platforms.
- Qt Quick Compiler now also available in the free version, with CONFIG += qtquickcompiler
- Improved performance and reduced GPU usage for Qt 3D.
- New features for Qt Location and Maps, like turn-by-turn navigation.
- Many improvements and fixes to core modules.

Improvements

WikitudeArView now properly rotates the camera image to device rotation on iOS.
WikitudeArView now supports live reloading of the HTML/JavaScript files with the Felgo Live Client.

Fixes

Fixes Desktop Resolution Simulation on Windows when additional UI scaling is applied in display settings.
Fixes a crash in FirebaseAuth, FirebaseDatabase and FirebaseStorage when the FirebaseConfig is invalid.
WikitudeArView no longer gets a stuck camera image when resuming the app from background on iOS.

v 2.17.1 (2018-07-17)

Highlights Blog Post: Release 2.17.1: Use 3D with Live Reloading and Test Plugin Code Examples from Browser

Felgo 2.17.1 adds several improvements and fixes for Felgo components. It also includes a new app example, how to create custom listview delegates.

Felgo 2.17.1 comes as a free update for all Felgo developers.

New Features

New examples on how to work with list views. The examples cover how to make custom list item delegates (left) and make collapsible sub-sections within list items (right):

The plugin documentation now also includes code examples that you can test on your mobile phone directly from the browser, using the Felgo Web Editor.

Here is an example how to display an ad banner with the AdMob plugin:

 import Felgo 3.0

 App {
   NavigationStack {
     Page {
       title: "AdMob Banner"

       AdMobBanner {
         adUnitId: "ca-app-pub-3940256099942544/6300978111" // banner test ad by AdMob
         banner: AdMobBanner.Smart
       }
     }
   }
 }

App and GameWindow provide new properties to make the native keyboard handling on Android and iOS easier. You can use keyboardVisible and keyboardHeight to adapt your app layout when the keyboard is shown, like positioning controls above the keyboard.

The following example displays a floating action button above the keyboard, that also adapts to size changes of the keyboard:

 import Felgo 3.0
 import QtQuick 2.7

 App {
   id: app

   // We unset the focus from the AppTextField after the keyboard was dismissed from the screen
   onKeyboardVisibleChanged: if(!keyboardVisible) textField.focus = false

   NavigationStack {

     Page {
       id: page
       title: qsTr("Keyboard Height")

       AppTextField {
         id: textField
         width: parent.width
         font.pixelSize: sp(25)
       }

       FloatingActionButton {
         // Add the keyboard height as bottom margin, so the button floats above the keyboard
         anchors.bottomMargin: app.keyboardHeight + dp(15)
         // We only show the button if the AppTextField has focus and the keyboard is expanded
         visible: textField.focus && app.keyboardHeight != 0
         icon: IconType.check
         backgroundColor: Theme.tintColor
         iconColor: "white"
         onClicked: textField.focus = false
       }
     }
   }
 }

Improvements

FileUtils::readFile() now supports reading files with any file ending, not limited to .txt or .json anymore. This allows working with shaders in the Felgo Live Client without any custom C++ code from QML.
Soomla In-Ap-Purchase Plugin: Store::insufficientFundsError now returns the itemId as parameter that triggered the signal.
AppTextField can now set the text padding with new bottomPadding, leftPadding, rightPadding, topPadding properties, inherited from the internal TextField.
AppButton and SwipeButton support the textFormat property to set rich text as button text label.
VisibilityRefreshHandler adds the canRefresh property that allows to hide the control if there is no more additional data to show.
Retrieve all the mobile device's contact list phone numbers on Android and iOS with the new NativeUtils::contacts property.
The new phoneNumber property now works with Android run-time permissions.

Note: The methods getContacts() and getPhoneNumber() are deprecated as of Felgo 2.17.1. Use the new properties instead.
The new property cursorInView for AppTextEdit can be used to ensure that the text cursor stays visible on the screen. For example, when adding new lines at the bottom of the screen. In that case, it moves the surrounding flick-able element in the opposite direction and therefore avoids the cursor leaving the screen.

Fixes

DateFormatter::prettyDateTime() now supports given dates from a year ago and dates that are in the future.
Improved WebStorage support in connection with an App root component.
Prevent a short flickering within AppListView if restoring the scroll position with restoreScrollPosition() method.
Adds handling of Android runtime permissions for NativeUtils::getPhoneNumber().
Fixes a bug in FirebaseDatabase when using queries containing both startAt and endAt on iOS.
Fixes a potential crash when using multiple concurrent queries in FirebaseDatabase on Android.
Fixes a crash when using multiple AdMobRewardedVideo items in parallel.
Using NativeUtils::displayCameraPicker() on iOS now allows to use the resulting path from NativeUtils::cameraPickerFinished to be used with a property binding.

v 2.17.0 (2018-06-12)

Highlights Blog Post: Release 2.17.0: Firebase Storage, Downloadable Resources at Runtime and Native File Access on All Platforms

Felgo 2.17.0 adds two new demos that show how to integrate C++ code with QML and add the new DownloadableResource and FileUtils items.

Felgo 2.17.0 comes as a free update for all Felgo developers.

Highlights

New Firebase Cloud Storage item to upload local files to the cloud:
With the new FirebaseStorage item, you can upload files to the Firebase Cloud Storage. It uploads local files to the cloud file system and provides a public download URL.

You can upload files like the following:
- Pictures captured with the camera using NativeUtils::displayCameraPicker().
- Local pictures selected with NativeUtils::displayImagePicker().
- Project assets using relative URLs with Qt::resolvedUrl().
- Local files on the file system obtained with one of the FileUtils functions.
Download additional assets on demand at runtime with the new DownloadableResource item.
Have a look at two brand-new app demos that show how to integrate C++ with QML:
- The first example shows the different forms of C++ and QML integration: signals, slots and properties. This example is the tutorial result from How to Expose a Qt C++ Class with Signals and Slots to QML.
- The second example shows how to combine a C++ backend that provides the model data for a frontend created in QML. The data is displayed with QML with Qt Charts for both 2D and 3D charts.

New Features

The FileUtils item offers features for dealing with files from QML (open, copy, delete, etc).
You can now set a timeout for your Felgo Multiplayer games using the new property FelgoMultiplayer::socketTimeoutMs. This is useful to prevent clients with slow connections from slowing down the entire game.
Create feature-rich Augmented Reality (AR) apps & games with our new Wikitude Plugin.

Navigation drawer entries add setting the color of the text, icon and background in default, pressed and active state. To do so, the SimpleRow::style offers the additional selectedTextColor and activeBackgroundColor properties.

In addition, the text and icon of tabs for TabControl or AppTabButton may now use a different color while being pressed. To take advantage of this feature in your app's navigation drawer entries and tabs, the Theme provides the following new settings:

navigationAppDrawer.selectedTextColor: The text color of the text when the item is being selected.
navigationAppDrawer.itemActiveBackgroundColor: The background color of of the row when the item is active.
listItem.selectedTextColor: The color of text when the SimpleRow is being selected.
listItem.activeBackgroundColor: The background color when SimpleRow::active is set to true.
tabBar.titlePressedColor: The pressed color defines the font color of the title label and the icon of tabs when they are being pressed. Only applies for main-tabs based on NavigationItem.
tabBar.subTabTitlePressedColor: The pressed color defines the font color of the title label and the icon of tabs when they are being pressed. Only applies for sub-tabs based on AppTabButton.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   onInitTheme: {
     Theme.colors.tintColor = "red"

     // drawer + item bg
     Theme.navigationAppDrawer.backgroundColor = "lightgrey"
     Theme.navigationAppDrawer.itemBackgroundColor = Theme.tintColor
     Theme.navigationAppDrawer.itemSelectedBackgroundColor = "orange"
     Theme.navigationAppDrawer.itemActiveBackgroundColor = "white"

     // item text
     Theme.navigationAppDrawer.textColor = "white"
     Theme.navigationAppDrawer.selectedTextColor = "black"
     Theme.navigationAppDrawer.activeTextColor = Theme.tintColor

     // tab text
     Theme.tabBar.titleColor = Theme.tintColor
     Theme.tabBar.titlePressedColor = "orange"
   }

   Navigation {
     navigationMode: navigationModeTabsAndDrawer

     NavigationItem {
       title: "Home"
       icon: IconType.home
       NavigationStack {
         Page { title: "Home" }
       }
     }
     NavigationItem {
       title: "Favorites"
       icon: IconType.star
       NavigationStack {
         Page { title: "Favorites" }
       }
     }
     NavigationItem {
       title: "Help"
       icon: IconType.question
       NavigationStack {
         Page { title: "Help" }
       }
     }
   }
 }

The Felgo Live Client now also supports Bluetooth, NFC and Qt Quick Pointer Handlers.
New property labelFontSize of the AppCheckBox to change its font size.
Network adapter selection in Live Server: Change the selected network adapter of the Live Server if your mobile Live Client is stuck in the "Connected" screen.

Improvements

Users of your app or game including Felgo Game Network can now delete their account with a simple button found in their user profile. To deactivate this feature in your app, you can set the SocialView::deleteAccountEnabled or the GameNetworkView::deleteAccountEnabled property to false. If you hide the button or use a customized profile, you can still provide this feature with the FelgoGameNetwork::deleteUser() function.
TexturePackerAnimatedSprite gains some improvements: You can now change the current frame while the animation is paused (i.e. if paused is true and running is also set to true). The overall performance also increased, as frames are no longer re-drawn if the animation is not running or paused.
You can do this either by assigning currentFrame or by calling advance().
Selecting an image on iOS with NativeUtils::displayCameraPicker() or NativeUtils::displayImagePicker() now also loads photos saved as Apple's new HEIC image file format.
The Publishing Felgo Games & Apps guide lists additional notes about Google Play Privacy Guidelines.
New convenience properties for setting density-independent fontSize with the App::sp() function for AppText::fontSize, AppTextEdit::fontSize and AppTextInput::fontSize.
NativeUtils::openUrl() now also works with local file:// URLs on Android & iOS.
Please note that if your targetSdkVersion in AndroidManifest.xml is 24 or higher and you want to open file:// URLs with another application on Android devices, you need to enable the paths you intend to use in the android/res/xml/file_paths.xml file.

Fixes

Fixes a potential crash and function evaluating warnings during object destruction if a Navigation and NavigationStack is used from within a Loader item.

v 2.16.1 (2018-05-08)

Highlights Blog Post: Release 2.16.1: Live Code Reloading with Custom C++ and Native Code for Qt

Felgo 2.16.1 features live code reloading with custom C++ and native code for Felgo and Qt projects.

iOS Bundle Identifier Migration

Starting with Felgo 2.16.1, the app's bundle identifier for iOS is set using the PRODUCT_IDENTIFIER setting in your *.pro project configuration. To adapt to the new setting perform the following steps:

1. Open your *.pro project file and add the following block:

 # configure the product's bundle identifier
 # this identifier is used for the app on iOS
 PRODUCT_IDENTIFIER = com.your.company.YourApp

where com.your.company.YourApp matches the CFBundleIdentifier setting of your existing Project-Info.plist configuration.

2. Open your Project-Info.plist in the ios subfolder and replace the value of CFBundleIdentifier with $(PRODUCT_BUNDLE_IDENTIFIER), so that it looks like the following:

 <key>CFBundleIdentifier</key>
 <string>$(PRODUCT_BUNDLE_IDENTIFIER)</string>

3. After running qmake, your iOS build uses the new setting.

Note: Make sure to transition your project to this new format, as otherwise app store build uploads from Xcode 9 might fail.

All Felgo Project Wizards already use the new project setting.

Highlights

Live Client Module: Live Code Reloading with Custom C++ and Native Code
Felgo version 2.16.1 introduces the Live Client Module. You can use it to add QML live reloading features to your own application. This allows you to use custom C++ and native code together with live code reloading for QML and JavaScript. You can find a quick integration guide in the update blog post.

Improvements

SimpleRow now includes a badgeValue property that allows to show a specified value in a badge style on the right edge of the row.

You can style the badge globally with the Theme::listItem properties or specifically for a row instance with the SimpleRow::style property:
NavigationItem uses the new SimpleRow::badgeValue property to show a specific value displayed in a badge style on the right edge of the row, if displayed with navigationModeDrawer.

You can style the badge with the Theme::navigationAppDrawer properties:
You can now use the SearchBar::textField property to access the internal AppTextField of the search bar.

Fixes

Fixes a potential crash and function evaluating warnings during object destruction when a Navigation and NavigationStack setup is used together with a Loader item.
Resolves a possible memory leak on iOS during app shutdown with the GoogleCloudMessaging and GameCenter plugin.

v 2.16.0 (2018-04-10)

Highlights Blog Post: Release 2.16.0: iPhone X Support and Runtime Screen Orientation Changes

Felgo 2.16.0 brings iPhone X support and runtime screen orientation changes.

Felgo Games & Felgo Apps

Highlights

iPhone X Support for Felgo Apps
The iPhone X comes with new UI challenges, as the screen is now bigger and includes reserved areas that hold native buttons or overlays. The Felgo Navigation components automatically adjust their style to match these new requirements. In addition, the Page::useSafeArea setting takes care of keeping your UI elements within the safe area of the screen.

Alternatively, you can also disable the setting and manually align your content to the Page::safeArea item. The exact pixel insets of the screen are available with the NativeUtils::safeAreaInsets property.
iPhone X Support for Felgo Games
To support existing games on devices with reserved screen areas, the Scene::useSafeArea setting keeps your scene content within the safe area. The Scene::gameWindowAnchorItem reflects this safe area of the screen.

To provide the best look and experience, you can take advantage of the new Scene::fullWindowAnchorItem. You can then e.g. let your background fill the whole screen, without affecting other parts of the game.

The exact pixel insets of the screen are available with the NativeUtils::safeAreaInsets property. If used within a Scene, keep in mind that these insets do not take scene-scaling into consideration.
Simulation of iPhone X for Debug Resolution Menu
To speed up development, you can test your UI for iPhone X on Desktop without having to build and deploy for the iPhone Simulator.

The Desktop simulation for iPhone X also covers the native safe area. You can quickly switch between different devices to see how your app looks like with and without safe area insets.

You can now set the preferred screen orientation at runtime from within QML code!

To specify the global orientation you can use the new property NativeUtils::preferredScreenOrientation. E.g. to lock and unlock your app or game to portrait orientation, you can use the following lines of code:

 import Felgo 3.0
 import QtQuick 2.5

 App {
   NavigationStack {
     Page {
       title: "Orientation Lock"

       Column {
         AppButton {
           text: "Lock to portrait"
           onClicked: nativeUtils.preferredScreenOrientation = NativeUtils.ScreenOrientationPortrait
         }
         AppButton {
           text: "Reset default orientation"
           // Resets to the orientation defined in AndroidManifest.xml / Project-Info.plist
           onClicked: nativeUtils.preferredScreenOrientation = NativeUtils.ScreenOrientationDefault
         }
       }
     }
   }
 }

You can also specify the orientation per page in apps, using Page::preferredScreenOrientation. Use this example code to show a page fixed to portrait mode:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   id: app

   NavigationStack {
     id: stack

     Page {
       id: page
       title: "Screen orientation test"

       AppButton {
         text: "Push portrait page"
         onClicked: stack.push(portraitPage)
       }
     }
   }

   Component {
     id: portraitPage

     Page {
       id: page
       title: "Portrait page"
       preferredScreenOrientation: NativeUtils.ScreenOrientationPortrait
     }
   }
 }

These properties only have an effect on iOS and Android and override the default screen orientation defined in your project's Project-Info.plist and AndroidManifest.xml.

New improved Felgo Live Server UI and new features.

Improvements

The screen diameter threshold for App::tablet and GameWindow::tablet detection increased to 6.7 inches. The property now returns false for phablets and phones with bigger screens like the iPhone X or Samsung Galaxy S8+.
With NavigationItem::showInDrawer you can now hide single navigation entries from the drawer menu. It is still possible to open the item with custom code or with the tab menu of your app navigation.
NativeUtils can now be used with import Felgo 3.0 only. for NativeUtils anymore if you are only using app components).
Disable navigation from the leaderboard to user profiles by setting SocialView::leaderboardProfileEnabled to false.
Choose whether to show the friends section for your leaderboard with the SocialView::leaderboardShowFriends property.
You can now globally disable ELO-based match-making for FelgoMultiplayer by setting FelgoMultiplayer::useRankingBasedMatchmaking to false.

Fixes

Allows replacing the contentItem of AppTabButton with custom QML code, which threw an error before.
Solves performance issues with AnimatedSprite and TexturePackerAnimatedSprite on Windows.
Fixes a bug in FelgoGameNetwork where the user's selected country sometimes got reset on app restart.
Fixes a function parameter type issue for MouseJoint::getReactionForce() and MouseJoint::getReactionTorque().

NativeUtils::displayCameraPicker() now also supports targeting Android 7.0 and newer. Due to changes in the Android rules for app interaction, if your app uses a targetSdkVersion >= 24 in AndroidManifest.xml, it needs to use a content provider so the camera app can save the image to the app.

For new projects created in Qt Creator, everything is already configured properly.

If you have an existing project and are updating targetSdkVersion to 23 or greater, you need to add the following code to android/AndroidManifest.xml inside the <application> tag:

 <!-- file provider needed for letting external apps (like camera) write to a file of the app -->
 <provider
     android:name="android.support.v4.content.FileProvider"
     android:authorities="${applicationId}.fileprovider"
     android:exported="false"
     android:grantUriPermissions="true">

     <meta-data
         android:name="android.support.FILE_PROVIDER_PATHS"
         android:resource="@xml/file_paths"/>
 </provider>

Additionally you need to create a file android/res/xml/file_paths.xml with the following contents:

 <?xml version="1.0" encoding="utf-8"?>
 <paths>
     <external-files-path name="images" path="Pictures"/>
 </paths>

Finally, add the following dependencies to android/build.gradle:

 dependencies {
   ...

   implementation 'com.android.support:support-core-utils:27.1.0'
   implementation 'com.android.support:appcompat-v7:27.1.0'
 }

Fix a possible warning about missing getPrice()F method in log output when using Soomla Plugin.
The default AppButton::radius setting now applies App::dp() for the chosen ThemeAppButton::radius. Similar to other button settings, the border radius is therefore density independent from now on.
The FelgoMultiplayer::playerLeft() signal now triggers correctly when a player leaves the game.
Fix support for OneSignal push notifications on Android 8.0 devices.

v 2.15.1 (2018-02-21)

Highlights Blog Post: Release 2.15.1: Upgrade to Qt 5.10.1 & Qt Creator 4.5.1 | Firebase Improvements and New Live Code Reloading Apps

Felgo 2.15.1 updates to Qt 5.10.1 & Qt Creator 4.5.1 and adds new APIs for the Firebase Plugin.

Felgo Games & Felgo Apps

Highlights

Update to Qt 5.10.1 which contains over 300 fixes and improvements.
Update to Qt Creator 4.5.1 which fixes several issues.
Firebase Plugin account configuration from QML. This makes Firebase setup easier and you can use multiple Firebase accounts from within the same app.
New callback functions for several FirebaseDatabase methods.
New Felgo Live Scripting mobile Apps for iOS and Android with project cache. You can now view your old projects on your device, without being connected to the Live Server.

New Features

Allow testing of Firebase Plugin and Facebook Plugin with Felgo Live Reloading.
You can now let the user select a date from a native date picker dialog with the new function NativeUtils::displayDatePicker().

Improvements

It is now possible to specify Firebase Plugin account configuration in QML code. You can override the default configuration of FirebaseDatabase and FirebaseAuth using the new type FirebaseConfig. This allows for using multiple Firebase accounts from within the same app.
When reading and writing data to and from a FirebaseDatabase, you can now use callback functions in addition to the item's signals FirebaseDatabase::readCompleted() and FirebaseDatabase::writeCompleted(). You can supply a function as third parameter to the methods FirebaseDatabase::getValue(), FirebaseDatabase::getUserValue(), FirebaseDatabase::setValue() and FirebaseDatabase::setUserValue(). Both the signal and the callback function will be called on completion.
Improve rebound effect of list view in drawer used in Navigation (default on Android or if using navigationModeDrawer).
Improvements for FelgoMultiplayer matchmaking and error handling. Update to latest Photon version for multiplayer services.
Increased timeout between plugin trial notice dialogs.
Reduce duration of Felgo Splash screen during development for standard build & run from Qt Creator.
Documentation improvements in various components.
Disable user location updates for AppMap after AppMap::showUserPosition gets disabled again and AppMap::enableUserPosition is not set to optimize battery usage on mobile devices.
Update the AdMob Plugin, Firebase Plugin and GoogleCloudMessaging Plugin to use Google Play Services 11.8.0.

Fixes

Fix issue with failing QML imports in Qt Creator.
Fixes an issue where games would be always started in fullscreen mode while developing, if previously an app was run in iOS theme.
Fix App::isOnline and GameWindow::isOnline property on macOS Sierra and iOS 10.
Fix user position and location circle for AppMap with MapBoxGL plugin.

v 2.15.0 (2018-01-25)

Highlights Blog Post: Release 2.15.0: Upgrade to Qt 5.10 & Qt Creator 4.5 | Firebase Data Structures and Queries & Many Improvements

Felgo 2.15.0 updates to Qt 5.10

Qt 5.10 Update Note

Qt 5.10 introduced a new TabButton::icon property. The derived AppTabButton type, which also used a property with the same name, now offers the tabIcon property to provide the Felgo icon features.

Felgo Games & Felgo Apps

Improvements

The update replaces the default icons used in PictureViewer, PullToRefreshHandler and VisibilityRefreshHandler to better match the platform styles. If required, you can still set your own icons with the available properties.
Felgo Live Client window always-on-top is now optional and can be disabled in Live Server.
Felgo Live Client now shows error log output directly in error screen if the QML file could not be loaded.

Firebase Plugin: You can now read and write complex and nested objects and arrays in addition to primitive numbers, strings and booleans using FirebaseDatabase.

Example:

 FirebaseDatabase {
   id: firebaseDb

   Component.onCompleted: getValue("public/path/to/my/object")

   onReadCompleted: {
     if(success) {
       //signal parameter "value" can be a nested object/array as read from your database
       console.debug("Read value " + value.subarray[3].subproperty.text)
     }
   }
 }

Firebase Plugin: You can now specify your query with the optional parameter queryProperties to the functions FirebaseDatabase::getValue() and FirebaseDatabase::getUserValue().

Example:

 //use query parameter:
 firebaseDb.getValue("public/bigqueryobject", {
                       orderByKey: true,  //order by key before limiting
                       startAt: "c",      //return only keys alphabetically after "c"
                       endAt: "m",        //return only keys alphabetically before "m"
                       limitToFirst: 5,   //return only first 5 sub-keys
                     })

See more details about the available query parameters at the documentation of FirebaseDatabase::getValue().

Firebase Plugin: You can now access the logged in user's ID token using the new FirebaseAuth::userToken property.
Firebase Plugin: You can now disable on-disk cache by using the new FirebaseDatabase::persistenceEnabled property.

Fixes

Fixes a Navigation issue that affected the usage of the source property for NavigationItem.
If the Navigation is created with a Loader that uses the asynchronous setting, the Android menu button displays correctly again.
FelgoMultiplayer::leaveGame() requests are now only sent when in lobby, room or game state. The function does not interfere with ongoing joinLobby requests anymore.
Fixes the vertical alignment of SimpleRow's disclosure indicator.
Fixed a SyncedStore issue which caused syncing to fail in some cases.

Felgo Releases before 2018

List of older releases: Felgo Updates (Older Releases)

Find the Best Demos and Examples

Contents

Felgo Updates

Felgo Update Guide

Latest Felgo Release

v 3.7.0 (2020-10-20)

Felgo 3.7.0 Migration Hints

Felgo 3.7.0 Hotfix iOS Live Client Module

Highlights

New Features

Improvements

Fixes

Older Felgo Releases

v 3.6.0 (2020-06-17)

Felgo 3.6.0 Migration Hints

Highlights

New Features

Improvements

Fixes

v 3.5.0 (2020-04-22)

Highlights

New Features

Improvements

Fixes

v 3.4.0 (2020-03-18)

Highlights

New Features

Improvements

Fixes

v 3.3.0 (2019-12-04)

Felgo 3.3.0 Migration Hints

Android Hotfix

Facebook iOS Hotfix

Highlights

New Features

Improvements

Fixes

v 3.2.0 (2019-05-14)

Migration Hints

Highlights

New Features

Improvements

Fixes

v 3.1.0 (2019-02-20)

Highlights

Fixes

v 3.0.0 (2019-02-14)

Highlights

v 2.18.3 (2019-01-16)

Highlights

New Features

Improvements

Fixes

v 2.18.2 (2018-11-07)

Highlights

New Features

Improvements

Fixes

v 2.18.1 (2018-09-13)

Highlights

New Features

Improvements

Fixes

v 2.18.0 (2018-08-08)

Highlights

Improvements

Fixes

v 2.17.1 (2018-07-17)

New Features

Improvements

Fixes

v 2.17.0 (2018-06-12)

Highlights

New Features

Improvements

Fixes

v 2.16.1 (2018-05-08)

iOS Bundle Identifier Migration

Highlights

Improvements