Creating a Symbian's like application menu at S60

Question

I wanted to make an app which is when started it shows a menu. It is just like when you open a Messaging app in S60. Here is a screenshot.

How do I make it? I have tried to make the centralWidget of the QMainWindow as QMenu, and adding QAction to the QMenu. But when I'm running it, the app don't show anything. And I have tried to make the QMenu using QMenuBar. And it is show okay. But I can't use the up/down key to select menu in the device. And when I press the options key (Qt::PositiveSoftKey), the menubar shows up too. And I didn't even add that to menuBar() which is owned by QMainWindow.

Here is my first code:

QAction* act1= new QAction(tr("act1"),this);
QObject::connect(tes,SIGNAL(triggered()),this,SLOT(close()));
QAction* act2= new QAction(tr("act2"),this);
QObject::connect(tes,SIGNAL(triggered()),this,SLOT(close()));
QMenu* menu = new QMenu(this);
menu->addAction(act1);
menu->addAction(act2);
setCentralWidget(menu);

And it shows nothing at the apps.

And here is my second try:

Qt Code: Switch view
QAction* act1= new QAction(tr("act1"),this);
QObject::connect(tes,SIGNAL(triggered()),this,SLOT(close()));
QAction* act2= new QAction(tr("act2"),this);
QObject::connect(tes,SIGNAL(triggered()),this,SLOT(close()));
QMenuBar* menubar = new QMenuBar(this);
QMenu* menu = menubar->addMenu(tr("menu"));
menu->addAction(act1);
menu->addAction(act2);
setCentralWidget(menu);

It shows the menu. But when I deploy to the device, I can't use the keypad to select the menu. And at the simulator, if I click other place than the QAction item, the menu lost.

I am using another approach by using QPushButton with Vertical Layout. Here is the code:

QWidget* centralWidget = new QWidget(this);
QScrollArea* scrollArea = new QScrollArea(this);
scrollArea->setWidget(centralWidget);
scrollArea->setWidgetResizable(true);
setCentralWidget(scrollArea);

QVBoxLayout* centralLayout = new QVBoxLayout(centralWidget);
QPushButton* button1 = new QPushButton(tr("button 1"));
QPushButton* button2 = new QPushButton(tr("button 2"));
centralLayout->addWidget(button1);
centralLayout->addWidget(button2);
centralLayout->setContentsMargins(0,0,0,0);
button1->setFocus();

Here it's look:

Okay, and that's look good enough. But if that's have 8 button. If it is only have 2 button, it looks like this:

looks kind of weird, huh? Any way to prevent this?

Answer 1

For me, the UI that you're trying to replicate is a list of options, so, why don't try to create the UI based on a list widget?

Asumming that you're going to use a list, you have to options from which you have to choose based on your needs and your app requirements:

• Qt Widgets: Available in all the Qt supported Plataforms. Created for desktop and works great on it, but in feel strange on mobile devices. Take a look to the QListWidget and QListView.

• Qt Quick: It isn't available for S40 phones or S60 3rd edition, not available for non-touch phones, basically. Created for "touch enabled UI's", it doesn't offer a stable set of widgets (buttons, comboboxes) yet, but it offers a set of primitives (like rectangles or images) that gives you a lot of freedom to create your UI's and it looks pretty good. I think that this is what Lucian used to create the UI from his answer. This examples could be of particular interest: http://doc.qt.io/archives/qt-4.7/all-examples.html

Run the QtDemo to see all the examples live!

Hope it helps!

EDIT: Adding example of QListWidget

MainWindow::MainWindow(QWidget *parent)
    : QMainWindow(parent), ui(new Ui::MainWindow)
{
    ui->setupUi(this);

    for(int i=0; i<10; i++) {
        QListWidgetItem *item = new QListWidgetItem(QIcon("Qt.png"), QString("Item %1").arg(i));
        ui->listWidget->insertItem(i, item);
    }
    ui->listWidget->setIconSize(QSize(64, 64));

    connect(ui->listWidget, SIGNAL(itemClicked(QListWidgetItem*)), this, SLOT(onItemClicked(QListWidgetItem*)));
}

void MainWindow::onItemClicked(QListWidgetItem *item)
{
    QMessageBox::information(this, "", QString("%1 pressed").arg(item->text()));
}