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

Felgo 3.3.0 adds support for Qt 5.13.2 and Qt Creator 4.10.2, which brings many features and improvements 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

The post Release 3.3.0: Update to Qt 5.13.2 and Qt Creator 4.10.2, Jira Tima App Demo appeared first on Felgo.

Parsing XML with Qt: Updates for Qt 6

It's been a while since our last posts in regards to parsing XML documents with Qt. I'd like to give some updates about the expected changes in the upcoming releases. But first, let's summarize what Qt currently provides for reading and writing XML documents.

The Qt Marketplace has landed!

Today marks a very special day for us as we are finally able to present you the Qt Marketplace. We have been working very hard for the past year to build the marketplace and to onboard the first set of fantastic extensions with the help of our great community. Huge thanks for everyone involved in the process! To make this our joint effort for #Qt we would like to invite you for populating it with all the fantastic extensions including Qt Creator Plugins, tools and modules … that has been done with Qt.

How to set up TravisCI for Qt apps

When I started GitQlient and GitQlientPlugin one of the first things I wanted was to setup a CI environment. The main reason is, of course, to have a system that checks a clean build of both projects.

The other reason, however, is that I think its a quite nice environment to deploy your build in GitHub. Locally, your system can be messed up with versions and old objects that are not cleared, etc. By doing it in this way, one is allowed to have a clean build in a really controlled environment. In addition, you can run as much versions and they are deploy independently.

How to set up TravisCI for Qt apps first appeared on My C++ & Qt blog - Cesc M..

NEW: Qt / QML introduction tutorial release

We are proud to announce that the release of the first module of our tutorials on YouTube was very well received. Since the release, we got a lot of positive feedback and most of all: no thumbs down. We would like to thank all of you for watching, liking, commenting and supporting our videos.

Today, we see more and more self-guided and remote learning via videos online. To that end, we have been working for more than 6 months now to capture our regular Qt/QML Introduction training on video.

Qt/QML introduction series

We are currently looking into adding subtitles in various languages to make our content accessible to a larger number of countries. Though it will likely take quite some time before it will be ready for release, do let us know if you are interested in subtitles in your region.

The content released in these videos is part of the actual slides and tips we give during our regular in-person trainings, minus the exercises, their solutions and of course the interaction with the trainer.

We are planning to release 8 other modules over the next year to complete this series on Qt / QML Introduction training and the next one is planned for the end of December 2019 – beginning of January 2020.

Subscribe to the channel and don’t miss out on any new videos coming out: www.youtube.com/kdabtv

If you can’t wait or would like a Qt/QML Introduction training customized to your needs, including the exercises, contact us for an on-site training for you and your team: info@kdab.com

The post NEW: Qt / QML introduction tutorial release appeared first on KDAB.

Using QtWidgets in QML

TL;DR: Yeah, it's somewhat possible. The somewhat official story goes like this: You write your desktop application in QtWidgets, and an embedded UI with QML. QtWidgets offers an extensive set of controls, and QML is good for rapid prototyping and easily embedding fancy stuff like animations, because of its hardware-rendered backends like OpenGL. Porting a QtWidgets app to QML can be a huge task, and sometimes it might not be feasible at all, be it due to time constraints or due to some widgets missing their pendant in the QML world. Thus embedding QtWidgets in QML might be an option, i.e. writing some controls in QML and some in QtWidgets, and maybe gradually rewrite widgets in QML (or leave some widgets as they are). Here is a screenshot of a prototype: ... and here is the corresponding code (LGPLv2): https://github.com/edelhirsch/widgetitem The idea to do that is not really new, however there did not seem to be code publicly available for this. The code is using a QQuickPaintedItem in QML to draw the widget with a QPainter; a caveat of using widgets in QML is that you often need to call update() by hand once the widget has changed. Performance-wise, bigger widgets take several milliseconds to draw, and since the code always updates the whole widgets, it might not be possible to always get a frame rate of 60 frames per second, depending on the use case. For a rather static UI without animations it might still be good enough though. An alternative to a QQuickPaintedItem would have been to just render to widget to an QImage and use it in a custom QQuickItem which renders to a QSGSimpleTextureNode or similar. So far the code is just a prototype; feel free to let us know your suggestions, or just file a merge request!

Qt World Summit 2020 | Save the Date & Call for Speakers

We are already looking forward to the largest Qt gathering of next year, Qt World Summit 2020 on May 12-14 in Palm Springs, California, USA.  

As we celebrate 25 years of Qt at our 5th Qt World Summit conference, we consider the path that's made us the flourishing Qt ecosystem that we are today, and plan a course forward to a thriving future. Please sign up here to stay informed in order to receive email updates as we’ll be announcing more details and opening up registrations in January. 

Qt World Summit 2020 Call for Speakers is now open

We want to share your latest developments with the world and aim to build a versatile agenda that will showcase topics of interest for a wide audience across industries, and we would like you to be part of that agenda.

If you have any new ideas or proven best practices you would like to share with the Qt World Summit attendees, we encourage you to submit them.

Important dates

  • Submit your topic suggestion(s) by January 20, 2020.
  • The authors of accepted topics will be informed in February.
  • The list of accepted topics will be publicly available in February.
  • Full presentations/slide submissions must be made by April 10, 2020.

Topics 

  • Phases in the software development cycle and the role of Qt in the:
    • Developer experience 
    • User experience 
    • Customer experience 
  • Tools, methods, and processes for embedded devices
  • Application development and Qt enabling application ecosystems
  • Data visualization, data analytics, and informational interfaces
  • Creating 3D computer animations, modeling, simulation, and rendering
  • Platforms, connectivity, and portability
  • Real-world or industry-specific solutions built with Qt

Did we miss something? The latest advancements and improvements in Qt are also welcome as always. You can, of course, submit presentations on any topic related to Qt.

Session length

There are three different session lengths this year:

  • 20 minutes + 5 minutes Q&A
  • 50 minutes + 5 minutes Q&A (limited availability)
  • 80 minutes + 5 minutes Q&A (only a few spots available)

Program committee and selection criteria

The Program committee includes members from The Qt Company and Qt Partners. The committee will review all submissions and jointly select presentations for the Qt World Summit based on the submitted abstract.

Here are some tips for writing a good abstract:

  • Show a clear intent and purpose for your talk
  • Make clear what the value of the talk is for the intended audience
  • Keep in mind the event’s themes and focus areas
  • Offer something unique and unexpected, yet relevant is to the event’s focus areas

The committee will make its decision based on the themes of the event. The committee will also make sure to cover a wide range of interesting topics.

Know your audience

The Qt World Summit attracts people from all corners of the Qt community. On previous years’ events, we have had attendees from over 40 different countries representing over 20 industries. Typically, some 70% are developers and 20% executives, managers and team leads.

What's in it for you

As a speaker, you will receive a free ticket to attend the Qt World Summit Conference Days. Being a speaker is a fantastic opportunity to spread your message among a community of industry leaders and software developers. We will record and publish many of the presentations online, so your talk will reach an audience beyond Qt World Summit attendees. The material from your talk will also be made available to all the attendees after the event.

Submit your talk today!

If you have any questions, please contact qtws@qt.io 

For more information and to stay informed about Qt World Summit 2020, please sign up at the Qt World Summit 2020 event page.

Qt 5.12 Upgrade in webOS OSE (Open Source Edition)

In September 2019, LG Electronics announced a strategic partnership with The Qt Company (Qt) that the two organizations will collaborate on multiple layers, including collaboration on platform development as well as co-marketing activities to build a thriving webOS OSE community and move beyond to a new vertical. As the first step to such an ambitious plan, webOS OSE is upgrading its Qt components to the latest Long Term Support (LTS) version, Qt 5.12 LTS.

GitQlient: Preparing the first version

In the last post I shown all the major widgets that forms GitQlient, at least in their original design. After a month and a half of intense work, I've made some significant changes in the UI but also in the functionality.

For the first version I wanted to improve the UI and make GitQlient as stable as possible. However, I couldn't resist to add all the features that I was missing for my day to day work. So after this time GitQlient no only had the functionality I showed so far. Here is what it's new and will be part of the version 1.0.0.

The next post: about the release and something else!

GitQlient: Preparing the first version first appeared on My C++ & Qt blog - Cesc M..

SimpleMailQt v2.0.0-beta1

On my last post I talked about the new async simplemail-qt API that I wanted to add, yesterday I finished the work required to have that.  

SMTP (Simple Mail Transfer Protocol) as the name says it's a very simple but strict protocol, you send a command and MUST wait for the reply, which is rather inefficient but it's the way it is, having it async means I don't need an extra thread (+some locking) just to send an email, no more GUI freezes or an HTTP server that is stalled.  

The new Server class has a state machine that knows what reply we are waiting, and which status code is the successful one. Modern SMTP servers have PIPELING support, but it's rather different from HTTP PIPELING, because you still have to wait for several commands before you send another command, in fact it only allows you to send the FROM the RECIPIENTS email list and DATA commands at once, parse each reply and then send the mail data, if you send the email data before you are allowed by the DATA command the server will just close the connection.  

So in short we only save a few (but important) round trips, this new version also includes support for the RESET command, this is useful for example when you have a long list of emails, and some of them have malformed RECIPIENTS email, you will get an error for the command but instead of closing the connections and start the long SMTP handshake you just RESET and try to send the next email.  

Cutelyst master is already using this new class if you set ViewEmail::setAsync(true);. With that set you won't get the SMTP mail queued reply but will still be able to process more HTTP requests while waiting for the SMTP reply.  

I plan to do a 2.0.0 stable release in the following weeks so if you use this library please test and suggest API changes that you may like.  

Have fun!  

https://github.com/cutelyst/simple-mail/releases/tag/v2.0.0-beta1  

KDDockWidgets

KDDockWidgets is an effort by KDAB to provide an advanced docking system for Qt.

Throughout the years KDAB has contributed and funded QDockWidget development. Sadly, this wasn’t without pain: each change took many days to implement and an equal amount of time to fix regressions.

QDockWidget mixes GUI code with logic/state in a spaghetti manner, making it very hard to move forward. In hindsight, what caused this complexity was the combinatorial explosion of options it supports (which seem unneeded to me, as most people just want to use all the features). That, times 3 platforms, which have different nuances, times 2, since code behaves drastically different if you have animations enabled or not.

KDDockWidgets was born from my need to preserve sanity after having worked in two projects that needed extensive customization. One where we tried to work directly upstream but the regression rate ended up being too much. And another one where I took the route of using private API, fake mouse events and event filters, which seemed like a good idea at first, but ended up being a world of pain. Furthermore, our customers were getting more creative with their requests, so it was clear we needed a better docking framework.

Say hello to KDDockWidgets

KDDockWidgets in action

The immediate differences you can spot are the very precise docking indicators and the total freedom in terms of docking areas.

Here’s a comprehensive list:

  • You can now dock into the center or simply remove the concept of “central widget”
  • You can have tabs in the center
  • Nesting dock widgets in a floating window and docking that group back to main window works (Olivier Goffart from Woboq in collaboration with KDAB implemented the nesting part in QDockWidget for Qt 5.10, but dropping the floating window back to main window was too difficult to finish.)
  • Docking to any main window. The main window is no longer the “owner” of a dock widget
  • Separated GUI code from logic, so we can easily provide a QtQuick backend
  • Exposes inner helper widgets so the user can customize them or provide his own
  • 140+ tests, including some which send fake mouse events to test GUI DnD operations
  • A fuzzer to help find bugs
  • Allows the user to implement different types of docking indicators
  • Eventually: QtQuick support

Moreover, it intends to be a framework, so you can easily override interfaces to provide custom behaviour and appearance.

KDDockWidgets is Open Source (GPLv2 & GPLv3). Alternatively contact KDAB for other licensing options if you need it in proprietary software.

What’s next ?

In the last months we’ve been having fun using KDDockWidgets in a couple of customer projects already, incorporating valuable feedback into the API. The next step is getting official documentation and source/binary-compat guarantees, in preparation for the 1.0 release. I also hope to gather feature requests from the community, so feel free to comment here or drop me an e-mail.

The post KDDockWidgets appeared first on KDAB.

Qt World Summit 2019 & Open-Source Conference App

The Qt World Summit 2019 in Berlin is around the corner: it will take place from November 4th – 6th in bcc, the Berlin Congress Center right at Alexanderplatz. The Qt World Summit is the biggest Qt conference of the year and a great way to connect with other Qt developers to share experiences and learnings, and to get the latest news about state-of-the-art Qt development, best practices and the upcoming Qt roadmap.

Meet Felgo at the Qt World Summit 2019

If you have any questions or want to get the latest news on roadmap and upcoming features, make sure to visit us at the Felgo booth! 6 Felgo employees will join the conference, along with new showcases and merchandising items.

The Felgo founders, Christian Feldbacher and Alex Leutgöb, will be holding presentations:

  1. How to Improve Productivity & Efficiency with Qt on Mobile, Desktop & Embedded – on Tuesday from 15:00-15:30 in room B05
  2. Aim High: How to Make Top Quality Qt Applications – on Wednesday from 16:00-16:30 in room B09

You can also get in touch with us using the Business Meet feature in the conference app – simply search for “Felgo” to start a chat.

Official Qt World Summit Conference App

A great conference like this deserves a great conference app. That’s why we developed the official QtWS 2019 app!

You can now download the app for iOS & Android here:

  

 

The conference app was built with Felgo and Qt / QML. The app is optimized for a native user experience and adapts automatically on phones and tablets, with just a single code base:

Best of all, we’ve made this app open-source on Github so you can use it as a starting point for your own app. Or re-use the code to create your own mobile app.

 

Get the Conference App Source Code on GitHub

GitHub - Qt World Summit 2017 app

Qt World Summit App Highlights

The conference app allows you to:

  • Browse the QtWS 2019 conference schedule.
  • See detailed information for all talks and speakers.
  • Manage your personal agenda by adding talks to your favorites.
  • Connect with other conference participants, chat & schedule meetings.
  • Get notified of upcoming favorited sessions with push notifications.
  • Full-text search of all speakers & talks.
  • Auto-cache the conference data & images locally – the app also works offline.
  • Gamification elements (a leaderboard) award you for starting the app and for favoring and rating of talks.
  • Customize the UI and switch between different native styles and colors.
  • Synchronize your agenda across multiple devices & platforms: simply connect your Facebook account in the app and your agenda is automatically synced between smartphones & tablets on both iOS & Android.
  • Rate talks after they are over to help The Qt Company choose the best speakers and most demanded topics in the upcoming years.

We are Looking Forward to Meeting You

You can meet us at the FELGO booth at the Qt World Summit in Berlin and get all of your Felgo questions answered! Make sure to take advantage of this opportunity to find out the best way to create cross platform apps in a personal meeting.

 

 

This might also be interesting for you

QML Tutorial: How to Create Native Cross Platform Apps with Qt and Felgo | Free Udemy Course

udemy-qml-tutorial-teaser

Continuous Integration and Delivery (CI/CD) for Qt and Felgo

 

The post Qt World Summit 2019 & Open-Source Conference App appeared first on Felgo.

GitQlient: The new UI (Part II)

In the previous entry of this series of posts I introduced the change I planned to transform QGit in a new app and plugin called GitQlient.

In the old QGit there was a mix of UI files, in place widgets and classes that handle data and return widgets because... why not? A mess. For GitQlient, I separated the UI by scopes and I changed the main window for a QWidget so I can easily integrate it in the plugin.

GitQlient: The new UI (Part II) first appeared on My C++ & Qt blog - Cesc M..