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.

Number Lock Dialog using Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to create a number lock dialog using Qt Quick.

Article Metadata
Code Example
Installation file: Media: MenuLockQML.sis
Tested with
Devices(s): N8 (Nokia Belle)
Compatibility
Platform(s): Symbian^3 OS
Symbian
Platform Security
Signing Required: Self-Signed
Article
Keywords: Tumbler, Dialog
Created: somnathbanik (10 Apr 2014)
Last edited: hamishwillee (11 Oct 2012)

Contents

Introduction

In this article we will create a number lock dialog using QML Tumbler Element. We will use this number lock dialog to lock a particular screen or feature of the application, it doesn’t block the whole application.

Scenario

Let’s say we have an application which has facebook, location, youtube, news features all in one app. If my friends take my device and use this application, I need to make sure that I am logged out from my facebook account, cause I don’t want anyone to get into my facebook chat. On the other hand if I am offline from facebook I will not receive any chat message from my friends instantly and they might not ping me as I am offline. To overcome this, what if we create a password dialog that will prompt up when ever we try to open any menu or page. If and only if user enters the correct password the next page will come up. The same as be done in this scenario, we can add the password lock dialog in the facebook page, so that while trying to open the facebook it will ask for the password. Whereas the other features of the app will be up and running as usual.

Implementation

Let’s create an empty QML project. We create two pages the MainPage.qml and SecondPage.qml. We add a Button on the MainPage.qml which takes me to the SecondPage.qml. In SecondPage.qml we have added an option to set password to the page. When we set a password for the SecondPage.qml, next time we click on the Button on the MainPage.qml it will pop up a number lock dialog. User needs to match the numbers to get into the SecondPage.qml To make the number lock dialog we use CommonDialog to create the dialog. We add three TumblerColumn Element with numeric values from 0-9

CommonDialog{
id:lockDialog
}
TumblerColumn {
id: column1
selectedIndex: 0
items: numberList
}
TumblerColumn {
id: column2
selectedIndex: 0
items: numberList
}
TumblerColumn {
id: column3
selectedIndex: 0
items: numberList
}
ListModel {
id: numberList
ListElement { value: "0" }
ListElement { value: "1" }
ListElement { value: "2" }
ListElement { value: "3" }
ListElement { value: "4" }
ListElement { value: "5" }
ListElement { value: "6" }
ListElement { value: "7" }
ListElement { value: "8" }
ListElement { value: "9" }
}
Tumbler {
id:tumblerNumberLock
columns: [column1,column2,column3]
onChanged:{
textError.state ="hide";
textError.text = "";
}
} // end of number

To get the complete number lock component please download the LockDialog.qml file from source code. In SecondPage.qml we add a CheckBox which gives an option to set and un-set a password for the page.

CheckBox {
id: checkBox
text: checkBox.checked ? "Password on" : "Password off"
onClicked: {
switchOnOff();
}
}

If the CheckBox is checked it opens up a dialog to set the password for the page, if it is unchecked it clears the password from the database.

function  switchOnOff()
{
if(checkBox.checked)
{
passDialog.launchDialog();
}
else
{
Storage.setKeyValue("numberlock", "");
}
}

The password dialog is also being created using CommonDialog Element.

CommonDialog{
id: passDialog
titleText: qsTr( "Set Password" )
property string password: ""
property int minPassChar: 3
//launch password dialog
function launchDialog()
{
password = ""
textPass.errorHighlight = true;
open()
}
//close password dialog
function cancelDialog()
{
password = "";
textPass.text = "";
checkBox.checked = false;
// close();
reject();
}
//show error message on the password dialog
function showError(aError)
{
textError.text = aError;
textError.state = "show";
textPass.errorHighlight = true;
}
content: Item {
id: content
height:100
width: parent.width
anchors.top: parent.top
Column{
id:contentColumn
anchors.fill: parent
spacing: platformStyle.paddingMedium
anchors.leftMargin: platformStyle.borderSizeMedium
anchors.topMargin: platformStyle.borderSizeMedium
anchors.rightMargin: platformStyle.borderSizeMedium
TextField {
id: textPass
anchors.left: parent.left
anchors.right: parent.right
echoMode:TextInput.Normal
placeholderText: qsTr( "Enter password" )
validator: IntValidator{bottom: 0; top: 999;}
onTextChanged: {
textError.state ="hide";
textError.text = "";
textPass.errorHighlight = false;
}
}
Text {
id: textError
text: qsTr("")
anchors.horizontalCenter: contentColumn.horizontalCenter
color: platformStyle.colorNormalLight
font.family: platformStyle.fontFamilyRegular
font.pixelSize: platformStyle.fontSizeSmall
state: "hide"
states: [
State {
name: "show"
PropertyChanges { target: textError; height: textError.paintedHeight; visible:true; }
},
State {
name: "hide"
PropertyChanges { target: textError; height: 1; visible:false; }
}
]
}
}
}
buttons: Item {
id: buttonItem
width: parent.width
height: buttonRow.height+20
Row{
id:buttonRow
anchors.centerIn: parent
spacing: platformStyle.paddingLarge
ToolButton{
id:buttonLogin
text: qsTr("Ok");
onClicked: {
if(textPass.text.length === 3)
{
password = textPass.text;
accept();
}
else
{
showError("Password should be of 3 numbers");
}
}
}
ToolButton{
id:buttonCancel
text: qsTr("Cancel");
onClicked: {
cancelDialog();
}
}
}
}
}

To get the complete password dialog component please download PasswordDialog.qml file from the source code.

Summary

This number lock dialog can also be used in menus where we have multiple menus and want to black a particular one. This dialog gives us an option to maintain our privacy. I have used these dialogs and created a simple page navigation application called File:MenuLockQML.zip

Source Code

This page was last modified on 11 October 2012, at 01:20.
72 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.

×