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:

Test this example on your mobile phone now! Run This Example
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.

Test this example on your mobile phone now! Run This Example
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:

Test this example on your mobile phone now! Run This Example
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.

Test this example on your mobile phone now! Run This Example
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.

Test this example on your mobile phone now! Run This Example
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.

Test this example on your mobile phone now! Run This Example
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