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 gitorious.org

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.