Namespaces

Variants
Actions

Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries over the next few weeks. Thanks for all your past and future contributions.

SipAttributes in MeeGo Qt Quick Components

From Wiki
Jump to: navigation, search

This article explains how to use the MeeGo SipAttributes QML element. This element helps to change the icon and label for the return key on the software keyboard, which is presented to the user when user starts entering some text in a TextField or TextArea.

Article Metadata
Tested with
Devices(s): N950
Compatibility
Platform(s): MeeGo Harmattan
Article
Keywords: Qt Quick Component for MeeGo Harmattan
Created: gaba88 (28 Sep 2011)
Last edited: hamishwillee (13 Jun 2012)

Contents

Whats the Need?

SipAttributes is a small component but it enhances the user experience a lot. Consider the use case of filling details in a registration page.

In Registration page user needs to fill lots of information in a various TextField elements, where each and every time user either needs to press somewhere to take the virtual keyboard out and get the focus on next TextField or directly press the TextField to change the focus on that, which is not good if we see from user experience point of view.

Using SipAttributes and return key press handling we can overcome this: for example if there are three TextFields in one Page, when the first TextField is focused we can change the Return Key to 'Next using SipAttributes and when user clicks on the Next focus goes to next TextField.

Similarly when user fills the last TextField, then some sort of action can also be bound to the Return key instead of binding the action to a button on the view.

Implementation

Implementation is simple, as shown below. Two important things to consider are :

  • Correct properties for the SipAttributes Element.
  • Getting a Signal when return key or action key is pressed in the TextField element.
import QtQuick 1.1 
import com.nokia.meego 1.0
Page {
tools: commonTools
Rectangle{
id:backgroundRect
anchors.fill: parent
color: "black"
SipAttributes {
id:customSipAttributes
actionKeyEnabled: true
actionKeyHighlighted: true
actionKeyLabel: "Next"
}
Column{
id:registrationColumn
anchors.fill: backgroundRect
anchors.topMargin: 20
spacing: 10
Label{
id:headingLabel
width: registrationColumn.width; height: registrationColumn.height/10
text:"Registration Form"
font.pixelSize: 30
color: "white"
}
TextField{
id:firstNameTextField
width: 480; height: 80
platformSipAttributes:customSipAttributes
placeholderText: "First Name"
Keys.onReturnPressed: {
console.log("Return Key Pressed");
lastNameTextField.forceActiveFocus()
customSipAttributes.actionKeyLabel = "Next"
}
}
TextField{
id:lastNameTextField
width: firstNameTextField.width; height: firstNameTextField.height
platformSipAttributes: customSipAttributes
placeholderText: "Last Name"
Keys.onReturnPressed: {
phoneNumberTextField.forceActiveFocus()
customSipAttributes.actionKeyLabel = "Register"
}
}
TextField{
id:phoneNumberTextField
width:firstNameTextField.width; height: firstNameTextField.height
platformSipAttributes: customSipAttributes
placeholderText: "PhoneNumber"
onActiveFocusChanged: {
customSipAttributes.actionKeyLabel = "Register"
}
Keys.onReturnPressed: {
console.log("Write Your Registration Code Here")
phoneNumberTextField.closeSoftwareInputPanel()
}
}
}
}
}

ScreenShots

Screenshots will give us a better idea of what we are doing.

Meego sipattributes 01.png Meego sipattributes 02.png Meego sipattributes 03.png


Summary

By using SipAttributes we can make a MeeGo application more user friendly.

This page was last modified on 13 June 2012, at 10:55.
73 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×