Populating the list
To populate the list, the list is first cleared and then filled with data from the content set items. For each content, a QListWidgetItem is created. The icon for the list item is set based on the content file information. The text of the item is taken from the content name. It provides the image name, without the extension.
void ListScreen::populate()
{
clear();
foreach (QContent c, _cs->items()) {
QListWidgetItem *i = new QListWidgetItem(this);
QIcon icon(c.file());
i->setText(c.name());
i->setIcon(icon);
}
if (count() > 0) {
QListWidgetItem *i = item(0);
setCurrentItem(i);
}
}
If at least one item populates the list, the first item is set as the current item. The list has a concept of current item and selected items. To ensure that the current item is also the selected item, the selection mode setSelectionMode(QAbstractItemView::SingleSelection) is set in a separate setupUi() method, which is called from the constructor. (See QAbstractItemView).
void ListScreen::setupUi()
{
setSelectionMode(QAbstractItemView::SingleSelection);
setIconSize(QSize(32,32));
connect(this, SIGNAL(activated(QModelIndex)),
this, SLOT(onImageActivated(QModelIndex)));
createActions();
createMenu();
}
Now it is time for another try. The application should be rebuilt and launched. All png files in the $HOME/Documents folder should appear in the list with a small icon in front. To make the icons larger, setIconSize(QSize(32,32));, in the setupUi() method, can be changed to provide icons with a different size.
The next part will handle some actions...
Providing Actions to the list screen
From the specification, the list screen shall contain several actions (see QAction). To add the actions, they first have to be created and then added to the menu (see QMenu). The first action will be "Open". This action needs to be connected to a slot, called "onOpenImage()", then the slot has to be added to the header file. It is necessary to add Q_OBJECT to the class for meta object creation.
File: listscreen.cpp
void ListScreen::createActions()
{
_openAction = new QAction("Open", this);
connect(_openAction, SIGNAL(triggered()), this, SLOT(onOpenImage()));
_renameAction = new QAction("Rename", this);
connect(_renameAction, SIGNAL(triggered()), this, SLOT(onRenameImage()));
_deleteAction = new QAction("Delete", this);
connect(_deleteAction, SIGNAL(triggered()), this, SLOT(onDeleteImage()));
_showInfoAction = new QAction("Show Info", this);
connect(_showInfoAction, SIGNAL(triggered()), this, SLOT(onShowInfo()));
}
In the create menu method, the menu for this screen is retrieved and the created actions are added to this menu. The menu will be the options menu on the screen whenever this screen or any child of this screen has focus. (See QSoftMenuBar).
File: listscreen.cpp
void ListScreen::createMenu()
{
QMenu* menu = QSoftMenuBar::menuFor(this);
menu->addAction(_openAction);
menu->addAction(_renameAction);
menu->addAction(_deleteAction);
menu->addAction(_showInfoAction);
QSoftMenuBar::setLabel(this, Qt::Key_Back, "", "Exit", QSoftMenuBar::AnyFocus);
}
In the openImage function, we want to open the image that is currently selected. Since there is a mapping between the content model and the list, the current row can be retrieved from the list and used to lookup the row from the model.
File: listscreen.cpp
void ListScreen::onOpenImage()
{
openImage(currentIndex().row());
}
Later, this will be the place where the image screen is opened and the image set.
The application already has a "Back" softkey, which will exit the application. The title of this soft key can be changed to "Exit" by adding the following line at the end of the createMenu() method.
QSoftMenuBar::setLabel(this, Qt::Key_Back, "", "Exit", QSoftMenuBar::AnyFocus);
Adding Key Select default behaviour
In this list screen, it would be nice to open the image directly when the "Select" key (usually the center button on the direction pad) is pressed. There are two options here.
- 1. connect to signal activated(const QModelIndex &) of the list widget
- 2. override the keyPressed(QKeyEvent *event) method to intercept the Qt::Key_Select key.
Both will be described.
Opening image using signals and slots
In the setupUI method the following line is added:
connect(this, SIGNAL(activated(QModelIndex)),
this, SLOT(onImageActivated(QModelIndex)));
The signal is emitted, when the select button is pressed. It provides a model index. From the index, the row can be looked up again. So the onItemActivated(...) slot method is similar as the onOpenImage(...) method.
void ListScreen::onImageActivated(const QModelIndex& index)
{
openImage(currentIndex().row());
}
Opening image using key Events
As seen previously, the keyPressed(QKeyEvent) method has to be override to handle the Qt::Key_Select key. The keyPressed method is defined in the QWidget class. There is also the partner method keyReleased. Both take a QKeyEvent as parameter.
void ListScreen::keyPressEvent(QKeyEvent* event)
{
switch (event->key()) {
case Qt::Key_Select:
onOpenImage();
break;
default:
QListWidget::keyPressEvent(event);
break;
}
}
It is important to forward the keyevent to the base class for the other keys, as the QListWidget needs them.
Summary
Now, the Image Viewer is a small application, which lists all png files from the content store. It shows the files in a list with their thumbnails. The image can also be identified when "open image" is selected from the menu or via the select key.
The next step will be the image screen creation. This Image Screen displays the selected image and comes back to the list screen.
Prev|Top|Start Page|Next
