×

Discussion Board

Results 1 to 5 of 5
  1. #1
    Registered User
    Join Date
    Apr 2012
    Posts
    20

    Can't create a native looking dialog

    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:

    Code:
    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

  2. #2
    Super Contributor
    Join Date
    Jun 2006
    Location
    India
    Posts
    3,037

    Re: Can't create a native looking dialog

    Use anchors property for top, bottom, left and right margin. buttons look fine to me.
    Use [URL="http://qt.nokia.com/products/qt-quick/"]Qt-Quick[/URL] to make your application UI more attractive.

    [URL="http://store.ovi.com/content/271896"]http://store.ovi.com/content/271896[/URL] | [URL="http://store.ovi.com/content/276199"]http://store.ovi.com/content/276199[/URL] |[URL="http://store.ovi.com/content/276202"] http://store.ovi.com/content/276202[/URL] | [URL="http://store.ovi.com/content/280827"]http://store.ovi.com/content/280827[/URL]

  3. #3
    Registered User
    Join Date
    Apr 2012
    Posts
    20

    Re: Can't create a native looking dialog

    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.

  4. #4
    Super Contributor
    Join Date
    Jun 2006
    Location
    India
    Posts
    3,037

    Re: Can't create a native looking dialog

    Quote Originally Posted by ZuLuuuuuu View Post
    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.
    Use [URL="http://qt.nokia.com/products/qt-quick/"]Qt-Quick[/URL] to make your application UI more attractive.

    [URL="http://store.ovi.com/content/271896"]http://store.ovi.com/content/271896[/URL] | [URL="http://store.ovi.com/content/276199"]http://store.ovi.com/content/276199[/URL] |[URL="http://store.ovi.com/content/276202"] http://store.ovi.com/content/276202[/URL] | [URL="http://store.ovi.com/content/280827"]http://store.ovi.com/content/280827[/URL]

  5. #5
    Registered User
    Join Date
    Apr 2012
    Posts
    20

    Re: Can't create a native looking dialog

    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:

    Code:
    // 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();
                         }
    }

Similar Threads

  1. query dialog same as call divert in native phone application
    By rohit.shah in forum Symbian User Interface
    Replies: 2
    Last Post: 2010-12-15, 03:59
  2. Replies: 6
    Last Post: 2010-09-16, 15:43
  3. Is there native dialog for editing Calendar and Note?
    By daveice in forum Symbian User Interface
    Replies: 4
    Last Post: 2009-06-17, 07:10
  4. How to invoke native dialog describing incoming message
    By elviin in forum Symbian User Interface
    Replies: 3
    Last Post: 2009-04-23, 09:43

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •