Using TextInput

TextInput allows you to add an editable line to your scene.

A simple TextInput has no real visual background representation. It only presents a cursor indicator and the text to be displayed. The color property defines the text color and the focus property set on true request focus for this element.

import Qt 4.6

Item {
    width: 200
    height: 200

    TextInput {
        id: input
        color: "red"
        text: "Default Text"
        width: parent.width-16; height: 28
        anchors.centerIn: parent
        focus: true
    }
}

The not so good looking example looks like this:

As you can see, its difficult to identify the TextInputs borders. So in the next step we will add a border on the TextInput.

Beautifying

To beautify the scene, we first apply our Background component, developed in an earlier post.
Then we wrap our TextInput in an Item together with a BorderImage, which will provide a more accurate presentation.

The lineedit.sci is defined as this:

border.left: 10
border.top: 10
border.bottom: 10
border.right: 10
source: lineedit.png

and the lineedit.png looks like this:

They define the border of our TextInput. To make it easier to access the TextInput text property we define an alias on the Item level, which references the TextInput’s text property.

import Qt 4.6

Item {
    width: 200
    height: 200

    Background { id: background }
    Item {
        property alias text: input.text
        anchors.centerIn: parent
        width: 180; height: 28
        BorderImage {
            source: "images/lineedit.sci"
            anchors.fill: parent
        }
        TextInput {
            id: input
            color: "#151515"; selectionColor: "green"
            font.pixelSize: 16; font.bold: true
            width: parent.width-16
            maximumLength: 16
            anchors.centerIn: parent
            focus: true
        }
    }
}

The result will look like this:

And looks already much more appealing. As the TextInput is just a QML element it can also take part in any kind of animations and transitions.

Additional TextInput allows you to set an input mask and validators and redefine the cursor displayed.

Also in this example we could extract a component. This is handled in a following post.