I have written a QT Quick program use TabView. When I click the botton b1 which is in Tabview, the program should call show_text() and print the text of b1, but it print "ReferenceError: b1 is not defined". Any suggestion will be appreciated, thanks.
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.1
ApplicationWindow {
function show_text() {
console.log(b1.text)
}
TabView {
id: tv
Tab {
id: tab1
Button{
id: b1
text:"b1's text"
onClicked: {
//console.log(b1.text)
show_text()
}
}
}
}
}
Pass the object as a parameter
import QtQuick 2.2
import QtQuick.Controls 1.1
import QtQuick.Window 2.1
ApplicationWindow {
function show_text(myobject) {
console.log(myobject.text)
}
TabView {
id: tv
Tab {
id: tab1
Button{
id: b1
text: "b1's text"
onClicked: {
show_text(b1)
}
}
}
}
}
You can access in your object with this example.
ApplicationWindow {
function show_text() {
console.log(tv.b1Text);
}
TabView {
id: tv
property alias b1Text: b1.text
Tab {
id: tab1
Button{
id: b1
text:"b1's text"
onClicked: {
//console.log(b1.text)
show_text()
}
}
}
}
}
Related
I'm trying to open a "About" dialog from the menubar.
I have a MainMenuBar.qml that looks like this:
import QtQuick 2.12
import './dialogs'
Labs.MenuBar {
// Various menus omitted
AboutDialog {
id: about_dialog
}
Labs.Menu {
title: qsTr('&Help')
Labs.MenuItem {
text: qsTr('&About')
onTriggered: about_dialog.open()
}
}
}
And my AboutDialog.qml:
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.13
Dialog {
title: qsTr('id_about')
width: 500
height: 350
standardButtons: Dialog.Ok
Page {
anchors.fill: parent
header: RowLayout {
Image {
Layout.margins: 16
source: "../ic_home.png"
}
}
Label {
anchors.fill: parent
anchors.margins: 32
wrapMode: Text.WordWrap
text: qsTr("Hello world")
}
}
}
When clicking "About" I get:
/src/MainMenuBar.qml: QML Dialog: cannot find any window to open popup in.
I suppose that happens because I am opening it from the menubar and not from a window - is that possible? What should I do?
Nevermind, I figured it out.
AboutDialog.qml shouldn't be declared in MainMenuBar.qml, should be declared in main.qml instead.
MainMenuBar.qml
import QtQuick 2.12
import './dialogs'
Labs.MenuBar {
// Various menus omitted
Labs.Menu {
title: qsTr('&Help')
Labs.MenuItem {
text: qsTr('&About')
onTriggered: about_dialog.open()
}
}
}
main.qml
Item {
MainMenuBar { }
AboutDialog {
id: about_dialog
}
}
my code
AppDelegate.js for global variables
.pragma library
var appDelegate= {}
MyApp.js
Qt.include("AppDelegate.js")
function AppDelegate(){
}
AppDelegate.prototype.doSomething=function() {
console.log("vvvvvvvvvvvvv")
}
AppDelegate.prototype.doSomething1=function() {
console.log("AAAAAAAAAAAAAA")
}
//-------------------------------------------------------
function initApp(){
appDelegate=new AppDelegate()
appDelegate.doSomething()
appDelegate.doSomething1()
}
MyApp.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import "MyApp.js" as MyApp
ApplicationWindow {
visible: true
title: "System Dialogs Gallery"
width: 580
height: 480
TabView {
anchors.fill: parent
anchors.margins: 8
Tab {
id: controlPage
title: "File"
FileDialogs { }
}
}
Component.onCompleted: {
MyApp.initApp()
}
}
it works well and output is
qml: vvvvvvvvvvvvv
qml: AAAAAAAAAAAAAA
but if I call from other .js .qml file
ColorDialogs.js
Qt.include("AppDelegate.js")
function doit(){
appDelegate.doSomething1()
}
ColorDialogs.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import "ColorDialogs.js" as ColorDialogs
Item {
Component.onCompleted: {
ColorDialogs.doit()
}
}
it reports error:
ColorDialogs.js: : TypeError: Property 'doSomething1' of object [object Object] is not a function
Your comment welcome
----------------------------updated
I'm trying to put the business logic in Main.qml and the UI in MainForm.ui.qml but I can't connect both by widget id.
MainForm.ui.qml:
import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Page {
id: page
header: TabBar { ... }
StackLayout {
id: stack
Pane {
Flow {
TextField {
id: theText
}
property alias sendBtn: sendBtn
Button {
id: sendBtn
}
}
}
}
}
Main.qml:
import QtQuick 2.8
import QtQuick.Window 2.2
Window {
visible: true
width: 640
height: 480
title: qsTr("Hello World")
MainForm {
anchors.fill: parent
sendBtn {
onClicked: backend.sendTextToServer( theText.text )
}
}
}
Qt Creator says : Invalid property name "sendBtn" (M16)
Running failed with the following messages:
QQmlApplicationEngine failed to load component
qrc:/Main.qml:12 Cannot assign to non-existent property "sendBtn"
when you put property alias sendBtn: sendBtn inside Pane is interpreted as being a Pane property so you can not access it that way, it is correct to place it in the context of Page.
import QtQuick 2.8
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
Page {
id: page
property alias sendBtn: sendBtn
property alias theText: theText
header: TabBar { ... }
StackLayout {
id: stack
Pane {
Flow {
TextField {
id: theText
}
Button {
id: sendBtn
}
}
}
}
}
I am trying to add a tabButton to TabBar dynamically on pressing a button but i have spent a lot of time searching but i am not getting how to add, below is the code which i am working on :
MyTabButton.qml
import QtQuick 2.4
import QtQuick.Controls 2.2
Item
{
property int BtnWidth:0
property int BtnHeight:0
property string BtnText: ""
property bool isChecked : false
TabButton
{
id:tabBtn
text:BtnText
width:BtnWidth
height:BtnHeight
}
}
MainForm.qml
import QtQuick 2.4
import QtQuick.Controls 2.2
Rectangle
{
Button
{
id:button
width:100
height:100
anchors.top:parent.top
text:qStr("Add")
onClicked{
//How to add logic here to add tab in below tabBar.
}
}
TabBar
{
id:tabBar
anchors.top:button.bottom
width:500
height:500
}
}
Example:
import QtQuick 2.7
import QtQuick.Controls 2.0
ApplicationWindow {
id: window
width: 360
height: 630
visible: true
header: TabBar {
id: tabBar
}
Component {
id: tabButton
TabButton { }
}
Button {
text: "Add"
anchors.centerIn: parent
onClicked: {
var tab = tabButton.createObject(tabBar, {text: "Tab " + tabBar.count})
tabBar.addItem(tab)
}
}
}
You need to have something like a Component that is a TabButton. Your file MyTabButton.qml won't result in a TabButton, but instead an Item containing a TabButton, but with this, your TabBar does not know what to do.
So your file will need to have TabButton as root element
//MyTabButton.qml
import QtQuick 2.4
import QtQuick.Controls 2.2
TabButton
{
id: tabBtn
// customize as you like
}
Then you create a Component of this in your file where you want to use it. (e.g. main.qml)
import QtQuick 2.4
import QtQuick.Controls 2.0
ApplicationWindow {
width: 800
height: 600
visible: true
TabBar {
id: tabBar
width: 800
height: 50
}
// The component is like a factory for MyTabButtons now.
// Use myTabButton.createObject(parent, jsobject-with-property-assignments) to create instances.
Component {
id: myTabButton
MyTabButton {
/// EDIT ACCORDING TO YOUR COMMENTS ***
Connections {
target: tabBar
onCurrentIndexChanged: doSomething()
}
/// EDIT OVER
}
}
Button {
anchors.centerIn: parent
// Create a object out of the component, and add it to the container
onClicked: tabBar.addItem(myTabButton.createObject(tabBar /*, { object to set properties }*/))
}
}
TabBar inherits Container, which has addItem().
Try it in Window
Row {
anchors.fill: parent
TabBar {
id: tabBar
currentIndex: 0
width: parent.width - addButton.width
TabButton { text: "TabButton" }
}
Component {
id: tabButton
TabButton { text: "TabButton" }
}
Button {
id: addButton
text: "+"
flat: true
onClicked: {
tabBar.addItem(tabButton.createObject(tabBar))
console.log("added:", tabBar.itemAt(tabBar.count - 1))
}
}
}
How can I move focus from one control to next one inside QML form?
By default it works with Tab button but I need to change it to Enter.
All the control are ordered with Gridlayout with 2 columns.
I've defined a new component, TextFieldMoveOnReturn.qml
import QtQuick 2.0
import QtQuick.Controls 1.1
TextField {
Keys.onReturnPressed: nextItemInFocusChain().forceActiveFocus()
}
If you use this one instead of TextField, you get the required behaviour
edit a better solution: define a new component GridLayoutNextOnReturn.qml
import QtQuick 2.0
import QtQuick.Layouts 1.1
GridLayout {
Keys.onReturnPressed: {
for (var i = 0; i < children.length; ++i)
if (children[i].focus) {
children[i].nextItemInFocusChain().forceActiveFocus()
break
}
}
}
and use normal TextField inside - works like a charm
In order to make it more robust and flexible, you should make same behaviour
for Tab and Enter/Return keys.
Handle keyPressed event and use KeyNavigation.tab instead of nextItemInFocusChain to focus next element as follow:
import QtQuick 2.12
import QtQuick.Controls 1.12
Column {
TextField {
id: field1
KeyNavigation.tab: field2
activeFocusOnTab: true
Keys.onReturnPressed: KeyNavigation.tab.forceActiveFocus();
}
TextField {
id: field2
KeyNavigation.tab: field3
activeFocusOnTab: true
Keys.onReturnPressed: KeyNavigation.tab.forceActiveFocus();
}
TextField {
id: field3
KeyNavigation.tab: field1
activeFocusOnTab: true
Keys.onReturnPressed: KeyNavigation.tab.forceActiveFocus();
}
}
So you controlled order of focus and users can use both tab and return keys interchangeably which results better UX.
Whenever you want to change order, just change KeyNavigation.tab values :)
Note: I extremely suggest you to avoid using nextItemInFocusChain because of future changes and flexibility
You can use onEditingFinished:
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Rectangle {
width: 400
height: 400
GridLayout {
anchors.fill: parent
columns: 2
Label {
text: "Name"
}
TextField {
onEditingFinished: addressEdit.focus = true
}
Label {
text: "Address"
}
TextField {
id: addressEdit
}
}
}
Use Keys.onReturnPressed and forceActiveFocus()
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
Rectangle {
width: 400
height: 400
GridLayout {
anchors.fill: parent
columns: 2
Label {
text: "Name"
}
TextField {
Keys.onReturnPressed: organizationEdit.forceActiveFocus()
}
Label {
text: "Organization"
}
TextField {
id: organizationEdit
Keys.onReturnPressed: addressEdit.forceActiveFocus()
}
Label {
text: "Address"
}
TextField {
id: addressEdit
}
}
}