V-Play has a new name, say hi to Felgo!Learn More

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.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.

Update Now (New to Felgo? Get started here)

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

     compile 'net.vplay.plugins:plugin-admob:3.+'

    instead of

     compile '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.

Older Felgo Releases

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:

    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 Basic 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

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:

    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 Player Demo 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:

    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

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

Fixes

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:

  • 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:

     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

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

Fixes

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
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 {
       ...
    
       compile 'com.android.support:support-core-utils:27.1.0'
       compile '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
Improvements
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)

Voted #1 for:

  • Easiest to learn
  • Most time saving
  • Best support

Develop Cross-Platform Apps and Games 50% Faster!

  • Voted the best supported, most time-saving and easiest to learn cross-platform development tool
  • Based on the Qt framework, with native performance and appearance on all platforms including iOS and Android
  • Offers a variety of plugins to monetize, analyze and engage users
FREE!
create apps
create games
cross platform
native performance
3rd party services
game network
multiplayer
level editor
easiest to learn
biggest time saving
best support