Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Handle User Input

There are various forms of user input. The most important options are covered in this document.

Touch Input from User

This is covered in the following doc: Handle Touch and Gestures in Your App

Text Input from User

Depending on the type of text, and how it fits your UI/UX, Felgo offers different components to get text input from the user.

Date Input from User

For selecting a date, you can display the native date picker dialog with NativeUtils::displayDatePicker.

Input from Device Sensors

This is covered in the following doc: Use Native Device Sensors

Other Inputs

The NativeUtils offer a lot more native features, like picking images from the gallery, or taking photos with the camera.

How do I set a placeholder for the text field?

Input controls like AppTextInput or AppTextField own a placeHolderText property, which you can use for your placeholder text.

 import Felgo 3.0
 import QtQuick 2.0

 App {
   Page {

     // remove focus from textedit if background is clicked
     MouseArea {
       anchors.fill: parent
       onClicked: textEdit.focus = false
     }

     // background for input
     Rectangle {
       anchors.fill: textEdit
       anchors.margins: -dp(8)
       color: "lightgrey"
     }

     // input
     AppTextInput {
       id: textEdit
       width: dp(200)
       placeholderText: "What's your name?"
       anchors.centerIn: parent
     }
   }
 }

How do I show validation errors?

The text input components provide predefined validators that you can use, they are called inputMethodHints.

You can also add custom validators to restrict the accepted input to a certain input type or expression. Input that does not match the validator is not accepted. To do custom validations and show errors for accepted input, you can add simple checks and control the visibility of errors with property bindings:

 import Felgo 3.0
 import QtQuick 2.0

 App {
   // background for input
   Rectangle {
     anchors.fill: textInput
     anchors.margins: -dp(8)
     color: "lightgrey"
   }

   // input
   AppTextInput {
     id: textInput
     width: dp(200)
     placeholderText: "What's your name?"
     anchors.centerIn: parent

     // only allow letters and check length
     validator: RegExpValidator {
       regExp: /[A-Za-z]+/
     }
     property bool isTooLong: textInput.text.length >= 6
   }

   // show error if too long
   AppText {
     text: "Error: Use less than 6 letters."
     color: "red"
     anchors.top: textInput.bottom
     anchors.topMargin: dp(16)
     anchors.left: textInput.left
     visible: textInput.isTooLong
   }
 }

More Frequently Asked Development Questions

Find more examples for frequently asked development questions and important concepts in the following guides: