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.

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.

Summary

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