Home · All Classes · Grouped Classes · Annotated · Functions

Image Viewer Tutorial: Part 1

Welcome to the Image Viewer Tutorial.

Image Viewer Tutorial Contents

UI Specification

The Image Viewer application will run on a Greenphone SDK 4.3. The application consists of several screens.

List Screen

The list Screen shows a list of images. Each list item contains:

It shows all images available on the content system.



Image Screen

The image screen shows the selected image. If the image is smaller than the screen, the image is not zoomed in. If the image is larger than the screen the image is fitted.



Info Dialog

The info dialog displays information about the current image. The following informations shall be displayed:




List ScreenImage ScreenInfo ScreenRename Dialog






For the parts 1-7 the source code can be found in examples/imageviewer

Initial Setup

First the project file has to be created (iviewer.pro) for the qtopia build system.

File: iviewer.pro

    qtopia_project(qtopia app)

    TARGET = iviewer
    CONFIG+=qtopia_main no_singleexec no_quicklaunch no_tr

    HEADERS += iviewer.h
    SOURCES += main.cpp iviewer.cpp

Here a qtopia application is declared (iviewer). The start code will be in main and the application in iviewer{.h,.cpp}.

File: main.cpp

    #include "iviewer.h"
    #include <qtopiaapplication.h>


"IViewer" is the class name and "iviewer" is the executable name. The syntax is described here.

Classes: QtopiaApplication

File: iviewer.h

    #ifndef IVIEWER_H
    #define IVIEWER_H

    #include <QStackedWidget>
    #include <QWidget>

    class IViewer : public QStackedWidget
        IViewer(QWidget *parent=0, Qt::WFlags f=0);


Classes: QStackedWidget, QWidget

The IViewer should be a QStackedWidget derived class. The widget stack will be used later to manage our screens. The constructor needs to have the QWidget and Qt::WindowFlags as parameters, due to the QTOPIA macros in main.cpp.

File: iviewer.cpp

    #include "iviewer.h"
    IViewer::IViewer(QWidget *parent, Qt::WFlags /*f*/)
    : QStackedWidget(parent)
        _listScreen  = 0;
        _imageScreen = 0;

Namespace: Qt

It is now time for the first run. qtopiamake and make must be called. When the QVFB emulator is running, the application can be started with ./iviewer. This should display an empty application in the emulator. Great!

The List Screen

The list screen will be derived from the QListWidget for convenience.

File: listscreen.h

    #ifndef LISTSCREEN_H
    #define LISTSCREEN_H

    #include <QListWidget>
    class IViewer;
    class QContentSet;
    class QContentSetModel;
    class QAction;
    class QKeyEvent;
    class ImageScreen;
    class InfoScreen;

    class ListScreen : public QListWidget
        ListScreen(IViewer *viewer);
        IViewer          *_viewer;


Classes: QListWidget

As parent, the iviewer is passed and the pointer is stored in _iviewer. The forward declaration (class IViewer) is used to avoid dependency with the created header files. Dependencies to qt/qtopia header files do not have to be handled.

File: listscreen.cpp

    #include "listscreen.h"
    #include "iviewer.h"
    ListScreen::ListScreen(IViewer *viewer)
    : QListWidget(viewer), _viewer(viewer)

The list widget is constructed and the _viewer is initialized. The project (iviewer.pro) should know about the new class. The following lines must be added to the .pro file:

File: iviewer.pro

    SOURCES += listscreen.cpp
    HEADERS += listscreen.h

Now, qtopiamake and make can be run again. The application should still display an empty screen. To see something useful, the screen in the iviewer has to be created and the list must be populated with some content. This will be the next step.


Copyright © 2008 Nokia Trademarks
Qtopia 4.3.3