Can't create a native looking dialog

[ZuLuuuuuu]

Hello,

I am trying to create a native looking dialog, a dialog very similar to [1] but I haven't succeeded yet. The source code of the dialog I have created is this:

import QtQuick 1.1
import com.nokia.symbian 1.1

CommonDialog {
    titleText: "Enter Coordinates"

    content: Column {
        id: contentColumn
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: platformStyle.paddingMedium
        spacing: platformStyle.paddingMedium

        TextField {
            id: textFieldAltitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Altitude"
        }

        TextField {
            id: textFieldLatitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Latitude"
        }

        TextField {
            id: textFieldLongitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Longitude"
        }
    }

    buttons: [
        ButtonRow {
            anchors.left: parent.left
            anchors.right: parent.right
            anchors.margins: platformStyle.paddingMedium

            Button {
                text: "OK"
            }
            Button {
                text: "Cancel"
            }
        }
    ]
}

The screenshot of it is this:

http://postimage.org/image/n83fcxo2b/

The problems are listed below:

- There should be a "top" margin above "Altitude" text field and below the horizontal blue line but there isn't.

- There should be a "bottom" margin below "Longitude" text field and above the dialog buttons but there isn't.

- There should be top and bottom margins above and below the dialog buttons but there aren't.

- The buttons don't look like the dialog buttons other native apps have. Should I use something other than ButtonRow? The buttons on other native apps look like this: [1]

- What are the recommended padding sizes for such margins, I used platformStyle.paddingMedium but is that correct?

[1] http://www.developer.nokia.com/Resou...dialogs_07.jpg

[kkrish]

Use anchors property for top, bottom, left and right margin. buttons look fine to me.

[ZuLuuuuuu]

When I use anchors.top then top is aligned well but the bottom gets cropped but I fixed it by manually calculating the height and adding the margins.

I also fixed the buttons. Appearently there is a property called "buttonTexts" in CommonDialog element which you can set as ["OK", "Cancel] and it now looks just like the other native apps. So ButtonRow should not be used in cases where you use CommonDialog and you need standard buttons.

And also I looked at the source code of Dialog element and they, as well, use platformStyle.paddingMedium for some of the margins.

[kkrish]

When I use anchors.top then top is aligned well but the bottom gets cropped but I fixed it by manually calculating the height and adding the margins.

I would suggest not to se manually calculated margins. Find the way by anchors, because in different screen size, this will be different.

[ZuLuuuuuu]

Yes, I actually used both of them, calculated and set the height of the dialog and used the anchors. But I needed to first calculate and set the height manually since otherwise the dialog's height wasn't matching the contents actual height and the content got cropped.

The new code looks like this:

// import QtQuick 1.0 // to target S60 5th Edition or Maemo 5
import QtQuick 1.1
import com.nokia.symbian 1.1

CommonDialog {
    titleText: "Enter Coordinates"

    content: Column {
        id: contentColumn
        height: textFieldAltitude.height * 3 + platformStyle.paddingMedium * 4
        anchors.top: parent.top
        anchors.left: parent.left
        anchors.right: parent.right
        anchors.margins: platformStyle.paddingMedium
        spacing: platformStyle.paddingMedium

        TextField {
            id: textFieldAltitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Altitude"
        }

        TextField {
            id: textFieldLatitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Latitude"
        }

        TextField {
            id: textFieldLongitude
            anchors.left: parent.left
            anchors.right: parent.right
            placeholderText: "Longitude"
        }
    }

    buttonTexts: ["OK", "Cancel"]

    onButtonClicked: if (index == 0) {
                         accept();
                     }
                     else
                     {
                         reject();
                     }
}