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

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

By GT

V-Play 2.15.0 adds support for Qt 5.10 and the latest Qt Creator 4.5. Qt 5.10 comes with many great features like Imagine Style for Qt Quick Controls 2 or language improvements for QML. Qt Creator 4.5 adds a new File System Navigation Tree and better support of platform tools. This update also improves the V-Play Firebase components for complex data structures and queries.

V-Play 2.15.0 Improvements

V-Play is now compatible with Qt 5.10 and Qt Creator 4.5. See later parts of this post for the highlights. V-Play Release 2.15.0 also includes many engine improvements:

Patch for Qt 5.10 QtGraphicalEffects Issue on iOS

Qt 5.10 is available for a while and offers many new features. But there were also some issues that prevented us from providing the update faster. For example, the release of Qt 5.10 introduced a QtGraphicalEffects issue on iOS. Thus, it is not possible to use graphical effects on iOS with Qt 5.10 at the moment.

This is a major issue for all mobile developers, so we didn’t release Qt 5.10 for V-Play until we had a fix ready. We took the time to prepare a patch, which is part of this V-Play update now. It allows you to keep working with QtGraphicalEffects on iOS with Qt 5.10. You can always count on V-Play to ship stable Qt builds for mobile development.

Note: Qt 5.10 also changes the minimum deployment target for iOS to iOS 10.0. Older versions are no longer supported by Qt.

Use Firebase Queries and Data Structures

The Firebase Plugin now supports working with complex data structures and queries. Apart from primitive data types, you can now read and write nested objects and arrays:

 FirebaseDatabase {
   id: firebaseDb

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

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

This allows you to save and load full data records of your application with a single call from QML. The update also introduces support for queries, with the optional parameter queryProperties. You can use this feature to retrieve your data sorted or filtered by custom conditions:

 FirebaseDatabase {
   id: firebaseDb

   Component.onCompleted: {
     //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
                     })
   }
 }

The following example shows how to store data objects of a QML list with Firebase. The demo queries and displays only the twenty most recent entries of the list:

import VPlayApps 1.0
import VPlayPlugins 1.0
import QtQuick 2.0

App {
  readonly property int maxListEntries: 20
  property int numListEntries
  property bool loading: false

  FirebaseDatabase {
    id: firebaseDb

    //load total number of entries to compute index of next element
    realtimeValueKeys: ["public/numListEntries"]
    onRealtimeValueChanged: if(success && key === "numListEntries") numListEntries = value

    //load data on startup
    onPluginLoaded: loadData()
    onReadCompleted: {
      if(success) {
        //display DB data in ListView
        listView.model = value
      }
      loading = false
    }

    //refresh data directly from DB after saving
    onWriteCompleted: if(success) loadData()
  }

  Page {
    AppListView {
      id: listView

      anchors.left: parent.left
      anchors.right: parent.right
      anchors.top: parent.top
      anchors.bottom: actionBar.top
      anchors.topMargin: Theme.statusBarHeight

      delegate: SimpleRow {}

      model: [
        { text: "Loading data from database..." }
      ]
    }

    Flow {
      id: actionBar

      anchors.left: parent.left
      anchors.right: parent.right
      anchors.bottom: parent.bottom
      spacing: dp(12)

      AppButton {
        text: "Add new item"
        onClicked: addItem()
        enabled: !loading
      }

      AppActivityIndicator {
        visible: loading
      }
    }
  } // Page

  function loadData() {
    loading = true

    //load the last X entries, ordered by timestamp property
    firebaseDb.getValue("public/listEntries", {
                          limitToLast: maxListEntries,
                          orderByChild: "timestamp"
                        })
  }

  function addItem() {
    loading = true

    //add new DB item with timestamp and text
    var date = new Date()
    var timestamp = date.getTime()
    var text = "Item created at " + date.toString()

    var dbItem = { timestamp: timestamp, text: text }
    var index = numListEntries

    //using numbers as sub-keys makes the DB store data as an array
    firebaseDb.setValue("public/listEntries/" + index, dbItem)

    //keep track of total number of entries
    firebaseDb.setValue("public/numListEntries", numListEntries + 1)
  }
} // App

The update also brings more improvements and fixes for the Firebase Plugin. For example, you can access logged in user’s token or disable on-disk caching. To try the Firebase Plugin and test new features, please see the updated PluginDemo source on GitHub:

GitHub - V-Play Plugin Demo

New V-Play Live Client and Store App for iOS and Android

V-Play 2.15.0 comes with a reworked V-Play Live Client and Server. The updated Live Client supports all new features and components.

v-play-live-code-change-reload-windows-android-ios

It also adds many smaller improvements and fixes. For example, you can now choose whether to show the V-Play Live Client window on top of other open windows. You can do this with a setting in the Live Server application:

V-Play Live Client Stay-On-Top Toggle

The updated Live Client also comes with improved QML-error handling and logging capabilities. It now shows error log output on the error screen within the client window.

V-Play Live Client Error Screen Log Output

There’s also a new V-Play Live version available for you on the iOS App Store. It includes all the latest features, so make sure to get the updated app to be fully compatible with current version of V-Play Engine and the Live Server. You can download the app for iOS and Android here:

App Store Google_Play_Badge-1

Updated V-Play Sample Launcher with Qt World Summit Demo

This release also updates the V-Play Sample Launcher that comes with the V-Play SDK. It offers quick access to all V-Play demos and examples. The Sample Launcher now also features the new Qt World Summit app demo:

V-Play Sample Launcher with Qt World Summit Demo

The demo shows many additions like the SocialView components or improved navigation features. The demo is also available for you on GitHub:

GitHub - Qt World Summit 2017 app

More Improvements and Fixes

V-Play 2.15.0 comes with many other improvements, like better icon support for PictureViewer and PullToRefreshHandler.

V-Play 2.15.0 New PullToRefershHandler Icons

It also includes fixes for V-Play Multiplayer, Navigation Components and SyncedStore. For an overview of all changes, make sure to see the changelog here.

Qt 5.10 Improvements for Mobile App Development

Imagine Style, Fusion Style and Improved Qt Quick Controls

Qt 5.10 brings many additions for mobile app development, especially for Qt Quick Controls 2. Most prominent is the introduction of two new styles: Imagine style (left) and Fusion style (right):

Qt 5.10 Quick Controls Imagine Style and Fusion Style

Imagine style is an image-based style. You can now import your assets from Photoshop, which makes working with designers a lot easier. Create a custom look and feel simply by replacing the used images of the style. Fusion style gives a platform agnostic, desktop-oriented look and feel.

The update also introduces new types like Action, ActionGroup and MenuBar. It also adds many improvements for existing Quick Controls. For example, better icon support with new icon properties for AbstractButton.

Note: The V-Play AppTabButton type can no longer provide an icon property, as this would interfere with the Qt additions. So if you use the AppTabButton component and the icon property, rename it to tabIcon to have the same functionality like before this update.

There are also many minor changes, like the possibility to load ETC1 and ETC2 compressed textures, multisampling support for layers and some more properties to tune font handling.

QML Support for Enum and InstanceOf Type Checks

Qt 5.10 also brings some interesting language improvements for QML. First of all, it is now possible use enum properties in QML. Up until now, this was only possible with C++ types.

// MyText.qml
import QtQuick 2.0

Text {
  enum MyEnum {
    Normal,
    Heading
  }
    
  property int textType: MyText.MyEnum.Normal
    
  font.bold: textType == MyText.MyEnum.Heading
  font.pixelSize: textType == MyText.MyEnum.Heading ? 24 : 12
}

// Main.qml
import VPlayApps 1.0

App {
  MyText {
    textType: MyText.MyEnum.Heading
    text: "I'm a headline."
  }
}

Using enums for your types will help to better structure your QML code and make it more readable. Another improvement is the possibility to use instanceOf for checking QML types at runtime.

import VPlayApps 1.0
import QtQuick 2.0

App {
 // two QML items, used for type checking
 Item { id: testItem }
 Rectangle { id: testRect }

 // function to check wheter an item is a Rectangle
 function isRectangle(item) {
   return item instanceof Rectangle
 }

 // type check example
 Component.onCompleted: {
   console.log("testItem is Rectangle? "+isRectangle(testItem))
   console.log("testRect is Rectangle? "+isRectangle(testRect))
 }
}

This comes in handy when you create QML types at runtime. It is also useful to check types when iterating the QML tree or working with child items of a container.

Qt 5.10 Tech Preview: Pointer Handlers

The next big feature for Qt Quick are the new pointer handlers. Pointer handlers will improve handling complex multi-touch scenarios in the future. Instead of using the Mouse- and TouchArea types, you can now attach handlers for different pointer events.

import VPlayApps 1.0
import QtQuick 2.0
import Qt.labs.handlers 1.0

App {
 Rectangle {
   width: dp(100)
   height: dp(100)
  
   // handle touch or mouse-clicks
   TapHandler {
     onTapped: console.log("Item clicked")
   }
   // make the item rotate- and zoom-able with two-finger gestures
   PinchHandler { }
 }
}

Support for the pointer handler types is still in technology preview. So keep in mind that all types and properties will see bigger changes with the next Qt versions.

Qt 3D Improvements and Qt 3D Studio

The new Qt version extends the Qt 3D capabilities with many features. For example, support for Shader graphs and the technology preview of a skeletal animation system. There’s also a new Scene2D type, which simplifies embedding Qt 3D content in a Qt Quick Scene. It covers most of the main required features then. The focus for Qt 3D is thus moving to improve performance and memory consumption.

Qt 3D Studio is a graphical editor used to create 3D user interfaces. It consists of both a runtime component that is run in your application and a graphical design tool to design and create the UI. While the tool is a standalone application, the runtime can easily be integrated with the rest of Qt.

Qt 5.10 Qt 3D Studio

The runtime and the 3D Studio application are both available under commercial and GPL licensing. For more information about Qt 3D Studio, please have a look at the this post.

Place Custom Shaped Items in Your Scene

Qt Quick also gained a plugin that allows placing custom shaped items into the scene. You no longer require to work with QQuickPaintedItem or the Canvas type to create custom shapes.

V-Play 2.15 - Qt 5.10 Custom Shaped Scene Items

You can now use the new Shape Quick Item, which is backed by either actual geometry or a vendor-specific GPU accelerated path rendering approach. The main benefits are:

  • There is no rasterization involved. This allows shapes that span a large area of high-resolution screens and good-looking animations.
  • The API is fully declarative and all properties can be bound to in QML expressions, or animated using the usual tools of Qt Quick.
  • There are multiple rendering implementations under the hood. For example, a different renderer for NVIDIA GPUs takes advantages of certain OpenGL extensions. Other optimized renderers can thus also be added in the future.

Have a look at the blog post and documentation for more details.

Qt 5.10 also adds many other improvements and fixes for e.g. Qt Core, Qt Widgets or Embedded Systems. Also note that with Qt 5.10, the Qt Networking support for OAuth1 & 2 and Qt Speech features matured into a stable version. They are no longer in tech preview now. See the official release blog for more information. A list of all new features in Qt 5.10 can be found here.

Qt Creator 4.5 Support

The new version includes several UI improvements and better support of platform-specific tools. One of the bigger UI changes is the new File System Navigation Tree.

New File System Navigation Tree

The File System navigation pane is a lot more useful now. It shows a file system tree, where you can select the root directory from a list of useful folders:

  • The “computer” root
  • Your home directory
  • Your default projects directory
  • The base directories of all the projects you have open in Qt Creator

Qt Creator 4.5 File System Navigation Tree

Improved IDE Support for Android

The package manager within Android SDK is no longer available since Android build tools version 25.3.0. There is no UI tool available to manage the installed packages without Android Studio. Because of that, Qt Creator now comes with an own package manager for Android.

Qt Creator 4.5 Android Package Manager

Note: The command line tool of Android SDK cannot update packages on Windows, and fails with JDK 9. This applies to Qt Creator as well, as it depends on the tool. The package manager UI for Android is thus not usable on Windows until a new Android build tools version fixes these issues.

Qt Creator now also provides better information about problems with the installed SDK. For example for missing components or unmet version requirements.

More Additions

Qt Creator 4.5 also comes with better support of latest platform tools for iOS. It fixes the mechanism for switching between iOS Simulator device types with XCode 9.

For Windows, the detection of Visual Studio Build Tools 2017 is also fixed now. For more information about Qt Creator 4.5 see the official release blog.

How to Update V-Play

Test out these new features by following these steps:

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

V-Play Update in Maintenance Tool

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

 

For a full list of improvements and fixes to V-Play in this update, please check out the change log!

 

 

More Posts Like This

v-play-2-14-2-how-to-use-vplay-plugins-with-live-reloading

Release 2.14.2: Live Code Reloading with Native Cross-Platform Plugins

v-play-2-14-1-live-reloading-windows-mac-linux-ios-android-qt

Release 2.14.1: Update to Qt 5.9.3 | Use Live Code Reloading on macOS and Linux

v-play-live-reloading-windows-mac-linux-ios-android-qt

Release 2.14.0: Live Code Reloading for Desktop, iOS & Android

 

feature

How to Make Cross-Platform Mobile Apps with Qt – V-Play Apps

One Response

  1. senkal January 25, 2018                    

    Nice Update.
    I am curious if Qt 5.10 has the fixes done in Qt 9.5.4 which was released recently.
    Not sure how many problems were shared between versions.

    1.
    V-PLay Live improvements are really welcome.
    Will test it later and wait for more bugs fixes, if not here, which I am waiting for.
    Weird thing what makes the highlight for me is the Enum support in QML.
    No more readonly property hacks.

    2.
    Didn’t know about that new Android SDK change, sounds like a pain for Qt now to maintain also this(it’s own package manager for Android).

    3.
    Great you did some custom patches on top of the upstream Qt, neat stuff.

    4.
    I am curious a little about the iOS 10.0 minimum(I think most of the users are at least on this version).
    I hope it’s fine, for now, considering how many people don’t want to upgrade to 11.x for known reasons.
    Hopefully Qt will be very pragmatic with the versions support.

Leave a Reply

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