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.
Hi,
I’ll be interested to hear how using qml you would be to submit a form like this one to a remote web server.
For full AJAX-like functionality, how can the qml function that submits the form then recieve a .qml file in response and render this within one of its qml objects
Something like this would be good:
onclick: { QAjax { Qurl: 'http://server/file' Data: { username: text.username; password: text.password } OnSuccess { my_rectangle.qml_content: response.content } } }