Designing a Login View

Now we have all building blocks together to create a login view with username and password field and 2 buttons, one for login the other one for login as guest.

The source code of this example called ex1 is now available from my qml-posts repository at

This is a sketch I made for the login view.

As you can see the structuring is made up of nested Row and Column elements.

import Qt 4.6

Rectangle {
  width: 640
  height: 480
  Background { anchors.fill: parent }
  Column {
    anchors.centerIn: parent
    spacing: 16
    Column {
      spacing: 4
      MediumText { text: "Username" }
      LineInput { focus: true }
    Column {
      spacing: 4
      MediumText { text: "Password" }
      LineInput { input.echoMode: TextInput.Password }
    Row {
      spacing: 16
      anchors.horizontalCenter: parent.horizontalCenter
      Button { text: "Login"; onClicked: console.log("login") }
      Button { text: "Guest"; onClicked: console.log("guest") }
  • MediumText is just a Text element with predefined formatting, so I don’t have to repeat is in the code.
  • The LineInput is a TextInput wrapped with a BorderImage for pleasure.
  • The background is a small image tiled over the parents area.

These components where discussed in earlier posts.

Here the screenshot of the result:

What currently is not working is the KeyNavigation. For example in the user name text input element, pressing down should move the focus to the password input. QML is in general supporting this with the KeyNavigation attached property. The problem i’m facing is only how I defined the reusable LineInput component, does not allow me to access the attached property KeyNavigation of the text input.

If you know a workaround, please let me know. Thanks.

One thought on “Designing a Login View”

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s