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.

About these ads

One response to “Designing a Login View

  1. It’s very trouble-free to find out any topic on net as compared to books, as I found this post at this web page.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s