How to create a message dialog using QML Control elements(such as combobox, textfield, checkbox..) - combobox

Question

I want to create a message dialog in the following way
For example:My combobox has 2 name, “chkbx”(symbolic name for the checkbox), “txtedt”(symbolic name for the text field).
Whenever i select chkbox or txtedt from combobox drop down list, then my combo box should connect me to actual checkbox and textedit element respectively.
I have a “show dialog” button on status bar when i press that button it should popup selected option(checkbox or line edit)
Please suggest me how can i do it.
EDIT Here is the code and the problem i am facing with combobox options is, neither i am not able to get icons in my message dialog nor i dont know how i can see checkbox or line edit in message dialog, i am a beginner and struggling to explore the tricky ways used in QML..
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Dialogs 1.1
import QtQuick.Window 2.0
Item {
id: root
width: 580
height: 400
SystemPalette { id: palette }
clip: true
//! [messagedialog]
MessageDialog {
id: messageDialog
visible: messageDialogVisible.checked
modality: messageDialogModal.checked ? Qt.WindowModal : Qt.NonModal
title: windowTitleField.text
text: customizeText.checked ? textField.text : ""
informativeText: customizeInformativeText.checked ? informativeTextField.text : ""
onButtonClicked: console.log("clicked button " + clickedButton)
onAccepted: lastChosen.text = "Accepted " +
(clickedButton == StandardButton.Ok ? "(OK)" : (clickedButton == StandardButton.Retry ? "(Retry)" : "(Ignore)"))
onRejected: lastChosen.text = "Rejected " +
(clickedButton == StandardButton.Close ? "(Close)" : (clickedButton == StandardButton.Abort ? "(Abort)" : "(Cancel)"))
onHelp: lastChosen.text = "Yelped for help!"
onYes: lastChosen.text = (clickedButton == StandardButton.Yes ? "Yeessss!!" : "Yes, now and always")
onNo: lastChosen.text = (clickedButton == StandardButton.No ? "Oh No." : "No, no")
}
//! [messagedialog]
Column {
anchors.fill: parent
anchors.margins: 12
spacing: 8
Text {
color: palette.windowText
font.bold: true
text: "Message dialog properties:"
}
CheckBox {
id: messageDialogModal
text: "Modal"
checked: true
Binding on checked { value: messageDialog.modality != Qt.NonModal }
}
CheckBox {
id: customizeTitle
text: "Window Title"
checked: true
width: parent.width
TextField {
id: windowTitleField
anchors.right: parent.right
width: informativeTextField.width
text: "Alert"
}
}
Row {
Text {
text: "Combo box items and icon selection:"
}
spacing: 8
function createIcon(str) {
switch(str) {
case Critical:
messageDialog.icon = StandardIcon.Critical
console.log("Critical")
break;
case Question:
messageDialog.icon = StandardIcon.Question
break;
case checkbox:
//how to add checkbox here in order to show it in my message dialog ?
break;
case textedit:
//how to add textedit here in order to show it in message dialog ?
break;
default:
break
}
}
ComboBox {
id : cbox
editable: true
currentIndex: 0
model: ListModel {
id: cbItems
ListElement { text: "Critical"}
ListElement { text: "Question"}
ListElement { text: "checkbox"}
ListElement { text: "textedit"}
}
onCurrentIndexChanged: console.debug(cbItems.get(currentIndex).text)
onAccepted: parent.createIcon(cbItems.get(currentIndex).text)
}
}
CheckBox {
id: customizeText
text: "Primary Text"
checked: true
width: parent.width
TextField {
id: textField
anchors.right: parent.right
width: informativeTextField.width
text: "Attention Please"
}
}
CheckBox {
id: customizeInformativeText
text: "Informative Text"
checked: true
width: parent.width
TextField {
id: informativeTextField
anchors.right: parent.right
width: root.width - customizeInformativeText.implicitWidth - 20
text: "Be alert!"
}
}
Text {
text: "Buttons:"
}
Flow {
spacing: 8
width: parent.width
property bool updating: false
function updateButtons(button, checked) {
if (updating) return
updating = true
var buttons = 0
for (var i = 0; i < children.length; ++i)
if (children[i].checked)
buttons |= children[i].button
if (!buttons)
buttons = StandardButton.Ok
messageDialog.standardButtons = buttons
updating = false
}
CheckBox {
text: "Help"
property int button: StandardButton.Help
onCheckedChanged: parent.updateButtons(button, checked)
}
CheckBox {
text: "Close"
property int button: StandardButton.Close
onCheckedChanged: parent.updateButtons(button, checked)
}
CheckBox {
text: "Cancel"
property int button: StandardButton.Cancel
onCheckedChanged: parent.updateButtons(button, checked)
}
}
}
Rectangle {
anchors {
left: parent.left
right: parent.right
bottom: parent.bottom
}
height: buttonRow.height * 1.2
color: Qt.darker(palette.window, 1.1)
border.color: Qt.darker(palette.window, 1.3)
Row {
id: buttonRow
spacing: 6
anchors.verticalCenter: parent.verticalCenter
anchors.left: parent.left
anchors.leftMargin: 12
width: parent.width
Button {
text: "Show Dialog"
anchors.verticalCenter: parent.verticalCenter
onClicked: messageDialog.open()
}
Button {
text: "Close"
anchors.verticalCenter: parent.verticalCenter
onClicked: messageDialog.close()
}
}
}
}

Answer 1

I still can't understand what are you going to do. Assume, you want some custom dialog with varying content. First of all, I guess MessageDialog is not good idea just because you cannot define custom controls inside it. But you can create a custom one.
Simple example:
Popup.qml
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Window {
id: mypopDialog
title: "MyPopup"
width: 300
height: 100
flags: Qt.Dialog
modality: Qt.WindowModal
property int popupType: 1
property string returnValue: ""
ColumnLayout {
anchors.fill: parent
anchors.margins: 10
RowLayout {
Layout.fillWidth: true
Layout.fillHeight: true
spacing: 20
Image {
source: popupType == 1 ? "combo.png" : "edittext.png"
}
Loader {
id: loader
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
sourceComponent: popupType == 1 ? comboboxComponent : editboxComponent
property string myvalue : popupType == 1 ? item.currentText : item.text
Component {
id: comboboxComponent
ComboBox {
id: comboBox
model: ListModel {
ListElement { text: "Banana" }
ListElement { text: "Apple" }
ListElement { text: "Coconut" }
}
}
}
Component {
id: editboxComponent
TextEdit {
id: textEdit
}
}
}
}
Rectangle {
height: 30
Layout.fillWidth: true
Button {
text: "Ok"
anchors.centerIn: parent
onClicked: {
returnValue = loader.myvalue;
mypopDialog.close();
}
}
}
}
}
Here I use Loader to load appropriate content according to popupType property (1 - combobox, 2 - textedit)
So now you can use this file in any place where you want.
import QtQuick 2.2
import QtQuick.Controls 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.0
Button {
text: "Test dialog"
onClicked: {
var component = Qt.createComponent("Popup.qml");
if (component.status === Component.Ready) {
var dialog = component.createObject(parent,{popupType: 1});
dialogConnection.target = dialog
dialog.show();
}
}
Connections {
id: dialogConnection
onVisibleChanged: {
if(!target.visible)
console.log(target.returnValue);
}
}
Here I use Connections to get back some result from the dialog. If you don't need it just remove the Connections item

Answer 2

You can use this
For example :
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import QtQuick.Dialogs 1.2
import QtQuick.Layouts 1.1
import QtQuick.Window 2.12
Window {
visible: true
width: 640
height: 480
title: qsTr("main 4")
color: "white"
Button {
onClicked: customMessage.open();
}
// Create Object dialog box
Dialog {
id: customMessage
width: 300 // Set the width of the dialog, which works on the desktop, but it does not work on Android
height: 200 // Set the height of the dialog, which works on the dekstop, but does not work on Android
// Create the contents of the dialog box
contentItem: Rectangle {
width: 600 // Set the width, necessary for Android-devices
height: 500 // Set the height, necessary for Android-devices
color: "#f7f7f7" // Set the color
CheckBox { z: 1;text: 'check it!'}
ComboBox {
z: 1
anchors.right: parent.right
}
// The area for the dialog box message
Rectangle {
anchors.left: parent.left
anchors.right: parent.right
anchors.top: parent.top
anchors.bottom: dividerHorizontal.top
color: "#f7f7f7"
Label {
id: textLabel
text: qsTr("Hello, World!!!")
color: "#34aadc"
anchors.centerIn: parent
}
}
// Create a horizontal divider with the Rectangle
Rectangle {
id: dividerHorizontal
color: "#d7d7d7"
height: 2
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: row.top
}
Row {
id: row
height: 100 // Set height
anchors.bottom: parent.bottom
anchors.left: parent.left
anchors.right: parent.right
Button {
id: dialogButtonCancel
anchors.top: parent.top
anchors.bottom: parent.bottom
// Set width button halfway line minus 1 pixel
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Cancel")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
Rectangle {
id: dividerVertical
width: 2
anchors.top: parent.top
anchors.bottom: parent.bottom
color: "#d7d7d7"
}
Button {
id: dialogButtonOk
anchors.top: parent.top
anchors.bottom: parent.bottom
width: parent.width / 2 - 1
style: ButtonStyle {
background: Rectangle {
color: control.pressed ? "#d7d7d7" : "#f7f7f7"
border.width: 0
}
label: Text {
text: qsTr("Ok")
color: "#34aadc"
verticalAlignment: Text.AlignVCenter
horizontalAlignment: Text.AlignHCenter
}
}
onClicked: customMessage.close()
}
}
}
}
}