CODEWITHSUNDEEP
c++qmlblackberry-10blackberry-cascades
Marc Plano-Lesay
Marc Plano-Lesay

Reputation: 6958

Settings menu UI implementation

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

Upvotes: 0

Views: 290

Answers (2)

hyarion
hyarion

Reputation: 2251

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.

Upvotes: 1

Benoit
Benoit

Reputation: 1921

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

Upvotes: 2

Related Questions