Settings menu UI implementation

Question

I'm trying to implement a BB10 settings menu, looking like the one in the Calendar app for example. The question here is, which components should I use? Using a ListView with an XML model looks great, but is incompatible with translation. Using a C++ model looks overkill for a simple menu with a couple of entries… There's probably an established pattern somewhere, but I can't find it.

Screenshot of the Calendar app settings view

Can you explain better what you mean by the "settings menu". I don't see a settings option in the calendar app. Perhaps a screenshot if you can might help. — hyarion, Apr 09 '13 at 12:49
The settings is accessible via the app menu (scroll down from the top of the screen). I added a screenshot. — Marc Plano-Lesay, Apr 09 '13 at 14:41

score 2 · Accepted Answer · answered Apr 09 '13 at 15:32

2

What you want is the expendable content property of the title bar:

answered Apr 09 '13 at 15:32

Benoit

1,922
16
25

I have an issue with that one. I tried to copy/paste the sample on the documentation, but the NDK and the phone are not recognizing kindProperties, FreeFormTitleBarKindProperties and TitleBarKind.FreeForm: SettingsPage.qml:93:25: FreeFormTitleBarKindProperties is not a type kindProperties: FreeFormTitleBarKindProperties – Marc Plano-Lesay Apr 12 '13 at 05:12
Yes forgotten about that. This is available for developer only since the SDK 1.1. Which is available for the devAlpha C and the next updates of Z10 – Benoit Apr 13 '13 at 07:23
OK, thanks. I'll use Hyarion's solution for now, I'll switch to yours when the new SDK will be available to everyone. – Marc Plano-Lesay Apr 13 '13 at 13:41

score 1 · Answer 2 · answered Apr 09 '13 at 15:57

I would create a QML object that you can re-use for each entry with properties for title and image.

So for example, something perhaps like this:

SettingEntry.qml

Container {
    property alias title:title.Text
    signal click()
    TextView {
        id: title
        text: "[title goes here]"
    }
    gestureHandlers: [
        TapHandler {
             onTapped: {
                 click();
             }                
        }
    ]
}

Then in your settings page you would use it like a normal object:

Page {
    Container {
        SettingEntry {
            title: "General"
            onClick: {
                //open general page
            }
        }
        SettingEntry {
            title: "Invitation Settings"
        }
    }
}

The above is obviously very simplified, you would want to include an icon image, add translation code and add visual adjustments like filling the width and padding.
It should however give you a good idea of where to start.

I also included a gesturehandler and signal to show you how to handle events such as a click.

I though there was a standardized way to do this. I'll do it that way, if there's not. Thanks for the code! — Marc Plano-Lesay, Apr 09 '13 at 17:36
There is a standardized way to do it with the expendable Area from the titleBar, which is what is used by the Calendar... — Benoit, Apr 11 '13 at 17:40

Settings menu UI implementation

2 Answers2