Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
New Developer
tushar886
Posts: 62
Registered: ‎08-15-2013
My Device: blackberry curve 9630
My Carrier: Airtel

Navigation Pane back button functionality

I have written a login screen with the help of navigation pane .

 

I have a problem with back button how will  i implement the back button functionality so that when i press the back button its redirected to main login screen with username and password cleared off.

 

Currently there is back button coming as a part of navigation pane but username and password are not getting cleared off from the text labels.

 

The qml file is as below:-

 

import bb.cascades 1.0
NavigationPane {
id: navigationPane
Page {
titleBar: TitleBar {
title: "AES Crypto"
}
Container {
Label {
text: "Please log in"
}
TextField {
id: username
hintText: "User Name"
}
TextField {
id: password
hintText: "Password"
inputMode: TextFieldInputMode.Password
}
Button {
text: "Log in"
onClicked: {
/* if (email.text == "" || password.text == "") {
//display error
alertDialog.show();
return;
}
*/
if (app.checkLogin(username.text, password.text)) {
navigationPane.push(secondPageDefinition.createObject());
} 
}
}
}
/* actions: ActionItem {
* title: qsTr("Second page")
* ActionBar.placement: ActionBarPlacement.OnBar
* 
* onTriggered: {
* navigationPane.push(secondPageDefinition.createObject());
* }
* }*/
}
attachedObjects: [
/* AlertDialog {
id: alertDialog
//cancelButton : true
okButton : true
alertMessage : "UserName and Password cannot be empty."
titleText : "Login Error AES Crypto"
onOk: { 
alertDialogLabel.text = alertMessage; //"You clicked on OK button"; 
}
onCancel: {
alertDialogLabel.text = "You clicked on CANCEL button"; 
}
onCustomButton: {
alertDialogLabel.text = "index: " + index + " label: " + label + " context: " + context; 
}
},*/
ComponentDefinition {
id: secondPageDefinition
source: "main.qml"
Page {
Container {
}
}
}
]
onPopTransitionEnded: {
page.deleteLater();
}
}

 

Please suggest further

 

Thanks & Regards,

Tushar

Please use plain text.
Developer
greenmr
Posts: 862
Registered: ‎03-20-2013
My Device: Red LE Developer Z10
My Carrier: Fido

Re: Navigation Pane back button functionality

You can override the default back button functionality quite easily.

 

Page {
    paneProperties: NavigationPaneProperties {
        id: navPaneProperties
        backButton: ActionItem {
            id: backButtonActionItem
            title: qsTr("Cancel")
            imageSource: "asset:///images/action-cancel.png"
            onTriggered: {
                // ---Do your stuff

                // ---Pop this page off the NavigationPane stack
                navPane.pop();
            }
        }
    }
}

 


tushar886 wrote:

I have written a login screen with the help of navigation pane .

 

I have a problem with back button how will  i implement the back button functionality so that when i press the back button its redirected to main login screen with username and password cleared off.

 

Currently there is back button coming as a part of navigation pane but username and password are not getting cleared off from the text labels.

 

The qml file is as below:-

 

import bb.cascades 1.0
NavigationPane {
id: navigationPane
Page {
titleBar: TitleBar {
title: "AES Crypto"
}
Container {
Label {
text: "Please log in"
}
TextField {
id: username
hintText: "User Name"
}
TextField {
id: password
hintText: "Password"
inputMode: TextFieldInputMode.Password
}
Button {
text: "Log in"
onClicked: {
/* if (email.text == "" || password.text == "") {
//display error
alertDialog.show();
return;
}
*/
if (app.checkLogin(username.text, password.text)) {
navigationPane.push(secondPageDefinition.createObject());
} 
}
}
}
/* actions: ActionItem {
* title: qsTr("Second page")
* ActionBar.placement: ActionBarPlacement.OnBar
* 
* onTriggered: {
* navigationPane.push(secondPageDefinition.createObject());
* }
* }*/
}
attachedObjects: [
/* AlertDialog {
id: alertDialog
//cancelButton : true
okButton : true
alertMessage : "UserName and Password cannot be empty."
titleText : "Login Error AES Crypto"
onOk: { 
alertDialogLabel.text = alertMessage; //"You clicked on OK button"; 
}
onCancel: {
alertDialogLabel.text = "You clicked on CANCEL button"; 
}
onCustomButton: {
alertDialogLabel.text = "index: " + index + " label: " + label + " context: " + context; 
}
},*/
ComponentDefinition {
id: secondPageDefinition
source: "main.qml"
Page {
Container {
}
}
}
]
onPopTransitionEnded: {
page.deleteLater();
}
}

 

Please suggest further

 

Thanks & Regards,

Tushar






Developer of Built for BlackBerry certified multiFEED RSS/Atom feed reader and aggregator.
Please use plain text.
BlackBerry Development Advisor
sabdelsayed
Posts: 249
Registered: ‎08-17-2012
My Device: BlackBerry Z10 and Q10
My Carrier: Bell

Re: Navigation Pane back button functionality

[ Edited ]

Hi tushar886,

 

You can listen to the popTransitionedEnded() signal of the NavigationPane: http://developer.blackberry.com/native/reference/cascades/bb__cascades__navigationpane.html#function...

 

And in the slot react to it by clearing the TextFields by calling the TextFields' setHintText method to reset their content:

http://developer.blackberry.com/native/reference/cascades/bb__cascades__textfield.html#function-seth...

@SamarAbdelsayed

Did this answer your question? Please accept post as solution.
Please refrain from posting new questions in solved threads.
Found a bug? Report it using the Issue Tracker
Please use plain text.