Access properties from different qml tabs within same tabbedpane - qt

I have my main.qml that contains a tabbedpane, in which, it has two tabs: tab1 and tab2.
I would like to be able to change the text from one tab to another.
If I do the same with navigationpane it works but not with tabs apparently. Is there any way I could share information between them? I've tried with signals in c++ but it doesn't work either(I guess it doesnt know the instance ?).
Any suggestion is appreciated.
main.qml:
TabbedPane {
Tab {
Tab1 {
}
}
Tab {
Tab2 {
}
}
attachedObjects: [
Tab1 {
id: tab1
},
Tab2 {
id: tab2
}
]
}
Tab1.qml:
Page {
property alias labeltab1: labeltab1
Container {
Label {
id: labeltab1
text: "label tab1"
}
Button {
id: buttontab1
text: "tab1"
onClicked: {
tab2.labeltab2.text = "This is coming from tab1"
}
}
}
}
Tab2.qml:
Page {
property alias labeltab2: labeltab2
Container {
Label {
id: labeltab2
text: "Label tab2"
}
Button {
id: buttontab2
text: "tab2"
onClicked: {
tab1.labeltab1.text = "This is coming from tab2"
}
}
}
}

I guess it's actually simpler with tabs and I found my own solution.
I noticed that momentics cannot detect that "thepane" is linkable and will not suggest its name when typing it from one of the tab. Also, a property with colon will automatically bind the value afterit, as: text: thepane.mystring
When clicking on buttons, it changes the value of mystring thus changing both labels texts.
main.qml
TabbedPane {
id: thepane
property string mystring
Tab {
Tab1 {
}
}
Tab {
Tab2 {
}
}
}
Tab1.qml
Page {
Container {
Label {
id: labeltab1
text: thepane.mystring
}
Button {
id: buttontab1
text: "tab1"
onClicked: {
thepane.mystring = "This is coming form tab1"
}
}
}
}
Tab2.qml
Page {
Container {
Label {
id: labeltab2
text: thepane.mystring
}
Button {
id: buttontab2
text: "tab2"
onClicked: {
thepane.mystring = "This is coming from tab2"
}
}
}
}

Thank you for your idea.
I changed the code. Now it is better for me, maybe for other one people :)
main.qml
TabbedPane {
id: main_Pane
property string action_1
property string action_2
Tab {
Tab1 {}
}
Tab {
Tab2 {}
}
}
Tab1.qml
Page {
Container {
Label {
text: main_Pane.action_1
}
Button {
text: "Button 1"
onClicked: {
main_Pane.action_2 = "This is action form Tab1"
}
}
}
}
Tab2.qml
Page {
Container {
Label {
text: main_Pane.action_2
}
Button {
text: "Button 2"
onClicked: {
main_Pane.action_1 = "This is action from Tab2"
}
}
}
}

Related

Get value or property from Stackview item when it popped in Qml

Is there any way to get value or property from Stackview item when it popped in Qml?
I want to get the edited name in 'EditProfile.qml' when it popped to 'Profile.qml' in the below project.
main.qml
StackView {
id: stackView
Component.onCompleted: push('Profile.qml', {name : 'David'})
}
Profile.qml
Page {
property string name: ''
Column {
Text {
text: 'name' + name
}
Button {
text: 'Edit'
onClicked: stackView.push('EditProfile.qml', {name : name})
}
}
}
EditProfile.qml
Page {
property alias name: txtName.text
Column {
TextEdit {
id: txtName
text: name
}
Button {
text: 'Back'
onClicked: stackView.pop()
}
}
}
After reading QT manual carefully, I found the answer. The push function returns the item which is pushed. so:
Profile.qml
Page {
id: root
property string name: ''
Column {
Text {
text: 'name' + name
}
Button {
text: 'Edit'
onClicked: {
var item = stackView.push('EditProfile.qml', {name : name})
item.exit.connect(change);
function change(text) {
item.exit.disconnect(change);
root.name = text;
}
}
}
}
}
EditProfile.qml
Page {
signal exit(var text)
property alias name: txtName.text
Column {
TextEdit {
id: txtName
text: name
}
Button {
text: 'Back'
onClicked: {
exit(txtName.text)
stackView.pop()
}
}
}
}

How change field of reused component in Qml?

I have the following code. I need to set different "model" field for different TableViews. How can i do this?
I need override "model" field for every TableView. It is possible?
// main.qml
ApplicationWindow {
id: window
TabView {
Tab {
title: "Tab 1"
MyTable {}
}
Tab {
title: "Tab 2"
MyTable {}
}
}
}
.
// MyTable.qml
MyTableView {
TableView {
TableViewColumn {
role: "number"
title: "Number"
}
model: MyModel
}
}
The next code is correct but too long.
// main.qml
ApplicationWindow {
id: window
TabView {
Tab {
title: "Tab 1"
TableView {
TableViewColumn {
role: "number"
title: "Number"
}
model: MyModel_1
}
}
Tab {
title: "Tab 2"
TableView {
TableViewColumn {
role: "number"
title: "Number"
}
model: MyModel_2
}
}
}
}
You can set a property alias for the model. First set an id for the TableView then hook up its model.
// MyTable.qml
MyTableView {
property alias model: tableView.model
TableView {
id: tableView
TableViewColumn {
role: "number"
title: "Number"
}
// model: MyModel // redundant in most cases
// unless you want to have a DEFAULT model
}
}
And use model in each MyTable item like so:
// main.qml
ApplicationWindow {
id: window
TabView {
Tab {
title: "Tab 1"
MyTable { model: MyFirstModel }
}
Tab {
title: "Tab 2"
MyTable { model: MySecondModel }
}
}
}

QML - event.modifiers doesn't work when using Menu QML type

in QML when I used Menu QML type, event.modifiers didn't work in Keys.onPressed, but after commenting Menu type it worked. What am I doing wrong? is there any bug related to Menu QML type?
I am using Qt 5.4.0.
Rectangle {
id: main
width: 600
height: 300
Menu {
id: menu
title: "Edit";
MenuItem { text: "Copy";shortcut: "Ctrl+C" }
MenuItem { text: "Paste";shortcut: "Ctrl+V" }
MenuItem { text: "Select" }
MenuItem { text: "Select all";shortcut: "Ctrl+A" }
MenuSeparator { }
MenuItem { text: "Delete";shortcut: "Delete" }
MenuItem { text: "Delete all" }
MenuSeparator { }
MenuItem { text: "Auto arrange" }
}
Keys.onPressed: {
if((event.key === Qt.Key_C) && (event.modifiers & Qt.ControlModifier))
{
console.log("Ctrl+C is pressed")
}
}
MouseArea{
anchors.fill : parent;
acceptedButtons: Qt.LeftButton | Qt.RightButton
onClicked: {
main.focus = true;
if(mouse.button === Qt.RightButton){
menu.popup();
}
}
}
}
Menu is not a visual primitive (QQuickItem), and hence doesn't receive events:
All visual primitives support key handling via the Keys attached property.
The shortcut property that you're currently using is the correct way to provide shortcuts to menus. You can also assign an action.
To respond to a shortcut being triggered, use the triggered signal.

how to send text field values from one qml to another qml page in cascades blackberry

I am new to development on BB cascades. I've created two QML Pages. I want to pass data from one QML Page to another.
I want to pass the values phonenumber(id:phonenumber) and amount ( id:amount) from mobile.qml to payment.qml.
Please anyone help me out. Thank you in advance.
Mobile.qml:
import bb.cascades 1.4
import bb.data 1.0
Page {
onCreationCompleted: {
getData()
getCircle()
}
Container {
background: backgroundPaint.imagePaint
attachedObjects: [
ImagePaintDefinition {
id: backgroundPaint
imageSource: "asset:///images/background.png"
}
]
TextField {
id:phonenumber
hintText: "Enter Phone Number"
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
topMargin: ui.du(3)
// On text change the label text is updated.
input
{
keyLayout: KeyLayout.Text
}
}
TextField {
id:amount
hintText: "Enter Amount"
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
topMargin: ui.du(3)
// On text change the label text is updated.
input
{
keyLayout: KeyLayout.Text
}
}
Button {
id: newButton
horizontalAlignment: HorizontalAlignment.Center
verticalAlignment: VerticalAlignment.Center
topMargin: ui.du(3)
text: "Recharge"
appearance: ControlAppearance.Primary
color: Color.create("#F93249")
onClicked: {
var blogpage = goToWebView.createObject();
navigationPane.push(blogpage);
}
attachedObjects: ComponentDefinition {
id: goToWebView
source: "payment.qml"
}
}
}
attachedObjects: [
ComponentDefinition {
id: newOptionDef
Option {}
}
]
}
payment.qml:
import bb.cascades 1.4
Page {
Container {
background: backgroundPaint.imagePaint
attachedObjects: [
ImagePaintDefinition {
id: backgroundPaint
imageSource: "asset:///images/background.png"
}
]
}
}
Next time please post only code related to problem. As for your problem you can use parent as a proxy to access one item from another one.
For example, assume we have a component:
Page.qml
import QtQuick 2.4
import QtQuick.Controls 1.2
Item {
id:page
width: 200
height: 200
property int callee
function func() {
txt.text = txt.text + " (changed)"
}
Text {
id: txt
anchors.centerIn: parent
text: "click me"
MouseArea {
anchors.fill: parent
onClicked: {
page.parent.proxyFunction(page.callee);
}
}
}
}
and so Item contains several Pages:
import QtQuick 2.4
import QtQuick.Window 2.0
Window {
width: 400
height: 200
Row {
anchors.fill: parent
function proxyFunction(page) {
children[page].func();
}
Page {callee: 1}
Page {callee: 0}
}
}
So here as you can see clicking Text in one of Pages triggers changing Text in another Page.
In your Page add these lines:
import bb.cascades 1.4
import bb.data 1.0
Page {
id: mobilePage // ADD THIS
property string m_amount // ADD THIS
property string m_phoneNumber // ADD THIS
// the rest of the code
onClicked: { // Buttons onClick
mobilePage.m_amount = amount.text // ADD THIS
mobilePage.m_phoneNumber = phonenumber.text // ADD THIS
var blogpage = goToWebView.createObject()
navigationPane.push(blogpage)
}
}
Now in payment.qml you can use this:
console.log(mobilePage.m_amount)
console.log(mobilePage.m_phoneNumber)
You have to create a property in payment.qml at page level.
Page{
Id: payment
Properly string phonenumber;
Properly string amount;
Container{
Label{
Id: lblphonenumber
text: phonenumber
}
Label{
Id: lblamout
text: amount
}
}
in your main.qml you have to do this:
onClicked: {
var blogpage = goToWebView.createObject();
blogpage.phonenumber = yourvalue;
blogpage.amount = yourvalue;
navigationPane.push(blogpage);
}
This is it :)

Blackberry10 cascades onTrigger

I have used a TabbedPane in this while clicking i need to call an another qml file here is the code am using but its not working
TabbedPane {
showTabsOnActionBar: tabs
sidebarState: SidebarState.VisibleCompact
Tab {
imageSource: "asset:///msg.png"
Page {
id: page1
actions: [
ActionItem {
onTriggered: {
var page = pageDefinition.createObject();
navigationPane.push(page);
}
attachedObjects: ComponentDefinition {
id: pageDefinition;
source: "x.qml"
}
}
]
actionBarVisibility: ChromeVisibility.Visible
}
}
can anyone send me code how to add Click event inside this function
Thanks
Here is an example for creating tabs for a different screen. You are in main tab to go next qml as follows:
Tab {
title: "Puppies"
NavigationPane {
id: navigationPane
Sample //this is one qml page as like Sample.qml
{
}
}
}
Tab {
title: "Kittens"
NavigationPane
{
id: testpage
Test //this is one qml page as like Test.qml
{
}
}
}
You can access other QML files by setting the id.

Resources