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

By Alex December 3, 2019

Felgo 3.3.0 adds support for Qt 5.13.2 and Qt Creator 4.10.2, which brings many features and improvements and fixes. On top of that, you get access to a lot of new APIs and theming options on all supported platforms. Check out a new Jira time tracker demo application, that shows how to use several of the new APIs.

Migration Hints (Android Platform)

The new Qt version 5.13.2 requires an increase of the minimum SDK version to 21. Google requires the target SDK version set to 28 for submission to the Play Store. The new versions required in the AndroidManifest.xml file of your projects are:

  • android:minSdkVersion=”21
  • android:targetSdkVersion=”28

If you are interested, you can check out the full Qt changelog of this new version in the official Qt docs.

New Jira Tima Mini Demo App

This new 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

New Features and APIs with Felgo 3.3.0

Improvements to Desktop Hover effects and Responsiveness

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.

Improved AppTextField with New APIs

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:

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

Display Options of Navigation Drawer and Sidebar Option on Desktop

You can use the new property Navigation::drawerInline to display the navigation drawer inline with the content and not as an 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.

You can add your logo to the navigation drawer now, with the Navigation::drawerLogoSource, Navigation::drawerLogoBackgroundColor and Navigation::drawerLogoHeight properties.

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.

This example lets you play around with the new display options:

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"
        }
      }
    }
  }
}

Better Theming Support for Dialogs

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

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

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

New TextFieldRow Component for Basic Input Forms

Use the new TextFieldRow component 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
            }
          }
        }
      }
    }
  }
}

Content Padding Theming Property and Helper for Cleaner Layouts

The new Theme::contentPadding property helps you streamline your layouts easier and match your content paddings with the overall app layout.

The Page offers a new Page::contentPaddingAnchorItem item that can be used to add default padding to your page content. 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
          }
        }
      }
    }
  }
}

More Features, Improvements and Fixes

Felgo 3.3.0 includes many more features, for example:

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

How to Update Felgo

Test out these new features by following these steps:

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

Update Felgo

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

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

 

 

 

More Posts Like This

Release-3-2-0-Qt-5123-EcmaScript7-QtCreator-482
Release 3.2.0: Update to Qt 5.12.3 with ECMAScript 7, Subscriptions, Image Picker and Qt Creator 4.8.2

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


Android 64-Bit Support with Qt and Felgo Cloud Builds

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