QML Dialog Element

Generic dialog component for creating custom dialogs. More...

Inherits Popup

Inherited by CommonDialog, DatePickerDialog, QueryDialog, TimePickerDialog, and TumblerDialog.

This element was introduced in qt-components 4.7.

List of all members, including inherited members

Properties

buttons : Item
content : Item
status : enum
style : Item
title : Item
visualParent : Item

Signals

accepted
rejected

Methods

accept
close
open
reject

Detailed Description

Dialogs are components for giving informations and asking for user inputs. They are shown on top of the whole screen or on top of an item, that is given with the visualParent property. Dialogs normally consist of three parts: a title, a content field (with a set of arbitrary components) and a button field. If another kind of dialog is needed, leave the title and buttons property empty and fill the content field.

Below is an example of a simple dialog:

 // Create a simple "Hello World"-Dialog
 Dialog {
   id: myDialog
   title: Rectangle {
     id: titleField
     height: 2
     width: parent.width
     color: "red"
   }

   content:Item {
     id: name
     height: 50
     width: parent.width
     Text {
       id: text
       font.pixelSize: 22
       anchors.centerIn: parent
       color: "white"
       text: "Hello Dialog"
     }
   }

   buttons: ButtonRow {
     style: ButtonStyle { }
       anchors.horizontalCenter: parent.horizontalCenter
       Button {text: "OK"; onClicked: myDialog.accept()}
     }
   }

The size computing dialog components of MeeGo works in the following way: The height for each field (that means, title, content or button field) is computed according to the children the field has, so whenever defining a field, a height must be distributed. On the other side, the dialog tries to fill the width of the parent minus some margins, so it is good style to have a "width: parent.width" for each field.

The Dialog class delivers the most flexible way to create dialogs. For easier handling consider using the convenienence classes like SelectionDialog, MultiSelectionDialog or QueryDialog.

Property Documentation

buttons : Item

The item to be placed inside the dialog buttons area. Normally one button or a row with buttons is set here.

content : Item

The Item to be placed inside the dialog content area.

status : enum

This property holds the current status.

DialogStatus.Opening - The animation for opening the dialog is running
DialogStatus.Opened - The dialog has been opened and is visible
DialogStatus.Closing - The animation for closing the dialog is running
DialogStatus.Closed - The dialog is closed and invisible

style : Item

Styling for the component.

title : Item

List of Items to be placed inside the dialog title area.

visualParent : Item

The visualParent property determines in which part of the application window the dialog appears.

Whenever a dialog is shown, a fader darkens the background and the dialog centers inside this area. Mouse clicks are not distributed to this background area (that is the dialog gets modal). Normally the background comprises the whole screen, but sometimes it is desired to just fade out a special part of the application. This is for example the case, when the toolbar should not be faded out.

The following snippet displays a dialog inside the left half of the page:

   PageStackWindow {
   id: rootWindow

   initialPage: Page {
   id: emptyPage
   Rectangle {id: leftRect; x: 0; y:0; width: parent.width/2; height: parent.height}
   tools: ToolBarLayout {
           id: toolbar
           ToolIcon {iconId: "toolbar-back"}
       }
    }

   Dialog {
       id: myDialog
       visualParent: leftRect
       title:   Rectangle {id: tr; height: 20;  width: parent.width; color: "red"}
       content: Rectangle {id: cr; height: 240; width: parent.width; color: "blue"}
       buttons: Rectangle {id: br; height: 20;  width: parent.width; color: "green"}
   }
   Component.onCompleted: myDialog.open();
 }

If you change the visualParent to pageStack, the dialog will lay over the whole page, but not over the toolbar. When you do not bind this property to an Item, the dialog searches for the window element and thereafter appear on top of the whole window.

Signal Documentation

Dialog::accepted ()

This signal is fired when the function accept() is called. Normally this signal is associated with the "Ok" or "Save" button.

Dialog::rejected ()

This signal is fired when the function reject() is called. Normally this signal is associated with the "Cancel" or "Delete" button.

Method Documentation

Dialog::accept ()

Closes the dialog and fires the accepted signal.

Dialog::close ()

Closes the dialog. Neither the accepted nor the rejected signal is emitted.

Dialog::open ()

Opens the dialog.

Dialog::reject ()

Closes the dialog and fires the rejected signal.

Contents