Setting up the screen
The screen setup follows the typical screen pattern. The info screen is a so-called leaf screen. The whole navigation inside our application can be seen as a tree, with the list screen as the root node, the image screen as a child of the list screen and the info screen again as the last child of the image screen. Showing the info screen from the list screen is also wanted. This means the back functionality must be conditional now. Now it really depends where the user comes from and the information is not hardcoded.
In the tree navigation, it is recommended to avoid creating any circles as this make the back functionality very difficult to manage. The screen navigation model will be the following:
The info screen shall display information about the selected image. For every information item, a complex read-only form can now be implemented to display the items label and value. But luckily Qt has a more flexible and efficient way. The information will be presented using a html table where each row will be an information item.
In a new infoscreen.h file, the class InfoScreen is declared. It derives this time from a QTextEdit. The createActions(), createMenu() and setupUi() methods are added and the IViewer is passed as parent to the constructor. In addition, a setImage(const QContent& content) method is created in the class.
File: infoscreen.h
#ifndef INFOSCREEN_H
#define INFOSCREEN_H
#include <QWidget>
#include <QTextEdit>
#include <QKeyEvent>
#include <QContent>
class IViewer;
class InfoScreen : public QTextEdit
{
Q_OBJECT
public:
InfoScreen(IViewer *iviewer);
void setImage(const QContent &content);
private:
void setupUi();
void createActions();
void createMenu();
private:
IViewer *_viewer;
};
#endif
The infoscreen.cpp file will contains the skeleton from the header. The setupUi(), createActions(), and createMenu() methods must be called in the constructor.
The QTextEdit is set to read only in the setupUi() method.
void InfoScreen::setupUi()
{
setReadOnly(true);
}
In the setImage() method, two QStringLists are created: one for the keys and the other for the values. Those keys and values are populated and a html table is created. The table consists of rows (tr), headers (th) and data field (td). Finally, the html string is placed into the documents, using the setHtml() method.
This is a very useful approach, which gives flexibility in the information presentation.
void InfoScreen::setImage(const QContent &content)
{
QStringList keys;
QStringList values;
keys << "Name:";
values << content.name();
keys << "Type:";
values << content.type();
keys << "Size:";
values << QString("%1kB").arg(content.size()/1024);
keys << "Modified:";
values << content.lastUpdated().toString(Qt::LocalDate);
QString html = "<table>";
for (int i=0; i<keys.count(); i++) {
QString key = keys[i];
QString value = values[i];
html += QString("<tr><th>%1</th><td>%2</td></tr>").arg(key, value);
}
html += "</table>";
document()->setHtml(html);
}
To see the result, a "Show Info" action must be added to the image screen and then placed into the menu. The action should call a method named onShowInfo().
Prev|Top|Start Page|Next
